Merge pull request 'fix(claim): small details' (!582) from 6336-claim-v6 into test

Reviewed-on: verdnatura/salix-front#582 Reviewed-by: Carlos Satorres <carlossa@verdnatura.es>
2024-08-01 08:55:07 +00:00 · 2024-08-01 08:55:07 +00:00 · da85d7d2a0
parent 5f6eeb77ea fa60467e76
commit da85d7d2a0
10 changed files with 70 additions and 44 deletions
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@ -159,8 +159,8 @@ onBeforeRouteLeave((to, from, next) => {
        quasar.dialog({
            component: VnConfirm,
            componentProps: {
-                title: t('Unsaved changes will be lost'),
-                message: t('Are you sure exit without saving?'),
+                title: t('globals.unsavedPopup.title'),
+                message: t('globals.unsavedPopup.subtitle'),
                promise: () => next(),
            },
        });
@ -356,8 +356,3 @@ defineExpose({
    padding: 32px;
 }
 </style>
-<i18n>
-es:
-    Unsaved changes will be lost: Los cambios que no haya guardado se perderán
-    Are you sure exit without saving?: ¿Seguro que quiere salir sin guardar?
-</i18n>
--- a/src/components/ui/VnNotes.vue
+++ b/src/components/ui/VnNotes.vue
@ -1,13 +1,18 @@
 <script setup>
-import VnAvatar from 'src/components/ui/VnAvatar.vue';
-import { toDateHourMin } from 'src/filters';
-import { ref } from 'vue';
 import axios from 'axios';
+import { ref } from 'vue';
+import { onBeforeRouteLeave } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import VnPaginate from './VnPaginate.vue';
-import VnUserLink from '../ui/VnUserLink.vue';
+import { useQuasar } from 'quasar';
+
+import { toDateHourMin } from 'src/filters';
 import { useState } from 'src/composables/useState';

+import VnPaginate from 'components/ui/VnPaginate.vue';
+import VnUserLink from 'components/ui/VnUserLink.vue';
+import VnConfirm from 'components/ui/VnConfirm.vue';
+import VnAvatar from 'components/ui/VnAvatar.vue';
+
 const $props = defineProps({
    url: { type: String, default: null },
    filter: { type: Object, default: () => {} },
@ -17,6 +22,7 @@ const $props = defineProps({

 const { t } = useI18n();
 const state = useState();
+const quasar = useQuasar();
 const currentUser = ref(state.getUser());
 const newNote = ref('');
 const vnPaginateRef = ref();
@ -33,6 +39,19 @@ async function insert() {
    await vnPaginateRef.value.fetch();
    newNote.value = '';
 }
+
+onBeforeRouteLeave((to, from, next) => {
+    if (newNote.value)
+        quasar.dialog({
+            component: VnConfirm,
+            componentProps: {
+                title: t('globals.unsavedPopup.title'),
+                message: t('globals.unsavedPopup.subtitle'),
+                promise: () => next(),
+            },
+        });
+    else next();
+});
 </script>
 <template>
    <QCard class="q-pa-xs q-mb-xl full-width" v-if="$props.addNote">
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@ -115,8 +115,8 @@ watch(
 );

 watch(
-    () => props.url,
-    (url) => fetch({ url })
+    () => [props.url, props.filter],
+    ([url, filter]) => fetch({ url, filter })
 );

 const addFilter = async (filter, params) => {
--- a/src/css/app.scss
+++ b/src/css/app.scss
@ -194,13 +194,6 @@ select:-webkit-autofill {
    justify-content: center;
 }

-.q-card,
-.q-table,
-.q-table__bottom,
-.q-drawer {
-    background-color: var(--vn-section-color);
-}
-
 input[type='number'] {
    -moz-appearance: textfield;
 }
@ -254,6 +247,16 @@ input::-webkit-inner-spin-button {
        white-space: nowrap;
        text-overflow: ellipsis;
    }
+    tr {
+        th {
+            font-size: 11pt;
+        }
+        td {
+            font-size: 11pt;
+            border-top: 1px solid var(--vn-page-color);
+            border-collapse: collapse;
+        }
+    }
    .shrink {
        max-width: 75px;
    }
--- a/src/pages/Claim/Card/ClaimAction.vue
+++ b/src/pages/Claim/Card/ClaimAction.vue
@ -31,7 +31,7 @@ const destinationTypes = ref([]);
 const totalClaimed = ref(null);
 const DEFAULT_MAX_RESPONSABILITY = 5;
 const DEFAULT_MIN_RESPONSABILITY = 1;
-const arrayData = useArrayData('claimData');
+const arrayData = useArrayData('Claim');
 const marker_labels = [
    { value: DEFAULT_MIN_RESPONSABILITY, label: t('claim.company') },
    { value: DEFAULT_MAX_RESPONSABILITY, label: t('claim.person') },
--- a/src/pages/Claim/Card/ClaimNotes.vue
+++ b/src/pages/Claim/Card/ClaimNotes.vue
@ -14,22 +14,24 @@ const $props = defineProps({
 });
 const claimId = computed(() => $props.id || route.params.id);

-const claimFilter = {
-    where: { claimFk: claimId.value },
-    fields: ['id', 'created', 'workerFk', 'text'],
-    include: {
-        relation: 'worker',
-        scope: {
-            fields: ['id', 'firstName', 'lastName'],
-            include: {
-                relation: 'user',
-                scope: {
-                    fields: ['id', 'nickname'],
+const claimFilter = computed(() => {
+    return {
+        where: { claimFk: claimId.value },
+        fields: ['id', 'created', 'workerFk', 'text'],
+        include: {
+            relation: 'worker',
+            scope: {
+                fields: ['id', 'firstName', 'lastName'],
+                include: {
+                    relation: 'user',
+                    scope: {
+                        fields: ['id', 'nickname'],
+                    },
                },
            },
        },
-    },
-};
+    };
+});

 const body = {
    claimFk: claimId.value,
--- a/src/pages/Claim/Card/ClaimPhoto.vue
+++ b/src/pages/Claim/Card/ClaimPhoto.vue
@ -1,6 +1,6 @@
 <script setup>
 import axios from 'axios';
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useQuasar } from 'quasar';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
@ -22,10 +22,8 @@ const claimDms = ref([
    },
 ]);
 const client = ref({});
-
 const inputFile = ref();
 const files = ref({});
-
 const spinnerRef = ref();
 const claimDmsRef = ref();
 const dmsType = ref({});
@ -58,6 +56,14 @@ const claimDmsFilter = ref({
 const multimediaDialog = ref();
 const multimediaSlide = ref();

+watch(
+    () => router.currentRoute.value.params.id,
+    () => {
+        claimDmsFilter.value.where.id = router.currentRoute.value.params.id;
+        claimDmsRef.value.fetch();
+    }
+);
+
 function openDialog(dmsId) {
    multimediaSlide.value = dmsId;
    multimediaDialog.value = true;
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@ -279,7 +279,7 @@ async function changeState(value) {
                <ClaimNotes
                    :id="entityId"
                    :add-note="false"
-                    class="max-container-height"
+                    style="max-height: 300px"
                    order="created ASC"
                />
            </QCard>
@ -330,7 +330,7 @@ async function changeState(value) {
                <QTable
                    :columns="detailsColumns"
                    :rows="salesClaimed"
-                    flat
+                    separator="horizontal"
                    dense
                    :rows-per-page-options="[0]"
                    hide-bottom
@ -344,7 +344,7 @@ async function changeState(value) {
                    </template>
                    <template #body="props">
                        <QTr :props="props">
-                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                            <QTd v-for="col in props.cols" :key="col.name" :props="props">
                                <span v-if="col.name != 'description'">{{
                                    t(col.value)
                                }}</span>
@ -359,7 +359,7 @@ async function changeState(value) {
                                    :id="props.row.sale.itemFk"
                                    :sale-fk="props.row.saleFk"
                                ></ItemDescriptorProxy>
-                            </QTh>
+                            </QTd>
                        </QTr>
                    </template>
                </QTable>
@ -384,7 +384,7 @@ async function changeState(value) {
                    <template #body-cell-worker="props">
                        <QTd :props="props" class="link">
                            {{ props.value }}
-                            <WorkerDescriptorProxy :id="props.row.worker.id" />
+                            <WorkerDescriptorProxy :id="props.row.worker?.id" />
                        </QTd>
                    </template>
                </QTable>
--- a/src/pages/Claim/ClaimFilter.vue
+++ b/src/pages/Claim/ClaimFilter.vue
@ -100,6 +100,7 @@ defineExpose({ states });
                    url="Items/withName"
                    option-value="id"
                    option-label="name"
+                    :use-like="false"
                    sort-by="id DESC"
                    outlined
                    rounded
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@ -125,7 +125,7 @@ const STATE_COLOR = {
    <VnTable
        data-key="ClaimList"
        url="Claims/filter"
-        :order="['priority ASC', 'created DESC']"
+        :order="['priority ASC', 'created ASC']"
        :columns="columns"
        redirect="claim"
        :right-search="false"