hedera-web/src/pages/Ecomerce/TicketDetails.vue

<script setup>
import { inject } from 'vue';
import { useI18n } from 'vue-i18n';

import VnImg from 'src/components/ui/VnImg.vue';

import { currency, formatDateTitle } from 'src/lib/filters.js';
import { useVnConfirm } from 'src/composables/useVnConfirm.js';

defineProps({
    ticket: {
        type: Object,
        default: () => ({})
    },
    rows: {
        type: Array,
        default: () => []
    },
    showTotal: {
        type: Boolean,
        default: true
    },
    showTax: {
        type: Boolean,
        default: true
    },
    showItems: {
        type: Boolean,
        default: true
    },
    canDeleteItems: {
        type: Boolean,
        default: false
    }
});

const emit = defineEmits(['onRowDeleted']);
const jApi = inject('jApi');
const { t } = useI18n();
const { openConfirmationModal } = useVnConfirm();

const lineDiscountSubtotal = line => {
    return line.quantity * line.price;
};

const lineSubtotal = line =>
    lineDiscountSubtotal(line) * ((100 - line.discount) / 100);

const deleteRow = id => {
    try {
        jApi.execQuery(
            `START TRANSACTION;
            DELETE FROM hedera.myOrderRow WHERE ((id = #id));
            COMMIT`,
            {
                id
            }
        );
        emit('onRowDeleted');
    } catch (error) {
        console.error('Error deleting order item:', error);
    }
};
</script>

<template>
    <QCard class="vn-w-sm" style="padding: 32px">
        <QCardSection class="no-padding q-mb-md">
            <div class="text-h6">#{{ ticket.id }}</div>
        </QCardSection>
        <QCardSection class="no-padding q-mb-md q-gutter-y-xs">
            <div class="text-subtitle1 text-bold">
                {{ t('shippingInformation') }}
            </div>
            <div v-if="ticket.shipped">
                {{ t('preparation') }}
                {{ formatDateTitle(ticket.shipped) }}
            </div>
            <div v-if="ticket.landed">
                {{ t('delivery') }}
                {{ formatDateTitle(ticket.landed) }}
            </div>
            <div v-if="ticket.method && ticket.agency">
                {{ t(ticket.method != 'PICKUP' ? 'agency' : 'warehouse') }}
                {{ ticket.agency }}
            </div>
        </QCardSection>
        <QCardSection class="no-padding q-gutter-y-xs">
            <div class="text-subtitle1 text-bold">
                {{ t('deliveryAddress') }}
            </div>
            <div>{{ ticket.nickname }}</div>
            <div>{{ ticket.street }}</div>
            <div>
                <span v-if="ticket.postalCode || ticket.city">
                    {{ ticket.postalCode }}, {{ ticket.city }}
                </span>
                <span v-if="ticket.province"> ({{ ticket.province }})</span>
            </div>
        </QCardSection>
        <QCardSection
            v-if="showTotal"
            class="no-padding q-my-md text-subtitle1 text-bold column"
        >
            <span class="text-right">
                {{ t('total') }} {{ currency(ticket.taxBase) }}
            </span>
            <span v-if="showTax" class="text-right">
                {{ t('totalTax') }} {{ currency(ticket.total) }}
            </span>
        </QCardSection>
        <QSeparator v-if="showItems" inset />
        <QList v-for="(row, index) in rows" :key="index">
            <QItem v-if="row">
                <QItemSection v-if="canDeleteItems" avatar>
                    <QBtn
                        icon="delete"
                        rounded
                        no-caps
                        dense
                        flat
                        @click.stop="
                            openConfirmationModal(
                                null,
                                t('confirmDelete'),
                                () => deleteRow(row.id)
                            )
                        "
                    >
                        <QTooltip>
                            {{ t('delete') }}
                        </QTooltip>
                    </QBtn>
                </QItemSection>
                <QItemSection avatar>
                    <VnImg
                        storage="catalog"
                        size="200x200"
                        :id="row.image"
                        rounded
                    />
                </QItemSection>
                <QItemSection>
                    <QItemLabel v-if="row.concept" lines="1">
                        {{ row.concept }}
                    </QItemLabel>
                    <QItemLabel v-if="row.item" lines="1">
                        {{ row.item }}
                    </QItemLabel>
                    <QItemLabel lines="1" caption>
                        {{ row.value5 }} {{ row.value6 }} {{ row.value7 }}
                    </QItemLabel>
                    <QItemLabel lines="1">
                        {{ row.quantity }} x
                        {{ currency(row.price) }}
                    </QItemLabel>
                </QItemSection>
                <QItemSection side class="total">
                    <QItemLabel>
                        <span> {{ currency(lineDiscountSubtotal(row)) }}</span>
                        <span class="discount" v-if="row.discount">
                            -
                            {{ currency(row.discount) }} =
                            {{ currency(lineSubtotal(row)) }}
                        </span>
                    </QItemLabel>
                </QItemSection>
            </QItem>
        </QList>
        <div
            v-if="!rows.length && showItems"
            class="row items-center justify-center q-pa-md"
            style="margin-top: 32px"
        >
            <QIcon class="q-mr-md" name="block" size="sm" />
            <span>{{ t('emptyList') }}</span>
        </div>
    </QCard>
</template>

<i18n lang="yaml">
en-US:
    shippingInformation: Shipping Information
    preparation: Preparation
    delivery: Delivery
    warehouse: Store
    deliveryAddress: Delivery address
    total: Total
    totalTax: Total + IVA
es-ES:
    shippingInformation: Datos de envío
    preparation: Preparación
    delivery: Entrega
    warehouse: Almacén
    deliveryAddress: Dirección de entrega
    total: Total
    totalTax: Total + IVA
ca-ES:
    shippingInformation: Dades d'enviament
    preparation: Preparació
    delivery: Lliurament
    warehouse: Magatzem
    deliveryAddress: Adreça de lliurament
    total: Total
    totalTax: Total + IVA
fr-FR:
    shippingInformation: Informations sur la livraison
    preparation: Préparation
    delivery: Livraison
    warehouse: Entrepôt
    deliveryAddress: Adresse de livraison
    total: Total
    totalTax: Total + IVA
pt-PT:
    shippingInformation: Dados de envio
    preparation: Preparação
    delivery: Entrega
    warehouse: Armazém
    deliveryAddress: Endereço de entrega
    total: Total
    totalTax: Total + IVA
</i18n>