initial commit

resources/js/views/pages/tables/Labkit.vue

@@ -0,0 +1,85 @@
+<script setup>
+import axios from '@axios';
+import { ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+const router = useRouter()
+const route = useRoute()
+const appiontments = ref([]);
+const queueNumber = ref();
+const isDialogVisible = ref(false);
+const isLoadingVisible = ref(true);
+onMounted(() => {
+    appiontments.value = [];
+    const access_token = localStorage.getItem('access_token');
+    axios.post('/agent/api/get-appointment-list', {
+        headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${access_token}`
+        }
+    })
+        .then(response => {
+            appiontments.value = response.data;
+            // console.lg("appiontments",appiontments);
+            isLoadingVisible.value = false;
+        })
+        .catch(error => {
+            console.error(error);
+            appiontments.value = [];
+        });
+})
+const search = ref('');
+const headers = [
+    { key: 'appointment_id', title: 'ID' },
+    { key: 'patient_name', title: 'Patient Name' },
+    { key: 'appointment_time', title: 'Staus' },
+    { key: 'id', title: 'Action' },
+];
+const filteredDesserts = computed(() => {
+    // Perform filtering based on the search term
+    return appiontments.value.filter(dessert =>
+        dessert.name.toLowerCase().includes(search.value.toLowerCase())
+    );
+});
+
+
+const formattedAppointments = computed(() => {
+    return appiontments.value.map(appointment => ({
+        ...appointment,
+        appointment_id: appointment.id,
+        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
+    console.log(firstName + ' ' + lastName)
+    return firstName + ' ' + lastName; // For now, just return the first name
+}
+
+const openDialog = (item) => {
+
+    localStorage.setItem('appiontment-id', item.id);
+    router.push('patient-labkit-detail');
+
+};
+
+</script>
+<template>
+    <v-card flat>
+        <v-card-title class="d-flex align-center pe-2">
+            <v-spacer></v-spacer>
+            <v-spacer></v-spacer>
+            <v-spacer></v-spacer>
+
+            <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-card-title>
+
+        <v-data-table :headers="headers" :items="formattedAppointments" :search="search">
+            <template #item.id="{ item }">
+                <!-- <VBtn class="text-capitalize text-white" @click="openDialog(item)"> Detail</VBtn> -->
+            </template>
+        </v-data-table>
+    </v-card>
+</template>