Merge pull request 'refs #6336 feat(claim): improvements' (!288) from 6336-claim_changes_v3 into dev

Reviewed-on: #288
Reviewed-by: Javier Segarra <jsegarra@verdnatura.es>
This commit is contained in:
Alex Moreno 2024-04-19 09:20:55 +00:00
commit dc4de8de7f
11 changed files with 288 additions and 338 deletions

View File

@ -24,6 +24,10 @@ const $props = defineProps({
type: String,
default: '',
},
limit: {
type: Number,
default: 20,
},
saveUrl: {
type: String,
default: null,
@ -76,6 +80,7 @@ defineExpose({
reset,
hasChanges,
saveChanges,
getChanges,
});
async function fetch(data) {
@ -260,6 +265,7 @@ watch(formUrl, async () => {
<template>
<VnPaginate
:url="url"
:limit="limit"
v-bind="$attrs"
@on-fetch="fetch"
:skeleton="false"

View File

@ -6,6 +6,7 @@ import axios from 'axios';
import { useI18n } from 'vue-i18n';
import VnPaginate from './VnPaginate.vue';
import VnUserLink from '../ui/VnUserLink.vue';
import { useState } from 'src/composables/useState';
const $props = defineProps({
url: { type: String, default: null },
@ -13,8 +14,10 @@ const $props = defineProps({
body: { type: Object, default: () => {} },
addNote: { type: Boolean, default: false },
});
const { t } = useI18n();
const noteModal = ref(false);
const state = useState();
const currentUser = ref(state.getUser());
const newNote = ref('');
const vnPaginateRef = ref();
@ -22,98 +25,83 @@ async function insert() {
const body = $props.body;
Object.assign(body, { text: newNote.value });
await axios.post($props.url, body);
vnPaginateRef.value.fetch();
await vnPaginateRef.value.fetch();
newNote.value = '';
}
</script>
<template>
<div class="column items-center full-height full-width">
<VnPaginate
:data-key="$props.url"
:url="$props.url"
order="created DESC"
:limit="20"
:filter="$props.filter"
auto-load
ref="vnPaginateRef"
>
<template #body="{ rows }">
<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"
>
<QCardSection horizontal>
<slot name="picture">
<VnAvatar
:descriptor="false"
:worker-id="note.workerFk"
size="md"
/>
</slot>
<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">
<QBtn color="primary" icon="add" size="lg" round @click="noteModal = true" />
</QPageSticky>
<QDialog v-model="noteModal" @hide="newNote = ''">
<QCard>
<QCardSection>
<QItem class="q-px-none">
<span class="text-primary text-h6 full-width">
<QIcon name="draft" class="q-mr-xs" />
{{ t('Add note') }}
</span>
<QBtn icon="close" flat round dense v-close-popup />
</QItem>
</QCardSection>
<QCardSection>
<QInput
autofocus
type="textarea"
:label="t('Add note here...')"
filled
size="lg"
autogrow
v-model="newNote"
></QInput>
</QCardSection>
<QCardActions class="justify-end q-mr-sm">
<QBtn
<QCard class="q-pa-xs q-mb-xl full-width" v-if="$props.addNote">
<QCardSection horizontal>
<VnAvatar :descriptor="false" :worker-id="1" size="md" />
<div class="full-width row justify-between q-pa-xs">
<VnUserLink :name="t('New note')" :worker-id="currentUser.id" />
{{ t('globals.now') }}
</div>
</QCardSection>
<QCardSection class="q-pa-xs q-my-none q-py-none" horizontal>
<QInput
v-model="newNote"
class="full-width"
type="textarea"
:label="t('Add note here...')"
filled
size="lg"
autogrow
autofocus
@keyup.ctrl.enter.stop="insert"
clearable
>
<template #append
><QBtn
:title="t('Save (ctrl + Enter)')"
icon="save"
color="primary"
flat
:label="t('globals.close')"
color="primary"
v-close-popup
/>
<QBtn
:label="t('globals.save')"
color="primary"
v-close-popup
@click="insert"
/>
</QCardActions>
</QCard>
</QDialog>
</div>
</template>
</QInput>
</QCardSection>
</QCard>
<VnPaginate
:data-key="$props.url"
:url="$props.url"
order="created DESC"
:limit="0"
:filter="$props.filter"
auto-load
ref="vnPaginateRef"
class="show"
v-bind="$attrs"
>
<template #body="{ rows }">
<TransitionGroup name="list" tag="div" class="column items-center full-width">
<QCard
class="q-pa-xs q-mb-sm full-width"
v-for="note in rows"
:key="note.id"
>
<QCardSection horizontal>
<VnAvatar
:descriptor="false"
:worker-id="note.workerFk"
size="md"
/>
<div class="full-width row justify-between q-pa-xs">
<VnUserLink
:name="`${note.worker.user.nickname}`"
:worker-id="note.worker.id"
/>
{{ toDateHour(note.created) }}
</div>
</QCardSection>
<QCardSection class="q-pa-xs q-my-none q-py-none">
{{ note.text }}
</QCardSection>
</QCard>
</TransitionGroup>
</template>
</VnPaginate>
</template>
<style lang="scss" scoped>
.q-card {
@ -128,9 +116,20 @@ async function insert() {
.q-dialog .q-card {
width: 400px;
}
.list-enter-active,
.list-leave-active {
transition: all 1s ease;
}
.list-enter-from,
.list-leave-to {
opacity: 0;
background-color: $primary;
}
</style>
<i18n>
es:
Add note here...: Añadir nota aquí...
Add note: Añadir nota
New note: Nueva nota
Save (ctrl + Enter): Guardar (Ctrl + Intro)
</i18n>

View File

@ -96,9 +96,9 @@ export function useArrayData(key, userOptions) {
});
const { limit } = filter;
hasMoreData.value = response.data.length >= limit;
hasMoreData.value = limit && response.data.length >= limit;
store.hasMoreData = hasMoreData.value;
if (append) {
if (!store.data) store.data = [];
for (const row of response.data) store.data.push(row);

View File

@ -90,6 +90,7 @@ globals:
parkingList: Parkings list
created: Created
worker: Worker
now: Now
errors:
statusUnauthorized: Access denied
statusInternalServerError: An internal server error has ocurred

View File

@ -90,6 +90,7 @@ globals:
parkingList: Listado de parkings
created: Fecha creación
worker: Trabajador
now: Ahora
errors:
statusUnauthorized: Acceso denegado
statusInternalServerError: Ha ocurrido un error interno del servidor

View File

@ -121,11 +121,6 @@ async function fetchMana() {
mana.value = response.data;
}
async function updateQuantity({ id, quantity }) {
if (!id) return;
await axios.patch(`ClaimBeginnings/${id}`, { quantity });
}
async function updateDiscount({ saleFk, discount, canceller }) {
const body = { salesIds: [saleFk], newDiscount: discount };
const claimId = claim.value.ticketFk;
@ -155,6 +150,10 @@ function showImportDialog() {
})
.onOk(() => claimLinesForm.value.reload());
}
function saveWhenHasChanges() {
claimLinesForm.value.getChanges().updates && claimLinesForm.value.onSubmit();
}
</script>
<template>
<Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
@ -181,161 +180,135 @@ function showImportDialog() {
@on-fetch="onFetchClaim"
auto-load
/>
<div class="column items-center">
<div class="list">
<CrudModel
data-key="ClaimLines"
ref="claimLinesForm"
:url="`Claims/${route.params.id}/lines`"
save-url="ClaimBeginnings/crud"
:filter="linesFilter"
@on-fetch="onFetch"
@save-changes="onFetch"
v-model:selected="selected"
:default-save="false"
:default-reset="false"
auto-load
>
<template #body="{ rows }">
<QTable
:columns="columns"
:rows="rows"
:dense="$q.screen.lt.md"
row-key="id"
selection="multiple"
v-model:selected="selected"
:grid="$q.screen.lt.md"
>
<template #body-cell-claimed="{ row, value }">
<QTd auto-width align="right" class="text-primary">
<span>{{ value }}</span>
<QPopupEdit
v-model="row.quantity"
v-slot="scope"
:title="t('Claimed quantity')"
@update:model-value="updateQuantity(row)"
buttons
>
<QInput
v-model="scope.value"
type="number"
dense
autofocus
@keyup.enter="scope.set"
@focus="($event) => $event.target.select()"
/>
</QPopupEdit>
</QTd>
</template>
<template #body-cell-description="{ row, value }">
<QTd auto-width align="right" class="text-primary">
{{ value }}
<ItemDescriptorProxy
:id="row.sale.itemFk"
></ItemDescriptorProxy>
</QTd>
</template>
<template #body-cell-discount="{ row, value, rowIndex }">
<QTd auto-width align="right" class="text-primary">
{{ value }}
<VnDiscount
:quantity="row.quantity"
:price="row.sale.price"
:discount="row.sale.discount"
:mana="mana"
:promise="updateDiscount"
:data="{ saleFk: row.sale.id, rowIndex: rowIndex }"
@on-update="onUpdateDiscount"
/>
</QTd>
</template>
<!-- View for grid mode -->
<template #item="props">
<div
class="q-mb-md col-12 grid-style-transition"
:style="props.selected ? 'transform: scale(0.95);' : ''"
>
<QCard>
<QCardSection>
<QCheckbox v-model="props.selected" />
</QCardSection>
<QSeparator inset />
<QList dense>
<QItem
v-for="column of props.cols"
:key="column.name"
>
<QItemSection>
<QItemLabel caption>
{{ column.label }}
<div class="q-pa-md">
<CrudModel
data-key="ClaimLines"
ref="claimLinesForm"
:url="`Claims/${route.params.id}/lines`"
save-url="ClaimBeginnings/crud"
:filter="linesFilter"
@on-fetch="onFetch"
@save-changes="onFetch"
v-model:selected="selected"
:default-save="false"
:default-reset="false"
auto-load
:limit="0"
>
<template #body="{ rows }">
<QTable
:columns="columns"
:rows="rows"
:dense="$q.screen.lt.md"
row-key="id"
selection="multiple"
v-model:selected="selected"
:grid="$q.screen.lt.md"
>
<template #body-cell-claimed="{ row }">
<QTd auto-width align="right" class="text-primary">
<QInput
v-model="row.quantity"
type="number"
dense
@keyup.enter="saveWhenHasChanges()"
@blur="saveWhenHasChanges()"
/>
</QTd>
</template>
<template #body-cell-description="{ row, value }">
<QTd auto-width align="right" class="text-primary">
{{ value }}
<ItemDescriptorProxy
:id="row.sale.itemFk"
></ItemDescriptorProxy>
</QTd>
</template>
<template #body-cell-discount="{ row, value, rowIndex }">
<QTd auto-width align="right" class="text-primary">
{{ value }}
<VnDiscount
:quantity="row.quantity"
:price="row.sale.price"
:discount="row.sale.discount"
:mana="mana"
:promise="updateDiscount"
:data="{ saleFk: row.sale.id, rowIndex: rowIndex }"
@on-update="onUpdateDiscount"
/>
</QTd>
</template>
<!-- View for grid mode -->
<template #item="props">
<div
class="q-mb-md col-12 grid-style-transition"
:style="props.selected ? 'transform: scale(0.95);' : ''"
>
<QCard>
<QCardSection>
<QCheckbox v-model="props.selected" />
</QCardSection>
<QSeparator inset />
<QList dense>
<QItem
v-for="column of props.cols"
:key="column.name"
>
<QItemSection>
<QItemLabel caption>
{{ column.label }}
</QItemLabel>
</QItemSection>
<QItemSection side>
<template v-if="column.name === 'claimed'">
<QItemLabel class="text-primary">
<QInput
v-model="props.row.quantity"
type="number"
dense
autofocus
@keyup.enter="
saveWhenHasChanges()
"
@blur="saveWhenHasChanges()"
/>
</QItemLabel>
</QItemSection>
<QItemSection side>
<template
v-if="column.name === 'claimed'"
>
<QItemLabel class="text-primary">
{{ column.value }}
<QPopupEdit
v-model="props.row.quantity"
v-slot="scope"
:title="t('Claimed quantity')"
@update:model-value="
updateQuantity(props.row)
"
buttons
>
<QInput
v-model="scope.value"
type="number"
dense
autofocus
@keyup.enter="scope.set"
@focus="
($event) =>
$event.target.select()
"
/>
</QPopupEdit>
</QItemLabel>
</template>
<template
v-else-if="column.name === 'discount'"
>
<QItemLabel class="text-primary">
{{ column.value }}
<VnDiscount
:quantity="props.row.quantity"
:price="props.row.sale.price"
:discount="
props.row.sale.discount
"
:mana="mana"
:promise="updateDiscount"
:data="{
saleFk: props.row.sale.id,
rowIndex: props.rowIndex,
}"
@on-update="onUpdateDiscount"
/>
</QItemLabel>
</template>
<template v-else>
<QItemLabel>
{{ column.value }}
</QItemLabel>
</template>
</QItemSection>
</QItem>
</QList>
</QCard>
</div>
</template>
</QTable>
</template>
</CrudModel>
</div>
</template>
<template
v-else-if="column.name === 'discount'"
>
<QItemLabel class="text-primary">
{{ column.value }}
<VnDiscount
:quantity="props.row.quantity"
:price="props.row.sale.price"
:discount="
props.row.sale.discount
"
:mana="mana"
:promise="updateDiscount"
:data="{
saleFk: props.row.sale.id,
rowIndex: props.rowIndex,
}"
@on-update="onUpdateDiscount"
/>
</QItemLabel>
</template>
<template v-else>
<QItemLabel>
{{ column.value }}
</QItemLabel>
</template>
</QItemSection>
</QItem>
</QList>
</QCard>
</div>
</template>
</QTable>
</template>
</CrudModel>
</div>
<QPageSticky position="bottom-right" :offset="[25, 25]">

View File

@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import FetchData from 'components/FetchData.vue';
import { toDate, toCurrency, toPercentage } from 'filters/index';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import axios from 'axios';
defineEmits([...useDialogPluginComponent.emits]);
@ -118,7 +119,6 @@ function cancel() {
<QBtn icon="close" flat round dense v-close-popup />
</QCardSection>
<QTable
class="my-sticky-header-table"
:columns="columns"
:rows="claimableSales"
row-key="saleFk"
@ -126,7 +126,14 @@ function cancel() {
v-model:selected="selected"
square
flat
/>
>
<template #body-cell-description="{ row, value }">
<QTd auto-width align="right" class="link">
{{ value }}
<ItemDescriptorProxy :id="row.itemFk"></ItemDescriptorProxy>
</QTd>
</template>
</QTable>
<QSeparator />
<QCardActions align="right">
<QBtn :label="t('globals.cancel')" color="primary" flat @click="cancel" />
@ -148,33 +155,6 @@ function cancel() {
}
</style>
<style lang="scss">
.my-sticky-header-table {
height: 400px;
thead tr th {
position: sticky;
z-index: 1;
}
thead tr:first-child th {
/* this is when the loading indicator appears */
top: 0;
}
&.q-table--loading thead tr:last-child th {
/* height of all previous header rows */
top: 48px;
}
// /* prevent scrolling behind sticky top row on focus */
tbody {
/* height of all previous header rows */
scroll-margin-top: 48px;
}
}
</style>
<i18n>
es:
Available sales lines: Líneas de venta disponibles

View File

@ -38,10 +38,11 @@ const body = {
</script>
<template>
<VnNotes
style="overflow-y: auto"
:add-note="$props.addNote"
url="claimObservations"
:add-note="$props.addNote"
:filter="claimFilter"
:body="body"
v-bind="$attrs"
style="overflow-y: auto"
/>
</template>

View File

@ -222,8 +222,8 @@ function openDialog(dmsId) {
</template>
</VnLv>
<VnLv
:label="t('claim.summary.pickup')"
:value="t(`claim.summary.${claim.pickup}`)"
:label="t('claim.basicData.pickup')"
:value="t(`claim.basicData.${claim.pickup}`)"
/>
</QCard>
<QCard class="vn-three">
@ -280,6 +280,48 @@ function openDialog(dmsId) {
</template>
</QTable>
</QCard>
<QCard class="vn-two" v-if="claimDms.length > 0">
<VnTitle
:url="`#/claim/${entityId}/photos`"
:text="t('claim.summary.photos')"
/>
<div class="container">
<div
class="multimedia-container"
v-for="(media, index) of claimDms"
:key="index"
>
<div class="relative-position">
<QIcon
name="play_circle"
color="primary"
size="xl"
class="absolute-center zindex"
v-if="media.isVideo"
@click.stop="openDialog(media.dmsFk)"
>
<QTooltip>Video</QTooltip>
</QIcon>
<QCard class="multimedia relative-position">
<QImg
:src="media.url"
class="rounded-borders cursor-pointer fit"
@click="openDialog(media.dmsFk)"
v-if="!media.isVideo"
>
</QImg>
<video
:src="media.url"
class="rounded-borders cursor-pointer fit"
muted="muted"
v-if="media.isVideo"
@click="openDialog(media.dmsFk)"
/>
</QCard>
</div>
</div>
</div>
</QCard>
<QCard class="vn-two" v-if="developments.length > 0">
<VnTitle
:url="claimUrl + 'development'"
@ -302,49 +344,6 @@ function openDialog(dmsId) {
</template>
</QTable>
</QCard>
<QCard class="vn-max" v-if="claimDms.length > 0">
<VnTitle
:url="`#/claim/${entityId}/photos`"
:text="t('claim.summary.photos')"
/>
<div class="container">
<div
class="multimedia-container"
v-for="(media, index) of claimDms"
:key="index"
>
<div class="relative-position">
<QIcon
name="play_circle"
color="primary"
size="xl"
class="absolute-center zindex"
v-if="media.isVideo"
@click.stop="openDialog(media.dmsFk)"
>
<QTooltip>Video</QTooltip>header
</QIcon>
<QCard class="multimedia relative-position">
<QImg
:src="media.url"
class="rounded-borders cursor-pointer fit"
@click="openDialog(media.dmsFk)"
v-if="!media.isVideo"
>
</QImg>
<video
:src="media.url"
class="rounded-borders cursor-pointer fit"
muted="muted"
v-if="media.isVideo"
@click="openDialog(media.dmsFk)"
/>
</QCard>
</div>
</div>
</div>
</QCard>
<QCard class="vn-max">
<VnTitle :url="claimUrl + 'action'" :text="t('claim.summary.actions')" />
<div id="slider-container" class="q-px-xl q-py-md">

View File

@ -28,11 +28,5 @@ const body = {
</script>
<template>
<VnNotes
style="overflow-y: auto"
:add-note="{ type: Boolean, default: true }"
url="WorkerObservations"
:filter="filter"
:body="body"
/>
<VnNotes :add-note="true" url="WorkerObservations" :filter="filter" :body="body" />
</template>

View File

@ -1,4 +1,3 @@
/// <reference types="cypress" />
describe('ClaimNotes', () => {
beforeEach(() => {
cy.login('developer');
@ -7,11 +6,8 @@ describe('ClaimNotes', () => {
it('should add a new note', () => {
const message = 'This is a new message.';
cy.get('.q-page-sticky > div > button').click();
cy.get('.q-dialog .q-card__section:nth-child(2)').type(message);
cy.get('.q-card__actions button:nth-child(2)').click();
cy.get('.q-card .q-card__section:nth-child(2)')
.eq(0)
.should('have.text', message);
cy.get('.q-textarea').type(message);
cy.get('.q-field__append > .q-btn > .q-btn__content > .q-icon').click(); //save
cy.get(':nth-child(1) > .q-card__section--vert').should('have.text', message);
});
});