verben-authentication-ui 0.3.3 → 0.3.5

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

@@ -1,218 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-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();
-  });
-});

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

@@ -1,301 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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];
-}