salix-front-mindshore-fork2/src/pages/Item/ItemRequest.vue

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import { useStateStore } from 'stores/useStateStore';
import { toCurrency } from 'filters/index';
import useNotify from 'src/composables/useNotify.js';
import axios from 'axios';
import ItemRequestDenyForm from './ItemRequestDenyForm.vue';
import { toDate } from 'src/filters';
import VnTable from 'components/VnTable/VnTable.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputNumber from 'src/components/common/VnInputNumber.vue';
import ItemRequestFilter from './ItemRequestFilter.vue';
import RightMenu from 'src/components/common/RightMenu.vue';

const { t } = useI18n();
const { notify } = useNotify();
const stateStore = useStateStore();
const denyFormRef = ref(null);
const denyRequestId = ref(null);
const denyRequestIndex = ref(null);
const itemRequestsOptions = ref([]);
const userParams = {
    state: 'pending',
    daysOnward: 7,
};
const tableRef = ref();
onMounted(async () => {
    stateStore.rightDrawer = true;
});

const columns = computed(() => [
    {
        label: t('globals.ticketId'),
        name: 'ticketFk',
        align: 'left',
        isId: true,
        chip: {
            condition: () => true,
        },
        cardVisible: true,
    },
    {
        label: t('globals.shipped'),
        name: 'shipped',
        align: 'left',
        component: 'date',
        columnField: {
            component: null,
        },
        format: (row, dashIfEmpty) => dashIfEmpty(toDate(row.shipped)),
        columnClass: 'shrink',
    },
    {
        label: t('globals.description'),
        field: 'description',
        name: 'description',
        align: 'left',
        columnClass: 'expand',
    },
    {
        label: t('item.buyRequest.requester'),
        name: 'requesterName',
        component: 'select',
        columnFilter: {
            name: 'requesterFk',
            attrs: {
                url: 'VnUsers/preview',
                optionValue: 'id',
                optionLabel: 'nickname',
            },
        },
        columnField: {
            component: null,
        },
        columnClass: 'shrink',
    },
    {
        label: t('item.buyRequest.requested'),
        name: 'quantity',
        columnClass: 'shrink',
    },
    {
        label: t('globals.price'),
        name: 'price',
        align: 'left',
        format: (row) => toCurrency(row.price),
        columnClass: 'shrink',
    },
    {
        label: t('item.buyRequest.attender'),
        name: 'attenderName',
        align: 'left',
        component: 'select',
        columnFilter: {
            name: 'attenderFk',
            attrs: {
                url: 'TicketRequests/getItemTypeWorker',
                optionValue: 'id',
                optionLabel: 'nickname',
            },
        },
        columnField: {
            component: null,
        },
        columnClass: 'shrink',
    },
    {
        label: t('globals.item'),
        name: 'item',
        align: 'left',
        component: 'input',
        columnClass: 'expand',
    },
    {
        label: t('item.buyRequest.achieved'),
        name: 'achieved',
        align: 'left',
        component: 'input',
        columnClass: 'shrink',
    },
    {
        label: t('item.buyRequest.concept'),
        name: 'concept',
        align: 'left',
        sortable: true,
        component: 'input',
        columnClass: 'expand',
    },
    {
        label: t('globals.state'),
        name: 'state',
        format: (row) => getState(row.isOk),
        align: 'left',
    },
    {
        align: 'left',
        name: 'daysOnward',
        label: t('travel.travelList.tableVisibleColumns.daysOnward'),
        visible: false,
        columnFilter: {
            inWhere: false,
        },
    },
    {
        align: 'right',
        label: '',
        name: 'denyOptions',
    },
]);

const getBadgeColor = (date) => {
    const today = Date.vnNew();
    today.setHours(0, 0, 0, 0);

    const orderLanded = new Date(date);
    orderLanded.setHours(0, 0, 0, 0);

    const difference = today - orderLanded;

    if (difference == 0) return 'warning';
    if (difference < 0) return 'success';
    if (difference > 0) return 'alert';
};

const changeQuantity = async (request) => {
    if (request.saleFk) {
        const params = {
            quantity: request.saleQuantity,
        };

        await axios.patch(`Sales/${request.saleFk}`, params);
        notify(t('globals.dataSaved'), 'positive');
        confirmRequest(request);
    } else confirmRequest(request);
};

const confirmRequest = async (request) => {
    if (request.itemFk && request.saleQuantity) {
        const params = {
            itemFk: request.itemFk,
            quantity: request.saleQuantity,
            attenderFk: request.attenderFk,
        };

        const { data } = await axios.post(`TicketRequests/${request.id}/confirm`, params);
        request.itemDescription = data.concept;
        request.isOk = true;
        notify(t('globals.dataSaved'), 'positive');
    }
};

const getState = (isOk) => {
    if (isOk === null) return t('Pending');
    else if (isOk) return t('Accepted');
    else return t('Denied');
};

const showDenyRequestForm = (requestId, rowIndex) => {
    denyRequestId.value = requestId;
    denyRequestIndex.value = rowIndex;
    denyFormRef.value.show();
};

const onDenyAccept = (_, responseData) => {
    itemRequestsOptions.value[denyRequestIndex.value].isOk = responseData.isOk;
    itemRequestsOptions.value[denyRequestIndex.value].attenderFk =
        responseData.attenderFk;
    itemRequestsOptions.value[denyRequestIndex.value].response = responseData.response;
    denyRequestId.value = null;
    denyRequestIndex.value = null;
    tableRef.value.reload();
};
</script>

<template>
    <RightMenu>
        <template #right-panel>
            <ItemRequestFilter data-key="itemRequest" />
        </template>
    </RightMenu>
    <VnTable
        ref="tableRef"
        data-key="itemRequest"
        url="ticketRequests/filter"
        order="shipped ASC, isOk ASC"
        :columns="columns"
        :user-params="userParams"
        :is-editable="true"
        :right-search="false"
        auto-load
        :disable-option="{ card: true }"
        chip-locale="item.params"
    >
        <template #column-ticketFk="{ row }">
            <span class="link">
                {{ row.ticketFk }}
                <TicketDescriptorProxy :id="row.ticketFk" />
            </span>
        </template>
        <template #column-shipped="{ row }">
            <QTd>
                <QBadge
                    :color="getBadgeColor(row.shipped)"
                    text-color="black"
                    class="q-pa-sm"
                    style="font-size: 14px"
                >
                    {{ toDate(row.shipped) }}
                </QBadge>
            </QTd>
        </template>
        <template #column-attenderName="{ row }">
            <span class="link" @click.stop>
                {{ row.attenderName }}
                <WorkerDescriptorProxy :id="row.attenderFk" />
            </span>
        </template>

        <template #column-requesterName="{ row }">
            <span class="link" @click.stop>
                {{ row.requesterName }}
                <WorkerDescriptorProxy :id="row.requesterFk" />
            </span>
        </template>

        <template #column-item="{ row }">
            <span>
                <VnInput v-model.number="row.itemFk" dense />
            </span>
        </template>
        <template #column-achieved="{ row }">
            <span>
                <VnInput
                    type="number"
                    v-model.number="row.saleQuantity"
                    :disable="!row.itemFk || row.isOk != null"
                    @blur="changeQuantity(row)"
                    @keyup.enter="changeQuantity(row)"
                    dense
                />
            </span>
        </template>
        <template #column-concept="{ row }">
            <span @click.stop disabled="row.isOk != null">
                {{ row.itemDescription }}
            </span>
        </template>
        <template #moreFilterPanel="{ params }">
            <VnInputNumber
                :label="t('params.scopeDays')"
                v-model.number="params.daysOnward"
                @keyup.enter="(evt) => handleScopeDays(evt.target.value)"
                @remove="handleScopeDays()"
                class="q-px-xs q-pr-lg"
                filled
                dense
                lazy-rules
                is-outlined
            />
        </template>

        <template #column-denyOptions="{ row, rowIndex }">
            <QIcon
                v-if="row.response?.length"
                name="insert_drive_file"
                color="primary"
                size="sm"
            >
                <QTooltip>
                    {{ row.response }}
                </QTooltip>
            </QIcon>
            <QIcon
                v-if="row.isOk == null"
                name="thumb_down"
                color="primary"
                size="sm"
                class="fill-icon"
                @click="showDenyRequestForm(row.id, rowIndex)"
            >
                <QTooltip>
                    {{ t('Discard') }}
                </QTooltip>
            </QIcon>
        </template>
    </VnTable>
    <QDialog ref="denyFormRef" transition-show="scale" transition-hide="scale">
        <ItemRequestDenyForm :request-id="denyRequestId" @on-data-saved="onDenyAccept" />
    </QDialog>
</template>

<i18n>
es:
    Discard: Descartar
    You can search by Id or alias: Buscar peticiones por identificador o alias
    Denied: Denegada
    Accepted: Aceptada
    Pending: Pendiente
</i18n>