Merge pull request 'Implementacion de shelvings' (#23) from feature/shelving into dev

Reviewed-on: hyervoni/salix-front-mindshore#23
2023-12-01 11:28:51 +00:00 · 2023-12-01 11:28:51 +00:00 · f040037f8f
parent cdcdd4c544 f6067a6803
commit f040037f8f
19 changed files with 211 additions and 97 deletions
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@ -19,6 +19,18 @@ const props = defineProps({
        type: String,
        default: null,
    },
+    url: {
+        type: String,
+        default: null,
+    },
+    mapper: {
+        type: Function,
+        default: null,
+    },
+    filter: {
+      type: Object,
+      default: null,
+    }
 });

 const columns = [
@ -65,17 +77,18 @@ function actionColor(action) {
 <template>
    <div class="column items-center">
        <QTimeline class="q-pa-md">
-            <QTimelineEntry heading tag="h4"> {{ t('Audit logs') }} </QTimelineEntry>
+            <QTimelineEntry heading tag="h4"> {{ t('Audit logs') }}</QTimelineEntry>
            <VnPaginate
                :data-key="`${props.model}Logs`"
-                :url="`${props.model}s/${route.params.id}/logs`"
+                :url="props.url ?? `${props.model}s/${route.params.id}/logs`"
                order="id DESC"
                :offset="100"
                :limit="5"
+                :filter="props.filter"
                auto-load
            >
                <template #body="{ rows }">
-                    <template v-for="log of rows" :key="log.id">
+                    <template v-for="log of (props.mapper ? (rows || []).map(props.mapper) :rows)" :key="log.id">
                        <QTimelineEntry
                            :avatar="`/api/Images/user/160x160/${log.userFk}/download?access_token=${token}`"
                        >
@ -144,65 +157,67 @@ function actionColor(action) {
 </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
+  actions:
+    insert: Creates
+    update: Updates
+    delete: Deletes
+  models:
+    Claim: Claim
+    ClaimDms: Document
+    ClaimBeginning: Claimed Sales
+    ClaimObservation: Observation
+    Shelving: Shelving
+  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
+  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
+    Shelving: Carro
+  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>
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@ -26,7 +26,7 @@ const props = defineProps({
    },
 });

-const emit = defineEmits(['refresh', 'clear']);
+const emit = defineEmits(['refresh', 'clear', 'search']);

 const arrayData = useArrayData(props.dataKey);
 const store = arrayData.store;
@ -49,6 +49,7 @@ async function search() {
    if (!props.showAll && !Object.values(params).length) store.data = [];

    isLoading.value = false;
+    emit('search');
 }

 async function reload() {
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@ -149,13 +149,13 @@ export function useArrayData(key, userOptions) {
        return { filter, params };
    }

-    function sanitizerParams(params) {
+    function sanitizerParams(params, exprBuilder) {
        for (const param in params) {
            if (params[param] === '' || params[param] === null) {
                delete store.userParams[param];
                delete params[param];
                if (store.filter?.where) {
-                    delete store.filter.where[Object.keys(store?.exprBuilder(param))[0]];
+                    delete store.filter.where[Object.keys(exprBuilder ? exprBuilder(param) : param)[0]];
                    if (Object.keys(store.filter.where).length === 0) {
                        delete store.filter.where;
                    }
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@ -439,6 +439,7 @@ export default {
            create: 'Create',
            summary: 'Summary',
            basicData: 'Basic Data',
+            log: 'Logs'
        },
        list: {
            parking: 'Parking',
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@ -441,6 +441,7 @@ export default {
            create: 'Crear',
            summary: 'Resumen',
            basicData: 'Datos básicos',
+            log: 'Registros de auditoría'
        },
        list: {
            parking: 'Parking',
--- a/src/pages/Shelving/Summary/ShelvingSummaryPage.vue
+++ b/src/pages/Shelving/Summary/ShelvingSummaryPage.vue
@ -1,15 +1,11 @@
 <script setup>
 import { useStateStore } from 'stores/useStateStore';
 import LeftMenu from 'components/LeftMenu.vue';
-import ShelvingSearchbar from "pages/Shelving/components/ShelvingSearchbar.vue";
-import ShelvingDescriptor from "pages/Shelving/components/ShelvingDescriptor.vue";
+import ShelvingDescriptor from 'pages/Shelving/Card/ShelvingDescriptor.vue';

 const stateStore = useStateStore();
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
-        <ShelvingSearchbar />
-    </Teleport>
    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
        <QScrollArea class="fit">
            <ShelvingDescriptor />
--- a/src/pages/Shelving/components/ShelvingDescriptor.vue
+++ b/src/pages/Shelving/components/ShelvingDescriptor.vue
@ -3,10 +3,10 @@ import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-import useCardDescription from 'src/composables/useCardDescription';
+import VnLv from 'components/ui/VnLv.vue';
+import useCardDescription from 'composables/useCardDescription';
 import WorkerDescriptorProxy from "pages/Worker/Card/WorkerDescriptorProxy.vue";
-import ShelvingDescriptorMenu from "pages/Shelving/components/ShelvingDescriptorMenu.vue";
+import ShelvingDescriptorMenu from "pages/Shelving/Card/ShelvingDescriptorMenu.vue";

 const $props = defineProps({
    id: {
--- a/src/pages/Shelving/components/ShelvingDescriptorMenu.vue
+++ b/src/pages/Shelving/components/ShelvingDescriptorMenu.vue
--- a/src/pages/Shelving/components/ShelvingDescriptorProxy.vue
+++ b/src/pages/Shelving/components/ShelvingDescriptorProxy.vue
@ -1,5 +1,5 @@
 <script setup>
-import ShelvingDescriptor from "pages/Shelving/components/ShelvingDescriptor.vue";
+import ShelvingDescriptor from "pages/Shelving/Card/ShelvingDescriptor.vue";

 const $props = defineProps({
    id: {
--- a/src/pages/Shelving/components/ShelvingFilter.vue
+++ b/src/pages/Shelving/components/ShelvingFilter.vue
@ -12,6 +12,8 @@ const props = defineProps({
    },
 });

+const emit = defineEmits(['search']);
+
 const workers = ref();
 const parkings = ref();

@ -39,7 +41,7 @@ function setParkings(data) {
        @on-fetch="setWorkers"
        auto-load
    />
-    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true" @search="emit('search')">
        <template #tags="{ tag, formatFn }">
            <div class="q-gutter-x-xs">
                <strong>{{ t(`params.${tag.label}`) }}: </strong>
--- a/src/pages/Shelving/components/ShelvingForm.vue
+++ b/src/pages/Shelving/components/ShelvingForm.vue
--- a/src/pages/Shelving/Card/ShelvingLog.vue
+++ b/src/pages/Shelving/Card/ShelvingLog.vue
@ -0,0 +1,53 @@
+<script setup>
+import VnLog from 'src/components/common/VnLog.vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+
+const getChanges = (oldInstance, newInstance) => {
+    const changes = [];
+    Object.entries(newInstance).forEach(([key, newValue]) => {
+        const oldValue = oldInstance?.[key];
+        if (oldValue !== newValue) {
+            changes.push({
+                property: key,
+                before: oldValue,
+                after: newValue,
+            });
+        }
+    });
+    return changes;
+};
+
+const shelvingMapper = (shelving) => ({
+    ...shelving,
+    action: shelving.action,
+    created: shelving.creationDate,
+    model: shelving.changedModel,
+    userFk: shelving.userFk,
+    userName: shelving.user?.name,
+    changes: getChanges(shelving.oldInstance, shelving.newInstance),
+});
+
+const shelvingFilter = {
+    include: [
+        {
+            relation: 'user',
+            scope: {
+                fields: ['nickname', 'name'],
+            },
+        },
+    ],
+    where: {
+        originFk: route.params.id,
+    },
+};
+</script>
+<template>
+    <VnLog
+        model="Shelving"
+        url="/ShelvingLogs"
+        :mapper="shelvingMapper"
+        :filter="shelvingFilter"
+    ></VnLog>
+</template>
--- a/src/pages/Shelving/components/ShelvingSearchbar.vue
+++ b/src/pages/Shelving/components/ShelvingSearchbar.vue
--- a/src/pages/Shelving/Summary/ShelvingSummary.vue
+++ b/src/pages/Shelving/Summary/ShelvingSummary.vue
@ -1,9 +1,11 @@
 <script setup>
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
+import {computed, onMounted, onUnmounted} from 'vue';
+import {useRoute, useRouter} from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import CardSummary from 'components/ui/CardSummary.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
+import VnLv from 'components/ui/VnLv.vue';
+import ShelvingFilter from 'pages/Shelving/Card/ShelvingFilter.vue';
+import { useStateStore } from 'stores/useStateStore';

 const $props = defineProps({
    id: {
@ -12,7 +14,11 @@ const $props = defineProps({
    },
 });
 const route = useRoute();
+const stateStore = useStateStore();
+const router = useRouter();
 const { t } = useI18n();
+onMounted(() => (stateStore.rightDrawer = false));
+onUnmounted(() => (stateStore.rightDrawer = false));

 const entityId = computed(() => $props.id || route.params.id);
 const filter = {
@ -33,6 +39,23 @@ const filter = {
 </script>

 <template>
+  <template v-if="stateStore.isHeaderMounted()">
+    <Teleport 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>
+  </template>
    <CardSummary ref="summary" :url="`Shelvings/${entityId}`" :filter="filter">
        <template #header="{ entity }">
            <div>{{ entity.code }}</div>
@ -42,18 +65,12 @@ const filter = {
                <div class="header">
                    {{ t('shelving.pageTitles.basicData') }}
                </div>
-                <VnLv
-                    :label="t('shelving.summary.code')"
-                    :value="entity.code"
-                />
+                <VnLv :label="t('shelving.summary.code')" :value="entity.code" />
                <VnLv
                    :label="t('shelving.summary.parking')"
                    :value="entity.parking?.code"
                />
-                <VnLv
-                    :label="t('shelving.summary.priority')"
-                    :value="entity.priority"
-                />
+                <VnLv :label="t('shelving.summary.priority')" :value="entity.priority" />
                <VnLv
                    :label="t('shelving.summary.worker')"
                    :value="entity.worker?.user?.nickname"
@ -65,4 +82,12 @@ const filter = {
            </QCard>
        </template>
    </CardSummary>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <ShelvingFilter
+                data-key="ShelvingList"
+                @search="router.push({ name: 'ShelvingList' })"
+            />
+        </QScrollArea>
+    </QDrawer>
 </template>
--- a/src/pages/Shelving/Summary/ShelvingSummaryDialog.vue
+++ b/src/pages/Shelving/Summary/ShelvingSummaryDialog.vue
@ -1,6 +1,6 @@
 <script setup>
 import { useDialogPluginComponent } from 'quasar';
-import ShelvingSummary from "pages/Shelving/Summary/ShelvingSummary.vue";
+import ShelvingSummary from "pages/Shelving/Card/ShelvingSummary.vue";

 const $props = defineProps({
    id: {
--- a/src/pages/Shelving/ShelvingBasicData.vue
+++ b/src/pages/Shelving/ShelvingBasicData.vue
@ -1,7 +1,7 @@
 <script setup>
 import { useRoute } from 'vue-router';
 import FormModel from 'components/FormModel.vue';
-import ShelvingForm from "pages/Shelving/components/ShelvingForm.vue";
+import ShelvingForm from "pages/Shelving/Card/ShelvingForm.vue";

 const route = useRoute();

--- a/src/pages/Shelving/ShelvingCreate.vue
+++ b/src/pages/Shelving/ShelvingCreate.vue
@ -1,5 +1,5 @@
 <script setup>
-import ShelvingForm from 'pages/Shelving/components/ShelvingForm.vue';
+import ShelvingForm from 'pages/Shelving/Card/ShelvingForm.vue';
 import { useI18n } from 'vue-i18n';
 import { useValidator } from 'composables/useValidator';
 import { ref } from 'vue';
--- a/src/pages/Shelving/ShelvingList.vue
+++ b/src/pages/Shelving/ShelvingList.vue
@ -7,9 +7,9 @@ import CardList from 'components/ui/CardList.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import { useQuasar } from 'quasar';
 import { useRouter } from 'vue-router';
-import ShelvingFilter from 'pages/Shelving/components/ShelvingFilter.vue';
-import ShelvingSummaryDialog from 'pages/Shelving/Summary/ShelvingSummaryDialog.vue';
-import ShelvingSearchbar from 'pages/Shelving/components/ShelvingSearchbar.vue';
+import ShelvingFilter from 'pages/Shelving/Card/ShelvingFilter.vue';
+import ShelvingSummaryDialog from 'pages/Shelving/Card/ShelvingSummaryDialog.vue';
+import ShelvingSearchbar from 'pages/Shelving/Card/ShelvingSearchbar.vue';

 const stateStore = useStateStore();
 const router = useRouter();
@ -34,6 +34,17 @@ function viewSummary(id) {
        },
    });
 }
+
+function exprBuilder(param, value) {
+  switch (param) {
+    case 'search':
+      return {code: {like: `%${value}%`}};
+    case 'parkingFk':
+    case 'userFk':
+    case 'isRecyclable':
+      return {[param]: value};
+  }
+}
 </script>

 <template>
@ -68,6 +79,7 @@ function viewSummary(id) {
                data-key="ShelvingList"
                url="Shelvings"
                :filter="filter"
+                :expr-builder="exprBuilder"
                auto-load
            >
                <template #body="{ rows }">
@ -79,7 +91,6 @@ function viewSummary(id) {
                        @click="navigate(row.id)"
                    >
                        <template #list-items>
-                            <VnLv label="ID" :value="row.id" />
                            <VnLv
                                :label="t('shelving.list.parking')"
                                :title-label="t('shelving.list.parking')"
--- a/src/router/modules/shelving.js
+++ b/src/router/modules/shelving.js
@ -11,7 +11,7 @@ export default {
    redirect: { name: 'ShelvingMain' },
    menus: {
        main: ['ShelvingList'],
-        card: ['ShelvingBasicData']
+        card: ['ShelvingBasicData', 'ShelvingLog']
    },
    children: [
        {
@ -42,7 +42,7 @@ export default {
        {
            name: 'ShelvingLayout',
            path: ':id',
-            component: () => import('pages/Shelving/Summary/ShelvingSummaryPage.vue'),
+            component: () => import('pages/Shelving/Card/ShelvingCard.vue'),
            redirect: { name: 'ShelvingSummary' },
            children: [
                {
@ -52,7 +52,7 @@ export default {
                        title: 'summary',
                    },
                    component: () =>
-                        import('pages/Shelving/Summary/ShelvingSummary.vue'),
+                        import('pages/Shelving/Card/ShelvingSummary.vue'),
                },
                {
                    name: 'ShelvingBasicData',
@ -64,6 +64,15 @@ export default {
                    },
                    component: () => import('pages/Shelving/ShelvingBasicData.vue'),
                },
+                {
+                    name: 'ShelvingLog',
+                    path: 'log',
+                    meta: {
+                        title: 'log',
+                        icon: 'history',
+                    },
+                    component: () => import('src/pages/Shelving/Card/ShelvingLog.vue'),
+                },
            ],
        },
    ]