From 9f3fe3665b0250daf6eb1fad151bf85111e498f3 Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Mon, 4 Dec 2023 12:02:47 -0500
Subject: [PATCH 1/2] Se cambia visualmente el componente que controla las
 descargas

---
 src/components/ui/CardList.vue          |   2 +-
 src/pages/InvoiceOut/InvoiceOutList.vue | 244 +++++++++++++-----------
 2 files changed, 131 insertions(+), 115 deletions(-)

diff --git a/src/components/ui/CardList.vue b/src/components/ui/CardList.vue
index ae74fbd7e..f94d670c4 100644
--- a/src/components/ui/CardList.vue
+++ b/src/components/ui/CardList.vue
@@ -28,7 +28,7 @@ const selectedItem = (item) => {
         <div>
             <slot name="title">
                 <div class="flex justify-between">
-                    <div class="flex">
+                    <div class="flex items-center">
                         <div class="title text-primary text-weight-bold text-h5">
                             {{ $props.title }}
                         </div>
diff --git a/src/pages/InvoiceOut/InvoiceOutList.vue b/src/pages/InvoiceOut/InvoiceOutList.vue
index b309a9674..95279b09d 100644
--- a/src/pages/InvoiceOut/InvoiceOutList.vue
+++ b/src/pages/InvoiceOut/InvoiceOutList.vue
@@ -45,6 +45,8 @@ const setManageCheckboxes = (downloadType) => {
 };
 
 const addElement = (element) => {
+    showSelect.value = false;
+    manageCheckboxes.value = false;
     if (arrayElements.value.length >= 0) {
         const index = arrayElements.value.findIndex((item) => item.id === element.id);
         if (index >= 0) {
@@ -124,119 +126,130 @@ const downloadCsv = (rows) => {
             <InvoiceOutFilter data-key="InvoiceOutList" />
         </QScrollArea>
     </QDrawer>
-    <QPage class="column items-center q-pa-md">
-        <div class="card-list">
-            <VnPaginate
-                auto-load
-                data-key="InvoiceOutList"
-                order="issued DESC, id DESC"
-                url="InvoiceOuts/filter"
-            >
-                <template #body="{ rows }">
-                    <div class="flex justify-around q-mb-md">
-                        <div>
-                            <QCheckbox
-                                label="Marcar todo"
-                                v-model="manageCheckboxes"
-                                @click="setShowSelect"
-                            />
-
-                            <QBtn
-                                :disable="!manageCheckboxes"
-                                class="q-ml-md"
-                                dense
-                                flat
-                                icon="cloud_download"
-                                round
-                                :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>
+    <QPage>
+        <VnPaginate
+            auto-load
+            data-key="InvoiceOutList"
+            order="issued DESC, id DESC"
+            url="InvoiceOuts/filter"
+        >
+            <template #body="{ rows }">
+                <QToolbar class="bg-vn-dark justify-end">
+                    <div id="st-actions">
                         <QBtn
-                            label="Descargar"
-                            color="primary"
-                            type="submit"
                             @click="downloadCsv(rows)"
+                            class="q-mr-xl"
+                            color="primary"
+                            :disable="!manageCheckboxes && arrayElements.length < 1"
+                            :label="t('download')"
+                            v-if="!showSelect"
+                        />
+                        <QBtnDropdown
+                            class="q-mr-xl"
+                            color="primary"
+                            :disable="!manageCheckboxes && arrayElements.length < 1"
+                            :label="t('download')"
+                            v-else
+                        >
+                            <Qlist>
+                                <QItem clickable v-close-popup @click="downloadCsv(rows)">
+                                    <QItemSection>
+                                        <QItemLabel>
+                                            {{
+                                                t('allRows', {
+                                                    numberRows: t(rows.length),
+                                                })
+                                            }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+
+                                <QItem clickable v-close-popup @click="downloadCsv(rows)">
+                                    <QItemSection>
+                                        <QItemLabel>
+                                            {{
+                                                t('selectRows', {
+                                                    numberRows: t(rows.length),
+                                                })
+                                            }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </Qlist>
+                        </QBtnDropdown>
+
+                        <QCheckbox
+                            left-label
+                            :label="t('markAll')"
+                            v-model="manageCheckboxes"
+                            @click="setShowSelect"
+                            class="q-mr-md"
                         />
                     </div>
-                    <CardList
-                        :add-element="addElement"
-                        :element="row"
-                        :id="row.id"
-                        :is-selected="manageCheckboxes"
-                        :show-checkbox="true"
-                        :key="row.id"
-                        :title="row.ref"
-                        @click="navigate(row.id)"
-                        v-for="row of rows"
-                    >
-                        <template #list-items>
-                            <VnLv
-                                :label="t('invoiceOut.list.shortIssued')"
-                                :title-label="t('invoiceOut.list.issued')"
-                                :value="toDate(row.issued)"
-                            />
-                            <VnLv
-                                :label="t('invoiceOut.list.amount')"
-                                :value="toCurrency(row.amount)"
-                            />
-                            <VnLv
-                                :label="t('invoiceOut.list.client')"
-                                :value="row.clientSocialName"
-                            />
-                            <VnLv
-                                :label="t('invoiceOut.list.shortCreated')"
-                                :title-label="t('invoiceOut.list.created')"
-                                :value="toDate(row.created)"
-                            />
-                            <VnLv
-                                :label="t('invoiceOut.list.company')"
-                                :value="row.companyCode"
-                            />
-                            <VnLv
-                                :label="t('invoiceOut.list.shortDued')"
-                                :title-label="t('invoiceOut.list.dued')"
-                                :value="toDate(row.dued)"
-                            />
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('components.smartCard.openCard')"
-                                @click.stop="navigate(row.id)"
-                                color="white"
-                                outline
-                                type="reset"
-                            />
-                            <QBtn
-                                :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id)"
-                                color="primary"
-                                style="margin-top: 15px"
-                                type="submit"
-                            />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
+                </QToolbar>
+                <div class="flex flex-center q-pa-md">
+                    <div class="card-list">
+                        <CardList
+                            :add-element="addElement"
+                            :element="row"
+                            :id="row.id"
+                            :is-selected="manageCheckboxes"
+                            :show-checkbox="true"
+                            :key="row.id"
+                            :title="row.ref"
+                            @click="navigate(row.id)"
+                            v-for="row of rows"
+                        >
+                            <template #list-items>
+                                <VnLv
+                                    :label="t('invoiceOut.list.shortIssued')"
+                                    :title-label="t('invoiceOut.list.issued')"
+                                    :value="toDate(row.issued)"
+                                />
+                                <VnLv
+                                    :label="t('invoiceOut.list.amount')"
+                                    :value="toCurrency(row.amount)"
+                                />
+                                <VnLv
+                                    :label="t('invoiceOut.list.client')"
+                                    :value="row.clientSocialName"
+                                />
+                                <VnLv
+                                    :label="t('invoiceOut.list.shortCreated')"
+                                    :title-label="t('invoiceOut.list.created')"
+                                    :value="toDate(row.created)"
+                                />
+                                <VnLv
+                                    :label="t('invoiceOut.list.company')"
+                                    :value="row.companyCode"
+                                />
+                                <VnLv
+                                    :label="t('invoiceOut.list.shortDued')"
+                                    :title-label="t('invoiceOut.list.dued')"
+                                    :value="toDate(row.dued)"
+                                />
+                            </template>
+                            <template #actions>
+                                <QBtn
+                                    :label="t('components.smartCard.openCard')"
+                                    @click.stop="navigate(row.id)"
+                                    color="white"
+                                    outline
+                                    type="reset"
+                                />
+                                <QBtn
+                                    :label="t('components.smartCard.openSummary')"
+                                    @click.stop="viewSummary(row.id)"
+                                    color="primary"
+                                    style="margin-top: 15px"
+                                    type="submit"
+                                />
+                            </template>
+                        </CardList>
+                    </div>
+                </div>
+            </template>
+        </VnPaginate>
     </QPage>
 </template>
 
@@ -245,10 +258,6 @@ const downloadCsv = (rows) => {
     width: 100%;
     max-width: 60em;
 }
-
-.dark_icon {
-    color: #121212;
-}
 </style>
 
 <i18n>
@@ -257,10 +266,17 @@ en:
     fileDenied: Browser denied file download...
     fileAllowed: Successful download of CSV file
     youCanSearchByInvoiceReference: You can search by invoice reference
-
+    download: Download
+    selectRows: Select all { numberRows } row(s)
+    allRows: All { numberRows } row(s)
+    markAll: Mark all
 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
+    download: Descargar
+    selectRows: Seleccionar las { numberRows } filas(s)
+    allRows: Todo { numberRows } filas(s)
+    markAll: Marcar todo
 </i18n>

From ce72b52e885527ee8843a89321b381808f4e1b86 Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Mon, 4 Dec 2023 12:54:40 -0500
Subject: [PATCH 2/2] Reubicacion de textos i18n a global

---
 src/i18n/en/index.js                    |  6 +++++-
 src/i18n/es/index.js                    |  6 +++++-
 src/pages/InvoiceOut/InvoiceOutList.vue | 22 +++++++---------------
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 92a2ec206..68d581703 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -39,6 +39,10 @@ export default {
         },
         noSelectedRows: `You don't have any line selected`,
         downloadCSVSuccess: 'CSV downloaded successfully',
+        download: 'Download',
+        selectRows: 'Select all { numberRows } row(s)',
+        allRows: 'All { numberRows } row(s)',
+        markAll: 'Mark all',
     },
     errors: {
         statusUnauthorized: 'Access denied',
@@ -439,7 +443,7 @@ export default {
             create: 'Create',
             summary: 'Summary',
             basicData: 'Basic Data',
-            log: 'Logs'
+            log: 'Logs',
         },
         list: {
             parking: 'Parking',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 7e296a353..c7c778da3 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -39,6 +39,10 @@ export default {
         },
         noSelectedRows: `No tienes ninguna línea seleccionada`,
         downloadCSVSuccess: 'Descarga de CSV exitosa',
+        download: 'Descargar',
+        selectRows: 'Seleccionar las { numberRows } filas(s)',
+        allRows: 'Todo { numberRows } filas(s)',
+        markAll: 'Marcar todo',
     },
     errors: {
         statusUnauthorized: 'Acceso denegado',
@@ -441,7 +445,7 @@ export default {
             create: 'Crear',
             summary: 'Resumen',
             basicData: 'Datos básicos',
-            log: 'Registros de auditoría'
+            log: 'Registros de auditoría',
         },
         list: {
             parking: 'Parking',
diff --git a/src/pages/InvoiceOut/InvoiceOutList.vue b/src/pages/InvoiceOut/InvoiceOutList.vue
index 95279b09d..5f02f175d 100644
--- a/src/pages/InvoiceOut/InvoiceOutList.vue
+++ b/src/pages/InvoiceOut/InvoiceOutList.vue
@@ -141,14 +141,14 @@ const downloadCsv = (rows) => {
                             class="q-mr-xl"
                             color="primary"
                             :disable="!manageCheckboxes && arrayElements.length < 1"
-                            :label="t('download')"
+                            :label="t('globals.download')"
                             v-if="!showSelect"
                         />
                         <QBtnDropdown
                             class="q-mr-xl"
                             color="primary"
                             :disable="!manageCheckboxes && arrayElements.length < 1"
-                            :label="t('download')"
+                            :label="t('globals.download')"
                             v-else
                         >
                             <Qlist>
@@ -156,8 +156,8 @@ const downloadCsv = (rows) => {
                                     <QItemSection>
                                         <QItemLabel>
                                             {{
-                                                t('allRows', {
-                                                    numberRows: t(rows.length),
+                                                t('globals.allRows', {
+                                                    numberRows: rows.length,
                                                 })
                                             }}
                                         </QItemLabel>
@@ -168,8 +168,8 @@ const downloadCsv = (rows) => {
                                     <QItemSection>
                                         <QItemLabel>
                                             {{
-                                                t('selectRows', {
-                                                    numberRows: t(rows.length),
+                                                t('globals.selectRows', {
+                                                    numberRows: rows.length,
                                                 })
                                             }}
                                         </QItemLabel>
@@ -180,7 +180,7 @@ const downloadCsv = (rows) => {
 
                         <QCheckbox
                             left-label
-                            :label="t('markAll')"
+                            :label="t('globals.markAll')"
                             v-model="manageCheckboxes"
                             @click="setShowSelect"
                             class="q-mr-md"
@@ -266,17 +266,9 @@ en:
     fileDenied: Browser denied file download...
     fileAllowed: Successful download of CSV file
     youCanSearchByInvoiceReference: You can search by invoice reference
-    download: Download
-    selectRows: Select all { numberRows } row(s)
-    allRows: All { numberRows } row(s)
-    markAll: Mark all
 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
-    download: Descargar
-    selectRows: Seleccionar las { numberRows } filas(s)
-    allRows: Todo { numberRows } filas(s)
-    markAll: Marcar todo
 </i18n>