refs #5673 feat(claim): add development section

src/composables/useArrayData.js

@@ -38,11 +38,11 @@ export function useArrayData(key, userOptions) {
             'limit',
             'skip',
             'userParams',
-            'userFilter'
+            'userFilter',
         ];
         if (typeof userOptions === 'object') {
             for (const option in userOptions) {
-                const isEmpty = userOptions[option] == null || userOptions[option] == ''
+                const isEmpty = userOptions[option] == null || userOptions[option] == '';
                 if (isEmpty || !allowedOptions.includes(option)) continue;
 
                 if (Object.prototype.hasOwnProperty.call(store, option)) {
@@ -73,7 +73,7 @@ export function useArrayData(key, userOptions) {
 
         Object.assign(params, store.userParams);
 
-        store.isLoading = true
+        store.isLoading = true;
         const response = await axios.get(store.url, {
             signal: canceller.signal,
             params,
@@ -94,7 +94,7 @@ export function useArrayData(key, userOptions) {
             updateStateParams();
         }
 
-        store.isLoading = false
+        store.isLoading = false;
 
         canceller = null;
     }
@@ -153,8 +153,8 @@ export function useArrayData(key, userOptions) {
         });
     }
 
-    const totalRows = computed(() => store.data && store.data.length || 0);
+    const totalRows = computed(() => (store.data && store.data.length) || 0);
-    const isLoading = computed(() => store.isLoading || false)
+    const isLoading = computed(() => store.isLoading || false);
 
     return {
         fetch,
@@ -167,6 +167,6 @@ export function useArrayData(key, userOptions) {
         hasMoreData,
         totalRows,
         updateStateParams,
-        isLoading
+        isLoading,
     };
 }

src/i18n/es/index.js

@@ -63,7 +63,7 @@ export default {
             webPayments: 'Pagos Web',
             createCustomer: 'Crear cliente',
             basicData: 'Datos básicos',
-            summary: 'Resumen'
+            summary: 'Resumen',
         },
         list: {
             phone: 'Teléfono',
@@ -243,6 +243,7 @@ export default {
             lines: 'Líneas',
             rma: 'RMA',
             photos: 'Fotos',
+            development: 'Trazabilidad',
             log: 'Registros de auditoría',
         },
         list: {
@@ -294,7 +295,7 @@ export default {
             result: 'Consecuencias',
             responsible: 'Responsable',
             worker: 'Trabajador',
-            redelivery: 'Devolución'
+            redelivery: 'Devolución',
         },
         basicData: {
             customer: 'Cliente',
@@ -411,7 +412,7 @@ export default {
             wagonEdit: 'Editar tipo',
             typesList: 'Listado tipos',
             typeCreate: 'Crear tipo',
-            typeEdit: 'Editar tipo'
+            typeEdit: 'Editar tipo',
         },
         type: {
             name: 'Nombre',
@@ -444,7 +445,7 @@ export default {
             minHeightBetweenTrays: 'La distancia mínima entre bandejas es ',
             maxWagonHeight: 'La altura máxima del vagón es ',
             uncompleteTrays: 'Hay bandejas sin completar',
-        }
+        },
     },
     components: {
         topbar: {},

src/pages/Claim/Card/ClaimCard.vue

@@ -23,7 +23,6 @@ const entityId = computed(() => {
 });
 const claimSections = [
     { name: 'Notes', url: '/note/index', icon: 'draft' },
-    { name: 'Development', url: '/development', icon: 'vn:traceability' },
     { name: 'Action', url: '/action', icon: 'vn:actions' },
 ];
 

src/pages/Claim/Card/ClaimDevelopment.vue

@@ -0,0 +1,199 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import VnPaginate from 'components/ui/VnPaginate.vue';
+import FetchData from 'components/FetchData.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+
+const claimReasons = ref([]);
+const claimResults = ref([]);
+const claimResponsibles = ref([]);
+const claimRedeliveries = ref([]);
+
+const developmentsFilter = {
+    fields: [
+        'id',
+        'claimFk',
+        'claimReasonFk',
+        'claimResultFk',
+        'claimResponsibleFk',
+        'workerFk',
+        'claimRedeliveryFk',
+    ],
+    where: {
+        claimFk: route.params.id,
+    },
+};
+
+const columns = computed(() => [
+    {
+        name: 'reason',
+        label: t('Reason'),
+        field: (row) => row.claimReasonFk,
+        sortable: true,
+        options: claimReasons,
+    },
+    {
+        name: 'result',
+        label: t('Result'),
+        field: (row) => row.claimResultFk,
+        sortable: true,
+        options: claimResults,
+    },
+    {
+        name: 'responsible',
+        label: t('Responsible'),
+        field: (row) => row.claimResponsibleFk,
+        sortable: true,
+    },
+    {
+        name: 'worker',
+        label: t('Worker'),
+        field: (row) => row.workerFk,
+        sortable: true,
+    },
+    {
+        name: 'redelivery',
+        label: t('Redelivery'),
+        field: (row) => row.claimRedeliveryFk,
+        sortable: true,
+    },
+]);
+</script>
+<template>
+    <FetchData
+        url="ClaimReasons"
+        order="description"
+        @on-fetch="(data) => (claimReasons = data)"
+        auto-load
+    />
+    <FetchData
+        url="ClaimResults"
+        order="description"
+        @on-fetch="(data) => (claimResults = data)"
+        auto-load
+    />
+    <FetchData
+        url="ClaimResponsibles"
+        order="description"
+        @on-fetch="(data) => (claimResponsibles = data)"
+        auto-load
+    />
+    <FetchData
+        url="ClaimRedeliveries"
+        order="description"
+        @on-fetch="(data) => (claimRedeliveries = data)"
+        auto-load
+    />
+    <div class="column items-center">
+        <div class="list">
+            <VnPaginate
+                data-key="ClaimDevelopments"
+                url="ClaimDevelopments"
+                :filter="developmentsFilter"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <QTable
+                        :columns="columns"
+                        :rows="rows"
+                        :dense="$q.screen.lt.md"
+                        :pagination="{ rowsPerPage: 0 }"
+                        row-key="id"
+                        selection="multiple"
+                        hide-pagination
+                    >
+                        <template #body-cell-reason="{ row, column }">
+                            {{ column }}
+                            <QTd auto-width>
+                                <QSelect
+                                    :label="t('Responsible')"
+                                    v-model="row.claimReasonFk"
+                                    :options="claimReasons"
+                                    option-value="id"
+                                    option-label="description"
+                                    emit-value
+                                    map-options
+                                    use-input
+                                />
+                            </QTd>
+                        </template>
+                        <template #body-cell-result="{ row }">
+                            {{ props }}
+                            <QTd auto-width>
+                                <QSelect
+                                    label=""
+                                    v-model="row.claimResultFk"
+                                    :options="claimResults"
+                                    option-value="id"
+                                    option-label="description"
+                                    emit-value
+                                    map-options
+                                    use-input
+                                />
+                            </QTd>
+                        </template>
+                        <template #body-cell-responsible="{ row }">
+                            <QTd auto-width>
+                                <QSelect
+                                    :label="t('Responsible')"
+                                    v-model="row.claimResponsibleFk"
+                                    :options="claimResponsibles"
+                                    option-value="id"
+                                    option-label="description"
+                                    emit-value
+                                    map-options
+                                    use-input
+                                />
+                            </QTd>
+                        </template>
+                    </QTable>
+                </template>
+            </VnPaginate>
+        </div>
+    </div>
+    <q-page-sticky position="bottom-right" :offset="[18, 18]">
+        <q-fab color="purple" icon="keyboard_arrow_up" direction="up">
+            <q-fab-action color="primary" icon="mail" />
+            <q-fab-action color="secondary" icon="alarm" />
+        </q-fab>
+    </q-page-sticky>
+</template>
+
+<style lang="scss" scoped>
+.list {
+    padding-top: 50px;
+    max-width: 900px;
+    width: 100%;
+}
+.grid-style-transition {
+    transition: transform 0.28s, background-color 0.28s;
+}
+</style>
+
+<i18n>
+en:
+    You are about to remove {count} rows: '
+        You are about to remove <strong>{count}</strong> row |
+        You are about to remove  <strong>{count}</strong> rows'
+es:
+    Claimed lines: Líneas reclamadas
+    Delivered: Entregado
+    Quantity: Cantidad
+    Claimed: Reclamada
+    Description: Descripción
+    Price: Precio
+    Discount: Descuento
+    Actions: Acciones
+    Amount: Total
+    Amount Claimed: Cantidad reclamada
+    Delete claimed sales: Eliminar ventas reclamadas
+    Discount updated: Descuento actualizado
+    Claimed quantity: Cantidad reclamada
+    You are about to remove {count} rows: '
+        Vas a eliminar <strong>{count}</strong> línea |
+        Vas a eliminar <strong>{count}</strong> líneas'
+</i18n>

src/router/modules/claim.js

@@ -11,7 +11,14 @@ export default {
     redirect: { name: 'ClaimMain' },
     menus: {
         main: ['ClaimList', 'ClaimRmaList'],
-        card: ['ClaimBasicData', 'ClaimLines', 'ClaimRma', 'ClaimPhotos', 'ClaimLog'],
+        card: [
+            'ClaimBasicData',
+            'ClaimLines',
+            'ClaimPhotos',
+            'ClaimDevelopment',
+            'ClaimRma',
+            'ClaimLog',
+        ],
     },
     children: [
         {
@@ -94,6 +101,15 @@ export default {
                     },
                     component: () => import('src/pages/Claim/Card/ClaimPhoto.vue'),
                 },
+                {
+                    name: 'ClaimDevelopment',
+                    path: 'development',
+                    meta: {
+                        title: 'development',
+                        icon: 'vn:traceability',
+                    },
+                    component: () => import('src/pages/Claim/Card/ClaimDevelopment.vue'),
+                },
                 {
                     name: 'ClaimLog',
                     path: 'log',