321 lines
11 KiB
Vue
321 lines
11 KiB
Vue
<script setup>
|
|
import avatar1 from "@images/avatars/avatar-1.png";
|
|
import { ref, reactive, computed, onMounted } from "vue";
|
|
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_no: undefined,
|
|
});
|
|
const accountData = {
|
|
avatarImg: avatar1,
|
|
first_name: "",
|
|
last_name: "",
|
|
email: "",
|
|
phone_no: "",
|
|
};
|
|
|
|
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 = async (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;
|
|
}
|
|
ImageBase64.value = fileReader.result.split(",")[1];
|
|
store.dispatch("profilePicPatient", {
|
|
image: ImageBase64.value, //ecelData,
|
|
});
|
|
};
|
|
}
|
|
};
|
|
onMounted(async () => {
|
|
await store.dispatch("patientDetial");
|
|
let list = await store.getters.getPatientDetail;
|
|
console.log("list", list);
|
|
accountDataLocal.value.email = list.email;
|
|
accountDataLocal.value.first_name = list.first_name;
|
|
accountDataLocal.value.last_name = list.last_name;
|
|
accountDataLocal.value.phone_no = list.phone_no;
|
|
if (!list.profile_picture) {
|
|
accountDataLocal.value.avatarImg = avatar1;
|
|
} else {
|
|
accountDataLocal.value.avatarImg = list.profile_picture;
|
|
}
|
|
});
|
|
// reset avatar image
|
|
const resetAvatar = () => {
|
|
accountDataLocal.value.avatarImg = accountData.avatarImg;
|
|
};
|
|
|
|
const timezones = [
|
|
"(GMT-11:00) International Date Line West",
|
|
"(GMT-11:00) Midway Island",
|
|
"(GMT-10:00) Hawaii",
|
|
"(GMT-09:00) Alaska",
|
|
"(GMT-08:00) Pacific Time (US & Canada)",
|
|
"(GMT-08:00) Tijuana",
|
|
"(GMT-07:00) Arizona",
|
|
"(GMT-07:00) Chihuahua",
|
|
"(GMT-07:00) La Paz",
|
|
"(GMT-07:00) Mazatlan",
|
|
"(GMT-07:00) Mountain Time (US & Canada)",
|
|
"(GMT-06:00) Central America",
|
|
"(GMT-06:00) Central Time (US & Canada)",
|
|
"(GMT-06:00) Guadalajara",
|
|
"(GMT-06:00) Mexico City",
|
|
"(GMT-06:00) Monterrey",
|
|
"(GMT-06:00) Saskatchewan",
|
|
"(GMT-05:00) Bogota",
|
|
"(GMT-05:00) Eastern Time (US & Canada)",
|
|
"(GMT-05:00) Indiana (East)",
|
|
"(GMT-05:00) Lima",
|
|
"(GMT-05:00) Quito",
|
|
"(GMT-04:00) Atlantic Time (Canada)",
|
|
"(GMT-04:00) Caracas",
|
|
"(GMT-04:00) La Paz",
|
|
"(GMT-04:00) Santiago",
|
|
"(GMT-03:30) Newfoundland",
|
|
"(GMT-03:00) Brasilia",
|
|
"(GMT-03:00) Buenos Aires",
|
|
"(GMT-03:00) Georgetown",
|
|
"(GMT-03:00) Greenland",
|
|
"(GMT-02:00) Mid-Atlantic",
|
|
"(GMT-01:00) Azores",
|
|
"(GMT-01:00) Cape Verde Is.",
|
|
"(GMT+00:00) Casablanca",
|
|
"(GMT+00:00) Dublin",
|
|
"(GMT+00:00) Edinburgh",
|
|
"(GMT+00:00) Lisbon",
|
|
"(GMT+00:00) London",
|
|
];
|
|
|
|
const currencies = [
|
|
"USD",
|
|
"EUR",
|
|
"GBP",
|
|
"AUD",
|
|
"BRL",
|
|
"CAD",
|
|
"CNY",
|
|
"CZK",
|
|
"DKK",
|
|
"HKD",
|
|
"HUF",
|
|
"INR",
|
|
];
|
|
|
|
const onSubmit = async () => {
|
|
const { valid } = await refVForm.value.validate();
|
|
console.log(valid);
|
|
if (valid) {
|
|
try {
|
|
console.log(ImageBase64.value);
|
|
await store.dispatch("profileUpdatePatient", {
|
|
first_name: accountDataLocal.value.first_name,
|
|
last_name: accountDataLocal.value.last_name,
|
|
phone_no: accountDataLocal.value.phone_no,
|
|
image: ImageBase64.value, //ecelData,
|
|
});
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
// await store.dispatch("patientDetial");
|
|
//let list = await store.getters.getPatientDetail;
|
|
//console.log("list", list);
|
|
//accountDataLocal.value.avatarImg = list.profile_picture;
|
|
// accountDataLocal.value.name = list.name;
|
|
//accountDataLocal.value.last_name = list.last_name;
|
|
// accountDataLocal.value.phone_no = list.phone_no;
|
|
}
|
|
};
|
|
|
|
const formatPhoneNumber = () => {
|
|
// Remove non-numeric characters from the input
|
|
const numericValue = accountDataLocal.value.phone_no.replace(/\D/g, "");
|
|
|
|
// Apply formatting logic
|
|
if (numericValue.length <= 10) {
|
|
accountDataLocal.value.phone_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);
|
|
accountDataLocal.value.phone_no = truncatedValue.replace(
|
|
/(\d{3})(\d{3})(\d{4})/,
|
|
"($1) $2-$3"
|
|
);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<VDialog
|
|
v-model="store.getters.getIsLoading"
|
|
width="110"
|
|
height="150"
|
|
color="primary"
|
|
>
|
|
<VCardText class="" style="color: white !important">
|
|
<div class="demo-space-x">
|
|
<VProgressCircular :size="40" color="primary" indeterminate />
|
|
</div>
|
|
</VCardText>
|
|
</VDialog>
|
|
<VRow>
|
|
<VCol cols="12">
|
|
<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
|
|
size="100"
|
|
class="me-6"
|
|
:image="accountDataLocal.avatarImg"
|
|
/>
|
|
|
|
<!-- 👉 Upload Photo -->
|
|
<form class="d-flex flex-column justify-center gap-4">
|
|
<div class="d-flex flex-wrap gap-4">
|
|
<VBtn
|
|
color="primary"
|
|
@click="refInputEl?.click()"
|
|
>
|
|
<VIcon
|
|
icon="ri-upload-cloud-line"
|
|
class="d-sm-none"
|
|
/>
|
|
<span class="d-none d-sm-block"
|
|
>Upload Profile Image</span
|
|
>
|
|
</VBtn>
|
|
<input
|
|
ref="refInputEl"
|
|
type="file"
|
|
name="file"
|
|
accept=".jpeg,.png,.jpg,GIF"
|
|
hidden
|
|
@input="changeAvatar"
|
|
/>
|
|
</div>
|
|
<p class="text-body-1 mb-0">
|
|
Allowed JPG, GIF or PNG. Max size of 800K
|
|
</p>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 👉 Form -->
|
|
<VForm ref="refVForm">
|
|
<VRow>
|
|
<!-- 👉 First Name -->
|
|
<VCol md="6" cols="12">
|
|
<VTextField
|
|
v-model="accountDataLocal.first_name"
|
|
label="Name"
|
|
:rules="[requiredName]"
|
|
:error-messages="errors.name"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Last Name -->
|
|
<VCol md="6" cols="12">
|
|
<VTextField
|
|
v-model="accountDataLocal.last_name"
|
|
placeholder="Doe"
|
|
label="Last Name"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Email -->
|
|
<VCol cols="12" md="6">
|
|
<VTextField
|
|
readonly
|
|
v-model="accountDataLocal.email"
|
|
label="E-mail"
|
|
placeholder="johndoe@gmail.com"
|
|
type="email"
|
|
:rules="[requiredEmail, emailValidator]"
|
|
:error-messages="errors.email"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Organization -->
|
|
|
|
<!-- 👉 Phone -->
|
|
<VCol cols="12" md="6">
|
|
<VTextField
|
|
v-model="accountDataLocal.phone_no"
|
|
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>
|
|
|
|
<!-- 👉 Form Actions -->
|
|
<VCol cols="12" class="d-flex flex-wrap gap-4">
|
|
<VBtn @click.prevent="onSubmit"
|
|
>Save changes</VBtn
|
|
>
|
|
</VCol>
|
|
</VRow>
|
|
</VForm>
|
|
</VCardText>
|
|
</VCard>
|
|
</VCol>
|
|
</VRow>
|
|
|
|
<!-- Confirm Dialog -->
|
|
<!-- <ConfirmDialog
|
|
v-model:isDialogVisible="isConfirmDialogOpen"
|
|
confirmation-question="Are you sure you want to deactivate your account?"
|
|
confirm-title="Deactivated!"
|
|
confirm-msg="Your account has been deactivated successfully."
|
|
cancel-title="Cancelled"
|
|
cancel-msg="Account Deactivation Cancelled!"
|
|
/> -->
|
|
</template>
|