verben-authentication-ui 1.0.12 → 1.0.13

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

@@ -1,626 +0,0 @@
-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,
-  FormGroupConfig,
-} 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';
-import { FormBuilder } from '@angular/forms';
-import { Status } from '../../models/status';
-
-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 = '';
-
-  allColumns: ColumnDefinition<User>[] = columns;
-  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;
-  formGroupConfig: WritableSignal<FormGroupConfig<any>>;
-  statuses = Object.values(Status);
-
-  constructor(
-    private route: ActivatedRoute,
-    private userManagementService: UserManagementService,
-    private userRole: UserAccessRequestService,
-    private server: HttpWebRequestService,
-    private utilService: UtilService,
-    private envSvc: EnvironmentService,
-    private fb: FormBuilder
-  ) {
-    this.formGroupConfig = signal({
-      controls: {
-        MailAddress: this.fb.control(''),
-        FirstName: this.fb.control(''),
-        PhoneNumber: this.fb.control(''),
-        Address: this.fb.control(''),
-        RoleID: this.fb.control(''),
-        Tags: this.fb.control([]),
-        Status: this.fb.control(''),
-      },
-      // validatorOrOpts: null,
-      // asyncValidator: null,
-    });
-  }
-
-  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');
-    }
-  }
-
-  async onDataSave(event: {
-    index: number;
-    key: number | string;
-    data: Partial<User>;
-}) {
-    const payload = {
-      ...this.users[event.index],
-      ...event.data,
-      DataState:
-              this.users[event.index]?.DataState === ObjectState.Unchanged
-                ? ObjectState.Changed : ObjectState.New
-    } as User;
-
-      this.utilService.sendBI(true);
-      this.userManagementService
-        .saveUsers([
-          payload
-        ])
-        .then(
-          (result) => {
-            if (result instanceof ErrorResponse) {
-            } else {
-              if (result[0]) {
-                this.users = this.users.map((user, index) => {
-                  if (index === event.index) return result[0] as User;
-                  return user;
-                });
-              }
-              this.utilService.showSuccess('User saved successfully');
-            }
-          },
-          (error) => {
-            console.error('Unexpected error saving user:', error);
-          }
-        )
-        .finally(() => {
-          this.utilService.sendBI(false);
-        });
-  }
-
-  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

@@ -1,60 +0,0 @@
-
-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,
-  DataXportModule,
-  VerbenaSwitchModule
-} 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,
-    DataXportModule,
-    FormsModule,
-    ReactiveFormsModule,
-    VerbenaInputModule,
-    VerbenaButtonModule,
-    VerbenaBadgeModule,
-    DropDownModule,
-    VerbenaSwitchModule,
-
-    LibUserRequestApprovalModule
-  ],
-  providers: [UserManagementService],
-  exports: [UserManagementComponent],
-})
-export class LibUserManagementModule {}

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

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