forked from verdnatura/salix-front
Se cambia visualmente el componente que controla las descargas
This commit is contained in:
carlosfonseca
parent
1e3406b5fa
commit
9f3fe3665b
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue