322 lines
13 KiB
Vue
322 lines
13 KiB
Vue
<script setup>
|
|
import axios from '@axios';
|
|
import avatar1 from "@images/avatars/avatar-1.png";
|
|
import {
|
|
emailValidator,
|
|
requiredEmail,
|
|
requiredLastName,
|
|
requiredName,
|
|
requiredPhone,
|
|
requiredValidator,
|
|
validUSAPhone
|
|
} from '@validators';
|
|
import { onMounted } from 'vue';
|
|
import { useStore } from "vuex";
|
|
const getIsTonalSnackbarVisible = ref(false);
|
|
|
|
const store = useStore();
|
|
const errors = ref({
|
|
name: undefined,
|
|
last_name: undefined,
|
|
phone: undefined,
|
|
email: undefined,
|
|
dob: undefined,
|
|
gender: undefined,
|
|
marital_status: undefined,
|
|
height: undefined,
|
|
weight: undefined,
|
|
|
|
})
|
|
const refInputEl = ref();
|
|
const isTonalSnackbarVisible = ref(false)
|
|
const patientResponse = ref(false)
|
|
const isLoadingVisible = ref(false)
|
|
const infoVForm = ref()
|
|
const name = ref()
|
|
const last_name = ref()
|
|
const email = ref(null)
|
|
const phone = ref(null)
|
|
const dob = ref()
|
|
const gender = ref()
|
|
const martialStatus = ref(null)
|
|
const height = ref(null)
|
|
const weight = ref(null)
|
|
const patientId = ref()
|
|
const ImageBase64 = ref();
|
|
const accountData = {
|
|
avatarImg: avatar1,
|
|
};
|
|
const accountDataLocal = ref(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,
|
|
});
|
|
};
|
|
}
|
|
};
|
|
const genders = ref([
|
|
{ name: 'Male', abbreviation: 'Male' },
|
|
{ name: 'Female', abbreviation: 'Female' },
|
|
{ name: 'Other', abbreviation: 'Other' },
|
|
]);
|
|
|
|
const maritalStatuses = ref([
|
|
{ name: 'Single', abbreviation: 'Single' },
|
|
{ name: 'Married', abbreviation: 'Married' },
|
|
{ name: 'Divorced', abbreviation: 'Divorced' },
|
|
]);
|
|
|
|
const heights = ref([
|
|
{ name: '5 ft 0 in', abbreviation: '5 ft 0 in' },
|
|
{ name: '5 ft 1 in', abbreviation: '5 ft 1 in' },
|
|
{ name: '5 ft 2 in', abbreviation: '5 ft 2 in' },
|
|
{ name: '5 ft 3 in', abbreviation: '5 ft 3 in' },
|
|
{ name: '5 ft 4 in', abbreviation: '5 ft 4 in' },
|
|
{ name: '5 ft 5 in', abbreviation: '5 ft 5 in' },
|
|
{ name: '5 ft 6 in', abbreviation: '5 ft 6 in' },
|
|
{ name: '5 ft 7 in', abbreviation: '5 ft 7 in' },
|
|
{ name: '5 ft 8 in', abbreviation: '5 ft 8 in' },
|
|
{ name: '5 ft 9 in', abbreviation: '5 ft 9 in' },
|
|
{ name: '5 ft 10 in', abbreviation: '5 ft 10 in' },
|
|
{ name: '5 ft 11 in', abbreviation: '5 ft 11 in' },
|
|
{ name: '6 ft 0 in', abbreviation: '6 ft 0 in' },
|
|
{ name: '6 ft 1 in', abbreviation: '6 ft 1 in' },
|
|
{ name: '6 ft 2 in', abbreviation: '6 ft 2 in' },
|
|
{ name: '6 ft 3 in', abbreviation: '6 ft 3 in' },
|
|
{ name: '6 ft 4 in', abbreviation: '6 ft 4 in' },
|
|
{ name: '6 ft 5 in', abbreviation: '6 ft 5 in' },
|
|
{ name: '6 ft 6 in', abbreviation: '6 ft 6 in' },
|
|
{ name: '6 ft 7 in', abbreviation: '6 ft 7 in' },
|
|
{ name: '6 ft 8 in', abbreviation: '6 ft 8 in' },
|
|
{ name: '6 ft 9 in', abbreviation: '6 ft 9 in' },
|
|
{ name: '6 ft 10 in', abbreviation: '6 ft 10 in' },
|
|
{ name: '6 ft 11 in', abbreviation: '6 ft 11 in' },
|
|
{ name: '7 ft 0 in', abbreviation: '7 ft 0 in' },
|
|
]);
|
|
|
|
onMounted(async () => {
|
|
await getPatientInfo()
|
|
await store.dispatch("patientDetial");
|
|
let list = await store.getters.getPatientDetail;
|
|
if (!list.profile_picture) {
|
|
accountDataLocal.value.avatarImg = avatar1;
|
|
} else {
|
|
accountDataLocal.value.avatarImg = list.profile_picture;
|
|
}
|
|
})
|
|
|
|
const getPatientInfo = async () => {
|
|
const patient_id = localStorage.getItem('patient_id')
|
|
const access_token = localStorage.getItem('access_token');
|
|
isLoadingVisible.value = true;
|
|
await axios.post('/api/agent-last-appointment-detail/' + patient_id, {
|
|
headers: {
|
|
'Authorization': `Bearer ${access_token}`,
|
|
}
|
|
})
|
|
.then(response => {
|
|
console.log('Response:', response.data);
|
|
if (response.data) {
|
|
let patientData = response.data.patient
|
|
|
|
name.value = patientData.first_name;
|
|
last_name.value = patientData.last_name
|
|
email.value = patientData.email
|
|
phone.value = patientData.phone_no
|
|
dob.value = patientData.dob;
|
|
gender.value = patientData.gender;
|
|
martialStatus.value = patientData.marital_status;
|
|
height.value = patientData.height;
|
|
weight.value = patientData.weight;
|
|
isLoadingVisible.value = false;
|
|
} else {
|
|
isLoadingVisible.value = false;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
});
|
|
}
|
|
|
|
const formatPhoneNumber = () => {
|
|
// Remove non-numeric characters from the input
|
|
const numericValue = phone.value.replace(/\D/g, '');
|
|
|
|
// Apply formatting logic
|
|
if (numericValue.length <= 10) {
|
|
phone.value = 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);
|
|
phone.value = truncatedValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
|
|
}
|
|
};
|
|
const getCurrentDate = () => {
|
|
const today = new Date();
|
|
const year = today.getFullYear();
|
|
let month = today.getMonth() + 1;
|
|
let day = today.getDate();
|
|
|
|
// Format the date to match the input type="date" format
|
|
month = month < 10 ? `0${month}` : month;
|
|
day = day < 10 ? `0${day}` : day;
|
|
|
|
return `${year}-${month}-${day}`;
|
|
};
|
|
const onSubmit = async () => {
|
|
infoVForm.value?.validate().then(async ({ valid: isValid }) => {
|
|
console.log('isValid ', isValid)
|
|
if (isValid)
|
|
await saveInfo()
|
|
})
|
|
}
|
|
|
|
const saveInfo = async () => {
|
|
isLoadingVisible.value = true;
|
|
await axios.post('/api/update-patient-detail', {
|
|
first_name: name.value,
|
|
last_name: last_name.value,
|
|
phone_no: phone.value,
|
|
email: email.value,
|
|
dob: dob.value,
|
|
gender: gender.value,
|
|
marital_status: martialStatus.value,
|
|
height: height.value,
|
|
weight: weight.value,
|
|
}).then(r => {
|
|
console.log("Info Save", r.data);
|
|
isTonalSnackbarVisible.value = true;
|
|
patientResponse.value = r.data.message;
|
|
isLoadingVisible.value = false;
|
|
}).catch(e => {
|
|
console.log(e.response);
|
|
const { errors: formErrors } = e.response.data.errors;
|
|
errors.value = e.response.data.errors;
|
|
isLoadingVisible.value = false;
|
|
console.error("Error", e.response.data.errors)
|
|
});
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<VSnackbar v-model="isTonalSnackbarVisible" :timeout="5000" location="top end" variant="flat" color="success">
|
|
{{ patientResponse }}
|
|
</VSnackbar>
|
|
|
|
<VDialog v-model="isLoadingVisible" 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>
|
|
<!-- 👉 Form -->
|
|
<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>
|
|
<VForm class="mt-6" ref="infoVForm" @submit.prevent="onSubmit">
|
|
<VRow>
|
|
<!-- 👉 First Name -->
|
|
<VCol md="4" cols="12">
|
|
<VTextField v-model="name" placeholder="John" label="First Name" :rules="[requiredName]"
|
|
:error-messages="errors.name" />
|
|
</VCol>
|
|
|
|
<!-- 👉 Last Name -->
|
|
<VCol md="4" cols="12">
|
|
<VTextField v-model="last_name" placeholder="Doe" label="Last Name"
|
|
:rules="[requiredLastName]" :error-messages="errors.last_name" />
|
|
</VCol>
|
|
|
|
<!-- 👉 Email -->
|
|
<VCol cols="12" md="4">
|
|
<VTextField v-model="email" label="E-mail" placeholder="johndoe@gmail.com" type="email"
|
|
:rules="[requiredEmail, emailValidator]" :error-messages="errors.email"
|
|
disabled="" />
|
|
</VCol>
|
|
|
|
<!-- 👉 Phone -->
|
|
<VCol cols="12" md="4">
|
|
<VTextField v-model="phone" label="Phone Number" pattern="^\(\d{3}\) \d{3}-\d{4}$"
|
|
:rules="[requiredPhone, validUSAPhone]" :error-messages="errors.phone"
|
|
placeholder="(917) 543-9876" @input="formatPhoneNumber" max="14" />
|
|
</VCol>
|
|
|
|
<VCol md="4" cols="12">
|
|
<VTextField v-model="dob" :max="getCurrentDate()" label="Date of Birth"
|
|
placeholder="Date of Birth" type="date" :rules="[requiredValidator]" />
|
|
</VCol>
|
|
<VCol md="4" cols="12">
|
|
<v-select v-model="gender" label="Select Gender" :items="genders" item-title="name"
|
|
item-value="abbreviation" :rules="[requiredValidator]"
|
|
:error-messages="errors.gender">
|
|
</v-select>
|
|
</VCol>
|
|
<VCol cols="12" md="4">
|
|
<v-select v-model="martialStatus" label="Select Marital Status" :items="maritalStatuses"
|
|
item-title="name" item-value="abbreviation" :rules="[requiredValidator]"
|
|
:error-messages="errors.martial_status">
|
|
</v-select>
|
|
</VCol>
|
|
<VCol cols="12" md="4">
|
|
<v-select v-model="height" label="Select Height" :items="heights" item-title="name"
|
|
item-value="abbreviation" :rules="[requiredValidator]"
|
|
:error-messages="errors.height">
|
|
</v-select>
|
|
</VCol>
|
|
<VCol cols="12" md="4">
|
|
<VTextField v-model="weight" label="Weight" :rules="[requiredValidator]"
|
|
:error-messages="errors.weight" />
|
|
</VCol>
|
|
|
|
<!-- 👉 Form Actions -->
|
|
<VCol cols="12" class="d-flex flex-wrap gap-4">
|
|
<VBtn type="submit">Save changes</VBtn>
|
|
|
|
<!-- <VBtn color="secondary" variant="tonal" type="reset">
|
|
Reset
|
|
</VBtn> -->
|
|
</VCol>
|
|
</VRow>
|
|
</VForm>
|
|
</VCardText>
|
|
</VCard>
|
|
</VCol>
|
|
</VRow>
|
|
</template>
|