aConnect
/
aConnect-UX
7
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Labels Milestones

New Pull Request

mazdak/UX-1729 #20

Merged
naeem.ullah merged 2 commits from mazdak/UX-1729 into dev-pending-09-12-2025 1 month ago
Conversation 0 Commits 2 Files Changed 6
6 changed files with 102 additions and 98 deletions
Show Stats Download Patch File Download Diff File

39
src/app/services/user-setup.service.ts
Unescape Escape View File

@ -13,15 +13,11 @@ export class UserSetupService {
private usersSubject = new BehaviorSubject<SetupUser[]>([]);
private currentPageSubject = new BehaviorSubject<number>(1);
private totalCountSubject = new BehaviorSubject<number>(0);
private searchTextSubject = new BehaviorSubject<string>('');
private itemsPerPageSubject = new BehaviorSubject<number>(5);
private paginatedUsersSubject = new BehaviorSubject<SetupUser[]>([]);
users$ = this.usersSubject.asObservable();
currentPage$ = this.currentPageSubject.asObservable();
totalCount$ = this.totalCountSubject.asObservable();
searchText$ = this.searchTextSubject.asObservable();
itemsPerPage$ = this.itemsPerPageSubject.asObservable();
paginatedUsers$ = this.paginatedUsersSubject.asObservable();
constructor(private httpURIService: HttpURIService, private uriService: URIService) { }
@ -35,7 +31,7 @@ loadUsers(): void {
const users = Array.isArray(res) ? res : res?.data;
this.usersSubject.next(users ?? []);
this.totalCountSubject.next(users.length);
this.applyPagination();
},
error: (err) => console.error(err)
});
@ -43,36 +39,10 @@ loadUsers(): void {
});
}
private applyPagination(): void {
const allUsers = this.usersSubject.value;
const searchText = this.searchTextSubject.value.toLowerCase();
const currentPage = this.currentPageSubject.value;
const itemsPerPage = this.itemsPerPageSubject.value;
let filtered = allUsers.filter(user =>
user.userId.toLowerCase().includes(searchText) ||
user.userFullname.toLowerCase().includes(searchText) ||
user.email.toLowerCase().includes(searchText)
);
const totalCount = filtered.length;
const startIndex = (currentPage - 1) * itemsPerPage;
const paginatedUsers = filtered.slice(startIndex, startIndex + itemsPerPage);
this.paginatedUsersSubject.next(paginatedUsers);
this.totalCountSubject.next(totalCount);
}
setSearchText(searchText: string): void {
this.searchTextSubject.next(searchText);
this.currentPageSubject.next(1);
this.applyPagination();
}
setItemsPerPage(itemsPerPage: number): void {
this.itemsPerPageSubject.next(itemsPerPage);
this.currentPageSubject.next(1);
this.applyPagination();
}
nextPage(): void {
@ -80,7 +50,6 @@ loadUsers(): void {
const currentPage = this.currentPageSubject.value;
if (currentPage < totalPages) {
this.currentPageSubject.next(currentPage + 1);
this.applyPagination();
}
}
@ -88,7 +57,7 @@ loadUsers(): void {
const currentPage = this.currentPageSubject.value;
if (currentPage > 1) {
this.currentPageSubject.next(currentPage - 1);
this.applyPagination();
}
}
@ -96,7 +65,7 @@ loadUsers(): void {
const totalPages = this.getTotalPages();
if (page > 0 && page <= totalPages) {
this.currentPageSubject.next(page);
this.applyPagination();
}
}

22
src/app/shared/pipes/userFilterPipe.ts
Unescape Escape View File

@ -0,0 +1,22 @@
import { Pipe, PipeTransform } from '@angular/core';
import { SetupUser } from '../../models/user';
@Pipe({
name: 'userFilter',
standalone: true
})
export class UserFilterPipe implements PipeTransform {
transform(users: SetupUser[], searchText: string): SetupUser[] {
if (!users || !searchText.trim()) {
return users;
}
const search = searchText.toLowerCase();
return users.filter(user =>
user.userId.toLowerCase().includes(search) ||
user.userFullname.toLowerCase().includes(search) ||
user.email.toLowerCase().includes(search)
);
}
}

45
src/app/user-management/setup-user/setup-user.component.html
Unescape Escape View File

@ -22,7 +22,7 @@
{{'setupUser' | translate}}
</div>
<div class="card-body">
<form>
<form [formGroup]="userForm">
<div class="row g-3 mb-3">
<div class="col-md-6">
<div class="d-flex align-items-center gap-2">
@ -34,15 +34,15 @@
<div class="d-flex flex-row align-items-stretch">
<input type="text" id="userId"
class="form-control"
[(ngModel)]="userId"
formControlName="userId"
name="userId"
placeholder="{{ 'userID' | translate }}" appNoWhitespaces
/>
</div>
<div class="text-danger" *ngIf="userForm.get('userId')?.touched && userForm.get('userId')?.invalid">
{{ 'fieldRequired' | translate }}
</div>
<!-- <div class="text-danger">
{{ 'requiredField' | translate }}
</div> -->
</div>
</div>
</div>
@ -57,16 +57,19 @@
<input id="userFullname"
class="form-control"
[(ngModel)]="userFullname"
formControlName="userFullname"
name="userFullname"
maxlength="500"
placeholder="{{ 'userName' | translate }}" appNoWhitespaces
rows="3" />
<div class="text-danger" *ngIf="userForm.get('userFullname')?.touched && userForm.get('userFullname')?.invalid">
{{ 'fieldRequired' | translate }}
</div>
</div>
</div>
</div>
</div>
@ -80,19 +83,15 @@
<div class="password-wrapper position-relative w-100">
<input id="defaultPassword"
class="form-control"
[(ngModel)]="defaultPassword"
formControlName="defaultPassword"
name="defaultPassword"
placeholder="{{ 'passwordPlaceHolder' | translate }}" appNoWhitespaces/>
<!-- <div class="text-danger">
<div>
{{ 'requiredField' | translate }}
</div>
<div class="text-danger" *ngIf="userForm.get('defaultPassword')?.touched && userForm.get('defaultPassword')?.invalid">
{{ 'fieldRequired' | translate }}
</div>
<div>
{{ 'expiryBeforeRenewal' | translate }}
</div> -->
</div>
</div>
</div>
<div class="col-md-6">
@ -101,8 +100,8 @@
</div>
<div class="row g-3 mb-3">
<div class="col-md-6 ms-auto text-end">
<button type="button" class="btn btn-primary waves-effect waves-light" (click)="onSubmit()"
[hidden]="mode === 'view' && showForm">
<button type="button" class="btn btn-primary waves-effect waves-light" (click)="onSubmit()" [disabled]="userForm.invalid"
>
{{ 'save' | translate }}
</button>
@ -137,7 +136,7 @@
<div class="search-box">
<input type="text" class="form-control form-control-sm"
[(ngModel)]="searchText"
(ngModelChange)="onSearch(searchText)"
(ngModelChange)="onSearch($event)"
placeholder="{{ 'search' | translate }}">
<i class="fas fa-search search-icon"></i>
</div>
@ -162,7 +161,13 @@
</tr>
</thead>
<tbody>
<tr *ngFor="let item of allItems">
<tr *ngFor="
let item of (
(users$ | async) ?? []
| userFilter: searchText
).slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)
">
<td>{{ item.userId }}</td>
<td>{{ item.userFullname }}</td>
@ -177,9 +182,11 @@
<button class="btn btn-danger btn-sm" title="Delete" (click)="onDelete(item.userId)">
<i class="fas fa-trash-alt"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
<div class="d-flex justify-content-between align-items-center mt-3">

78
src/app/user-management/setup-user/setup-user.component.ts
Unescape Escape View File

@ -6,16 +6,24 @@ import { TranslateModule } from '@ngx-translate/core';
import { pageSizeOptions } from '../../utils/app.constants';
import { SetupUser } from '../../models/user';
import { UserSetupService } from '../../services/user-setup.service';
import { error } from 'node:console';
import { UserFilterPipe } from '../../shared/pipes/userFilterPipe';
import { FormBuilder, Validators, FormGroup } from '@angular/forms';
@Component({
selector: 'app-setup-user',
standalone: true,
imports: [TranslateModule, ReactiveFormsModule, FormsModule, CommonModule, NgSelectModule],
imports: [TranslateModule, ReactiveFormsModule, FormsModule, CommonModule, NgSelectModule, UserFilterPipe],
templateUrl: './setup-user.component.html',
styleUrl: './setup-user.component.scss'
})
export class SetupUserComponent implements OnInit {
userForm!: FormGroup;
showForm = false;
selectedUserId!: any;
showDeleteModal = false;
userIdToDelete: any = null;
allItems: SetupUser[] = [];
currentPage: number = 1;
pageSizeOptions = pageSizeOptions
@ -23,18 +31,16 @@ export class SetupUserComponent implements OnInit {
searchText: string = '';
renewalDataExpanded: boolean = true;
totalCount: number = 0;
userId!: string;
userFullname!: string;
defaultPassword!: string;
mode: 'edit' | 'view' = 'view';
showForm = false;
selectedUserId!: any;
user: any;
constructor(private userService: UserSetupService){}
constructor(private userService: UserSetupService, private fb: FormBuilder){}
get users$(){
return this.userService.users$;
}
onSearch(value: string): void {
this.userService.setSearchText(value);
this.searchText = value;
}
onPageSizeChange(pageSize: number): void {
@ -49,35 +55,29 @@ export class SetupUserComponent implements OnInit {
this.userService.previousPage();
}
totalPages() {
return 1;
}
toggleCard(arg0: string) {
throw new Error('Method not implemented.');
}
getTotalPages(): number {
return this.userService.getTotalPages();
}
onSubmit() {
if(!this.userId || !this.userFullname|| !this.defaultPassword){
console.warn('Form incomplete');
return
if (this.userForm.invalid) {
this.userForm.markAllAsTouched();
return;
}
const newUser : SetupUser = {
userId: this.userId,
userFullname: this.userFullname,
email: `${this.userId}@dummy.com` ,// temporary placeholder
userId: this.userForm.value.userId,
userFullname: this.userForm.value.userFullname,
email: `${this.userForm.value.userId}@dummy.com`,
role: 'ADMIN',
defaultPassword: this.defaultPassword
defaultPassword: this.userForm.value.defaultPassword
}
this.userService.addUser(newUser).subscribe({
next: () => {
this.userService.loadUsers();
this.userId = '';
this.userFullname = '';
this.defaultPassword = '';
this.userService.loadUsers();
this.userForm.reset();
this.mode = 'edit';
},
error: (err: any) => console.error(err)
});
@ -90,9 +90,11 @@ export class SetupUserComponent implements OnInit {
this.showForm = true;
this.selectedUserId = userId;
this.userService.getUserById(userId).subscribe((user: any)=>{
this.userId = user.userId;
this.userFullname = user.userFullname;
this.defaultPassword = '';
this.userForm.patchValue({
userId : user.userId,
userFullname : user.userFullname,
defaultPassword : '',
})
})
}
@ -100,10 +102,7 @@ export class SetupUserComponent implements OnInit {
this.userService.deleteUser(userId).subscribe({
next: (res: any) => {
this.userService.loadUsers();
this.showForm = false;
this.userId = '';
this.userFullname = '';
this.defaultPassword = '';
this.userForm.reset()
this.selectedUserId = null;
},
error: (err:any) =>{
@ -115,18 +114,23 @@ export class SetupUserComponent implements OnInit {
}
ngOnInit(): void {
this.userForm = this.fb.group({
userId: ['', [Validators.required]],
userFullname: ['', [Validators.required, Validators.maxLength(500)]],
defaultPassword: ['', Validators.required]
});
this.userService.loadUsers();
this.userService.paginatedUsers$.subscribe((users: SetupUser[]) => this.allItems = users);
this.userService.users$.subscribe((users: SetupUser[]) => {
this.allItems = users;
});
this.userService.currentPage$.subscribe((page: number) => {
this.currentPage = page;
});
this.userService.totalCount$.subscribe((count: number) => {
this.totalCount = count;
});
this.userService.searchText$.subscribe((text: string) => {
this.searchText = text;
});
this.userService.itemsPerPage$.subscribe((size: number) => {
this.itemsPerPage = size;
});

1
src/assets/i18n/Arabic.json
Unescape Escape View File

@ -225,6 +225,7 @@
"UNAUTHORIZED_REQUEST": "طلب غير مصرح به",
"edit": "يحرر",
"delete": "يمسح",
"deleteUser": "حذف حساب المستخدم",
"permissionManagement": "إدارة الأذونات",
"userCode": "مستخدم",
"choose" : "يختار"

1
src/assets/i18n/English.json
Unescape Escape View File

@ -224,6 +224,7 @@
"UNAUTHORIZED_REQUEST": "Unauthorized Request",
"edit": "Edit",
"delete": "Delete",
"deleteUser": "Delete User",
"permissionManagement": "Permission Managment",
"userCode": "User",
"choose" : "Choose"

Write Preview
Loading…
Cancel
Save