vc-create-dashboard 3.0.66 → 3.0.68

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,15 +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;
-    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

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

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

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

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

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

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