518 lines
18 KiB
Vue
518 lines
18 KiB
Vue
<script setup>
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useStore } from 'vuex';
|
|
|
|
const store = useStore();
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const itemsPrescriptions = ref([]);
|
|
const patientId = route.params.patient_id;
|
|
const props = defineProps({
|
|
prescriptionData: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
})
|
|
const prescriptionList = computed(async () => {
|
|
console.log('computed=====')
|
|
return await getprescriptionList()
|
|
|
|
});
|
|
const doctorName = ref('');
|
|
const currentPage = ref(1);
|
|
const itemsPerPage = ref(2);
|
|
const paginatedItems = computed(() => {
|
|
const start = (currentPage.value - 1) * itemsPerPage.value;
|
|
const end = start + itemsPerPage.value;
|
|
let prescriptions = props.prescriptionData.prescriptionData;
|
|
prescriptions.sort((a, b) => {
|
|
return b.order_id - a.order_id;
|
|
});
|
|
console.log('props.orderData', props.prescriptionData.prescriptionData)
|
|
itemsPrescriptions.value = prescriptions
|
|
return itemsPrescriptions.value.slice(start, end);
|
|
});
|
|
|
|
const totalPages = computed(() => {
|
|
return Math.ceil(itemsPrescriptions.value.length / itemsPerPage.value);
|
|
});
|
|
|
|
const changePage = (page) => {
|
|
currentPage.value = page;
|
|
}
|
|
const getprescriptionList = async () => {
|
|
|
|
let prescriptions = props.prescriptionData.prescriptionData
|
|
console.log("BeforeOverviewItem", prescriptions);
|
|
// itemsPrescriptions.value = store.getters.getPrescriptionList
|
|
for (let data of prescriptions) {
|
|
let dataObject = {}
|
|
dataObject.name = data.name
|
|
dataObject.brand = data.brand
|
|
dataObject.from = data.from
|
|
dataObject.direction_quantity = data.direction_quantity
|
|
dataObject.dosage = data.dosage
|
|
dataObject.quantity = data.quantity
|
|
dataObject.refill_quantity = data.refill_quantity
|
|
dataObject.actions = ''
|
|
dataObject.id = data.id
|
|
dataObject.comments = data.comments
|
|
dataObject.direction_one = data.direction_one
|
|
dataObject.direction_two= data.direction_two
|
|
dataObject.status = data.status
|
|
dataObject.provider_name = data.provider_name
|
|
dataObject.order_id = data.order_id
|
|
dataObject.created_by=data.created_by
|
|
dataObject.date = formatDateDate(data.created_at)
|
|
dataObject.prescription_date=data.created_at
|
|
itemsPrescriptions.value.push(dataObject)
|
|
}
|
|
console.log(itemsPrescriptions.value)
|
|
itemsPrescriptions.value.sort((a, b) => {
|
|
return b.order_id - a.order_id;
|
|
});
|
|
return itemsPrescriptions.value
|
|
console.log("OverviewItem", 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 'success';
|
|
case 'returned':
|
|
return 'red';
|
|
case 'results':
|
|
return 'blue';
|
|
default:
|
|
return 'grey'; // Use Vuetify's grey color for any other status
|
|
}
|
|
};
|
|
const resolveStatusVariant = status => {
|
|
if (status === 1)
|
|
return {
|
|
color: 'primary',
|
|
text: 'Current',
|
|
}
|
|
else if (status === 2)
|
|
return {
|
|
color: 'success',
|
|
text: 'Professional',
|
|
}
|
|
else if (status === 3)
|
|
return {
|
|
color: 'error',
|
|
text: 'Rejected',
|
|
}
|
|
else if (status === 4)
|
|
return {
|
|
color: 'warning',
|
|
text: 'Resigned',
|
|
}
|
|
else
|
|
return {
|
|
color: 'info',
|
|
text: 'Applied',
|
|
}
|
|
}
|
|
const headers = [
|
|
{
|
|
title: 'Order ID',
|
|
key: 'order_id',
|
|
},
|
|
{
|
|
title: 'Provider Name',
|
|
key: 'provider_name',
|
|
},
|
|
{
|
|
title: 'Name',
|
|
key: 'name',
|
|
},
|
|
{
|
|
title: 'Date',
|
|
key: 'date',
|
|
},
|
|
{
|
|
title: 'Status',
|
|
key: 'status',
|
|
},
|
|
]
|
|
const prescriptionIndex = ref([]);
|
|
const prescriptionItem = ref(-1)
|
|
const prescriptionDialog = ref(false)
|
|
const selectedItem = ref(null);
|
|
const showDetail = item => {
|
|
// console.log("id",item);
|
|
prescriptionIndex.value = item
|
|
selectedItem.value = item;
|
|
// console.log("index",prescriptionIndex.value);
|
|
// prescriptionItem.value = { ...item }
|
|
prescriptionDialog.value = true
|
|
}
|
|
const close = () => {
|
|
prescriptionDialog.value = false
|
|
prescriptionIndex.value = -1
|
|
prescriptionItem.value = { ...defaultItem.value }
|
|
}
|
|
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'
|
|
})
|
|
}
|
|
onMounted(async () => {
|
|
let prescriptions = props.prescriptionData.prescriptionData;
|
|
prescriptions.sort((a, b) => {
|
|
return b.order_id - a.order_id;
|
|
});
|
|
console.log('props.orderData', props.prescriptionData.prescriptionData)
|
|
itemsPrescriptions.value = prescriptions
|
|
});
|
|
|
|
</script>
|
|
<template>
|
|
<template v-if="itemsPrescriptions.length > 0">
|
|
<v-row>
|
|
<v-col v-for="prescription in paginatedItems" :key="prescription.id" cols="12" md="6">
|
|
|
|
<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>
|
|
|
|
|
|
|
|
<v-chip :color="getStatusColor(prescription.status)" text-color="white" small class="mr-2">
|
|
{{ prescription.status }}
|
|
</v-chip>
|
|
Order ID : <RouterLink :to="{ name: 'admin-order-detail', params: { id: prescription.order_id } }">
|
|
<span class=""> #{{ prescription.order_id }} </span>
|
|
</RouterLink>
|
|
|
|
</v-card-text>
|
|
|
|
<v-divider class="mx-4"></v-divider>
|
|
|
|
<v-card-text>
|
|
<v-row dense>
|
|
<v-col cols="6">
|
|
<v-icon small color="primary">ri-capsule-line</v-icon>
|
|
<span class="ml-1">Dosage:{{ prescription.dosage }}</span>
|
|
</v-col>
|
|
<v-col cols="6">
|
|
<v-icon small color="primary">ri-medicine-bottle-line</v-icon>
|
|
<span class="ml-1">Quantity:{{ prescription.quantity }}</span>
|
|
</v-col>
|
|
<v-col cols="6">
|
|
<v-icon small color="primary">ri-calendar-line</v-icon>
|
|
<span class="ml-1">{{ formatDate(prescription.created_at) }}</span>
|
|
</v-col>
|
|
<v-col cols="6">
|
|
<v-icon small color="primary">ri-time-line</v-icon>
|
|
<span class="ml-1">{{ formatTime(prescription.created_at) }}</span>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
|
|
<v-card-actions>
|
|
<v-btn color="primary" text>
|
|
More Details
|
|
</v-btn>
|
|
<v-spacer></v-spacer>
|
|
<v-btn @click="prescription.show = !prescription.show">
|
|
{{ prescription.show ? '' : '' }}
|
|
<v-icon right color="primary">
|
|
{{ prescription.show ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line' }}
|
|
</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>Add By:</strong> {{ prescription.created_by}}
|
|
</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-row justify="center">
|
|
<v-col cols="auto">
|
|
<v-pagination v-model="currentPage" :length="totalPages" @input="changePage"></v-pagination>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
</template>
|
|
<!-- <v-row style="display: none;">
|
|
<v-col cols="12" md="12" v-if="itemsPrescriptions">
|
|
<v-card title="Prescriptions" v-if="prescriptionList">
|
|
<VCardText >
|
|
|
|
</VCardText>
|
|
<VDataTable
|
|
:headers="headers"
|
|
:items="itemsPrescriptions"
|
|
:items-per-page="5"
|
|
class="text-no-wrap"
|
|
>
|
|
|
|
|
|
|
|
<template #item.provider_name="{ item }">
|
|
<span class="">{{ item.provider_name }}</span>
|
|
</template>
|
|
<template #item.order_id="{ item }">
|
|
<RouterLink :to="{ name: 'admin-order-detail', params: { id: item.order_id } }">
|
|
<span class=""> #{{ item.order_id }} </span>
|
|
</RouterLink>
|
|
</template>
|
|
|
|
<template #item.status="{ item }">
|
|
<VChip
|
|
:color="getStatusColor(item.status)"
|
|
density="comfortable"
|
|
>
|
|
{{ item.status}}
|
|
</VChip>
|
|
</template>
|
|
|
|
|
|
<template #item.name="{ item }">
|
|
<router-link
|
|
:to="{ name: 'admin-patient-profile', params: { id: item.id } }"
|
|
class="text-high-emphasis "
|
|
@click.prevent=showDetail(item)
|
|
>
|
|
{{ item.name }}
|
|
</router-link>
|
|
|
|
</template>
|
|
</VDataTable>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row> -->
|
|
<VDialog
|
|
v-model="prescriptionDialog"
|
|
max-width="600px"
|
|
>
|
|
<VCard :title=prescriptionIndex.name>
|
|
<DialogCloseBtn
|
|
variant="text"
|
|
size="default"
|
|
@click="[prescriptionDialog = false,selectedItem = '']"
|
|
/>
|
|
<VCardText>
|
|
<v-row class='mt-0'>
|
|
<v-col cols="12" md="4" sm="6">
|
|
<p class='heading mb-0 text-right'><b>Brand:</b></p>
|
|
</v-col>
|
|
<v-col cols="12" md="4" sm="6">
|
|
<p>{{ prescriptionIndex.brand }}</p>
|
|
</v-col>
|
|
</v-row>
|
|
<VDivider></VDivider>
|
|
<v-row class='mt-1'>
|
|
<v-col cols="12" md="4" sm="6">
|
|
<p class='heading mb-0 text-right'><b>From:</b></p>
|
|
</v-col>
|
|
<v-col cols="12" md="4" sm="6">
|
|
<p>{{ prescriptionIndex.from }}</p>
|
|
</v-col>
|
|
</v-row>
|
|
<VDivider></VDivider>
|
|
<v-row class='mt-1'>
|
|
<v-col cols="12" md="4" sm="6">
|
|
<p class='heading mb-0 text-right'><b>Dosage:</b></p>
|
|
</v-col>
|
|
<v-col cols="12" md="4" sm="6">
|
|
<p>{{ prescriptionIndex.dosage }}</p>
|
|
</v-col>
|
|
</v-row>
|
|
<VDivider></VDivider>
|
|
<v-row class='mt-1'>
|
|
<v-col cols="12" md="4" sm="6">
|
|
<p class='heading mb-0 text-right'><b>Quantity:</b></p>
|
|
</v-col>
|
|
<v-col cols="12" md="4" sm="6">
|
|
<p>{{ prescriptionIndex.quantity }}</p>
|
|
</v-col>
|
|
</v-row>
|
|
<VDivider></VDivider>
|
|
<v-row class='mt-1'>
|
|
<v-col cols="12" md="4" sm="6">
|
|
<p class='heading mb-0 text-right'><b>Direction Quantity:</b></p>
|
|
</v-col>
|
|
<v-col cols="12" md="8" sm="6">
|
|
<p>{{ prescriptionIndex.direction_quantity }}</p>
|
|
</v-col>
|
|
</v-row>
|
|
<VDivider></VDivider>
|
|
<v-row class='mt-1'>
|
|
<v-col cols="12" md="4" sm="6">
|
|
<p class='heading mb-0 text-right'><b>Direction One:</b></p>
|
|
</v-col>
|
|
<v-col cols="12" md="8" sm="6">
|
|
<p>{{ prescriptionIndex.direction_one }} </p>
|
|
</v-col>
|
|
</v-row>
|
|
<VDivider></VDivider>
|
|
<v-row class='mt-1'>
|
|
<v-col cols="12" md="4" sm="6">
|
|
<p class='heading mb-0 text-right'><b>Direction Two:</b></p>
|
|
</v-col>
|
|
<v-col cols="12" md="8" sm="6">
|
|
<p>{{ prescriptionIndex.direction_two }} </p>
|
|
</v-col>
|
|
</v-row>
|
|
<VDivider></VDivider>
|
|
<v-row class='mt-1'>
|
|
<v-col cols="12" md="4" sm="6">
|
|
<p class='heading mb-0 text-right'><b>Refill Quantity:</b></p>
|
|
</v-col>
|
|
<v-col cols="12" md="8" sm="6">
|
|
<p>{{ prescriptionIndex.refill_quantity }}</p>
|
|
</v-col>
|
|
|
|
</v-row>
|
|
<VDivider></VDivider>
|
|
<v-row class='mt-1'>
|
|
<v-col cols="12" md="4" sm="6">
|
|
<p class='heading mb-0 text-right'><b>Status:</b></p>
|
|
</v-col>
|
|
<v-col cols="12" md="8" sm="6">
|
|
<p v-if="prescriptionIndex.status == null" class="text-warning">Pending</p>
|
|
<p v-else>{{ prescriptionIndex.status }}</p>
|
|
</v-col>
|
|
</v-row>
|
|
<VDivider></VDivider>
|
|
<v-row class='mt-1 pb-0'>
|
|
<v-col cols="12" md="4" sm="6">
|
|
<p class='heading mb-0 text-right'><b>Comments:</b></p>
|
|
</v-col>
|
|
<v-col cols="12" md="8" sm="8">
|
|
<p>{{ prescriptionIndex.comments }} </p>
|
|
</v-col>
|
|
|
|
</v-row>
|
|
|
|
</VCardText>
|
|
</VCard>
|
|
|
|
</VDialog>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
button.v-expansion-panel-title {
|
|
background-color: #003152 !important;
|
|
color: #fff;
|
|
}
|
|
|
|
button.v-expansion-panel-title.bg-secondary {
|
|
background-color: #003152 !important;
|
|
color: #fff;
|
|
}
|
|
|
|
button.v-expansion-panel-title {
|
|
background-color: #003152 !important;
|
|
color: #fff;
|
|
}
|
|
|
|
span.v-expansion-panel-title__icon {
|
|
color: #fff
|
|
}
|
|
|
|
// button.v-expansion-panel-title.bg-secondary {
|
|
// background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity)) !important;
|
|
// }
|
|
|
|
// button.v-expansion-panel-title {
|
|
// background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity)) !important;
|
|
// }
|
|
|
|
// button.v-expansion-panel-title.v-expansion-panel-title--active {
|
|
// background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity)) !important;
|
|
// }
|
|
|
|
.v-expansion-panel {
|
|
overflow: hidden;
|
|
border-radius: 16px;
|
|
background-color: #fff;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 10%);
|
|
margin-block-end: 10px;
|
|
transition: box-shadow 0.3s ease;
|
|
}
|
|
|
|
.details {
|
|
position: relative;
|
|
box-sizing: content-box;
|
|
border: 2px solid #fff;
|
|
border-radius: 1em;
|
|
background-color: #696cff;
|
|
block-size: 0.85em;
|
|
box-shadow: 0 0 3px rgba(67, 89, 113, 80%);
|
|
color: #fff;
|
|
content: "+";
|
|
font-family: "Courier New", Courier, monospace;
|
|
font-weight: 500;
|
|
inline-size: 0.85em;
|
|
inset-block-start: 50%;
|
|
inset-block-start: 0.7em;
|
|
inset-inline-start: 50%;
|
|
line-height: 0.9em;
|
|
text-align: center;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
</style>
|