fixes
This commit is contained in:
Muhammad Shahzad
parent
f379d8c2c8
commit
e47a9eed61
@ -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'
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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',
|
||||
],
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user