fix
This commit is contained in:
nasir@endelospay.com
parent
58837c4188
commit
73d194ad04
198
resources/js/pages/patients/CompletedMeetingTab.vue
Normal file
198
resources/js/pages/patients/CompletedMeetingTab.vue
Normal file
@ -0,0 +1,198 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
userData: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
import moment from 'moment';
|
||||
import { onBeforeMount, onMounted, onUnmounted, ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useStore } from 'vuex';
|
||||
|
||||
const store = useStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const editDialog = ref(false);
|
||||
const deleteDialog = ref(false);
|
||||
const search = ref('');
|
||||
const appointmentId = ref('');
|
||||
const defaultItem = ref({
|
||||
id: -1,
|
||||
avatar: '',
|
||||
name: '',
|
||||
email: '',
|
||||
dob: '',
|
||||
phone_no: '',
|
||||
});
|
||||
|
||||
const editedItem = ref({ ...defaultItem.value });
|
||||
const editedIndex = ref(-1);
|
||||
const patientMeetingList = ref([]);
|
||||
const isLoading = ref(false);
|
||||
|
||||
// Status options
|
||||
const selectedOptions = [
|
||||
{ text: 'Active', value: 1 },
|
||||
{ text: 'InActive', value: 2 },
|
||||
];
|
||||
|
||||
const refVForm = ref(null);
|
||||
|
||||
// Headers
|
||||
const headers = [
|
||||
// { title: 'Appointment Id', key: 'id' },
|
||||
{ title: 'Provider Name', key: 'provider_name' },
|
||||
// { key: 'appointment_date', sortable: false, title: 'Date' },
|
||||
{ key: 'start_time', title: 'Start Time' },
|
||||
{ key: 'end_time', title: 'End Time' },
|
||||
{ key: 'duration', title: 'Duration' },
|
||||
{ title: 'ACTIONS', key: 'actions' },
|
||||
];
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function totalCallDuration(start_time, end_time) {
|
||||
const startMoment = moment(start_time);
|
||||
const endMoment = moment(end_time);
|
||||
const duration = moment.duration(endMoment.diff(startMoment));
|
||||
const hours = String(duration.hours()).padStart(2, '0');
|
||||
const minutes = String(duration.minutes()).padStart(2, '0');
|
||||
const seconds = String(duration.seconds()).padStart(2, '0');
|
||||
|
||||
if (hours === '00' && minutes === '00') {
|
||||
return `00:00:${seconds}`;
|
||||
} else if (hours === '00') {
|
||||
return `00:${minutes}`;
|
||||
} else {
|
||||
return `${hours}:${minutes}`;
|
||||
}
|
||||
}
|
||||
const formatDate = (date) => {
|
||||
const messageDate = new Date(date);
|
||||
const options = {
|
||||
year: 'numeric',
|
||||
month: 'numeric',
|
||||
day: 'numeric',
|
||||
hour: 'numeric', // Change from '2-digit' to 'numeric'
|
||||
minute: '2-digit',
|
||||
hour12: true, // Add hour12: true to get 12-hour format with AM/PM
|
||||
};
|
||||
const formattedDate = messageDate.toLocaleString('en-US', options).replace(/\//g, '-');
|
||||
return `${formattedDate} `;
|
||||
};
|
||||
// Fetch and process the patient meeting list
|
||||
const getPatientMeetingList = async () => {
|
||||
//store.dispatch('updateIsLoading', true);
|
||||
//await store.dispatch('patientMeetingList', { id: route.params.id });
|
||||
// store.dispatch('updateIsLoading', false);
|
||||
|
||||
let list = props.userData.completed_meetings;
|
||||
|
||||
patientMeetingList.value = list.map(history => ({
|
||||
...history,
|
||||
appointment_date: formatDate(history.appointment_date),
|
||||
start_time: formatDate(history.start_time),
|
||||
end_time: formatDate(history.end_time),
|
||||
duration: totalCallDuration(history.start_time, history.end_time),
|
||||
}));
|
||||
console.log(list);
|
||||
};
|
||||
|
||||
// Lifecycle hooks
|
||||
onBeforeMount(() => {});
|
||||
onMounted(async () => {
|
||||
await getPatientMeetingList();
|
||||
|
||||
});
|
||||
onUnmounted(() => {});
|
||||
const historyDetail = (item, value) => {
|
||||
console.log('item',item.id ,value)
|
||||
if(value == 'notes')
|
||||
router.push('/admin/patient/meeting/notes/' + route.params.id + '/' + item.id);
|
||||
if(value == 'prescription')
|
||||
router.push('/admin/patient/meeting/prescription/' + route.params.id + '/' + item.id);
|
||||
}
|
||||
const menusVariant = [
|
||||
'primary'
|
||||
];
|
||||
const options = [
|
||||
{
|
||||
title: 'Notes',
|
||||
key: 'notes',
|
||||
},
|
||||
{
|
||||
title: 'Prescription',
|
||||
key: 'prescription',
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" md="12">
|
||||
<v-card title="Completed Meetings">
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12" offset-md="8" md="4">
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
label="Search"
|
||||
placeholder="Search ..."
|
||||
append-inner-icon="ri-search-line"
|
||||
single-line
|
||||
hide-details
|
||||
dense
|
||||
outlined
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="patientMeetingList"
|
||||
:search="search"
|
||||
:items-per-page="5"
|
||||
class="text-no-wrap"
|
||||
>
|
||||
<template #item.id="{ item }">{{ item.id }}</template>
|
||||
<template #item.duration="{ item }">{{ item.duration }}</template>
|
||||
<!-- Actions -->
|
||||
<template #item.actions="{ item }">
|
||||
<div class="demo-space-x">
|
||||
<VMenu
|
||||
v-for="menu in menusVariant"
|
||||
:key="menu"
|
||||
>
|
||||
<template #activator="{ props }">
|
||||
|
||||
<i class="ri-more-2-line cursor-pointer" style="font-size: 32px;" v-bind="props"></i>
|
||||
|
||||
</template>
|
||||
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="opt in options"
|
||||
:key="opt.value"
|
||||
@click="historyDetail(item, opt.key)"
|
||||
>
|
||||
{{ opt.title }}
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</VMenu>
|
||||
</div>
|
||||
<!-- <div class="d-flex gap-1">
|
||||
<VBtn class="text-capitalize text-white" @click="historyDetail(item)"> Detail
|
||||
</VBtn>
|
||||
</div> -->
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
108
resources/js/pages/providers/NotesPanel.vue
Normal file
108
resources/js/pages/providers/NotesPanel.vue
Normal file
@ -0,0 +1,108 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useStore } from 'vuex';
|
||||
const store = useStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const patientId = route.params.patient_id;
|
||||
const appointmentId = route.params.id;
|
||||
const notes = ref([]);
|
||||
const props = defineProps({
|
||||
notesData: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
|
||||
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 downloadFile = (fileUrl) => {
|
||||
const link = document.createElement('a');
|
||||
link.href = fileUrl;
|
||||
link.download = 'noteFile.png';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
|
||||
<VCard title="Notes">
|
||||
<VCardText>
|
||||
<VTimeline
|
||||
side="end"
|
||||
align="start"
|
||||
line-inset="8"
|
||||
truncate-line="both"
|
||||
density="compact"
|
||||
>
|
||||
|
||||
<!-- SECTION Timeline Item: Flight -->
|
||||
|
||||
<template v-for="(p_note, index) in props.notesData.patientNotes" :key="index" v-if="props.notesData.patientNotes.length>0">
|
||||
<VTimelineItem
|
||||
dot-color="primary"
|
||||
size="x-small"
|
||||
>
|
||||
<!-- 👉 Header -->
|
||||
<div class="d-flex justify-space-between align-center gap-2 flex-wrap">
|
||||
<span class="app-timeline-title">
|
||||
{{p_note.note}}
|
||||
</span>
|
||||
|
||||
<span class="app-timeline-meta">{{ formatDateDate(p_note.created_at) }}</span>
|
||||
<!-- <span></span> -->
|
||||
</div>
|
||||
|
||||
<!-- 👉 Content -->
|
||||
<div class="app-timeline-text mb-1">
|
||||
<span>{{ p_note.telemedPro.name }}</span>
|
||||
<VIcon
|
||||
size="20"
|
||||
icon="tabler-arrow-right"
|
||||
class="mx-2 flip-in-rtl"
|
||||
/>
|
||||
<!-- <span>Heathrow Airport, London</span> -->
|
||||
</div>
|
||||
|
||||
<!-- <p class="app-timeline-meta mb-2">
|
||||
6:30 AM
|
||||
</p> -->
|
||||
|
||||
<!-- <div class="app-timeline-text d-flex align-center gap-2">
|
||||
<div>
|
||||
<VImg
|
||||
:src="pdf"
|
||||
:width="22"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span>booking-card.pdf</span>
|
||||
</div> -->
|
||||
</VTimelineItem>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<!-- !SECTION -->
|
||||
|
||||
<!-- !SECTION -->
|
||||
</VTimeline>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
352
resources/js/pages/providers/PrescriptionPanel.vue
Normal file
352
resources/js/pages/providers/PrescriptionPanel.vue
Normal file
@ -0,0 +1,352 @@
|
||||
<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>
|
||||
247
resources/js/pages/providers/ProviderBioPanel.vue
Normal file
247
resources/js/pages/providers/ProviderBioPanel.vue
Normal file
@ -0,0 +1,247 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
userData: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const standardPlan = {
|
||||
plan: 'Standard',
|
||||
price: 99,
|
||||
benefits: [
|
||||
'10 Users',
|
||||
'Up to 10GB storage',
|
||||
'Basic Support',
|
||||
],
|
||||
}
|
||||
|
||||
const isUserInfoEditDialogVisible = ref(false)
|
||||
const isUpgradePlanDialogVisible = ref(false)
|
||||
|
||||
const resolveUserStatusVariant = stat => {
|
||||
if (stat === 'pending')
|
||||
return 'warning'
|
||||
if (stat === 'active')
|
||||
return 'success'
|
||||
if (stat === 'inactive')
|
||||
return 'secondary'
|
||||
|
||||
return 'primary'
|
||||
}
|
||||
|
||||
const resolveUserRoleVariant = role => {
|
||||
if (role === 'subscriber')
|
||||
return {
|
||||
color: 'primary',
|
||||
icon: 'ri-user-line',
|
||||
}
|
||||
if (role === 'author')
|
||||
return {
|
||||
color: 'warning',
|
||||
icon: 'ri-settings-2-line',
|
||||
}
|
||||
if (role === 'maintainer')
|
||||
return {
|
||||
color: 'success',
|
||||
icon: 'ri-database-2-line',
|
||||
}
|
||||
if (role === 'editor')
|
||||
return {
|
||||
color: 'info',
|
||||
icon: 'ri-pencil-line',
|
||||
}
|
||||
if (role === 'admin')
|
||||
return {
|
||||
color: 'error',
|
||||
icon: 'ri-server-line',
|
||||
}
|
||||
|
||||
return {
|
||||
color: 'primary',
|
||||
icon: 'ri-user-line',
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<!-- SECTION User Details -->
|
||||
<VCol cols="12">
|
||||
<VCard v-if="props.userData">
|
||||
<VCardText class="text-center pt-12 pb-6">
|
||||
<!-- 👉 Avatar -->
|
||||
<VAvatar
|
||||
rounded
|
||||
:size="120"
|
||||
:color="!props.userData.telemed.avatar ? 'primary' : undefined"
|
||||
:variant="!props.userData.telemed.avatar ? 'tonal' : undefined"
|
||||
>
|
||||
<VImg
|
||||
v-if="props.userData.telemed.avatar"
|
||||
:src="props.userData.telemed.avatar"
|
||||
/>
|
||||
<span
|
||||
v-else
|
||||
class="text-5xl font-weight-medium"
|
||||
>
|
||||
{{ avatarText(props.userData.telemed.name ) }}
|
||||
</span>
|
||||
</VAvatar>
|
||||
|
||||
<!-- 👉 User fullName -->
|
||||
<h5 class="text-h5 mt-4">
|
||||
{{ props.userData.telemed.first_name }} {{ props.userData.telemed.last_name }}
|
||||
</h5>
|
||||
|
||||
<!-- 👉 Role chip -->
|
||||
<VChip
|
||||
:color="resolveUserRoleVariant('Patient').color"
|
||||
size="small"
|
||||
class="text-capitalize mt-4"
|
||||
>
|
||||
Patient
|
||||
</VChip>
|
||||
</VCardText>
|
||||
|
||||
|
||||
|
||||
<!-- 👉 Details -->
|
||||
<VCardText class="pb-6">
|
||||
<h5 class="text-h5">
|
||||
Details
|
||||
</h5>
|
||||
|
||||
<VDivider class="my-4" />
|
||||
|
||||
<!-- 👉 User Details list -->
|
||||
<VList class="card-list">
|
||||
<VListItem>
|
||||
<VListItemTitle class="text-sm">
|
||||
<span class="font-weight-medium">
|
||||
Email:
|
||||
</span>
|
||||
<span class="text-body-1">{{ props.userData.telemed.email }}</span>
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
|
||||
<VListItem>
|
||||
<VListItemTitle class="text-sm">
|
||||
<span class="font-weight-medium">
|
||||
Address:
|
||||
</span>
|
||||
<span class="text-body-1">{{ props.userData.telemed.address }}</span>
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
<VListItem>
|
||||
<VListItemTitle class="text-sm">
|
||||
<span class="font-weight-medium">
|
||||
City:
|
||||
</span>
|
||||
<span class="text-body-1">{{ props.userData.telemed.city }}</span>
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
<VListItem>
|
||||
<VListItemTitle class="text-sm">
|
||||
<span class="font-weight-medium">
|
||||
State:
|
||||
</span>
|
||||
<span class="text-body-1">{{ props.userData.telemed.state }}</span>
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
<VListItem>
|
||||
<VListItemTitle class="text-sm">
|
||||
<span class="font-weight-medium">
|
||||
Zip:
|
||||
</span>
|
||||
<span class="text-body-1">{{ props.userData.telemed.zip_code }}</span>
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
<VListItem>
|
||||
<VListItemTitle class="text-sm">
|
||||
<span class="font-weight-medium">
|
||||
Status:
|
||||
</span>
|
||||
<VChip
|
||||
size="small"
|
||||
:color="resolveUserStatusVariant('Active')"
|
||||
class="text-capitalize"
|
||||
>
|
||||
Active
|
||||
</VChip>
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<VListItem>
|
||||
<VListItemTitle class="text-sm">
|
||||
<span class="font-weight-medium">
|
||||
Contact:
|
||||
</span>
|
||||
<span class="text-body-1">{{ props.userData.telemed.phone_no }}</span>
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
|
||||
|
||||
<VListItem>
|
||||
<VListItemTitle class="text-sm">
|
||||
<span class="font-weight-medium">
|
||||
Country:
|
||||
</span>
|
||||
<span class="text-body-1">{{ props.userData.telemed.country }}</span>
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
|
||||
<!-- 👉 Edit and Suspend button -->
|
||||
<VCardText class="d-flex justify-center">
|
||||
<VBtn
|
||||
variant="elevated"
|
||||
class="me-4"
|
||||
@click="isUserInfoEditDialogVisible = true"
|
||||
>
|
||||
Edit
|
||||
</VBtn>
|
||||
<VBtn
|
||||
variant="outlined"
|
||||
color="error"
|
||||
>
|
||||
Suspend
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
<!-- !SECTION -->
|
||||
|
||||
<!-- SECTION Current Plan -->
|
||||
|
||||
<!-- !SECTION -->
|
||||
</VRow>
|
||||
|
||||
<!-- 👉 Edit user info dialog -->
|
||||
<UserInfoEditDialog
|
||||
v-model:isDialogVisible="isUserInfoEditDialogVisible"
|
||||
:user-data="props.userData"
|
||||
/>
|
||||
|
||||
<!-- 👉 Upgrade plan dialog -->
|
||||
<UserUpgradePlanDialog v-model:isDialogVisible="isUpgradePlanDialogVisible" />
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: .5rem;
|
||||
}
|
||||
|
||||
.current-plan {
|
||||
border: 2px solid rgb(var(--v-theme-primary));
|
||||
}
|
||||
|
||||
.text-capitalize {
|
||||
text-transform: capitalize !important;
|
||||
}
|
||||
</style>
|
||||
189
resources/js/pages/providers/ProviderTabOverview.vue
Normal file
189
resources/js/pages/providers/ProviderTabOverview.vue
Normal file
@ -0,0 +1,189 @@
|
||||
<script setup>
|
||||
import moment from 'moment';
|
||||
import { onBeforeMount, onMounted, onUnmounted, ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useStore } from 'vuex';
|
||||
|
||||
const store = useStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const editDialog = ref(false);
|
||||
const deleteDialog = ref(false);
|
||||
const search = ref('');
|
||||
const appointmentId = ref('');
|
||||
const defaultItem = ref({
|
||||
id: -1,
|
||||
avatar: '',
|
||||
name: '',
|
||||
email: '',
|
||||
dob: '',
|
||||
phone_no: '',
|
||||
});
|
||||
|
||||
const editedItem = ref({ ...defaultItem.value });
|
||||
const editedIndex = ref(-1);
|
||||
const providerMeetingList = ref([]);
|
||||
const isLoading = ref(false);
|
||||
|
||||
// Status options
|
||||
const selectedOptions = [
|
||||
{ text: 'Active', value: 1 },
|
||||
{ text: 'InActive', value: 2 },
|
||||
];
|
||||
|
||||
const refVForm = ref(null);
|
||||
|
||||
// Headers
|
||||
const headers = [
|
||||
// { title: 'Appointment Id', key: 'id' },
|
||||
{ title: 'Patient', key: 'patient_name' },
|
||||
// { key: 'appointment_date', sortable: false, title: 'Date' },
|
||||
{ key: 'start_time', title: 'Start Time' },
|
||||
{ key: 'end_time', title: 'End Time' },
|
||||
{ key: 'duration', title: 'Duration' },
|
||||
{ title: 'ACTIONS', key: 'actions' },
|
||||
];
|
||||
|
||||
// Utility functions
|
||||
function changeDateFormat(dateFormat) {
|
||||
if (dateFormat) {
|
||||
const [datePart, timePart] = dateFormat.split(' ');
|
||||
const [year, month, day] = datePart.split('-');
|
||||
const formattedDate = `${parseInt(month)}-${parseInt(day)}-${year}`;
|
||||
return `${formattedDate} ${timePart}`;
|
||||
}
|
||||
return dateFormat;
|
||||
}
|
||||
|
||||
function changeFormat(dateFormat) {
|
||||
const [year, month, day] = dateFormat.split('-');
|
||||
return `${parseInt(month)}-${parseInt(day)}-${year}`;
|
||||
}
|
||||
|
||||
function totalCallDuration(start_time, end_time) {
|
||||
const startMoment = moment(start_time);
|
||||
const endMoment = moment(end_time);
|
||||
const duration = moment.duration(endMoment.diff(startMoment));
|
||||
const hours = String(duration.hours()).padStart(2, '0');
|
||||
const minutes = String(duration.minutes()).padStart(2, '0');
|
||||
const seconds = String(duration.seconds()).padStart(2, '0');
|
||||
|
||||
if (hours === '00' && minutes === '00') {
|
||||
return `00:00:${seconds}`;
|
||||
} else if (hours === '00') {
|
||||
return `00:${minutes}:${seconds}`;
|
||||
} else {
|
||||
return `${hours}:${minutes}`;
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch and process the patient meeting list
|
||||
const getPatientMeetingList = async () => {
|
||||
store.dispatch('updateIsLoading', true);
|
||||
await store.dispatch('providerMeetingList', { id: route.params.id });
|
||||
store.dispatch('updateIsLoading', false);
|
||||
|
||||
let list = store.getters.getProviderMeetingList;
|
||||
providerMeetingList.value = list.map(history => ({
|
||||
...history,
|
||||
appointment_date: changeFormat(history.appointment_date),
|
||||
start_time: changeDateFormat(history.start_time),
|
||||
end_time: changeDateFormat(history.end_time),
|
||||
duration: totalCallDuration(history.start_time, history.end_time),
|
||||
}));
|
||||
console.log(list);
|
||||
};
|
||||
|
||||
// Lifecycle hooks
|
||||
onBeforeMount(() => {});
|
||||
onMounted(async () => {
|
||||
await getPatientMeetingList();
|
||||
|
||||
});
|
||||
onUnmounted(() => {});
|
||||
const historyDetail = (item, value) => {
|
||||
console.log('item',item.id ,value)
|
||||
if(value == 'notes')
|
||||
router.push('/admin/patient/meeting/notes/' + item.patient_id + '/' + item.id);
|
||||
if(value == 'prescription')
|
||||
router.push('/admin/patient/meeting/prescription/' + item.patient_id + '/' + item.id);
|
||||
}
|
||||
const menusVariant = [
|
||||
'primary'
|
||||
];
|
||||
const options = [
|
||||
{
|
||||
title: 'Notes',
|
||||
key: 'notes',
|
||||
},
|
||||
{
|
||||
title: 'Prescription',
|
||||
key: 'prescription',
|
||||
},
|
||||
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" md="12">
|
||||
<v-card title="Meetings">
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12" offset-md="8" md="4">
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
label="Search"
|
||||
placeholder="Search ..."
|
||||
append-inner-icon="ri-search-line"
|
||||
single-line
|
||||
hide-details
|
||||
dense
|
||||
outlined
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="providerMeetingList"
|
||||
:search="search"
|
||||
:items-per-page="5"
|
||||
class="text-no-wrap"
|
||||
>
|
||||
<template #item.id="{ item }">{{ item.id }}</template>
|
||||
<template #item.duration="{ item }">{{ item.duration }}</template>
|
||||
<!-- Actions -->
|
||||
<template #item.actions="{ item }">
|
||||
<div class="demo-space-x">
|
||||
<VMenu
|
||||
v-for="menu in menusVariant"
|
||||
:key="menu"
|
||||
>
|
||||
<template #activator="{ props }">
|
||||
|
||||
<i class="ri-more-2-line cursor-pointer" v-bind="props"></i>
|
||||
|
||||
</template>
|
||||
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="opt in options"
|
||||
:key="opt.value"
|
||||
@click="historyDetail(item, opt.key)"
|
||||
>
|
||||
{{ opt.title }}
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</VMenu>
|
||||
</div>
|
||||
<!-- <div class="d-flex gap-1">
|
||||
<VBtn class="text-capitalize text-white" @click="historyDetail(item)"> Detail
|
||||
</VBtn>
|
||||
</div> -->
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
5
typed-router.d.ts
vendored
5
typed-router.d.ts
vendored
@ -154,6 +154,7 @@ declare module 'vue-router/auto/routes' {
|
||||
'pages-pricing': RouteRecordInfo<'pages-pricing', '/pages/pricing', Record<never, never>, Record<never, never>>,
|
||||
'pages-typography': RouteRecordInfo<'pages-typography', '/pages/typography', Record<never, never>, Record<never, never>>,
|
||||
'pages-user-profile-tab': RouteRecordInfo<'pages-user-profile-tab', '/pages/user-profile/:tab', { tab: ParamValue<true> }, { tab: ParamValue<false> }>,
|
||||
'patients-completed-meeting-tab': RouteRecordInfo<'patients-completed-meeting-tab', '/patients/CompletedMeetingTab', Record<never, never>, Record<never, never>>,
|
||||
'patients-meeting-details': RouteRecordInfo<'patients-meeting-details', '/patients/meeting-details', Record<never, never>, Record<never, never>>,
|
||||
'patients-meetings': RouteRecordInfo<'patients-meetings', '/patients/meetings', Record<never, never>, Record<never, never>>,
|
||||
'patients-notes-panel': RouteRecordInfo<'patients-notes-panel', '/patients/NotesPanel', Record<never, never>, Record<never, never>>,
|
||||
@ -165,8 +166,12 @@ declare module 'vue-router/auto/routes' {
|
||||
'patients-user-tab-overview': RouteRecordInfo<'patients-user-tab-overview', '/patients/UserTabOverview', Record<never, never>, Record<never, never>>,
|
||||
'providers-meeting-details': RouteRecordInfo<'providers-meeting-details', '/providers/meeting-details', Record<never, never>, Record<never, never>>,
|
||||
'providers-meetings': RouteRecordInfo<'providers-meetings', '/providers/meetings', Record<never, never>, Record<never, never>>,
|
||||
'providers-notes-panel': RouteRecordInfo<'providers-notes-panel', '/providers/NotesPanel', Record<never, never>, Record<never, never>>,
|
||||
'providers-prescription-panel': RouteRecordInfo<'providers-prescription-panel', '/providers/PrescriptionPanel', Record<never, never>, Record<never, never>>,
|
||||
'providers-provider-profile': RouteRecordInfo<'providers-provider-profile', '/providers/provider-profile', Record<never, never>, Record<never, never>>,
|
||||
'providers-provider-bio-panel': RouteRecordInfo<'providers-provider-bio-panel', '/providers/ProviderBioPanel', Record<never, never>, Record<never, never>>,
|
||||
'providers-providers': RouteRecordInfo<'providers-providers', '/providers/providers', Record<never, never>, Record<never, never>>,
|
||||
'providers-provider-tab-overview': RouteRecordInfo<'providers-provider-tab-overview', '/providers/ProviderTabOverview', Record<never, never>, Record<never, never>>,
|
||||
'register': RouteRecordInfo<'register', '/register', Record<never, never>, Record<never, never>>,
|
||||
'tables-data-table': RouteRecordInfo<'tables-data-table', '/tables/data-table', Record<never, never>, Record<never, never>>,
|
||||
'tables-simple-table': RouteRecordInfo<'tables-simple-table', '/tables/simple-table', Record<never, never>, Record<never, never>>,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user