verben-authentication-ui 1.0.2 → 1.0.3

package/src/lib/components/user-request-approval/facades/user-access-request.facade.ts

@@ -0,0 +1,324 @@
+import { Injectable } from '@angular/core';
+import {
+  Observable,
+  Subject,
+  catchError,
+  debounceTime,
+  distinctUntilChanged,
+  from,
+  lastValueFrom,
+  takeUntil,
+  tap,
+  throwError,
+} from 'rxjs';
+import { UserAccessRequestState } from '../states/user-access-request.state';
+import { UserAccessRequest } from '../../../models/user-access-request';
+import { QueryParams } from '../../../models/query-params';
+import { UserAccessRequestService } from '../services/user-access-request.service';
+import { UserAccessRequestStatus } from '../../../models/user-access-request-status';
+import { SearchOperator } from '../../../models/SearchOperator';
+import { SearchPropertySign } from '../../../models/SearchPropertySign';
+
+import { Role } from '../../../models/Role';
+import { UtilService } from '../../../services/util.service';
+import { IDataFilter } from 'verben-ng-ui';
+import { convertDataFilterTypeToSearchPropertyValueType } from '../helper';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UserAccessRequestFacade {
+  private searchSubject = new Subject<string>();
+  private destroy$ = new Subject<void>();
+
+  constructor(
+    private userAccessRequestService: UserAccessRequestService,
+    private userAccessRequestState: UserAccessRequestState,
+    private utilService: UtilService
+  ) {
+    // Set up debounced search handling
+    this.searchSubject
+      .pipe(
+        debounceTime(1000),
+        distinctUntilChanged(),
+        takeUntil(this.destroy$)
+      )
+      .subscribe((searchTerm) => {
+        this.handleSearch(searchTerm);
+      });
+
+    this.isUpdating$().subscribe((loading) => {
+      this.utilService.sendBI(loading);
+    });
+
+    this.getFilterParams$().subscribe((params) => {
+      if (params.length) {
+      } else {
+        this.loadRequests();
+      }
+    });
+  }
+
+  destroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  isUpdating$(): Observable<boolean> {
+    return this.userAccessRequestState.isUpdating$();
+  }
+
+  getRequests$(): Observable<UserAccessRequest[]> {
+    return this.userAccessRequestState.getRequests$();
+  }
+
+  getFilterParams$(): Observable<IDataFilter[]> {
+    return this.userAccessRequestState.getFilterParams$();
+  }
+
+  getRoles$(): Observable<Role[]> {
+    return this.userAccessRequestState.getRoles$();
+  }
+
+  getQueryParams$(): Observable<QueryParams<UserAccessRequest>> {
+    return this.userAccessRequestState.getQueryParams$();
+  }
+
+  getSearchTerm$(): Observable<string> {
+    return this.userAccessRequestState.getSearchTerm$();
+  }
+
+  // Search handling
+  search(term: string): void {
+    this.searchSubject.next(term);
+  }
+
+  private async handleSearch(searchTerm: string): Promise<void> {
+    this.userAccessRequestState.setSearchTerm(searchTerm);
+    this.userAccessRequestState.resetPagination();
+
+    try {
+      this.userAccessRequestState.setUpdating(true);
+      if (searchTerm.trim()) {
+        await this.loadRequestsWithParam(searchTerm);
+      } else {
+        await this.loadRequests();
+      }
+    } catch (error) {
+      console.error('Search failed:', error);
+      throw error;
+    } finally {
+      this.userAccessRequestState.setUpdating(false);
+    }
+  }
+
+  async filter(filterParams: IDataFilter[]): Promise<void> {
+    this.userAccessRequestState.resetPagination();
+    this.userAccessRequestState.setFilterParams(filterParams);
+  }
+
+  // Load more handling
+  async loadMore(): Promise<void> {
+    try {
+      this.userAccessRequestState.setUpdating(true);
+      const currentParams = this.userAccessRequestState.getQueryParamsValue();
+      const searchTerm = this.userAccessRequestState.getSearchTermValue();
+
+      // Update skip value
+      const newSkip = currentParams.skip + currentParams.limit;
+      this.userAccessRequestState.updateQueryParams({ skip: newSkip });
+
+      // Load and append data
+      const response = searchTerm
+        ? await this.userAccessRequestService.getUserAccessRequestWithParam(
+            searchTerm,
+            newSkip,
+            currentParams.limit,
+            currentParams.sortParam || 'createdDate',
+            currentParams.sortOrder
+          )
+        : await this.userAccessRequestService.getUserAccessRequests(
+            newSkip,
+            currentParams.limit,
+            currentParams.sortParam || 'createdDate',
+            currentParams.sortOrder
+          );
+
+      this.userAccessRequestState.appendRequests(response.Result);
+    } catch (error) {
+      console.error('Load more failed:', error);
+      throw error;
+    } finally {
+      this.userAccessRequestState.setUpdating(false);
+    }
+  }
+
+  async loadRequests(): Promise<void> {
+    try {
+      this.userAccessRequestState.setUpdating(true);
+      const params = this.userAccessRequestState.getQueryParamsValue();
+
+      const requests =
+        await this.userAccessRequestService.getUserAccessRequests(
+          params.skip,
+          params.limit,
+          params.sortParam || 'createdDate',
+          params.sortOrder
+        );
+
+      this.userAccessRequestState.setRequests(requests.Result);
+    } catch (error) {
+      console.error('Failed to load requests:', error);
+      throw error;
+    } finally {
+      this.userAccessRequestState.setUpdating(false);
+    }
+  }
+
+  async loadRoles(): Promise<void> {
+    try {
+      // this.userAccessRequestState.setUpdating(true);
+      // const params = this.userAccessRequestState.getQueryParamsValue();
+
+      const requests = await this.userAccessRequestService.getRoles();
+
+      this.userAccessRequestState.setRoles(requests.Result);
+    } catch (error) {
+      console.error('Failed to load requests:', error);
+      throw error;
+    } finally {
+      // this.userAccessRequestState.setUpdating(false);
+    }
+  }
+
+  async loadRequestsWithParam(param: string): Promise<void> {
+    try {
+      this.userAccessRequestState.setUpdating(true);
+      const params = this.userAccessRequestState.getQueryParamsValue();
+
+      const requests =
+        await this.userAccessRequestService.getUserAccessRequestWithParam(
+          param,
+          params.skip,
+          params.limit,
+          params.sortParam || 'createdDate',
+          params.sortOrder
+        );
+
+      this.userAccessRequestState.setRequests(requests.Result);
+    } catch (error) {
+      console.error('Failed to load requests with param:', error);
+      throw error;
+    } finally {
+      this.userAccessRequestState.setUpdating(false);
+    }
+  }
+
+  async loadRequestsByFilterParams(filterParams: IDataFilter[]): Promise<void> {
+    try {
+      this.userAccessRequestState.setUpdating(true);
+      const params = this.userAccessRequestState.getQueryParamsValue();
+
+      const requests =
+        await this.userAccessRequestService.getUserAccessRequestByFilterParams(
+          filterParams.map((filter) => ({
+            PropertyName: filter.name,
+            EntityValue: filter.value,
+            type: convertDataFilterTypeToSearchPropertyValueType(filter.type),
+            Operator: SearchOperator.And,
+            Sign: SearchPropertySign.EQ,
+          })),
+          params.skip,
+          params.limit,
+          params.sortParam || 'createdDate',
+          params.sortOrder
+        );
+
+      this.userAccessRequestState.setRequests(requests.Result);
+    } catch (error) {
+      console.error('Failed to load requests with param:', error);
+      throw error;
+    } finally {
+      this.userAccessRequestState.setUpdating(false);
+    }
+  }
+
+  updateQueryParams(params: Partial<QueryParams<UserAccessRequest>>): void {
+    this.userAccessRequestState.updateQueryParams(params);
+    this.loadRequests();
+  }
+
+  async addRequest(request: Partial<UserAccessRequest>): Promise<void> {
+    try {
+      this.userAccessRequestState.setUpdating(true);
+      const newRequest = { ...request } as UserAccessRequest;
+      this.userAccessRequestState.addRequest(newRequest);
+
+      await this.userAccessRequestService.saveUserAccessRequests([newRequest]);
+      await this.loadRequests(); // Reload to get server-side changes
+    } catch (error) {
+      console.error('Failed to add request:', error);
+      this.userAccessRequestState.removeRequest(request.Id!);
+      throw error;
+    } finally {
+      this.userAccessRequestState.setUpdating(false);
+    }
+  }
+
+  async updateRequest(request: UserAccessRequest): Promise<void> {
+    try {
+      this.userAccessRequestState.setUpdating(true);
+      await this.userAccessRequestService.saveUserAccessRequests([request]);
+      this.userAccessRequestState.updateRequest(request);
+      this.utilService.showSuccess('Request updated successfully');
+    } catch (error) {
+      console.error('Failed to update request:', error);
+      throw error;
+    } finally {
+      this.userAccessRequestState.setUpdating(false);
+    }
+  }
+
+  async deleteRequest(requestId: string): Promise<void> {
+    try {
+      this.userAccessRequestState.setUpdating(true);
+      await lastValueFrom(
+        this.userAccessRequestService.deleteUserAccessRequests([requestId])
+      );
+      this.userAccessRequestState.removeRequest(requestId);
+    } catch (error) {
+      console.error('Failed to delete request:', error);
+      throw error;
+    } finally {
+      this.userAccessRequestState.setUpdating(false);
+    }
+  }
+
+  async approveRequest(request: UserAccessRequest): Promise<void> {
+    try {
+      this.userAccessRequestState.setUpdating(true);
+      const response =
+        await this.userAccessRequestService.processUserAccessRequests(
+          [request],
+          true
+        );
+      // console.log(response);
+      const data = (response as UserAccessRequest[])?.[0];
+      if (data) {
+        this.userAccessRequestState.updateRequest(data);
+        this.utilService.showSuccess('Request approved successfully');
+      }
+    } catch (error) {
+      console.error('Failed to update request:', error);
+      throw error;
+    } finally {
+      this.userAccessRequestState.setUpdating(false);
+    }
+  }
+}
+
+enum DateFilterTypes {
+  Before = SearchPropertySign.LT,
+  On = SearchPropertySign.EQ,
+  After = SearchPropertySign.GT,
+}

package/src/lib/components/user-request-approval/helper.ts

@@ -0,0 +1,61 @@
+import { DataFilterType } from 'verben-ng-ui';
+import { SearchPropertyValueType } from '../../models/SearchPropertyValueType';
+
+export const roles: { id: string; name: string }[] = [
+  { id: 'admin', name: 'Admin' },
+  { id: 'manager', name: 'Manager' },
+  { id: 'staff', name: 'Staff' },
+];
+
+// export const mockData: UserAccessRequest[] = new Array(10)
+//   .fill(1)
+//   .map((id, i) => ({
+//     FirstName: `First ${id + i}`,
+//     LastName: `Last ${id + i}`,
+//     OtherName: `Other ${id + i}`,
+//     Id: id + i,
+//     id: (id + i).toString(),
+//     MailAddress: `user${id + i}@mail.com`,
+//     PhoneNumber: `+23480000000${id + i}`,
+//     RequestStatus: randomEnum(UserAccessRequestStatus),
+//     RoleID: roles[Math.floor(Math.random() * roles.length)].id,
+//     Password: '1234567',
+//     ExpireOn: new Date(),
+//     IsSeeded: false,
+//     OTPExpireOn: new Date(),
+//     Tenants: [],
+//     SignupType: OAuthType.InApp,
+//     CreatedAt: new Date(),
+//     UpdatedAt: new Date(),
+//     DataState: ObjectState.New,
+//     TenantId: `Tenant${id + i}`,
+//     Code: '',
+//     ServiceName: '',
+//   }));
+
+function randomEnum<T extends object>(anEnum: T): T[keyof T] {
+  const enumValues = Object.values(anEnum) as unknown as T[keyof T][];
+  const randomIndex = Math.floor(Math.random() * enumValues.length);
+  return enumValues[randomIndex];
+}
+
+export function convertDataFilterTypeToSearchPropertyValueType(
+  type: DataFilterType
+) {
+  switch (type) {
+    case DataFilterType.String:
+      return SearchPropertyValueType.String;
+    case DataFilterType.Integer:
+      return SearchPropertyValueType.Int;
+    case DataFilterType.Decimal:
+      return SearchPropertyValueType.Decimal;
+    case DataFilterType.Credit:
+      return SearchPropertyValueType.Float;
+    case DataFilterType.Date:
+      return SearchPropertyValueType.Date;
+    case DataFilterType.Bool:
+      return SearchPropertyValueType.Bool;
+    case DataFilterType.Number:
+      return SearchPropertyValueType.Int;
+  }
+}

package/src/lib/components/user-request-approval/services/user-access-request.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UserAccessRequestService } from './user-access-request.service';
+
+describe('UserAccessRequestService', () => {
+  let service: UserAccessRequestService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(UserAccessRequestService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/components/user-request-approval/services/user-access-request.service.ts

@@ -0,0 +1,122 @@
+import { Injectable } from '@angular/core';
+
+import { Observable, from } from 'rxjs';
+import { HttpWebRequestService } from '../../../services/http-web-request.service';
+import { UserAccessRequest } from '../../../models/user-access-request';
+import { Paged } from '../../../models/paged';
+import { Role } from '../../../models/Role';
+import { Tag } from '../../../models/Tag';
+import { SearchPropertyValue } from '../../../models/SearchPropertyValue';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UserAccessRequestService {
+  private readonly BASE_URL = 'User';
+
+  constructor(private httpService: HttpWebRequestService) {}
+
+  /**
+   * Get user access requests with pagination and sorting
+   * @param skip Number of records to skip
+   * @param limit Number of records to take
+   * @param sortParam Sort parameter
+   * @param sortOrder Sort order ('asc' or 'desc')
+   * @returns Promise containing the user access requests
+   */
+  getUserAccessRequests(
+    skip: number,
+    limit: number,
+    sortParam: string,
+    sortOrder: string
+  ): Promise<Paged<UserAccessRequest>> {
+    const url = `${this.BASE_URL}/GetUserAccessRequests/${skip}/${limit}/${sortParam}/${sortOrder}`;
+    return this.httpService.get(url) as Promise<Paged<UserAccessRequest>>;
+  }
+
+  getRoles(): Promise<Paged<Role>> {
+    const url = `Role/GetRoles/0/0`;
+    return this.httpService.get(url) as Promise<Paged<Role>>;
+  }
+
+  getTags(): Promise<Paged<Tag>> {
+    const url = `User/GetTags/0/0`;
+    return this.httpService.get(url) as Promise<Paged<Tag>>;
+  }
+
+  /**
+   * Get user access requests with additional parameter, pagination and sorting
+   * @param param Search parameter
+   * @param skip Number of records to skip
+   * @param limit Number of records to take
+   * @param sortParam Sort parameter
+   * @param sortOrder Sort order ('asc' or 'desc')
+   * @returns Promise containing the filtered user access requests
+   */
+  getUserAccessRequestWithParam(
+    param: string,
+    skip: number,
+    limit: number,
+    sortParam: string,
+    sortOrder: string
+  ): Promise<Paged<UserAccessRequest>> {
+    const url = `${this.BASE_URL}/GetUserAccessRequestWithParam/${param}/${skip}/${limit}/${sortParam}/${sortOrder}`;
+    return this.httpService.get(url) as Promise<Paged<UserAccessRequest>>;
+  }
+
+  /**
+   * Get user access requests with additional parameter, pagination and sorting
+   * @param params Filter parameters
+   * @param skip Number of records to skip
+   * @param limit Number of records to take
+   * @param sortParam Sort parameter
+   * @param sortOrder Sort order ('asc' or 'desc')
+   * @returns Promise containing the filtered user access requests
+   */
+  getUserAccessRequestByFilterParams(
+    params: SearchPropertyValue[],
+    skip: number,
+    limit: number,
+    sortParam: string,
+    sortOrder: string
+  ): Promise<Paged<UserAccessRequest>> {
+    const url = `${this.BASE_URL}/SearchUserAccessRequest/${skip}/${limit}/${sortParam}/${sortOrder}`;
+    return this.httpService.post(url, params) as Promise<
+      Paged<UserAccessRequest>
+    >;
+  }
+
+  /**
+   * Save multiple user access requests
+   * @param requests Array of user access requests to save
+   * @returns Promise containing the save operation result
+   */
+  saveUserAccessRequests(requests: UserAccessRequest[]): Promise<any> {
+    const url = `${this.BASE_URL}/SaveUserAccessRequests`;
+    return this.httpService.post(url, requests);
+  }
+
+  /**
+   * Approve or reject multiple user access requests
+   * @param requests Array of user access requests to save
+   * @param isApproval True for approval, false for decline
+   * @returns Promise containing the save operation result
+   */
+  processUserAccessRequests(
+    requests: UserAccessRequest[],
+    isApproval: boolean
+  ): Promise<any> {
+    const url = `${this.BASE_URL}/UserAccessRequestAction/${isApproval}`;
+    return this.httpService.post(url, requests);
+  }
+
+  /**
+   * Delete multiple user access requests
+   * @param requestIds Array of request IDs to delete
+   * @returns Observable containing the delete operation result
+   */
+  deleteUserAccessRequests(requestIds: string[]): Observable<any> {
+    const url = `${this.BASE_URL}/DeleteUserAccessRequests`;
+    return this.httpService.delete(`${url}?data=${requestIds.join(',')}`);
+  }
+}

package/src/lib/components/user-request-approval/states/user-access-request.state.ts

@@ -0,0 +1,109 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { QueryParams } from '../../../models/query-params';
+import { UserAccessRequest } from '../../../models/user-access-request';
+import { Role } from '../../../models/Role';
+import { SortDirection } from '../../../models/SortDirection';
+import { IDataFilter } from 'verben-ng-ui';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UserAccessRequestState {
+  private updating$ = new BehaviorSubject<boolean>(false);
+  private requests$ = new BehaviorSubject<UserAccessRequest[]>([]);
+  private roles$ = new BehaviorSubject<Role[]>([]);
+  private searchTerm$ = new BehaviorSubject<string>('');
+  private queryParams$ = new BehaviorSubject<QueryParams<UserAccessRequest>>({
+    skip: 0,
+    limit: 20,
+    sortParam: 'CreatedAt',
+    sortOrder: SortDirection.Asc,
+  });
+  private filterParams$ = new BehaviorSubject<IDataFilter[]>([]);
+
+  isUpdating$(): Observable<boolean> {
+    return this.updating$.asObservable();
+  }
+
+  setUpdating(isUpdating: boolean): void {
+    this.updating$.next(isUpdating);
+  }
+
+  getRequests$(): Observable<UserAccessRequest[]> {
+    return this.requests$.asObservable();
+  }
+
+  setRequests(requests: UserAccessRequest[]): void {
+    this.requests$.next(requests);
+  }
+
+  getFilterParams$(): Observable<IDataFilter[]> {
+    return this.filterParams$.asObservable();
+  }
+
+  setFilterParams(params: IDataFilter[]): void {
+    this.filterParams$.next(params);
+  }
+
+  getRoles$(): Observable<Role[]> {
+    return this.roles$.asObservable();
+  }
+
+  setRoles(roles: Role[]): void {
+    this.roles$.next(roles);
+  }
+
+  appendRequests(newRequests: UserAccessRequest[]): void {
+    const currentRequests = this.requests$.getValue();
+    this.requests$.next([...currentRequests, ...newRequests]);
+  }
+
+  getSearchTerm$(): Observable<string> {
+    return this.searchTerm$.asObservable();
+  }
+
+  getSearchTermValue(): string {
+    return this.searchTerm$.getValue();
+  }
+
+  setSearchTerm(term: string): void {
+    this.searchTerm$.next(term);
+  }
+
+  getQueryParams$(): Observable<QueryParams<UserAccessRequest>> {
+    return this.queryParams$.asObservable();
+  }
+
+  getQueryParamsValue(): QueryParams<UserAccessRequest> {
+    return this.queryParams$.getValue();
+  }
+
+  updateQueryParams(params: Partial<QueryParams<UserAccessRequest>>): void {
+    this.queryParams$.next({ ...this.queryParams$.getValue(), ...params });
+  }
+
+  resetPagination(): void {
+    const currentParams = this.queryParams$.getValue();
+    this.queryParams$.next({ ...currentParams, skip: 0 });
+  }
+
+  addRequest(request: UserAccessRequest): void {
+    const currentValue = this.requests$.getValue();
+    this.requests$.next([...currentValue, request]);
+  }
+
+  updateRequest(updatedRequest: UserAccessRequest): void {
+    const requests = this.requests$.getValue();
+    const index = requests.findIndex((r) => r.Id === updatedRequest.Id);
+    if (index !== -1) {
+      requests[index] = updatedRequest;
+      this.requests$.next([...requests]);
+    }
+  }
+
+  removeRequest(requestId: string): void {
+    const currentValue = this.requests$.getValue();
+    this.requests$.next(currentValue.filter((r) => r.Id !== requestId));
+  }
+}

package/src/lib/components/user-request-approval/user-access-request-status-badge/user-access-request-status-badge.component.html

@@ -0,0 +1,8 @@
+<verbena-badge
+  borderRadius="9px"
+  [bgColor]="badgeConfig().bgColor"
+  [textColor]="badgeConfig().textColor"
+  fontSize="12px"
+  [text]="badgeConfig().label"
+  [pd]="'2px 6px'"
+></verbena-badge>

package/src/lib/components/user-request-approval/user-access-request-status-badge/user-access-request-status-badge.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserAccessRequestStatusBadgeComponent } from './user-access-request-status-badge.component';
+
+describe('UserAccessRequestStatusBadgeComponent', () => {
+  let component: UserAccessRequestStatusBadgeComponent;
+  let fixture: ComponentFixture<UserAccessRequestStatusBadgeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [UserAccessRequestStatusBadgeComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(UserAccessRequestStatusBadgeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/user-request-approval/user-access-request-status-badge/user-access-request-status-badge.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+import { UserAccessRequestStatus } from '../../../models/user-access-request-status';
+
+@Component({
+  selector: 'lib-user-access-request-status-badge',
+  templateUrl: './user-access-request-status-badge.component.html',
+  styleUrl: './user-access-request-status-badge.component.css',
+})
+export class UserAccessRequestStatusBadgeComponent {
+  @Input() status: UserAccessRequestStatus = UserAccessRequestStatus.Pending;
+
+  badgeConfig() {
+    switch (this.status) {
+      case UserAccessRequestStatus.Approved:
+        return { bgColor: '#CAE1CC', textColor: '#4ABB54', label: 'Approved' };
+      case UserAccessRequestStatus.Declined:
+        return { bgColor: '#FFDFDF', textColor: '#EB5757', label: 'Rejected' };
+      default:
+        return { bgColor: '#827C7C', textColor: '#C3C3C3', label: 'Pending' };
+    }
+  }
+}