fixes

resources/js/pages/patients/patients.vue

@@ -1,7 +1,5 @@
 <script setup>
-
-
-
+import { onBeforeMount, onMounted, onUnmounted } from 'vue';
 import { useStore } from 'vuex';
 const store = useStore()
 const editDialog = ref(false)
@@ -34,9 +32,11 @@ const selectedOptions = [
   
 ]
 
-    const refVForm = ref(null)
-
+const refVForm = ref(null)
 
+onBeforeMount(async () => {});
+onMounted(async () => {});
+onUnmounted(async () => {});
 const formatPhoneNumber = () => {
   console.log(editedItem.value)
   // Remove non-numeric characters from the input
@@ -53,6 +53,10 @@ const formatPhoneNumber = () => {
 };
 // headers
 const headers = [
+{
+    title: 'ID',
+    key: 'id',
+  },
   {
     title: 'NAME',
     key: 'name',
@@ -111,6 +115,7 @@ const editItem = item => {
 }
 
 const deleteItem = item => {
+  console.log('del',item)
   editedIndex.value = patientList.value.indexOf(item)
   editedItem.value = { ...item }
   deleteDialog.value = true
@@ -132,17 +137,32 @@ const save = async () => {
   const { valid } = await refVForm.value.validate()
   console.log(valid)
   if (valid) {
+    console.log('editedItem.value',editedItem.value);
     if (editedIndex.value > -1)
-        Object.assign(patientList.value[editedIndex.value], editedItem.value)
-  else
-     patientList.value.push(editedItem.value)
+    {
+      await store.dispatch('patientUpdate',{
+        id: editedItem.value.id,
+        first_name: editedItem.value.first_name,
+        last_name: editedItem.value.last_name,
+        email: editedItem.value.email,
+        phone_no: editedItem.value.phone_no,
+        dob: editedItem.value.dob,
+      })
+      Object.assign(patientList.value[editedIndex.value], editedItem.value)
+    }else{
+      patientList.value.push(editedItem.value)
+    }
   close()
   }
  
   
 }
 
-const deleteItemConfirm = () => {
+const deleteItemConfirm = async () => {
+  console.log('editedIndex.value',editedIndex.value,editedItem.value.id)
+  await store.dispatch('patientDelete',{
+    id: editedItem.value.id
+  })
   patientList.value.splice(editedIndex.value, 1)
   closeDelete()
 }
@@ -192,6 +212,9 @@ onMounted(() => {
         :items-per-page="5"
         class="text-no-wrap"
       >
+      <template #item.id="{ item }">
+    {{ item.id }}
+  </template>
         <!-- full name -->
         <template #item.name="{ item }">
           <div class="d-flex align-center">