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,22 +8,42 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import BaseSetting from './basesetting';
+import { Utils } from 'common';
+import ArraySetting from './array';
 import Setting from '../setting';
 
-export default class CollectionSetting extends BaseSetting {
+export default class CollectionSetting extends ArraySetting {
 
-    constructor(args) {
-        super(args);
-        this.subtype = args.type[0];
-        args.type = 'collection';
-        this.sub = new Setting({ type: this.subtype });
+    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;
     }
 
     /**
-     * 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,19 +10,24 @@
 
 <template>
     <div class="bd-formCollection">
-        <template v-for="s in setting.value">
-            <KeyValuePair v-if="setting.subtype === 'kvp'" :setting="s" :key="s.id" />
-            <Bool v-else-if="setting.subtype === 'bool'" :setting="s" :key="s.id" />
+        <template v-for="s in setting.items">
+            <Setting :setting="s" :key="s.id" />
         </template>
     </div>
 </template>
 
 <script>
-    import KeyValuePair from './KeyValuePair.vue';
-    import Bool from './Bool.vue';
+    import Setting from './Setting.vue';
+
     export default {
         props: ['setting'],
-        components: { KeyValuePair, Bool },
-        mounted() { console.log('collection', this.setting) }
+        components: {},
+        beforeCreate() {
+            // https://vuejs.org/v2/guide/components.html#Circular-References-Between-Components
+            this.$options.components.Setting = Setting;
+        },
+        mounted() {
+            console.log('collection', this.setting);
+        }
     }
 </script>