127 lines
4.4 KiB
Vue
127 lines
4.4 KiB
Vue
<script setup>
|
|
import store from '@/store';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const props = defineProps({
|
|
orderData: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const notes = ref([]);
|
|
const historyNotes = computed(async () => {
|
|
|
|
let notesData = props.orderData.appointment_notes;
|
|
console.log("notesData", notesData);
|
|
for (let data of notesData) {
|
|
if (data.note_type == 'Notes') {
|
|
let dataObject = {}
|
|
dataObject.note = data.note
|
|
dataObject.doctor = props.orderData.appointment_details.provider_name;
|
|
dataObject.date = formatDateDate(data.created_at)
|
|
dataObject.id = data.id
|
|
//notes.value.push(dataObject)
|
|
}
|
|
}
|
|
notes.value.sort((a, b) => {
|
|
return b.id - a.id;
|
|
});
|
|
console.log("getNotes", notes.value);
|
|
store.dispatch('updateIsLoading', false)
|
|
return notes.value
|
|
});
|
|
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, '-');
|
|
};
|
|
onMounted(async () => {
|
|
let notesData = props.orderData.appointment_notes;
|
|
console.log("notesData", notesData);
|
|
for (let data of notesData) {
|
|
if (data.note_type == 'Notes') {
|
|
let dataObject = {}
|
|
dataObject.note = data.note
|
|
dataObject.doctor = props.orderData.appointment_details.provider_name;
|
|
dataObject.date = formatDateDate(data.created_at)
|
|
dataObject.id = data.id
|
|
notes.value.push(dataObject)
|
|
}
|
|
}
|
|
notes.value.sort((a, b) => {
|
|
return b.id - a.id;
|
|
});
|
|
console.log("getNotes", notes.value);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<VDialog v-model="store.getters.getIsLoading" width="110" height="150" color="primary">
|
|
<VCardText class="" style="color: white !important;">
|
|
<div class="demo-space-x">
|
|
<VProgressCircular :size="40" color="primary" indeterminate />
|
|
</div>
|
|
</VCardText>
|
|
</VDialog>
|
|
<VCard title="Notes" v-if="notes.length > 0">
|
|
<VCardText>
|
|
<VTimeline truncate-line="both" align="start" side="end" line-inset="10" line-color="primary"
|
|
density="compact" class="v-timeline-density-compact">
|
|
|
|
<template v-if="historyNotes">
|
|
<VTimelineItem dot-color="yellow" size="x-small" v-for="(p_note, index) of notes" :key="index">
|
|
<div class="d-flex justify-space-between align-center mb-3">
|
|
<span class="app-timeline-title">{{ p_note.note }}</span>
|
|
<span class="app-timeline-meta">{{ p_note.date }}</span>
|
|
</div>
|
|
<p class="app-timeline-text mb-0">
|
|
{{ p_note.doctor }}
|
|
</p>
|
|
</VTimelineItem>
|
|
</template>
|
|
|
|
</VTimeline>
|
|
</VCardText>
|
|
|
|
</VCard>
|
|
|
|
<VCard v-else>
|
|
<VAlert border="start" color="rgb(var(--v-theme-yellow-theme-button))" variant="tonal">
|
|
<div class="text-center">No data found</div>
|
|
</VAlert>
|
|
</VCard>
|
|
|
|
<!-- <VList class="pb-0" lines="two" v-if="historyNotes">
|
|
<template v-if="notes.length > 0" v-for="(p_note, index) of notes" :key="index">
|
|
<VListItem class="pb-0" border>
|
|
<VListItemTitle>
|
|
<span class="pb-0">{{ p_note.note }}</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>
|
|
<template v-else>
|
|
<VCard>
|
|
<VAlert border="start" color="rgb(var(--v-theme-yellow))" variant="tonal">
|
|
<div class="text-center">No data found</div>
|
|
</VAlert>
|
|
|
|
</VCard>
|
|
</template>
|
|
</VList> -->
|
|
</template>
|