salix-front/src/pages/Item/Card/ItemBasicData.vue

<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';

import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
import FilterItemForm from 'src/components/FilterItemForm.vue';
import CreateIntrastatForm from './CreateIntrastatForm.vue';
import VnCheckbox from 'src/components/common/VnCheckbox.vue';

const route = useRoute();
const { t } = useI18n();

const itemTypesOptions = ref([]);
const intrastatsOptions = ref([]);
const expensesOptions = ref([]);

const onIntrastatCreated = (response, formData) => {
    intrastatsOptions.value = [...intrastatsOptions.value, response];
    formData.intrastatFk = response.id;
};
</script>
<template>
    <FetchData
        url="ItemTypes"
        :filter="{
            fields: ['id', 'name', 'categoryFk'],
            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
    />
    <FetchData
        url="Expenses"
        :filter="{
            fields: ['id', 'name'],
            order: 'name ASC',
        }"
        @on-fetch="(data) => (expensesOptions = data)"
        auto-load
    />
    <FormModel
        :url-update="`Items/${route.params.id}`"
        model="Item"
        auto-load
        :clear-store-on-unmount="false"
    >
        <template #form="{ data }">
            <VnRow class="q-py-sm">
                <VnSelect
                    :label="t('item.basicData.type')"
                    v-model="data.typeFk"
                    :options="itemTypesOptions"
                    option-value="id"
                    option-label="name"
                    hide-selected
                    map-options
                    required
                    data-cy="itemBasicDataItemType"
                >
                    <template #option="scope">
                        <QItem v-bind="scope.itemProps">
                            <QItemSection>
                                <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
                                <QItemLabel caption>
                                    {{ scope.opt?.category?.name }}
                                </QItemLabel>
                            </QItemSection>
                        </QItem>
                    </template>
                </VnSelect>
                <VnInput
                    :label="t('item.basicData.reference')"
                    v-model="data.comment"
                    data-cy="itemBasicDataReference"
                />
                <VnInput
                    :label="t('item.basicData.relevancy')"
                    type="number"
                    v-model="data.relevancy"
                    data-cy="itemBasicDataRelevancy"
                />
            </VnRow>
            <VnRow class="q-py-sm">
                <VnInput
                    :label="t('item.basicData.stems')"
                    type="number"
                    v-model="data.stems"
                    data-cy="itemBasicDataStems"
                />
                <VnInput
                    :label="t('item.basicData.multiplier')"
                    type="number"
                    v-model="data.stemMultiplier"
                    data-cy="itemBasicDataMultiplier"
                />
                <VnSelectDialog
                    :label="t('item.basicData.generic')"
                    v-model="data.genericFk"
                    url="Items/withName"
                    :fields="['id', 'name']"
                    sort-by="id DESC"
                    option-value="id"
                    option-label="name"
                    map-options
                    hide-selected
                    action-icon="filter_alt"
                    data-cy="itemBasicDataGeneric"
                >
                    <template #form>
                        <FilterItemForm
                            url="Items/withName"
                            @item-selected="data.genericFk = $event"
                        />
                    </template>
                    <template #option="scope">
                        <QItem v-bind="scope.itemProps">
                            <QItemSection>
                                <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
                                <QItemLabel caption> #{{ scope.opt?.id }} </QItemLabel>
                            </QItemSection>
                        </QItem>
                    </template>
                </VnSelectDialog>
            </VnRow>
            <VnRow class="q-py-sm">
                <VnCheckbox
                    v-model="data.isCustomInspectionRequired"
                    :label="t('item.basicData.isCustomInspectionRequired')"
                    data-cy="itemBasicDataCustomInspection"
                />
                <VnSelectDialog
                    :label="t('item.basicData.intrastat')"
                    v-model="data.intrastatFk"
                    :options="intrastatsOptions"
                    option-value="id"
                    option-label="description"
                    map-options
                    hide-selected
                    data-cy="itemBasicDataIntrastat"
                    style="max-width: 31%"
                >
                    <template #form>
                        <CreateIntrastatForm
                            @on-data-saved="
                                (_, requestResponse) =>
                                    onIntrastatCreated(requestResponse, data)
                            "
                        />
                    </template>
                    <template #option="scope">
                        <QItem v-bind="scope.itemProps">
                            <QItemSection>
                                <QItemLabel>{{ scope.opt?.description }}</QItemLabel>
                                <QItemLabel caption> #{{ scope.opt?.id }} </QItemLabel>
                            </QItemSection>
                        </QItem>
                    </template>
                </VnSelectDialog>
                <div class="col">
                    <VnSelect
                        :label="t('item.basicData.expense')"
                        v-model="data.expenseFk"
                        :options="expensesOptions"
                        option-value="id"
                        option-label="name"
                        hide-selected
                        map-options
                        data-cy="itemBasicDataExpense"
                    />
                </div>
            </VnRow>
            <VnRow class="q-py-sm">
                <VnCheckbox
                    v-model="data.hasKgPrice"
                    :label="t('item.basicData.hasKgPrice')"
                    data-cy="itemBasicDataHasKgPrice"
                />
                <VnInput
                    :label="t('item.basicData.weightByPiece')"
                    v-model.number="data.weightByPiece"
                    :min="0"
                    type="number"
                    data-cy="itemBasicDataWeightByPiece"
                />
                <VnInput
                    :label="t('item.basicData.boxUnits')"
                    v-model.number="data.packingOut"
                    :min="0"
                    type="number"
                    data-cy="itemBasicDataBoxUnits"
                />
            </VnRow>
            <VnRow class="q-py-sm">
                <VnCheckbox
                    v-model="data.isActive"
                    :label="t('item.basicData.isActive')"
                    data-cy="itemBasicDataIsActive"
                />

                <VnCheckbox
                    v-model="data.isFragile"
                    :label="t('item.basicData.isFragile')"
                    :info="t('item.basicData.isFragileTooltip')"
                    data-cy="itemBasicDataIsFragile"
                />
                <VnCheckbox
                    v-model="data.isPhotoRequested"
                    :label="t('item.basicData.isPhotoRequested')"
                    :info="t('item.basicData.isPhotoRequestedTooltip')"
                    data-cy="itemBasicDataIsPhotoRequested"
                />
            </VnRow>
            <VnRow class="q-py-sm">
                <VnInput
                    :label="t('item.basicData.recycledPlastic')"
                    v-model.number="data.recycledPlastic"
                    :min="0"
                    type="number"
                    data-cy="itemBasicDataRecycledPlastic"
                />
                <VnInput
                    :label="t('item.basicData.nonRecycledPlastic')"
                    v-model.number="data.nonRecycledPlastic"
                    :min="0"
                    type="number"
                    data-cy="itemBasicDataNonRecycledPlastic"
                />
            </VnRow>
            <VnRow class="q-py-sm">
                <VnInput
                    :label="t('item.basicData.description')"
                    type="textarea"
                    v-model="data.description"
                    fill-input
                    data-cy="itemBasicDataDescription"
                />
                <VnInput
                    type="textarea"
                    :label="t('item.basicData.photoMotivation')"
                    v-model="data.photoMotivation"
                    fill-input
                    data-cy="itemBasicDataPhotoMotivation"
                />
            </VnRow>
        </template>
    </FormModel>
</template>