vc-create-dashboard 3.0.84 → 3.0.86

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

@@ -1,342 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,22 +0,0 @@
-// 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

@@ -1,24 +0,0 @@
-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

@@ -1,70 +0,0 @@
-<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

@@ -1,181 +0,0 @@
-@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;
-        }
-    }
-}