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

6336-refactor-claimSummary #227

Merged
jsegarra merged 5 commits from 6336-refactor-claimSummary into dev 2024-03-06 10:44:31 +00:00
Conversation 0 Commits 5 Files Changed 23 +171 -106
23 changed files with 171 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/common/VnLog.vue
View File

@ -1046,7 +1046,7 @@ es:
tooltips:
search: Buscar por identificador o concepto
changes: Buscar por cambios. Los atributos deben buscarse por su nombre interno, para obtenerlo situar el cursor sobre el atributo.
Audit logs: Registros de auditoría
Audit logs: Historial
Property: Propiedad
Before: Antes
After: Después

12
src/components/ui/CardSummary.vue
View File

@ -46,7 +46,7 @@ watch(props, async () => {
<QCard class="cardSummary">
<SkeletonSummary v-if="!entity" />
<template v-if="entity">
<div class="summaryHeader bg-primary q-pa-md text-weight-bolder">
<div class="summaryHeader bg-primary q-pa-sm text-weight-bolder">
<slot name="header-left">
<span></span>
</slot>
@ -85,8 +85,8 @@ watch(props, async () => {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
gap: 15px;
padding: 15px;
gap: 10px;
padding: 10px;
background-color: var(--vn-gray);
> .q-card.vn-one {
@ -105,14 +105,14 @@ watch(props, async () => {
> .q-card {
width: 100%;
background-color: var(--vn-gray);
padding: 15px;
padding: 7px;
font-size: 16px;
min-width: 275px;
.vn-label-value {
display: flex;
flex-direction: row;
margin-top: 5px;
margin-top: 2px;
.label {
color: var(--vn-label);
width: 8em;
@ -131,7 +131,7 @@ watch(props, async () => {
.header {
color: $primary;
font-weight: bold;
margin-bottom: 25px;
margin-bottom: 10px;
font-size: 20px;
display: inline-block;
}

61
src/components/ui/VnNotes.vue
View File

@ -8,7 +8,6 @@ import VnPaginate from './VnPaginate.vue';
import VnUserLink from '../ui/VnUserLink.vue';
const $props = defineProps({
id: { type: String, required: true },
url: { type: String, default: null },
filter: { type: Object, default: () => {} },
body: { type: Object, default: () => {} },
@ -28,7 +27,7 @@ async function insert() {
}
</script>
<template>
<div class="column items-center full-height">
<div class="column items-center full-height full-width">
<VnPaginate
:data-key="$props.url"
:url="$props.url"
@ -39,28 +38,38 @@ async function insert() {
ref="vnPaginateRef"
>
<template #body="{ rows }">
<QCard class="q-pa-xs q-mb-md" v-for="(note, index) in rows" :key="index">
<QCardSection horizontal>
<slot name="picture">
<VnAvatar :descriptor="false" :worker-id="note.workerFk" />
</slot>
<QItem class="full-width justify-between items-start">
<VnUserLink
:name="`${note.worker.user.nickname}`"
:worker-id="note.worker.id"
/>
<slot name="actions">
{{ toDateHour(note.created) }}
<div class="column items-center full-width">
<QCard
class="q-pa-xs q-mb-sm full-width"
v-for="(note, index) in rows"
:key="index"
alexm marked this conversation as resolved
jsegarra commented 2024-03-06 05:32:37 +00:00
Review
Copy Link

Sugenrencia, veo que el texzto está pegado al borde o que el contenido de la card no respira.
Podemos añadirle a este div padding:7px como lo está haciendo Basic Data

Sugenrencia, veo que el texzto está pegado al borde o que el contenido de la card no respira. Podemos añadirle a este div padding:7px como lo está haciendo Basic Data
alexm commented 2024-03-06 08:14:03 +00:00
Review
Copy Link

Tiene exactamente el mismo padding total que Salix (8px)

Tiene exactamente el mismo padding total que Salix (8px)
>
<QCardSection horizontal>
<slot name="picture">
<VnAvatar
:descriptor="false"
:worker-id="note.workerFk"
size="md"
/>
</slot>
</QItem>
</QCardSection>
<QCardSection class="q-pa-sm">
<slot name="text">
{{ note.text }}
</slot>
</QCardSection>
</QCard>
<div class="full-width row justify-between q-pa-xs">
<VnUserLink
:name="`${note.worker.user.nickname}`"
:worker-id="note.worker.id"
/>
<slot name="actions">
{{ toDateHour(note.created) }}
</slot>
</div>
</QCardSection>
<QCardSection class="q-pa-xs q-my-none q-py-none">
<slot name="text">
{{ note.text }}
</slot>
</QCardSection>
</QCard>
</div>
</template>
</VnPaginate>
<QPageSticky position="bottom-right" :offset="[25, 25]" v-if="addNote">
@ -108,8 +117,10 @@ async function insert() {
</template>
<style lang="scss" scoped>
.q-card {
max-width: 80em;
width: 90%;
@media (max-width: $breakpoint-sm) {
width: 100%;
}
&__section {
word-wrap: break-word;
}

3
src/components/ui/VnPaginate.vue
View File

@ -138,7 +138,7 @@ async function onLoad(...params) {
</script>
<template>
<div>
<div class="full-width">
<div
v-if="!props.autoLoad && !store.data && !isLoading"
class="info-row q-pa-md text-center"
@ -175,6 +175,7 @@ async function onLoad(...params) {
@load="onLoad"
:offset="offset"
class="full-width full-height"
v-bind="$attrs"
>
<slot name="body" :rows="store.data"></slot>
<div v-if="isLoading" class="info-row q-pa-md text-center">

7
src/composables/useCardSize.js Normal file
View File

@ -0,0 +1,7 @@
import { useQuasar } from 'quasar';
export default function() {
const quasar = useQuasar();
return quasar.screen.gt.xs ? 'q-pa-md': 'q-pa-xs';
}

3
src/i18n/en/index.js
View File

@ -82,6 +82,7 @@ export default {
file: 'File',
selectFile: 'Select a file',
copyClipboard: 'Copy on clipboard',
salesPerson: 'SalesPerson',
},
errors: {
statusUnauthorized: 'Access denied',
@ -529,6 +530,8 @@ export default {
ticketId: 'Ticket ID',
customerSummary: 'Customer summary',
claimedTicket: 'Claimed ticket',
saleTracking: 'Sale tracking',
ticketTracking: 'Ticket tracking',
commercial: 'Commercial',
province: 'Province',
zone: 'Zone',

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

@ -82,6 +82,7 @@ export default {
file: 'Fichero',
selectFile: 'Seleccione un fichero',
copyClipboard: 'Copiar en portapapeles',
salesPerson: 'Comercial',
},
errors: {
statusUnauthorized: 'Acceso denegado',
@ -502,7 +503,7 @@ export default {
rma: 'RMA',
development: 'Trazabilidad',
photos: 'Fotos',
log: 'Registros de auditoría',
log: 'Historial',
notes: 'Notas',
action: 'Acción',
},
@ -528,6 +529,8 @@ export default {
ticketId: 'ID ticket',
customerSummary: 'Resumen del cliente',
claimedTicket: 'Ticket reclamado',
saleTracking: 'Líneas preparadas',
ticketTracking: 'Estados del ticket',
commercial: 'Comercial',
province: 'Provincia',
zone: 'Zona',
@ -725,7 +728,7 @@ export default {
create: 'Crear',
summary: 'Resumen',
basicData: 'Datos básicos',
log: 'Registros de auditoría',
log: 'Historial',
},
list: {
parking: 'Parking',
@ -757,7 +760,7 @@ export default {
dueDay: 'Vencimiento',
intrastat: 'Intrastat',
corrective: 'Rectificativa',
log: 'Registros de auditoría',
log: 'Historial',
},
list: {
ref: 'Referencia',

5
src/pages/Claim/Card/ClaimCard.vue
View File

@ -5,6 +5,7 @@ import { useStateStore } from 'stores/useStateStore';
import { useI18n } from 'vue-i18n';
import ClaimDescriptor from './ClaimDescriptor.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import useCardSize from 'src/composables/useCardSize';
const stateStore = useStateStore();
const { t } = useI18n();
@ -28,7 +29,9 @@ const { t } = useI18n();
<QPageContainer>
<QPage>
<VnSubToolbar />
jsegarra marked this conversation as resolved Outdated
jsegarra commented 2024-03-06 05:57:11 +00:00
Outdated
Review
Copy Link

Demasiados remplazos, lo vemos con un composable.
Que ya tengo hecho

Demasiados remplazos, lo vemos con un composable. Que ya tengo hecho
alexm commented 2024-03-06 08:14:17 +00:00
Outdated
Review
Copy Link

Subelo

Subelo
<div class="q-pa-md"><RouterView></RouterView></div>
<div :class="useCardSize()">
<RouterView></RouterView>
</div>
</QPage>
</QPageContainer>
</template>

2
src/pages/Claim/Card/ClaimDescriptor.vue
View File

@ -176,6 +176,7 @@ onMounted(async () => {
color="primary"
:href="salixUrl + 'ticket/' + entity.ticketFk + '/sale-tracking'"
>
<QTooltip>{{ t('claim.card.saleTracking') }}</QTooltip>
</QBtn>
<QBtn
size="md"
@ -183,6 +184,7 @@ onMounted(async () => {
color="primary"
:href="salixUrl + 'ticket/' + entity.ticketFk + '/tracking/index'"
>
<QTooltip>{{ t('claim.card.ticketTracking') }}</QTooltip>
</QBtn>
</QCardActions>
</template>

25
src/pages/Claim/Card/ClaimNotes.vue
View File

@ -1,4 +1,5 @@
<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { useState } from 'src/composables/useState';
import VnNotes from 'src/components/ui/VnNotes.vue';
@ -6,14 +7,15 @@ import VnNotes from 'src/components/ui/VnNotes.vue';
const route = useRoute();
const state = useState();
const user = state.getUser();
const id = route.params.id;
const $props = defineProps({
id: { type: Number, default: null },
addNote: { type: Boolean, default: true },
});
const claimId = computed(() => $props.id || route.params.id);
const claimFilter = {
where: { claimFk: id },
where: { claimFk: claimId.value },
fields: ['created', 'workerFk', 'text'],
include: {
relation: 'worker',
@ -30,19 +32,16 @@ const claimFilter = {
};
const body = {
claimFk: id,
claimFk: claimId.value,
workerFk: user.value.id,
};
</script>
<template>
<div class="column items-center">
<VnNotes
style="overflow-y: scroll"
:add-note="$props.addNote"
:id="id"
url="claimObservations"
:filter="claimFilter"
:body="body"
/>
</div>
<VnNotes
style="overflow-y: auto"
:add-note="$props.addNote"
url="claimObservations"
:filter="claimFilter"
:body="body"
/>
</template>

54
src/pages/Claim/Card/ClaimSummary.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { onMounted, ref, computed, watch } from 'vue';
import { onMounted, ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { toDate, toCurrency } from 'src/filters';
@ -70,7 +70,7 @@ const detailsColumns = ref([
},
{
name: 'description',
label: 'claim.summary.description',
label: 'globals.description',
field: (row) => row.sale.concept,
},
{
@ -194,19 +194,19 @@ function openDialog(dmsId) {
</QChip>
</template>
</VnLv>
<VnLv :label="t('claim.summary.assignedTo')">
<VnLv :label="t('globals.salesPerson')">
<template #value>
<VnUserLink
:name="claim.worker?.user?.nickname"
:worker-id="claim.workerFk"
:name="claim.client?.salesPersonUser?.name"
:worker-id="claim.client?.salesPersonFk"
/>
</template>
</VnLv>
<VnLv :label="t('claim.summary.attendedBy')">
<template #value>
<VnUserLink
:name="claim.client?.salesPersonUser?.name"
:worker-id="claim.client?.salesPersonFk"
:name="claim.worker?.user?.nickname"
:worker-id="claim.workerFk"
/>
</template>
</VnLv>
@ -218,26 +218,37 @@ function openDialog(dmsId) {
/>
</template>
</VnLv>
<VnLv :label="t('claim.summary.returnOfMaterial')" :value="claim.rma" />
<QCheckbox
:label="t('claim.basicData.picked')"
v-model="claim.hasToPickUp"
:disable="true"
/>
</QCard>
<QCard class="vn-three claimVnNotes full-height">
<a class="header header-link" :href="`#/claim/${entityId}/notes`">
<QCard class="vn-three">
<a class="header" :href="`#/claim/${entityId}/notes`">
{{ t('claim.summary.notes') }}
<QIcon name="open_in_new" />
</a>
<ClaimNotes :add-note="false" style="height: 350px" order="created ASC" />
<ClaimNotes
:id="entityId"
:add-note="false"
style="max-height: 300px"
order="created ASC"
/>
</QCard>
<QCard class="vn-two" v-if="salesClaimed.length > 0">
<a class="header header-link" :href="`#/claim/${entityId}/lines`">
{{ t('claim.summary.details') }}
<QIcon name="open_in_new" />
</a>
<QTable :columns="detailsColumns" :rows="salesClaimed" flat>
<QTable
:columns="detailsColumns"
:rows="salesClaimed"
flat
dense
:rows-per-page-options="[0]"
hide-bottom
>
<template #header="props">
<QTr :props="props">
<QTh v-for="col in props.cols" :key="col.name" :props="props">
@ -272,7 +283,15 @@ function openDialog(dmsId) {
{{ t('claim.summary.development') }}
<QIcon name="open_in_new" />
</a>
<QTable :columns="developmentColumns" :rows="developments" flat>
<QTable
:columns="developmentColumns"
:rows="developments"
flat
dense
:rows-per-page-options="[0]"
hide-bottom
>
<template #header="props">
<QTr :props="props">
<QTh v-for="col in props.cols" :key="col.name" :props="props">
@ -390,13 +409,7 @@ function openDialog(dmsId) {
</template>
</CardSummary>
</template>
<style lang="scss">
.claimVnNotes {
.q-card {
max-width: 100%;
}
}
</style>
<style lang="scss" scoped>
.q-dialog__inner--minimized > div {
max-width: 80%;
@ -406,7 +419,6 @@ function openDialog(dmsId) {
flex-direction: row;
flex-wrap: wrap;
gap: 15px;
flex-basis: 30%;
}
.multimedia-container {
flex: 1 0 21%;

6
src/pages/Claim/ClaimList.vue
View File

@ -115,12 +115,6 @@ function navigate(event, id) {
</VnLv>
</template>
<template #actions>
<QBtn
:label="t('components.smartCard.openCard')"
@click.stop="navigate(row.id)"
class="bg-vn-dark"
outline
/>
<QBtn
:label="t('globals.description')"
@click.stop

5
src/pages/Customer/Card/CustomerCard.vue
View File

@ -6,6 +6,7 @@ import CustomerDescriptor from './CustomerDescriptor.vue';
import LeftMenu from 'components/LeftMenu.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import useCardSize from 'src/composables/useCardSize';
const stateStore = useStateStore();
const route = useRoute();
@ -30,7 +31,9 @@ const { t } = useI18n();
<QPageContainer>
<QPage>
<VnSubToolbar />
<div class="q-pa-md"><RouterView></RouterView></div>
<div :class="useCardSize()">
<RouterView></RouterView>
</div>
</QPage>
</QPageContainer>
</template>

5
src/pages/Entry/Card/EntryCard.vue
View File

@ -7,6 +7,7 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import EntryDescriptor from './EntryDescriptor.vue';
import { useStateStore } from 'stores/useStateStore';
import useCardSize from 'src/composables/useCardSize';
const { t } = useI18n();
const stateStore = useStateStore();
@ -33,7 +34,9 @@ const stateStore = useStateStore();
<QPage>
<VnSubToolbar />
<div class="q-pa-md"><RouterView></RouterView></div>
<div :class="useCardSize()">
<RouterView></RouterView>
</div>
</QPage>
</QPageContainer>
</template>

5
src/pages/InvoiceIn/Card/InvoiceInCard.vue
View File

@ -8,6 +8,7 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import { useArrayData } from 'src/composables/useArrayData';
import { onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import useCardSize from 'src/composables/useCardSize';
const stateStore = useStateStore();
const { t } = useI18n();
@ -74,7 +75,9 @@ watch(
<QPageContainer>
<QPage>
<VnSubToolbar />
<div class="q-pa-md"><RouterView></RouterView></div>
<div :class="useCardSize()">
<RouterView></RouterView>
</div>
</QPage>
</QPageContainer>
</template>

5
src/pages/InvoiceOut/Card/InvoiceOutCard.vue
View File

@ -5,6 +5,7 @@ import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
import LeftMenu from 'components/LeftMenu.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import useCardSize from 'src/composables/useCardSize';
const stateStore = useStateStore();
const { t } = useI18n();
@ -28,7 +29,9 @@ const { t } = useI18n();
<QPageContainer>
<QPage>
<VnSubToolbar />
<div class="q-pa-md"><RouterView></RouterView></div>
<div :class="useCardSize()">
<RouterView></RouterView>
</div>
</QPage>
</QPageContainer>
</template>

5
src/pages/Item/Card/ItemCard.vue
View File

@ -4,6 +4,7 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import ItemDescriptor from './ItemDescriptor.vue';
import { useStateStore } from 'stores/useStateStore';
import useCardSize from 'src/composables/useCardSize';
const stateStore = useStateStore();
</script>
@ -19,7 +20,9 @@ const stateStore = useStateStore();
<QPage>
<VnSubToolbar />
<div class="q-pa-md"><RouterView></RouterView></div>
<div :class="useCardSize()">
<RouterView></RouterView>
</div>
</QPage>
</QPageContainer>
</template>

5
src/pages/Supplier/Card/SupplierCard.vue
View File

@ -5,6 +5,7 @@ import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import LeftMenu from 'components/LeftMenu.vue';
import SupplierDescriptor from './SupplierDescriptor.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import useCardSize from 'src/composables/useCardSize';
const stateStore = useStateStore();
const { t } = useI18n();
@ -30,7 +31,9 @@ const { t } = useI18n();
<QPageContainer>
<QPage>
<VnSubToolbar />
<div class="q-pa-md"><RouterView></RouterView></div>
<div :class="useCardSize()">
<RouterView></RouterView>
</div>
</QPage>
</QPageContainer>
</template>

5
src/pages/Ticket/Card/TicketCard.vue
View File

@ -5,6 +5,7 @@ import TicketDescriptor from './TicketDescriptor.vue';
import LeftMenu from 'components/LeftMenu.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import useCardSize from 'src/composables/useCardSize';
const stateStore = useStateStore();
const { t } = useI18n();
@ -29,7 +30,9 @@ const { t } = useI18n();
<QPage>
<VnSubToolbar />
<div class="q-pa-md"><RouterView></RouterView></div>
<div :class="useCardSize()">
<RouterView></RouterView>
</div>
</QPage>
</QPageContainer>
</template>

5
src/pages/Travel/Card/TravelCard.vue
View File

@ -3,6 +3,7 @@ import { useStateStore } from 'stores/useStateStore';
import TravelDescriptor from './TravelDescriptor.vue';
import LeftMenu from 'components/LeftMenu.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import useCardSize from 'src/composables/useCardSize';
const stateStore = useStateStore();
</script>
@ -17,7 +18,9 @@ const stateStore = useStateStore();
<QPageContainer>
<QPage>
<VnSubToolbar />
<div class="q-pa-md"><RouterView></RouterView></div>
<div :class="useCardSize()">
<RouterView></RouterView>
</div>
</QPage>
</QPageContainer>
</template>

5
src/pages/Wagon/Card/WagonCard.vue
View File

@ -3,6 +3,7 @@ import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore';
import { useRoute } from 'vue-router';
import LeftMenu from 'components/LeftMenu.vue';
import useCardSize from 'src/composables/useCardSize';
const stateStore = useStateStore();
const route = useRoute();
@ -17,7 +18,9 @@ const { t } = useI18n();
</QDrawer>
<QPageContainer>
<QPage>
<div class="q-pa-md"><RouterView></RouterView></div>
<div :class="useCardSize()">
<RouterView></RouterView>
</div>
</QPage>
</QPageContainer>
</template>

5
src/pages/Worker/Card/WorkerCard.vue
View File

@ -5,6 +5,7 @@ import WorkerDescriptor from './WorkerDescriptor.vue';
import LeftMenu from 'components/LeftMenu.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import useCardSize from 'src/composables/useCardSize';
const stateStore = useStateStore();
const { t } = useI18n();
@ -29,7 +30,9 @@ const { t } = useI18n();
<QPage>
<VnSubToolbar />
<div class="q-pa-md"><RouterView></RouterView></div>
<div :class="useCardSize()">
<RouterView></RouterView>
</div>
</QPage>
</QPageContainer>
</template>

38
src/router/modules/claim.js
View File

@ -16,10 +16,10 @@ export default {
'ClaimLines',
'ClaimRma',
'ClaimPhotos',
'ClaimLog',
'ClaimNotes',
'ClaimDevelopment',
'ClaimAction',
'ClaimLog',
],
},
children: [
@ -103,6 +103,15 @@ export default {
},
component: () => import('src/pages/Claim/Card/ClaimPhoto.vue'),
},
{
name: 'ClaimNotes',
path: 'notes',
meta: {
title: 'notes',
icon: 'draft',
},
component: () => import('src/pages/Claim/Card/ClaimNotes.vue'),
},
{
name: 'ClaimDevelopment',
path: 'development',
@ -113,24 +122,6 @@ export default {
},
component: () => import('src/pages/Claim/Card/ClaimDevelopment.vue'),
},
{
name: 'ClaimLog',
path: 'log',
meta: {
title: 'log',
icon: 'history',
},
component: () => import('src/pages/Claim/Card/ClaimLog.vue'),
},
{
name: 'ClaimNotes',
path: 'notes',
meta: {
title: 'notes',
icon: 'draft',
},
component: () => import('src/pages/Claim/Card/ClaimNotes.vue'),
},
{
name: 'ClaimAction',
path: 'action',
@ -140,6 +131,15 @@ export default {
},
component: () => import('src/pages/Claim/Card/ClaimAction.vue'),
},
{
name: 'ClaimLog',
path: 'log',
meta: {
title: 'log',
icon: 'history',
},
component: () => import('src/pages/Claim/Card/ClaimLog.vue'),
},
],
},
],