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>

src/components/FormModel.vue

@@ -159,8 +159,8 @@ onBeforeRouteLeave((to, from, next) => {
         quasar.dialog({
             component: VnConfirm,
             componentProps: {
-                title: t('Unsaved changes will be lost'),
+                title: t('globals.unsavedPopup.title'),
-                message: t('Are you sure exit without saving?'),
+                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>

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 { useQuasar } from 'quasar';
-import VnUserLink from '../ui/VnUserLink.vue';
+
+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">

src/components/ui/VnPaginate.vue

@@ -115,8 +115,8 @@ watch(
 );
 
 watch(
-    () => props.url,
+    () => [props.url, props.filter],
-    (url) => fetch({ url })
+    ([url, filter]) => fetch({ url, filter })
 );
 
 const addFilter = async (filter, params) => {

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;
     }

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') },

src/pages/Claim/Card/ClaimNotes.vue

@@ -14,22 +14,24 @@ const $props = defineProps({
 });
 const claimId = computed(() => $props.id || route.params.id);
 
-const claimFilter = {
+const claimFilter = computed(() => {
-    where: { claimFk: claimId.value },
+    return {
-    fields: ['id', 'created', 'workerFk', 'text'],
+        where: { claimFk: claimId.value },
-    include: {
+        fields: ['id', 'created', 'workerFk', 'text'],
-        relation: 'worker',
+        include: {
-        scope: {
+            relation: 'worker',
-            fields: ['id', 'firstName', 'lastName'],
+            scope: {
-            include: {
+                fields: ['id', 'firstName', 'lastName'],
-                relation: 'user',
+                include: {
-                scope: {
+                    relation: 'user',
-                    fields: ['id', 'nickname'],
+                    scope: {
+                        fields: ['id', 'nickname'],
+                    },
                 },
             },
         },
-    },
+    };
-};
+});
 
 const body = {
     claimFk: claimId.value,

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;

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>

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

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"