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] 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>