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 { dashIfEmpty, toCurrency, toDateHourMinSec } 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 FetchedTags from 'components/ui/FetchedTags.vue';

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

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('globals.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>
    <div class="q-pa-md">
        <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')" dash>
                        <template #value>
                            <span class="link">
                                {{ dashIfEmpty(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="Boolean(entity?.isConfirmed)"
                    />
                </QCard>
                <QCard class="vn-one">
                    <VnLv
                        :label="t('order.summary.created')"
                        :value="toDateHourMinSec(entity?.created)"
                    />
                    <VnLv
                        :label="t('order.summary.confirmed')"
                        :value="toDateHourMinSec(entity?.confirmed)"
                    />
                    <VnLv
                        :label="t('order.summary.landed')"
                        :value="toDateHourMinSec(entity?.landed)"
                    />
                    <VnLv :label="t('order.summary.phone')">
                        <template #value>
                            {{ dashIfEmpty(entity?.address?.phone) }}
                            <a
                                v-if="entity?.address?.phone"
                                :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')"
                        :value="`${entity?.address?.street} - ${entity?.address?.city} (${entity?.address?.province?.name})`"
                        class="order-summary-address"
                    />
                </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>
                        <template #header="props">
                            <QTr :props="props">
                                <QTh auto-width>{{ t('order.summary.item') }}</QTh>
                                <QTh>{{ t('globals.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>
                                    <FetchedTags :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>
    </div>
</template>
<style lang="scss">
.cardSummary .summaryBody .vn-label-value.order-summary-address {
    .label {
        flex-shrink: 0;
    }

    .value {
        white-space: normal;
    }
}
</style>
<style lang="scss" scoped>
.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-color);
        }
    }
}
</style>