353 lines
11 KiB
Vue
353 lines
11 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 prescription = computed(async () => {
|
|
console.log('computed=====')
|
|
await getprescriptionList()
|
|
|
|
});
|
|
|
|
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.prescription.name
|
|
dataObject.brand = data.prescription.brand
|
|
dataObject.from = data.prescription.from
|
|
dataObject.direction_quantity = data.prescription.direction_quantity
|
|
dataObject.dosage = data.prescription.dosage
|
|
dataObject.quantity = data.prescription.quantity
|
|
dataObject.refill_quantity = data.prescription.refill_quantity
|
|
dataObject.actions = ''
|
|
dataObject.id = data.prescription.id
|
|
dataObject.comments = data.comments
|
|
dataObject.direction_one = data.direction_one
|
|
dataObject.direction_two= data.direction_two
|
|
dataObject.status = data.status
|
|
|
|
dataObject.date = formatDateDate(data.created_at)
|
|
|
|
itemsPrescriptions.value.push(dataObject)
|
|
}
|
|
console.log(itemsPrescriptions.value)
|
|
itemsPrescriptions.value.sort((a, b) => {
|
|
return b.id - a.id;
|
|
});
|
|
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: '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 }
|
|
}
|
|
|
|
</script>
|
|
<template>
|
|
|
|
<v-row>
|
|
<v-col cols="12" md="12" v-if="itemsPrescriptions">
|
|
<v-card title="Prescriptions" v-if="prescription">
|
|
<VCardText >
|
|
|
|
</VCardText>
|
|
<VDataTable
|
|
:headers="headers"
|
|
:items="itemsPrescriptions"
|
|
:items-per-page="5"
|
|
class="text-no-wrap"
|
|
>
|
|
|
|
<!-- full name -->
|
|
<!-- status -->
|
|
<template #item.status="{ item }">
|
|
<VChip
|
|
:color="getStatusColor(item.status)"
|
|
density="comfortable"
|
|
>
|
|
{{ getStatusColor(item.status) }}
|
|
</VChip>
|
|
</template>
|
|
|
|
<!-- Actions -->
|
|
<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>
|