salix-front/src/pages/Claim/ClaimList.vue

<script setup>
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { toDate } from 'filters/index';
import ClaimFilter from './ClaimFilter.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import VnUserLink from 'src/components/ui/VnUserLink.vue';
import ClaimSummary from './Card/ClaimSummary.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import VnTable from 'src/components/VnTable/VnTable.vue';
import ZoneDescriptorProxy from '../Zone/Card/ZoneDescriptorProxy.vue';
import VnSection from 'src/components/common/VnSection.vue';
import FetchData from 'src/components/FetchData.vue';

const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
const dataKey = 'ClaimList';

const states = ref([]);
const columns = computed(() => [
    {
        align: 'left',
        name: 'id',
        label: t('customer.extendedList.tableVisibleColumns.id'),
        chip: {
            condition: () => true,
        },
        isId: true,
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.name'),
        name: 'clientName',
        isTitle: true,
        visible: false,
    },
    {
        align: 'left',
        label: t('claim.customer'),
        name: 'clientFk',
        cardVisible: true,
        columnFilter: {
            component: 'select',
            attrs: {
                url: 'Clients',
                fields: ['id', 'name'],
            },
        },
        columnClass: 'expand',
    },
    {
        align: 'left',
        label: t('claim.attendedBy'),
        name: 'attendedBy',
        orderBy: 'workerFk',
        columnFilter: {
            name: 'attenderFk',
            component: 'select',
            attrs: {
                url: 'Workers/activeWithInheritedRole',
                fields: ['id', 'name'],
                where: { role: 'salesPerson' },
                useLike: false,
                optionValue: 'id',
                optionLabel: 'name',
                optionFilter: 'firstName',
            },
        },
        cardVisible: true,
    },
    {
        align: 'left',
        label: t('claim.created'),
        name: 'created',
        format: ({ created }) => toDate(created),
        cardVisible: true,
        columnFilter: {
            component: 'date',
        },
    },
    {
        align: 'left',
        label: t('claim.state'),
        format: ({ stateCode }) =>
            states.value?.find(({ code }) => code === stateCode)?.description,
        name: 'stateCode',
        chip: {
            condition: () => true,
            color: ({ stateCode }) => STATE_COLOR[stateCode] ?? 'bg-grey',
        },
        columnFilter: {
            name: 'claimStateFk',
            component: 'select',
            attrs: {
                options: states.value,
                optionLabel: 'description',
            },
        },
        orderBy: 'cs.priority',
    },
    {
        align: 'left',
        label: t('claim.zone'),
        name: 'zoneFk',
    },
    {
        align: 'right',
        name: 'tableActions',
        actions: [
            {
                title: t('components.smartCard.viewSummary'),
                icon: 'preview',
                action: (row) => viewSummary(row.id, ClaimSummary),
                isPrimary: true,
            },
        ],
    },
]);

const STATE_COLOR = {
    pending: 'bg-warning',
    managed: 'bg-info',
    resolved: 'bg-positive',
};
</script>

<template>
    <FetchData url="ClaimStates" @on-fetch="(data) => (states = data)" auto-load />
    <VnSection
        :data-key="dataKey"
        :columns="columns"
        prefix="claim"
        :array-data-props="{
            url: 'Claims/filter',
            order: 'cs.priority ASC, created ASC',
        }"
    >
        <template #advanced-menu>
            <ClaimFilter :data-key ref="claimFilterRef" :states />
        </template>
        <template #body>
            <VnTable
                :data-key="dataKey"
                :columns="columns"
                redirect="claim"
                :right-search="false"
                auto-load
            >
                <template #column-clientFk="{ row }">
                    <span class="link" @click.stop>
                        {{ row.clientName }}
                        <CustomerDescriptorProxy :id="row.clientFk" />
                    </span>
                </template>
                <template #column-attendedBy="{ row }">
                    <span @click.stop>
                        <VnUserLink :name="row.workerName" :worker-id="row.workerFk" />
                    </span>
                </template>
                <template #column-zoneFk="{ row }">
                    <span class="link" @click.stop>
                        {{ row.zoneName }}
                        <ZoneDescriptorProxy :id="row.zoneId" />
                    </span>
                </template>
            </VnTable>
        </template>
    </VnSection>
</template>

<i18n>
es:
    params:
        stateCode: Estado
en:
    params:
        stateCode: State
</i18n>