vc-create-dashboard 3.0.83 → 3.0.84

package/src/lib/create-dashboard-container/program-list/program-list/program-list.component.ts

@@ -0,0 +1,342 @@
+import { Component, Input, Output, EventEmitter, TemplateRef, OnInit, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
+import { ListItem } from '../interfaces/list-item.interface';
+import { PROGRAM_TABLE_HEADERS, PAGINATION_OPTIONS, PROGRAM_TYPE_LIST, PROGRAM_NO_DATA } from '../constant';
+import { ListUtilsService } from '../services/list-utils.service';
+import { ProgramListApiService } from '../services/program-list-api.service';
+import { Subject } from 'rxjs';
+import { debounceTime, takeUntil } from 'rxjs/operators';
+import { ASSETS } from '../../constants/assets.constant';
+/**
+ * A reusable component for displaying and managing a list of programs with filtering, pagination, and category viewing capabilities.
+ * 
+ * Features:
+ * - Program listing with pagination
+ * - Search functionality with debounce
+ * - Program type filtering
+ * - Category viewing for selected programs
+ * - Multi-select capability
+ * 
+ * @template T Extends ListItem interface for type safety of list items
+ */
+
+interface Category {
+  id: string;
+  name: string;
+  parent?: string;
+  parentTree?: string[];
+  [key: string]: any;
+}
+@Component({
+  selector: 'app-program-list',
+  templateUrl: './program-list.component.html',
+  styleUrls: ['./program-list.component.less']
+})
+export class ProgramListComponent<T extends ListItem> implements OnInit, OnChanges, OnDestroy {
+  /** Array of items to be displayed in the list */
+  @Input() items: T[] = [];
+  
+  /** Object containing selected items, keyed by program ID */
+  @Input() selectedItems: any | null = {};
+  
+  /** URL configuration object for API endpoints */
+  @Input() url: any = {};
+
+  /** Event emitted when an item is selected */
+  @Output() itemSelected = new EventEmitter<T>();
+  
+  /** Event emitted when an item is deselected */
+  @Output() itemDeselected = new EventEmitter<T>();
+  
+  /** Event emitted when the selection changes */
+  @Output() itemsSelectedChange = new EventEmitter<T[]>();
+
+  tableHeaders = PROGRAM_TABLE_HEADERS;
+  currentPage = PAGINATION_OPTIONS.DEFAULT_CURRENT_PAGE;
+  pageSize = PAGINATION_OPTIONS.PAGE_SIZE;
+  totalPages = 0;
+  searchTerm = '';
+  paginatedItems: T[] = [];
+  activeProgram: any | null = null;
+  categoryList: any = {};
+  programTypeList: any[] = PROGRAM_TYPE_LIST;
+  selectedProgramType: any[] = [];
+  loaderState: any = {
+    programList: false,
+    categoryList: false,
+  };
+  appliedProgramType: any[] = [];
+  PROGRAM_NO_DATA: any = PROGRAM_NO_DATA;
+  ASSETS: any = ASSETS;
+  programCategoryList: any = {};
+
+
+  /** Subject for handling debounced search */
+  private searchSubject = new Subject<string>();
+  
+  /** Subject for cleanup subscriptions */
+  private destroy$ = new Subject<void>();
+
+  constructor(
+    private listUtils: ListUtilsService,
+    private programListApiService: ProgramListApiService
+  ) {
+    // Initialize debounced search
+    this.searchSubject.pipe(
+      debounceTime(300),
+      takeUntil(this.destroy$)
+    ).subscribe(() => {
+      this.performSearch();
+    });
+  }
+
+  /** Initialize component by fetching program list */
+  ngOnInit(): void {
+    this.getProgramList();
+  }
+
+  /** Handle changes to inputs */
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['items'] || changes['selectedItems']) {
+      this.paginateItems(this.items);
+      this.focusFirstProgramWithSelections();
+    }
+  }
+
+  private focusFirstProgramWithSelections(): void {
+    if (!this.items?.length || !this.selectedItems) {
+      return;
+    }
+    const programId = Object.keys(this.selectedItems).find(
+      (key) => (this.selectedItems[key] ?? []).length > 0
+    );
+    if (!programId) {
+      return;
+    }
+    const program = this.items.find(
+      (item: any) => String(item?.id) === String(programId)
+    );
+    if (program && String(this.activeProgram?.id) !== String(program?.id)) {
+      this.viewCategory(program);
+    }
+  }
+
+  /** Fetch program list from API */
+  getProgramList(): void {
+    this.loaderState.programList = true;
+    this.programListApiService.getProgramList(this.url.programList).subscribe((res: any) => {
+      this.items = Array.isArray(res?.data?.programs) ? res.data.programs : [];
+      this.loadData(this.items);
+      this.loaderState.programList = false;
+    });
+  }
+
+  /**
+   * Load data and initialize pagination
+   * @param data Array of items to load
+   */
+  loadData(data: any): void {
+    this.goToPage(1, data);
+  }
+
+  /**
+   * Handle item selection/deselection
+   * @param event Selection event
+   * @param item Item being selected/deselected
+   */
+  selectItem(event: any, item: any): void {
+    const selectedObject =  this.activeProgram.id.toString();
+    if (event) {
+      if(!this.selectedItems[selectedObject]) {
+        this.selectedItems[selectedObject] = [];
+      }
+      this.selectedItems[selectedObject].push(item);
+          } else {
+      this.selectedItems[selectedObject] = this.selectedItems[
+        this.activeProgram.id
+      ].filter(
+        (selected: any) => String(selected?.id) !== String(item?.id)
+      );
+    }
+    this.itemsSelectedChange.emit(this.selectedItems);
+  }
+
+  /**
+   * Deselect a specific item
+   * @param item Item to deselect
+   */
+  deselectItem(item: T): void {
+    this.itemsSelectedChange.emit(this.selectedItems);
+    this.itemDeselected.emit(item);
+  }
+
+  /**
+   * Check if an item is selected
+   * @param item Item to check
+   * @returns Boolean indicating if item is selected
+   */
+  isSelected(item: T): boolean {
+    return false;
+  }
+
+  /**
+   * Navigate to specific page
+   * @param page Page number to navigate to
+   * @param data Data to paginate
+   */
+  goToPage(page: number, data: any): void {
+    this.currentPage = page;
+    this.paginateItems(data);
+  }
+
+  /**
+   * Get array of page numbers for pagination
+   * @returns Array of page numbers
+   */
+  getPageNumbers(): number[] {
+    return this.listUtils.getPageNumbers(this.items?.length ?? 0, this.pageSize);
+  }
+
+  /**
+   * Paginate items and update view
+   * @param data Data to paginate
+   */
+  paginateItems(data: any): void {
+    const items = Array.isArray(data) ? data : [];
+    this.totalPages = Math.ceil(items.length / this.pageSize) || 0;
+    this.paginatedItems = items;
+  }
+
+  /**
+   * View categories for a selected program
+   * @param item Program to view categories for
+   */
+  viewCategory(item?: any): void {
+    this.activeProgram = item;
+    if(!item || this.categoryList[item.id]) return;
+    this.loaderState.categoryList = true;
+    this.checkProgramCategoryExists(item?.id);
+  }
+
+  checkProgramCategoryExists(id: string): void {
+    if(this.programCategoryList[id]) {
+      this.categoryList[id] = this.addParentTreeToCategories(this.programCategoryList[id]);
+      this.loaderState.categoryList = false;
+      return;
+    }
+    this.fetchProgramCategoryList(id);
+  }
+
+  fetchProgramCategoryList(id: string): void {
+    const URL = `${this.url.categoryList}&id=${id}`;
+    this.programListApiService.getProgramList(URL).subscribe((res: any) => {
+      this.programCategoryList[id] = res?.data?.categories ?? [];
+      this.categoryList[id] = this.addParentTreeToCategories(this.programCategoryList[id]);
+      this.loaderState.categoryList = false;
+    });
+  }
+
+
+  /**
+   * Add parent tree information to categories
+   * @param categories Array of categories
+   * @returns Categories with parent tree information
+   */
+  addParentTreeToCategories(categories: any[]): any[] {
+    if (!categories?.length) return [];
+
+    const categoryMap = new Map(categories.map(category => [category.id, category]));
+
+    const getParentTree = (category: Category): string[] => {
+      const parentTree: string[] = [];
+      let currentParent = category.parent;
+
+      while (currentParent) {
+        const parentCategory = categoryMap.get(currentParent);
+        if (!parentCategory) break;
+        
+        parentTree.push(parentCategory.name);
+        currentParent = parentCategory.parent;
+      }
+
+      return parentTree;
+    };
+
+    return categories.map(category => ({
+      ...category,
+      parentTree: getParentTree(category)
+    }));
+
+  }
+
+  /**
+   * Handle program type filter selection
+   * @param event Selection event
+   * @param item Program type being selected/deselected
+   */
+  selectFilter(event: any, item: any): void {
+    if(event) {
+      this.selectedProgramType.push(item.id);
+    } else {
+      this.selectedProgramType = this.selectedProgramType.filter((selected: any) => selected !== item.id);
+    }
+  }
+
+  /** Reset all applied filters */
+  resetFilter(): void {
+    this.selectedProgramType = [];
+    this.onFilterChange();
+  }
+
+  /** Apply selected filters to the program list */
+  onFilterChange(): void {
+    const items = Array.isArray(this.items) ? this.items : [];
+    if (this.selectedProgramType.length > 0) {
+      const filteredItems = items.filter((item: any) =>
+        this.selectedProgramType.includes(item.type)
+      );
+      this.paginateItems(filteredItems);
+    } else {
+      this.paginateItems(items);
+    }
+
+    this.appliedProgramType = this.programTypeList.filter((item: any) => this.selectedProgramType.includes(item.id));
+   this.checkCategoryAvailbility();
+    
+  }
+ 
+  checkCategoryAvailbility(): void {
+    const isSelectedProgramAvailable = this.paginatedItems.some((item: any) => item?.id === this.activeProgram?.id);
+    if(!isSelectedProgramAvailable) {
+      this.categoryList = [];
+      this.activeProgram = null;
+    }
+  }
+
+  /** Trigger debounced search */
+  search(): void {
+    this.searchSubject.next(this.searchTerm);
+  }
+
+  /** Perform search on items */
+  private performSearch(): void {
+    const items = Array.isArray(this.items) ? this.items : [];
+    const filteredItems = items.filter((item: any) =>
+      item?.name?.toLowerCase().includes(this.searchTerm?.toLowerCase())
+    );
+    this.currentPage = 1;
+    this.paginateItems(filteredItems);
+    this.checkCategoryAvailbility();
+  }
+
+  /** Cleanup subscriptions on component destruction */
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  closePopover(event: any): void {
+    if(event) {
+      this.selectedProgramType = this.appliedProgramType.map((item: any) => item?.id);
+    }
+  }
+}

package/src/lib/create-dashboard-container/program-list/program-list.module.ts

@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { ProgramListComponent } from './program-list/program-list.component';
+import { NoDataModule } from '../../ui-kit/no-data/no-data.module';
+import { PopoverModule } from '../../ui-kit/popover/popover.module';
+import { CheckSelectedItemsPipe } from './pipes/check-selected-items.pipes';
+import { FormgroupModule } from '../../ui-kit/formgroup/formgroup.module';
+import { LoadersModule } from '../../ui-kit/loaders/loaders.module';
+import { ListContainerComponent } from './list-container/list-container.component';
+import { SearchProgramPipe } from '../pipes/search-program.pipe';
+import { InformationBlockComponent } from './information-block/information-block.component';
+@NgModule({
+  declarations: [
+    ProgramListComponent,
+    CheckSelectedItemsPipe,
+    ListContainerComponent,
+    SearchProgramPipe,
+    InformationBlockComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    FormgroupModule,
+    NoDataModule,
+    PopoverModule,
+    LoadersModule,
+  ],
+  exports: [
+    ProgramListComponent,
+    ListContainerComponent,
+    InformationBlockComponent
+  ]
+})
+export class ProgramListModule { }

package/src/lib/create-dashboard-container/program-list/services/list-utils.service.ts

@@ -0,0 +1,22 @@
+// list-utils.service.ts
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ListUtilsService {
+  paginate<T>(items: T[], currentPage: number, pageSize: number): T[] {
+    const startIndex = (currentPage - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    return items.slice(startIndex, endIndex);
+  }
+
+  getPageNumbers(totalItems: number, pageSize: number): number[] {
+    const totalPages = Math.ceil(totalItems / pageSize);
+    const pages = [];
+    for (let i = 1; i <= totalPages; i++) {
+      pages.push(i);
+    }
+    return pages;
+  }
+}

package/src/lib/create-dashboard-container/program-list/services/program-list-api.service.ts

@@ -0,0 +1,24 @@
+import { Injectable, Optional } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Configurations } from '../../../configurations';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ProgramListApiService {
+  env!: any;
+
+  constructor(
+    private http: HttpClient,
+    @Optional() config?: Configurations
+  ) {
+    if (config) {
+      this.env = config.envConfig;
+    }
+  }
+
+  getProgramList(apiUrl: string): Observable<any> {
+    return this.http.get<any>(`${this.env.complianceGet}${apiUrl}`);
+  }
+}

package/src/lib/create-dashboard-container/responsibility-center/responsibility-center.component.html

@@ -0,0 +1,70 @@
+<div class="responsibility-center" [class.animate-slideInRight]="animation">
+  <div
+    class="responsibility-center-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4"
+  >
+    <div class="vx-fs-14 vx-fw-500 vx-label-txt">
+      Select Responsibility Center(s)
+    </div>
+  </div>
+  <div class="responsibility-center-body">
+    <div class="responsibility-center-search vx-mb-2">
+      <i class="icons">&#xe90b;</i>
+      <input
+        type="text"
+        [(ngModel)]="search"
+        placeholder="Search Responsibility Center"
+      />
+    </div>
+
+    <ng-container
+      *ngIf="responsibilityCentersList | filter : search as searchList"
+    >
+      <div class="select-all" *ngIf="searchList.length > 1">
+        <app-cs-checkbox
+          [ngValue]="checkSelectAll()"
+          (ngValueChange)="selectAll($event)"
+        >
+          <strong>{{
+            checkSelectAll() ? "Deselect All" : "Select All"
+          }}</strong>
+        </app-cs-checkbox>
+      </div>
+      <ul class="responsibility-center-list" *ngIf="searchList.length > 0">
+        <li *ngFor="let rc of searchList; let i = index">
+          <app-cs-checkbox
+            [ngValue]="selectedIds.includes(rc.item_id)"
+            (ngValueChange)="selectRc(rc.item_id, $event)"
+          >
+            <ul class="responsibility-center-list-name">
+              <li
+                *ngFor="let entity of rc.rc_name; let j = index"
+                [arTooltip]="entity"
+                placement="bottom-left"
+                delay="0"
+              >
+                <i class="icons" *ngIf="j !== 0">&#xe910;</i>
+                {{ entity }}
+                <!-- <span class="name">{{entity}}</span> -->
+              </li>
+            </ul>
+          </app-cs-checkbox>
+        </li>
+      </ul>
+      <app-no-data
+        *ngIf="searchList.length == 0"
+        [noDataImage]="ASSETS.search_data"
+        [noDataText]="'No data to display'"
+      >
+      </app-no-data>
+    </ng-container>
+
+    <div class="responsibility-center-footer">
+      <app-dashboard-footer
+        [footerDetails]="footerDetails"
+        (cancelEvent)="closeRcList.emit()"
+        (deleteEvent)="selectRc($event.item_id, false)"
+        (submitEvent)="save()"
+      ></app-dashboard-footer>
+    </div>
+  </div>
+</div>

package/src/lib/create-dashboard-container/responsibility-center/responsibility-center.component.less

@@ -0,0 +1,181 @@
+@import url("https://cdn.v-comply.com/design-system/css/icons/icons.css");
+@import url("https://cdn.v-comply.com/design-system/css/display/display.css");
+@import url("https://cdn.v-comply.com/design-system/css/alignment/alignment.css");
+@import url("https://cdn.v-comply.com/design-system/css/text/text.css");
+@import url("https://cdn.v-comply.com/design-system/css/color/color.css");
+@import url("https://cdn.v-comply.com/design-system/css/width/width.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin-top.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin-left.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin-right.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-top.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-left.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-right.css");
+
+::ng-deep .responsibility-center {
+    background: #FFFFFF;
+    border-right: 1px solid #F1F1F1;
+    position: fixed;
+    top: 0;
+    right: 500px;
+    bottom: 0;
+    left: 0;
+
+    &-head {
+      background: #fbfbfb;
+      height: 2.75rem;
+      border-bottom: 1px solid #f1f1f1;
+    }
+
+    &-body {
+        height: calc(100vh - 2.75rem);
+        padding: 2rem;
+        position: relative;
+
+        .select-all {
+            display       : flex;
+            padding-bottom: 1rem;
+
+            app-cs-checkbox {
+                display: flex;
+
+                label {
+                    span.value {
+                        font-weight: 600 !important;
+                        max-width: unset !important;
+                        font-size: 12px !important;
+
+                        strong {
+                            color: #161b2f !important;
+                            font-weight: 600 !important;
+                        }
+                    }
+                }
+            }
+        }
+
+        ul {
+            padding: 0;
+            margin : 0;
+
+            &.responsibility-center-list {
+                display    : block;
+                height: calc(100vh - 256px);
+                margin-bottom: 16px;
+                overflow: hidden;
+                overflow-y: auto;
+
+                &::-webkit-scrollbar-track {
+                    background: transparent;
+                }
+
+                li {
+                    width     : 100%;
+                    padding   : 0 0 1rem;
+                    list-style: none;
+
+                    app-cs-checkbox,
+                    app-cs-radio {
+                        display: flex;
+
+                        label {
+                            width: 100%;
+
+                            span.value {
+                                width          : auto;
+                                justify-content: flex-start;
+                                line-height    : 18px !important;
+                            }
+                        }
+
+                        ul {
+                            &.responsibility-center-list-name {
+                                display        : flex;
+                                justify-content: flex-start;
+                                width          : auto;
+                                max-width      : 100%;
+
+                                li {
+                                    list-style : none;
+                                    color      : #747576;
+                                    font-size  : 12px;
+                                    font-weight: 400;
+                                    width      : auto;
+                                    padding    : 0 8px 0 0;
+                                    max-width  : 100%;
+                                    display: block;
+                                    text-overflow: ellipsis;
+                                    white-space: nowrap;
+                                    overflow: hidden;
+                                    // display    : flex;
+
+                                    i {
+                                        font-size    : 8px;
+                                        padding-right: 4px;
+                                        color        : #747576;
+                                        position: relative;
+                                    }
+
+                                    span.name {
+                                        list-style        : none;
+                                        color             : #747576;
+                                        font-size         : 12px;
+                                        font-weight       : 400;
+                                        display           : -webkit-box;
+                                        -webkit-line-clamp: 1;
+                                        -webkit-box-orient: vertical;
+                                        overflow          : hidden;
+                                        width             : auto;
+                                        min-width         : calc(100% - 20px);
+                                        padding           : 0;
+                                    }
+
+                                    &:first-child {
+                                        color: #1E5DD3;
+                                        max-width: 100%;
+                                    }
+
+                                    &:last-of-type {
+                                        color: #34AA44;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &-search {
+        position: relative;
+  
+        input {
+          height       : 2.75rem;
+          line-height  : 1.5rem;
+          padding      : .5rem 1rem .5rem 2.5rem;
+          outline      : none;
+          border       : 1px solid #7475763f;
+          border-radius: .25rem;
+          width        : 100%;
+          font-size    : 14px;
+          color        : #747576;
+  
+          &:focus {
+            border-color: #1e5dd3;
+          }
+        }
+  
+        i {
+          position: absolute;
+          left: 1rem;
+          top: 1rem;
+          pointer-events: none;
+          color: #f1f1f1;
+          font-size: 12px;
+        }
+    }
+}