salix-front/src/components/FormModel.vue

<script setup>
import axios from 'axios';
import { onMounted, onUnmounted, computed, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import { useState } from 'src/composables/useState';
import { useValidator } from 'src/composables/useValidator';
import SkeletonForm from 'components/ui/SkeletonForm.vue';

const quasar = useQuasar();
const { t } = useI18n();
const state = useState();
const { validate } = useValidator();

const $props = defineProps({
    url: {
        type: String,
        default: '',
    },
    model: {
        type: String,
        default: '',
    },
    filter: {
        type: Object,
        default: null,
    },
    urlUpdate: {
        type: String,
        default: null,
    },
});

const emit = defineEmits(['onFetch']);

defineExpose({
    save,
});

onMounted(async () => await fetch());

onUnmounted(() => {
    state.unset($props.model);
});

const isLoading = ref(false);
const hasChanges = ref(false);
const formData = computed(() => state.get($props.model));
const originalData = ref();
const formUrl = computed(() => $props.url);

async function fetch() {
    const { data } = await axios.get($props.url, {
        params: { filter: $props.filter },
    });

    state.set($props.model, data);
    originalData.value = Object.assign({}, data);

    watch(formData.value, () => (hasChanges.value = true));

    emit('onFetch', state.get($props.model));
}

async function save() {
    if (!hasChanges.value) {
        return quasar.notify({
            type: 'negative',
            message: t('globals.noChanges'),
        });
    }
    isLoading.value = true;
    await axios.patch($props.urlUpdate || $props.url, formData.value);

    originalData.value = formData.value;
    hasChanges.value = false;
    isLoading.value = false;
}

function reset() {
    state.set($props.model, originalData.value);
    hasChanges.value = false;
}
// eslint-disable-next-line vue/no-dupe-keys
function filter(value, update, filterOptions) {
    update(
        () => {
            const { options, filterFn } = filterOptions;

            options.value = filterFn(options, value);
        },
        (ref) => {
            ref.setOptionIndex(-1);
            ref.moveOptionSelection(1, true);
        }
    );
}

watch(formUrl, async () => {
    originalData.value = null;
    reset();
    fetch();
});
</script>
<template>
    <QBanner v-if="hasChanges" class="text-white bg-warning">
        <QIcon name="warning" size="md" class="q-mr-md" />
        <span>{{ t('globals.changesToSave') }}</span>
    </QBanner>
    <QForm v-if="formData" @submit="save" @reset="reset" class="q-pa-md">
        <slot name="form" :data="formData" :validate="validate" :filter="filter"></slot>
        <div class="q-mt-lg">
            <slot name="actions">
                <QBtn :label="t('globals.save')" type="submit" color="primary" />
                <QBtn
                    :label="t('globals.reset')"
                    type="reset"
                    class="q-ml-sm"
                    color="primary"
                    flat
                    :disable="!hasChanges"
                />
            </slot>
        </div>
    </QForm>
    <SkeletonForm v-if="!formData" />
    <QInnerLoading
        :showing="isLoading"
        :label="t('globals.pleaseWait')"
        color="primary"
    />
</template>