DeforaNetworks/corteza
3
0
Fork 0
Code Activity

Add new select types to Select field

Browse Source
This commit is contained in:
Emmy Leke
2023-07-10 15:09:17 +01:00
committed by EmmyMay
parent a4a84e6ba4
commit 75ef962bb8
5 changed files with 130 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/web/compose/src/components/ModuleFields/Configurator/Record.vue
+33 -23
View File
@@ -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
}
},
client/web/compose/src/components/ModuleFields/Configurator/Select.vue
+37 -11
View File
@@ -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
}
},
client/web/compose/src/components/ModuleFields/Configurator/User.vue
+35 -23
View File
@@ -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
}
},
client/web/compose/src/components/ModuleFields/Editor/Select.vue
+22 -1
View File
@@ -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)
},
},
locale/en/corteza-webapp-compose/field.yaml
+3 -1
View File
@@ -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