adrema/resources/js/views/form/Conditions.vue

182 lines
6.0 KiB
Vue
Raw Normal View History

2024-04-18 22:15:28 +02:00
<template>
2024-04-18 22:18:56 +02:00
<ui-note v-if="locked" class="mt-2" type="danger">
2024-04-18 22:15:28 +02:00
Dieses Formular wurde bereits bearbeitet.<br />
Bitte speichere es erst ab und editiere dann die Bedingungen.
</ui-note>
<div v-else>
2024-07-12 17:33:38 +02:00
<f-select :id="`mode-${id}`" :name="`mode-${id}`" :model-value="modelValue.mode" :options="modeOptions" label="Modus" @update:model-value="changeMode"></f-select>
2024-04-19 22:13:55 +02:00
2024-04-18 22:15:28 +02:00
<ui-icon-button class="mt-4 mb-2" icon="plus" @click="addCondition">Bedingung einfügen</ui-icon-button>
2024-07-12 17:33:38 +02:00
<div v-for="(condition, index) in modelValue.ifs" :key="index" class="grid grid-cols-[1fr_1fr_1fr_max-content] gap-2">
2024-04-19 23:57:05 +02:00
<f-select
2024-07-12 17:33:38 +02:00
:id="`field-${index}-${id}`"
2024-04-19 23:57:05 +02:00
:model-value="condition.field"
:options="fieldOptions"
2024-07-12 17:33:38 +02:00
:name="`field-${index}-${id}`"
2024-04-19 23:57:05 +02:00
label="Feld"
@update:model-value="update(index, 'field', $event)"
></f-select>
2024-04-18 22:15:28 +02:00
<f-select
2024-07-12 17:33:38 +02:00
:id="`comparator-${index}-${id}`"
2024-04-18 22:15:28 +02:00
:options="comparatorOptions"
:model-value="condition.comparator"
2024-07-12 17:33:38 +02:00
:name="`comparator-${index}-${id}`"
2024-04-18 22:15:28 +02:00
label="Vergleich"
2024-04-19 23:57:05 +02:00
@update:model-value="update(index, 'comparator', $event)"
2024-04-18 22:15:28 +02:00
></f-select>
<f-select
2024-08-23 17:57:20 +02:00
v-if="condition.field && ['isEqual', 'isNotEqual'].includes(condition.comparator) && ['RadioField', 'DropdownField', 'GroupField'].includes(getField(condition.field).type)"
2024-07-12 17:33:38 +02:00
:id="`value-${index}-${id}`"
2024-04-18 22:18:56 +02:00
v-model="condition.value"
:options="getOptions(condition.field)"
2024-07-12 17:33:38 +02:00
:name="`value-${index}-${id}`"
2024-04-18 22:15:28 +02:00
label="Wert"
></f-select>
<f-multipleselect
2024-08-23 17:57:20 +02:00
v-if="condition.field && ['isIn', 'isNotIn'].includes(condition.comparator) && ['RadioField', 'DropdownField', 'GroupField'].includes(getField(condition.field).type)"
2024-07-12 17:33:38 +02:00
:id="`value-${index}-${id}`"
2024-04-18 22:18:56 +02:00
v-model="condition.value"
:options="getOptions(condition.field)"
2024-04-18 22:15:28 +02:00
label="Wert"
></f-multipleselect>
2024-04-19 23:57:05 +02:00
<f-switch
v-if="condition.field && condition.comparator && ['CheckboxField'].includes(getField(condition.field).type)"
2024-07-12 17:33:38 +02:00
:id="`value-${index}-${id}`"
2024-04-19 23:57:05 +02:00
v-model="condition.value"
2024-07-12 17:33:38 +02:00
:name="`value-${index}-${id}`"
2024-04-19 23:57:05 +02:00
label="Wert"
></f-switch>
2024-07-12 17:33:38 +02:00
<ui-action-button tooltip="Löschen" icon="trash" class="btn-danger self-end h-8" @click="remove(index)"></ui-action-button>
2024-04-18 22:15:28 +02:00
</div>
</div>
</template>
2024-07-15 16:59:29 +02:00
<script setup>
2024-08-23 17:57:20 +02:00
import {ref, inject, computed, onMounted} from 'vue';
2024-04-18 22:15:28 +02:00
const axios = inject('axios');
2024-07-12 17:33:38 +02:00
const emit = defineEmits(['update:modelValue']);
2024-04-18 22:15:28 +02:00
const props = defineProps({
2024-07-12 17:33:38 +02:00
modelValue: {
2024-04-18 22:15:28 +02:00
required: true,
2024-07-12 17:33:38 +02:00
type: Object,
2024-04-18 22:15:28 +02:00
},
single: {
required: true,
2024-07-12 17:33:38 +02:00
type: Object,
2024-04-18 22:15:28 +02:00
},
2024-07-12 17:33:38 +02:00
id: {
required: true,
type: String,
2024-07-15 16:59:29 +02:00
},
2024-04-18 22:15:28 +02:00
});
const comparatorOptions = ref([
2024-08-23 17:57:20 +02:00
{id: 'isEqual', name: 'ist gleich', defaultValue: {DropdownField: null, RadioField: null, CheckboxField: false, GroupField: null}},
{id: 'isNotEqual', name: 'ist ungleich', defaultValue: {DropdownField: null, RadioField: null, CheckboxField: false, GroupField: null}},
{id: 'isIn', name: 'ist in', defaultValue: {DropdownField: [], RadioField: [], CheckboxField: false, GroupField: []}},
{id: 'isNotIn', name: 'ist nicht in', defaultValue: {DropdownField: [], RadioField: [], CheckboxField: false, GroupField: []}},
2024-04-18 22:15:28 +02:00
]);
2024-04-19 22:13:55 +02:00
const modeOptions = ref([
2024-07-15 16:59:29 +02:00
{id: 'all', name: 'alle Bedingungen müssen zutreffen'},
{id: 'any', name: 'mindestens eine Bedingung muss zutreffen'},
2024-04-19 22:13:55 +02:00
]);
2024-04-18 22:15:28 +02:00
const fields = computed(() => {
const result = [];
props.single.config.sections.forEach((section) => {
section.fields.forEach((field) => {
2024-08-23 17:57:20 +02:00
if (['DropdownField', 'RadioField', 'CheckboxField', 'GroupField'].includes(field.type)) {
2024-04-18 22:15:28 +02:00
result.push(field);
}
});
});
return result;
});
2024-07-12 17:33:38 +02:00
function changeMode(mode) {
emit('update:modelValue', {...props.modelValue, mode: mode});
}
2024-04-19 23:57:05 +02:00
function update(index, key, value) {
2024-07-12 17:33:38 +02:00
var inner = {...props.modelValue};
2024-04-19 23:57:05 +02:00
if (key === 'comparator') {
2024-07-12 17:33:38 +02:00
var old = inner.ifs[index];
inner.ifs[index] = {
2024-04-19 23:57:05 +02:00
field: old.field,
comparator: value,
value: old.field ? comparatorOptions.value.find((c) => c.id === value).defaultValue[getField(old.field).type] : null,
};
}
if (key === 'field') {
2024-07-12 17:33:38 +02:00
var old = inner.ifs[index];
inner.ifs[index] = {
2024-04-19 23:57:05 +02:00
field: value,
comparator: null,
value: null,
};
}
2024-07-12 17:33:38 +02:00
emit('update:modelValue', inner);
}
function remove(index) {
emit('update:modelValue', {...props.modelValue, ifs: props.modelValue.ifs.toSpliced(index, 1)});
2024-04-18 22:15:28 +02:00
}
function getField(fieldName) {
return fields.value.find((f) => f.key === fieldName);
}
function getOptions(fieldName) {
2024-08-23 17:57:20 +02:00
if (getField(fieldName).type === 'GroupField') {
return groupOptions.value;
}
2024-04-18 22:15:28 +02:00
return getField(fieldName).options.map((o) => {
2024-07-15 16:59:29 +02:00
return {id: o, name: o};
2024-04-18 22:15:28 +02:00
});
}
const fieldOptions = computed(() =>
fields.value.map((field) => {
2024-07-15 16:59:29 +02:00
return {id: field.key, name: field.name};
2024-04-18 22:15:28 +02:00
})
);
function addCondition() {
2024-07-15 16:59:29 +02:00
emit('update:modelValue', {
...props.modelValue,
ifs: [
...props.modelValue.ifs,
{
field: null,
comparator: null,
value: null,
},
],
});
2024-04-18 22:15:28 +02:00
}
2024-07-12 17:33:38 +02:00
const locked = ref(false);
2024-04-18 22:15:28 +02:00
async function checkIfDirty() {
2024-07-15 16:59:29 +02:00
const response = await axios.post(props.single.links.is_dirty, {config: props.single.config});
2024-04-18 22:15:28 +02:00
locked.value = response.data.result;
}
2024-07-15 17:00:42 +02:00
if (props.single.links && props.single.links.is_dirty) {
checkIfDirty();
}
2024-08-23 17:57:20 +02:00
const groupOptions = ref([]);
onMounted(async () => {
2024-08-25 14:10:22 +02:00
groupOptions.value = (await axios.get('/api/group?all')).data.data;
2024-08-23 17:57:20 +02:00
});
2024-04-18 22:15:28 +02:00
</script>