134 lines
4.4 KiB
Vue
134 lines
4.4 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
userData: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
})
|
|
import { useStore } from "vuex";
|
|
const store = useStore();
|
|
const notes = ref([]);
|
|
const historyNotes = computed(async () => {
|
|
|
|
let notesData = props.userData.notes_history;
|
|
for (let data of notesData) {
|
|
if (data.note_type == 'Notes') {
|
|
let dataObject = {}
|
|
dataObject.note = data.note
|
|
dataObject.doctor = data.provider_name;
|
|
dataObject.date = formatDateDate(data.note_date)
|
|
dataObject.appointment_id = data.appointment_id
|
|
dataObject.originalDate = new Date(data.note_date)
|
|
//notes.value.push(dataObject)
|
|
}
|
|
}
|
|
notes.value.sort((a, b) => {
|
|
return b.id - a.id;
|
|
});
|
|
|
|
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.userData.notes_history;
|
|
console.log("notesData", notesData);
|
|
for (let data of notesData) {
|
|
|
|
let dataObject = {}
|
|
dataObject.note = data.note
|
|
dataObject.doctor = data.provider_name;
|
|
dataObject.date = formatDateDate(data.note_date)
|
|
dataObject.appointment_id = data.appointment_id
|
|
dataObject.originalDate = new Date(data.note_date)
|
|
notes.value.push(dataObject)
|
|
|
|
}
|
|
notes.value.sort((a, b) => {
|
|
return b.originalDate - a.originalDate;
|
|
});
|
|
console.log("getNotes", notes.value);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<VRow>
|
|
<VCol cols="12" md="4">
|
|
|
|
<VCard class="mb-4">
|
|
<VCardText>
|
|
|
|
|
|
<div class="text-body-2 text-disabled mt-6 mb-4">
|
|
CONTACTS
|
|
</div>
|
|
<div class="d-flex flex-column gap-y-4">
|
|
<div class="d-flex align-center gap-x-2">
|
|
<v-icon size="24">mdi-email-outline</v-icon>
|
|
<div class="font-weight-medium">
|
|
Email :
|
|
</div>
|
|
<div class="text-truncate">
|
|
{{ props.userData.patient_details.email }}
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-center gap-x-2">
|
|
<v-icon size="24">mdi-phone-outline</v-icon>
|
|
<div class="font-weight-medium">
|
|
Phone :
|
|
</div>
|
|
<div class="text-truncate">
|
|
{{ props.userData.patient_details.phone_no }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</VCardText>
|
|
</VCard>
|
|
</VCol>
|
|
<VCol cols="12" md="8">
|
|
<!-- 👉 Activity timeline -->
|
|
<VCard title="Notes">
|
|
<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">
|
|
Provider Name: {{ p_note.doctor }}
|
|
</p>
|
|
</VTimelineItem>
|
|
</template>
|
|
|
|
</VTimeline>
|
|
</VCardText>
|
|
</VCard>
|
|
</VCol>
|
|
</VRow>
|
|
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.card-list {
|
|
--v-card-list-gap: 16px;
|
|
}
|
|
</style>
|