Merge pull request 'Se crea logica para descargar datos en formato csv' (#13) from features/ms_32_descargar_csv into dev

Reviewed-on: hyervoni/salix-front-mindshore#13

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -2,7 +2,7 @@
 import { onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useQuasar } from 'quasar';
+import { exportFile, useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import InvoiceOutSummaryDialog from './Card/InvoiceOutSummaryDialog.vue';
@@ -14,6 +14,7 @@ import CardList2 from 'src/components/ui/CardList2.vue';
 
 const { t } = useI18n();
 const manageCheckboxes = ref(false);
+const showSelect = ref(false);
 const quasar = useQuasar();
 const router = useRouter();
 const stateStore = useStateStore();
@@ -33,14 +34,53 @@ function viewSummary(id) {
         },
     });
 }
+
+const setShowSelect = () => {
+    showSelect.value = !showSelect.value;
+};
+
+const setManageCheckboxes = (downloadType) => {
+    console.log(downloadType);
+};
+
+const downloadCsv = (rows) => {
+    let file;
+    for (var i = 0; i < rows.length; i++) {
+        if (i == 0) file += Object.keys(rows[i]).join(';') + '\n';
+        file +=
+            Object.keys(rows[i])
+                .map(function (key) {
+                    return rows[i][key];
+                })
+                .join(';') + '\n';
+    }
+    const status = exportFile('file.csv', file, {
+        encoding: 'windows-1252',
+        mimeType: 'text/csv;charset=windows-1252;',
+    });
+
+    if (status === true) {
+        quasar.notify({
+            message: t('fileAllowed'),
+            color: 'positive',
+            icon: 'check',
+        });
+    } else {
+        quasar.notify({
+            message: t('fileDenied'),
+            color: 'negative',
+            icon: 'warning',
+        });
+    }
+};
 </script>
 
 <template>
     <template v-if="stateStore.isHeaderMounted()">
         <Teleport to="#searchbar">
             <VnSearchbar
-                :info="t('You can search by invoice reference')"
-                :label="t('Search invoice')"
+                :info="t('youCanSearchByInvoiceReference')"
+                :label="t('searchInvoice')"
                 data-key="InvoiceOutList"
             />
         </Teleport>
@@ -75,8 +115,48 @@ function viewSummary(id) {
             >
                 <template #body="{ rows }">
                     <div class="flex justify-around q-mb-md">
-                        <QCheckbox label="Marcar todo" v-model="manageCheckboxes" />
-                        <QBtn label="Descargar" color="primary" type="submit" />
+                        <div>
+                            <QCheckbox
+                                label="Marcar todo"
+                                v-model="manageCheckboxes"
+                                @click="setShowSelect"
+                            />
+
+                            <QBtn
+                                :disable="!manageCheckboxes"
+                                class="q-ml-md"
+                                dense
+                                flat
+                                icon="cloud_download"
+                                round
+                                v-bind:class="{ dark_icon: !manageCheckboxes }"
+                            >
+                                <QMenu>
+                                    <QList padding dense>
+                                        <QItem
+                                            @click="setManageCheckboxes('all')"
+                                            clickable
+                                            v-ripple
+                                        >
+                                            Todo {{ rows.length }} filas(s)
+                                        </QItem>
+                                        <QItem
+                                            @click="setManageCheckboxes('partial')"
+                                            clickable
+                                            v-ripple
+                                        >
+                                            Seleccionar las {{ rows.length }} filas(s)
+                                        </QItem>
+                                    </QList>
+                                </QMenu>
+                            </QBtn>
+                        </div>
+                        <QBtn
+                            label="Descargar"
+                            color="primary"
+                            type="submit"
+                            @click="downloadCsv(rows)"
+                        />
                     </div>
                     <CardList2
                         :id="row.id"
@@ -144,10 +224,32 @@ function viewSummary(id) {
     width: 100%;
     max-width: 60em;
 }
+
+.dark_icon {
+    color: #121212;
+}
+
+.disabled,
+.disabled *,
+[disabled],
+[disabled] * {
+    cursor: default !important;
+}
 </style>
 
 <i18n>
-es:
-    Search invoice: Buscar factura emitida
-    You can search by invoice reference: Puedes buscar por referencia de la factura
+    {
+        "en": {
+            "searchInvoice": "Search issued invoice",
+            "fileDenied": "Browser denied file download...",
+            "fileAllowed": "Successful download of CSV file",
+            "youCanSearchByInvoiceReference": "You can search by invoice reference"
+        },
+        "es": {
+            "searchInvoice": "Buscar factura emitida",
+            "fileDenied": "El navegador denegó la descarga de archivos...",
+            "fileAllowed": "Descarga exitosa de archivo CSV",
+            "youCanSearchByInvoiceReference": "Puedes buscar por referencia de la factura"
+        }
+    }
 </i18n>