initial commit
This commit is contained in:
@@ -0,0 +1,167 @@
|
||||
@page
|
||||
@attribute [Authorize(Roles = "Profiles")]
|
||||
@{
|
||||
ViewData["Title"] = "My Profile";
|
||||
}
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="grid-container">
|
||||
<div ref="mainGridRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" ref="mainModalRef" id="MainModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">{{ state.mainTitle }}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<input type="hidden" v-model="state.userId" id="UserId" name="UserId" />
|
||||
<form id="MainForm">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5>Main Info</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mb-0">
|
||||
<div class="col-md-6">
|
||||
<label for="FirstName">First Name</label>
|
||||
<input ref="firstNameRef" v-model="state.firstName" type="text" class="form-control" placeholder="">
|
||||
<label class="text-danger">{{ state.errors.firstName }}</label>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="LastName">Last Name</label>
|
||||
<input ref="lastNameRef" v-model="state.lastName" type="text" class="form-control" placeholder="">
|
||||
<label class="text-danger">{{ state.errors.lastName }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-0">
|
||||
<div class="col-12">
|
||||
<label for="CompanyName">Company Name</label>
|
||||
<textarea ref="companyNameRef" v-model="state.companyName" class="form-control" rows="3"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button"
|
||||
id="MainSaveButton"
|
||||
class="btn"
|
||||
v-bind:class="state.deleteMode ? 'btn-danger' : 'btn-primary'"
|
||||
v-on:click="handler.handleSubmit"
|
||||
v-bind:disabled="state.isSubmitting">
|
||||
<span class="spinner-border spinner-border-sm me-2" v-if="state.isSubmitting" role="status" aria-hidden="true"></span>
|
||||
<span v-if="!state.isSubmitting">{{ state.deleteMode ? 'Delete' : 'Save' }}</span>
|
||||
<span v-else>{{ state.deleteMode ? 'Deleting...' : 'Saving...' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal untuk Change Password -->
|
||||
<div class="modal fade" ref="changePasswordModalRef" id="ChangePasswordModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">{{ state.changePasswordTitle }}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<input type="hidden" v-model="state.userId" id="UserId" name="UserId" />
|
||||
<form id="ChangePasswordForm">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header bg-primary text-white">
|
||||
Old Password
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label for="OldPassword">Old Password</label>
|
||||
<input ref="oldPasswordRef" v-model="state.oldPassword" type="password" class="form-control" placeholder="Enter old password">
|
||||
<label class="text-danger">{{ state.errors.oldPassword }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header bg-success text-white">
|
||||
New Password
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label for="NewPassword">New Password</label>
|
||||
<input ref="newPasswordRef" v-model="state.newPassword" type="password" class="form-control" placeholder="Enter new password">
|
||||
<label class="text-danger">{{ state.errors.newPassword }}</label>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="ConfirmNewPassword">Confirm New Password</label>
|
||||
<input ref="confirmNewPasswordRef" v-model="state.confirmNewPassword" type="password" class="form-control" placeholder="Confirm new password">
|
||||
<label class="text-danger">{{ state.errors.confirmNewPassword }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" id="ChangePasswordSaveButton" class="btn btn-primary" v-on:click="handler.handleChangePassword">
|
||||
<span class="spinner-border spinner-border-sm me-2" v-if="state.isSubmitting" role="status" aria-hidden="true"></span>
|
||||
<span v-if="!state.isSubmitting">Save</span>
|
||||
<span v-else>Saving...</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal untuk Change Avatar -->
|
||||
<div class="modal fade" ref="changeAvatarModalRef" id="ChangeAvatarModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">{{ state.changeAvatarTitle }}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<input type="hidden" v-model="state.userId" id="UserId" name="UserId" />
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5>Uploader Area</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form ref="imageUploadRef" id="ImageUpload" class="dropzone"></form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section scripts {
|
||||
<script src="~/FrontEnd/Pages/Profiles/MyProfile.cshtml.js"></script>
|
||||
}
|
||||
@@ -0,0 +1,465 @@
|
||||
const App = {
|
||||
setup() {
|
||||
const state = Vue.reactive({
|
||||
mainData: [],
|
||||
userId: '',
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
companyName: '',
|
||||
oldPassword: '',
|
||||
newPassword: '',
|
||||
confirmNewPassword: '',
|
||||
mainTitle: 'Edit MyProfile',
|
||||
changePasswordTitle: 'Change Password',
|
||||
changeAvatarTitle: 'Change Avatar',
|
||||
errors: {
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
oldPassword: '',
|
||||
newPassword: '',
|
||||
confirmNewPassword: ''
|
||||
},
|
||||
isSubmitting: false
|
||||
});
|
||||
|
||||
const mainGridRef = Vue.ref(null);
|
||||
const mainModalRef = Vue.ref(null);
|
||||
const changePasswordModalRef = Vue.ref(null);
|
||||
const changeAvatarModalRef = Vue.ref(null);
|
||||
const firstNameRef = Vue.ref(null);
|
||||
const lastNameRef = Vue.ref(null);
|
||||
const companyNameRef = Vue.ref(null);
|
||||
const oldPasswordRef = Vue.ref(null);
|
||||
const newPasswordRef = Vue.ref(null);
|
||||
const confirmNewPasswordRef = Vue.ref(null);
|
||||
const imageUploadRef = Vue.ref(null);
|
||||
|
||||
const services = {
|
||||
getMainData: async () => {
|
||||
try {
|
||||
const response = await AxiosManager.get('/Security/GetMyProfileList?userId=' + StorageManager.getUserId(), {});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
updateMainData: async (userId, firstName, lastName, companyName) => {
|
||||
try {
|
||||
const response = await AxiosManager.post('/Security/UpdateMyProfile', {
|
||||
userId, firstName, lastName, companyName
|
||||
});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
updatePasswordData: async (userId, oldPassword, newPassword, confirmNewPassword) => {
|
||||
try {
|
||||
const response = await AxiosManager.post('/Security/UpdateMyProfilePassword', {
|
||||
userId, oldPassword, newPassword, confirmNewPassword
|
||||
});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
uploadImage: async (file) => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
try {
|
||||
const response = await AxiosManager.post('/FileImage/UploadImage', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
updateAvatarData: async (userId, avatar) => {
|
||||
try {
|
||||
const response = await AxiosManager.post('/Security/UpdateMyProfileAvatar', {
|
||||
userId, avatar
|
||||
});
|
||||
return response;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
const mainGrid = {
|
||||
obj: null,
|
||||
create: async (dataSource) => {
|
||||
mainGrid.obj = new ej.grids.Grid({
|
||||
height: '240px',
|
||||
dataSource: dataSource,
|
||||
allowFiltering: true,
|
||||
allowSorting: true,
|
||||
allowSelection: true,
|
||||
allowGrouping: true,
|
||||
allowTextWrap: true,
|
||||
allowResizing: true,
|
||||
allowPaging: true,
|
||||
allowExcelExport: true,
|
||||
filterSettings: { type: 'CheckBox' },
|
||||
sortSettings: { columns: [{ field: 'firstName', direction: 'Descending' }] },
|
||||
pageSettings: { currentPage: 1, pageSize: 50, pageSizes: ["10", "20", "50", "100", "200", "All"] },
|
||||
selectionSettings: { persistSelection: true, type: 'Single' },
|
||||
autoFit: true,
|
||||
showColumnMenu: true,
|
||||
gridLines: 'Horizontal',
|
||||
columns: [
|
||||
{ type: 'checkbox', width: 60 },
|
||||
{
|
||||
field: 'id', isPrimaryKey: true, headerText: 'Id', visible: false
|
||||
},
|
||||
{ field: 'firstName', headerText: 'First Name', width: 200, minWidth: 200 },
|
||||
{ field: 'lastName', headerText: 'Last Name', width: 200, minWidth: 200 },
|
||||
{ field: 'companyName', headerText: 'Company Name', width: 400, minWidth: 400 },
|
||||
],
|
||||
toolbar: [
|
||||
'ExcelExport', 'Search',
|
||||
{ type: 'Separator' },
|
||||
{ text: 'Edit', tooltipText: 'Edit', prefixIcon: 'e-edit', id: 'EditCustom' },
|
||||
{ type: 'Separator' },
|
||||
{ text: 'Change Password', tooltipText: 'Change Password', id: 'ChangePasswordCustom' },
|
||||
{ text: 'Change Avatar', tooltipText: 'Change Avatar', id: 'ChangeAvatarCustom' },
|
||||
],
|
||||
beforeDataBound: () => { },
|
||||
dataBound: function () {
|
||||
mainGrid.obj.toolbarModule.enableItems(['EditCustom', 'ChangePasswordCustom', 'ChangeAvatarCustom'], false);
|
||||
mainGrid.obj.autoFitColumns(['firstName', 'lastName', 'companyName']);
|
||||
},
|
||||
excelExportComplete: () => { },
|
||||
rowSelected: () => {
|
||||
if (mainGrid.obj.getSelectedRecords().length === 1) {
|
||||
mainGrid.obj.toolbarModule.enableItems(['EditCustom', 'ChangePasswordCustom', 'ChangeAvatarCustom'], true);
|
||||
} else {
|
||||
mainGrid.obj.toolbarModule.enableItems(['EditCustom', 'ChangePasswordCustom', 'ChangeAvatarCustom'], false);
|
||||
}
|
||||
},
|
||||
rowDeselected: () => {
|
||||
if (mainGrid.obj.getSelectedRecords().length === 1) {
|
||||
mainGrid.obj.toolbarModule.enableItems(['EditCustom', 'ChangePasswordCustom', 'ChangeAvatarCustom'], true);
|
||||
} else {
|
||||
mainGrid.obj.toolbarModule.enableItems(['EditCustom', 'ChangePasswordCustom', 'ChangeAvatarCustom'], false);
|
||||
}
|
||||
},
|
||||
rowSelecting: () => {
|
||||
if (mainGrid.obj.getSelectedRecords().length) {
|
||||
mainGrid.obj.clearSelection();
|
||||
}
|
||||
},
|
||||
toolbarClick: (args) => {
|
||||
if (args.item.id === 'MainGrid_excelexport') {
|
||||
mainGrid.obj.excelExport();
|
||||
}
|
||||
|
||||
if (args.item.id === 'EditCustom') {
|
||||
if (mainGrid.obj.getSelectedRecords().length) {
|
||||
const selectedRecord = mainGrid.obj.getSelectedRecords()[0];
|
||||
state.userId = selectedRecord.id ?? '';
|
||||
state.firstName = selectedRecord.firstName ?? '';
|
||||
state.lastName = selectedRecord.lastName ?? '';
|
||||
state.companyName = selectedRecord.companyName ?? '';
|
||||
mainModal.obj.show();
|
||||
}
|
||||
}
|
||||
|
||||
if (args.item.id === 'ChangePasswordCustom') {
|
||||
if (mainGrid.obj.getSelectedRecords().length) {
|
||||
const selectedRecord = mainGrid.obj.getSelectedRecords()[0];
|
||||
state.userId = selectedRecord.id ?? '';
|
||||
changePasswordModal.obj.show();
|
||||
}
|
||||
}
|
||||
|
||||
if (args.item.id === 'ChangeAvatarCustom') {
|
||||
if (mainGrid.obj.getSelectedRecords().length) {
|
||||
const selectedRecord = mainGrid.obj.getSelectedRecords()[0];
|
||||
state.userId = selectedRecord.id ?? '';
|
||||
changeAvatarModal.obj.show();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
mainGrid.obj.appendTo(mainGridRef.value);
|
||||
},
|
||||
refresh: () => {
|
||||
mainGrid.obj.setProperties({ dataSource: state.mainData });
|
||||
}
|
||||
};
|
||||
|
||||
const handler = {
|
||||
handleSubmit: async () => {
|
||||
state.isSubmitting = true;
|
||||
await new Promise(resolve => setTimeout(resolve, 200));
|
||||
|
||||
state.errors.firstName = '';
|
||||
state.errors.lastName = '';
|
||||
let isValid = true;
|
||||
|
||||
// Validasi firstName
|
||||
if (!state.firstName) {
|
||||
state.errors.firstName = 'First Name is required.';
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// Validasi lastName
|
||||
if (!state.lastName) {
|
||||
state.errors.lastName = 'Last Name is required.';
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!isValid) {
|
||||
state.isSubmitting = false;
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await services.updateMainData(state.userId, state.firstName, state.lastName, state.companyName);
|
||||
if (response.data.code === 200) {
|
||||
await methods.populateMainData();
|
||||
mainGrid.refresh();
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Save Successful',
|
||||
text: 'Form will be closed...',
|
||||
timer: 2000,
|
||||
showConfirmButton: false
|
||||
});
|
||||
setTimeout(() => {
|
||||
mainModal.obj.hide();
|
||||
}, 2000);
|
||||
} else {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Save Failed',
|
||||
text: response.data.message ?? 'Please check your data.',
|
||||
confirmButtonText: 'Try Again'
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'An Error Occurred',
|
||||
text: error.response?.data?.message ?? 'Please try again.',
|
||||
confirmButtonText: 'OK'
|
||||
});
|
||||
} finally {
|
||||
state.isSubmitting = false;
|
||||
}
|
||||
},
|
||||
handleChangePassword: async () => {
|
||||
state.isSubmitting = true;
|
||||
await new Promise(resolve => setTimeout(resolve, 200));
|
||||
|
||||
state.errors.oldPassword = '';
|
||||
state.errors.newPassword = '';
|
||||
state.errors.confirmNewPassword = '';
|
||||
let isValid = true;
|
||||
|
||||
// old password validation
|
||||
if (!state.oldPassword) {
|
||||
state.errors.oldPassword = 'Old Password is required.';
|
||||
isValid = false;
|
||||
} else if (state.oldPassword.length < 6) {
|
||||
state.errors.oldPassword = 'Old Password must be at least 6 characters.';
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// new password validation
|
||||
if (!state.newPassword) {
|
||||
state.errors.newPassword = 'New Password is required.';
|
||||
isValid = false;
|
||||
} else if (state.newPassword.length < 6) {
|
||||
state.errors.newPassword = 'New Password must be at least 6 characters.';
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// confirm new password validation
|
||||
if (!state.confirmNewPassword) {
|
||||
state.errors.confirmNewPassword = 'Confirm New Password is required.';
|
||||
isValid = false;
|
||||
} else if (state.confirmNewPassword.length < 6) {
|
||||
state.errors.confirmNewPassword = 'Confirm New Password must be at least 6 characters.';
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!isValid) {
|
||||
state.isSubmitting = false;
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await services.updatePasswordData(state.userId, state.oldPassword, state.newPassword, state.confirmNewPassword);
|
||||
if (response.data.code === 200) {
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Save Successful',
|
||||
text: 'Form will be closed...',
|
||||
timer: 2000,
|
||||
showConfirmButton: false
|
||||
});
|
||||
setTimeout(() => {
|
||||
changePasswordModal.obj.hide();
|
||||
}, 2000);
|
||||
} else {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Save Failed',
|
||||
text: response.data.message ?? 'Please check your data.',
|
||||
confirmButtonText: 'Try Again'
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'An Error Occurred',
|
||||
text: error.response?.data?.message ?? 'Please try again.',
|
||||
confirmButtonText: 'OK'
|
||||
});
|
||||
} finally {
|
||||
state.isSubmitting = false;
|
||||
}
|
||||
},
|
||||
handleFileUpload: async (file) => {
|
||||
try {
|
||||
const response = await services.uploadImage(file);
|
||||
if (response.status === 200) {
|
||||
const imageName = response?.data?.content?.imageName;
|
||||
await services.updateAvatarData(state.userId, imageName);
|
||||
StorageManager.saveAvatar(imageName);
|
||||
|
||||
Swal.fire({
|
||||
icon: "success",
|
||||
title: "Upload Successful",
|
||||
text: "Your image has been uploaded successfully!",
|
||||
text: 'Page will be refreshed...',
|
||||
timer: 1000,
|
||||
showConfirmButton: false
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
changeAvatarModal.obj.hide();
|
||||
location.reload();
|
||||
}, 1000);
|
||||
} else {
|
||||
Swal.fire({
|
||||
icon: "error",
|
||||
title: "Upload Failed",
|
||||
text: response.message ?? "An error occurred during upload."
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
Swal.fire({
|
||||
icon: "error",
|
||||
title: "Upload Failed",
|
||||
text: "An unexpected error occurred."
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
const methods = {
|
||||
populateMainData: async () => {
|
||||
const response = await services.getMainData();
|
||||
state.mainData = response?.data?.content?.data;
|
||||
},
|
||||
};
|
||||
|
||||
Vue.onMounted(async () => {
|
||||
Dropzone.autoDiscover = false;
|
||||
try {
|
||||
await SecurityManager.authorizePage(['Profiles']);
|
||||
await SecurityManager.validateToken();
|
||||
await methods.populateMainData();
|
||||
await mainGrid.create(state.mainData);
|
||||
|
||||
mainModal.create();
|
||||
changePasswordModal.create();
|
||||
changeAvatarModal.create();
|
||||
|
||||
initDropzone();
|
||||
|
||||
} catch (e) {
|
||||
console.error('page init error:', e);
|
||||
} finally {
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
let dropzoneInitialized = false;
|
||||
const initDropzone = () => {
|
||||
if (!dropzoneInitialized && imageUploadRef.value) {
|
||||
dropzoneInitialized = true;
|
||||
const dropzoneInstance = new Dropzone(imageUploadRef.value, {
|
||||
url: "api/FileImage/UploadImage",
|
||||
paramName: "file",
|
||||
maxFilesize: 5,
|
||||
acceptedFiles: "image/*",
|
||||
addRemoveLinks: true,
|
||||
dictDefaultMessage: "Drag and drop an image here to upload",
|
||||
autoProcessQueue: false,
|
||||
init: function () {
|
||||
this.on("addedfile", async function (file) {
|
||||
await handler.handleFileUpload(file);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const mainModal = {
|
||||
obj: null,
|
||||
create: () => {
|
||||
mainModal.obj = new bootstrap.Modal(mainModalRef.value, {
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const changePasswordModal = {
|
||||
obj: null,
|
||||
create: () => {
|
||||
changePasswordModal.obj = new bootstrap.Modal(changePasswordModalRef.value, {
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const changeAvatarModal = {
|
||||
obj: null,
|
||||
create: () => {
|
||||
changeAvatarModal.obj = new bootstrap.Modal(changeAvatarModalRef.value, {
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return {
|
||||
state,
|
||||
mainGridRef,
|
||||
mainModalRef,
|
||||
changePasswordModalRef,
|
||||
changeAvatarModalRef,
|
||||
firstNameRef,
|
||||
lastNameRef,
|
||||
companyNameRef,
|
||||
oldPasswordRef,
|
||||
newPasswordRef,
|
||||
confirmNewPasswordRef,
|
||||
imageUploadRef,
|
||||
handler
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
Vue.createApp(App).mount('#app');
|
||||
Reference in New Issue
Block a user