From e47a9eed61bd7f28895d788d40e20aa2be82d3cd Mon Sep 17 00:00:00 2001
From: Muhammad Shahzad <shahzadm287@gmail.com>
Date: Thu, 6 Jun 2024 04:22:18 +0500
Subject: [PATCH] fixes

---
 resources/js/@core/utils/validators.js        |   6 +
 .../AccountSettingsAccount.vue                | 162 +++++++++++++-----
 vite.config.js                                |   8 +-
 3 files changed, 128 insertions(+), 48 deletions(-)

diff --git a/resources/js/@core/utils/validators.js b/resources/js/@core/utils/validators.js
index 46d16f0..fdb710e 100644
--- a/resources/js/@core/utils/validators.js
+++ b/resources/js/@core/utils/validators.js
@@ -112,6 +112,12 @@ export const requiredFirstName = value => {
   
   return !!String(value).trim().length || 'Name is required'
 }
+export const requiredName = value => {
+if (isNullOrUndefined(value) || isEmptyArray(value) || value === false)
+  return 'Name field is required'
+
+return !!String(value).trim().length || 'Name is required'
+}
 export const requiredLastName = value => {
 if (isNullOrUndefined(value) || isEmptyArray(value) || value === false)
   return 'Last Name field is required'
diff --git a/resources/js/views/pages/account-settings/AccountSettingsAccount.vue b/resources/js/views/pages/account-settings/AccountSettingsAccount.vue
index 5c17c80..de5ff09 100644
--- a/resources/js/views/pages/account-settings/AccountSettingsAccount.vue
+++ b/resources/js/views/pages/account-settings/AccountSettingsAccount.vue
@@ -1,48 +1,85 @@
 <script setup>
 import avatar1 from '@images/avatars/avatar-1.png';
+import {
+emailValidator,
+requiredEmail,
+requiredName,
+requiredPhone,
+validUSAPhone
+} from '@validators';
 import { useStore } from 'vuex';
+
 const store = useStore();
+let imageBlob = null;
+const profileData = ref([]);
+const errors = ref({
+  name: undefined,
+  email: undefined,
+  phone:undefined,
+})
 const accountData = {
   avatarImg: avatar1,
-  firstName: 'john',
-  lastName: 'Doe',
-  email: 'johnDoe@example.com',
-  org: 'ThemeSelection',
-  phone: '+1 (917) 543-9876',
-  address: '123 Main St, New York, NY 10001',
-  state: 'New York',
-  zip: '10001',
-  country: ['USA'],
-  language: ['English'],
-  timezone: '(GMT-11:00) International Date Line West',
-  currency: 'USD',
+  name: '',
+  last_name: '',
+  email: '',
+  phone: '',
 }
 
+const refVForm = ref()
 const refInputEl = ref()
 const isConfirmDialogOpen = ref(false)
 const accountDataLocal = ref(structuredClone(accountData))
 const isAccountDeactivated = ref(false)
 const validateAccountDeactivation = [v => !!v || 'Please confirm account deactivation']
-
+const getIsTonalSnackbarVisible = ref(false);
+const ImageBase64 = ref();
 const resetForm = () => {
   accountDataLocal.value = structuredClone(accountData)
 }
 
+// const changeAvatar = file => {
+//   const fileReader = new FileReader()
+//   const { files } = file.target
+//   if (files && files.length) {
+//     fileReader.readAsDataURL(files[0])
+//     fileReader.onload = () => {
+//       if (typeof fileReader.result === 'string')
+//         accountDataLocal.value.avatarImg = fileReader.result
+//         console.log("daas",accountDataLocal.value.avatarImg);
+//     }
+//   }
+// }
 const changeAvatar = file => {
   const fileReader = new FileReader()
   const { files } = file.target
   if (files && files.length) {
     fileReader.readAsDataURL(files[0])
     fileReader.onload = () => {
-      if (typeof fileReader.result === 'string')
-        accountDataLocal.value.avatarImg = fileReader.result
+      if (typeof fileReader.result === 'string') {
+         accountDataLocal.value.avatarImg = fileReader.result
+      }
+       ImageBase64.value = fileReader.result.split(',')[1];
+       
     }
   }
 }
 onMounted(async () => {
   await store.dispatch('adminDetial');
-  let list = await store.getters.getAdminDetail
-   console.log(list)
+  // profileData.value = 
+  let list  = await store.getters.getAdminDetail
+  accountDataLocal.value.email = list.email
+  // accountData.name = profileData.value.name;
+  accountDataLocal.value.name = list.name
+  // accountData.lastName = profileData.value.last_name;
+  accountDataLocal.value.lastName = list.last_name;
+  // accountData.phone = profileData.value.phone_no;
+  accountDataLocal.value.phone = list.phone_no
+  // accountData.avatarImg = profileData.value.profile_image ? profileData.value.profile_image : avatar1;
+  if(!list.image_path){
+    accountDataLocal.value.avatarImg = avatar1;
+  }else{
+    accountDataLocal.value.avatarImg = list.image_path
+  } 
   
 });
 // reset avatar image
@@ -106,6 +143,48 @@ const currencies = [
   'HUF',
   'INR',
 ]
+
+ 
+const onSubmit = async () => {
+  const { valid } = await refVForm.value.validate()
+  console.log(valid)
+  if (valid) {
+    try {
+          console.log(ImageBase64.value);
+            await store.dispatch('profileUpdate',{
+              name: accountDataLocal.value.name,
+              last_name:  accountDataLocal.value.last_name,
+              phone: accountDataLocal.value.phone,
+              image: ImageBase64.value, //ecelData,
+            })
+        } catch (error) {
+          console.error(error)
+        }
+   await store.dispatch('siteSetting');
+  let list = await store.getters.getSiteSetting 
+console.log('list',list)
+  accountDataLocal.value.avatarImg = list.logo
+  accountDataLocal.value.name = list.first_name
+  accountDataLocal.value.last_name = list.last_name
+  accountDataLocal.value.phone = list.phone
+  }
+}  
+
+
+
+const formatPhoneNumber = () => {
+  // Remove non-numeric characters from the input
+  const numericValue = accountDataLocal.value.phone.replace(/\D/g, '');
+
+  // Apply formatting logic
+  if (numericValue.length <= 10) {
+    accountDataLocal.value.phone = 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);
+    accountDataLocal.value.phone = truncatedValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
+  }
+};
 </script>
 
 <template>
@@ -114,6 +193,12 @@ const currencies = [
       <VCard>
         <VCardText>
           <div class="d-flex mb-10">
+            <VSnackbar v-model="getIsTonalSnackbarVisible" :timeout="5000" location="top end" variant="flat"
+              color="success">
+              <VIcon
+                    class="ri-success-line success-icon"
+                  /> Profile Update Successfully
+            </VSnackbar>
             <!-- 👉 Avatar -->
             <VAvatar
               rounded
@@ -133,7 +218,7 @@ const currencies = [
                     icon="ri-upload-cloud-line"
                     class="d-sm-none"
                   />
-                  <span class="d-none d-sm-block">Upload new photo</span>
+                  <span class="d-none d-sm-block">Upload Logo</span>
                 </VBtn>
                 <input
                   ref="refInputEl"
@@ -143,18 +228,6 @@ const currencies = [
                   hidden
                   @input="changeAvatar"
                 >
-                <VBtn
-                  type="reset"
-                  color="error"
-                  variant="outlined"
-                  @click="resetAvatar"
-                >
-                  <span class="d-none d-sm-block">Reset</span>
-                  <VIcon
-                    icon="ri-refresh-line"
-                    class="d-sm-none"
-                  />
-                </VBtn>
               </div>
               <p class="text-body-1 mb-0">
                 Allowed JPG, GIF or PNG. Max size of 800K
@@ -163,7 +236,7 @@ const currencies = [
           </div>
 
           <!-- 👉 Form -->
-          <VForm>
+          <VForm ref="refVForm" @submit.prevent="onSubmit">
             <VRow>
               <!-- 👉 First Name -->
               <VCol
@@ -171,9 +244,10 @@ const currencies = [
                 cols="12"
               >
                 <VTextField
-                  v-model="accountDataLocal.firstName"
-                  placeholder="John"
-                  label="First Name"
+                  v-model="accountDataLocal.name"
+                label="Name"
+                :rules="[requiredName]"
+                :error-messages="errors.name"
                 />
               </VCol>
 
@@ -194,11 +268,13 @@ const currencies = [
                 cols="12"
                 md="6"
               >
-                <VTextField
+                <VTextField readonly
                   v-model="accountDataLocal.email"
                   label="E-mail"
                   placeholder="johndoe@gmail.com"
                   type="email"
+                  :rules="[requiredEmail, emailValidator]"
+                  :error-messages="errors.email"
                 />
               </VCol>
 
@@ -225,6 +301,11 @@ const currencies = [
                   v-model="accountDataLocal.phone"
                   label="Phone Number"
                   placeholder="+1 (917) 543-9876"
+                  :rules="[requiredPhone, validUSAPhone]"
+                  :error-messages="errors.phone"
+                  @input="formatPhoneNumber"
+                  max="14"
+                  pattern="^\(\d{3}\) \d{3}-\d{4}$"
                 />
               </VCol>
 
@@ -336,16 +417,7 @@ const currencies = [
                 cols="12"
                 class="d-flex flex-wrap gap-4"
               >
-                <VBtn>Save changes</VBtn>
-
-                <VBtn
-                  color="secondary"
-                  variant="outlined"
-                  type="reset"
-                  @click.prevent="resetForm"
-                >
-                  Reset
-                </VBtn>
+                <VBtn  type="submit">Save changes</VBtn>
               </VCol>
             </VRow>
           </VForm>
diff --git a/vite.config.js b/vite.config.js
index aef616a..e5a6625 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,8 +1,8 @@
-import laravel from 'laravel-vite-plugin'
-import { fileURLToPath } from 'node:url'
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
+import laravel from 'laravel-vite-plugin'
+import { fileURLToPath } from 'node:url'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import { VueRouterAutoImports, getPascalCaseRouteName } from 'unplugin-vue-router'
@@ -106,6 +106,8 @@ export default defineConfig({
       '@layouts': fileURLToPath(new URL('./resources/js/@layouts', import.meta.url)),
       '@images': fileURLToPath(new URL('./resources/images/', import.meta.url)),
       '@styles': fileURLToPath(new URL('./resources/styles/', import.meta.url)),
+      '@validators': fileURLToPath(new URL('./resources/js/@core/utils/validators',
+        import.meta.url)),
       '@configured-variables': fileURLToPath(new URL('./resources/styles/variables/_template.scss', import.meta.url)),
       '@db': fileURLToPath(new URL('./resources/js/plugins/fake-api/handlers/', import.meta.url)),
       '@api-utils': fileURLToPath(new URL('./resources/js/plugins/fake-api/utils/', import.meta.url)),
@@ -120,4 +122,4 @@ export default defineConfig({
       './resources/js/**/*.vue',
     ],
   },
-})
\ No newline at end of file
+})