list and multicheckbox initial implementation

src/components/settings_modal/helpers/group_setting.js

@@ -1,13 +1,5 @@
-import { isEqual } from 'lodash'
-
 import Setting from './setting.js'
 
 export default {
   ...Setting,
-  computed: {
-    ...Setting.computed,
-    isDirty () {
-      return !isEqual(this.state, this.draft)
-    }
-  }
 }

src/components/settings_modal/helpers/list_setting.js

@@ -2,6 +2,11 @@ import Setting from './setting.js'
 
 export default {
   ...Setting,
+  data () {
+    return {
+      newValue: ''
+    }
+  },
   components: {
     ...Setting.components
   },
@@ -13,9 +18,25 @@ export default {
   },
   methods: {
     ...Setting.methods,
-    updateValue (e) {
-      console.log(e.target.value)
-      //this.configSink(this.path, parseFloat(e.target.value) + this.stateUnit)
+    addNew () {
+      this.update({ newValue: this.newValue })
+    },
+    getValue ({ event, index, newValue, remove }) {
+      if (newValue) {
+        this.newValue = ''
+        return [...this.visibleState, newValue]
+      } else if (remove) {
+        const pre = this.visibleState.slice(0, index)
+        const post = this.visibleState.slice(index + 1)
+
+        return [...pre, ...post]
+      } else {
+        const pre = this.visibleState.slice(0, index)
+        const post = this.visibleState.slice(index + 1)
+        const string = event?.target?.value
+
+        return [...pre, string, ...post]
+      }
     }
   }
 }

src/components/settings_modal/helpers/list_setting.vue

@@ -1,10 +1,9 @@
 <template>
-  <label
+  <div
     v-if="matchesExpertLevel"
-    class="StringSetting"
+    class="ListSetting"
   >
     <label
-      :for="path"
       class="setting-label"
       :class="{ 'faint': shouldBeDisabled }"
     >
@@ -16,22 +15,6 @@
       </template>
       <slot v-else />
     </label>
-    {{ ' ' }}
-    <Checkbox
-      v-for="option in value"
-      :model-value="value"
-      :disabled="shouldBeDisabled"
-      @update:model-value="update"
-    >
-      {{ value }}
-    </Checkbox>
-    {{ ' ' }}
-    <ModifiedIndicator
-      :changed="isChanged"
-      :onclick="reset"
-    />
-    <ProfileSettingIndicator :is-profile="isProfileSetting" />
-    <DraftButtons />
     <p
       v-if="backendDescriptionDescription"
       class="setting-description"
@@ -39,7 +22,53 @@
     >
       {{ backendDescriptionDescription + ' ' }}
     </p>
-  </label>
+    <ul class="setting-list">
+      <li
+        class="btn-group"
+        v-for="(item, index) in visibleState"
+      >
+        <input
+          class="input string-input"
+          :class="{ disabled: shouldBeDisabled }"
+          :value="item"
+          @change="e => update({event: e, index })"
+        >
+        <button
+          class="button-default"
+          @click="e => update({ remove: true, index })"
+        >
+          <FAIcon icon="times" />
+        </button>
+      </li>
+      <li class="btn-group">
+        <input
+          class="input string-input"
+          :class="{ disabled: shouldBeDisabled }"
+          :disabled="shouldBeDisabled"
+          v-model="newValue"
+        >
+        <button
+          class="button-default"
+          @click="addNew"
+        >
+          <FAIcon icon="plus" />
+        </button>
+      </li>
+    </ul>
+    <ModifiedIndicator
+      :changed="isChanged"
+      :onclick="reset"
+    />
+    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <DraftButtons />
+  </div>
 </template>
 
-<script src="./string_setting.js"></script>
+<style lang="scss">
+.ListSetting {
+  li.btn-group {
+    display: flex
+  }
+}
+</style>
+<script src="./list_setting.js"></script>

src/components/settings_modal/helpers/multicheckbox_setting.js

@@ -0,0 +1,47 @@
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import Setting from './setting.js'
+
+export default {
+  ...Setting,
+  props: {
+    ...Setting.props,
+    overrideAvailableOptions: {
+      required: false,
+      type: Set
+    }
+  },
+  components: {
+    ...Setting.components,
+    Checkbox
+  },
+  computed: {
+    ...Setting.computed,
+    availableOptions () {
+      if (this.overrideAvailableOptions) {
+        return new Set(this.overrideAvailableOptions)
+      }
+      return new Set(this.backendDescription?.suggestions.map((option) => ({
+        label: option,
+        value: option
+      })))
+    },
+    valueSet () {
+      return new Set(this.visibleState)
+    }
+  },
+  methods: {
+    ...Setting.methods,
+    optionPresent (option) {
+      return this.valueSet.has(option)
+    },
+    getValue ({ event, option }) {
+      const set = new Set(this.visibleState)
+      if (event) {
+        set.add(option)
+      } else {
+        set.delete(option)
+      }
+      return [...set]
+    }
+  }
+}

src/components/settings_modal/helpers/multicheckbox_setting.vue

@@ -0,0 +1,48 @@
+<template>
+  <label
+    v-if="matchesExpertLevel"
+    class="MultiCheckboxSetting"
+  >
+    <h5
+      :for="path"
+      class="setting-label"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      <template v-if="backendDescriptionLabel">
+        {{ backendDescriptionLabel + ' ' }}
+      </template>
+      <template v-else-if="source === 'admin'">
+        MISSING LABEL FOR {{ path }}
+      </template>
+      <slot v-else />
+    </h5>
+    <p
+      v-if="backendDescriptionDescription"
+      class="setting-description"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      {{ backendDescriptionDescription + ' ' }}
+    </p>
+    <ul class="setting-list">
+      <li v-for="option in availableOptions">
+        <Checkbox
+          :model-value="optionPresent(option.value)"
+          :disabled="shouldBeDisabled"
+          @update:model-value="e => update({event: e, option: option.value})"
+        >
+          {{ option.label }}
+        </Checkbox>
+      </li>
+    </ul>
+    <div>
+      <ModifiedIndicator
+        :changed="isChanged"
+        :onclick="reset"
+      />
+      <ProfileSettingIndicator :is-profile="isProfileSetting" />
+      <DraftButtons />
+    </div>
+  </label>
+</template>
+
+<script src="./multicheckbox_setting.js"></script>

src/components/settings_modal/helpers/setting.js

@@ -1,7 +1,7 @@
 import ModifiedIndicator from './modified_indicator.vue'
 import ProfileSettingIndicator from './profile_setting_indicator.vue'
 import DraftButtons from './draft_buttons.vue'
-import { get, set, cloneDeep } from 'lodash'
+import { get, set, cloneDeep, isEqual } from 'lodash'
 
 export default {
   components: {
@@ -237,7 +237,7 @@ export default {
       if (this.realSource === 'admin' && this.canonPath.length > 3) {
         return false // should not show draft buttons for "grouped" values
       } else {
-        return this.realDraftMode && this.draft !== this.state
+        return this.realDraftMode && !isEqual(this.draft, this.state)
       }
     },
     canHardReset () {