verben-authentication-ui 0.3.2 → 0.3.3

package/src/lib/components/user-management/user-management.component.html

@@ -0,0 +1,275 @@
+<div class="space-y-1 h-full">
+  <verben-data-view
+    #vdv
+    [viewState]="{
+      isSearch: true,
+      isColumn: true,
+      isFilter: true,
+      isSort: true,
+      isExport: true,
+      isSelect: true,
+      isCreate: true,
+      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]="columns"
+        [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>
+
+              <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>
+        <ng-container libColumn="status">
+          <ng-template
+          #cell
+          let-isEditing="isEditing"
+          let-toggleRowEdit="toggleRowEdit"
+          let-deleteRow="deleteRow"
+          let-value="value"
+          >
+            <verbena-badge
+           borderRadius="20px"
+           width="121px"
+            text="{{value}}"
+            bgColor="#D6F3E6"
+            textColor="#2DB76F"
+            pd="5px 15px"
+            fontSize="16px"
+          >
+
+
+        </verbena-badge>
+          </ng-template>
+        </ng-container>
+        <ng-container libColumn="role">
+          <ng-template
+          #cell
+          let-isEditing="isEditing"
+          let-toggleRowEdit="toggleRowEdit"
+          let-deleteRow="deleteRow"
+          let-value="value"
+          let-updateValue="updateValue"
+          >
+            <!-- <verben-drop-down [minChar]="3" [required]="true" placeholder="Select Parent"
+            [asyncLabel]="this.getParentLabel.bind(this)" invalidMessage="No value was provided"
+             width="120px"
+            (onChange)="onDropdownChange($event)" [(ngModel)]="selectedParent" optionLabel="Name" optionValue="Id"
+            [options]="testParents"></verben-drop-down> -->
+
+            <verben-drop-down
+            placeholder="Select Value"
+            width="120px"
+            (ngModelChange)="onDropdownChange($event)"
+            [options]="testParents"
+            optionLabel="Name"
+            optionValue="Name"
+            [ngModel]="value"
+          ></verben-drop-down>
+          </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="0px"
+        class="gap-1"
+      >
+        <verben-left-card-data-view class="m-0 gap-2" >
+          <verben-left-card-data
+            #vlcd
+            [parent]="vdcv"
+            dataId="MailAddress"
+            class="bg-secondary-100  rounded-xl scroll-no border-primary border-[1px] gap-1 h-full justify-pp m-0 overflow-y-auto overflow-hidden"
+            [cardDataList]="cardData"
+
+          >
+            <ng-template #card let-item>
+              <div (click)="currentData = vdcv.onItemClick(item)" class="flex">
+                <verben-svg
+                  [width]="15"
+                  [height]="15"
+                  (click)="vlcd.showChildren(item)"
+                  [ngClass]="vlcd.showToggle(item) ? 'visible' : 'invisible'"
+                  class="items-center flex  cursor-pointer"
+                  [icon]="item.isChildrenExpanded ? 'minus' : 'plus'"
+                />
+                <div
+                  (click)="currentData = vdcv.onItemClick(item)"
+                  class="flex cursor-pointer  bg-secondary rounded-xl overflow-hidden w-full"
+                >
+                  <div
+                    class="w-2 rounded-xl rounded-tr-none rounded-br-none overflow-hidden"
+                    [ngClass]="
+                      item.selected ? 'bg-primary' : 'bg-secondary-200'
+                    "
+                  ></div>
+                  <div class="flex flex-col py-[6px] pr-[3px] ">
+                    <div class="flex items-center gap-4">
+                      <div class="pl-[13px]">
+                        <span class="font-semibold text-[16px] 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-[13px] font-medium truncate text-wrap">{{
+                            item.data.PhoneNumber
+                          }}</span>
+                        </p>
+                      </div>
+
+                      <div class="  ">
+                        <p class="grid">
+                          <label for="phone" class="text-[10px] font-light"
+                            >Role</label
+                          >
+                          <span id="phone" class="text-sm font-medium"
+                            >Manager</span
+                          >
+                          <span class=" bg-[#CAE1CC] text-center text-[#4ABB54] text-[13px] mt-[8px] rounded-[9px]">
+                            {{item.data.Status}}
+                          </span>
+                        </p>
+                        <!-- <lib-user-access-request-status-badge
+                          [status]="item.data.Status"
+                        ></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()"
+            ></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"
+              >{{ cardData.length }} records loaded</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-management/user-management.component.spec.ts

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

package/src/lib/components/user-management/user-management.component.ts

@@ -0,0 +1,380 @@
+import { Component, ViewChild } from '@angular/core';
+import { columns } from './user-management.columns';
+import { mockData } from './helper';
+import { baseStyle } from './base-table-style';
+import { UserAccessRequest } from '../../models/user-access-request';
+import {
+  CardData,
+  DataFilterType,
+  IDataFilter,
+  DropdownLoadEvent,
+  DropdownChangeEvent,
+  CardDataViewComponent,
+  DataViewComponent,
+} from 'verben-ng-ui';
+import { UserAccessRequestStatus } from '../../models/user-access-request-status';
+import { ObjectState } from '../../models/object-state';
+
+interface TestParentObject {
+  Id: string;
+  Name: string;
+}
+
+@Component({
+  selector: 'lib-user-management',
+  templateUrl: './user-management.component.html',
+  styleUrl: './user-management.component.css',
+})
+export class UserManagementComponent {
+  @ViewChild('vdcv') cardDataView!: CardDataViewComponent;
+  @ViewChild('vdv') dataView!: DataViewComponent;
+
+  columns = columns;
+  data = mockData;
+  styles = baseStyle;
+
+  selectedParent?: string;
+  basicOption?: string;
+  selectedOption: string[] = [];
+  selectedOptionTwo: string[] = [];
+  selectedOptionThree?: string;
+  missingObject: any;
+
+  private generateNewUserAccessRequest(): UserAccessRequest {
+    const newId = this.data.length + 1; // Incremental ID based on current data length
+
+    return {
+      FirstName: `First ${newId}`,
+      LastName: `Last ${newId}`,
+      OtherName: `Other ${newId}`,
+      Id: `${newId}`,
+      id: newId,
+      MailAddress: ` `,
+      PhoneNumber: ``,
+      RequestStatus: UserAccessRequestStatus.Pending,
+      Address: ` `,
+      Password: ' ',
+      ExpireOn: new Date(),
+      IsSeeded: false,
+      OTPExpireOn: new Date(),
+      Tenants: [`Tenant${newId}`],
+      Role: ['User'],
+      CreatedAt: new Date(),
+      UpdatedAt: new Date(),
+      DataState: ObjectState.New,
+      Tenant: `Tenant${newId}`
+    };
+  }
+
+  // Function to add a new user to mockData
+  addNewUserToMockData(): UserAccessRequest {
+    const newUser = this.generateNewUserAccessRequest();
+    this.data.push(newUser); // Adds the new user to the data array
+
+    // Optionally, update cardData with the new user entry for card display
+
+    const fullName = `${newUser.FirstName} ${newUser.LastName}`;
+    const newCardData: CardData = {
+      selected: false,
+      title: fullName,
+      data: {
+        Name: fullName,
+        MailAddress: newUser.MailAddress,
+        PhoneNumber: newUser.PhoneNumber,
+        RoleID: newUser.Role,
+        Status: newUser.Status,
+      } as Partial<UserAccessRequest>,
+      body: [
+        { title: 'Name', value: fullName },
+        { title: 'E-Mail Address', value: newUser.MailAddress },
+        { title: 'Phone Number', value: newUser.PhoneNumber ?? '' },
+      ],
+      children: [],
+    };
+
+    this.cardData.push(newCardData); // Update cardData array with the new user
+    return newUser;
+  }
+
+  // Grid view properties
+  isGridView: boolean = true;
+  currentData!: CardData;
+  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: false,
+    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 },
+  ];
+
+  testParents: TestParentObject[] = [
+    { Id: '1', Name: 'Manager' },
+    { Id: '2', Name: 'Administrator' },
+    { Id: '3', Name: 'Jelom' },
+  ];
+
+  cardData: CardData[] = mockData.map(
+    ({ FirstName, LastName, MailAddress, PhoneNumber, RoleID, Status }) => ({
+      selected: false,
+      title: `${FirstName} ${LastName}`,
+      data: {
+        FirstName,
+        LastName,
+        MailAddress,
+        PhoneNumber,
+        RoleID,
+        Status,
+      } as Partial<UserAccessRequest>,
+      body: [
+        { title: 'Name', value: `${FirstName} ${LastName}` },
+        { title: 'E-Mail Address', value: MailAddress },
+        { title: 'Phone Number', value: PhoneNumber ?? '' },
+      ],
+      children: [],
+    })
+  );
+
+  ngOnInit(): void {
+    this.selectedParent = '1';
+    this.selectedOption = ['Opt 1'];
+    this.selectedOptionTwo = ['1'];
+    this.selectedOptionThree = '1';
+  }
+
+  getParentLabel(context: any): string {
+    console.log({ MissingObj: this.missingObject });
+    return this.missingObject.Name;
+  }
+
+  async loadMoreParents(event: DropdownLoadEvent): Promise<TestParentObject[]> {
+    console.log({ ParentLoadEvent: JSON.parse(JSON.stringify(event)) });
+    return await new Promise((resolve) =>
+      setTimeout(
+        () =>
+          resolve([
+            { Id: '1', Name: 'Jimly' },
+            { Id: '2', Name: 'Jecil' },
+            { Id: '3', Name: 'Jelom' },
+            { Id: '4', Name: 'Jemima' },
+            { Id: '5', Name: 'Akintunde' },
+          ]),
+        3000
+      )
+    );
+  }
+
+  onDropdownChange(event: DropdownChangeEvent): void {
+    // console.log({
+    //   'Test Parent Value': this.selectedParent,
+    //   ...
+    // });
+  }
+
+  onSelectionChange(selectedRows: UserAccessRequest[]) {
+    console.log('Selection changed:', selectedRows);
+    // Handle the selection change
+  }
+
+  handleExport(exportedData: Partial<any>[]) {
+    console.log('Exported data:', exportedData);
+    this.downloadCSV(exportedData);
+  }
+
+  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);
+    }
+  }
+
+  // applyFilters() {
+  //   this.filteredData = this.data.filter((item) => {
+  //     return this.filterArray.every((filter) => {
+  //       if (filter.checked) {
+  //         switch (filter.type) {
+  //           case DataFilterType.String:
+  //             return item[filter.name].toLowerCase().includes(filter.name.toLowerCase());
+  //           case DataFilterType.Date:
+  //             return new Date(item[filter.name]) >= new Date(filter.name);
+  //           default:
+  //             return true;
+  //         }
+  //       }
+  //       return true;
+  //     });
+  //   });
+  // }
+  getCardDataByMailAddress(mailAddress: string): CardData | undefined {
+    console.log('cardData array:', this.cardData);
+    console.log(mailAddress);
+
+    return this.cardData.find(({ data }) => data?.MailAddress === mailAddress);
+  }
+
+  openDetailView(mailAddress: string) {
+    const cardItem = this.getCardDataByMailAddress(mailAddress);
+    console.log(cardItem);
+
+    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();
+    }
+  }
+  newItem() {
+    const newData = this.addNewUserToMockData();
+    const newCardData: CardData = {
+      selected: true,
+      title: `${newData.FirstName} ${newData.LastName}`,
+      data: {
+        ...newData,
+      } as Partial<UserAccessRequest>,
+      body: [
+        { title: 'Name', value: `${newData.FirstName} ${newData.LastName}` },
+        { title: 'E-Mail Address', value: newData.MailAddress },
+        { title: 'Phone Number', value: newData.PhoneNumber ?? '' },
+      ],
+      children: [],
+    };
+
+    if (this.dataView.isTableView) {
+      this.dataView.toggleView();
+    }
+    // First reset all selections
+    this.cardData.forEach((item) => {
+      item.selected = false;
+      if (item.children) {
+        item.children.forEach((child) => (child.selected = false));
+      }
+    });
+    // this.cardData = [newCardData].concat(this.cardData);
+    // this.cardDataView.onItemClick(newCardData)
+
+    this.cardData = [newCardData, ...this.cardData];
+
+    this.currentData = this.cardDataView.onItemClick(newCardData);
+  }
+
+
+  // toggleChildView(action: string) {
+  //   if (action === 'create') {
+  //     const newCard: CardData = {
+  //       selected: false,
+  //       title: 'New Card', // Default title, change as needed
+  //       data: { Name: '', MailAddress: '', PhoneNumber: '' },
+  //       body: [
+  //         { title: 'Name', value: '' },
+  //         { title: 'E-Mail Address', value: '' },
+  //         { title: 'Phone Number', value: '' }
+  //       ],
+  //       children: []
+  //     };
+
+  //     this.cardData.push(newCard);
+  //   }
+  // }
+
+
+  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[]) {
+    this.onColumnChange(false);
+    this.selectedColumnCount = updatedColumns.length;
+  }
+
+  onSortUpdated(updatedSorts: IDataFilter[]) {
+    this.onSortChange(false);
+    this.selectedSortCount = updatedSorts.length;
+    console.log(updatedSorts);
+  }
+
+  onViewChange(isGridView: boolean): void {
+    console.log('View changed to:', isGridView ? 'Grid View' : 'List View');
+  }
+
+  onStateChange(event: { key: string; value: boolean }): void {
+    console.log(`State changed for ${event.key}:`, event.value);
+    if (event.key === 'create') {
+      console.log('peace is a boy');
+
+      this.newItem();
+
+      // const newUser = this.newItem()
+
+      // if ( newUser && 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));
+      //     }
+      //   });
+
+      //   this.currentData = this.cardDataView.onItemClick(newUser);
+
+      //   // Force change detection if needed
+      //   // this.changeDetectorRef.detectChanges();
+      // }
+    }
+  }
+}