salix-front/src/pages/Item/ItemCreate.vue

<script setup>
import { reactive, ref, onBeforeMount } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';

import FetchData from 'components/FetchData.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';

import axios from 'axios';

const { t } = useI18n();
const router = useRouter();

const newItemForm = reactive({});

const originsOptions = ref([]);
const tagsOptions = ref([]);
const validPriorities = ref([]);
const itemTypesOptions = ref([]);
const intrastatsOptions = ref([]);

const fetchDefaultPriorityTag = async () => {
    const filter = {
        fields: ['defaultPriority', 'defaultTag', 'validPriorities'],
        limit: 1,
    };
    const { data } = await axios.get(`ItemConfigs`, { filter });
    if (!data) return;

    const dataRow = data[0];
    validPriorities.value = [...dataRow.validPriorities];
    newItemForm.priority = dataRow.defaultPriority;
    newItemForm.tag = dataRow.defaultTag;
};

const redirectToItemBasicData = (_, { id }) => {
    router.push({ name: 'ItemBasicData', params: { id } });
};

onBeforeMount(async () => {
    await fetchDefaultPriorityTag();
});
</script>

<template>
    <FetchData
        url="Origins"
        @on-fetch="(data) => (originsOptions = data)"
        :filter="{ order: 'name' }"
        auto-load
    />
    <FetchData
        url="Tags"
        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
        @on-fetch="(data) => (tagsOptions = data)"
        auto-load
    />
    <FetchData
        url="ItemTypes"
        :filter="{
            fields: ['id', 'code', 'categoryFk', 'name'],
            include: 'category',
            order: 'name ASC',
        }"
        @on-fetch="(data) => (itemTypesOptions = data)"
        auto-load
    />
    <FetchData
        url="Intrastats"
        :filter="{ fields: ['id', 'description'], order: 'description ASC' }"
        @on-fetch="(data) => (intrastatsOptions = data)"
        auto-load
    />
    <QPage>
        <VnSubToolbar />
        <FormModel
            url-create="Items/new"
            model="item"
            :form-initial-data="newItemForm"
            observe-form-changes
            @on-data-saved="redirectToItemBasicData"
        >
            <template #form="{ data }">
                <VnRow class="row q-gutter-md q-mb-md">
                    <VnInput
                        v-model="data.provisionalName"
                        :label="t('item.create.name')"
                    />
                    <VnSelectFilter
                        :label="t('item.create.tag')"
                        v-model="data.tag"
                        :options="tagsOptions"
                        option-value="id"
                        option-label="name"
                        hide-selected
                    />
                    <VnSelectFilter
                        :label="t('item.create.priority')"
                        v-model="data.priority"
                        :options="validPriorities"
                        option-value="priority"
                        option-label="priority"
                        hide-selected
                    />
                </VnRow>
                <VnRow class="row q-gutter-md q-mb-md">
                    <VnSelectFilter
                        :label="t('item.create.type')"
                        v-model="data.typeFk"
                        :options="itemTypesOptions"
                        option-label="name"
                        option-value="id"
                        hide-selected
                    >
                        <template #option="scope">
                            <QItem class="column" v-bind="scope.itemProps">
                                <QItemLabel class="row">
                                    <span style="width: 3em">
                                        {{ scope.opt?.code }}
                                    </span>
                                    <span>
                                        {{ scope.opt?.name }}
                                    </span>
                                </QItemLabel>
                                <QItemLabel v-if="scope.opt?.category" caption>
                                    {{ scope.opt?.category?.name }}
                                </QItemLabel>
                            </QItem>
                        </template>
                    </VnSelectFilter>
                    <VnSelectFilter
                        :label="t('item.create.intrastat')"
                        v-model="data.intrastatFk"
                        :options="intrastatsOptions"
                        option-label="description"
                        option-value="id"
                        hide-selected
                    >
                        <template #option="scope">
                            <QItem v-bind="scope.itemProps">
                                <QItemSection>
                                    <QItemLabel>
                                        {{ scope.opt?.description }}
                                    </QItemLabel>
                                    <QItemLabel caption>
                                        #{{ scope.opt?.id }}
                                    </QItemLabel>
                                </QItemSection>
                            </QItem>
                        </template>
                    </VnSelectFilter>
                </VnRow>
                <VnRow class="row q-gutter-md q-mb-md">
                    <VnSelectFilter
                        :label="t('item.create.origin')"
                        v-model="data.originFk"
                        :options="originsOptions"
                        option-value="id"
                        option-label="name"
                        hide-selected
                    />
                </VnRow>
            </template>
        </FormModel>
    </QPage>
</template>