refs #6420 importClaimNotes

src/pages/Claim/Card/ClaimSummary.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue';
+import { onMounted, ref, computed, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toDate, toCurrency } from 'src/filters';
@@ -9,6 +9,7 @@ import { getUrl } from 'src/composables/getUrl';
 import { useSession } from 'src/composables/useSession';
 import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
+import ClaimNotes from 'src/pages/Claim/Card/ClaimNotes.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -26,12 +27,35 @@ const entityId = computed(() => $props.id || route.params.id);
 
 const claimUrl = ref();
 const salixUrl = ref();
+const claimDmsRef = ref();
+const claimDmsFilter = ref({
+    include: [
+        {
+            relation: 'dms',
+        },
+    ],
+    where: { claimFk: entityId.value },
+});
+const claimObservationsRef = ref();
+const claimObservationsFilter = ref({
+    include: [
+        {
+            relation: 'observation',
+        },
+    ],
+    where: { claimFk: entityId.value },
+});
 
 onMounted(async () => {
     salixUrl.value = await getUrl('');
     claimUrl.value = salixUrl.value + `claim/${entityId.value}/`;
 });
 
+watch(entityId, async (id) => {
+    claimDmsFilter.value.where = { claimFk: id };
+    await claimDmsRef.value.fetch();
+});
+
 const detailsColumns = ref([
     {
         name: 'item',
@@ -131,18 +155,9 @@ const developmentColumns = ref([
 const claimDms = ref([]);
 const multimediaDialog = ref();
 const multimediaSlide = ref();
-const claimDmsFilter = ref({
-    include: [
-        {
-            relation: 'dms',
-        },
-    ],
-    where: { claimFk: entityId.value },
-});
 
 function setClaimDms(data) {
-    if (!data) return;
-
+    claimDms.value = [];
     data.forEach((media) => {
         claimDms.value.push({
             isVideo: media.dms.contentType == 'video/mp4',
@@ -152,6 +167,11 @@ function setClaimDms(data) {
     });
 }
 
+const claimObservations = ref([]);
+function setClaimObservations(data) {
+    claimObservations.value = [];
+}
+
 function openDialog(dmsId) {
     multimediaSlide.value = dmsId;
     multimediaDialog.value = true;
@@ -165,6 +185,7 @@ function openDialog(dmsId) {
         @on-fetch="(data) => setClaimDms(data)"
         limit="20"
         auto-load
+        ref="claimDmsRef"
     />
     <CardSummary ref="summary" :url="`Claims/${entityId}/getSummary`">
         <template #header="{ entity: { claim } }">
@@ -209,25 +230,14 @@ function openDialog(dmsId) {
                     {{ t('claim.summary.notes') }}
                     <QIcon name="open_in_new" color="primary" />
                 </a>
-                <!-- Use VnNotes and maybe VirtualScroll-->
+                <ClaimNotes />
+                <QVirtualScroll :items="observations" separator> </QVirtualScroll>
             </QCard>
             <QCard class="vn-max" v-if="salesClaimed.length > 0">
                 <a class="header" :href="`#/claim/${entityId}/notes`">
                     {{ t('claim.summary.details') }}
                     <QIcon name="open_in_new" color="primary" />
                 </a>
-                <q-virtual-scroll
-                    :scroll-target="scrollTarget"
-                    :items="heavyList"
-                    separator
-                    v-slot="{ item, index }"
-                >
-                    <q-item :key="index" dense>
-                        <q-item-section>
-                            <q-item-label> #{{ index }} - {{ item.label }} </q-item-label>
-                        </q-item-section>
-                    </q-item>
-                </q-virtual-scroll>
                 <QTable :columns="detailsColumns" :rows="salesClaimed" flat>
                     <template #header="props">
                         <QTr :props="props">