salix-front-mindshore-fork2/src/pages/Order/Card/OrderDescriptor.vue

<script setup>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { toCurrency, toDate } from 'src/filters';
import { useState } from 'src/composables/useState';
import useCardDescription from 'src/composables/useCardDescription';

import CardDescriptor from 'components/ui/CardDescriptor.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import FetchData from 'components/FetchData.vue';
import OrderDescriptorMenu from 'pages/Order/Card/OrderDescriptorMenu.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';

const DEFAULT_ITEMS = 0;

const $props = defineProps({
    id: {
        type: Number,
        required: false,
        default: null,
    },
});

const route = useRoute();
const state = useState();
const { t } = useI18n();
const data = ref(useCardDescription());
const getTotalRef = ref();

const entityId = computed(() => {
    return $props.id || route.params.id;
});

const filter = {
    include: [
        { relation: 'agencyMode', scope: { fields: ['name'] } },
        {
            relation: 'address',
            scope: { fields: ['nickname'] },
        },
        { relation: 'rows', scope: { fields: ['id'] } },
        {
            relation: 'client',
            scope: {
                fields: [
                    'salesPersonFk',
                    'name',
                    'isActive',
                    'isFreezed',
                    'isTaxDataChecked',
                ],
                include: {
                    relation: 'salesPersonUser',
                    scope: { fields: ['id', 'name'] },
                },
            },
        },
    ],
};

const setData = (entity) => {
    if (!entity) return;
    getTotalRef.value && getTotalRef.value.fetch();
    data.value = useCardDescription(entity?.client?.name, entity?.id);
    state.set('orderData', entity);
};

const getConfirmationValue = (isConfirmed) => {
    return t(isConfirmed ? 'order.summary.confirmed' : 'order.summary.notConfirmed');
};

const total = ref(null);
</script>

<template>
    <FetchData
        ref="getTotalRef"
        :url="`Orders/${entityId}/getTotal`"
        @on-fetch="(response) => (total = response)"
    />
    <CardDescriptor
        ref="descriptor"
        :url="`Orders/${entityId}`"
        :filter="filter"
        module="Order"
        :title="data.title"
        :subtitle="data.subtitle"
        @on-fetch="setData"
        data-key="orderData"
    >
        <template #menu="{ entity }">
            <OrderDescriptorMenu :order="entity" />
        </template>
        <template #body="{ entity }">
            <VnLv
                :label="t('order.summary.state')"
                :value="getConfirmationValue(entity.isConfirmed)"
            />
            <VnLv :label="t('order.field.salesPersonFk')">
                <template #value>
                    <span class="link">
                        {{ entity?.client?.salesPersonUser?.name || '-' }}
                        <WorkerDescriptorProxy :id="entity?.client?.salesPersonFk" />
                    </span>
                </template>
            </VnLv>
            <VnLv :label="t('order.summary.landed')" :value="toDate(entity?.landed)" />
            <VnLv :label="t('order.field.agency')" :value="entity?.agencyMode?.name" />
            <VnLv :label="t('order.summary.alias')" :value="entity?.address?.nickname" />
            <VnLv
                :label="t('order.summary.items')"
                :value="(entity?.rows?.length || DEFAULT_ITEMS).toString()"
            />
            <VnLv :label="t('order.summary.total')" :value="toCurrency(total)" />
        </template>
        <template #actions="{ entity }">
            <QCardActions>
                <QBtn
                    size="md"
                    icon="vn:ticket"
                    color="primary"
                    :to="{
                        name: 'TicketList',
                        query: {
                            table: JSON.stringify({
                                orderFk: entity.id,
                            }),
                        },
                    }"
                >
                    <QTooltip>{{ t('order.summary.orderTicketList') }}</QTooltip>
                </QBtn>
                <QBtn
                    size="md"
                    icon="vn:client"
                    color="primary"
                    :to="{ name: 'CustomerCard', params: { id: entity.clientFk } }"
                >
                    <QTooltip>{{ t('claim.customerSummary') }}</QTooltip>
                </QBtn>
            </QCardActions>
        </template>
    </CardDescriptor>
</template>