Merge pull request #1979 from owncloud/ocis-settings-use-oc-select

Use oc-select in settings

changelog/unreleased/use-oc-select-for-settings.md

@@ -0,0 +1,5 @@
+Enhancement: Use oc-select
+
+Replace oc-drop with oc select in settings
+
+https://github.com/owncloud/ocis/pull/1979

settings/ui/components/settings/SettingMultiChoice.vue

@@ -1,36 +1,11 @@
 <template>
-  <div>
-    <oc-button :id="buttonElementId" class="uk-width-expand" justify-content="space-between">
-      <span v-if="selectedOptions !== null && selectedOptions.length > 0">
-        {{ selectedOptionsDisplayValues }}
-      </span>
-      <span v-else>
-        {{ setting.placeholder || $gettext('Please select') }}
-      </span>
-      <oc-icon name="expand_more" />
-    </oc-button>
-    <oc-drop
-      :drop-id="dropElementId"
-      :toggle="`#${buttonElementId}`"
-      mode="click"
-      position="bottom-justify"
-      :options="{ offset: 0, delayHide: 200, flip: false }"
-      >
-      <ul class="uk-list">
-        <li
-          v-for="(option, index) in setting.multiChoiceValue.options"
-          :key="getOptionElementId(index)"
-        >
-          <oc-checkbox
-            v-model="selectedOptions"
-            :option="option"
-            @input="onSelectedOption"
-            :label="option.displayValue"
-          />
-        </li>
-      </ul>
-    </oc-drop>
-  </div>
+  <oc-select
+      v-model="selectedOptions"
+      :clearable="false"
+      :options="displayOptions"
+      @input="onSelectedOption"
+      multiple
+  />
 </template>
 
 <script>
@@ -53,28 +28,21 @@ export default {
   },
   data () {
     return {
-      selectedOptions: null
+      selectedOptions: []
     }
   },
   computed: {
-    selectedOptionsDisplayValues () {
-      return Array.from(this.selectedOptions).map(option => option.displayValue).join(', ')
-    },
-    dropElementId () {
-      return `multi-choice-drop-${this.setting.id}`
-    },
-    buttonElementId () {
-      return `multi-choice-toggle-${this.setting.id}`
+    displayOptions () {
+      return this.setting.multiChoiceValue.options.map(val => val.displayValue)
     }
   },
   methods: {
-    getOptionElementId (index) {
-      return `${this.setting.id}-${index}`
-    },
     async onSelectedOption () {
       const values = []
       if (!isNil(this.selectedOptions)) {
-        this.selectedOptions.forEach(option => {
+        this.selectedOptions.forEach(displayValue => {
+          const option = this.setting.multiChoiceValue.options.find(val => val.displayValue === displayValue)
+
           if (option.value.intValue) {
             values.push({ intValue: option.value.intValue })
           }
@@ -123,13 +91,15 @@ export default {
             return selectedValues.includes(option.value.stringValue)
           }
           return false
-        })
+        }).map(val => val.displayValue)
       }
     }
     // TODO: load the settings value of the authenticated user and set it in `selectedOptions`
     // if not set, yet, apply defaults from settings bundle definition
     if (this.selectedOptions === null) {
-      this.selectedOptions = this.setting.multiChoiceValue.options.filter(option => option.default)
+      this.selectedOptions = this.setting.multiChoiceValue.options
+        .filter(option => option.default)
+        .map(val => val.displayValue)
     }
   }
 }

settings/ui/components/settings/SettingSingleChoice.vue

@@ -1,36 +1,11 @@
 <template>
   <div>
-    <oc-button :id="buttonElementId" class="uk-width-expand" justify-content="space-between">
-      <span v-if="selectedOption">
-        {{ selectedOption.displayValue }}
-      </span>
-      <span v-else>
-        {{ setting.placeholder || $gettext('Please select') }}
-      </span>
-      <oc-icon name="expand_more" />
-    </oc-button>
-    <oc-drop
-      :drop-id="dropElementId"
-      :toggle="`#${buttonElementId}`"
-      mode="click"
-      close-on-click
-      position="bottom-justify"
-      :options="{ offset: 0, delayHide: 200, flip: false }"
-      >
-      <ul class="uk-list">
-        <li
-          v-for="(option, index) in setting.singleChoiceValue.options"
-          :key="getOptionElementId(index)"
-        >
-          <oc-radio
-            v-model="selectedOption"
-            :option="option"
-            @input="onSelectedOption"
-            :label="option.displayValue"
-          />
-        </li>
-      </ul>
-    </oc-drop>
+    <oc-select
+        v-model="selectedOption"
+        :clearable="false"
+        :options="displayOptions"
+        @input="onSelectedOption"
+       />
   </div>
 </template>
 
@@ -58,25 +33,21 @@ export default {
     }
   },
   computed: {
-    dropElementId () {
-      return `single-choice-drop-${this.setting.id}`
-    },
-    buttonElementId () {
-      return `single-choice-toggle-${this.setting.id}`
+    displayOptions () {
+      return this.setting.singleChoiceValue.options.map(val => val.displayValue)
     }
   },
   methods: {
-    getOptionElementId (index) {
-      return `${this.setting.id}-${index}`
-    },
     async onSelectedOption () {
       const values = []
       if (!isNil(this.selectedOption)) {
-        if (this.selectedOption.value.intValue) {
-          values.push({ intValue: this.selectedOption.value.intValue })
+        const option = this.setting.singleChoiceValue.options.find(val => val.displayValue === this.selectedOption)
+
+        if (option.value.intValue) {
+          values.push({ intValue: option.value.intValue })
         }
-        if (this.selectedOption.value.stringValue) {
-          values.push({ stringValue: this.selectedOption.value.stringValue })
+        if (option.value.stringValue) {
+          values.push({ stringValue: option.value.stringValue })
         }
       }
       const payload = {
@@ -106,14 +77,14 @@ export default {
         }
       })
       if (filtered.length > 0) {
-        this.selectedOption = filtered[0]
+        this.selectedOption = filtered[0].displayValue
       }
     }
     // if not set, yet, apply default from settings bundle definition
     if (isNil(this.selectedOption)) {
       const defaults = this.setting.singleChoiceValue.options.filter(option => option.default)
       if (defaults.length === 1) {
-        this.selectedOption = defaults[0]
+        this.selectedOption = defaults[0].displayValue
       }
     }
   }