verben-authentication-ui 0.3.2 → 0.3.3

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

@@ -0,0 +1,152 @@
+import { Injectable } from '@angular/core';
+import {
+  Observable,
+  catchError,
+  from,
+  lastValueFrom,
+  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';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UserAccessRequestFacade {
+  constructor(
+    private userAccessRequestService: UserAccessRequestService,
+    private userAccessRequestState: UserAccessRequestState
+  ) {}
+
+  isUpdating$(): Observable<boolean> {
+    return this.userAccessRequestState.isUpdating$();
+  }
+
+  getRequests$(): Observable<UserAccessRequest[]> {
+    return this.userAccessRequestState.getRequests$();
+  }
+
+  getQueryParams$(): Observable<QueryParams<UserAccessRequest>> {
+    return this.userAccessRequestState.getQueryParams$();
+  }
+
+  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 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);
+    }
+  }
+
+  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);
+    } 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);
+      }
+    } catch (error) {
+      console.error('Failed to update request:', error);
+      throw error;
+    } finally {
+      this.userAccessRequestState.setUpdating(false);
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+import { ObjectState } from '../../models/object-state';
+import { UserAccessRequest } from '../../models/user-access-request';
+import { UserAccessRequestStatus } from '../../models/user-access-request-status';
+
+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: [],
+
+    CreatedAt: new Date(),
+    UpdatedAt: new Date(),
+    DataState: ObjectState.New,
+    Tenant: `Tenant${id + i}`,
+  }));
+
+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];
+}

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,87 @@
+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';
+
+@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>>;
+  }
+
+  /**
+   * 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>>;
+  }
+
+  /**
+   * 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,65 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { QueryParams } from '../../../models/query-params';
+import { UserAccessRequest } from '../../../models/user-access-request';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UserAccessRequestState {
+  private updating$ = new BehaviorSubject<boolean>(false);
+  private requests$ = new BehaviorSubject<UserAccessRequest[]>([]);
+  private queryParams$ = new BehaviorSubject<QueryParams<UserAccessRequest>>({
+    skip: 0,
+    limit: 10,
+    sortParam: 'CreatedAt',
+    sortOrder: 'asc',
+  });
+
+  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);
+  }
+
+  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 });
+  }
+
+  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,7 @@
+<verbena-badge
+  borderRadius="9px"
+  [bgColor]="badgeConfig().bgColor"
+  [textColor]="badgeConfig().textColor"
+  fontSize="12px"
+  [text]="badgeConfig().label"
+></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' };
+    }
+  }
+}

package/src/lib/components/user-request-approval/user-request-approval.component.css

@@ -0,0 +1 @@
+@import "../../../theme/tailwind.css";

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

@@ -0,0 +1,218 @@
+<div class="space-y-8">
+  <verben-data-view
+    #vdv
+    [viewState]="{
+      isSearch: true,
+      isColumn: true,
+      isFilter: true,
+      isSort: true,
+      isExport: true,
+      isSelect: true,
+      isCreate: false,
+      isToggle: true,
+    }"
+    [buttonClass]="'my-custom-button-class'"
+    [iconClass]="'my-icon-class'"
+    [activeIconClass]="'my-active-icon-class'"
+    [selectedColumnCount]="0"
+    [selectedSortCount]="0"
+    [selectedFilterTableCount]="0"
+    (viewChange)="onViewChange($event)"
+    (stateChange)="onStateChange($event)"
+  >
+    <div table-content>
+      <lib-data-table
+        [data]="data()"
+        [columns]="visibleColumnDef"
+        [styleConfig]="styles"
+        (selectionChange)="onSelectionChange($event)"
+      >
+        <ng-container libColumn="createdAt">
+          <ng-template #cell let-value>
+            {{ value | date }}
+          </ng-template>
+        </ng-container>
+        <ng-container libColumn="actions">
+          <ng-template #cell let-value let-deleteRow>
+            <div class="flex gap-6">
+              <verben-svg
+                (click)="openDetailView(value)"
+                icon="edit"
+                [width]="15"
+                [height]="15"
+                class="cursor-pointer"
+              ></verben-svg>
+              <!-- <button (click)="openDetailView(value)">Open</button>
+              <button (click)="selected = cardData[rowIndex]; vdv.toggleView()">
+                Switch
+              </button> -->
+              <verben-svg
+                icon="delete"
+                [width]="15"
+                [height]="15"
+                (click)="deleteRow()"
+                class="cursor-pointer"
+              ></verben-svg>
+            </div>
+          </ng-template>
+          <ng-template #header>
+            <strong>Actions</strong>
+          </ng-template>
+        </ng-container>
+      </lib-data-table>
+    </div>
+    <div card-content>
+      <verben-card-data-view
+        borderRadius="12px"
+        (loadMoreClick)="loadMore()"
+        #vdcv
+        dataId="MailAddress"
+        border="5px"
+        [cardDataList]="cardData()"
+        rbgColor="#f5f6f9"
+        mg="20px"
+      >
+        <verben-left-card-data-view class="space-y-7">
+          <verben-left-card-data
+            #vlcd
+            [parent]="vdcv"
+            dataId="MailAddress"
+            class="bg-secondary-100 rounded-xl border-primary border-[1px]"
+            [cardDataList]="cardData()"
+          >
+            <ng-template #card let-item>
+              <div (click)="currentData = vdcv.onItemClick(item)" class="flex">
+                <div
+                  (click)="currentData = vdcv.onItemClick(item)"
+                  class="flex cursor-pointer w-full bg-secondary rounded-xl"
+                >
+                  <div
+                    class="w-3 rounded-xl rounded-tr-none rounded-br-none"
+                    [ngClass]="
+                      item.selected ? 'bg-primary' : 'bg-secondary-200'
+                    "
+                  ></div>
+                  <div class="flex flex-col py-2 px-4 w-full">
+                    <div class="flex items-center gap-4 justify-between">
+                      <div class="grid gap-y-2">
+                        <span class="font-semibold text-[#404040]">{{
+                          item.title
+                        }}</span>
+                        <p class="flex items-center">
+                          <label for="phone" class="text-[10px] font-light"
+                            >Phone Number:</label
+                          >
+                          <span id="phone" class="text-sm">{{
+                            item.data.PhoneNumber
+                          }}</span>
+                        </p>
+                      </div>
+
+                      <div class="grid gap-y-2">
+                        <p class="grid">
+                          <label for="role" class="text-[10px] font-light"
+                            >Role</label
+                          >
+                          <span id="role" class="text-sm">Manager</span>
+                        </p>
+
+                        <lib-user-access-request-status-badge
+                          [status]="item.data.RequestStatus"
+                        ></lib-user-access-request-status-badge>
+                      </div>
+                    </div>
+
+                    <!-- <div class="flex">
+                      <span class="font-normal text-sm">{{ item.title }}</span>
+                    </div>
+                    @for (ciItem of item.body; track ciItem.value) {
+                    <div class="">
+                      <span class="text-muted font-light text-xs"
+                        >{{ ciItem.title }}:</span
+                      >
+                      <span class="text-black">{{ ciItem.value }}</span>
+                    </div>
+                    } -->
+                  </div>
+                </div>
+              </div>
+            </ng-template>
+          </verben-left-card-data>
+        </verben-left-card-data-view>
+
+        <verben-right-card-data-view>
+          <ng-template #parent>
+            <lib-user-request-form
+              [currentData]="currentData"
+              (switchView)="vdv.toggleView()"
+              (onApproval)="onApprove($event)"
+            ></lib-user-request-form>
+          </ng-template>
+        </verben-right-card-data-view>
+
+        <verben-card-data-view-footer class="float-right">
+          <div class="flex gap-2">
+            <!-- <span class="paginator-text"
+              >{{ data().length }} records loaded</span
+            > -->
+            <span></span>
+            <button (click)="loadMore()" class="load-more">Load more</button>
+          </div>
+        </verben-card-data-view-footer>
+      </verben-card-data-view>
+    </div>
+    <div column-content>
+      <verben-visible-column
+        (columnsUpdated)="onColumnsUpdated($event)"
+        [border]="'1px solid rgba(212, 160, 7, 1)'"
+        borderRadius="10px"
+        boxShadow="2px 2px 2px 0px silver"
+        bgColor="white"
+        width="400px"
+        textColor="black"
+        pd="1rem"
+        primaryColor="#FFE681"
+        secondaryColor="#3479E9"
+        [columns]="visibleColumns"
+        [displayedColumns]="5"
+      ></verben-visible-column>
+    </div>
+    <div filter-content>
+      <verben-table-filter
+        [border]="'1px solid rgba(212, 160, 7, 1)'"
+        borderRadius="10px"
+        boxShadow="2px 2px 2px 0px silver"
+        bgColor="white"
+        width="420px"
+        textColor="black"
+        pd="1rem"
+        primaryColor="#FFE681"
+        secondaryColor="#3479E9"
+        tertiaryColor="#404040"
+        [filterOptions]="filterArray"
+        [maxFilterLength]="3"
+      ></verben-table-filter>
+    </div>
+    <div sort-content>
+      <verben-sort-table
+        (selectedOptions)="onSortUpdated($event)"
+        [border]="'1px solid rgba(212, 160, 7, 1)'"
+        borderRadius="10px"
+        boxShadow="2px 2px 2px 0px silver"
+        bgColor="white"
+        width="400px"
+        textColor="black"
+        pd="1rem"
+        primaryColor="#FFE681"
+        secondaryColor="#3479E9"
+        tertiaryColor="#404040"
+        [enableDragAndDrop]="true"
+        [sortOptions]="sortOptions"
+      ></verben-sort-table>
+    </div>
+    <div export-content>
+      <lib-data-export [data]="data()" (exportDataEvent)="handleExport($event)">
+      </lib-data-export>
+    </div>
+  </verben-data-view>
+</div>

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

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