vcomply-workflow-engine 2.0.4 → 2.0.167

package/projects/vx-workflow-engine/src/lib/sharedComponents/framework-list/framework-list.component.ts

@@ -0,0 +1,431 @@
+import { HttpParams } from '@angular/common/http';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { Subject, takeUntil } from 'rxjs';
+import { ResponsibilityService } from '../../workflow-services/responsibility.service';
+import { SelectedIds, SelectedValues } from './framework-integration-interfaces';
+import { ParentTableComponent } from './parent-table/parent-table.component';
+
+@Component({
+  selector: 'app-framework-list',
+  templateUrl: './framework-list.component.html',
+  styleUrls: ['./framework-list.component.less']
+})
+export class FrameworkListComponent implements OnInit, OnChanges {
+  breadCrumb: any[] = [];
+  search = '';
+  showParent = true;
+  showChild = false;
+  parentData: object = {}
+  @ViewChild('parentTable') tableComponent!: ParentTableComponent;
+  @Output() entrustFramework = new EventEmitter();
+  @Output() closeFramework = new EventEmitter();
+  @Output() assignControl = new EventEmitter();
+  @Input() previousSelectedValues!: any;
+  @Input() headerText: string = 'Select From a Framework';
+  @Input() workflowPage: Array<string> = ['FRAMEWORK', 'CATEGORY', 'RESPONSIBILITY'];
+  subCategoriesList = {
+    from: 1,
+    to: 0,
+    currentPage: 1,
+    totalPages: 0,
+    totalRecords: 0,
+    data: [],
+  };
+  responsibilitiesList = {
+    from: 1,
+    to: 0,
+    currentPage: 1,
+    totalPages: 0,
+    totalRecords: 0,
+    data: [],
+  };
+
+  searchText = {
+    frameWork: '',
+    category: '',
+    responsibility: '',
+  }
+
+  selectedValues: SelectedValues = {
+    framework: {},
+    categories: {},
+    responsibilities: {}
+  }
+
+
+  submissionLoader = false;
+  currentCategory: any = {};
+
+  @Input() policy: any = {}
+  // @Output() changeTab = new EventEmitter();
+
+  currentBusinessCycle!: any;
+  loader = false;
+  unsubscribe = new Subject();
+
+  //program
+  subList = false;
+  @Input() frameWorkList: any;
+  // @Input() allPrograms: any[] = [];
+  @Input() selectedFrameWork!: any;
+  @Input() selectedCategories: any[] = [];
+  @ViewChild('searchField') searchfield!: any;
+  @ViewChild('searchCategory') searchCategory!: any;
+
+  frameworkData = {
+    data: [],
+    from: 0,
+    to: 0,
+    totalPages: 0,
+    totalRecords: 0,
+    currentPage: 1,
+
+  }
+  frameworkCount = {
+    regulations: 0,
+    standards: 0,
+    internalControls: 0,
+    others: 0
+  }
+  frameTypeObject = {
+    regulations: 1,
+    standards: 2,
+    internalControls: 3,
+    others: 0,
+  }
+  placeholderText = {
+    framework: 'Search Frameworks',
+    categories: 'Search Categories',
+    responsibilities: 'Search Responsibilities'
+  }
+  controlsList: any[] = []
+  displayConfirmationMessage = false;
+
+  activeTab: 'regulations' | 'standards' | 'internalControls' | 'others' = 'regulations'
+
+  currentList: 'framework' | 'categories' | 'responsibilities' = 'framework';
+  floatingBarDisplayKeys = {
+    framework: 'name',
+    categories: 'name',
+    responsibilities: 'name',
+  }
+
+
+  constructor(private responsibilityService: ResponsibilityService) { }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.previousSelectedValues) {
+      this.selectedValues = {
+        framework: this.previousSelectedValues.framework ?? {},
+        categories: this.previousSelectedValues.categories ?? {},
+        responsibilities: this.previousSelectedValues.responsibilities ?? {},
+      }
+    }
+  }
+  ngOnInit(): void {
+    this.getFrameworksCount();
+    this.getFrameworksList();
+  }
+
+
+  expandCategory(category: any) {
+    if (category.category_name) {
+      this.breadCrumb = [];
+      category.category_name.forEach((categoryItem: any, index: any) => {
+        let obj;
+        if (index == category.category_name.length - 1) {
+          obj = {
+            itemName: categoryItem,
+            itemId: category._id
+          }
+        } else {
+          obj = {
+            itemName: categoryItem,
+            itemId: category.parent_cat_obj_ids[index]
+          }
+        }
+        this.breadCrumb.push(obj);
+      });
+    }
+
+  }
+
+  entrustFrameworkDetails(report: any) {
+    this.entrustFramework.emit(report);
+  }
+  close() {
+    this.closeFramework.emit();
+
+  }
+
+  getFrameworksCount(data?: any) {
+    let params = new HttpParams();
+    if (data?.search || this.searchText.frameWork) {
+      params = params.append('search', this.searchText.frameWork);
+    }
+    this.responsibilityService.getFrameWorkCount(params).pipe(takeUntil(this.unsubscribe)).subscribe({
+      next: (res: any) => {
+
+        this.frameworkCount = {
+          regulations: res.regulations ?? 0,
+          standards: res.standards ?? 0,
+          internalControls: res.internalControls ?? 0,
+          others: res.others ?? 0
+        }
+      },
+      error: (err: any) => {
+      },
+    });
+  }
+  getFrameworksList(data?: any) {
+    this.loader = true;
+    let params = new HttpParams();
+    params = params.append('type', this.frameTypeObject[this.activeTab]);
+    if (data?.search || this.searchText.frameWork) {
+      params = params.append('search', this.searchText.frameWork);
+    } else {
+      params = params.append('page', this.frameworkData.currentPage);
+    }
+    this.responsibilityService.getFrameWorkList(params).pipe(takeUntil(this.unsubscribe)).subscribe({
+      next: (res: any) => {
+        this.frameworkData.data = res.data;
+        this.frameworkData.from = res.items_from;
+        this.frameworkData.to = res.items_to;
+        this.frameworkData.totalPages = res.total_pages;
+        this.frameworkData.totalRecords = res.total_items;
+        this.loader = false;
+      },
+      error: (err: any) => {
+        this.loader = false;
+      },
+    });
+  }
+
+  getSubCategories(id?: any, data?: any) {
+    this.loader = true;
+    let params = new HttpParams();
+    if (data?.search || this.searchText.category) {
+      params = params.append('search', this.searchText.category);
+    } else {
+      params = params.append('page', this.subCategoriesList.currentPage);
+    }
+    this.responsibilityService.getFrameworkSubCategories(id, params).pipe(takeUntil(this.unsubscribe)).subscribe({
+      next: (res: any) => {
+        this.subCategoriesList.from = res.items_from ?? 1;
+        this.subCategoriesList.to = res.items_to ?? 0;
+        this.subCategoriesList.totalPages = res.total_pages ?? 0;
+        this.subCategoriesList.totalRecords = res.total_items ?? 0;
+        this.subCategoriesList.data = res.data ?? [];
+        this.loader = false;
+      },
+      error: (err: any) => {
+        this.loader = false;
+      },
+    });
+  }
+  changeTab(type: 'regulations' | 'standards' | 'internalControls' | 'others') {
+    this.activeTab = type;
+    this.frameworkData.currentPage = 1;
+    this.searchText.frameWork = '';
+    this.searchfield.nativeElement.value = '';
+    this.getFrameworksList();
+  }
+
+  getResponsibilities(id?: any, data?: any) {
+    this.loader = true;
+    let params = new HttpParams();
+    if (data?.search || this.searchText.responsibility) {
+      params = params.append('search', this.searchText.responsibility);
+    } else {
+      params = params.append('page', this.responsibilitiesList.currentPage);
+    }
+    this.responsibilityService.getFrameworkControls(id, params).pipe(takeUntil(this.unsubscribe)).subscribe({
+      next: (res: any) => {
+        this.controlsList = res;
+        this.responsibilitiesList.from = res.items_from ?? 1;
+        this.responsibilitiesList.to = res.items_to ?? 0;
+        this.responsibilitiesList.totalPages = res.total_pages ?? 0;
+        this.responsibilitiesList.totalRecords = res.total_items ?? 0;
+        this.responsibilitiesList.data = res.data ?? res;
+        this.loader = false;
+      },
+      error: (err: any) => {
+        this.loader = false;
+      },
+    });
+  }
+
+  changePage(event: any, type: 'frameworks' | 'categories' | 'responsibilities') {
+    switch (type) {
+      case 'frameworks':
+        this.frameworkData.currentPage = event;
+        this.getFrameworksList();
+        break;
+      case 'categories':
+        this.subCategoriesList.currentPage = event;
+        this.getSubCategories(this.selectedValues.framework._id)
+        break;
+      case 'responsibilities':
+        this.responsibilitiesList.currentPage = event;
+        if (this.selectedValues?.framework?.parent_list_details?.length == 0 && this.selectedValues?.framework?.child_list_details.length == 0 && this.selectedValues?.framework?.totalControls > 0) {
+          this.getResponsibilities(this.selectedValues.framework._id);
+        } else {
+          this.getResponsibilities(this.selectedValues.categories._id);
+        }
+        break;
+    }
+
+  }
+  searchBy(event: any, type: 'framework' | 'categories' | 'responsibilities') {
+    this.resetPagination();
+    switch (type) {
+      case 'framework':
+        if (this.searchText.frameWork != event) {
+          this.searchText.frameWork = event;
+          this.getFrameworksList({ search: true })
+          this.getFrameworksCount({ search: true })
+
+        }
+        break;
+      case 'categories':
+        if (this.searchText.category != event) {
+          this.searchText.category = event;
+          this.getSubCategories(this.selectedValues.framework._id, { search: true })
+        }
+        break;
+      case 'responsibilities':
+        if (this.searchText.responsibility != event) {
+          this.searchText.responsibility = event;
+          if (this.selectedValues?.framework?.parent_list_details?.length == 0 && this.selectedValues?.framework?.child_list_details.length == 0 && this.selectedValues?.framework?.totalControls > 0) {
+            this.getResponsibilities(this.selectedValues.framework._id);
+          } else {
+            this.getSubCategories(this.selectedValues.categories._id);
+          }
+        }
+        break;
+
+    }
+  }
+
+  selectFramework(data: any) {
+    switch (this.currentList) {
+      case 'framework':
+        this.selectedValues.framework = data;
+        this.selectedValues.categories = {};
+        this.selectedValues.responsibilities = {};
+
+        break;
+      case 'categories':
+        this.selectedValues.categories = data;
+
+        this.selectedValues.responsibilities = {};
+        break;
+      case 'responsibilities':
+        this.selectedValues.responsibilities = data;
+        break;
+      default:
+        break;
+    }
+
+
+  }
+  save() {
+    this.resetPagination();
+    switch (this.currentList) {
+      case 'framework':
+        if(this.workflowPage?.length === 1 && this.workflowPage.includes('FRAMEWORK')) {
+          const frameworkDetails = this.selectedValues.framework;
+          this.assignControl.emit({name: frameworkDetails?.name, _id: frameworkDetails?._id, type:frameworkDetails?.framework_type, id: frameworkDetails?.id, description: frameworkDetails?.description ?? ''});
+        } else {
+          if (this.selectedValues?.framework?.parent_list_details?.length == 0 && this.selectedValues?.framework?.child_list_details.length == 0 && this.selectedValues?.framework?.totalControls > 0) {
+            this.currentList = 'responsibilities';
+            this.getResponsibilities(this.selectedValues.framework._id);
+
+          } else {
+              this.currentList = 'categories';
+              this.getSubCategories(this.selectedValues.framework._id);
+          }
+        }
+        break;
+      case 'categories':
+        this.currentList = 'responsibilities';
+        this.getResponsibilities(this.selectedValues.categories._id);
+        break;
+      case 'responsibilities':
+        this.assignSelectedControl(this.selectedValues.responsibilities);
+        break;
+      default:
+        break;
+    }
+  }
+
+
+  goBack() {
+    this.resetPagination();
+    switch (this.currentList) {
+      case 'framework':
+        this.closeFramework.emit();
+        break;
+      case 'categories':
+        this.currentList = 'framework';
+        break;
+      case 'responsibilities':
+        if (this.selectedValues?.framework?.parent_list_details?.length == 0 && this.selectedValues?.framework?.child_list_details.length == 0 && this.selectedValues?.framework?.totalControls > 0) {
+          this.currentList = 'framework'
+        } else {
+          this.currentList = 'categories';
+        }
+        break;
+      default:
+        break;
+    }
+  }
+  resetPagination() {
+    this.frameworkData.currentPage = 1;
+    this.subCategoriesList.currentPage = 1;
+    this.responsibilitiesList.currentPage = 1;
+  }
+
+  remove() {
+    switch (this.currentList) {
+      case 'framework':
+        this.selectedValues.framework = {};
+        this.selectedValues.categories = {};
+        this.selectedValues.responsibilities = {};
+        break;
+      case 'categories':
+        this.selectedValues.categories = {};
+        this.selectedValues.responsibilities = {};
+        break;
+      case 'responsibilities':
+        this.selectedValues.responsibilities = {};
+        break;
+    }
+
+  }
+
+  saveChanges(type: 'programs' | 'categories' | 'responsibilities' | 'programsOnly') {
+    switch (type) {
+      case 'programs':
+        this.currentList = 'categories';
+        this.selectedValues.categories = [];
+        this.selectedValues.responsibilities = [];
+        this.getSubCategories();
+        break;
+      case 'categories':
+        this.currentList = 'responsibilities';
+        this.selectedValues.responsibilities = [];
+        this.getResponsibilities();
+        break;
+      case 'responsibilities':
+        // this.submitprogramIntegration();
+        break;
+    }
+  }
+
+  assignSelectedControl(data: any) {
+    let selectedFrameworkData = this.selectedValues;
+    this.assignControl.emit({ data, selectedFrameworkData });
+  }
+
+}

package/projects/vx-workflow-engine/src/lib/sharedComponents/framework-list/framework-responsibility-table/framework-responsibility-table.component.html

@@ -0,0 +1,76 @@
+<div class="framework-responsibility-table">
+    <div class="table-header"  *ngIf="loader || controlsList?.data?.length">
+        <div class="table-row">
+            <div
+                class="table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial">
+                #</div>
+            <div
+                class="table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center name">
+                NAME</div>
+            <div
+                class="table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action-button">
+            </div>
+        </div>
+    </div>
+    <div class="table-body">
+        <lib-framework-table-loader *ngIf="loader"></lib-framework-table-loader>
+        <!-- when radio button was checked then active class was true -->
+        <ng-container *ngIf="!loader">
+            <div class="table-row"  (click)="selectControl(control)" [class.active]="currentSelectedControl?.id == control?.id"
+            *ngFor="let control of controlsList?.data; let i =index;">
+            <div class="table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial">
+                <div class="sr-no" [appTooltip]="i+controlsList.from" placement="bottom" delay="0" type="black"
+                    [tooltipMandatory]="true">
+                    {{i+controlsList.from}}
+                    <app-cs-radio [checked]="currentSelectedControl?.id == control?.id">
+                    </app-cs-radio>
+                </div>
+            </div>
+            <div class="table-column vx-pr-1 vx-d-flex vx-align-center name">
+                <!-- <div class="vx-avatar-group vx-mr-2">
+                    <div class="vx-avatar md" [appTooltip]="'Harshvardhan Kariwala'" placement="bottom-left" delay="0" type="black" [tooltipMandatory]="true">
+                        <span class="blue">hk</span>
+                        <img *ngIf="false" src="https://s3-eu-west-1.amazonaws.com/eu.v-comply.com/profile_pic/thumb/1591875227667_vcomply.png" alt="">
+                    </div>
+                    <div class="vx-avatar md" [appTooltip]="'Harshvardhan Kariwala'" placement="bottom-left" delay="0" type="black" [tooltipMandatory]="true">
+                        <span class="green">hk</span>
+                        <img *ngIf="false" src="https://s3-eu-west-1.amazonaws.com/eu.v-comply.com/profile_pic/thumb/1591875227667_vcomply.png" alt="">
+                    </div>
+                </div> -->
+                <div class="vx-d-block vx-w-100">
+                    <div class="vx-d-flex vx-w-100">
+                        <div class="responsibility-name vx-fs-12 vx-label-txt vx-pr-2" [appTooltip]="control?.name" placement="bottom-left" delay="0" type="black" [tooltipMandatory]="false">
+                            <!-- <span class="id vx-fs-10 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mr-1">[CID-18087001]</span> -->
+                            {{control?.name}}
+                        </div>
+                        <button class="info-btn vx-fs-14 vx-txt-blue vx-m-0 vx-p-0 vx-d-flex vx-align-center" appPopover (click)="responsibilityInfoBtn.popover()" placement="left"><i class="icons">&#xe932;</i></button>
+                        <app-popover #responsibilityInfoBtn [dontCloseonClick]="true">
+                            <div class="wf-action-list">
+                                <div class="responsibility-info vx-p-3">
+                                    <!-- <div class="vx-fs-11 vx-fw-500 vx-label-txt vx-mb-1">FREQUENCY:</div>
+                                    <div class="vx-fs-13 vx-paragraph-txt">{{(control?.frequency) ?control?.frequency: 'N/A'}}</div>
+                                    <div class="separator vx-mt-2 vx-mb-2"></div> -->
+                                    <div class="vx-fs-11 vx-fw-500 vx-label-txt vx-mb-1">OBJECTIVE:</div>
+                                    <div class="vx-fs-12 vx-paragraph-txt" [innerHtml]="(control?.objectives) ? control?.objectives: 'N/A'"></div>
+                                    <div class="vx-fs-11 vx-fw-500 vx-label-txt vx-mb-1 vx-mt-1">NOTES:</div>
+                                    <div class="vx-fs-12 vx-paragraph-txt" [innerHtml]="(control?.description) ? control?.description: 'N/A'"></div>
+                                </div>
+                            </div>
+                        </app-popover>
+                    </div>
+                    <div class="within-part">
+                        <span class="vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mr-1">Frequency:</span>
+                        <span class="value" [appTooltip]="(control?.frequency) ?control?.frequency: 'N/A'" placement="bottom-left" delay="0" type="black" [tooltipMandatory]="false">{{(control?.frequency) ?control?.frequency: 'N/A'}}</span>
+                    </div>
+                </div>
+            </div>
+            <div class="table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-end action-button">
+                <button
+                    class="assign-btn vx-fs-11 vx-fw-500 vx-txt-blue vx-p-0 vx-pl-2 vx-pr-2 vx-m-0 vx-tt-uppercase vx-d-flex vx-align-center vx-justify-center vx-lh-4"
+                    (click)="assign(control)">ASSIGN</button>
+            </div>
+        </div>
+        </ng-container>
+
+    </div>
+</div>