129 lines
3.5 KiB
Vue
129 lines
3.5 KiB
Vue
<script setup>
|
|
import { 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 props = defineProps({
|
|
notesData: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
|
|
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 = async (fileUrl, fileName = 'downloadedFile.png') => {
|
|
try {
|
|
const response = await fetch(fileUrl);
|
|
if (!response.ok) throw new Error('Network response was not ok');
|
|
const blob = await response.blob();
|
|
const link = document.createElement('a');
|
|
const url = window.URL.createObjectURL(blob);
|
|
link.href = url;
|
|
link.download = fileName;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
window.URL.revokeObjectURL(url);
|
|
document.body.removeChild(link);
|
|
} catch (error) {
|
|
console.error('Download failed', error);
|
|
}
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
|
|
|
|
<VCard title="Notes">
|
|
<VCardText>
|
|
<VTimeline
|
|
side="end"
|
|
align="start"
|
|
line-inset="8"
|
|
truncate-line="both"
|
|
density="compact"
|
|
>
|
|
|
|
<!-- SECTION Timeline Item: Flight -->
|
|
|
|
<template v-for="(p_note, index) in props.notesData.patientNotes" :key="index" v-if="props.notesData.patientNotes.length>0">
|
|
<VTimelineItem
|
|
dot-color="primary"
|
|
size="x-small"
|
|
>
|
|
<!-- 👉 Header -->
|
|
<div class="d-flex justify-space-between align-center gap-2 flex-wrap">
|
|
<span class="app-timeline-title" v-if="p_note.note_type=='Notes'">
|
|
{{p_note.note}}
|
|
</span>
|
|
<span class="app-timeline-title" v-if="p_note.note_type == 'file'">
|
|
|
|
<VIcon>ri-attachment-2</VIcon> <button @click="downloadFile(p_note.note,'noteFile.png')">Download Image</button>
|
|
|
|
</span>
|
|
<span class="app-timeline-meta">{{ formatDateDate(p_note.created_at) }}</span>
|
|
<!-- <span></span> -->
|
|
</div>
|
|
|
|
<!-- 👉 Content -->
|
|
<div class="app-timeline-text mb-1">
|
|
<router-link
|
|
:to="{ name: 'admin-provider-profile', params: { id: p_note.provider_id } }"
|
|
class=""
|
|
>
|
|
<span class="">{{ p_note.provider_name }}</span>
|
|
</router-link>
|
|
|
|
<VIcon
|
|
size="20"
|
|
icon="tabler-arrow-right"
|
|
class="mx-2 flip-in-rtl"
|
|
/>
|
|
<!-- <span>Heathrow Airport, London</span> -->
|
|
</div>
|
|
|
|
<!-- <p class="app-timeline-meta mb-2">
|
|
6:30 AM
|
|
</p> -->
|
|
|
|
<!-- <div class="app-timeline-text d-flex align-center gap-2">
|
|
<div>
|
|
<VImg
|
|
:src="pdf"
|
|
:width="22"
|
|
/>
|
|
</div>
|
|
|
|
<span>booking-card.pdf</span>
|
|
</div> -->
|
|
</VTimelineItem>
|
|
</template>
|
|
|
|
|
|
|
|
<!-- !SECTION -->
|
|
|
|
<!-- !SECTION -->
|
|
</VTimeline>
|
|
</VCardText>
|
|
</VCard>
|
|
</template>
|