vc-create-dashboard 3.0.6 → 3.0.61

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.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,15 @@
+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;
+    console.log('span.innerHTML ==>',span.innerHTML,span.innerText.length)
+    return span.textContent?.length || span.innerText.length;
+  }
+
+}

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;
+        }
+    }
+}

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

@@ -0,0 +1,41 @@
+import { CommonModule } from '@angular/common';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { CreateDashboardModule } from 'projects/create-dashboard/src/public-api';
+import { DashboardFooterModule } from '../../ui-kit/dashboard-footer/dashboard-footer.module';
+import { PopoverModule } from '../../ui-kit/popover/popover.module';
+import { SelectModule } from '../../ui-kit/select/select.module';
+import { TooltipModule } from '../../ui-kit/tooltip/tooltip.module';
+import { FilterPipe } from '../pipes/filter.pipe';
+
+import { ResponsibilityCenterComponent } from './responsibility-center.component';
+
+describe('ResponsibilityCenterComponent', () => {
+  let component: ResponsibilityCenterComponent;
+  let fixture: ComponentFixture<ResponsibilityCenterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ResponsibilityCenterComponent,FilterPipe],
+      providers:[
+        CommonModule,
+    FormsModule,
+    TooltipModule,
+    SelectModule,
+    DashboardFooterModule,
+    PopoverModule
+      ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ResponsibilityCenterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,154 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { DashboardFooterConfig } from '../../ui-kit/dashboard-footer/dashboard-footer-config';
+import { ASSETS } from '../constants/assets.constant';
+
+@Component({
+  selector: 'app-responsibility-center',
+  templateUrl: './responsibility-center.component.html',
+  styleUrls: ['./responsibility-center.component.less'],
+})
+export class ResponsibilityCenterComponent implements OnInit, OnChanges {
+  @Output() saveSelectedList = new EventEmitter();
+  @Output() closeRcList = new EventEmitter();
+  @Input() responsibilityCentersList = [];
+  @Input() selectedResponsibilityCenters = [];
+  @Input() rcIdKey = '';
+  @Input() radioSelection = false;
+  ASSETS = ASSETS;
+
+  selectedIds: any[] = [];
+  animation = false;
+  search = '';
+  footerDetails: DashboardFooterConfig = {
+    selectedData: [],
+    nonRemovableList: [],
+    displayElementKey: 'item_name',
+    elementId: 'item_id',
+    singularText: 'Responsibility Center selected',
+    pluralText: 'Responsibility Centers selected',
+    showFrequency: false,
+    frequencyText: '',
+    isDisabled: false,
+  };
+  constructor() {}
+
+  ngOnChanges(): void {
+    this.footerDetails.selectedData = this.selectedResponsibilityCenters;
+    this.selectedIds = this.selectedResponsibilityCenters.map((ele: any) => {
+      if (ele[this.rcIdKey]) {
+        return ele[this.rcIdKey];
+      }
+    });
+  }
+
+  ngOnInit(): void {
+    this.animation = true;
+    setTimeout(() => {
+      this.animation = false;
+    }, 300);
+  }
+
+  selectRc(rc: any, mode: any) {
+    if (this.radioSelection) {
+      if (mode) {
+        this.selectedIds = [];
+        this.selectedIds.push(rc);
+      }
+      this.setList();
+    } else {
+      if (mode) {
+        this.selectedIds.push(rc);
+        const rcElement = this.responsibilityCentersList.findIndex(
+          (ele: any) => ele.item_id == rc
+        );
+        if (rcElement !== -1) {
+          const parentRc: any = this.responsibilityCentersList[rcElement];
+          if (parentRc?.item_child_ids?.length > 0) {
+            parentRc.item_child_ids.forEach((childElement: any) => {
+              if (!this.selectedIds.includes(childElement)) {
+                this.selectedIds.push(childElement);
+              }
+            });
+          }
+        }
+      } else {
+        const index = this.selectedIds.findIndex(
+          (element: any) => element == rc
+        );
+        this.selectedIds.splice(index, 1);
+        const rcElement = this.responsibilityCentersList.findIndex(
+          (ele: any) => ele.item_id == rc
+        );
+        if (rcElement !== -1) {
+          const parentRc: any = this.responsibilityCentersList[rcElement];
+          if (parentRc?.item_child_ids?.length > 0) {
+            parentRc.item_child_ids.forEach((childElement: any) => {
+              const removeIndex = this.selectedIds.findIndex(
+                (removeElement: any) => removeElement == childElement
+              );
+              this.selectedIds.splice(removeIndex, 1);
+            });
+          }
+        }
+      }
+      this.setList();
+    }
+  }
+  deleteEvent(event: any) {
+    const index = this.selectedIds.findIndex(
+      (element: any) => element == event[this.rcIdKey]
+    );
+    this.selectedIds.splice(index, 1);
+    this.setList();
+  }
+
+  selectAll(mode: any) {
+    if (mode) {
+      const list = [...this.responsibilityCentersList];
+      this.selectedIds = [];
+      list.forEach((element) => {
+        this.selectedIds.push(element[this.rcIdKey]);
+      });
+    } else {
+      this.selectedIds = [];
+    }
+    this.setList();
+  }
+
+  setList() {
+    const data: any = [];
+    const rcList = [...new Set(this.responsibilityCentersList)];
+    // cloneDeep(this.responsibilityCentersList);
+    const selectedIds = [...new Set(this.selectedIds)];
+    // cloneDeep(this.selectedIds);
+    rcList.forEach((element: any) => {
+      if (selectedIds.includes(element[this.rcIdKey])) {
+        data.push(element);
+      }
+    });
+    this.selectedResponsibilityCenters = data;
+    this.footerDetails.selectedData = this.selectedResponsibilityCenters;
+  }
+
+  checkSelectAll() {
+    const data = this.responsibilityCentersList.every((rc: any) =>
+      this.selectedIds.includes(rc[this.rcIdKey])
+    );
+    return data;
+  }
+
+  save() {
+    this.saveSelectedList.emit(this.selectedIds);
+  }
+
+  closeResponsibilityCenterList() {
+    this.closeRcList.emit();
+  }
+}

package/src/lib/create-dashboard-container/risk-categories/risk-categories-config.ts

@@ -0,0 +1,18 @@
+export interface RiskCategoriesConfig{
+    strategic:{
+        list:[],
+        selectedList :any [];
+    }
+    operational:{
+        list:[],
+        selectedList :any [];
+    }
+    compliance:{
+        list:[],
+        selectedList :any [];
+    }
+    others:{
+        list:[],
+        selectedList :any  [];
+    }
+}

package/src/lib/create-dashboard-container/risk-categories/risk-categories.component.html

@@ -0,0 +1,152 @@
+<div class="risk-category-list" [class.animate-slideInRight]="animation">
+  <div
+    class="risk-category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4"
+  >
+    <span class="vx-fs-14 vx-fw-500 vx-label-txt">Select Risk Category(s)</span>
+  </div>
+  <div class="risk-category-list-mid">
+    <div class="vx-d-flex vx-mb-2">
+      <div
+        class="risk-category-list-card"
+        [class.active]="activeTab == 'strategic'"
+        (click)="activeTab = 'strategic'"
+      >
+        <div class="left">
+          <label>strategic</label>
+          <p *ngIf="categoryList?.strategic?.selectedList?.length != 0">
+            {{ categoryList?.strategic?.selectedList?.length }}
+            {{
+              categoryList?.strategic?.selectedList?.length == 1
+                ? "Category"
+                : "Categories"
+            }}
+            selected
+          </p>
+        </div>
+        <span class="counter">{{ categoryList?.strategic?.list?.length }}</span>
+      </div>
+      <div
+        class="risk-category-list-card"
+        [class.active]="activeTab == 'operational'"
+        (click)="activeTab = 'operational'"
+      >
+        <div class="left">
+          <label>operational</label>
+          <p *ngIf="categoryList?.operational?.selectedList?.length != 0">
+            {{ categoryList?.operational?.selectedList?.length }}
+            {{
+              categoryList?.operational?.selectedList?.length == 1
+                ? "Category"
+                : "Categories"
+            }}
+            selected
+          </p>
+        </div>
+        <span class="counter">{{
+          categoryList?.operational?.list?.length
+        }}</span>
+      </div>
+      <div
+        class="risk-category-list-card"
+        [class.active]="activeTab == 'compliance'"
+        (click)="activeTab = 'compliance'"
+      >
+        <div class="left">
+          <label>compliance</label>
+          <p *ngIf="categoryList?.compliance?.selectedList?.length != 0">
+            {{ categoryList?.compliance?.selectedList?.length }}
+            {{
+              categoryList?.compliance?.selectedList?.length == 1
+                ? "Category"
+                : "Categories"
+            }}
+            selected
+          </p>
+        </div>
+        <span class="counter">{{
+          categoryList?.compliance?.list?.length
+        }}</span>
+      </div>
+      <div
+        class="risk-category-list-card"
+        [class.active]="activeTab == 'others'"
+        (click)="activeTab = 'others'"
+      >
+        <div class="left">
+          <label>OTHERS</label>
+          <p *ngIf="categoryList?.others?.selectedList?.length != 0">
+            {{ categoryList?.others?.selectedList?.length }}
+            {{
+              categoryList?.others?.selectedList?.length == 1
+                ? "Category"
+                : "Categories"
+            }}
+            selected
+          </p>
+        </div>
+        <span class="counter">{{ categoryList?.others?.list?.length }}</span>
+      </div>
+    </div>
+
+    <div class="risk-category-list-search vx-mb-2">
+      <i class="icons">&#xe90b;</i>
+      <input
+        type="text"
+        [(ngModel)]="search"
+        placeholder="Search Risk Category"
+      />
+    </div>
+
+    <ng-container
+      *ngIf="categoryList[activeTab]?.list | filter : search as searchList"
+    >
+      <div class="select-all" *ngIf="searchList.length > 1">
+        <app-cs-checkbox
+          [ngValue]="checkSelectAll(activeTab)"
+          (ngValueChange)="selectAll($event, activeTab)"
+        >
+          <strong>{{
+            checkSelectAll(activeTab) ? "Deselect All" : "Select All"
+          }}</strong>
+        </app-cs-checkbox>
+      </div>
+      <div
+        class="risk-category-list-item vx-mb-4"
+        [class.with-selectAll]="searchList.length > 1"
+        *ngIf="searchList.length > 0"
+      >
+        <ul class="risk-category-list-item-ul vx-m-0 vx-p-0">
+          <li class="vx-mb-4" *ngFor="let category of searchList">
+            <app-cs-checkbox
+              [ngValue]="selectedIds.includes(category[categoryIdKey])"
+              (ngValueChange)="selectCategory($event, activeTab, category)"
+            >
+              <ul class="categories">
+                <li
+                  [arTooltip]="category.category_name"
+                  placement="bottom-left"
+                  delay="0"
+                >
+                  {{ category.category_name }}
+                </li>
+              </ul>
+            </app-cs-checkbox>
+          </li>
+        </ul>
+      </div>
+      <app-no-data
+        *ngIf="searchList.length == 0"
+        [noDataImage]="ASSETS.search_data"
+        [noDataText]="'No data to display'"
+      >
+      </app-no-data>
+    </ng-container>
+
+    <app-dashboard-footer
+      [footerDetails]="footerDetails"
+      (cancelEvent)="close()"
+      (deleteEvent)="deleteEvent($event)"
+      (submitEvent)="save()"
+    ></app-dashboard-footer>
+  </div>
+</div>