Merge pull request #209 from JsSucks/settings

Collection setting and other minor things

client/src/data/user.settings.default.json

@@ -171,10 +171,9 @@
                 "type": "drawer",
                 "settings": [
                     {
-                        "id": "kvp0",
-                        "type": "kvp",
-                        "text": "",
-                        "value": { "key": "kvpKey", "value":  "kvpValue" }
+                        "id": "e2ekvps",
+                        "type": ["kvp"],
+                        "value": []
                     }
                 ]
             }

client/src/structs/settings/setting.js

@@ -19,6 +19,7 @@ import KeybindSetting from './types/keybind';
 import FileSetting from './types/file';
 import GuildSetting from './types/guild';
 import ArraySetting from './types/array';
+import CollectionSetting from './types/collection';
 import KvpSetting from './types/kvp';
 import CustomSetting from './types/custom';
 
@@ -27,6 +28,7 @@ export default class Setting {
     constructor(args, ...merge) {
         args = args.args || args;
 
+        if (args.type instanceof Array) args.subtype = args.type[0], args.type = 'collection';
         if (args.type === 'color') args.type = 'colour';
 
         if (args.type === 'bool') return new BoolSetting(args, ...merge);
@@ -40,8 +42,9 @@ export default class Setting {
         else if (args.type === 'file') return new FileSetting(args, ...merge);
         else if (args.type === 'guild') return new GuildSetting(args, ...merge);
         else if (args.type === 'array') return new ArraySetting(args, ...merge);
-        else if (args.type === 'custom') return new CustomSetting(args, ...merge);
+        else if (args.type === 'collection') return new CollectionSetting(args, ...merge);
         else if (args.type === 'kvp') return new KvpSetting(args, ...merge);
+        else if (args.type === 'custom') return new CustomSetting(args, ...merge);
         else throw {message: `Setting type ${args.type} unknown`};
     }
 

client/src/structs/settings/types/collection.js

@@ -0,0 +1,49 @@
+/**
+ * BetterDiscord Collection Setting Struct
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Utils } from 'common';
+import ArraySetting from './array';
+import Setting from '../setting';
+
+export default class CollectionSetting extends ArraySetting {
+
+    constructor(args, ...merge) {
+        // The ArraySetting constructor will call createItem which requires this to be set
+        if (!(args.setting instanceof Setting)) args.setting = new Setting(args.setting || {type: args.subtype});
+
+        super(args, ...merge);
+    }
+
+    get setting() {
+        return this.args.setting;
+    }
+
+    /**
+     * Creates a new setting for this collection setting.
+     * @param {Setting} item Values to merge into the new setting (optional)
+     * @return {Setting} The new set
+     */
+    createItem(item) {
+        if (item instanceof Setting)
+            return item;
+
+        const merge = [...arguments].filter(a => a);
+        const setting = this.setting.clone(...merge);
+        setting.args.id = item ? item.args ? item.args.id : item.id : Math.random();
+
+        setting.setSaved();
+        setting.on('settings-updated', async event => {
+            await this.emit('item-updated', { item: setting, event, updatedSettings: event.updatedSettings });
+            if (event.args.updating_array !== this) await this.updateValue();
+        });
+        return setting;
+    }
+
+}

client/src/structs/settings/types/index.js

@@ -10,4 +10,5 @@ export { default as FileSetting } from './file';
 export { default as GuildSetting } from './guild';
 export { default as ArraySetting } from './array';
 export { default as KvpSetting } from './kvp';
+export { default as CollectionSetting } from './kvp';
 export { default as CustomSetting } from './custom';

client/src/structs/settings/types/kvp.js

@@ -16,6 +16,6 @@ export default class KvpSetting extends Setting {
      * The value to use when the setting doesn't have a value.
      */
     get defaultValue() {
-        return { key: 'Channel ID', value: 'Encryption Key' };
+        return { key: 'Key', value: 'Value' };
     }
 }

client/src/styles/partials/bdsettings/collection.scss

@@ -0,0 +1,57 @@
+.bd-formCollection {
+    display: flex;
+    flex-direction: column;
+
+    div:first-child {
+        flex: 1 1 auto;
+    }
+
+    .bd-collectionItem {
+        display: flex;
+        flex-grow: 1;
+        margin-top: 5px;
+
+        .bd-removeCollectionItem {
+            width: 20px;
+            flex: 0 1 auto;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            margin-bottom: 30px;
+
+            &:hover {
+                svg {
+                    fill: #FFF;
+                }
+            }
+
+            svg {
+                width: 16px;
+                height: 16px;
+                fill: #ccc;
+            }
+        }
+    }
+
+    .bd-newCollectionItem {
+        display: flex;
+        cursor: pointer;
+        align-self: flex-end;
+        justify-content: center;
+        align-items: center;
+        margin-right: 2px;
+
+        svg {
+            width: 16px;
+            height: 16px;
+            fill: #ccc;
+        }
+
+        &:hover {
+            svg {
+                fill: #FFF;
+            }
+        }
+    }
+}

client/src/styles/partials/bdsettings/index.scss

@@ -8,3 +8,4 @@
 @import './updater.scss';
 @import './window-preferences';
 @import './kvp';
+@import './collection';

client/src/ui/components/bd/setting/Collection.vue

@@ -0,0 +1,43 @@
+/**
+ * BetterDiscord Collection Setting Component
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+<template>
+    <div class="bd-formCollection">
+        <div v-for="s in setting.items" class="bd-collectionItem">
+            <Setting :setting="s" :key="s.id" />
+            <div class="bd-removeCollectionItem" @click="removeItem(s)"><MiMinus/></div>
+        </div>
+        <div class="bd-newCollectionItem" @click="addItem"><MiPlus/></div>
+    </div>
+</template>
+
+<script>
+    import Setting from './Setting.vue';
+    import { MiMinus, MiPlus } from '../../common';
+
+    export default {
+        props: ['setting'],
+        components: {
+            MiMinus, MiPlus
+        },
+        methods: {
+            removeItem(item) {
+                this.setting.removeItem(item);
+            },
+            addItem() {
+                this.setting.addItem();
+            }
+        },
+        beforeCreate() {
+            // https://vuejs.org/v2/guide/components.html#Circular-References-Between-Components
+            this.$options.components.Setting = Setting;
+        }
+    }
+</script>

client/src/ui/components/bd/setting/KeyValuePair.vue

@@ -12,12 +12,11 @@
     <div class="bd-formKvp">
         <div class="bd-formKvpDetails">
             <div class="bd-inputWrapper">
-                <input type="text" class="bd-textInput" :value="setting.value.key" />
+                <input type="text" class="bd-textInput" :value="setting.value.key" @keyup.stop @input="keyChange"/>
             </div>
             <div class="bd-inputWrapper">
-                <input type="text" class="bd-textInput" :value="setting.value.value" />
+                <input type="text" class="bd-textInput" :value="setting.value.value" @keyup.stop @input="valueChange"/>
             </div>
-                <!-- using a text field is temporary -->
         </div>
     </div>
 </template>
@@ -25,7 +24,13 @@
 <script>
     export default {
         props: ['setting'],
-        methods: {},
-        mounted() {console.log('setting', this.setting)}
+        methods: {
+            keyChange(e) {
+                this.setting.value = { key: e.target.value, value: this.setting.value.value }
+            },
+            valueChange(e) {
+                this.setting.value = { key: this.setting.value.key, value: e.target.value }
+            }
+        }
     }
 </script>

client/src/ui/components/bd/setting/Setting.vue

@@ -11,19 +11,20 @@
 <template>
     <div class="bd-form-item" :class="{'bd-form-item-changed': setting.changed, 'bd-disabled': disabled, 'bd-form-item-noheader': !setting.text, 'bd-form-item-fullwidth': setting.fullwidth}">
         <BoolSetting v-if="setting.type === 'bool'" :setting="setting" />
-        <StringSetting v-if="setting.type === 'text' && !setting.multiline" :setting="setting" />
-        <MultilineTextSetting v-if="setting.type === 'text' && setting.multiline" :setting="setting" />
-        <NumberSetting v-if="setting.type === 'number'" :setting="setting" />
-        <DropdownSetting v-if="setting.type === 'dropdown'" :setting="setting" />
-        <RadioSetting v-if="setting.type === 'radio'" :setting="setting" />
-        <SliderSetting v-if="setting.type === 'slider'" :setting="setting" />
-        <ColourSetting v-if="setting.type === 'colour'" :setting="setting" />
-        <KeybindSetting v-if="setting.type === 'keybind'" :setting="setting" />
-        <FileSetting v-if="setting.type === 'file'" :setting="setting" />
-        <GuildSetting v-if="setting.type === 'guild'" :setting="setting" />
-        <ArraySetting v-if="setting.type === 'array'" :setting="setting" />
-        <KeyValuePair v-if="setting.type === 'kvp'" :setting="setting"/>
-        <CustomSetting v-if="setting.type === 'custom'" :setting="setting" />
+        <StringSetting v-else-if="setting.type === 'text' && !setting.multiline" :setting="setting" />
+        <MultilineTextSetting v-else-if="setting.type === 'text' && setting.multiline" :setting="setting" />
+        <NumberSetting v-else-if="setting.type === 'number'" :setting="setting" />
+        <DropdownSetting v-else-if="setting.type === 'dropdown'" :setting="setting" />
+        <RadioSetting v-else-if="setting.type === 'radio'" :setting="setting" />
+        <SliderSetting v-else-if="setting.type === 'slider'" :setting="setting" />
+        <ColourSetting v-else-if="setting.type === 'colour'" :setting="setting" />
+        <KeybindSetting v-else-if="setting.type === 'keybind'" :setting="setting" />
+        <FileSetting v-else-if="setting.type === 'file'" :setting="setting" />
+        <GuildSetting v-else-if="setting.type === 'guild'" :setting="setting" />
+        <ArraySetting v-else-if="setting.type === 'array'" :setting="setting" />
+        <Collection v-else-if="setting.type === 'collection'" :setting="setting" />
+        <KeyValuePair v-else-if="setting.type === 'kvp'" :setting="setting" />
+        <CustomSetting v-else-if="setting.type === 'custom'" :setting="setting" />
         <div class="bd-form-divider"></div>
     </div>
 </template>
@@ -42,6 +43,7 @@
     import FileSetting from './File.vue';
     import GuildSetting from './Guild.vue';
     import ArraySetting from './Array.vue';
+    import Collection from './Collection.vue';
     import KeyValuePair from './KeyValuePair.vue';
     import CustomSetting from './Custom.vue';
 
@@ -62,6 +64,7 @@
             FileSetting,
             GuildSetting,
             ArraySetting,
+            Collection,
             KeyValuePair,
             CustomSetting
         },