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>
|
<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>
|
||||||
|
|
|
||||||
|
|
@ -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,119 +126,130 @@ 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"
|
order="issued DESC, id DESC"
|
||||||
order="issued DESC, id DESC"
|
url="InvoiceOuts/filter"
|
||||||
url="InvoiceOuts/filter"
|
>
|
||||||
>
|
<template #body="{ rows }">
|
||||||
<template #body="{ rows }">
|
<QToolbar class="bg-vn-dark justify-end">
|
||||||
<div class="flex justify-around q-mb-md">
|
<div id="st-actions">
|
||||||
<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>
|
|
||||||
<QBtn
|
<QBtn
|
||||||
label="Descargar"
|
|
||||||
color="primary"
|
|
||||||
type="submit"
|
|
||||||
@click="downloadCsv(rows)"
|
@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>
|
</div>
|
||||||
<CardList
|
</QToolbar>
|
||||||
:add-element="addElement"
|
<div class="flex flex-center q-pa-md">
|
||||||
:element="row"
|
<div class="card-list">
|
||||||
:id="row.id"
|
<CardList
|
||||||
:is-selected="manageCheckboxes"
|
:add-element="addElement"
|
||||||
:show-checkbox="true"
|
:element="row"
|
||||||
:key="row.id"
|
:id="row.id"
|
||||||
:title="row.ref"
|
:is-selected="manageCheckboxes"
|
||||||
@click="navigate(row.id)"
|
:show-checkbox="true"
|
||||||
v-for="row of rows"
|
:key="row.id"
|
||||||
>
|
:title="row.ref"
|
||||||
<template #list-items>
|
@click="navigate(row.id)"
|
||||||
<VnLv
|
v-for="row of rows"
|
||||||
:label="t('invoiceOut.list.shortIssued')"
|
>
|
||||||
:title-label="t('invoiceOut.list.issued')"
|
<template #list-items>
|
||||||
:value="toDate(row.issued)"
|
<VnLv
|
||||||
/>
|
:label="t('invoiceOut.list.shortIssued')"
|
||||||
<VnLv
|
:title-label="t('invoiceOut.list.issued')"
|
||||||
:label="t('invoiceOut.list.amount')"
|
:value="toDate(row.issued)"
|
||||||
:value="toCurrency(row.amount)"
|
/>
|
||||||
/>
|
<VnLv
|
||||||
<VnLv
|
:label="t('invoiceOut.list.amount')"
|
||||||
:label="t('invoiceOut.list.client')"
|
:value="toCurrency(row.amount)"
|
||||||
:value="row.clientSocialName"
|
/>
|
||||||
/>
|
<VnLv
|
||||||
<VnLv
|
:label="t('invoiceOut.list.client')"
|
||||||
:label="t('invoiceOut.list.shortCreated')"
|
:value="row.clientSocialName"
|
||||||
:title-label="t('invoiceOut.list.created')"
|
/>
|
||||||
:value="toDate(row.created)"
|
<VnLv
|
||||||
/>
|
:label="t('invoiceOut.list.shortCreated')"
|
||||||
<VnLv
|
:title-label="t('invoiceOut.list.created')"
|
||||||
:label="t('invoiceOut.list.company')"
|
:value="toDate(row.created)"
|
||||||
:value="row.companyCode"
|
/>
|
||||||
/>
|
<VnLv
|
||||||
<VnLv
|
:label="t('invoiceOut.list.company')"
|
||||||
:label="t('invoiceOut.list.shortDued')"
|
:value="row.companyCode"
|
||||||
:title-label="t('invoiceOut.list.dued')"
|
/>
|
||||||
:value="toDate(row.dued)"
|
<VnLv
|
||||||
/>
|
:label="t('invoiceOut.list.shortDued')"
|
||||||
</template>
|
:title-label="t('invoiceOut.list.dued')"
|
||||||
<template #actions>
|
:value="toDate(row.dued)"
|
||||||
<QBtn
|
/>
|
||||||
:label="t('components.smartCard.openCard')"
|
</template>
|
||||||
@click.stop="navigate(row.id)"
|
<template #actions>
|
||||||
color="white"
|
<QBtn
|
||||||
outline
|
:label="t('components.smartCard.openCard')"
|
||||||
type="reset"
|
@click.stop="navigate(row.id)"
|
||||||
/>
|
color="white"
|
||||||
<QBtn
|
outline
|
||||||
:label="t('components.smartCard.openSummary')"
|
type="reset"
|
||||||
@click.stop="viewSummary(row.id)"
|
/>
|
||||||
color="primary"
|
<QBtn
|
||||||
style="margin-top: 15px"
|
:label="t('components.smartCard.openSummary')"
|
||||||
type="submit"
|
@click.stop="viewSummary(row.id)"
|
||||||
/>
|
color="primary"
|
||||||
</template>
|
style="margin-top: 15px"
|
||||||
</CardList>
|
type="submit"
|
||||||
</template>
|
/>
|
||||||
</VnPaginate>
|
</template>
|
||||||
</div>
|
</CardList>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</VnPaginate>
|
||||||
</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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue