From 75ef962bb824f651c4b1bfff05167179437d05ae Mon Sep 17 00:00:00 2001
From: Emmy Leke <emmy.leke@planetcrust.com>
Date: Wed, 5 Jul 2023 16:53:03 +0100
Subject: [PATCH] Add new select types to Select field

---
 .../ModuleFields/Configurator/Record.vue      | 56 ++++++++++--------
 .../ModuleFields/Configurator/Select.vue      | 48 +++++++++++----
 .../ModuleFields/Configurator/User.vue        | 58 +++++++++++--------
 .../components/ModuleFields/Editor/Select.vue | 23 +++++++-
 locale/en/corteza-webapp-compose/field.yaml   |  4 +-
 5 files changed, 130 insertions(+), 59 deletions(-)

diff --git a/client/web/compose/src/components/ModuleFields/Configurator/Record.vue b/client/web/compose/src/components/ModuleFields/Configurator/Record.vue
index 81c062817..bc0c52a2e 100644
--- a/client/web/compose/src/components/ModuleFields/Configurator/Record.vue
+++ b/client/web/compose/src/components/ModuleFields/Configurator/Record.vue
@@ -69,26 +69,28 @@
       </b-form-group>
     </template>
 
-    <b-form-group
-      v-if="field.isMulti"
-      :label="$t('kind.select.optionType.label')"
-    >
-      <b-form-radio-group
-        v-model="f.options.selectType"
-        :options="selectOptions"
-        stacked
-        @change="onUpdateIsUniqueMultiValue"
-      />
-      <b-form-checkbox
-        v-if="f.options.selectType !== 'multiple'"
-        v-model="f.options.isUniqueMultiValue"
-        :value="false"
-        :unchecked-value="true"
-        class="mt-2"
+    <template v-if="field.isMulti">
+      <b-form-group
+        :label="$t('kind.select.optionType.label')"
       >
-        {{ $t('kind.select.allow-duplicates') }}
-      </b-form-checkbox>
-    </b-form-group>
+        <b-form-radio-group
+          v-model="f.options.selectType"
+          :options="selectOptions"
+          stacked
+          @change="updateIsUniqueMultiValue"
+        />
+      </b-form-group>
+
+      <b-form-group v-if="shouldAllowDuplicates">
+        <b-form-checkbox
+          v-model="f.options.isUniqueMultiValue"
+          :value="false"
+          :unchecked-value="true"
+        >
+          {{ $t('kind.select.allow-duplicates') }}
+        </b-form-checkbox>
+      </b-form-group>
+    </template>
   </div>
 </template>
 
@@ -108,9 +110,9 @@ export default {
     return {
       selected: null,
       selectOptions: [
-        { text: this.$t('kind.select.optionType.default'), value: 'default' },
+        { text: this.$t('kind.select.optionType.default'), value: 'default', allowDuplicates: true },
         { text: this.$t('kind.select.optionType.multiple'), value: 'multiple' },
-        { text: this.$t('kind.select.optionType.each'), value: 'each' },
+        { text: this.$t('kind.select.optionType.each'), value: 'each', allowDuplicates: true },
       ],
     }
   },
@@ -204,6 +206,13 @@ export default {
     labelFieldQueryOptions () {
       return this.labelFieldOptions.filter(({ name }) => name !== this.field.options.recordLabelField)
     },
+
+    shouldAllowDuplicates () {
+      if (!this.f.isMulti) return false
+
+      const { allowDuplicates } = this.selectOptions.find(({ value }) => value === this.f.options.selectType) || {}
+      return !!allowDuplicates
+    },
   },
 
   watch: {
@@ -215,8 +224,9 @@ export default {
   },
 
   methods: {
-    onUpdateIsUniqueMultiValue () {
-      if (this.f.options.selectType === 'multiple') {
+    updateIsUniqueMultiValue (value) {
+      const { allowDuplicates = false } = this.selectOptions.find(({ value: v }) => v === value) || {}
+      if (!allowDuplicates) {
         this.f.options.isUniqueMultiValue = true
       }
     },
diff --git a/client/web/compose/src/components/ModuleFields/Configurator/Select.vue b/client/web/compose/src/components/ModuleFields/Configurator/Select.vue
index 74f20461a..964eb6263 100644
--- a/client/web/compose/src/components/ModuleFields/Configurator/Select.vue
+++ b/client/web/compose/src/components/ModuleFields/Configurator/Select.vue
@@ -108,21 +108,21 @@
       </b-form-group>
 
       <b-form-group
-        v-if="f.isMulti"
+        :label="$t('kind.select.optionType.label')"
       >
-        <label class="d-block">{{ $t('kind.select.optionType.label') }}</label>
         <b-form-radio-group
           v-model="f.options.selectType"
           :options="selectOptions"
           stacked
-          @change="onUpdateIsUniqueMultiValue"
+          @change="updateIsUniqueMultiValue"
         />
+      </b-form-group>
+
+      <b-form-group v-if="shouldAllowDuplicates">
         <b-form-checkbox
-          v-if="f.options.selectType !== 'multiple'"
           v-model="f.options.isUniqueMultiValue"
           :value="false"
           :unchecked-value="true"
-          class="mt-2"
         >
           {{ $t('kind.select.allow-duplicates') }}
         </b-form-checkbox>
@@ -152,10 +152,12 @@ export default {
   data () {
     return {
       newOption: { value: undefined, text: undefined, new: true },
-      selectOptions: [
-        { text: this.$t('kind.select.optionType.default'), value: 'default' },
-        { text: this.$t('kind.select.optionType.multiple'), value: 'multiple' },
-        { text: this.$t('kind.select.optionType.each'), value: 'each' },
+
+      options: [
+        { text: this.$t('kind.select.optionType.default'), value: 'default', allowDuplicates: true },
+        { text: this.$t('kind.select.optionType.multiple'), value: 'multiple', onlyMulti: true },
+        { text: this.$t('kind.select.optionType.each'), value: 'each', allowDuplicates: true, onlyMulti: true },
+        { value: 'list' },
       ],
     }
   },
@@ -184,6 +186,29 @@ export default {
     isNew () {
       return this.module.moduleID === NoID || this.field.fieldID === NoID
     },
+
+    selectOptions () {
+      const selectOptions = this.options.map((o) => {
+        if (o.value === 'list') {
+          o.text = this.$t(`kind.select.optionType.${this.f.isMulti ? 'checkbox' : 'radio'}`)
+        }
+
+        return o
+      })
+
+      if (this.f.isMulti) {
+        return selectOptions
+      }
+
+      return selectOptions.filter(({ onlyMulti }) => !onlyMulti)
+    },
+
+    shouldAllowDuplicates () {
+      if (!this.f.isMulti) return false
+
+      const { allowDuplicates } = this.options.find(({ value }) => value === this.f.options.selectType) || {}
+      return !!allowDuplicates
+    },
   },
 
   created () {
@@ -203,8 +228,9 @@ export default {
       })
     },
 
-    onUpdateIsUniqueMultiValue () {
-      if (this.f.options.selectType === 'multiple') {
+    updateIsUniqueMultiValue (value) {
+      const { allowDuplicates = false } = this.options.find(({ value: v }) => v === value) || {}
+      if (!allowDuplicates) {
         this.f.options.isUniqueMultiValue = true
       }
     },
diff --git a/client/web/compose/src/components/ModuleFields/Configurator/User.vue b/client/web/compose/src/components/ModuleFields/Configurator/User.vue
index cf0649a96..e49f5e6f7 100644
--- a/client/web/compose/src/components/ModuleFields/Configurator/User.vue
+++ b/client/web/compose/src/components/ModuleFields/Configurator/User.vue
@@ -27,26 +27,28 @@
       />
     </b-form-group>
 
-    <b-form-group
-      v-if="f.isMulti"
-    >
-      <label class="d-block">{{ $t('kind.select.optionType.label') }}</label>
-      <b-form-radio-group
-        v-model="f.options.selectType"
-        :options="selectOptions"
-        stacked
-        @change="onUpdateIsUniqueMultiValue"
-      />
-      <b-form-checkbox
-        v-if="f.options.selectType !== 'multiple'"
-        v-model="f.options.isUniqueMultiValue"
-        :value="false"
-        :unchecked-value="true"
-        class="mt-2"
+    <template v-if="f.isMulti">
+      <b-form-group
+        :label="$t('kind.select.optionType.label')"
       >
-        {{ $t('kind.select.allow-duplicates') }}
-      </b-form-checkbox>
-    </b-form-group>
+        <b-form-radio-group
+          v-model="f.options.selectType"
+          :options="selectOptions"
+          stacked
+          @change="updateIsUniqueMultiValue"
+        />
+      </b-form-group>
+
+      <b-form-group v-if="shouldAllowDuplicates">
+        <b-form-checkbox
+          v-model="f.options.isUniqueMultiValue"
+          :value="false"
+          :unchecked-value="true"
+        >
+          {{ $t('kind.select.allow-duplicates') }}
+        </b-form-checkbox>
+      </b-form-group>
+    </template>
   </div>
 </template>
 
@@ -68,14 +70,23 @@ export default {
   data () {
     return {
       selectOptions: [
-        { text: this.$t('kind.select.optionType.default'), value: 'default' },
+        { text: this.$t('kind.select.optionType.default'), value: 'default', allowDuplicates: true },
         { text: this.$t('kind.select.optionType.multiple'), value: 'multiple' },
-        { text: this.$t('kind.select.optionType.each'), value: 'each' },
+        { text: this.$t('kind.select.optionType.each'), value: 'each', allowDuplicates: true },
       ],
       roleOptions: [],
     }
   },
 
+  computed: {
+    shouldAllowDuplicates () {
+      if (!this.f.isMulti) return false
+
+      const { allowDuplicates } = this.selectOptions.find(({ value }) => value === this.f.options.selectType) || {}
+      return !!allowDuplicates
+    },
+  },
+
   mounted () {
     this.$SystemAPI.roleList().then(({ set: roles = [] }) => {
       this.roleOptions = roles
@@ -87,8 +98,9 @@ export default {
       return roleID
     },
 
-    onUpdateIsUniqueMultiValue () {
-      if (this.f.options.selectType === 'multiple') {
+    updateIsUniqueMultiValue (value) {
+      const { allowDuplicates = false } = this.selectOptions.find(({ value: v }) => v === value) || {}
+      if (!allowDuplicates) {
         this.f.options.isUniqueMultiValue = true
       }
     },
diff --git a/client/web/compose/src/components/ModuleFields/Editor/Select.vue b/client/web/compose/src/components/ModuleFields/Editor/Select.vue
index df5030f53..f64dca4c4 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/Select.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/Select.vue
@@ -25,7 +25,16 @@
     </div>
 
     <template v-if="field.isMulti">
+      <template v-if="field.options.selectType === 'list'">
+        <b-form-checkbox-group
+          v-model="value"
+          :options="selectOptions"
+          stacked
+        />
+      </template>
+
       <multi
+        v-else
         :value.sync="value"
         :errors="errors"
         :single-input="field.options.selectType !== 'each'"
@@ -46,6 +55,7 @@
               </option>
             </template>
           </b-form-select>
+
           <b-form-select
             v-if="field.options.selectType === 'multiple'"
             v-model="value"
@@ -54,6 +64,7 @@
             multiple
           />
         </template>
+
         <template v-slot:default="ctx">
           <b-form-select
             v-if="field.options.selectType === 'each'"
@@ -69,6 +80,7 @@
               </option>
             </template>
           </b-form-select>
+
           <span v-else>{{ findLabel(value[ctx.index]) }}</span>
         </template>
       </multi>
@@ -78,6 +90,7 @@
       v-else
     >
       <b-form-select
+        v-if="field.options.selectType === 'default'"
         v-model="value"
         :options="selectOptions"
       >
@@ -87,6 +100,14 @@
           </option>
         </template>
       </b-form-select>
+
+      <b-form-radio-group
+        v-else
+        v-model="value"
+        :options="selectOptions"
+        stacked
+      />
+
       <errors :errors="errors" />
     </template>
   </b-form-group>
@@ -107,7 +128,7 @@ export default {
         const disabled = o.value && this.field.isMulti && !this.field.options.isUniqueMultiValue
           ? this.value === o.value
           : (this.value || []).includes(o.value)
-        return { ...o, disabled }
+        return { ...o, disabled: this.field.options.selectType !== 'list' && disabled }
       }).filter(({ value = '', text = '' }) => value && text)
     },
   },
diff --git a/locale/en/corteza-webapp-compose/field.yaml b/locale/en/corteza-webapp-compose/field.yaml
index 341d8d292..2819511e8 100644
--- a/locale/en/corteza-webapp-compose/field.yaml
+++ b/locale/en/corteza-webapp-compose/field.yaml
@@ -119,8 +119,10 @@ kind:
     optionType:
       default: Single input
       each: Input for each value
-      label: Multiple value input type
+      label: Select type
       multiple: Multiple select
+      checkbox: Checkbox Group
+      radio: Radio Group
     optionValuePlaceholder: Value
     optionsLabel: Options to select from
     placeholder: Select an option by clicking here