verben-authentication-ui 1.0.2 → 1.0.3

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

@@ -0,0 +1,604 @@
+import { Component, Input, signal, ViewChild, WritableSignal } from '@angular/core';
+import { columns } from './user-management.columns';
+
+import { SearchPropertySign } from '../../models/SearchPropertySign';
+import { UtilService } from '../../services/util.service';
+import { PagedResult } from '../../models/PagedResult';
+import { baseStyle } from './base-table-style';
+import { HttpWebRequestService } from '../../services/http-web-request.service';
+
+
+import {
+  CardData,
+  DataFilterType,
+  IDataFilter,
+  DropdownLoadEvent,
+  DropdownChangeEvent,
+  ColumnDefinition,
+  ConditionalOptions,
+  CardDataViewComponent,
+  DataViewComponent,
+} from 'verben-ng-ui';
+import { UserAccessRequestStatus } from '../../models/user-access-request-status';
+import { ObjectState } from '../../models/object-state';
+import { EnvironmentService } from '../../services/environment.service';
+import { UserManagementService } from './services/user-management.service';
+import { User } from '../../models/user';
+import { ErrorResponse } from '../../models/ErrorResponse';
+import { UserManagementFormComponent } from './user-management-form/use-management-form.component';
+import { Subject, debounceTime, BehaviorSubject } from 'rxjs';
+import { ConditionOptions } from '../../models/conditions';
+import { ActivatedRoute } from '@angular/router';
+import { UserAccessRequestService } from '../user-request-approval/services/user-access-request.service';
+import { Role } from '../../models/Role';
+import { Tag } from '../../models/Tag';
+
+
+enum DateFilterTypes {
+  Before = SearchPropertySign.LT,
+  On = SearchPropertySign.EQ,
+  After = SearchPropertySign.GT,
+}
+
+
+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;
+  @ViewChild(UserManagementFormComponent) childComponent!: UserManagementFormComponent;
+  private currentSearchTerm: string = '';
+
+
+  filteredColumns: ColumnDefinition<User>[] =columns
+  skip: number = 0;
+  users:User[]=[]
+  searchTerm$ = new Subject<string>();
+  @Input() searchDebounceTime: number = 500;
+  @Input() pageSize: number = 1;
+  pageState: PagedResult<User> | null = null;
+  errorMessage: string = '';
+  appliedFilters: boolean = false;
+  isLoading: boolean = false;
+  hasMore: boolean = true;
+  limit: number = 20;
+  sortParam: string = 'name';
+  sortOrder: string = 'asc';
+ Roles:Role[]=[]
+ Tags: WritableSignal<Tag[]> = signal([]);
+  dataFit: PagedResult<User> = {
+    PageSize: 1,
+    Skip: 0,
+    Total: 0,
+    Result: [],
+    LastItem: [''],
+    IsLoadingResults: false
+  };
+
+  
+
+  currentFilters: IDataFilter[] = [];
+  currentSorts: IDataFilter[] = [];
+
+
+
+  role: string = '';
+
+  cardContextHistory: CardData[] = [];
+  param: string | null | undefined;
+
+  constructor(
+    private route: ActivatedRoute,
+    private userManagementService: UserManagementService,
+    private userRole: UserAccessRequestService,
+    private server: HttpWebRequestService,
+    private utilService: UtilService,
+    private envSvc: EnvironmentService
+  ) {}
+
+  async ngOnInit(): Promise<void> {
+
+  this.getRoles()
+  this.getTags();
+    this.route.paramMap.subscribe(params => {
+      this.role = params.get('role') || '';  // Default to an empty string if no role
+      this.fetchUsers();
+    });
+    
+
+         
+  }
+
+  
+  cardData: CardData[] = [];
+
+  data: any[] = []; 
+
+  
+
+
+
+
+  async fetchUsers(sortValue: string = 'CreatedAt', order: string = 'asc') {
+    this.isLoading = true;
+    this.utilService.sendBI(true);
+
+    try {
+      const res = await this.userManagementService.getRealUsers(this.role, this.skip,this.limit, this.sortParam, this.sortOrder)
+      this.utilService.sendBI(false);
+
+      if (res instanceof ErrorResponse) {
+        // Handle error response
+        console.error('Error fetching logs:', res);
+      } else {
+        const response = res as PagedResult<User>;
+        this.dataFit = response;
+        this.users = [...this.users, ...response.Result];
+        this.cardData = this.formatCardData(this.users);
+        this.skip += this.pageSize;
+        this.hasMore = this.skip < response.Total;
+      }
+    } catch (error) {
+      console.error('Error:', error);
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+
+  async getRoles() {
+    this.utilService.sendBI(true);
+  
+    try {
+      const res = await this.userRole.getRoles();
+      this.utilService.sendBI(false);
+  
+      if (res instanceof ErrorResponse) {
+        console.error('Error fetching roles:', res);
+        return undefined;
+      } 
+  
+      const response = res as PagedResult<Role>;
+      this.Roles = response.Result;
+  
+    } catch (error) {
+      console.error('Error fetching roles:', error);
+      return undefined;
+    }
+  }
+
+  async getTags() {
+    this.utilService.sendBI(true);
+  
+    try {
+      const res = await this.userRole.getTags();
+      this.utilService.sendBI(false);
+  
+      if (res instanceof ErrorResponse) {
+        console.error('Error fetching roles:', res);
+        return undefined;
+      } 
+      const response = res as PagedResult<Tag>;
+      this.Tags.set(response.Result);
+    } catch (error) {
+      console.error('Error fetching roles:', error);
+      return undefined;
+    }
+  }
+  
+handleRoleId(value:string){
+  const matchedRole = this.Roles.filter((role) => role.Name === value);
+  return matchedRole[0]?.Code;
+}
+  /**
+   * Format users into CardData for the UI library
+   * @param users Array of users to format
+   * @returns Array of CardData
+   */
+  private formatCardData(users: User[]): CardData[] {
+    return users.map(user => ({
+      selected: false, // Default selection state
+      title: `${user.FirstName} ${user.LastName}`, // Display user's name as title
+      data: { ...user }, // Pass the entire user object
+      body: [
+        { title: 'Name', value: `${user.FirstName} ${user.LastName}` },
+        { title: 'E-Mail Address', value: user.MailAddress },
+        { title: 'Phone Number', value: user.PhoneNumber || 'N/A' },
+      ],
+      children: [], // Add child data if necessary
+    }));
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+  
+
+
+
+  columns = columns;
+  styles = baseStyle;
+
+  selectedParent?: string;
+  basicOption?: string;
+  selectedOption: string[] = [];
+  selectedOptionTwo: string[] = [];
+  selectedOptionThree?: string;
+  missingObject: any;
+
+
+
+  // clearLogs(sortValue: string = 'CreatedAt', order: string = 'asc') {
+  //   this.User = []; // Clear the logs array
+  //   this.skip = 0; // Reset the skip value
+  //   this.hasMore = true; // Reset the flag to allow fetching more logs
+  //   this.appliedFilters = false;
+  //   this.fetchUsers();
+  // }
+
+
+ 
+
+  // Grid view properties
+  isGridView: boolean = true;
+  currentData!: CardData;
+  selectedColumnCount: number = 0;
+  selectedFilterTableCount: number = 0;
+  isOPen: boolean = true;
+  selectedSortCount: number = 0;
+  showFilter: boolean = false;
+  searchTerm: string = '';
+  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: 'FirstName', type: DataFilterType.String, checked: false },
+    { name: 'LastName', type: DataFilterType.String, checked: false },
+    { name: 'MailAddress', type: DataFilterType.String, checked: false },
+    { name: 'Status', type: DataFilterType.String, checked: false },
+    { name: 'PhoneNumber', type: DataFilterType.String, checked: false },
+    { name: 'CreatedAt', type: DataFilterType.Date, checked: false },
+    { name: 'Role', type: DataFilterType.String, 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' },
+  ];
+
+  getParentLabel(context: any): string {
+    console.log({ MissingObj: this.missingObject });
+    return this.missingObject.Name;
+  }
+
+  onSave(): void {
+    if (this.childComponent.form.valid) {
+      // const userData: User = this.childComponent.form.value;
+      // console.log('Payload:', [userData]); // Log the payload to check its structure
+  
+      this.utilService.sendBI(true);
+      this.userManagementService.saveUsers([{
+        ...this.currentData?.data,
+        ...this.childComponent.form.value,
+        DataState: this.currentData?.data.DataState === ObjectState.Unchanged ? ObjectState.Changed : this.currentData?.data.DataState,
+      }]).then(
+        (result) => {
+          if (result instanceof ErrorResponse) {
+          } else {
+            this.utilService.showSuccess("User saved successfully");
+          }
+        },
+        (error) => {
+          console.error('Unexpected error saving user:', error);
+        }
+      ).finally(() => {
+        this.utilService.sendBI(false);
+      });
+      console.log(this.childComponent.form.value);
+      
+    } else {
+      console.error('Form is invalid');
+    }
+  }
+
+  onDelete(): void {
+    console.log('Child form delete triggered');
+    // Perform delete logic here
+  }
+  onDropdownChange(event: DropdownChangeEvent): void {
+    // console.log({
+    //   'Test Parent Value': this.selectedParent,
+    //   ...
+    // });
+  }
+
+  onSelectionChange(selectedRows: User[]) {
+    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);
+    }
+  }
+
+
+  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();
+    }
+  }
+
+
+
+
+  
+
+
+
+  reset() {
+    this.skip = 0;
+    this.pageSize = 20;
+  }
+
+
+  clearData() {
+    this.currentData = {} as CardData;
+  }
+
+  
+  loadMore() {
+    if (this.hasMore) {
+      this.fetchUsers();
+    }
+  }
+
+  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;
+
+    if (updatedColumns) {
+      // Filter columns to include only visible ones
+      this.filteredColumns = this.columns.filter((col) =>
+        this.visibleColumns.find(
+          (filter) => filter.name === col.header && filter.checked
+        )
+      );
+  
+      // Reorder columns based on the order in visibleColumns
+      const visibleColumnOrder = this.visibleColumns
+        .filter((filter) => filter.checked)
+        .map((filter) => filter.name);
+  
+      this.columns.sort((a, b) => {
+        const indexA = visibleColumnOrder.indexOf(a.header as string);
+        const indexB = visibleColumnOrder.indexOf(b.header as string);
+        return indexA - indexB;
+      });
+    }
+  }
+
+  async postSearch(payload: any) {
+    this.utilService.sendBI(true);
+    const res = await this.server.post(
+      `User/SearchUsers/0/10/CreatedAt/asc`,
+      payload
+    );
+
+    this.utilService.sendBI(false);
+    if (res instanceof ErrorResponse) {
+      this.appliedFilters = false;
+      return;
+    } else {
+      this.appliedFilters = true;
+      const response = res as PagedResult<User>;
+      this.dataFit = response;
+      this.users = response.Result;
+      this.cardData = this.formatCardData(this.users)      ;
+    }
+  }
+
+
+  
+  onFilterApplied(appliedFilter: IDataFilter[]) {
+    this.showFilter = false;
+    if (Array.isArray(appliedFilter)) {
+      this.selectedFilterTableCount = appliedFilter.length;
+      console.log(appliedFilter);
+
+      const queryParams = appliedFilter
+        .filter((filter) => filter.checked)
+        .map((filter) => ({
+          PropertyName: filter.name,
+          EntityValue: filter.name==='Role'?this.handleRoleId(filter.value):filter.value,
+          Type: filter.type,
+          Operator: 'And',
+          Sign: this.getCondition(filter.condition),
+        }));
+
+      this.postSearch(queryParams);
+    }
+  }
+
+  getCondition(value: any): ConditionOptions | undefined {
+    switch (value) {
+      case ConditionalOptions.On:
+        return ConditionOptions.On;
+      case ConditionalOptions.After:
+        return ConditionOptions.After;
+      case ConditionalOptions.Before:
+        return ConditionOptions.Before;
+      case ConditionalOptions.NotEqual:
+        return ConditionOptions.NotEqual;
+      default:
+        return undefined; // Explicitly return undefined for invalid cases
+    }
+  }
+  
+  onSortUpdated(updatedSorts: IDataFilter[]): void {
+    this.currentSorts = updatedSorts;
+    
+  }
+
+  async onSearch(event: { key: string; value: string }) {
+    this.searchTerm = event.value;
+    this.reset();
+    if (!this.searchTerm) {
+      this.clearLogs('CreatedAt', 'asc');
+      return;
+    }
+
+    this.isLoading = true;
+    this.utilService.sendBI(true);
+
+    try {
+      const res = await this.server.get(
+        `User/GetUserWithParam/${this.searchTerm}/${this.skip}/${this.pageSize}/CreatedAt/asc`
+      );
+
+      this.utilService.sendBI(false);
+
+      if (res instanceof ErrorResponse) {
+        console.error('Error during search:', res);
+        this.appliedFilters = false;
+      } else {
+        const response = res as PagedResult<User>;
+        this.dataFit = response;
+        this.users = response.Result;
+        this.cardData = this.formatCardData(this.users);
+
+      }
+    } catch (error) {
+      console.error('Search error:', error);
+      this.appliedFilters = false;
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  clearLogs(sortValue: string = 'CreatedAt', order: string = 'asc') {
+    this.users= []; // Clear the logs array
+    this.skip = 0; // Reset the skip value
+    this.hasMore = true; // Reset the flag to allow fetching more logs
+    this.appliedFilters = false;
+    this.fetchUsers(sortValue, order);
+  }
+
+
+    
+
+  onViewChange(isGridView: boolean): void {}
+
+  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');
+
+      
+
+      // 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();
+      // }
+    }
+  }
+}

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

@@ -0,0 +1,56 @@
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UserManagementComponent } from './user-management.component';
+import { HttpClientModule } from '@angular/common/http';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import {
+  CardDataViewModule,
+  CardModule,
+  DataExportModule,
+  DataTableModule,
+  DataViewModule,
+  SortTableModule,
+  SvgModule,
+  TableFilterModule,
+  VerbenaButtonModule,
+  VerbenaInputModule,
+  VisibleColumnModule,
+  DropDownModule,
+
+  VerbenaBadgeModule
+} from 'verben-ng-ui';
+import { UserManagementFormComponent } from './user-management-form/use-management-form.component';
+import { UserManagementService } from './services/user-management.service';
+import { LibUserRequestApprovalModule } from '../user-request-approval/user-request-approval.module';
+import { UserStatusBadgeComponent } from './user-status-badge/user-status-badge.component';
+
+@NgModule({
+  declarations: [UserManagementComponent, UserManagementFormComponent, UserStatusBadgeComponent],
+  imports: [
+    HttpClientModule,
+    CommonModule,
+
+    DataTableModule,
+    CardModule,
+    SvgModule,
+    DataViewModule,
+    CardDataViewModule,
+    SortTableModule,
+    VisibleColumnModule,
+    TableFilterModule,
+    DataExportModule,
+    FormsModule,
+    ReactiveFormsModule,
+    VerbenaInputModule,
+    VerbenaButtonModule,
+    VerbenaBadgeModule,
+    DropDownModule,
+
+    LibUserRequestApprovalModule
+  ],
+  providers: [UserManagementService],
+  exports: [UserManagementComponent],
+})
+export class LibUserManagementModule {}

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

@@ -0,0 +1,8 @@
+<verbena-badge
+  borderRadius="9px"
+  [bgColor]="badgeConfig().bgColor"
+  [textColor]="badgeConfig().textColor"
+  fontSize="12px"
+  [text]="badgeConfig().label"
+  [pd]="'2px 6px'"
+></verbena-badge>

package/src/lib/components/user-management/user-status-badge/user-status-badge.component.spec.ts

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