Merge pull request 'feat: refs #8348 add CSV download functionality and update print label icon' (!1172) from 8348-exportDataOnCsv into master

Reviewed-on: verdnatura/salix-front#1172
Reviewed-by: Alex Moreno <alexm@verdnatura.es>

src/pages/Entry/EntryBuysTableDialog.vue

@@ -1,24 +1,24 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { QBtn } from 'quasar';
 
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import { usePrintService } from 'composables/usePrintService';
-const { openReport } = usePrintService();
 
+const { openReport } = usePrintService();
+const buyRows = ref([]);
 const route = useRoute();
 const { t } = useI18n();
 const $props = defineProps({
     id: {
-        type: String,
+        type: Number,
         required: false,
         default: null,
     },
 });
 const entityId = computed(() => $props.id || route.params.id);
-
 const entriesTableColumns = computed(() => [
     {
         align: 'left',
@@ -63,34 +63,39 @@ const entriesTableColumns = computed(() => [
         field: 'grouping',
     },
 ]);
-</script>
 
+function downloadCSV(rows) {
+    const headers = ['id', 'itemFk', 'name', 'stickers', 'packing', 'comment'];
+
+    const csvRows = rows.map((row) => {
+        const buy = row;
+        const item = buy.item || {};
+
+        return [
+            buy.id,
+            buy.itemFk,
+            item.name || '',
+            buy.stickers,
+            buy.packing,
+            item.comment || '',
+        ].join(',');
+    });
+
+    const csvContent = [headers.join(','), ...csvRows].join('\n');
+
+    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', `${entityId.value}data.csv`);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+}
+</script>
 <template>
     <QDialog ref="dialogRef">
         <QCard style="min-width: 800px">
-            <QCardSection class="row items-center q-pb-none">
-                <QAvatar
-                    :icon="icon"
-                    color="primary"
-                    text-color="white"
-                    size="xl"
-                    v-if="icon"
-                />
-                <span class="text-h6 text-grey">{{ title }}</span>
-                <QSpace />
-                <QBtn icon="close" :disable="isLoading" flat round dense v-close-popup />
-            </QCardSection>
-            <QCardActions align="right">
-                <QBtn
-                    :label="t('myEntries.printLabels')"
-                    color="primary"
-                    icon="print"
-                    :loading="isLoading"
-                    @click="openReport(`Entries/${entityId}/labelSupplier`)"
-                    unelevated
-                    autofocus
-                />
-            </QCardActions>
             <QCardSection class="row items-center">
                 <VnPaginate
                     ref="entryBuysPaginateRef"
@@ -101,6 +106,7 @@ const entriesTableColumns = computed(() => [
                 >
                     <template #body="{ rows }">
                         <QTable
+                            ref="buyRows"
                             :rows="rows"
                             :columns="entriesTableColumns"
                             row-key="id"
@@ -110,6 +116,26 @@ const entriesTableColumns = computed(() => [
                             :grid="$q.screen.lt.md"
                             :no-data-label="t('globals.noResults')"
                         >
+                            <template #top-left>
+                                <QBtn
+                                    :label="t('myEntries.downloadCsv')"
+                                    color="primary"
+                                    icon="csv"
+                                    @click="downloadCSV(rows)"
+                                    unelevated
+                                />
+                            </template>
+                            <template #top-right>
+                                <QBtn
+                                    class="q-mr-lg"
+                                    :label="t('myEntries.printLabels')"
+                                    color="primary"
+                                    icon="print"
+                                    @click="
+                                        openReport(`Entries/${entityId}/labelSupplier`)
+                                    "
+                                />
+                            </template>
                             <template #body="props">
                                 <QTr>
                                     <QTd v-for="col in props.cols" :key="col.name">
@@ -118,7 +144,6 @@ const entriesTableColumns = computed(() => [
                                     <QBtn
                                         icon="visibility"
                                         v-if="props.row.stickers > 0"
-                                        :loading="isLoading"
                                         @click="
                                             openReport(
                                                 `Entries/${props.row.id}/buy-label-supplier`

src/pages/Entry/MyEntries.vue

@@ -102,7 +102,7 @@ const columns = computed(() => [
         actions: [
             {
                 title: t('myEntries.printLabels'),
-                icon: 'print',
+                icon: 'move_item',
                 isPrimary: true,
                 action: (row) => printBuys(row.id),
             },

src/pages/Entry/locale/en.yml

@@ -17,5 +17,6 @@ myEntries:
     warehouseInFk: Warehouse in
     daysOnward: Days onward
     daysAgo: Days ago
+    downloadCsv: Download CSV
 wasteRecalc:
     recalcOk: The wastes were successfully recalculated

src/pages/Entry/locale/es.yml

@@ -20,5 +20,6 @@ myEntries:
     warehouseInFk: Alm. entrada
     daysOnward: Días adelante
     daysAgo: Días atras
+    downloadCsv: Descargar CSV
 wasteRecalc:
     recalcOk: Se han recalculado las mermas correctamente