verben-authentication-ui 0.3.1 → 0.3.3

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

@@ -0,0 +1,301 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  computed,
+  OnInit,
+  Signal,
+  signal,
+  ViewChild,
+  WritableSignal,
+} from '@angular/core';
+import { columns } from './access-request.columns';
+import { mockData } from './helper';
+import { baseStyle } from './base-table-style';
+import { UserAccessRequest } from '../../models/user-access-request';
+import {
+  CardData,
+  CardDataViewComponent,
+  ColumnDefinition,
+  DataFilterType,
+  DataViewComponent,
+  IDataFilter,
+} from 'verben-ng-ui';
+import { UserRequestApprovalService } from './user-request-approval.service';
+import { UserAccessRequestFacade } from './facades/user-access-request.facade';
+
+interface UserFormData {
+  MailAddress: string;
+  Name: string;
+  PhoneNumber: string;
+}
+
+@Component({
+  selector: 'lib-user-request-approval',
+  templateUrl: './user-request-approval.component.html',
+  styleUrl: './user-request-approval.component.css',
+  // changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UserRequestApprovalComponent implements OnInit {
+  @ViewChild('vdcv') cardDataView!: CardDataViewComponent;
+  @ViewChild('vdv') dataView!: DataViewComponent;
+
+  columns: ColumnDefinition<UserAccessRequest>[] = columns;
+  // visibleColumnDef: WritableSignal<ColumnDefinition<UserAccessRequest>[]> =
+  //   signal(columns);
+  visibleColumnDef = this.columns;
+  data: WritableSignal<UserAccessRequest[]> = signal([]);
+  styles = baseStyle;
+  currentData: CardData | null = null;
+  isGridView = true;
+  selected: CardData | null = null;
+
+  cardData: Signal<CardData[]> = computed(() =>
+    this.data()?.map(
+      ({
+        FirstName,
+        LastName,
+        MailAddress,
+        PhoneNumber,
+        RoleID,
+        RequestStatus,
+      }) => ({
+        selected: false,
+        title: `${FirstName} ${LastName}`,
+        data: {
+          FirstName,
+          LastName,
+          MailAddress,
+          PhoneNumber,
+          RoleID,
+          RequestStatus,
+        } as Partial<UserAccessRequest>,
+        body: [
+          { title: 'Name', value: `${FirstName} ${LastName}` },
+          { title: 'E-Mail Address', value: MailAddress },
+          { title: 'Phone Number', value: PhoneNumber ?? '' },
+        ],
+        children: [],
+      })
+    )
+  );
+
+  constructor(
+    private cdr: ChangeDetectorRef,
+    // private service: UserRequestApprovalService,
+    private userAccessRequestFacade: UserAccessRequestFacade
+  ) {}
+
+  async ngOnInit() {
+    // this.data = this.service.getMockUserRequests();
+    this.userAccessRequestFacade.getRequests$().subscribe((data) => {
+      this.data.set(data);
+    });
+
+    try {
+      await this.userAccessRequestFacade.loadRequests();
+    } catch (error) {
+      // Handle error
+    }
+  }
+
+  // To search with parameter:
+  async searchRequests(param: string) {
+    try {
+      await this.userAccessRequestFacade.loadRequestsWithParam(param);
+    } catch (error) {
+      // Handle error
+    }
+  }
+
+  async onApprove(mailAddress: string) {
+    const data = this.data().find(
+      ({ MailAddress }) => MailAddress === mailAddress
+    );
+
+    if (data) {
+      await this.userAccessRequestFacade.approveRequest(data);
+    }
+  }
+
+  openDetailView(mailAddress: string) {
+    const cardItem = this.getCardDataByMailAddress(mailAddress);
+    if (cardItem && this.cardDataView) {
+      this.dataView.toggleView();
+      // First reset all selections
+      this.cardData().forEach((item) => {
+        item.selected = false;
+        if (item.children) {
+          item.children.forEach((child) => (child.selected = false));
+        }
+      });
+
+      // Set the selected item
+      cardItem.selected = true;
+      this.currentData = this.cardDataView.onItemClick(cardItem);
+
+      // Force change detection if needed
+      // this.changeDetectorRef.detectChanges();
+    }
+  }
+
+  getCardDataByMailAddress(mailAddress: string): CardData | undefined {
+    return this.cardData().find(({ data }) => data.MailAddress === mailAddress);
+  }
+
+  onViewChange(isGridView: boolean): void {
+    this.isGridView = isGridView;
+    // Reset selection when switching views
+    if (this.currentData) {
+      this.cardDataView?.clearData();
+      this.currentData = null;
+    }
+
+    console.log('SELECTED', this.selected);
+
+    if (this.selected) {
+      this.cardDataView.onItemClick(this.selected);
+    }
+  }
+
+  openFormView(index: number) {
+    const item = this.cardData()[index];
+    console.log('ITEM = ', item);
+  }
+
+  handleExport(exportedData: Partial<any>[]) {
+    console.log('Exported data:', exportedData);
+    this.downloadCSV(exportedData);
+  }
+
+  /**
+   *
+   * @param data Simple csv export for testing
+   */
+  private downloadCSV(data: Partial<any>[]) {
+    const headers = Object.keys(data[0]);
+    const csvContent = [
+      headers.join(','),
+      ...data.map((row) => headers.map((header) => row[header]).join(',')),
+    ].join('\n');
+
+    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+    const link = document.createElement('a');
+    if (link.download !== undefined) {
+      const url = URL.createObjectURL(blob);
+      link.setAttribute('href', url);
+      link.setAttribute('download', 'export.csv');
+      link.style.visibility = 'hidden';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+  }
+
+  onSelectionChange(selectedRows: UserAccessRequest[]) {
+    console.log('Selection changed:', selectedRows);
+    // Handle the selection change
+  }
+
+  /**
+   * Copied over from card view doc until I understand usage
+   */
+  selectedColumnCount: number = 0;
+  selectedFilterTableCount: number = 0;
+  isOPen: boolean = true;
+  selectedSortCount: number = 0;
+  showColumn: boolean = false;
+  showSort: boolean = false;
+  selectedAll: boolean = false;
+  visibleColumns: IDataFilter[] = columns.map((col) => ({
+    checked: true,
+    name: typeof col.header === 'string' ? col.header : col.id,
+    type: DataFilterType.Bool,
+  }));
+  filterArray: IDataFilter[] = [
+    {
+      name: 'Name',
+      type: DataFilterType.String,
+      checked: false,
+    },
+    {
+      name: 'MailAddress',
+      type: DataFilterType.String,
+      checked: false,
+    },
+    {
+      name: 'PhoneNumber',
+      type: DataFilterType.String,
+      checked: false,
+    },
+    {
+      name: 'CreatedAt',
+      type: DataFilterType.Date,
+      checked: false,
+    },
+  ];
+
+  sortOptions: IDataFilter[] = [
+    {
+      name: 'Name',
+      type: DataFilterType.String,
+      checked: false,
+    },
+    {
+      name: 'MailAddress',
+      type: DataFilterType.String,
+      checked: false,
+    },
+    {
+      name: 'PhoneNumber',
+      type: DataFilterType.String,
+      checked: false,
+    },
+    {
+      name: 'CreatedAt',
+      type: DataFilterType.Date,
+      checked: false,
+    },
+  ];
+  clearData() {
+    this.currentData = {} as CardData;
+  }
+  loadMore() {
+    // this.cardData = this.cardData.concat(this.cardData);
+  }
+  onColumnChange(event: boolean) {
+    this.showColumn = event;
+  }
+  onSortChange(event: boolean) {
+    this.showSort = event;
+    console.log(event);
+  }
+  onColumnsUpdated(updatedColumns: IDataFilter[]) {
+    console.log(updatedColumns);
+    const updatedColumnDef: ColumnDefinition<UserAccessRequest>[] = [];
+    updatedColumns.forEach((col) => {
+      const matchingCol = this.columns.find(
+        (column) => column.header === col.name || column.id === col.name
+      );
+      if (matchingCol) {
+        updatedColumnDef.push(matchingCol);
+      }
+    });
+
+    console.log(updatedColumnDef);
+    this.visibleColumnDef = [...updatedColumnDef];
+    this.cdr.markForCheck();
+
+    this.onColumnChange(false);
+    this.selectedColumnCount = updatedColumns.length;
+  }
+  onSortUpdated(updatedSorts: IDataFilter[]) {
+    this.onSortChange(false);
+    this.selectedSortCount = updatedSorts.length;
+    console.log(updatedSorts);
+  }
+
+  onStateChange(event: { key: string; value: boolean }): void {
+    console.log(`State changed for ${event.key}:`, event.value);
+  }
+}

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

@@ -0,0 +1,52 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UserRequestApprovalComponent } from './user-request-approval.component';
+import {
+  CardDataViewModule,
+  CardModule,
+  DataExportModule,
+  DataTableModule,
+  DataViewModule,
+  DropDownModule,
+  SortTableModule,
+  SvgModule,
+  TableFilterModule,
+  VerbenaBadgeModule,
+  VerbenaButtonModule,
+  VerbenaInputModule,
+  VisibleColumnModule,
+} from 'verben-ng-ui';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { UserRequestFormComponent } from './user-request-form/use-request-form.component';
+import { UserAccessRequestStatusBadgeComponent } from './user-access-request-status-badge/user-access-request-status-badge.component';
+import { UserRequestApprovalService } from './user-request-approval.service';
+
+@NgModule({
+  declarations: [
+    UserRequestApprovalComponent,
+    UserRequestFormComponent,
+    UserAccessRequestStatusBadgeComponent,
+  ],
+  imports: [
+    CommonModule,
+
+    DataTableModule,
+    CardModule,
+    SvgModule,
+    DataViewModule,
+    CardDataViewModule,
+    SortTableModule,
+    VisibleColumnModule,
+    TableFilterModule,
+    DataExportModule,
+    FormsModule,
+    ReactiveFormsModule,
+    VerbenaInputModule,
+    VerbenaButtonModule,
+    VerbenaBadgeModule,
+    DropDownModule,
+  ],
+  providers: [UserRequestApprovalService],
+  exports: [UserRequestApprovalComponent],
+})
+export class LibUserRequestApprovalModule {}

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

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

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

@@ -0,0 +1,58 @@
+import { HttpClient } from '@angular/common/http';
+import { Inject, Injectable, InjectionToken } from '@angular/core';
+import { UserAccessRequest } from '../../models/user-access-request';
+import { UserAccessRequestStatus } from '../../models/user-access-request-status';
+import { ObjectState } from '../../models/object-state';
+import { mockData } from './helper';
+
+export interface ServiceConfig {
+  resourceEndpoint: string;
+}
+
+export const SERVICE_CONFIG = new InjectionToken<ServiceConfig>(
+  'ServiceConfig'
+);
+
+@Injectable()
+export class UserRequestApprovalService {
+  // protected readonly baseUrl: string;
+  protected readonly resourceEndpoint: string;
+  roles: { id: string; name: string }[] = [
+    { id: 'admin', name: 'Admin' },
+    { id: 'manager', name: 'Manager' },
+    { id: 'staff', name: 'Staff' },
+  ];
+
+  constructor() { // @Inject(SERVICE_CONFIG) config: ServiceConfig // protected httpClient: HttpClient,
+    // this.baseUrl = environment.serviceUrl;
+    // this.resourceEndpoint = config.resourceEndpoint;
+    this.resourceEndpoint = '';
+  }
+
+  getMockUserRequests(): UserAccessRequest[] {
+    return mockData;
+  }
+
+  // getUserRequests() {
+  //   return this.httpClient.get<UserAccessRequest[]>(`${this.resourceEndpoint}`);
+  // }
+
+  // getUserRequestById(id: number) {
+  //   return this.httpClient.get<UserAccessRequest>(
+  //     `${this.resourceEndpoint}/${id}`
+  //   );
+  // }
+
+  // processUserReuqests(ids: string[], approval: boolean = true) {
+  //   return this.httpClient.post<UserAccessRequest[]>(
+  //     `${this.resourceEndpoint}`,
+  //     ids
+  //   );
+  // }
+}
+
+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/user-request-form/use-request-form.component.ts

@@ -0,0 +1,66 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { CardData } from 'verben-ng-ui';
+
+interface UserFormData {
+  MailAddress: string;
+  Name: string;
+  PhoneNumber: string;
+}
+
+@Component({
+  selector: 'lib-user-request-form',
+  templateUrl: './user-request-form.component.html',
+  styleUrl: './user-request-form.component.css',
+})
+export class UserRequestFormComponent {
+  @Input() set currentData(value: CardData | null) {
+    if (value?.data) {
+      this.form.patchValue({
+        MailAddress: value.data.MailAddress || '',
+        FirstName: value.data.FirstName || '',
+        LastName: value.data.LastName || '',
+        OtherName: value.data.OtherName || '',
+        PhoneNumber: value.data.PhoneNumber || '',
+      });
+    } else {
+      this.form.reset();
+    }
+  }
+
+  @Output() switchView = new EventEmitter<undefined>();
+  @Output() onApproval = new EventEmitter<string>();
+
+  form: FormGroup;
+
+  roles: { id: string; name: string }[] = [
+    { id: 'admin', name: 'Admin' },
+    { id: 'manager', name: 'Manager' },
+    { id: 'staff', name: 'Staff' },
+  ];
+
+  constructor(private fb: FormBuilder) {
+    this.form = this.fb.group({
+      MailAddress: ['', { readonly: true }],
+      FirstName: ['', { readonly: true }],
+      LastName: ['', { readonly: true }],
+      OtherName: ['', { readonly: true }],
+      PhoneNumber: ['', { readonly: true }],
+      RoleId: [''],
+    });
+  }
+
+  ngOnInit(): void {}
+
+  onSave(): void {
+    if (this.form.valid) {
+      // Emit save event with form value
+      console.log('Form saved:', this.form.value);
+    }
+  }
+
+  onDelete(): void {
+    // Emit delete event
+    console.log('Delete requested');
+  }
+}

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

@@ -0,0 +1,97 @@
+<form
+  [formGroup]="form"
+  class="flex flex-col px-3 pb-3 rounded-xl h-full w-full relative space-y-4"
+>
+  <verbena-input
+    name="MailAddress"
+    label="Mail Address:"
+    formControlName="MailAddress"
+  />
+  <verbena-input
+    label="First Name:"
+    name="FirstName"
+    type="text"
+    formControlName="FirstName"
+  />
+  <verbena-input
+    label="Last Name:"
+    name="LastName"
+    type="text"
+    formControlName="LastName"
+  />
+  <verbena-input
+    label="OtherName:"
+    name="OtherName"
+    type="text"
+    formControlName="OtherName"
+  />
+  <verbena-input
+    label="Phone Number:"
+    name="PhoneNumber"
+    type="tel"
+    formControlName="PhoneNumber"
+  />
+
+  <div class="space-y-1">
+    <label for="role">Role</label>
+
+    <verben-drop-down
+      label="Role"
+      styleClass="w-full"
+      width="100%"
+      [multiselect]="false"
+      [filter]="true"
+      [showClear]="true"
+      placeholder=""
+      [(options)]="roles"
+      id="role"
+      optionLabel="name"
+      optionValue="id"
+      formControlName="RoleId"
+      class="form-control"
+    >
+    </verben-drop-down>
+  </div>
+
+  <!-- buttons -->
+  <div class="flex justify-between bottom-8 left-0 right-0 px-3 pb-2">
+    <!-- <verbena-button
+      text="Delete"
+      class="bg-secondary-200 text-[black]"
+      (click)="onDelete()"
+    />
+    <verbena-button
+      text="Save"
+      class="bg-primary text-[black]"
+      (click)="onSave()"
+    />
+
+    <verbena-button
+      text="Secondary Button"
+      styleType="secondary"
+    ></verbena-button> -->
+    <verbena-button
+      width="114px"
+      height="39px"
+      text="Reject"
+      styleType="danger"
+      borderRadius="10px"
+    ></verbena-button>
+    <verbena-button
+      (click)="switchView.emit()"
+      text="Switch To Table"
+      styleType="ylw-outline"
+    ></verbena-button>
+    <verbena-button
+      (click)="onApproval.emit(form.get('MailAddress')?.value)"
+      text="Approve"
+      bgColor="#28a745"
+      textColor="white"
+      border="1px solid #28a745"
+      borderRadius="10px"
+      pd="10px 20px"
+      width="114px"
+      height="39px"
+    ></verbena-button>
+  </div>
+</form>

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

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

package/src/lib/models/ErrorResponse.ts

@@ -0,0 +1,7 @@
+export class ErrorResponse {
+  constructor(
+    public ErrorMsg: string,
+    public StatusCode?: number,
+    public FullLog?: any
+  ) {}
+}

package/src/lib/models/PasswordRequestParam.ts

@@ -0,0 +1,5 @@
+export interface PasswordRequestParam {
+  OldPassword?: string;
+  NewPassword: string;
+  Token?: string;
+}

package/src/lib/models/ResponseKeyValue.ts

@@ -0,0 +1,5 @@
+export interface ResponseKeyValue {
+  Key: string;
+  Value: string;
+  OtherInfo?: string;
+}

package/src/lib/models/UserRequest.ts

@@ -0,0 +1,28 @@
+import { ObjectState } from "./object-state";
+import { RequestStatus } from "./request-status";
+import { Status } from "./status";
+
+
+  
+  export interface UserRequestPayload  {
+    Code:string;
+      FirstName:string;
+      LastName:string;
+      MailAddress:string;
+      Password:string;
+      PhoneNumber:string;
+      OtherName:string;
+      Role: string[];
+      Tags: [];
+      Status: Status;
+      UpdatedAt: Date;
+      CreatedAt: Date;
+      Id:string;
+      DataState: ObjectState;
+      TenantId: string;
+      ServiceName:string;
+      ActionBy:string;
+      RequestStatus:RequestStatus
+      Comment:string;
+  }
+  

package/src/lib/models/auth-mechanism.ts

@@ -0,0 +1,14 @@
+export enum MechanismType {
+  InApp = 'InApp',
+  Google = 'Google',
+  Apple = 'Apple',
+  MicrosoftAD = 'MicrosoftAD',
+}
+
+export interface AuthMechanism {
+  AuthMechanism: string;
+  ClientId: string;
+  ClientSecret: string;
+  RedirectUri: string;
+  Scope: string;
+}

package/src/lib/models/base.ts

@@ -0,0 +1,11 @@
+import { ObjectState } from './object-state';
+
+export interface BaseModel {
+  id: string | number;
+  Id: string;
+  CreatedAt: Date;
+  UpdatedAt: Date;
+  DataState: ObjectState;
+  Tenant: string;
+  readonly Error?: string;
+}