verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 99 Releases Wiki Activity

Se cambia visualmente el componente que controla las descargas

This commit is contained in:
carlosfonseca 2023-12-04 12:02:47 -05:00
parent 1e3406b5fa
commit 9f3fe3665b
2 changed files with 131 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ui/CardList.vue
View File

@ -28,7 +28,7 @@ const selectedItem = (item) => {
<div> <div>
<slot name="title"> <slot name="title">
<div class="flex justify-between"> <div class="flex justify-between">
<div class="flex"> <div class="flex items-center">
<div class="title text-primary text-weight-bold text-h5"> <div class="title text-primary text-weight-bold text-h5">
{{ $props.title }} {{ $props.title }}
</div> </div>

110
src/pages/InvoiceOut/InvoiceOutList.vue
View File

@ -45,6 +45,8 @@ const setManageCheckboxes = (downloadType) => {
}; };
const addElement = (element) => { const addElement = (element) => {
showSelect.value = false;
manageCheckboxes.value = false;
if (arrayElements.value.length >= 0) { if (arrayElements.value.length >= 0) {
const index = arrayElements.value.findIndex((item) => item.id === element.id); const index = arrayElements.value.findIndex((item) => item.id === element.id);
if (index >= 0) { if (index >= 0) {
@ -124,8 +126,7 @@ const downloadCsv = (rows) => {
<InvoiceOutFilter data-key="InvoiceOutList" /> <InvoiceOutFilter data-key="InvoiceOutList" />
</QScrollArea> </QScrollArea>
</QDrawer> </QDrawer>
<QPage class="column items-center q-pa-md"> <QPage>
<div class="card-list">
<VnPaginate <VnPaginate
auto-load auto-load
data-key="InvoiceOutList" data-key="InvoiceOutList"
@ -133,50 +134,61 @@ const downloadCsv = (rows) => {
url="InvoiceOuts/filter" url="InvoiceOuts/filter"
> >
<template #body="{ rows }"> <template #body="{ rows }">
<div class="flex justify-around q-mb-md"> <QToolbar class="bg-vn-dark justify-end">
<div> <div id="st-actions">
<QBtn
@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 <QCheckbox
label="Marcar todo" left-label
:label="t('markAll')"
v-model="manageCheckboxes" v-model="manageCheckboxes"
@click="setShowSelect" @click="setShowSelect"
/> class="q-mr-md"
<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>
<QBtn
label="Descargar"
color="primary"
type="submit"
@click="downloadCsv(rows)"
/> />
</div> </div>
</QToolbar>
<div class="flex flex-center q-pa-md">
<div class="card-list">
<CardList <CardList
:add-element="addElement" :add-element="addElement"
:element="row" :element="row"
@ -234,9 +246,10 @@ const downloadCsv = (rows) => {
/> />
</template> </template>
</CardList> </CardList>
</div>
</div>
</template> </template>
</VnPaginate> </VnPaginate>
</div>
</QPage> </QPage>
</template> </template>
@ -245,10 +258,6 @@ const downloadCsv = (rows) => {
width: 100%; width: 100%;
max-width: 60em; max-width: 60em;
} }
.dark_icon {
color: #121212;
}
</style> </style>
<i18n> <i18n>
@ -257,10 +266,17 @@ en:
fileDenied: Browser denied file download... fileDenied: Browser denied file download...
fileAllowed: Successful download of CSV file fileAllowed: Successful download of CSV file
youCanSearchByInvoiceReference: You can search by invoice reference youCanSearchByInvoiceReference: You can search by invoice reference
download: Download
selectRows: Select all { numberRows } row(s)
allRows: All { numberRows } row(s)
markAll: Mark all
es: es:
searchInvoice: Buscar factura emitida searchInvoice: Buscar factura emitida
fileDenied: El navegador denegó la descarga de archivos... fileDenied: El navegador denegó la descarga de archivos...
fileAllowed: Descarga exitosa de archivo CSV fileAllowed: Descarga exitosa de archivo CSV
youCanSearchByInvoiceReference: Puedes buscar por referencia de la factura 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> </i18n>