fixes

2024-06-01 04:28:22 +05:00
parent 88c2df5145
commit fc0c654595
5 changed files with 438 additions and 181 deletions
--- a/resources/js/pages/labs/labs.vue
+++ b/resources/js/pages/labs/labs.vue
@@ -1,78 +1,79 @@
 <script setup>
-import data from '@/views/demos/forms/tables/data-table/datatable';

+
+
+import { useStore } from 'vuex';
+const store = useStore()
 const editDialog = ref(false)
 const deleteDialog = ref(false)
 const search = ref('')
 const defaultItem = ref({
-  responsiveId: '',
  id: -1,
  avatar: '',
-  fullName: '',
-  post: '',
+  name: '',
  email: '',
-  city: '',
-  startDate: '',
-  salary: -1,
-  age: '',
-  experience: '',
-  status: -1,
+  // dob: '',
+  phone_no: '',
+
 })

 const editedItem = ref(defaultItem.value)
 const editedIndex = ref(-1)
-const userList = ref([])
+const labsList = ref([])
 const isLoading=ref(false)
 // status options
 const selectedOptions = [
  {
-    text: 'Current',
+    text: 'Active',
    value: 1,
  },
  {
-    text: 'Professional',
+    text: 'InActive',
    value: 2,
  },
-  {
-    text: 'Rejected',
-    value: 3,
-  },
-  {
-    text: 'Resigned',
-    value: 4,
-  },
-  {
-    text: 'Applied',
-    value: 5,
-  },
+  
 ]

+    const refVForm = ref(null)
+
+
+const formatPhoneNumber = () => {
+  console.log(editedItem.value)
+  // Remove non-numeric characters from the input
+  const numericValue = editedItem.value.contact_no.replace(/\D/g, '');
+
+  // Apply formatting logic
+  if (numericValue.length <= 10) {
+    editedItem.value.contact_no = numericValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
+  } else {
+    // Limit the input to a maximum of 14 characters
+    const truncatedValue = numericValue.slice(0, 10);
+    editedItem.value.contact_no = truncatedValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
+  }
+};
 // headers
 const headers = [
+{
+    title: 'ID',
+    key: 'id',
+  },
  {
    title: 'NAME',
-    key: 'fullName',
+    key: 'name',
  },
  {
-    title: 'EMAIL',
-    key: 'email',
+    title: 'ADDRESS',
+    key: 'address',
  },
+  // {
+  //   title: 'Date Of Birth',
+  //   key: 'dob',
+  // },
  {
-    title: 'DATE',
-    key: 'startDate',
-  },
-  {
-    title: 'SALARY',
-    key: 'salary',
-  },
-  {
-    title: 'AGE',
-    key: 'age',
-  },
-  {
-    title: 'STATUS',
-    key: 'status',
+    title: 'CONTACT',
+    key: 'contact_no',
  },
+ 
  {
    title: 'ACTIONS',
    key: 'actions',
@@ -108,13 +109,13 @@ const resolveStatusVariant = status => {
 }

 const editItem = item => {
-  editedIndex.value = userList.value.indexOf(item)
+  editedIndex.value = labsList.value.indexOf(item)
  editedItem.value = { ...item }
  editDialog.value = true
 }

 const deleteItem = item => {
-  editedIndex.value = userList.value.indexOf(item)
+  editedIndex.value = labsList.value.indexOf(item)
  editedItem.value = { ...item }
  deleteDialog.value = true
 }
@@ -131,63 +132,83 @@ const closeDelete = () => {
  editedItem.value = { ...defaultItem.value }
 }

-const save = () => {
-  if (editedIndex.value > -1)
-    Object.assign(userList.value[editedIndex.value], editedItem.value)
-  else
-    userList.value.push(editedItem.value)
+const save = async () => {
+  const { valid } = await refVForm.value.validate()
+  console.log(valid)
+  if (valid) {
+    if (editedIndex.value > -1){
+      await store.dispatch('labUpdate',{
+        id: editedItem.value.id,
+        name: editedItem.value.name,
+        address: editedItem.value.address,
+        contact_no: editedItem.value.contact_no,
+      })
+      Object.assign(labsList.value[editedIndex.value], editedItem.value)
+    }else{
+      labsList.value.push(editedItem.value)
+    }
  close()
+  }
+ 
+  
 }

-const deleteItemConfirm = () => {
-  userList.value.splice(editedIndex.value, 1)
+const deleteItemConfirm = async() => {
+  console.log('editedIndex.value',editedIndex.value,editedItem.value.id)
+  await store.dispatch('labDelete',{
+    id: editedItem.value.id
+  })
+  labsList.value.splice(editedIndex.value, 1)
  closeDelete()
 }
+const getlabsList = computed(async () => {
+  store.dispatch('updateIsLoading', true)
+  await store.dispatch('labsList')
+  console.log('getLabsList',store.getters.getLabsList)
+    let list = store.getters.getLabsList
+    store.dispatch('updateIsLoading', false)
+  labsList.value = list
+    return labsList.value
+});

 onMounted(() => {
-  userList.value = JSON.parse(JSON.stringify(data))
+ 
+
 })
 </script>

 <template>
-  <VOverlay
-          v-model="isLoading"
-          contained
-          persistent
-          scroll-strategy="none"
-          class="align-center justify-center"
-        >
-          <VProgressCircular indeterminate />
-        </VOverlay>
-  <VCardText>
-      <VRow>
-        <VCol
-          cols="12"
-          offset-md="8"
-          md="4"
-        >
-          <VTextField
-            v-model="search"
-            label="Search"
-            placeholder="Search ..."
-            append-inner-icon="ri-search-line"
-            single-line
-            hide-details
-            dense
-            outlined
-          />
-        </VCol>
-      </VRow>
-    </VCardText>
+  <v-row>
+    <v-col cols="12" md="12" v-if="getlabsList">
+      <VCardText >
+          <VRow>
+            <VCol
+              cols="12"
+              offset-md="8"
+              md="4"
+            >
+              <VTextField
+                v-model="search"
+                label="Search"
+                placeholder="Search ..."
+                append-inner-icon="ri-search-line"
+                single-line
+                hide-details
+                dense
+                outlined
+              />
+            </VCol>
+          </VRow>
+        </VCardText>
      <VDataTable
        :headers="headers"
-        :items="userList"
+        :items="labsList"
        :search="search"
        :items-per-page="5"
        class="text-no-wrap"
      >
        <!-- full name -->
-        <template #item.fullName="{ item }">
+        <template #item.name="{ item }">
          <div class="d-flex align-center">
            <!-- avatar -->
            <VAvatar
@@ -203,11 +224,11 @@ onMounted(() => {
              <span
                v-else
                class="text-sm"
-              >{{ avatarText(item.fullName) }}</span>
+              >{{ avatarText(item.name) }}</span>
            </VAvatar>

            <div class="d-flex flex-column ms-3">
-              <span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ item.fullName }}</span>
+              <span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ item.name }}</span>
              <small>{{ item.post }}</small>
            </div>
          </div>
@@ -241,88 +262,62 @@ onMounted(() => {
          </div>
        </template>
      </VDataTable>
-   
+    </v-col>
+  </v-row>
  <!-- 👉 Edit Dialog  -->
  <VDialog
    v-model="editDialog"
-    max-width="800px"
+    max-width="600px"
  >
+  <VForm ref="refVForm" >
    <VCard>
      <VCardTitle>
-        <span class="headline">Edit Item</span>
+        <span class="headline">Edit Lab</span>
      </VCardTitle>

      <VCardText>
-        <VContainer>
+        <VContainer >
+         
          <VRow>
            <!-- fullName -->
-            <VCol
-              cols="12"
-              sm="6"
-              md="4"
-            >
+            <VCol cols="12" md="12">
              <VTextField
-                v-model="editedItem.fullName"
-                label="User name"
+                v-model="editedItem.name"
+                label="Name"
+                :rules="[requiredValidator]"
              />
            </VCol>

            <!-- email -->
-            <VCol
-              cols="12"
-              sm="6"
-              md="4"
-            >
+            <VCol cols="12" sm="12" md="12">
              <VTextField
-                v-model="editedItem.email"
-                label="Email"
+                v-model="editedItem.address"
+                label="Address"
+                :rules="[requiredValidator]"
              />
            </VCol>

-            <!-- salary -->
-            <VCol
-              cols="12"
-              sm="6"
-              md="4"
-            >
+         
+            <!-- <VCol cols="12" sm="6" md="12">
              <VTextField
-                v-model="editedItem.salary"
-                label="Salary"
-                prefix="$"
-                type="number"
+                v-model="editedItem.dob"
+                label="Date Of Birth"
              />
+            </VCol> -->
+            <VCol cols="12" sm="6" md="12">
+              <VTextField v-model="editedItem.contact_no" label="Phone Number" pattern="^\(\d{3}\) \d{3}-\d{4}$"
+                :rules="[requiredPhone, validUSAPhone]" placeholder="i.e. (000) 000-0000"
+                @input="formatPhoneNumber" max="14" density="comfortable" />
            </VCol>
+            

-            <!-- age -->
-            <VCol
-              cols="12"
-              sm="6"
-              md="4"
-            >
-              <VTextField
-                v-model="editedItem.age"
-                label="Age"
-                type="number"
-              />
-            </VCol>
-
-            <!-- start date -->
-            <VCol
-              cols="12"
-              sm="6"
-              md="4"
-            >
-              <VTextField
-                v-model="editedItem.startDate"
-                label="Date"
-              />
-            </VCol>
+         

            <!-- status -->
            <VCol
              cols="12"
-              sm="6"
-              md="4"
+
+              md="12"
            >
              <VSelect
                v-model="editedItem.status"
@@ -355,14 +350,16 @@ onMounted(() => {
        >
          Save
        </VBtn>
+        
      </VCardActions>
    </VCard>
+    </VForm>
  </VDialog>

  <!-- 👉 Delete Dialog  -->
  <VDialog
    v-model="deleteDialog"
-    max-width="600px"
+    max-width="500px"
  >
    <VCard>
      <VCardTitle>