verben-authentication-ui 1.0.2 → 1.0.3

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

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

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

@@ -0,0 +1,269 @@
+<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">
+                        <label for="phone" class="text-[10px] font-light"
+                          >Phone Number:</label
+                        >
+                        <span id="phone" class="text-sm truncate">{{
+                          item.data.PhoneNumber
+                        }}</span>
+                      </p>
+                    </div>
+
+                    <div class="grid gap-y-1">
+                      <p class="grid">
+                        <label
+                          for="role"
+                          class="text-[10px] font-light text-[#404040]"
+                          >Role</label
+                        >
+                        <span id="role" class="text-sm font-medium">{{
+                          item.data?.Role?.Name
+                        }}</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-export [data]="data()" (exportDataEvent)="handleExport($event)">
+      </lib-data-export>
+    </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

@@ -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();
+  });
+});

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

@@ -0,0 +1,326 @@
+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,
+      }) => ({
+        selected: false,
+        title: `${FirstName} ${LastName}`,
+        data: {
+          FirstName,
+          LastName,
+          MailAddress,
+          PhoneNumber,
+          RoleID,
+          RequestStatus,
+          Role,
+        } 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);
+  }
+}

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

@@ -0,0 +1,54 @@
+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';
+
+@NgModule({
+  declarations: [
+    UserRequestApprovalComponent,
+    UserRequestFormComponent,
+    UserAccessRequestStatusBadgeComponent,
+  ],
+  imports: [
+    CommonModule,
+
+    DataTableModule,
+    CardModule,
+    SvgModule,
+    DataViewModule,
+    CardDataViewModule,
+    SortTableModule,
+    VisibleColumnModule,
+    TableFilterModule,
+    DataExportModule,
+    FormsModule,
+    ReactiveFormsModule,
+    VerbenaInputModule,
+    VerbenaButtonModule,
+    VerbenaBadgeModule,
+    DropDownModule,
+  ],
+  providers: [],
+  exports: [
+    UserRequestApprovalComponent,
+    UserAccessRequestStatusBadgeComponent,
+  ],
+})
+export class LibUserRequestApprovalModule {}