248 lines
9.3 KiB
Vue
248 lines
9.3 KiB
Vue
<script setup>
|
|
import store from '@/store';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const itemsPrescriptions = ref([]);
|
|
// const patientId = route.params.patient_id;
|
|
const appointmentId = route.params.appiontment_id;
|
|
const doctorName = ref('');
|
|
const prescription = computed(async () => {
|
|
store.dispatch('updateIsLoading', true)
|
|
await store.dispatch('getPatientAppointment')
|
|
await getprescriptionList()
|
|
doctorName.value = store.getters.getBookedAppointment.agent_name;
|
|
store.dispatch('updateIsLoading', false)
|
|
});
|
|
|
|
const getprescriptionList = async () => {
|
|
await store.dispatch('getPatientPrescriptionsByID', {
|
|
appointment_id: appointmentId,
|
|
})
|
|
let prescriptions = store.getters.getPrescriptionList
|
|
// itemsPrescriptions.value = store.getters.getPrescriptionList
|
|
for (let data of prescriptions) {
|
|
let dataObject = {}
|
|
dataObject.brand = data.brand
|
|
dataObject.direction_one = data.direction_one
|
|
dataObject.direction_quantity = data.direction_quantity
|
|
dataObject.direction_two = data.direction_two
|
|
dataObject.date = formatDateDate(data.created_at)
|
|
dataObject.dosage = data.dosage
|
|
dataObject.from = data.from
|
|
dataObject.name = data.name
|
|
dataObject.quantity = data.quantity
|
|
dataObject.refill_quantity = data.refill_quantity
|
|
dataObject.status = data.status
|
|
dataObject.comments = data.comments
|
|
itemsPrescriptions.value.push(dataObject)
|
|
}
|
|
itemsPrescriptions.value.sort((a, b) => {
|
|
return b.id - a.id;
|
|
});
|
|
console.log("itemsPrescriptions", itemsPrescriptions.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, '-');
|
|
};
|
|
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
|
|
}
|
|
};
|
|
</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="prescription">
|
|
<VExpansionPanels variant="accordion">
|
|
<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">#{{ appointmentId }} By {{ 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>
|
|
<VCard>
|
|
<VCard>
|
|
<VAlert border="start" color="rgb(var(--v-theme-yellow))" 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>
|