Merge pull request #208 from samuelthomas2774/collection-settings

Extend ArraySetting for collections

client/src/structs/settings/setting.js

@@ -27,7 +27,8 @@ export default class Setting {
 
     constructor(args, ...merge) {
         args = args.args || args;
-        if (args.type instanceof Array) return new CollectionSetting(args, ...merge);
+
+        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);
@@ -41,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

@@ -8,30 +8,42 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { Utils } from 'common';
+import ArraySetting from './array';
 import Setting from '../setting';
-import Base from './basesetting';
-import SettingsSet from '../settingsset';
-import SettingsCategory from '../settingscategory';
-import SettingsScheme from '../settingsscheme';
 
-export default class CollectionSetting extends Base {
+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);
-        this.subtype = args.type[0];
-        this.args.type = 'collection';
-        this.items = this.value.map(item => this.create(item));
     }
 
-    create(item) {
-        item.type = this.subtype;
-        return new Setting(item);
+    get setting() {
+        return this.args.setting;
     }
 
     /**
-     * The value to use when the setting doesn't have a value.
+     * Creates a new setting for this collection setting.
+     * @param {Setting} item Values to merge into the new setting (optional)
+     * @return {Setting} The new set
      */
-    get defaultValue() {
-        return [];
+    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/ui/components/bd/setting/Collection.vue

@@ -1,5 +1,5 @@
 /**
- * BetterDiscord Setting Bool Component
+ * BetterDiscord Collection Setting Component
  * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
  * All rights reserved.
  * https://betterdiscord.net
@@ -10,33 +10,34 @@
 
 <template>
     <div class="bd-formCollection">
-        <div v-for="(s, index) in setting.items" class="bd-collectionItem">
-            <KeyValuePair v-if="setting.subtype === 'kvp'" :setting="s" :key="s.id"/>
-            <Bool v-else-if="setting.subtype === 'bool'" :setting="s" :key="s.id" />
-            <div class="bd-removeCollectionItem" @click="() => removeItem(index)"><MiMinus/></div>
+        <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">+</div>
     </div>
 </template>
 
 <script>
-    import { Settings } from 'modules';
-    import { Setting } from 'structs';
-    import KeyValuePair from './KeyValuePair.vue';
-    import Bool from './Bool.vue';
-
+    import Setting from './Setting.vue';
     import { MiMinus } from '../../common';
+
     export default {
         props: ['setting'],
-        components: { KeyValuePair, Bool, MiMinus },
+        components: {
+            MiMinus
+        },
         methods: {
-            removeItem(index) {
-                this.setting.value = this.setting.items.splice(index, 1);
+            removeItem(item) {
+                this.setting.removeItem(item);
             },
             addItem() {
-                const add = new Setting({ type: this.setting.subtype });
-                this.setting.items = this.setting.value = [...this.setting.items, add];
+                this.setting.addItem();
             }
+        },
+        beforeCreate() {
+            // https://vuejs.org/v2/guide/components.html#Circular-References-Between-Components
+            this.$options.components.Setting = Setting;
         }
     }
 </script>