Setup User API Integration

createUser and getAllUsers API Integration
mazdak/UX-1572
Mazdak Gibran 2 days ago
parent 6f2843b805
commit bc18bcf946

@ -3,3 +3,11 @@ export class User {
Email?: string="";
Password: string="";
}
export interface SetupUser {
userId: string;
userFullname: string;
defaultPassword: string;
email: string;
role: string;
}

@ -0,0 +1,112 @@
import { Injectable } from '@angular/core';
import { SetupUser } from '../models/user';
import { BehaviorSubject, Observable } from 'rxjs';
import { URIKey } from '../utils/uri-enums';
import { URIService } from '../app.uri';
import { HttpURIService } from '../app.http.uri.service';
@Injectable({
providedIn: 'root'
})
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) { }
loadUsers(): void {
this.uriService.canSubscribe.subscribe(can => {
if (can) {
this.httpURIService
.requestGET<any>(URIKey.GET_ALL_USERS)
.subscribe({
next: (res) => {
const users = Array.isArray(res) ? res : res?.data;
this.usersSubject.next(users ?? []);
this.totalCountSubject.next(users.length);
this.applyPagination();
},
error: (err) => console.error(err)
});
}
});
}
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 {
const totalPages = this.getTotalPages();
const currentPage = this.currentPageSubject.value;
if (currentPage < totalPages) {
this.currentPageSubject.next(currentPage + 1);
this.applyPagination();
}
}
previousPage(): void {
const currentPage = this.currentPageSubject.value;
if (currentPage > 1) {
this.currentPageSubject.next(currentPage - 1);
this.applyPagination();
}
}
goToPage(page: number): void {
const totalPages = this.getTotalPages();
if (page > 0 && page <= totalPages) {
this.currentPageSubject.next(page);
this.applyPagination();
}
}
getTotalPages(): number {
const totalCount = this.totalCountSubject.value;
const itemsPerPage = this.itemsPerPageSubject.value;
return Math.ceil(totalCount / itemsPerPage);
}
addUser(payload: SetupUser): Observable<SetupUser> {
return this.httpURIService.requestPOST<SetupUser>(URIKey.CREATE_USER, payload);
}
}

@ -47,7 +47,7 @@
<!-- Submit Button -->
<div class="mt-3 d-grid">
<button class="btn btn-primary waves-effect waves-light" type="submit">
<button class="btn btn-primary waves-effect waves-light" type="button">
{{'save' | translate}}
</button>
</div>

@ -26,15 +26,16 @@
<div class="row g-3 mb-3">
<div class="col-md-6">
<div class="d-flex align-items-center gap-2">
<label for="userID" class="text-nowrap">
{{ 'userID' | translate }}<span
<label for="userId" class="text-nowrap">
{{ 'userId' | translate }}<span
class="mandatory">*</span>
</label>
<div class="password-wrapper position-relative w-100">
<div class="d-flex flex-row align-items-stretch">
<input type="text" id="userID"
<input type="text" id="userId"
class="form-control"
[(ngModel)]="userId"
name="userId"
placeholder="{{ 'userID' | translate }}" appNoWhitespaces
/>
@ -54,9 +55,10 @@
</label>
<div class="password-wrapper position-relative w-100">
<input id="name"
<input id="userFullname"
class="form-control"
[(ngModel)]="userFullname"
name="userFullname"
maxlength="500"
placeholder="{{ 'userName' | translate }}" appNoWhitespaces
rows="3" />
@ -71,15 +73,16 @@
<div class="row g-3 mb-3">
<div class="col-md-6">
<div class="d-flex align-items-center gap-2">
<label for="phoneNumber" class="text-nowrap">
{{ 'phoneNumber' | translate }}<span
<label for="defaultPassword" class="text-nowrap">
{{ 'defaultPassword' | translate }}<span
class="mandatory">*</span>
</label>
<div class="password-wrapper position-relative w-100">
<input id="phoneNumber"
<input id="defaultPassword"
class="form-control"
placeholder="{{ 'userContactNumber' | translate }}" appNoWhitespaces/>
[(ngModel)]="defaultPassword"
name="defaultPassword"
placeholder="{{ 'passwordPlaceHolder' | translate }}" appNoWhitespaces/>
<!-- <div class="text-danger">
<div>
@ -99,8 +102,9 @@
<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()"
>{{'save' | translate}}</button>
@ -133,6 +137,8 @@
<div class="d-flex align-items-center gap-2">
<div class="search-box">
<input type="text" class="form-control form-control-sm"
[(ngModel)]="searchText"
(ngModelChange)="onSearch(searchText)"
placeholder="{{ 'search' | translate }}">
<i class="fas fa-search search-icon"></i>
</div>
@ -151,17 +157,16 @@
<table class="table mb-0 border">
<thead class="table-light">
<tr>
<th>{{'userID' | translate}}</th>
<th>{{'Name' | translate}}</th>
<th>{{'phoneNumber' | translate}}</th>
<th>{{'action' | translate}}</th>
<th style="width: 33%">{{'userID' | translate}}</th>
<th style="width: 33%">{{'Name' | translate}}</th>
<th style="width: 33%">{{'action' | translate}}</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<tr *ngFor="let item of allItems">
<td>{{ item.userId }}</td>
<td>{{ item.userFullname }}</td>
<td>
<div class="d-flex justify-content-center gap-2">
@ -190,6 +195,7 @@
bindLabel="label"
bindValue="value"
[(ngModel)]="itemsPerPage"
(change)="onPageSizeChange(itemsPerPage)"
[searchable]="false"
[clearable]="false"
[dropdownPosition]="'top'">
@ -197,14 +203,14 @@
</div>
<div class="text-muted">
{{ 'page' | translate }} {{ 'of' | translate }} ({{ 'totalItems' | translate }})
{{ 'page' | translate }} {{ currentPage }} {{ 'of' | translate }} {{ totalPages() }} ({{ totalCount }} {{ 'totalItems' | translate }})
</div>
<div class="btn-group">
<button class="btn btn-primary waves-effect waves-light">
<button class="btn btn-primary waves-effect waves-light" (click)="previousPage()">
{{ 'previous' | translate }}
</button>
<button class="btn btn-primary waves-effect waves-light">
<button class="btn btn-primary waves-effect waves-light" (click)="nextPage()">
{{ 'next' | translate }}
</button>
</div>

@ -1,9 +1,11 @@
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgSelectModule } from '@ng-select/ng-select';
import { TranslateModule } from '@ngx-translate/core';
import { pageSizeOptions } from '../../utils/app.constants';
import { SetupUser } from '../../models/user';
import { UserSetupService } from '../../services/user-setup.service';
@Component({
selector: 'app-setup-user',
@ -12,20 +14,33 @@ import { pageSizeOptions } from '../../utils/app.constants';
templateUrl: './setup-user.component.html',
styleUrl: './setup-user.component.scss'
})
export class SetupUserComponent {
allItems: any[] = [];
export class SetupUserComponent implements OnInit {
allItems: SetupUser[] = [];
currentPage: number = 1;
pageSizeOptions = pageSizeOptions
itemsPerPage: number = 5;
searchText: any;
searchText: string = '';
renewalDataExpanded: boolean = true;
totalCount: number = 0;
userId!: string;
userFullname!: string;
defaultPassword!: string;
constructor(private userService: UserSetupService){}
nextPage() {
throw new Error('Method not implemented.');
onSearch(value: string): void {
this.userService.setSearchText(value);
}
onPageSizeChange(pageSize: number): void {
this.userService.setItemsPerPage(pageSize);
}
previousPage() {
throw new Error('Method not implemented.');
nextPage(): void {
this.userService.nextPage();
}
previousPage(): void {
this.userService.previousPage();
}
totalPages() {
@ -37,8 +52,45 @@ export class SetupUserComponent {
}
onSubmit() {
throw new Error('Method not implemented.');
if(!this.userId || !this.userFullname|| !this.defaultPassword){
console.warn('Form incomplete');
return
}
const newUser : SetupUser = {
userId: this.userId,
userFullname: this.userFullname,
email: `${this.userId}@dummy.com` ,// temporary placeholder
role: 'ADMIN',
defaultPassword: this.defaultPassword
}
this.userService.addUser(newUser).subscribe({
next: () => {
this.userService.loadUsers();
this.userId = '';
this.userFullname = '';
this.defaultPassword = '';
},
error: (err: any) => console.error(err)
});
}
ngOnInit(): void {
this.userService.loadUsers();
this.userService.paginatedUsers$.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,5 +1,7 @@
export enum URIKey {
USER_LOGIN_URI = "USER_LOGIN_URI",
USER_REFRESH_TOKEN = "USER_REFRESH_TOKEN"
USER_REFRESH_TOKEN = "USER_REFRESH_TOKEN",
CREATE_USER = 'CREATE_USER',
GET_ALL_USERS = 'GET_ALL_USERS'
}

@ -16,6 +16,16 @@
"Id": "ENTITY_USER_REFRESH_TOKEN",
"URI": "/refreshtoken",
"UUID": "USER_REFRESH_TOKEN"
},
{
"Id": "ENTITY_CREATE_USER",
"URI": "/user/createUser",
"UUID": "CREATE_USER"
},
{
"Id": "ENTITY_GET_ALL_USERS",
"URI": "/user/getAllUsers",
"UUID": "GET_ALL_USERS"
}
]
}

@ -4,6 +4,7 @@
"userNamePlaceHolder":"ادخل اسم المستخدم",
"password":"كلمة المرور",
"passwordPlaceHolder":"أدخل كلمة المرور",
"defaultPassword": "كلمة المرور الافتراضية",
"rememberMe":"تذكرنى",
"forgotPassword":"هل نسيت كلمة السر؟",
"login":"تسجيل الدخول",
@ -96,6 +97,7 @@
"gridNum50":"خمسون",
"gridNum100":"مائة",
"userID":"معرف المستخدم",
"userId":"معرف المستخدم",
"userContactNumber":"أدخل رقم اتصال المستخدم",
"SelectHomeBranch":"حدد الفرع الرئيسي",
"SelectRole":"حدد الدور",

@ -5,6 +5,7 @@
"userNamePlaceHolder":"Enter Username",
"password":"Password",
"passwordPlaceHolder":"Enter Password",
"defaultPassword":"Default Password",
"rememberMe":"Remember me",
"forgotPassword":"Forgot password?",
"login":"Login",
@ -98,6 +99,7 @@
"gridNum50":"50",
"gridNum100":"100",
"userID":"User ID",
"userId":"User ID",
"userContactNumber":"Enter User Contact Number",
"SelectHomeBranch":"Select Home Branch",
"SelectRole":"Select Role",

Loading…
Cancel
Save