fixes

resources/js/pages/pages/patient-meetings/notes.vue

@@ -0,0 +1,106 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+const store = useStore();
+const router = useRouter();
+const route = useRoute();
+const patientId = route.params.patient_id;
+const appointmentId = route.params.id;
+const notes = ref([]);
+
+const loadHistoryNotes = async () => {
+    console.log('Calling loadHistoryNotes');
+    store.dispatch('updateIsLoading', true);
+    console.log('Dispatching getHistoryPatientNotes action with', { patient_id: patientId, appointment_id: appointmentId });
+    // try {
+        // console.log('Dispatching getHistoryPatientNotes action with', { patient_id: patientId, appointment_id: appointmentId });
+        await store.dispatch('getHistoryPatientNotes', {
+            patient_id: patientId,
+            appointment_id: appointmentId,
+        });
+        let notesData = store.getters.getPatientNotes;
+        if (Array.isArray(notesData)) {
+            console.log('Fetched notesData:', notesData);
+            const formattedNotes = notesData
+                .filter(data => data.note_type === 'Notes')
+                .map(data => ({
+                    file_url: data.file_url,
+                    note: data.note,
+                    doctor: data.telemedPro.name,
+                    date: formatDateDate(data.created_at),
+                    id: data.id,
+                }))
+                .sort((a, b) => b.id - a.id);
+            notes.value = formattedNotes;
+        } else {
+            console.error("getPatientNotes did not return an array", notesData);
+        }
+    // } catch (error) {
+    //     console.error("Error loading patient notes:", error);
+    // } finally {
+    //     store.dispatch('updateIsLoading', false);
+    // }
+};
+
+onMounted(() => {
+    loadHistoryNotes();
+});
+
+const formatDateDate = (date) => {
+    const messageDate = new Date(date);
+    const options = {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+    };
+    return messageDate.toLocaleDateString('en-US', options).replace(/\//g, '-');
+};
+
+const downloadFile = (fileUrl) => {
+    const link = document.createElement('a');
+    link.href = fileUrl;
+    link.download = 'noteFile.png';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+};
+</script>
+
+<template>
+    <VDialog v-model="store.getters.getIsLoading" width="110" height="150" color="primary">
+        <VCardText style="color: white !important;">
+            <div class="demo-space-x">
+                <VProgressCircular :size="40" color="primary" indeterminate />
+            </div>
+        </VCardText>
+    </VDialog>
+    <VList class="pb-0" lines="two" v-if="notes.length > 0">
+        <template v-for="(p_note, index) in notes" :key="index">
+            <VListItem class="pb-0" border>
+                <VListItemTitle>
+                    <span class="pb-0">{{ p_note.note }}</span>
+                    <span v-if="p_note.file_url" style="font-size: 12px;float: right;">
+                        <a type="button" @click="downloadFile(p_note.file_url)">
+                            <VIcon>mdi-file-image</VIcon>
+                        </a>
+                    </span>
+                    <p class="text-start fs-5 mb-0 pb-0 text-grey">
+                        <small>{{ p_note.doctor }}</small>
+                    </p>
+                    <p class="text-end fs-5 mb-0 pb-0 text-grey"><small>{{ p_note.date }}</small></p>
+                </VListItemTitle>
+            </VListItem>
+            <VDivider v-if="index !== notes.length - 1" />
+        </template>
+    </VList>
+    <template v-else>
+        <VCard>
+            <VAlert border="start" color="#003152" variant="tonal">
+                <div class="text-center">No data found</div>
+            </VAlert>
+        </VCard>
+    </template>
+</template>