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

<template>
    <ui-note v-if="locked" class="mt-2" type="danger">
        Dieses Formular wurde bereits bearbeitet.<br />
        Bitte speichere es erst ab und editiere dann die Bedingungen.
    </ui-note>

    <div v-else>
        <f-select :id="`mode-${id}`" :name="`mode-${id}`" :model-value="modelValue.mode" :options="modeOptions" label="Modus" @update:model-value="changeMode"></f-select>

        <ui-icon-button class="mt-4 mb-2" icon="plus" @click="addCondition">Bedingung einfügen</ui-icon-button>

        <div v-for="(condition, index) in modelValue.ifs" :key="index" class="grid grid-cols-[1fr_1fr_1fr_max-content] gap-2">
            <f-select
                :id="`field-${index}-${id}`"
                :model-value="condition.field"
                :options="fieldOptions"
                :name="`field-${index}-${id}`"
                label="Feld"
                @update:model-value="update(index, 'field', $event)"
            ></f-select>
            <f-select
                :id="`comparator-${index}-${id}`"
                :options="comparatorOptions"
                :model-value="condition.comparator"
                :name="`comparator-${index}-${id}`"
                label="Vergleich"
                @update:model-value="update(index, 'comparator', $event)"
            ></f-select>
            <f-select
                v-if="condition.field && ['isEqual', 'isNotEqual'].includes(condition.comparator) && ['RadioField', 'DropdownField', 'GroupField'].includes(getField(condition.field).type)"
                :id="`value-${index}-${id}`"
                v-model="condition.value"
                :options="getOptions(condition.field)"
                :name="`value-${index}-${id}`"
                label="Wert"
            ></f-select>
            <f-multipleselect
                v-if="condition.field && ['isIn', 'isNotIn'].includes(condition.comparator) && ['RadioField', 'DropdownField', 'GroupField'].includes(getField(condition.field).type)"
                :id="`value-${index}-${id}`"
                v-model="condition.value"
                :options="getOptions(condition.field)"
                label="Wert"
            ></f-multipleselect>
            <f-switch
                v-if="condition.field && condition.comparator && ['CheckboxField'].includes(getField(condition.field).type)"
                :id="`value-${index}-${id}`"
                v-model="condition.value"
                :name="`value-${index}-${id}`"
                label="Wert"
            ></f-switch>
            <ui-action-button tooltip="Löschen" icon="trash" class="btn-danger self-end h-8" @click="remove(index)"></ui-action-button>
        </div>
    </div>
</template>

<script setup>
import {ref, inject, computed, onMounted} from 'vue';
const axios = inject('axios');
const emit = defineEmits(['update:modelValue']);

const props = defineProps({
    modelValue: {
        required: true,
        type: Object,
    },
    single: {
        required: true,
        type: Object,
    },
    id: {
        required: true,
        type: String,
    },
});

const comparatorOptions = ref([
    {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: []}},
]);

const modeOptions = ref([
    {id: 'all', name: 'alle Bedingungen müssen zutreffen'},
    {id: 'any', name: 'mindestens eine Bedingung muss zutreffen'},
]);

const fields = computed(() => {
    const result = [];
    props.single.config.sections.forEach((section) => {
        section.fields.forEach((field) => {
            if (['DropdownField', 'RadioField', 'CheckboxField', 'GroupField'].includes(field.type)) {
                result.push(field);
            }
        });
    });

    return result;
});

function changeMode(mode) {
    emit('update:modelValue', {...props.modelValue, mode: mode});
}

function update(index, key, value) {
    var inner = {...props.modelValue};
    if (key === 'comparator') {
        var old = inner.ifs[index];
        inner.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.ifs[index];
        inner.ifs[index] = {
            field: value,
            comparator: null,
            value: null,
        };
    }
    emit('update:modelValue', inner);
}

function remove(index) {
    emit('update:modelValue', {...props.modelValue, ifs: props.modelValue.ifs.toSpliced(index, 1)});
}

function getField(fieldName) {
    return fields.value.find((f) => f.key === fieldName);
}

function getOptions(fieldName) {
    if (getField(fieldName).type === 'GroupField') {
        return groupOptions.value;
    }

    return getField(fieldName).options.map((o) => {
        return {id: o, name: o};
    });
}

const fieldOptions = computed(() =>
    fields.value.map((field) => {
        return {id: field.key, name: field.name};
    })
);

function addCondition() {
    emit('update:modelValue', {
        ...props.modelValue,
        ifs: [
            ...props.modelValue.ifs,
            {
                field: null,
                comparator: null,
                value: null,
            },
        ],
    });
}

const locked = ref(false);

async function checkIfDirty() {
    const response = await axios.post(props.single.links.is_dirty, {config: props.single.config});

    locked.value = response.data.result;
}

if (props.single.links && props.single.links.is_dirty) {
    checkIfDirty();
}

const groupOptions = ref([]);

onMounted(async () => {
    groupOptions.value = (await axios.get('/api/group')).data.data;
});
</script>