refs #5995 Improved external CMR

src/i18n/en/index.js

@@ -32,10 +32,11 @@ export default {
         rowAdded: 'Row added',
         rowRemoved: 'Row removed',
         pleaseWait: 'Please wait...',
-        noPinnedModules: 'You have dont have any pinned modules',
+        noPinnedModules: `You don't have any pinned modules`,
         summary: {
             basicData: 'Basic data',
         },
+        noSelectedRows: `You don't have any line selected`,
     },
     errors: {
         statusUnauthorized: 'Access denied',
@@ -481,17 +482,18 @@ export default {
         },
         cmr: {
             list: {
-                total: 'Total records',
+                results: 'results',
                 cmrFk: 'CMR id',
                 hasCmrDms: `Attached in gestdoc`,
                 true: 'Yes',
                 false: 'No',
                 ticketFk: 'Ticketd id',
+                routeFk: 'Route id',
                 country: 'Country',
                 clientFk: 'Client id',
                 shipped: 'Preparation date',
                 viewCmr: 'View CMR',
-                downloadCmr: 'Download CMR',
+                downloadCmrs: 'Download CMRs',
             },
         },
     },

src/i18n/es/index.js

@@ -36,6 +36,7 @@ export default {
         summary: {
             basicData: 'Datos básicos',
         },
+        noSelectedRows: `No tienes ninguna línea seleccionada`,
     },
     errors: {
         statusUnauthorized: 'Acceso denegado',
@@ -481,17 +482,18 @@ export default {
         },
         cmr: {
             list: {
-                total: 'Total registros',
+                results: 'resultados',
                 cmrFk: 'Id CMR',
                 hasCmrDms: 'Adjuntado en gestdoc',
                 true: 'Sí',
                 false: 'No',
                 ticketFk: 'Id ticket',
+                routeFk: 'Id ruta',
                 country: 'País',
                 clientFk: 'Id cliente',
                 shipped: 'Fecha preparación',
                 viewCmr: 'Ver CMR',
-                downloadCmr: 'Descargar CMR',
+                downloadCmrs: 'Descargar CMRs',
             },
         },
     },

src/pages/Route/Cmr/CmrFilter.vue

@@ -28,7 +28,11 @@ const countries = ref();
             <QList dense>
                 <QItem>
                     <QItemSection>
-                        <QInput :label="t('route.cmr.list.cmrFk')" v-model="params.cmrFk" lazy-rules>
+                        <QInput
+                            :label="t('route.cmr.list.cmrFk')"
+                            v-model="params.cmrFk"
+                            lazy-rules
+                        >
                             <template #prepend>
                                 <QIcon name="article" size="sm"></QIcon>
                             </template>
@@ -46,7 +50,11 @@ const countries = ref();
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput :label="t('route.cmr.list.ticketFk')" v-model="params.ticketFk" lazy-rules>
+                        <QInput
+                            :label="t('route.cmr.list.ticketFk')"
+                            v-model="params.ticketFk"
+                            lazy-rules
+                        >
                             <template #prepend>
                                 <QIcon name="vn:ticket" size="sm"></QIcon>
                             </template>
@@ -55,7 +63,24 @@ const countries = ref();
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput :label="t('route.cmr.list.clientFk')" v-model="params.clientFk" lazy-rules>
+                        <QInput
+                            :label="t('route.cmr.list.routeFk')"
+                            v-model="params.routeFk"
+                            lazy-rules
+                        >
+                            <template #prepend>
+                                <QIcon name="vn:delivery" size="sm"></QIcon>
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QInput
+                            :label="t('route.cmr.list.clientFk')"
+                            v-model="params.clientFk"
+                            lazy-rules
+                        >
                             <template #prepend>
                                 <QIcon name="vn:client" size="sm"></QIcon>
                             </template>
@@ -78,9 +103,9 @@ const countries = ref();
                             emit-value
                             map-options
                         >
-                        <template #prepend>
+                            <template #prepend>
-                            <QIcon name="flag" size="sm"></QIcon>
+                                <QIcon name="flag" size="sm"></QIcon>
-                        </template>
+                            </template>
                         </QSelect>
                     </QItemSection>
                 </QItem>
@@ -99,7 +124,9 @@ const countries = ref();
                                         transition-hide="rotate"
                                     >
                                         <QDate v-model="params.shipped" minimal>
-                                            <div class="row items-center justify-end q-gutter-sm">
+                                            <div
+                                                class="row items-center justify-end q-gutter-sm"
+                                            >
                                                 <QBtn
                                                     :label="t('globals.close')"
                                                     color="primary"

src/pages/Route/Cmr/CmrList.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { Notify } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import { useSession } from 'src/composables/useSession';
@@ -13,6 +14,7 @@ const stateStore = useStateStore();
 const { t } = useI18n();
 const session = useSession();
 const token = session.getToken();
+const selected = ref([]);
 
 const columns = computed(() => [
     {
@@ -35,6 +37,12 @@ const columns = computed(() => [
         field: (row) => row.ticketFk,
         sortable: true,
     },
+    {
+        name: 'routeFkFk',
+        label: t('route.cmr.list.routeFk'),
+        field: (row) => row.routeFk,
+        sortable: true,
+    },
     {
         name: 'clientFk',
         label: t('route.cmr.list.clientFk'),
@@ -62,11 +70,24 @@ const columns = computed(() => [
         field: (row) => row.cmrFk,
     },
 ]);
-function getProjectUrl() {
+function getApiUrl() {
     return new URL(window.location).origin;
 }
-function getCmrLink(cmrFk) {
+function getCmrUrl(value) {
-    return `${getProjectUrl()}/api/Routes/${cmrFk}/cmr?access_token=${token}`;
+    return `${getApiUrl()}/api/Routes/${value}/cmr?access_token=${token}`;
+}
+function downloadPdfs() {
+    if (!selected.value.length) {
+        Notify.create({
+            message: t('globals.noSelectedRows'),
+            type: 'warning',
+        });
+        return;
+    }
+    let cmrs = [];
+    for (let value of selected.value) cmrs.push(value.cmrFk);
+    // prettier-ignore
+    return window.open(`${getApiUrl()}/api/Routes/downloadCmrsZip?ids=${cmrs.join(',')}&access_token=${token}`);
 }
 </script>
 <template>
@@ -86,11 +107,18 @@ function getCmrLink(cmrFk) {
                         :dense="$q.screen.lt.md"
                         :pagination="{ rowsPerPage: null }"
                         hide-pagination
+                        row-key="cmrFk"
+                        selection="multiple"
+                        v-model:selected="selected"
                         :grid="$q.screen.lt.md"
                         auto-load
                     >
                         <template #top>
-                            {{ `${t('route.cmr.list.total')}: ${rows.length}` }}
+                            <div style="width: 100%; display: table">
+                                <div style="float: right; color: lightgray">
+                                    {{ `${rows.length} ${t('route.cmr.list.results')}` }}
+                                </div>
+                            </div>
                         </template>
                         <template #body-cell-hasCmrDms="{ value }">
                             <QTd align="center">
@@ -118,7 +146,7 @@ function getCmrLink(cmrFk) {
                         </template>
                         <template #body-cell-icons="{ value }">
                             <QTd align="center">
-                                <a :href="getCmrLink(value)" target="_blank">
+                                <a :href="getCmrUrl(value)" target="_blank">
                                     <QIcon
                                         name="visibility"
                                         color="primary"
@@ -129,26 +157,21 @@ function getCmrLink(cmrFk) {
                                         {{ t('route.cmr.list.viewCmr') }}
                                     </QTooltip>
                                 </a>
-                                <a :href="getCmrLink(value)" download>
-                                    <QIcon
-                                        name="cloud_download"
-                                        color="primary"
-                                        size="2em"
-                                        class="q-mr-sm q-ml-sm"
-                                    />
-                                    <QTooltip>
-                                        {{ t('route.cmr.list.downloadCmr') }}
-                                    </QTooltip>
-                                </a>
                             </QTd>
                         </template>
                     </QTable>
                 </template>
             </VnPaginate>
         </div>
+        <QPageSticky :offset="[20, 20]">
+            <QBtn @click="downloadPdfs" fab icon="cloud_download" color="primary" />
+        </QPageSticky>
         <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
             <QScrollArea class="fit text-grey-8">
                 <CmrFilter data-key="CmrList" />
+                <QTooltip>
+                    {{ t('route.cmr.list.downloadCmrs') }}
+                </QTooltip>
             </QScrollArea>
         </QDrawer>
     </div>
@@ -158,7 +181,7 @@ function getCmrLink(cmrFk) {
 .list {
     padding-top: 15px;
     padding-bottom: 15px;
-    max-width: 900px;
+    max-width: 1000px;
     width: 100%;
 }
 .grid-style-transition {