121 lines
3.7 KiB
Vue
121 lines
3.7 KiB
Vue
<script setup>
|
|
import store from '@/store';
|
|
import { ref } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const getHistory = ref([]);
|
|
const doctorAppiontments = ref([]);
|
|
const selectedFilter = ref(null);
|
|
onMounted(async () => {
|
|
await store.dispatch('getHistory')
|
|
getHistory.value = store.getters.getHistory.history;
|
|
console.log("getHistory", getHistory.value);
|
|
store.dispatch('updateIsLoading', false)
|
|
})
|
|
|
|
const filter = [
|
|
{
|
|
value: 'This Month',
|
|
key: 'current_month'
|
|
},
|
|
{
|
|
value: 'Past Month',
|
|
key: '1_month'
|
|
},
|
|
{
|
|
value: 'Past 2 Month from today',
|
|
key: '2_months'
|
|
},
|
|
{
|
|
value: 'Past 3 Month from today',
|
|
key: '3_months'
|
|
},
|
|
{
|
|
value: 'Past 6 Month from today',
|
|
key: '6_months'
|
|
},
|
|
{
|
|
value: 'Past 12 Month from today',
|
|
key: '12_months'
|
|
},
|
|
|
|
{
|
|
value: 'All Time',
|
|
key: 'all_time'
|
|
},
|
|
];
|
|
|
|
const handleDateInput = async () => {
|
|
getHistory.value = [];
|
|
await store.dispatch('getHistoryFilter', {
|
|
filter: selectedFilter.value,
|
|
})
|
|
getHistory.value = store.getters.getHistoryFilter.patients;
|
|
console.log("getHistoryFilter", getHistory.value);
|
|
store.dispatch('updateIsLoading', false)
|
|
}
|
|
|
|
const search = ref('');
|
|
const headers = [
|
|
{ align: 'start', key: 'name', title: 'Name' },
|
|
{ key: 'description', title: 'Description' },
|
|
{ key: 'price', title: 'Price' },
|
|
{ key: 'image', title: 'Image' },
|
|
{ key: 'status', title: 'Status' },
|
|
];
|
|
|
|
// const formattedAppointments = computed(() => {
|
|
// return getHistory.value.map(getHistory => ({
|
|
// ...getHistory,
|
|
// // patient_name: getFullName(appointment.first_name, appointment.last_name),
|
|
// }));
|
|
// });
|
|
|
|
function getFullName(firstName, lastName) {
|
|
// You may need to adjust this function based on your actual data structure
|
|
// For example, if you have separate first name and last name properties in each appointment object
|
|
return firstName + ' ' + lastName; // For now, just return the first name
|
|
}
|
|
|
|
// const filteredDesserts = computed(() => {
|
|
// // Perform filtering based on the search term
|
|
// return getHistory.value.filter(history =>
|
|
// history.start_time.toLowerCase().includes(search.value.toLowerCase())
|
|
// );
|
|
// });
|
|
</script>
|
|
<template>
|
|
<VRow>
|
|
<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>
|
|
<VCol cols="12">
|
|
<VCard title="Preceptions">
|
|
<v-card flat>
|
|
<v-card-title class="d-flex align-center pe-2">
|
|
<!-- <v-select label="April(Month to date)" v-model="selectedFilter" :items="filter"
|
|
item-title="value" item-value="key" @update:modelValue="handleDateInput"></v-select> -->
|
|
<!-- <v-text-field v-model="search" prepend-inner-icon="mdi-magnify" density="compact" label="Search"
|
|
single-line flat hide-details variant="solo-filled"></v-text-field> -->
|
|
<v-spacer></v-spacer>
|
|
<v-spacer></v-spacer>
|
|
<v-spacer></v-spacer>
|
|
</v-card-title>
|
|
|
|
<v-data-table :headers="headers" :items="getHistory">
|
|
</v-data-table>
|
|
|
|
</v-card>
|
|
|
|
</VCard>
|
|
</VCol>
|
|
|
|
</VRow>
|
|
|
|
</template>
|