Add changes to select configurator and editor

cortezaproject · Jul 7, 2023 · 58cc602 · 58cc602
1 parent 11c01c2
commit 58cc602
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 66 deletions.
diff --git 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
@@ -114,11 +114,12 @@
           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="shouldAllowDuplicates"
           v-model="f.options.isUniqueMultiValue"
           :value="false"
           :unchecked-value="true"
@@ -151,11 +152,12 @@ export default {
   data () {
     return {
       newOption: { value: undefined, text: undefined, new: true },
-      selectOptionss: [
-        { 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' },
-        { text: this.$t('kind.select.optionType.list'), value: 'list' },
+
+      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' },
       ],
     }
   },
@@ -186,20 +188,26 @@ export default {
     },
 
     selectOptions () {
-      const options = [
-        { 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' },
-        { text: this.$t('kind.select.optionType.list'), value: 'list' },
-      ]
-      if (!this.f.isMulti) {
-        return options.filter(o => o.value === 'list' || o.value === 'default')
+      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 options
+
+      return selectOptions.filter(({ onlyMulti }) => !onlyMulti)
     },
 
     shouldAllowDuplicates () {
-      return this.f.options.selectType !== 'multiple' && this.f.isMulti && this.f.options.selectType !== 'list'
+      if (!this.f.isMulti) return false
+
+      const { allowDuplicates } = this.options.find(({ value }) => value === this.f.options.selectType) || {}
+      return !!allowDuplicates
     },
   },
 
@@ -220,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
@@ -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/locale/en/corteza-webapp-compose/field.yaml b/locale/en/corteza-webapp-compose/field.yaml
@@ -119,7 +119,8 @@ kind:
       each: Input for each value
       label: Select type
       multiple: Multiple select
-      list: List View
+      checkbox: Checkbox Group
+      radio: Radio Group
     optionValuePlaceholder: Value
     optionsLabel: Options to select from
     placeholder: Select an option by clicking here