371 lines
15 KiB
Vue
371 lines
15 KiB
Vue
<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>
|