verben-authentication-ui 1.0.12 → 1.0.13

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

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

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

@@ -1,6 +0,0 @@
-@import "../../../theme/tailwind.css";
-
-.view-links {
-  color: #3479e9;
-  cursor: pointer;
-}

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

@@ -1,273 +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)"
-    (onSearchChange)="handleSearch($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="status">
-          <ng-template #cell let-value>
-            <lib-user-access-request-status-badge
-              [status]="value"
-            ></lib-user-access-request-status-badge>
-          </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-1 flex items-end gap-y-2 gap-x-4 p-4">
-                    <div class="flex-1 space-y-2">
-                      <span
-                        class="font-semibold text-[#404040] flex-1 truncate"
-                        >{{ item.title }}</span
-                      >
-
-                      <p class="flex items-center my-1 gap-1">
-                        <label for="phone" class="text-[10px] font-light"
-                          >Medium:</label
-                        >
-                        <span id="phone" class="text-sm truncate">{{
-                          item.data.SignupType
-                        }}</span>
-                      </p>
-                    </div>
-
-                    <div class="grid gap-y-1">
-                      <!-- <p class="grid">
-                        <label
-                          for="role"
-                          class="text-[10px] font-light text-[#404040]"
-                          >Medium:</label
-                        >
-                        <span id="role" class="text-sm font-medium">{{
-                          item.data?.SignupType
-                        }}</span>
-                      </p> -->
-
-                      <lib-user-access-request-status-badge
-                        [status]="item.data.RequestStatus"
-                      ></lib-user-access-request-status-badge>
-                    </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
-              [roles]="roles()"
-              [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="w-full">
-          <div
-            [ngClass]="{
-              'flex gap-2 items-center': true,
-              'justify-end': true,
-            }"
-          >
-            <!-- <verbena-button
-              *ngIf="!vdcv.hasCurrentItem()"
-              [fontWeight]="'bold'"
-              [bgColor]="'#8E8D87'"
-              [borderRadius]="'4px'"
-              [textColor]="'#fff'"
-              [pd]="'9.79px 37.28px'"
-              [text]="'Delete'"
-            >
-            </verbena-button> -->
-            <div
-              class="flex {{
-                vdcv.hasCurrentItem() ? 'flex-1' : ''
-              }} justify-end items-center gap-5"
-            >
-              <span class="paginator-text"
-                >{{ cardData().length }} records loaded</span
-              >
-              <button
-                (click)="loadMore()"
-                class="load-more view-links text-[#3479E9] underline"
-              >
-                Load more
-              </button>
-            </div>
-          </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
-        (filtersApplied)="onFilterSet($event)"
-        [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-xport
-        [columns]="visibleColumnDef"
-        [data]="data()"
-        (exportDataEvent)="handleExport($event)"
-      >
-      </lib-data-xport>
-    </div>
-  </verben-data-view>
-
-  <div *ngIf="vdv.isTableView" class="flex gap-2 justify-end">
-    <!-- <div class="message-log-button-container flex justify-between">
-      <verbena-button
-        [fontWeight]="'bold'"
-        [bgColor]="'#8E8D87'"
-        [borderRadius]="'4px'"
-        [textColor]="'#fff'"
-        [pd]="'9.79px 37.28px'"
-        [text]="'Delete'"
-      >
-      </verbena-button>
-    </div> -->
-    <div class="flex justify-end items-center gap-5">
-      <span class="paginator-text">{{ cardData().length }} records loaded</span>
-      <button
-        (click)="loadMore()"
-        class="load-more view-links text-[#3479E9] underline"
-      >
-        Load more
-      </button>
-    </div>
-  </div>
-</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,328 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  computed,
-  OnInit,
-  Signal,
-  signal,
-  ViewChild,
-  WritableSignal,
-} from '@angular/core';
-import { columns } from './access-request.columns';
-import { baseStyle } from './base-table-style';
-import { UserAccessRequest } from '../../models/user-access-request';
-import { Role } from '../../models/Role';
-import {
-  CardData,
-  CardDataViewComponent,
-  ColumnDefinition,
-  DataFilterType,
-  DataViewComponent,
-  IDataFilter,
-} from 'verben-ng-ui';
-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,
-        Role,
-        SignupType,
-      }) => ({
-        selected: false,
-        title: `${FirstName} ${LastName}`,
-        data: {
-          FirstName,
-          LastName,
-          MailAddress,
-          PhoneNumber,
-          RoleID,
-          RequestStatus,
-          Role,
-          SignupType,
-        } as Partial<UserAccessRequest>,
-        body: [{ title: 'Role', value: Role?.Name ?? '' }],
-        children: [],
-      })
-    )
-  );
-
-  roles: WritableSignal<Role[]> = signal([]);
-
-  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);
-    });
-
-    this.userAccessRequestFacade.getRoles$().subscribe((data) => {
-      this.roles.set(data);
-    });
-
-    try {
-      this.userAccessRequestFacade.loadRequests();
-      this.userAccessRequestFacade.loadRoles();
-    } catch (error) {
-      // Handle error
-    }
-  }
-
-  ngOnDestroy() {
-    this.userAccessRequestFacade.destroy();
-  }
-
-  handleSearch(event: { key: string; value: string }) {
-    this.userAccessRequestFacade.search(event.value);
-  }
-
-  async loadMore() {
-    try {
-      await this.userAccessRequestFacade.loadMore();
-    } catch (error) {
-      // Handle error
-    }
-  }
-
-  // To search with parameter:
-  async searchRequests(param: string) {
-    try {
-      await this.userAccessRequestFacade.loadRequestsWithParam(param);
-    } catch (error) {
-      // Handle error
-    }
-  }
-
-  async onApprove(approvalData: { email: string; role: string }) {
-    const data = this.data().find(
-      ({ MailAddress }) => MailAddress === approvalData.email
-    );
-
-    if (data) {
-      await this.userAccessRequestFacade.approveRequest({
-        ...data,
-        RoleID: approvalData.role,
-      });
-    }
-  }
-
-  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: true,
-    },
-  ];
-  clearData() {
-    this.currentData = {} as 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);
-  }
-
-  onFilterSet(event: IDataFilter[]): void {
-    console.log(event);
-    this.userAccessRequestFacade.filter(event);
-  }
-}