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

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

@ -106,6 +106,7 @@ function formatValue(value) {
return `"${value}"`;
}
</script>
<template>
<QForm @submit="search">
<QList dense>
@ -119,32 +120,32 @@ function formatValue(value) {
<div class="q-gutter-xs">
<QBtn
@click="clearFilters"
icon="filter_list_off"
color="primary"
size="sm"
dense
flat
icon="filter_list_off"
padding="none"
round
flat
dense
size="sm"
>
<QTooltip>{{ t('Remove filters') }}</QTooltip>
</QBtn>
<QBtn
@click="reload"
icon="refresh"
color="primary"
size="sm"
dense
flat
icon="refresh"
padding="none"
round
flat
dense
size="sm"
>
<QTooltip>{{ t('Refresh') }}</QTooltip>
</QBtn>
</div>
</QItemSection>
</QItem>
<QItem>
<QItem class="q-mb-sm">
<div
v-if="tags.length === 0"
class="text-grey font-xs text-center full-width"
@ -153,14 +154,14 @@ function formatValue(value) {
</div>
<div>
<QChip
v-for="chip of tags"
:key="chip.label"
@remove="remove(chip.label)"
icon="label"
color="primary"
class="text-dark"
size="sm"
color="primary"
icon="label"
removable
size="sm"
v-for="chip of tags"
>
<slot name="tags" :tag="chip" :format-fn="formatValue">
<div class="q-gutter-x-xs">
@ -172,35 +173,35 @@ function formatValue(value) {
</div>
</QItem>
<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>
<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>
<QInnerLoading
:showing="isLoading"
:label="t('globals.pleaseWait')"
:showing="isLoading"
color="primary"
/>
</template>
<i18n>
es:
es:
No filters applied: No se han aplicado filtros
Applied filters: Filtros aplicados
Remove filters: Eliminar filtros

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

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

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

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

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

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