vc-create-dashboard 3.0.83 → 3.0.84

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

@@ -0,0 +1,25 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'filter'
+})
+export class FilterPipe implements PipeTransform {
+
+  transform(items: any[], searchText: string): any[] {
+    if (!items) {
+      return [];
+    }
+    if (!searchText) {
+      return items;
+    }
+    searchText = searchText.toLowerCase();
+    if(items?.length){
+    return items.filter((it: any) => {
+      return JSON.stringify(it).toLowerCase().includes(searchText);
+    });
+  }else{
+     return [];
+  }
+  }
+
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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