salix-front-mindshore-fork2/src/pages/Customer/Card/CustomerGreuges.vue

<script setup>
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import { QBtn } from 'quasar';
import { useStateStore } from 'src/stores/useStateStore';
import { toCurrency } from 'src/filters';
import { toDateTimeFormat } from 'src/filters/date';
import FetchData from 'components/FetchData.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';

const { t } = useI18n();
const route = useRoute();
const stateStore = computed(() => useStateStore());
const rows = ref([]);
const totalAmount = ref();

const filter = {
    include: [
        {
            relation: 'greugeType',
            scope: {
                fields: ['id', 'name'],
            },
        },
        {
            relation: 'user',
            scope: {
                fields: ['id', 'name'],
            },
        },
    ],
    order: 'shipped DESC, amount',
    where: {
        clientFk: `${route.params.id}`,
    },
    limit: 20,
};

const tableColumnComponents = {
    date: {
        component: 'span',
        props: () => {},
        event: () => {},
    },
    createdBy: {
        component: QBtn,
        props: () => ({ flat: true, color: 'blue', noCaps: true }),
        event: () => {},
    },
    comment: {
        component: 'span',
        props: () => {},
        event: () => {},
    },
    type: {
        component: 'span',
        props: () => {},
        event: () => {},
    },
    amount: {
        component: 'span',
        props: () => {},
        event: () => {},
    },
};

const columns = computed(() => [
    {
        align: 'left',
        field: 'shipped',
        label: t('Date'),
        name: 'date',
        format: (value) => toDateTimeFormat(value),
    },
    {
        align: 'left',
        field: (value) => value?.user?.name,
        label: t('Created by'),
        name: 'createdBy',
    },
    {
        align: 'left',
        field: 'description',
        label: t('Comment'),
        name: 'comment',
    },
    {
        align: 'left',
        field: (value) => value?.greugeType?.name,
        label: t('Type'),
        name: 'type',
    },
    {
        align: 'left',
        field: 'amount',
        label: t('Amount'),
        name: 'amount',
        format: (value) => toCurrency(value),
    },
]);

const setRows = (data) => {
    rows.value = data;
    totalAmount.value = data.reduce((acc, { amount = 0 }) => acc + amount, 0);
};
</script>

<template>
    <FetchData :filter="filter" @on-fetch="setRows" auto-load url="greuges" />
    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="300" show-if-above>
        <QCard class="full-width q-pa-sm">
            <h6 class="flex justify-end q-my-lg q-pr-lg" v-if="totalAmount !== undefined">
                <span class="color-vn-label q-mr-md">{{ t('Total') }}:</span>
                {{ toCurrency(totalAmount) }}
            </h6>
            <QSkeleton v-else type="QInput" square />
        </QCard>
    </QDrawer>
    <div class="full-width flex justify-center">
        <QPage class="card-width q-pa-lg">
            <QCard class="q-pa-sm q-mt-md">
                <QTable
                    :columns="columns"
                    :no-data-label="t('globals.noResults')"
                    :pagination="{ rowsPerPage: 12 }"
                    :rows="rows"
                    class="full-width q-mt-md"
                    row-key="id"
                >
                    <template #body-cell="props">
                        <QTd :props="props">
                            <QTr :props="props" class="cursor-pointer">
                                <component
                                    :is="tableColumnComponents[props.col.name].component"
                                    class="col-content"
                                    v-bind="
                                        tableColumnComponents[props.col.name].props(props)
                                    "
                                    @click="
                                        tableColumnComponents[props.col.name].event(props)
                                    "
                                >
                                    {{ props.value }}
                                    <WorkerDescriptorProxy
                                        :id="props.row.userFk"
                                        v-if="props.col.name === 'createdBy'"
                                    />
                                </component>
                            </QTr>
                        </QTd>
                    </template>
                </QTable>
            </QCard>
        </QPage>
    </div>

    <QPageSticky :offset="[18, 18]">
        <QBtn color="primary" fab icon="add" :to="{ name: 'CustomerGreugeCreate' }" />
        <QTooltip>
            {{ t('New greuge') }}
        </QTooltip>
    </QPageSticky>
</template>

<style lang="scss">
.consignees-card {
    border: 2px solid var(--vn-accent-color);
    border-radius: 10px;
    padding: 10px;
}

.label-color {
    color: var(--vn-label-color);
}
</style>

<i18n>
es:
    Total: Total
    Date: Fecha
    Created by: Creado por
    Comment: Comentario
    Type: Tipo
    Amount: Importe
    New greuge: Nuevo greuge
</i18n>