silva
/
adrema
2
1
Fork 0
Code Issues 23 Pull Requests 1 Projects 1 Releases 104 Wiki Activity

Add condition for checkbox field

This commit is contained in:
philipp lang 2024-04-19 23:57:05 +02:00
parent 37c8f35b58
commit 5e2427ee81
1 changed files with 39 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
resources/js/views/form/Conditions.vue
View File

@ -10,17 +10,24 @@
<ui-icon-button class="mt-4 mb-2" icon="plus" @click="addCondition">Bedingung einfügen</ui-icon-button> <ui-icon-button class="mt-4 mb-2" icon="plus" @click="addCondition">Bedingung einfügen</ui-icon-button>
<div v-for="(condition, index) in inner.ifs" :key="index" class="grid grid-cols-[1fr_1fr_1fr_max-content] gap-2"> <div v-for="(condition, index) in inner.ifs" :key="index" class="grid grid-cols-[1fr_1fr_1fr_max-content] gap-2">
<f-select :id="`field-${index}`" v-model="condition.field" :options="fieldOptions" :name="`field-${index}`" label="Feld"></f-select> <f-select
:id="`field-${index}`"
:model-value="condition.field"
:options="fieldOptions"
:name="`field-${index}`"
label="Feld"
@update:model-value="update(index, 'field', $event)"
></f-select>
<f-select <f-select
:id="`comparator-${index}`" :id="`comparator-${index}`"
:options="comparatorOptions" :options="comparatorOptions"
:model-value="condition.comparator" :model-value="condition.comparator"
:name="`comparator-${index}`" :name="`comparator-${index}`"
label="Vergleich" label="Vergleich"
@update:model-value="updateComparator(condition, $event)" @update:model-value="update(index, 'comparator', $event)"
></f-select> ></f-select>
<f-select <f-select
v-if="condition.field && ['isEqual', 'isNotEqual'].includes(condition.comparator)" v-if="condition.field && ['isEqual', 'isNotEqual'].includes(condition.comparator) && ['RadioField', 'DropdownField'].includes(getField(condition.field).type)"
:id="`value-${index}`" :id="`value-${index}`"
v-model="condition.value" v-model="condition.value"
:options="getOptions(condition.field)" :options="getOptions(condition.field)"
@ -28,13 +35,20 @@
label="Wert" label="Wert"
></f-select> ></f-select>
<f-multipleselect <f-multipleselect
v-if="condition.field && ['isIn', 'isNotIn'].includes(condition.comparator)" v-if="condition.field && ['isIn', 'isNotIn'].includes(condition.comparator) && ['RadioField', 'DropdownField'].includes(getField(condition.field).type)"
:id="`value-${index}`" :id="`value-${index}`"
v-model="condition.value" v-model="condition.value"
:options="getOptions(condition.field)" :options="getOptions(condition.field)"
:name="`value-${index}`" :name="`value-${index}`"
label="Wert" label="Wert"
></f-multipleselect> ></f-multipleselect>
<f-switch
v-if="condition.field && condition.comparator && ['CheckboxField'].includes(getField(condition.field).type)"
:id="`value-${index}`"
v-model="condition.value"
:name="`value-${index}`"
label="Wert"
></f-switch>
<ui-action-button tooltip="Löschen" icon="trash" class="btn-danger self-end h-8" @click="inner.ifs.splice(index, 1)"></ui-action-button> <ui-action-button tooltip="Löschen" icon="trash" class="btn-danger self-end h-8" @click="inner.ifs.splice(index, 1)"></ui-action-button>
</div> </div>
@ -57,10 +71,10 @@ const props = defineProps({
}); });
const comparatorOptions = ref([ const comparatorOptions = ref([
{id: 'isEqual', name: 'ist gleich', defaultValue: null}, {id: 'isEqual', name: 'ist gleich', defaultValue: {DropdownField: null, RadioField: null, CheckboxField: false}},
{id: 'isNotEqual', name: 'ist ungleich', defaultValue: null}, {id: 'isNotEqual', name: 'ist ungleich', defaultValue: {DropdownField: null, RadioField: null, CheckboxField: false}},
{id: 'isIn', name: 'ist in', defaultValue: []}, {id: 'isIn', name: 'ist in', defaultValue: {DropdownField: [], RadioField: [], CheckboxField: false}},
{id: 'isNotIn', name: 'ist nicht in', defaultValue: []}, {id: 'isNotIn', name: 'ist nicht in', defaultValue: {DropdownField: [], RadioField: [], CheckboxField: false}},
]); ]);
const modeOptions = ref([ const modeOptions = ref([
@ -81,9 +95,23 @@ const fields = computed(() => {
return result; return result;
}); });
function updateComparator(condition, comparator) { function update(index, key, value) {
condition.value = comparatorOptions.value.find((c) => c.id === comparator).defaultValue; if (key === 'comparator') {
condition.comparator = comparator; var old = inner.value.ifs[index];
inner.value.ifs[index] = {
field: old.field,
comparator: value,
value: old.field ? comparatorOptions.value.find((c) => c.id === value).defaultValue[getField(old.field).type] : null,
};
}
if (key === 'field') {
var old = inner.value.ifs[index];
inner.value.ifs[index] = {
field: value,
comparator: null,
value: null,
};
}
} }
function getField(fieldName) { function getField(fieldName) {