wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

Se hacen las mejoras en las tarjetas y menu lateral

This commit is contained in:
carlosfonseca 2023-11-22 09:33:47 -05:00
parent e93e1d456e
commit 737d3020fe
5 changed files with 143 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/ui/CardList2.vue
View File

@ -4,65 +4,88 @@ const $props = defineProps({
title: { type: String, default: null }, title: { type: String, default: null },
}); });
</script> </script>
<template> <template>
<QCard class="card q-mb-md cursor-pointer q-hoverable bg-white-7 q-pa-lg"> <QCard class="card q-mb-md cursor-pointer q-hoverable bg-white-7 q-pa-lg">
<div> <div>
<slot name="title"> <slot name="title">
<div class="title text-primary text-weight-bold text-h5"> <div class="flex">
{{ $props.title ?? `#${$props.id}` }} <div class="title text-primary text-weight-bold text-h5">
{{ $props.title ?? `#${$props.id}` }}
</div>
<div class="q_chip">
<QChip outline color="grey" size="sm">ID: 12345</QChip>
</div>
</div> </div>
</slot> </slot>
<div class="card-list-body row"> <div class="card-list-body">
<div class="list-items row flex-wrap-wrap q-mt-md"> <div class="list-items row flex-wrap-wrap">
<slot name="list-items" /> <slot name="list-items" />
</div> </div>
<div class="actions column justify-center"> <div class="actions">
<slot name="actions" /> <slot name="actions" />
</div> </div>
</div> </div>
</div> </div>
</QCard> </QCard>
</template> </template>
<style lang="scss"> <style lang="scss">
.title {
margin-right: 25px;
}
.q_chip {
display: flex;
flex-direction: column;
justify-content: center;
}
.card-list-body { .card-list-body {
display: flex; display: flex;
justify-content: center; justify-content: space-between;
margin-top: 10px;
.vn-label-value { .vn-label-value {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
gap: 2%; gap: 2%;
width: 50%; width: 50%;
.label { .label {
width: 30%; width: 35%;
color: var(--vn-label); color: var(--vn-label);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.value { .value {
width: 60%; width: 65%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
} }
.actions { .actions {
.q-btn { display: flex;
width: 150px; flex-direction: column;
} justify-content: center;
.q-icon { width: 25%;
color: $primary;
font-size: 25px;
}
} }
} }
@media (max-width: $breakpoint-xs) { @media (max-width: $breakpoint-xs) {
.card-list-body { .card-list-body {
flex-wrap: wrap;
justify-content: center;
.vn-label-value { .vn-label-value {
width: 100%; width: 100%;
} }
.actions {
width: 100%;
margin-top: 15px;
padding: 0 15%;
justify-content: center;
}
} }
} }
</style> </style>
@ -77,9 +100,4 @@ const $props = defineProps({
.list-items { .list-items {
width: 75%; width: 75%;
} }
@media (max-width: $breakpoint-md) {
.actions {
margin-top: 30px;
}
}
</style> </style>

63
src/components/ui/VnFilterPanel.vue
View File

@ -106,6 +106,7 @@ function formatValue(value) {
return `"${value}"`; return `"${value}"`;
} }
</script> </script>
<template> <template>
<QForm @submit="search"> <QForm @submit="search">
<QList dense> <QList dense>
@ -119,32 +120,32 @@ function formatValue(value) {
<div class="q-gutter-xs"> <div class="q-gutter-xs">
<QBtn <QBtn
@click="clearFilters" @click="clearFilters"
icon="filter_list_off"
color="primary" color="primary"
size="sm" dense
flat
icon="filter_list_off"
padding="none" padding="none"
round round
flat size="sm"
dense
> >
<QTooltip>{{ t('Remove filters') }}</QTooltip> <QTooltip>{{ t('Remove filters') }}</QTooltip>
</QBtn> </QBtn>
<QBtn <QBtn
@click="reload" @click="reload"
icon="refresh"
color="primary" color="primary"
size="sm" dense
flat
icon="refresh"
padding="none" padding="none"
round round
flat size="sm"
dense
> >
<QTooltip>{{ t('Refresh') }}</QTooltip> <QTooltip>{{ t('Refresh') }}</QTooltip>
</QBtn> </QBtn>
</div> </div>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem class="q-mb-sm">
<div <div
v-if="tags.length === 0" v-if="tags.length === 0"
class="text-grey font-xs text-center full-width" class="text-grey font-xs text-center full-width"
@ -153,14 +154,14 @@ function formatValue(value) {
</div> </div>
<div> <div>
<QChip <QChip
v-for="chip of tags"
:key="chip.label" :key="chip.label"
@remove="remove(chip.label)" @remove="remove(chip.label)"
icon="label"
color="primary"
class="text-dark" class="text-dark"
size="sm" color="primary"
icon="label"
removable removable
size="sm"
v-for="chip of tags"
> >
<slot name="tags" :tag="chip" :format-fn="formatValue"> <slot name="tags" :tag="chip" :format-fn="formatValue">
<div class="q-gutter-x-xs"> <div class="q-gutter-x-xs">
@ -172,29 +173,29 @@ function formatValue(value) {
</div> </div>
</QItem> </QItem>
<QSeparator /> <QSeparator />
<template v-if="props.searchButton">
<QItem>
<QItemSection class="q-py-sm">
<QBtn
:label="t('Search')"
type="submit"
color="primary"
class="full-width"
icon="search"
unelevated
rounded
dense
/>
</QItemSection>
</QItem>
<QSeparator />
</template>
</QList> </QList>
<slot name="body" :params="userParams" :search-fn="search"></slot> <slot name="body" :params="userParams" :search-fn="search"></slot>
<template v-if="props.searchButton">
<QItem>
<QItemSection class="q-py-sm">
<QBtn
:label="t('Search')"
class="full-width"
color="primary"
dense
icon="search"
rounded
type="submit"
unelevated
/>
</QItemSection>
</QItem>
<QSeparator />
</template>
</QForm> </QForm>
<QInnerLoading <QInnerLoading
:showing="isLoading"
:label="t('globals.pleaseWait')" :label="t('globals.pleaseWait')"
:showing="isLoading"
color="primary" color="primary"
/> />
</template> </template>

4
src/i18n/es/index.js
View File

@ -526,8 +526,8 @@ export default {
logOut: 'Cerrar sesión', logOut: 'Cerrar sesión',
}, },
smartCard: { smartCard: {
openCard: 'Ver ficha', openCard: 'Ficha',
openSummary: 'Abrir detalles', openSummary: 'Detalles',
viewDescription: 'Ver descripción', viewDescription: 'Ver descripción',
}, },
cardDescriptor: { cardDescriptor: {

113
src/pages/InvoiceOut/InvoiceOutFilter.vue
View File

@ -43,66 +43,72 @@ function setWorkers(data) {
<QItemSection> <QItemSection>
<QInput <QInput
:label="t('Customer ID')" :label="t('Customer ID')"
v-model="params.clientFk" class="q-mt-sm"
dense
lazy-rules lazy-rules
> outlined
<template #prepend> rounded
<QIcon name="vn:client" size="sm"></QIcon> v-model="params.clientFk"
</template> />
</QInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QInput :label="t('FI')" v-model="params.fi" lazy-rules>
<template #prepend>
<QIcon name="badge" size="sm"></QIcon>
</template>
</QInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QInput :label="t('Amount')" v-model="params.amount" lazy-rules>
<template #prepend>
<QIcon name="euro" size="sm"></QIcon>
</template>
</QInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection>
<QInput
:label="t('FI')"
class="q-mt-sm"
dense
lazy-rules
outlined
rounded
v-model="params.fi"
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QInput
:label="t('Amount')"
class="q-mt-sm"
dense
lazy-rules
outlined
rounded
v-model="params.amount"
/>
</QItemSection>
</QItem>
<QItem class="q-mt-sm">
<QItemSection> <QItemSection>
<QInput <QInput
:label="t('Min')" :label="t('Min')"
dense
lazy-rules
outlined
rounded
type="number" type="number"
v-model.number="params.min" v-model.number="params.min"
lazy-rules />
>
<template #prepend>
<QIcon name="euro" size="sm"></QIcon>
</template>
</QInput>
</QItemSection> </QItemSection>
<QItemSection> <QItemSection>
<QInput <QInput
:label="t('Max')" :label="t('Max')"
dense
lazy-rules
outlined
rounded
type="number" type="number"
v-model.number="params.max" v-model.number="params.max"
lazy-rules />
>
<template #prepend>
<QIcon name="euro" size="sm"></QIcon>
</template>
</QInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-md"> <QItem class="q-mb-md">
<QItemSection> <QItemSection>
<QCheckbox <QCheckbox
v-model="params.hasPdf"
@update:model-value="searchFn()"
:label="t('Has PDF')" :label="t('Has PDF')"
@update:model-value="searchFn()"
toggle-indeterminate toggle-indeterminate
v-model="params.hasPdf"
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
@ -112,15 +118,18 @@ function setWorkers(data) {
<QItemSection> <QItemSection>
<QInput <QInput
:label="t('Issued')" :label="t('Issued')"
v-model="params.issued" dense
mask="date" mask="date"
outlined
rounded
v-model="params.issued"
> >
<template #append> <template #append>
<QIcon name="event" class="cursor-pointer"> <QIcon name="event" class="cursor-pointer">
<QPopupProxy <QPopupProxy
cover cover
transition-show="scale"
transition-hide="scale" transition-hide="scale"
transition-show="scale"
> >
<QDate v-model="params.issued" landscape> <QDate v-model="params.issued" landscape>
<div <div
@ -134,9 +143,9 @@ function setWorkers(data) {
/> />
<QBtn <QBtn
:label="t('globals.confirm')" :label="t('globals.confirm')"
@click="save"
color="primary" color="primary"
flat flat
@click="save"
v-close-popup v-close-popup
/> />
</div> </div>
@ -151,15 +160,18 @@ function setWorkers(data) {
<QItemSection> <QItemSection>
<QInput <QInput
:label="t('Created')" :label="t('Created')"
v-model="params.created" dense
mask="date" mask="date"
outlined
rounded
v-model="params.created"
> >
<template #append> <template #append>
<QIcon name="event" class="cursor-pointer"> <QIcon name="event" class="cursor-pointer">
<QPopupProxy <QPopupProxy
cover cover
transition-show="scale"
transition-hide="scale" transition-hide="scale"
transition-show="scale"
> >
<QDate v-model="params.created" landscape> <QDate v-model="params.created" landscape>
<div <div
@ -173,9 +185,9 @@ function setWorkers(data) {
/> />
<QBtn <QBtn
:label="t('globals.confirm')" :label="t('globals.confirm')"
@click="save"
color="primary" color="primary"
flat flat
@click="save"
v-close-popup v-close-popup
/> />
</div> </div>
@ -188,13 +200,20 @@ function setWorkers(data) {
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput :label="t('Dued')" v-model="params.dued" mask="date"> <QInput
:label="t('Dued')"
dense
mask="date"
outlined
rounded
v-model="params.dued"
>
<template #append> <template #append>
<QIcon name="event" class="cursor-pointer"> <QIcon name="event" class="cursor-pointer">
<QPopupProxy <QPopupProxy
cover cover
transition-show="scale"
transition-hide="scale" transition-hide="scale"
transition-show="scale"
> >
<QDate v-model="params.dued" landscape> <QDate v-model="params.dued" landscape>
<div <div
@ -208,9 +227,9 @@ function setWorkers(data) {
/> />
<QBtn <QBtn
:label="t('globals.confirm')" :label="t('globals.confirm')"
@click="save"
color="primary" color="primary"
flat flat
@click="save"
v-close-popup v-close-popup
/> />
</div> </div>

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

@ -113,16 +113,16 @@ function viewSummary(id) {
<QBtn <QBtn
:label="t('components.smartCard.openCard')" :label="t('components.smartCard.openCard')"
@click.stop="navigate(row.id)" @click.stop="navigate(row.id)"
color="primary" color="white"
type="submit" outline
type="reset"
/> />
<QBtn <QBtn
:label="t('components.smartCard.openSummary')" :label="t('components.smartCard.openSummary')"
@click.stop="viewSummary(row.id)" @click.stop="viewSummary(row.id)"
color="primary" color="primary"
flat
style="margin-top: 15px" style="margin-top: 15px"
type="reset" type="submit"
/> />
</template> </template>
</CardList2> </CardList2>