salix-front/src/pages/Route/Card/RouteListTicketsDialog.vue

<script setup>
import { useDialogPluginComponent } from 'quasar';
import { useI18n } from 'vue-i18n';
import { ref } from 'vue';
import FetchData from 'components/FetchData.vue';
import axios from 'axios';
import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';

const { t } = useI18n();
const $props = defineProps({
    id: {
        type: Number,
        required: true,
    },
});

const emit = defineEmits([...useDialogPluginComponent.emits]);

const { dialogRef, onDialogHide } = useDialogPluginComponent();

const columns = ref([
    {
        name: 'ticket',
        label: t('Ticket'),
        field: (row) => row.id,
        sortable: true,
        align: 'left',
    },
    {
        name: 'client',
        label: t('Client'),
        field: (row) => row.nickname,
        sortable: true,
        align: 'left',
    },
    {
        name: 'province',
        label: t('Province'),
        field: (row) => row?.address?.province?.name,
        sortable: true,
        align: 'left',
    },
    {
        name: 'city',
        label: t('City'),
        field: (row) => row?.address?.city,
        sortable: true,
        align: 'left',
    },
    {
        name: 'pc',
        label: t('PC'),
        field: (row) => row?.address?.postalCode,
        sortable: true,
        align: 'left',
    },
    {
        name: 'address',
        label: t('Address'),
        field: (row) => row?.address?.street,
        sortable: true,
        align: 'left',
    },
    {
        name: 'zone',
        label: t('Zone'),
        field: (row) => row?.zone?.name,
        sortable: true,
        align: 'left',
    },
    {
        name: 'actions',
        label: '',
        sortable: false,
        align: 'right',
    },
]);

const refreshKey = ref(0);
const selectedRows = ref([]);
const isLoading = ref(true);
const ticketList = ref([]);

const onDataFetched = (data) => {
    ticketList.value = data;
    isLoading.value = false;
};

const selectedTicket = ref(null);
const unlinkZone = async (ticket) => {
    await axios.post('Routes/unlink', {
        agencyModeId: ticket?.agencyModeFk,
        zoneId: ticket.zoneFk,
    });
    selectedTicket.value = null;
    refreshKey.value++;
};

const setTicketsRoute = async () => {
    if (!selectedRows.value?.length) {
        return;
    }

    await Promise.all(
        (selectedRows.value || [])
            .filter((ticket) => ticket?.id)
            .map((ticket) =>
                axios.patch(`Routes/${$props.id}/insertTicket`, { ticketId: ticket.id })
            )
    );
    await axios.post(`Routes/${$props.id}/updateVolume`);
    emit('ok');
    emit('hide');
};
</script>

<template>
    <FetchData
        :key="refreshKey"
        :url="`Routes/${$props.id}/getSuggestedTickets`"
        @on-fetch="onDataFetched"
        auto-load
    />
    <QDialog
        :model-value="Boolean(selectedTicket)"
        @update:model-value="(value) => (!value ? (selectedTicket = null) : null)"
        class="confirmation-dialog"
    >
        <QCard style="min-width: 350px">
            <QCardSection>
                <p class="text-h6 q-ma-none">{{ t('Unlink selected zone?') }}</p>
            </QCardSection>
            <QCardActions align="right">
                <QBtn
                    flat
                    :label="t('globals.cancel')"
                    v-close-popup
                    class="text-primary"
                />
                <QBtn color="primary" v-close-popup @click="unlinkZone(selectedTicket)">
                    {{ t('Unlink') }}
                </QBtn>
            </QCardActions>
        </QCard>
    </QDialog>
    <QDialog ref="dialogRef" @hide="onDialogHide">
        <QCard class="full-width dialog">
            <QCardSection class="row items-center q-pb-none">
                <div class="text-h6">{{ t('Tickets to add') }}</div>
                <QSpace />
                <QBtn icon="close" flat round dense v-close-popup />
            </QCardSection>
            <QCardSection>
                <QTable
                    v-model:selected="selectedRows"
                    :columns="columns"
                    :loading="isLoading"
                    :rows="ticketList"
                    flat
                    row-key="id"
                    selection="multiple"
                    :rows-per-page-options="[0]"
                    hide-pagination
                >
                    <template #body-cell-ticket="props">
                        <QTd :props="props">
                            <span class="link">
                                {{ props.value }}
                            </span>
                            <TicketDescriptorProxy :id="props?.row?.id" />
                        </QTd>
                    </template>
                    <template #body-cell-client="props">
                        <QTd :props="props">
                            <span class="link">
                                {{ props.value }}
                                <CustomerDescriptorProxy :id="props?.row?.clientFk" />
                            </span>
                        </QTd>
                    </template>
                    <template #body-cell-actions="props">
                        <QTd :props="props">
                            <QIcon
                                name="link_off"
                                size="xs"
                                color="primary"
                                class="cursor-pointer"
                                @click="selectedTicket = props?.row"
                            >
                                <QTooltip
                                    >{{
                                        t('Unlink zone', {
                                            zone: props?.row?.zone?.name,
                                            agency: props?.row?.agencyMode?.name,
                                        })
                                    }}
                                </QTooltip>
                            </QIcon>
                        </QTd>
                    </template>
                </QTable>
            </QCardSection>
            <QCardActions align="right">
                <QBtn flat v-close-popup class="text-primary"
                    >{{ t('globals.cancel') }}
                </QBtn>
                <QBtn
                    color="primary"
                    :disable="!selectedRows?.length"
                    @click="setTicketsRoute"
                    >{{ t('globals.add') }}
                </QBtn>
            </QCardActions>
        </QCard>
    </QDialog>
</template>

<style lang="scss" scoped>
.confirmation-dialog {
    z-index: 6001 !important;
}

.dialog {
    max-width: 1280px;
}
</style>
<i18n>
en:
    Unlink zone: Unlink zone {zone} from agency {agency}
es:
    Tickets to add: Tickets a añadir
    Client: Cliente
    Province: Provincia
    City: Población
    PC: CP
    Address: Dirección
    Zone: Zona
    Unlink zone: Desvincular zona {zone} de agencia {agency}
    Unlink: Desvincular
</i18n>