Collection fix

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

@@ -175,9 +175,6 @@
                         "type": ["kvp"],
                         "value": [
                             {
-                                "id": "kvp0",
-                                "type": "kvp",
-                                "text": "",
                                 "value": {
                                     "key": "kvpKey",
                                     "value": "kvpValue"

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

@@ -8,16 +8,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import BaseSetting from './basesetting';
 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 BaseSetting {
+export default class CollectionSetting extends Base {
 
-    constructor(args) {
-        super(args);
+    constructor(args, ...merge) {
+        super(args, ...merge);
         this.subtype = args.type[0];
-        args.type = 'collection';
-        this.sub = new Setting({ type: this.subtype });
+        this.args.type = 'collection';
+        this.items = this.value.map(item => this.create(item));
+    }
+
+    create(item) {
+        item.type = this.subtype;
+        return new Setting(item);
     }
 
     /**

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

@@ -0,0 +1,53 @@
+.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;
+
+            &:hover {
+                svg {
+                    fill: #FFF;
+                }
+            }
+
+            svg {
+                width: 16px;
+                height: 16px;
+                fill: #ccc;
+            }
+        }
+    }
+
+    .bd-newCollectionItem {
+        font-weight: 500;
+        color: #ccc;
+        font-size: 26px;
+        width: 20px;
+        height: 20px;
+        margin-top: 5px;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+
+        &:hover {
+            color: #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

@@ -10,19 +10,33 @@
 
 <template>
     <div class="bd-formCollection">
-        <template v-for="s in setting.value">
-            <KeyValuePair v-if="setting.subtype === 'kvp'" :setting="s" :key="s.id" />
+        <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" />
-        </template>
+            <div class="bd-removeCollectionItem" @click="() => removeItem(index)"><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 { MiMinus } from '../../common';
     export default {
         props: ['setting'],
-        components: { KeyValuePair, Bool },
-        mounted() { console.log('collection', this.setting) }
+        components: { KeyValuePair, Bool, MiMinus },
+        methods: {
+            removeItem(index) {
+                this.setting.value = this.setting.items.splice(index, 1);
+            },
+            addItem() {
+                const add = new Setting({ type: this.setting.subtype });
+                this.setting.items = this.setting.value = [...this.setting.items, add];
+            }
+        }
     }
 </script>

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

@@ -26,10 +26,10 @@
         props: ['setting'],
         methods: {
             keyChange(e) {
-                this.setting.value.key = e.target.value;
+                this.setting.value = { key: e.target.value, value: this.setting.value.value }
             },
             valueChange(e) {
-                this.setting.value.value = e.target.value;
+                this.setting.value = { key: this.setting.value.key, value: e.target.value }
             }
         }
     }