initial commit
This commit is contained in:
Inshal
133
resources/js/pages/provider/patient-profile/About.vue
Normal file
133
resources/js/pages/provider/patient-profile/About.vue
Normal file
@@ -0,0 +1,133 @@
|
||||
<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>
|
||||
@@ -0,0 +1,85 @@
|
||||
<script setup>
|
||||
import coverImg from "@images/pages/membershipBanner.jpg";
|
||||
import { onMounted } from "vue";
|
||||
import { useStore } from "vuex";
|
||||
const store = useStore();
|
||||
const profileHeaderData = ref(null)
|
||||
const props = defineProps({
|
||||
userData: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
onMounted(async () => {
|
||||
store.dispatch("updateIsLoading", true);
|
||||
profileHeaderData.value = props.userData;
|
||||
console.log('profileHeaderData', profileHeaderData)
|
||||
store.dispatch("updateIsLoading", false);
|
||||
});
|
||||
</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 v-if="profileHeaderData">
|
||||
<VImg :src="coverImg" min-height="125" max-height="250" cover />
|
||||
|
||||
<VCardText class="d-flex align-bottom flex-sm-row flex-column justify-center gap-x-6">
|
||||
<div class="d-flex h-0">
|
||||
<VAvatar rounded size="130" :image="profileHeaderData.profile_picture"
|
||||
class="user-profile-avatar mx-auto">
|
||||
<VImg :src="profileHeaderData.profile_picture" height="120" width="120" />
|
||||
</VAvatar>
|
||||
</div>
|
||||
|
||||
<div class="user-profile-info w-100 mt-16 pt-6 pt-sm-0 mt-sm-0">
|
||||
<h4 class="text-h4 text-center text-sm-start mb-2">
|
||||
{{ profileHeaderData.first_name + ' ' + profileHeaderData.last_name }}
|
||||
</h4>
|
||||
|
||||
<div class="d-flex align-center justify-center justify-sm-space-between flex-wrap gap-4">
|
||||
<div class="d-flex flex-wrap justify-center justify-sm-start flex-grow-1 gap-6">
|
||||
<div class="d-flex align-center gap-x-2">
|
||||
<VIcon size="24" icon="ri-palette-line" />
|
||||
<div class="text-body-1 font-weight-medium">
|
||||
{{ profileHeaderData.marital_status }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center gap-x-2">
|
||||
<VIcon size="24" icon="ri-calendar-line" />
|
||||
<div class="text-body-1 font-weight-medium">
|
||||
{{ profileHeaderData.dob }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-center gap-x-2">
|
||||
<VIcon size="24" icon="ri-map-pin-line" />
|
||||
<div class="text-body-1 font-weight-medium">
|
||||
{{ profileHeaderData.city + ',' + profileHeaderData.country }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.user-profile-avatar {
|
||||
border: 5px solid rgb(var(--v-theme-surface));
|
||||
background-color: rgb(var(--v-theme-surface)) !important;
|
||||
inset-block-start: -3rem;
|
||||
|
||||
.v-img__img {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,370 @@
|
||||
<script setup>
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useStore } from "vuex";
|
||||
const store = useStore();
|
||||
const props = defineProps({
|
||||
orderData: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const itemsPrescriptions = ref([]);
|
||||
// const patientId = route.params.patient_id;
|
||||
const prescriptionLoaded = ref(false)
|
||||
const doctorName = ref('');
|
||||
const prescription = computed(async () => {
|
||||
await fetchPrescriptions()
|
||||
return prescriptionLoaded.value ? itemsPrescriptions.value : null
|
||||
})
|
||||
const show = ref(false)
|
||||
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
let prescriptions = props.orderData.prescriptions;
|
||||
console.log('props.orderData', props.orderData.prescriptions)
|
||||
itemsPrescriptions.value = prescriptions
|
||||
});
|
||||
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 getStatusColor = (status) => {
|
||||
switch (status) {
|
||||
case 'pending':
|
||||
return 'warning'; // Use Vuetify's warning color (typically yellow)
|
||||
case 'shipped':
|
||||
return '#45B8AC'; // Use Vuetify's primary color (typically blue)
|
||||
case 'delivered':
|
||||
return 'green';
|
||||
case 'returned':
|
||||
return 'red';
|
||||
case 'results':
|
||||
return 'blue';
|
||||
default:
|
||||
return 'grey'; // Use Vuetify's grey color for any other status
|
||||
}
|
||||
};
|
||||
const toggleShow = () => {
|
||||
show.value = !show.value
|
||||
}
|
||||
const statusColor = (appointment_status) => {
|
||||
console.log(appointment_status)
|
||||
switch (appointment_status.toLowerCase()) {
|
||||
case 'pending': return 'orange'
|
||||
case 'confirmed': return 'green'
|
||||
case 'cancelled': return 'red'
|
||||
default: return 'grey'
|
||||
}
|
||||
}
|
||||
const formatDate = (dateString) => {
|
||||
return new Date(dateString).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
})
|
||||
}
|
||||
|
||||
const formatTime = (dateString) => {
|
||||
return new Date(dateString).toLocaleTimeString('en-US', {
|
||||
hour: 'numeric',
|
||||
minute: 'numeric'
|
||||
})
|
||||
}
|
||||
|
||||
const getImageUrl = (prescriptionName) => {
|
||||
// This is a placeholder function. In a real application, you'd have a way to map prescription names to image URLs
|
||||
return `https://picsum.photos/500/300?random=${prescriptionName.replace(/\s+/g, '')}`
|
||||
}
|
||||
</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>
|
||||
|
||||
<template v-if="itemsPrescriptions.length > 0">
|
||||
<v-container fluid>
|
||||
|
||||
|
||||
<v-row>
|
||||
<v-col v-for="prescription in itemsPrescriptions" :key="prescription.prescription_id" cols="12" md="4">
|
||||
<v-card class="mx-auto mb-4" elevation="4" hover>
|
||||
<v-img height="200"
|
||||
src="https://cdn.pixabay.com/photo/2016/11/23/15/03/medication-1853400_1280.jpg"
|
||||
class="white--text align-end" gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)">
|
||||
<v-card-title class="text-h5" style="color: #fff;">{{ prescription.prescription_name
|
||||
}}</v-card-title>
|
||||
</v-img>
|
||||
|
||||
<v-card-text>
|
||||
|
||||
|
||||
<div class="my-4 text-subtitle-1">
|
||||
|
||||
{{ prescription.prescription_price }}
|
||||
</div>
|
||||
|
||||
<v-chip :color="getStatusColor(prescription.status)" text-color="white" small class="mr-2">
|
||||
{{ prescription.status }}
|
||||
</v-chip>
|
||||
|
||||
<v-chip color="blue-grey" text-color="white" small>
|
||||
Order ID: {{ prescription.order_id }}
|
||||
</v-chip>
|
||||
</v-card-text>
|
||||
|
||||
<v-divider class="mx-4"></v-divider>
|
||||
|
||||
<v-card-text>
|
||||
<v-row dense>
|
||||
<v-col cols="6">
|
||||
<v-icon small color="rgb(var(--v-theme-yellow))">mdi-pill</v-icon>
|
||||
<span class="ml-1">Dosage:{{ prescription.dosage }}</span>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<v-icon small color="rgb(var(--v-theme-yellow))">mdi-bottle-tonic</v-icon>
|
||||
<span class="ml-1">Quantity:{{ prescription.quantity }}</span>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<v-icon small color="rgb(var(--v-theme-yellow))">mdi-calendar</v-icon>
|
||||
<span class="ml-1">{{ formatDate(prescription.prescription_date) }}</span>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<v-icon small color="rgb(var(--v-theme-yellow))">mdi-clock-outline</v-icon>
|
||||
<span class="ml-1">{{ formatTime(prescription.prescription_date) }}</span>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-btn color="rgb(var(--v-theme-yellow-theme-button))" text>
|
||||
More Details
|
||||
</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn icon @click="prescription.show = !prescription.show">
|
||||
<v-icon color="rgb(var(--v-theme-yellow-theme-button))">{{ prescription.show ?
|
||||
'mdi-chevron-up' :
|
||||
'mdi-chevron-down'
|
||||
}}</v-icon>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
|
||||
<v-expand-transition>
|
||||
<div v-show="prescription.show">
|
||||
<v-divider></v-divider>
|
||||
<v-card-text>
|
||||
<v-row dense>
|
||||
<v-col cols="12">
|
||||
<strong>Provider:</strong> {{ prescription.name }}
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<strong>Brand:</strong> {{ prescription.brand }}
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<strong>From:</strong> {{ prescription.from }}
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<strong>Direction One:</strong> {{ prescription.direction_one }}
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<strong>Direction Two:</strong> {{ prescription.direction_two }}
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<strong>Refill Quantity:</strong> {{ prescription.refill_quantity }}
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<strong>Direction Quantity:</strong> {{ prescription.direction_quantity }}
|
||||
</v-col>
|
||||
<v-col cols="12" v-if="prescription.comments">
|
||||
<strong>Comments:</strong> {{ prescription.comments }}
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</div>
|
||||
</v-expand-transition>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-container>
|
||||
|
||||
<VExpansionPanels variant="accordion" style="display: none;">
|
||||
<VExpansionPanel v-for="(item, index) in itemsPrescriptions" :key="index">
|
||||
<div>
|
||||
|
||||
<VExpansionPanelTitle collapse-icon="mdi-chevron-down" expand-icon="mdi-chevron-right"
|
||||
style="margin-left: 0px !important;">
|
||||
<p class=""><b> {{ item.name }}</b>
|
||||
<br />
|
||||
<div class=" pt-2"> {{ doctorName }}</div>
|
||||
<div class=" pt-2">{{ item.date }}</div>
|
||||
</p>
|
||||
|
||||
|
||||
<v-row>
|
||||
|
||||
</v-row>
|
||||
|
||||
<span class="v-expansion-panel-title__icon badge text-warning"
|
||||
v-if="item.status == null">Pending</span>
|
||||
<span class="v-expansion-panel-title__icon badge" v-else>
|
||||
<v-chip :color="getStatusColor(item.status)" label size="small" variant="text">
|
||||
{{ item.status }}
|
||||
</v-chip></span>
|
||||
</VExpansionPanelTitle>
|
||||
<VExpansionPanelText class="pt-0">
|
||||
|
||||
<v-row class='mt-1'>
|
||||
<v-col cols="12" md="4" sm="6">
|
||||
<p class='heading'><b>Brand:</b></p>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4" sm="6">
|
||||
<p>{{ item.brand }}</p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class='mt-1'>
|
||||
<v-col cols="12" md="4" sm="6">
|
||||
<p class='heading'><b>From:</b></p>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4" sm="6">
|
||||
<p>{{ item.from }}</p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class='mt-1'>
|
||||
<v-col cols="12" md="4" sm="6">
|
||||
<p class='heading'><b>Dosage:</b></p>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4" sm="6">
|
||||
<p>{{ item.dosage }}</p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class='mt-1'>
|
||||
<v-col cols="12" md="4" sm="6">
|
||||
<p class='heading'><b>Quantity:</b></p>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4" sm="6">
|
||||
<p>{{ item.quantity }}</p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class='mt-1'>
|
||||
<v-col cols="12" md="4" sm="6">
|
||||
<p class='heading'><b>Direction Quantity:</b></p>
|
||||
</v-col>
|
||||
<v-col cols="12" md="8" sm="6">
|
||||
<p>{{ item.direction_quantity }}</p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class='mt-1'>
|
||||
<v-col cols="12" md="4" sm="6">
|
||||
<p class='heading'><b>Direction One:</b></p>
|
||||
</v-col>
|
||||
<v-col cols="12" md="8" sm="6">
|
||||
<p>{{ item.direction_one }} </p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class='mt-1'>
|
||||
<v-col cols="12" md="4" sm="6">
|
||||
<p class='heading'><b>Direction Two:</b></p>
|
||||
</v-col>
|
||||
<v-col cols="12" md="8" sm="6">
|
||||
<p>{{ item.direction_two }} </p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class='mt-1'>
|
||||
<v-col cols="12" md="4" sm="6">
|
||||
<p class='heading'><b>Refill Quantity:</b></p>
|
||||
</v-col>
|
||||
<v-col cols="12" md="8" sm="6">
|
||||
<p>{{ item.refill_quantity }}</p>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
<v-row class='mt-1'>
|
||||
<v-col cols="12" md="4" sm="6">
|
||||
<p class='heading'><b>Status:</b></p>
|
||||
</v-col>
|
||||
<v-col cols="12" md="8" sm="6">
|
||||
<p v-if="item.status == null" class="text-warning">Pending</p>
|
||||
<p v-else>{{ item.status }}</p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class='mt-1'>
|
||||
<v-col cols="12" md="4" sm="6">
|
||||
<p class='heading'><b>Comments:</b></p>
|
||||
</v-col>
|
||||
<v-col cols="12" md="8" sm="8">
|
||||
<p>{{ item.comments }} </p>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
|
||||
</VExpansionPanelText>
|
||||
</div>
|
||||
|
||||
|
||||
</VExpansionPanel>
|
||||
<br />
|
||||
</VExpansionPanels>
|
||||
</template>
|
||||
|
||||
<template v-else="prescriptionLoaded">
|
||||
<VCard>
|
||||
<VCard>
|
||||
<VAlert border="start" color="rgb(var(--v-theme-yellow-theme-button))" variant="tonal">
|
||||
<div class="text-center">No data found</div>
|
||||
</VAlert>
|
||||
|
||||
</VCard>
|
||||
</VCard>
|
||||
|
||||
</template>
|
||||
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
button.v-expansion-panel-title {
|
||||
background-color: rgb(var(--v-theme-yellow)) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button.v-expansion-panel-title.bg-secondary {
|
||||
background-color: rgb(var(--v-theme-yellow)) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button.v-expansion-panel-title {
|
||||
background-color: rgb(var(--v-theme-yellow)) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
span.v-expansion-panel-title__icon {
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
|
||||
span.v-expansion-panel-title__icon {
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.v-expansion-panel {
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,69 @@
|
||||
<script setup>
|
||||
import About from "@/pages/provider/patient-profile/About.vue";
|
||||
import UserProfileHeader from "@/pages/provider/patient-profile/UserProfileHeader.vue";
|
||||
import patienProfilePrecrption from "@/pages/provider/patient-profile/patienProfilePrecrption.vue";
|
||||
|
||||
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useStore } from "vuex";
|
||||
const route = useRoute();
|
||||
const store = useStore();
|
||||
const profileDataPatient = ref(null)
|
||||
onMounted(async () => {
|
||||
store.dispatch("updateIsLoading", true);
|
||||
await store.dispatch("OrderPatientProfile", {
|
||||
id: route.params.id,
|
||||
});
|
||||
profileDataPatient.value = store.getters.getOrderPatientProfile;
|
||||
console.log('profileDataPatient', profileDataPatient.value);
|
||||
store.dispatch("updateIsLoading", false);
|
||||
});
|
||||
|
||||
const userTab = ref(null);
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
icon: "ri-user-line",
|
||||
title: "Profile",
|
||||
},
|
||||
|
||||
{
|
||||
icon: "mdi-prescription",
|
||||
title: "Prescriptions",
|
||||
},
|
||||
];
|
||||
</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>
|
||||
<div v-if="profileDataPatient">
|
||||
<UserProfileHeader class="mb-5" :user-data="profileDataPatient.patient_details" style="margin-bottom: 10px;" />
|
||||
|
||||
<VTabs v-model="userTab" class="v-tabs-pill mt-5">
|
||||
<VTab v-for="tab in tabs" :key="tab.icon">
|
||||
<VIcon start :icon="tab.icon" />
|
||||
<span>{{ tab.title }}</span>
|
||||
</VTab>
|
||||
</VTabs>
|
||||
<VWindow v-model="userTab" class="mt-6 disable-tab-transition" :touch="false">
|
||||
<VWindowItem>
|
||||
<About :user-data="profileDataPatient" />
|
||||
</VWindowItem>
|
||||
|
||||
<!-- <VWindowItem>
|
||||
<patientProfileNotes :order-data="profileDataPatient" />
|
||||
</VWindowItem>-->
|
||||
|
||||
<VWindowItem>
|
||||
<patienProfilePrecrption :order-data="profileDataPatient" />
|
||||
</VWindowItem>
|
||||
</VWindow>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,128 @@
|
||||
<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.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.orderData.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>
|
||||
<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>
|
||||
Reference in New Issue
Block a user