|
|
|
@ -5,7 +5,7 @@ import { NgSelectModule } from '@ng-select/ng-select';
|
|
|
|
import { TranslateModule } from '@ngx-translate/core';
|
|
|
|
import { TranslateModule } from '@ngx-translate/core';
|
|
|
|
import { pageSizeOptions } from '../../utils/app.constants';
|
|
|
|
import { pageSizeOptions } from '../../utils/app.constants';
|
|
|
|
import { SetupUser } from '../../models/user';
|
|
|
|
import { SetupUser } from '../../models/user';
|
|
|
|
import { FormBuilder, Validators, FormGroup } from '@angular/forms';
|
|
|
|
import { FormBuilder, Validators, FormGroup, AbstractControl } from '@angular/forms';
|
|
|
|
import { ButtonManagementService } from '../../services/button-management.service';
|
|
|
|
import { ButtonManagementService } from '../../services/button-management.service';
|
|
|
|
import { StorageService } from '../../shared/services/storage.service';
|
|
|
|
import { StorageService } from '../../shared/services/storage.service';
|
|
|
|
import { TableFilterPipe } from '../../shared/pipes/table-filter.pipe';
|
|
|
|
import { TableFilterPipe } from '../../shared/pipes/table-filter.pipe';
|
|
|
|
@ -13,50 +13,53 @@ import { URIKey } from '../../utils/uri-enums';
|
|
|
|
import { HttpErrorResponse, HttpParams } from '@angular/common/http';
|
|
|
|
import { HttpErrorResponse, HttpParams } from '@angular/common/http';
|
|
|
|
import { HttpURIService } from '../../app.http.uri.service';
|
|
|
|
import { HttpURIService } from '../../app.http.uri.service';
|
|
|
|
import { I18NService } from '../../services/i18n.service';
|
|
|
|
import { I18NService } from '../../services/i18n.service';
|
|
|
|
import { SuccessMessages } from '../../utils/enums';
|
|
|
|
import { SuccessMessages, ErrorMessages } from '../../utils/enums';
|
|
|
|
import { ResetPasswordModalComponent } from '../reset-password-modal/reset-password-modal.component';
|
|
|
|
import { ResetPasswordModalComponent } from '../reset-password-modal/reset-password-modal.component';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
@Component({
|
|
|
|
selector: 'app-setup-user',
|
|
|
|
selector: 'app-setup-user',
|
|
|
|
standalone: true,
|
|
|
|
standalone: true,
|
|
|
|
imports: [TranslateModule, ReactiveFormsModule, FormsModule, CommonModule, NgSelectModule, TableFilterPipe, ResetPasswordModalComponent ],
|
|
|
|
imports: [TranslateModule, ReactiveFormsModule, FormsModule, CommonModule, NgSelectModule, TableFilterPipe, ResetPasswordModalComponent],
|
|
|
|
templateUrl: './setup-user.component.html',
|
|
|
|
templateUrl: './setup-user.component.html',
|
|
|
|
styleUrl: './setup-user.component.scss'
|
|
|
|
styleUrl: './setup-user.component.scss'
|
|
|
|
})
|
|
|
|
})
|
|
|
|
export class SetupUserComponent implements OnInit {
|
|
|
|
export class SetupUserComponent implements OnInit {
|
|
|
|
userForm!: FormGroup;
|
|
|
|
userForm!: FormGroup;
|
|
|
|
|
|
|
|
selectedUserIdForEdit: string | null = null; // For edit form
|
|
|
|
|
|
|
|
selectedUserIdForReset: string | null = null; // For reset password modal
|
|
|
|
showForm = false;
|
|
|
|
showForm = false;
|
|
|
|
selectedUserId!: any;
|
|
|
|
|
|
|
|
showDeleteModal = false;
|
|
|
|
showDeleteModal = false;
|
|
|
|
userIdToDelete: any = null;
|
|
|
|
userIdToDelete: any = null;
|
|
|
|
allItems: SetupUser[] = [];
|
|
|
|
allItems: SetupUser[] = [];
|
|
|
|
currentPage: number = 1;
|
|
|
|
currentPage: number = 1;
|
|
|
|
pageSizeOptions = pageSizeOptions
|
|
|
|
pageSizeOptions = pageSizeOptions;
|
|
|
|
itemsPerPage: number = 10;
|
|
|
|
itemsPerPage: number = 10;
|
|
|
|
pagedItems: any[] = [];
|
|
|
|
pagedItems: any[] = [];
|
|
|
|
searchText: any = '';
|
|
|
|
searchText: any = '';
|
|
|
|
renewalDataExpanded: boolean = true;
|
|
|
|
renewalDataExpanded: boolean = true;
|
|
|
|
totalCount: number = 0;
|
|
|
|
totalCount: number = 0;
|
|
|
|
mode: 'edit' | 'view' = 'view';
|
|
|
|
mode: 'create' | 'edit' = 'create';
|
|
|
|
|
|
|
|
|
|
|
|
userSetupDataExpanded: boolean = true
|
|
|
|
userSetupDataExpanded: boolean = true;
|
|
|
|
buttonPermissions: any;
|
|
|
|
buttonPermissions: any;
|
|
|
|
isLoading: boolean = false;
|
|
|
|
isLoading: boolean = false;
|
|
|
|
setupUserList: SetupUser[] = [];
|
|
|
|
setupUserList: SetupUser[] = [];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Store original user data for comparison
|
|
|
|
|
|
|
|
originalUserData: SetupUser | null = null;
|
|
|
|
|
|
|
|
|
|
|
|
roleOptions = [
|
|
|
|
roleOptions = [
|
|
|
|
{ label: 'Admin', value: 'ADMIN' },
|
|
|
|
{ label: 'Admin', value: 'ADMIN' },
|
|
|
|
{ label: 'User', value: 'USER' },
|
|
|
|
{ label: 'User', value: 'USER' },
|
|
|
|
];
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
constructor(
|
|
|
|
constructor(
|
|
|
|
private fb: FormBuilder,
|
|
|
|
private fb: FormBuilder,
|
|
|
|
private buttonManagementService: ButtonManagementService,
|
|
|
|
private buttonManagementService: ButtonManagementService,
|
|
|
|
private storageService: StorageService,
|
|
|
|
private storageService: StorageService,
|
|
|
|
private httpService: HttpURIService,
|
|
|
|
private httpService: HttpURIService,
|
|
|
|
private i18nService: I18NService
|
|
|
|
private i18nService: I18NService
|
|
|
|
){}
|
|
|
|
) {}
|
|
|
|
|
|
|
|
|
|
|
|
onSearch(value: string): void {
|
|
|
|
onSearch(value: string): void {
|
|
|
|
this.searchText = value;
|
|
|
|
this.searchText = value;
|
|
|
|
@ -82,94 +85,201 @@ export class SetupUserComponent implements OnInit {
|
|
|
|
this.currentPage = 1;
|
|
|
|
this.currentPage = 1;
|
|
|
|
this.updatePagedItems();
|
|
|
|
this.updatePagedItems();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Submit for creating new user
|
|
|
|
onSubmit() {
|
|
|
|
onSubmit() {
|
|
|
|
if (this.userForm.invalid) {
|
|
|
|
if (this.userForm.invalid) {
|
|
|
|
this.userForm.markAllAsTouched();
|
|
|
|
this.userForm.markAllAsTouched();
|
|
|
|
return;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const newUser : SetupUser = {
|
|
|
|
const newUser: SetupUser = {
|
|
|
|
userId: this.userForm.value.userId,
|
|
|
|
userId: this.userForm.value.userId.trim(),
|
|
|
|
userFullname: this.userForm.value.userFullname,
|
|
|
|
userFullname: this.userForm.value.userFullname.trim(),
|
|
|
|
email: this.userForm.value.email,
|
|
|
|
email: this.userForm.value.email.trim(),
|
|
|
|
role: this.userForm.value.userRole,
|
|
|
|
role: this.userForm.value.userRole,
|
|
|
|
porOrgacode: this.storageService.getItem('POR_ORGACODE'),
|
|
|
|
porOrgacode: this.storageService.getItem('POR_ORGACODE'),
|
|
|
|
password: this.userForm.value.defaultPassword
|
|
|
|
password: this.userForm.value.defaultPassword
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
this.httpService.requestPOST<SetupUser[]>(URIKey.CREATE_USER, newUser).subscribe({
|
|
|
|
this.isLoading = true;
|
|
|
|
|
|
|
|
this.httpService.requestPOST<SetupUser>(URIKey.CREATE_USER, newUser).subscribe({
|
|
|
|
next: (response) => {
|
|
|
|
next: (response) => {
|
|
|
|
if (!(response instanceof HttpErrorResponse)) {
|
|
|
|
if (!(response instanceof HttpErrorResponse)) {
|
|
|
|
this.i18nService.success(SuccessMessages.USER_CREATED_SUCCESS, []);
|
|
|
|
this.i18nService.success(SuccessMessages.USER_CREATED_SUCCESS, []);
|
|
|
|
this.userForm.reset();
|
|
|
|
this.resetForm();
|
|
|
|
this.mode = 'edit';
|
|
|
|
this.loadUsersDirect();
|
|
|
|
this.loadUsersDirect()
|
|
|
|
}
|
|
|
|
|
|
|
|
this.isLoading = false;
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
error: (error) => {
|
|
|
|
|
|
|
|
console.error('Error creating user:', error);
|
|
|
|
|
|
|
|
this.isLoading = false;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Update existing user
|
|
|
|
|
|
|
|
onUpdate() {
|
|
|
|
|
|
|
|
if (this.userForm.invalid) {
|
|
|
|
|
|
|
|
this.userForm.markAllAsTouched();
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const updatedUser: any = {
|
|
|
|
|
|
|
|
userId: this.selectedUserIdForEdit,
|
|
|
|
|
|
|
|
userFullname: this.userForm.value.userFullname.trim(),
|
|
|
|
|
|
|
|
email: this.userForm.value.email.trim(),
|
|
|
|
|
|
|
|
role: this.userForm.value.userRole,
|
|
|
|
|
|
|
|
porOrgacode: this.storageService.getItem('POR_ORGACODE')
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Only include password if it was provided
|
|
|
|
|
|
|
|
if (this.userForm.value.defaultPassword && this.userForm.value.defaultPassword.trim()) {
|
|
|
|
|
|
|
|
updatedUser.password = this.userForm.value.defaultPassword;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let params = new HttpParams().set('userId', this.selectedUserIdForEdit!);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.isLoading = true;
|
|
|
|
|
|
|
|
this.httpService.requestPUT<SetupUser>(URIKey.UPDATE_USER, updatedUser, undefined, params).subscribe({
|
|
|
|
|
|
|
|
next: (response) => {
|
|
|
|
|
|
|
|
if (!(response instanceof HttpErrorResponse)) {
|
|
|
|
|
|
|
|
this.i18nService.success(SuccessMessages.USER_UPDATED_SUCCESS, []);
|
|
|
|
|
|
|
|
this.resetForm();
|
|
|
|
|
|
|
|
this.loadUsersDirect();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
this.isLoading = false;
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
error: (error) => {
|
|
|
|
|
|
|
|
console.error('Error updating user:', error);
|
|
|
|
|
|
|
|
this.isLoading = false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Cancel edit mode
|
|
|
|
|
|
|
|
cancelEdit() {
|
|
|
|
|
|
|
|
this.resetForm();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Reset form to create mode
|
|
|
|
|
|
|
|
resetForm() {
|
|
|
|
|
|
|
|
this.userForm.reset();
|
|
|
|
|
|
|
|
this.userForm.enable();
|
|
|
|
|
|
|
|
this.mode = 'create';
|
|
|
|
|
|
|
|
this.selectedUserIdForEdit = null;
|
|
|
|
|
|
|
|
this.originalUserData = null;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Reset form validation state
|
|
|
|
|
|
|
|
Object.keys(this.userForm.controls).forEach(key => {
|
|
|
|
|
|
|
|
const control = this.userForm.get(key);
|
|
|
|
|
|
|
|
control?.markAsPristine();
|
|
|
|
|
|
|
|
control?.markAsUntouched();
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Check if form has been modified
|
|
|
|
|
|
|
|
isFormDirty(): boolean {
|
|
|
|
|
|
|
|
if (!this.originalUserData || this.mode !== 'edit') {
|
|
|
|
|
|
|
|
return true;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const currentValues = this.userForm.value;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Check if any field has changed (excluding password)
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
|
|
|
currentValues.userFullname !== this.originalUserData.userFullname ||
|
|
|
|
|
|
|
|
currentValues.email !== this.originalUserData.email ||
|
|
|
|
|
|
|
|
currentValues.userRole !== this.originalUserData.role ||
|
|
|
|
|
|
|
|
(currentValues.defaultPassword && currentValues.defaultPassword.trim() !== '')
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Get role label for display
|
|
|
|
|
|
|
|
getRoleLabel(roleValue: string): string {
|
|
|
|
|
|
|
|
const role = this.roleOptions.find(r => r.value === roleValue);
|
|
|
|
|
|
|
|
return role ? role.label : roleValue;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
updatePagedItems(): void {
|
|
|
|
updatePagedItems(): void {
|
|
|
|
const startIndex = (this.currentPage - 1) * this.itemsPerPage;
|
|
|
|
const startIndex = (this.currentPage - 1) * this.itemsPerPage;
|
|
|
|
const endIndex = startIndex + this.itemsPerPage;
|
|
|
|
const endIndex = startIndex + this.itemsPerPage;
|
|
|
|
this.pagedItems = this.allItems.slice(startIndex, endIndex);
|
|
|
|
this.pagedItems = this.allItems.slice(startIndex, endIndex);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
getButtonPermissions(){
|
|
|
|
getButtonPermissions() {
|
|
|
|
this.buttonPermissions = this.buttonManagementService.buttonPermissions["setupUser"];
|
|
|
|
this.buttonPermissions = this.buttonManagementService.buttonPermissions["setupUser"];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
toggleTableCard(): void {
|
|
|
|
toggleTableCard(): void {
|
|
|
|
this.userSetupDataExpanded = !this.userSetupDataExpanded;
|
|
|
|
this.userSetupDataExpanded = !this.userSetupDataExpanded;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
confirmDelete(userId: string) {
|
|
|
|
confirmDelete(userId: string) {
|
|
|
|
const confirmed = window.confirm('Are you sure you want to delete this user?');
|
|
|
|
const confirmed = window.confirm('Are you sure you want to delete this user?');
|
|
|
|
if (confirmed) {
|
|
|
|
if (confirmed) {
|
|
|
|
this.onDelete(userId);
|
|
|
|
this.onDelete(userId);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
ngOnInit(): void {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ngOnInit(): void {
|
|
|
|
this.getButtonPermissions();
|
|
|
|
this.getButtonPermissions();
|
|
|
|
|
|
|
|
this.initializeForm();
|
|
|
|
|
|
|
|
this.loadUsersDirect();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
initializeForm(): void {
|
|
|
|
this.userForm = this.fb.group({
|
|
|
|
this.userForm = this.fb.group({
|
|
|
|
userId: ['', [
|
|
|
|
userId: ['', [
|
|
|
|
Validators.required,
|
|
|
|
Validators.required,
|
|
|
|
Validators.minLength(5),
|
|
|
|
Validators.minLength(5),
|
|
|
|
Validators.pattern(/^\S+$/)
|
|
|
|
Validators.pattern('^[a-z0-9]*$')
|
|
|
|
]
|
|
|
|
]],
|
|
|
|
],
|
|
|
|
|
|
|
|
userFullname: ['', [
|
|
|
|
userFullname: ['', [
|
|
|
|
Validators.required,
|
|
|
|
Validators.required,
|
|
|
|
Validators.minLength(5)
|
|
|
|
Validators.minLength(5),
|
|
|
|
]
|
|
|
|
Validators.maxLength(500)
|
|
|
|
],
|
|
|
|
]],
|
|
|
|
defaultPassword: ['', [
|
|
|
|
defaultPassword: ['', [
|
|
|
|
Validators.required,
|
|
|
|
// Make password optional for edit mode, required for create
|
|
|
|
|
|
|
|
(control: AbstractControl) => {
|
|
|
|
|
|
|
|
if (this.mode === 'create' && !control.value) {
|
|
|
|
|
|
|
|
return { required: true };
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
return null;
|
|
|
|
|
|
|
|
},
|
|
|
|
Validators.pattern(
|
|
|
|
Validators.pattern(
|
|
|
|
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,20}$/
|
|
|
|
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,20}$/
|
|
|
|
)
|
|
|
|
)
|
|
|
|
]
|
|
|
|
]],
|
|
|
|
],
|
|
|
|
|
|
|
|
email: ['', [Validators.required, Validators.email]],
|
|
|
|
email: ['', [Validators.required, Validators.email]],
|
|
|
|
userRole: [null, Validators.required]
|
|
|
|
userRole: [null, Validators.required]
|
|
|
|
});
|
|
|
|
});
|
|
|
|
this.loadUsersDirect();
|
|
|
|
|
|
|
|
|
|
|
|
// Update password validation when mode changes
|
|
|
|
|
|
|
|
this.userForm.get('defaultPassword')?.valueChanges.subscribe(() => {
|
|
|
|
|
|
|
|
const passwordControl = this.userForm.get('defaultPassword');
|
|
|
|
|
|
|
|
if (passwordControl) {
|
|
|
|
|
|
|
|
passwordControl.updateValueAndValidity();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
loadUsersDirect(): void {
|
|
|
|
loadUsersDirect(): void {
|
|
|
|
this.isLoading = false;
|
|
|
|
this.isLoading = true;
|
|
|
|
let params = new HttpParams()
|
|
|
|
let params = new HttpParams()
|
|
|
|
.set('page', this.currentPage.toString())
|
|
|
|
.set('page', (this.currentPage - 1).toString())
|
|
|
|
.set('size', this.itemsPerPage.toString());
|
|
|
|
.set('size', this.itemsPerPage.toString());
|
|
|
|
|
|
|
|
|
|
|
|
this.httpService.requestGET<any[]>(URIKey.GET_ALL_USER_URI, params).subscribe({
|
|
|
|
this.httpService.requestGET<any>(URIKey.GET_ALL_USER_URI, params).subscribe({
|
|
|
|
next: (response) => {
|
|
|
|
next: (response) => {
|
|
|
|
this.setupUserList = response
|
|
|
|
if (response && response.content) {
|
|
|
|
|
|
|
|
this.setupUserList = response.content;
|
|
|
|
|
|
|
|
this.totalCount = response.totalElements || response.content.length;
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
this.setupUserList = response;
|
|
|
|
|
|
|
|
}
|
|
|
|
this.allItems = [...this.setupUserList];
|
|
|
|
this.allItems = [...this.setupUserList];
|
|
|
|
this.updatePagedItems();
|
|
|
|
this.updatePagedItems();
|
|
|
|
this.isLoading = false;
|
|
|
|
this.isLoading = false;
|
|
|
|
@ -182,55 +292,144 @@ ngOnInit(): void {
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
onView(userId: any): void{
|
|
|
|
onView(userId: string): void {
|
|
|
|
let params = new HttpParams().set('userId', userId);
|
|
|
|
let params = new HttpParams().set('userId', userId);
|
|
|
|
|
|
|
|
this.isLoading = true;
|
|
|
|
|
|
|
|
|
|
|
|
this.httpService.requestGET<SetupUser>(URIKey.GET_USER_BY_ID, params).subscribe({
|
|
|
|
this.httpService.requestGET<SetupUser>(URIKey.GET_USER_BY_ID, params).subscribe({
|
|
|
|
next: (response: SetupUser) => {
|
|
|
|
next: (response: SetupUser) => {
|
|
|
|
|
|
|
|
// Store original data
|
|
|
|
|
|
|
|
this.originalUserData = { ...response };
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Patch form values
|
|
|
|
this.userForm.patchValue({
|
|
|
|
this.userForm.patchValue({
|
|
|
|
userId: response.userId,
|
|
|
|
userId: response.userId,
|
|
|
|
userFullname: response.userFullname,
|
|
|
|
userFullname: response.userFullname,
|
|
|
|
email: response.email,
|
|
|
|
email: response.email,
|
|
|
|
userRole: response.role,
|
|
|
|
userRole: response.role,
|
|
|
|
defaultPassword: ''
|
|
|
|
defaultPassword: '' // Clear password field for security
|
|
|
|
});
|
|
|
|
});
|
|
|
|
this.userForm.disable();
|
|
|
|
|
|
|
|
this.selectedUserId = userId;
|
|
|
|
// Enable form for editing
|
|
|
|
|
|
|
|
this.userForm.enable();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Disable userId field (it shouldn't be changed)
|
|
|
|
|
|
|
|
this.userForm.get('userId')?.disable();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Set the edit userId
|
|
|
|
|
|
|
|
this.selectedUserIdForEdit = userId;
|
|
|
|
|
|
|
|
this.mode = 'edit'; // Set mode to edit
|
|
|
|
this.isLoading = false;
|
|
|
|
this.isLoading = false;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Scroll to form
|
|
|
|
|
|
|
|
this.scrollToForm();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
error: (err) => {
|
|
|
|
error: (err) => {
|
|
|
|
console.error('Error fetching users:', err);
|
|
|
|
console.error('Error fetching user:', err)
|
|
|
|
this.allItems = [];
|
|
|
|
|
|
|
|
this.isLoading = false;
|
|
|
|
this.isLoading = false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
onDelete(userId: any){
|
|
|
|
onDelete(userId: string) {
|
|
|
|
let params = new HttpParams().set('userId', userId);
|
|
|
|
let params = new HttpParams().set('userId', userId);
|
|
|
|
|
|
|
|
this.isLoading = true;
|
|
|
|
|
|
|
|
|
|
|
|
this.httpService.requestDELETE<any>(URIKey.DELETE_USER, params).subscribe({
|
|
|
|
this.httpService.requestDELETE<any>(URIKey.DELETE_USER, params).subscribe({
|
|
|
|
next: (response) =>{
|
|
|
|
next: (response) => {
|
|
|
|
if (!(response instanceof HttpErrorResponse)) {
|
|
|
|
if (!(response instanceof HttpErrorResponse)) {
|
|
|
|
this.i18nService.success(SuccessMessages.USER_DELETE_SUCCESS, []);
|
|
|
|
this.i18nService.success(SuccessMessages.USER_DELETE_SUCCESS, []);
|
|
|
|
this.loadUsersDirect();
|
|
|
|
this.loadUsersDirect();
|
|
|
|
this.userForm.reset();
|
|
|
|
this.resetForm();
|
|
|
|
this.selectedUserId = null;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
this.isLoading = false;
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
error: (error) => {
|
|
|
|
|
|
|
|
console.error('Error deleting user:', error);
|
|
|
|
|
|
|
|
this.i18nService.error(ErrorMessages.USER_DELETE_FAILED, []);
|
|
|
|
|
|
|
|
this.isLoading = false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
openResetPasswordModal(userId: string) {
|
|
|
|
openResetPasswordModal(userId: string) {
|
|
|
|
this.selectedUserId = userId;
|
|
|
|
console.log('Opening reset password modal for userId:', userId);
|
|
|
|
|
|
|
|
this.selectedUserIdForReset = userId;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Show the modal
|
|
|
|
const modal = document.getElementById('resetPasswordModal');
|
|
|
|
const modal = document.getElementById('resetPasswordModal');
|
|
|
|
modal?.classList.add('show');
|
|
|
|
if (modal) {
|
|
|
|
modal!.style.display = 'block';
|
|
|
|
modal.classList.add('show');
|
|
|
|
|
|
|
|
modal.style.display = 'block';
|
|
|
|
document.body.classList.add('modal-open');
|
|
|
|
document.body.classList.add('modal-open');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Add backdrop
|
|
|
|
const backdrop = document.createElement('div');
|
|
|
|
const backdrop = document.createElement('div');
|
|
|
|
backdrop.className = 'modal-backdrop fade show';
|
|
|
|
backdrop.className = 'modal-backdrop fade show';
|
|
|
|
document.body.appendChild(backdrop);
|
|
|
|
document.body.appendChild(backdrop);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Listen for modal close event
|
|
|
|
|
|
|
|
const closeModal = () => {
|
|
|
|
|
|
|
|
this.closeResetPasswordModal();
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Add click event to backdrop
|
|
|
|
|
|
|
|
backdrop.addEventListener('click', closeModal);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Add event listener for escape key
|
|
|
|
|
|
|
|
const handleEscape = (event: KeyboardEvent) => {
|
|
|
|
|
|
|
|
if (event.key === 'Escape') {
|
|
|
|
|
|
|
|
closeModal();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
document.addEventListener('keydown', handleEscape);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Store event listeners for cleanup
|
|
|
|
|
|
|
|
(modal as any).__backdropListener = closeModal;
|
|
|
|
|
|
|
|
(modal as any).__escapeListener = handleEscape;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Helper method to scroll to form
|
|
|
|
|
|
|
|
private scrollToForm(): void {
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
|
|
const formElement = document.querySelector('.card.border');
|
|
|
|
|
|
|
|
if (formElement) {
|
|
|
|
|
|
|
|
formElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}, 100);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
closeResetPasswordModal(): void {
|
|
|
|
|
|
|
|
const modal = document.getElementById('resetPasswordModal');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Remove event listeners
|
|
|
|
|
|
|
|
if (modal) {
|
|
|
|
|
|
|
|
const backdrop = document.querySelector('.modal-backdrop');
|
|
|
|
|
|
|
|
if (backdrop && (modal as any).__backdropListener) {
|
|
|
|
|
|
|
|
backdrop.removeEventListener('click', (modal as any).__backdropListener);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if ((modal as any).__escapeListener) {
|
|
|
|
|
|
|
|
document.removeEventListener('keydown', (modal as any).__escapeListener);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Hide modal
|
|
|
|
|
|
|
|
if (modal) {
|
|
|
|
|
|
|
|
modal.classList.remove('show');
|
|
|
|
|
|
|
|
modal.style.display = 'none';
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Remove backdrop
|
|
|
|
|
|
|
|
const backdrop = document.querySelector('.modal-backdrop');
|
|
|
|
|
|
|
|
if (backdrop) {
|
|
|
|
|
|
|
|
backdrop.remove();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
document.body.classList.remove('modal-open');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Clear the reset userId
|
|
|
|
|
|
|
|
this.selectedUserIdForReset = null;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
Naeem Ullah
6 days ago