vc-create-dashboard 3.0.84 → 3.0.85

package/src/lib/create-dashboard-container/pipes/search-program.pipe.ts

@@ -1,31 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'searchProgram',
-})
-export class SearchProgramPipe implements PipeTransform {
-  transform(items: any[], ...args: any[]): any[] {
-    let searchText = args[0];
-    const searchKey = args[1];
-    if (!items) {
-      return [];
-    }
-    if (!searchText) {
-      return items;
-    }
-    searchText = searchText?.toLowerCase();
-    if (items?.length) {
-      return items.filter((it: any) => {
-        if (!searchKey) {
-          return JSON.stringify(it)?.toLowerCase()?.includes(searchText);
-        } else if (searchKey) {
-          return (
-            it[searchKey]?.toString()?.toLowerCase()?.indexOf(searchText) > -1
-          );
-        }
-      });
-    } else {
-      return [];
-    }
-  }
-}

package/src/lib/create-dashboard-container/pipes/search.pipe.ts

@@ -1,23 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'search'
-})
-export class SearchPipe implements PipeTransform {
-
-  transform(value: any, args?: any): any {
-    if (!value) {
-      return null;
-    }
-    if (!args) {
-      return value;
-    }
-
-    args = args.toLowerCase();
-
-    return value.filter((item: any) => {
-      return JSON.stringify(item).toLowerCase().includes(args);
-    });
-  }
-
-}

package/src/lib/create-dashboard-container/pipes/text-count.pipe.spec.ts

@@ -1,8 +0,0 @@
-import { TextCountPipe } from './text-count.pipe';
-
-describe('TextCountPipe', () => {
-  it('create an instance', () => {
-    const pipe = new TextCountPipe();
-    expect(pipe).toBeTruthy();
-  });
-});

package/src/lib/create-dashboard-container/pipes/text-count.pipe.ts

@@ -1,14 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'textCount'
-})
-export class TextCountPipe implements PipeTransform {
-
-  transform(value: any, ...args: any[]): any {
-    const span = document.createElement('span');
-    span.innerHTML = value;
-    return span.textContent?.length || span.innerText.length;
-  }
-
-}

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

@@ -1,36 +0,0 @@
-// constants.ts
-export const PROGRAM_TABLE_HEADERS = [
-    'Program Name',
-    'Program Categories'
-  ];
-  
-  export const PAGINATION_OPTIONS = {
-    PAGE_SIZE: 30,
-    DEFAULT_CURRENT_PAGE: 1
-  };
-
-  export const PROGRAM_TYPE_LIST = [
-    {name: 'Regulations', id: 'regulations'},
-    {name: 'Standards', id: 'standards'},
-    {name: 'Internal Controls', id: 'internal_controls'},
-    {name: 'Others', id: 'others'},
-  ];
-
-  export const PROGRAM_OBJECT = {
-    regulations: 1,
-    standards: 2,
-    internal_controls: 3,
-    others: 0,
-  };
-
-  export const PROGRAM_NO_DATA = {
-    programList: 'No data to display.',
-    categoryList: 'Select a Program to view </br> the associated sub-categories.',
-    search: 'No results matched your search criteria.',
-  }
-
-  export const PROGRAM_LIST_API = {
-    programList: 'sailsProgramList',
-    categoryList: 'sailsProgramCategories',
-  };
-  

package/src/lib/create-dashboard-container/program-list/information-block/information-block.component.html

@@ -1,9 +0,0 @@
-<div class="information-block vx-mb-3">
-  <div class="vx-d-flex">
-    <div class="vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-2">
-      This dashboard will display those items that have been assigned to both the selected Responsibility Center(s) and
-      the Program(s)
-    </div>
-
-  </div>
-</div>

package/src/lib/create-dashboard-container/program-list/information-block/information-block.component.less

@@ -1,63 +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/mixin/mixin.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/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/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 .information-block {
-  background: #f2f2f5;
-  margin: -9px -18px 0;
-  padding: 1.5rem 2.5rem 1.25rem;
-
-  &.warning {
-    background: #fcf2cf;
-  }
-
-  .info {
-    cursor: pointer;
-    height: 0.75rem;
-    margin: 0.125rem 0 0 1.5rem;
-  }
-
-  &-chip {
-    background: #fff;
-    border-radius: 0.125rem;
-    border: 1px solid #f4f8ff;
-    box-shadow: 0px 0px 2px #1e5dd326;
-    height: 1.5rem;
-
-    .value {
-      color: #000;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-    }
-
-    .preview-text {
-      color: #000;
-      position: relative;
-
-      &::before {
-        background: #000;
-        content: "";
-        position: absolute;
-        top: 3px;
-        left: 0;
-        width: 1px;
-        height: 10px;
-      }
-    }
-  }
-}

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

@@ -1,15 +0,0 @@
-import { Component } from '@angular/core';
-
-
-@Component({
-  selector: 'app-information-block',
-  templateUrl: './information-block.component.html',
-  styleUrls: ['./information-block.component.less'],
-})
-export class InformationBlockComponent {
-
-  constructor() {
-  }
-
-
-}

package/src/lib/create-dashboard-container/program-list/interfaces/data-source.interface.ts

@@ -1,6 +0,0 @@
-// data-source.interface.ts
-import { Observable } from 'rxjs';
-
-export interface DataSource<T> {
-  load(searchTerm?: string): Observable<T[]>;
-}

package/src/lib/create-dashboard-container/program-list/interfaces/list-item.interface.ts

@@ -1,8 +0,0 @@
-// list-item.interface.ts
-export interface ListItem {
-      id: string;
-      name: string;
-      type: "regulations" | "standards" | "internal_controls" | "others";
-      
-  }
-  

package/src/lib/create-dashboard-container/program-list/interfaces/selection-predicate.interface.ts

@@ -1,4 +0,0 @@
-// selection-predicate.interface.ts
-export interface SelectionPredicate<T> {
-    (item: T): boolean;
-  }

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

@@ -1,57 +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 .wfe-list-container {
-  position: fixed;
-  top: 0;
-  right: 500px;
-  bottom: 0;
-  left: 0;
-
-
-  &-heading {
-    background: #fbfbfb;
-    border-bottom: 1px solid #f1f1f1;
-    height: 2.75rem;
-
-    .arrow-back {
-      cursor: pointer;
-    }
-  }
-
-  &-body {
-    width: 100%;
-    padding: 2rem;
-    height: calc(100% - 2.75rem);
-    background: #fff;
-    border-right: 1px solid #f1f1f1;
-
-  }
-
-  &-footer {
-    background: #fff;
-    border-radius: 0.25rem;
-    box-shadow: 0 6px 12px #4681ef26;
-    border: 1px solid #f8f8f8;
-    padding: 0.5rem 0.75rem;
-    display: flex;
-    justify-content: space-between;
-    position: relative;
-    align-items: center;
-    height: 3rem;
-  }
-}

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

@@ -1,30 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-
-@Component({
-  selector: 'app-list-container',
-  template: `
-    <div class="wfe-list-container">
-      <div
-        class="wfe-list-container-heading vx-d-flex vx-align-center vx-pl-4 vx-pr-4"
-      >
-        <i class="icons arrow-back vx-mr-2" (click)="onClose()">&#xe91d;</i>
-        <div class="vx-fs-14 vx-fw-500 vx-gray-70">{{ heading }}</div>
-      </div>
-      <div class="wfe-list-container-body">
-        <ng-content select="[body]"></ng-content>
-        <div class="wfe-list-container-footer">
-          <ng-content select="[footer]"></ng-content>
-        </div>
-      </div>
-    </div>
-  `,
-  styleUrls: ['./list-container.component.less'],
-})
-export class ListContainerComponent {
-  @Input() heading: string = 'Select Programs & Program Categories';
-  @Output() close = new EventEmitter<void>();
-
-  onClose() {
-    this.close.emit();
-  }
-}

package/src/lib/create-dashboard-container/program-list/pipes/check-selected-items.pipes.ts

@@ -1,19 +0,0 @@
-import { Pipe, PipeTransform } from "@angular/core";
-
-@Pipe({
-    name: 'checkSelectedItems'
-})
-export class CheckSelectedItemsPipe implements PipeTransform {
-    transform(id: string, selectedItems: any) {
-        if(selectedItems) {
-            const selectedItem = selectedItems?.find(
-              (item: any) => String(item?.id) === String(id)
-            );
-            if(selectedItem) {
-                return true;
-            }
-            return false;
-        }
-        return false;
-    }
-}

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

@@ -1,158 +0,0 @@
-<div class="dynamic-list-container">
-  <div class="vx-d-flex">
-    <div class="search-block vx-w-100">
-      <i class="icons">&#xe90b;</i>
-      <input type="text" [(ngModel)]="searchTerm" placeholder="Search..." (keyup)="search()" />
-    </div>
-    <div class="dynamic-list-filter" appPopover (click)="programTypePopover.popover()" placement="right">
-      <div *ngIf="appliedProgramType.length === 0; else selectedTypeFilter" class="filter-text">
-        Select Program Type
-      </div>
-      <ng-template #selectedTypeFilter>
-        <div class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2" *ngIf="appliedProgramType.length">
-          <span class="chipName vx-fs-11 vx-label-txt" [appTooltip]="appliedProgramType[0]?.name"
-            placement="bottom-left" delay="0" type="black" [tooltipMandatory]="false">{{ appliedProgramType[0]?.name
-            }}</span>
-          <button class="countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4"
-            appPopover placement="right" *ngIf="appliedProgramType.length > 1">
-            +{{ appliedProgramType.length - 1 }}
-          </button>
-        </div>
-      </ng-template>
-      <i class="icons filter-icon"> &#xe9e8; </i>
-    </div>
-  </div>
-  <div class="dynamic-list-table" *ngIf="
-      paginatedItems?.length > 0 ||
-        loaderState.programList || loaderState.categoryList;
-      else defaultTemplate
-    ">
-    <div class="dynamic-list-header vx-d-flex">
-      <ng-container *ngFor="let header of tableHeaders">
-        <div class="vx-d-flex vx-w-50 vx-pl-1">
-          <div class="serialNo vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center vx-justify-center">
-            #
-          </div>
-          <div class="headerText vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center">
-            {{ header }}
-          </div>
-        </div>
-      </ng-container>
-    </div>
-    <div class="dynamic-list-body vx-d-flex">
-      <div class="left-column">
-        <ng-container *ngIf="!loaderState.programList; else programListLoader">
-          <div *ngFor="
-              let item of paginatedItems | searchProgram : searchTerm : 'name';
-              let i = index
-            " class="list-row" [class.selected]="activeProgram?.id === item.id" (click)="viewCategory(item)">
-            <div class="list-column serial">
-              <div class="srNo">{{ i + 1 }}</div>
-            </div>
-            <div class="list-column name" [class.with-count]="selectedItems[item.id]?.length > 0">
-              <div class="name-inner vx-fs-13 vx-pr-2">{{ item.name }}</div>
-            </div>
-            <div class="list-column count" *ngIf="selectedItems[item.id]?.length > 0">
-              <div class="count-box vx-fs-9 vx-fw-600 vx-lh-4 vx-d-flex vx-align-center vx-justify-center">
-                {{ selectedItems[item.id].length }}
-              </div>
-              <div class="count-text vx-fs-11 vx-fw-500 vx-tt-uppercase vx-lh-4 vx-ml-2">
-                {{
-                selectedItems[item.id].length > 1 ? "CATEGORIES" : "CATEGORY"
-                }}
-                SELECTED
-              </div>
-            </div>
-            <div class="list-column action">
-              <button class="arrow vx-fs-12 vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center">
-                <i class="icons"> &#xe970; </i>
-              </button>
-            </div>
-          </div>
-        </ng-container>
-        <ng-template #programListLoader>
-          <app-table-loader></app-table-loader>
-        </ng-template>
-      </div>
-      <div class="right-column">
-        <ng-container *ngIf="
-            !loaderState.categoryList && !loaderState.programList;
-            else categoryListLoader
-          ">
-          <ng-container *ngIf="
-              categoryList[activeProgram?.id]?.length > 0;
-              else defaultSubCategoryTemplate
-            ">
-            <div class="list-row vx-pl-2 vx-pr-2" *ngFor="
-                let item of categoryList[activeProgram?.id];
-                let i = index
-              ">
-              <app-cs-checkbox [value]="item?.id" [ngValue]="
-                  item.id
-                    | checkSelectedItems : selectedItems[activeProgram?.id]
-                " (ngValueChange)="selectItem($event, item)">
-                <span class="value-inner">
-                  <div class="item-name vx-fs-13">{{ item?.name }}</div>
-                  <div class="within-part vx-d-flex vx-align-center vx-pr-3">
-                    <div *ngIf="item?.parentTree?.length"
-                      class="within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3">
-                      Within
-                    </div>
-                    <div class="within-value vx-fs-11 vx-paragraph-txt" [appTooltip]="item?.parentTree?.join(' > ')"
-                      placement="bottom-left" delay="0" type="black" [tooltipMandatory]="true">
-                      {{ item?.parentTree?.join(" > ") }}
-                    </div>
-                  </div>
-                </span>
-              </app-cs-checkbox>
-            </div>
-          </ng-container>
-          <ng-template #defaultSubCategoryTemplate>
-            <div class="sub-no-data">
-              <app-no-data [noDataImage]="ASSETS.search_data" [noDataText]="PROGRAM_NO_DATA.categoryList"></app-no-data>
-            </div>
-          </ng-template>
-        </ng-container>
-        <ng-template #categoryListLoader>
-          <app-table-loader></app-table-loader>
-        </ng-template>
-      </div>
-    </div>
-  </div>
-  <ng-template #defaultTemplate>
-    <div class="list-no-data-container">
-      <app-no-data [noDataImage]="ASSETS.search_data" [noDataText]="
-          searchTerm ? PROGRAM_NO_DATA.search : PROGRAM_NO_DATA.programList
-        "></app-no-data>
-    </div>
-  </ng-template>
-</div>
-
-<app-popover #programTypePopover (closePopoverEvent)="closePopover($event)" dontCloseonClick="true">
-  <div class="new-action-list">
-    <div class="program-type-text vx-fs-11 vx-fw-500 vx-gray-60 vx-lh-16 vx-p-2 vx-tt-uppercase">
-      Program Type:
-    </div>
-    <ul class="action-item">
-      <li *ngFor="let item of programTypeList">
-        <div class="chip-item">
-          <app-cs-checkbox [value]="item.id" [ngValue]="selectedProgramType.includes(item.id)"
-            (ngValueChange)="selectFilter($event, item)">
-            {{ item?.name }}
-          </app-cs-checkbox>
-        </div>
-      </li>
-    </ul>
-    <div class="program-type-bottom vx-d-flex vx-align-center vx-justify-center vx-pt-3 vx-pb-3">
-      <button (click)="resetFilter(); programTypePopover.closePopover('top')"
-        class="reset-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-lh-6">
-        RESET
-      </button>
-      <button (click)="onFilterChange(); programTypePopover.closePopover('top')"
-        class="apply-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-lh-6"
-        [class.disabled]="selectedProgramType?.length === 0">
-        APPLY
-      </button>
-    </div>
-  </div>
-</app-popover>