salix-front/src/pages/Order/OrderList.vue

<script setup>
import axios from 'axios';
import { useI18n } from 'vue-i18n';
import { computed, ref } from 'vue';
import { dashIfEmpty, toCurrency, toDate } from 'src/filters';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import OrderSummary from 'pages/Order/Card/OrderSummary.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import VnTable from 'src/components/VnTable/VnTable.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import VnSelect from 'src/components/common/VnSelect.vue';

const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
const tableRef = ref();
const clientList = ref([]);
const agencyList = ref([]);
const selectedAddress = ref();

const columns = computed(() => [
    {
        align: 'left',
        name: 'id',
        label: t('module.id'),
        chip: {
            condition: () => true,
        },
        isId: true,
    },
    {
        align: 'left',
        name: 'clientName',
        label: t('module.customer'),
        isTitle: true,
        cardVisible: true,
        component: 'select',
        attrs: {
            url: 'Clients',
            fields: ['id', 'name'],
        },
        columnField: {
            component: null,
        },
    },
    {
        align: 'left',
        name: 'name',
        label: t('module.salesPerson'),
        component: 'select',
        attrs: {
            url: 'Workers/activeWithInheritedRole',
            fields: ['id', 'name'],
            where: { role: 'salesPerson' },
        },
        columnField: {
            component: null,
        },
    },
    {
        align: 'left',
        name: 'isConfirmed',
        label: t('module.isConfirmed'),
    },
    {
        align: 'left',
        name: 'created',
        label: t('module.created'),
        component: 'date',
        cardVisible: true,
        format: (row) => toDate(row?.landed),
        columnField: {
            component: null,
        },
    },
    {
        align: 'left',
        name: 'landed',
        label: t('module.landed'),
        component: 'date',
        format: (row) => toDate(row?.landed),
        columnField: {
            component: null,
        },
        style: 'color="positive"',
    },
    {
        align: 'left',
        name: 'hour',
        label: t('module.hour'),
        format: ({ hourTheoretical, hourEffective }) =>
            dashIfEmpty(hourTheoretical || hourEffective),
    },
    {
        align: 'left',
        name: 'agencyName',
        label: t('module.agency'),
        component: 'select',
        cardVisible: true,
        attrs: {
            url: 'Agencies',
            fields: ['id', 'name'],
        },
        columnField: {
            component: null,
        },
    },
    {
        align: 'left',
        name: 'total',
        label: t('module.total'),
        format: ({ total }) => toCurrency(total),
        cardVisible: true,
    },
    {
        align: 'right',
        label: '',
        name: 'tableActions',
        actions: [
            {
                title: t('InvoiceOutSummary'),
                icon: 'preview',
                action: (row) => viewSummary(row.id, OrderSummary),
            },
        ],
    },
]);

async function fetchClientAddress(id, data) {
    console.log('data: ', data);
    const clientData = await axios.get(`Clients/${id}`);
    selectedAddress.value = clientData.data.defaultAddressFk;
    data.addressId = selectedAddress.value;
}
</script>
<template>
    <VnSearchbar
        data-key="OrderList"
        :label="t('Search order')"
        :info="t('You can search orders by reference')"
    />
    <VnTable
        ref="tableRef"
        data-key="OrderList"
        url="Orders/filter"
        :create="{
            urlCreate: 'Orders/new',
            title: 'Create Order',
            onDataSaved: (url) => {
                tableRef.redirect(url);
            },
            formInitialData: {
                active: true,
                addressId: null,
            },
        }"
        :columns="columns"
        redirect="order"
        auto-load
    >
        <template #more-create-dialog="{ data }">
            <VnSelect
                url="Clients"
                v-model="data.id"
                :label="t('module.customer')"
                :options="clientList"
                option-value="id"
                option-label="name"
                @update:model-value="(id) => fetchClientAddress(id, data)"
            />
            <VnSelect
                url="Clients"
                v-model="selectedAddress"
                :label="t('module.address')"
                :options="selectedAddress"
                option-value="defaultAddressFk"
                option-label="street"
            />
            <VnInputDate v-model="data.landed" :label="t('module.landed')" />
            <VnSelect
                url="Agencies"
                v-model="data.agencyModeId"
                :label="t('module.agency')"
                :options="agencyList"
                option-value="id"
                option-label="name"
            />
        </template>
    </VnTable>
</template>