salix-front/src/pages/Order/Card/OrderSummary.vue

<script setup>
import { computed, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore';
import { toCurrency, toDateHour } from 'src/filters';
import VnLv from 'components/ui/VnLv.vue';
import CardSummary from 'components/ui/CardSummary.vue';
import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
import OrderSearchbar from 'pages/Order/Card/OrderSearchbar.vue';
import FetchedTags from 'components/ui/FetchedTags.vue';

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

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

const entityId = computed(() => $props.id || route.params.id);
const detailsColumns = ref([
    {
        name: 'item',
        label: t('order.summary.item'),
        field: (row) => row?.item?.id,
        sortable: true,
    },
    {
        name: 'description',
        label: t('order.summary.description'),
        field: (row) => row?.item?.name,
    },
    {
        name: 'quantity',
        label: t('order.summary.quantity'),
        field: (row) => row?.quantity,
    },
    {
        name: 'price',
        label: t('order.summary.price'),
        field: (row) => toCurrency(row?.price),
    },
    {
        name: 'amount',
        label: t('order.summary.amount'),
        field: (row) => toCurrency(row?.quantity * row?.price),
    },
]);
</script>

<template>
    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
        <OrderSearchbar />
    </Teleport>
    <CardSummary ref="summary" :url="`Orders/${entityId}/summary`">
        <template #header="{ entity }">
            {{ t('order.summary.basket') }} #{{ entity?.id }} -
            {{ entity?.client?.name }} ({{ entity?.clientFk }})
        </template>
        <template #body="{ entity }">
            <QCard class="vn-one">
                <VnLv label="ID" :value="entity.id" />
                <VnLv :label="t('order.summary.nickname')">
                    <template #value>
                        <span class="link">
                            {{ entity?.address?.nickname || '-' }}
                            <CustomerDescriptorProxy :id="entity?.clientFk" />
                        </span>
                    </template>
                </VnLv>
                <VnLv
                    :label="t('order.summary.company')"
                    :value="entity?.address?.companyFk"
                />
                <VnLv
                    :label="t('order.summary.confirmed')"
                    :value="entity?.isConfirmed === 1"
                />
            </QCard>
            <QCard class="vn-one">
                <VnLv
                    :label="t('order.summary.created')"
                    :value="toDateHour(entity?.created)"
                />
                <VnLv
                    :label="t('order.summary.confirmed')"
                    :value="toDateHour(entity?.confirmed)"
                />
                <VnLv
                    :label="t('order.summary.landed')"
                    :value="toDateHour(entity?.landed)"
                />
                <VnLv :label="t('order.summary.phone')">
                    <template #value>
                        {{ entity?.address?.phone || '-' }}
                        <a :href="`tel:${entity?.address?.phone}`" class="text-primary">
                            <QIcon name="phone" />
                        </a>
                    </template>
                </VnLv>
                <VnLv
                    :label="t('order.summary.createdFrom')"
                    :value="entity?.sourceApp"
                />
                <VnLv :label="t('order.summary.address')">
                    <template #value>
                        <span class="address">
                            {{
                                `${entity?.address?.street} - ${entity?.address?.city} (${entity?.address?.province?.name})`
                            }}
                        </span>
                    </template>
                </VnLv>
            </QCard>
            <QCard class="vn-one">
                <p class="header">
                    {{ t('order.summary.notes') }}
                </p>
                <p v-if="entity?.note" class="no-margin">
                    {{ entity?.note }}
                </p>
            </QCard>
            <QCard class="vn-one">
                <VnLv>
                    <template #label>
                        <span class="text-h6">{{ t('order.summary.subtotal') }}</span>
                    </template>
                    <template #value>
                        <span class="text-h6">{{ toCurrency(entity?.subTotal) }}</span>
                    </template>
                </VnLv>
                <VnLv>
                    <template #label>
                        <span class="text-h6">{{ t('order.summary.vat') }}</span>
                    </template>
                    <template #value>
                        <span class="text-h6">{{ toCurrency(entity?.VAT) }}</span>
                    </template>
                </VnLv>
                <VnLv>
                    <template #label>
                        <span class="text-h6">{{ t('order.summary.total') }}</span>
                    </template>
                    <template #value>
                        <span class="text-h6">{{ toCurrency(entity?.total) }}</span>
                    </template>
                </VnLv>
            </QCard>
            <QCard>
                <p class="header">
                    {{ t('order.summary.details') }}
                </p>
                <QTable
                    :columns="detailsColumns"
                    :rows="entity?.rows"
                    flat
                    hide-pagination
                >
                    <template #header="props">
                        <QTr :props="props">
                            <QTh auto-width>{{ t('order.summary.item') }}</QTh>
                            <QTh>{{ t('order.summary.description') }}</QTh>
                            <QTh auto-width>{{ t('order.summary.quantity') }}</QTh>
                            <QTh auto-width>{{ t('order.summary.price') }}</QTh>
                            <QTh auto-width>{{ t('order.summary.amount') }}</QTh>
                        </QTr>
                    </template>
                    <template #body="props">
                        <QTr :props="props">
                            <QTd key="item" :props="props" class="item">
                                {{ props.row.item?.id }}
                            </QTd>
                            <QTd key="description" :props="props" class="description">
                                <div class="name">
                                    <span>{{ props.row.item.name }}</span>
                                    <span v-if="props.row.item.subName" class="subName">
                                        {{ props.row.item.subName }}
                                    </span>
                                </div>
                                <fetched-tags :item="props.row.item" :max-length="5" />
                            </QTd>
                            <QTd key="quantity" :props="props">
                                {{ props.row.quantity }}
                            </QTd>
                            <QTd key="price" :props="props">
                                {{ props.row.price }}
                            </QTd>
                            <QTd key="amount" :props="props">
                                {{ toCurrency(props.row?.quantity * props.row?.price) }}
                            </QTd>
                        </QTr>
                    </template>
                </QTable>
            </QCard>
        </template>
    </CardSummary>
</template>
<style lang="scss" scoped>
.address {
    white-space: normal;
}

.item {
    text-align: center;
}

.description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    height: auto;
    padding-top: 12px;
    padding-bottom: 12px;

    .name {
        display: flex;
        align-items: center;
        padding-bottom: 8px;

        & > * {
            flex: 1;
        }

        .subName {
            text-transform: uppercase;
            color: var(--vn-label);
        }
    }
}
</style>