salix-front/src/components/common/VnLog.vue

<script setup>
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import { useSession } from 'src/composables/useSession';
import { useStateStore } from 'stores/useStateStore';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import VnLogFilter from 'src/components/common/VnLogFilter.vue';

import { toDate } from 'src/filters';

const stateStore = useStateStore();
const route = useRoute();
const session = useSession();
const token = session.getToken();
const { t } = useI18n();

const props = defineProps({
    model: {
        type: String,
        default: null,
    },
});

const columns = [
    {
        name: 'property',
        label: 'Property',
        field: (row) => t(`properties.${row.property}`),
        align: 'left',
    },
    {
        name: 'before',
        label: 'Before',
        field: (row) => formatValue(row.before),
    },
    {
        name: 'after',
        label: 'After',
        field: (row) => formatValue(row.after),
    },
];

function formatValue(value) {
    if (typeof value === 'boolean') {
        return value ? t('Yes') : t('No');
    }

    if (isNaN(value) && !isNaN(Date.parse(value))) {
        return toDate(value);
    }

    if (value === undefined) {
        return t('Nothing');
    }

    return `"${value}"`;
}

function actionColor(action) {
    if (action === 'insert') return 'positive';
    if (action === 'update') return 'positive';
    if (action === 'delete') return 'negative';
}
</script>
<template>
    <div class="column items-center">
        <QTimeline class="q-pa-md">
            <QTimelineEntry heading tag="h4"> {{ t('Audit logs') }} </QTimelineEntry>
            <VnPaginate
                :data-key="`${props.model}Logs`"
                :url="`${props.model}s/${route.params.id}/logs`"
                order="id DESC"
                :offset="100"
                :limit="5"
                auto-load
            >
                <template #body="{ rows }">
                    <template v-for="log of rows" :key="log.id">
                        <QTimelineEntry
                            :avatar="`/api/Images/user/160x160/${log.userFk}/download?access_token=${token}`"
                        >
                            <template #subtitle>
                                {{ log.userName }} -
                                {{
                                    toDate(log.created, {
                                        dateStyle: 'medium',
                                        timeStyle: 'short',
                                    })
                                }}
                            </template>
                            <template #title>
                                <QChip :color="actionColor(log.action)">
                                    {{ t(`actions.${log.action}`) }}
                                </QChip>
                                {{ t(`models.${log.model}`) }}
                            </template>
                            <QTable
                                :rows="log.changes"
                                :columns="columns"
                                row-key="property"
                                hide-pagination
                                dense
                                flat
                            >
                                <template #header="propsLabel">
                                    <QTr :props="propsLabel">
                                        <QTh
                                            v-for="col in propsLabel.cols"
                                            :key="col.name"
                                            :props="propsLabel"
                                        >
                                            {{ t(col.label) }}
                                        </QTh>
                                    </QTr>
                                </template>
                            </QTable>
                        </QTimelineEntry>
                    </template>
                </template>
            </VnPaginate>
        </QTimeline>
    </div>
    <Teleport v-if="stateStore.isHeaderMounted()" to="#actions-append">
        <div class="row q-gutter-x-sm">
            <QBtn flat @click="stateStore.toggleRightDrawer()" round dense icon="menu">
                <QTooltip bottom anchor="bottom right">
                    {{ t('globals.collapseMenu') }}
                </QTooltip>
            </QBtn>
        </div>
    </Teleport>
    <QDrawer v-model="stateStore.rightDrawer" show-if-above side="right" :width="300">
        <QScrollArea class="fit text-grey-8">
            <VnLogFilter :data-key="`${props.model}Logs`" />
        </QScrollArea>
    </QDrawer>
</template>

<style lang="scss" scoped>
.q-timeline {
    width: 100%;
    max-width: 80em;
}
</style>
<i18n>
en:
    actions:
        insert: Creates
        update: Updates
        delete: Deletes
    models:
        Claim: Claim
        ClaimDms: Document
        ClaimBeginning: Claimed Sales
        ClaimObservation: Observation
    properties:
        id: ID
        claimFk: Claim ID
        saleFk: Sale ID
        quantity: Quantity
        observation: Observation
        ticketCreated: Created
        created: Created
        isChargedToMana: Charged to mana
        hasToPickUp: Has to pick Up
        dmsFk: Document ID
        text: Description
        claimStateFk: Claim State
        workerFk: Worker
        clientFk: Customer
        rma: RMA
        responsibility: Responsibility
        packages: Packages
es:
    Audit logs: Registros de auditoría
    Property: Propiedad
    Before: Antes
    After: Después
    Yes: Si
    Nothing: Nada
    actions:
        insert: Crea
        update: Actualiza
        delete: Elimina
    models:
        Claim: Reclamación
        ClaimDms: Documento
        ClaimBeginning: Línea reclamada
        ClaimObservation: Observación
    properties:
        id: ID
        claimFk: ID reclamación
        saleFk: ID linea de venta
        quantity: Cantidad
        observation: Observación
        ticketCreated: Creado
        created: Creado
        isChargedToMana: Cargado a maná
        hasToPickUp: Se debe recoger
        dmsFk: ID documento
        text: Descripción
        claimStateFk: Estado de la reclamación
        workerFk: Trabajador
        clientFk: Cliente
        rma: RMA
        responsibility: Responsabilidad
        packages: Bultos
</i18n>