vc-create-dashboard 3.0.83 → 3.0.84

package/src/lib/create-dashboard-container/configure-widgets/configure-widgets/configure-widgets.component.ts

@@ -0,0 +1,392 @@
+import { ConfigureWidgetsService } from '../../services/configure-widgets.service';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { retry } from 'rxjs/operators';
+import { widgetDataModel } from '../../interfaces/widget-data-model';
+import { DialogRef } from '../../../ui-kit/dialog/dialog-ref';
+import { widgetConfig } from './widget.interface';
+import { SnackBarService } from '../../../ui-kit/snack-bar/snack-bar.service';
+import { ASSETS } from '../../constants/assets.constant';
+
+@Component({
+  selector: 'app-configure-widgets',
+  templateUrl: './configure-widgets.component.html',
+  styleUrls: ['./configure-widgets.component.less'],
+})
+export class ConfigureWidgetsComponent implements OnInit, OnChanges {
+  @Output() widgetsDataModified: EventEmitter<any> = new EventEmitter();
+  @Output() closeConfigureWidgets: EventEmitter<any> = new EventEmitter();
+  checkboxStatus!: any;
+  search: string = '';
+  checkedArray: Array<{ index: number; status: number }> = [];
+  selectedWidgets: Array<widgetDataModel> = [];
+  ASSETS = ASSETS;
+  module: 'COMPLIANCE' | 'RISK' = 'COMPLIANCE';
+  @Input() selectedWidgetsData: any = [];
+  @Input() displayedWidgets: any = [];
+  @Input() showRisk = false;
+  @Input() showCompliance = false;
+  @Input() mode = 'CREATE';
+  noDataText =
+    'You have not configured any widgets. Click on the <strong>Configure Widgets</strong> button to begin.';
+
+  selectedWidgetIds: any = [];
+  subResponsibilitiesSelected: boolean = false;
+  subKeyResponsibilitiesSelected: boolean = false;
+  showWidgets = true;
+  complianceWidgetsDisplayCount = 9;
+  riskWidgetsDisplayCount = 9;
+
+  constructor(
+    private dialog: DialogRef,
+    public configureWidgetsService: ConfigureWidgetsService,
+    private snackBar: SnackBarService
+  ) {}
+
+  ngOnChanges() {
+    this.selectedWidgets = [];
+
+    if (this.mode === 'EDIT') {
+      this.applyEditModeWidgetCatalog();
+    } else {
+      this.applyCreateModeWidgetVisibility();
+      this.applySavedWidgetSelection(this.selectedWidgetsData);
+    }
+
+    this.module = this.showCompliance ? 'COMPLIANCE' : 'RISK';
+    this.setSelectedWidgets();
+  }
+
+  /** EDIT: show full widget catalog; check items present in getWidgets widgetArr. */
+  private applyEditModeWidgetCatalog(): void {
+    this.widgetsList.COMPLIANCE.forEach((ele: any) => {
+      ele.value = false;
+      ele.visibility = true;
+      (ele.subWidgets ?? []).forEach((sub: any) => {
+        sub.value = false;
+        sub.visibility = true;
+      });
+    });
+    this.complianceWidgetsDisplayCount = this.widgetsList.COMPLIANCE.filter(
+      (w) => w.visibility
+    ).length;
+    this.riskWidgetsDisplayCount = 0;
+    this.applySavedWidgetSelection(this.selectedWidgetsData);
+  }
+
+  /** CREATE: limit visible tiles to displayedWidgets when provided. */
+  private applyCreateModeWidgetVisibility(): void {
+    if (!this.displayedWidgets?.length) {
+      return;
+    }
+    this.setWidgetsVisibilityToFalse();
+    this.riskWidgetsDisplayCount = 0;
+    this.complianceWidgetsDisplayCount = 0;
+    const finalData = [...new Set(this.displayedWidgets)];
+    finalData.forEach((element: any) => {
+      this.widgetsList.COMPLIANCE.forEach((ele: any) => {
+        if (ele.id !== element.widget_code) {
+          return;
+        }
+        ele.visibility = true;
+        if (ele.subWidgets.length > 0) {
+          const visibleSubCodes = (element.sub_widgets ?? []).map(
+            (subwidget: any) => subwidget.widget_code
+          );
+          ele.subWidgets.forEach((subElement: any, subIndex: number) => {
+            ele.subWidgets[subIndex].visibility = visibleSubCodes.includes(
+              subElement.id
+            );
+          });
+        }
+        this.complianceWidgetsDisplayCount++;
+      });
+    });
+  }
+
+  private applySavedWidgetSelection(savedWidgets: any[]): void {
+    const data = [...new Set(savedWidgets ?? [])];
+    data.forEach((element: any) => {
+      if (element?.state && element.state !== 'ACTIVE') {
+        return;
+      }
+      this.widgetsList.COMPLIANCE.forEach((ele: any) => {
+        if (ele.id !== element.widget_code) {
+          return;
+        }
+        ele.value = true;
+        if (ele.subWidgets.length > 0 && element.sub_widgets?.length) {
+          const activeSubCodes = (element.sub_widgets ?? [])
+            .filter((subwidget: any) => subwidget.state === 'ACTIVE')
+            .map((subwidget: any) => subwidget.widget_code);
+          ele.subWidgets.forEach((subElement: any, subIndex: number) => {
+            ele.subWidgets[subIndex].value = activeSubCodes.includes(
+              subElement.id
+            );
+          });
+        }
+      });
+    });
+  }
+
+  ngOnInit(): void {}
+
+  widgetsList = {
+    COMPLIANCE: [
+      {
+        title: 'Overview',
+        id: 'overview',
+        description:
+          'Overview shows the performance of responsibilities and Programs.',
+        widgetImage: ASSETS.overviewWidget,
+        value: false,
+        visibility: true,
+        module: 'COMPLIANCE',
+        subWidgets: [],
+      },
+      {
+        title: 'Responsibility Calendar',
+        id: 'compliance_calendar_flag',
+        description:
+          'The Responsibility Calendar shows the due dates of responsibilities in a calendar format. The responsibilities are color coded to reflect the status of the responsibilities.',
+        widgetImage: ASSETS.responsibilityCalenderWidget,
+        value: false,
+        visibility: true,
+        module: 'COMPLIANCE',
+        subWidgets: [],
+      },
+
+      {
+        title: 'Responsibilities by Assignee',
+        id: 'responsibilities_by_assignee',
+        description: 'The Responsibilities by Assignee widget shows the performance of responsibilities by users.',
+        widgetImage: ASSETS.responsibilitiesByAssignee,
+        value: false,
+        visibility: true,
+        module: 'COMPLIANCE',
+        subWidgets: [],
+      },
+      {
+        title: 'Responsibility Center Overview',
+        id: 'responsibility_center_overview_flag',
+        description:
+          'The Responsibility Center Overview shows the performance of responsibilities and Responsibility Centers.',
+        widgetImage: ASSETS.responsibilityCenterOverviewWidget,
+        value: false,
+        visibility: true,
+        module: 'COMPLIANCE',
+        subWidgets: [],
+      },
+      {
+        title: 'Responsibilities',
+        id: 'my_responsibilities',
+        description:
+          'This widget shows the performance of the responsibilities that you are required to complete, the responsibilities that you are reviewing and the responsibilities that you are overseeing.',
+        widgetImage: ASSETS.myResponsibilitiesWidget,
+        tabOption: true,
+        value: false,
+        visibility: true,
+        module: 'COMPLIANCE',
+        subWidgets: [
+          {
+            title: 'My Responsibilities',
+            id: 'my_responsibility_flag',
+            value: false,
+            visibility: true,
+          },
+          {
+            title: 'I’m Reviewing',
+            id: 'reviewer_responsibility_flag',
+            value: false,
+            visibility: true,
+          },
+          {
+            title: 'I’m Overseeing',
+            id: 'cc_responsibility_flag',
+            value: false,
+            visibility: true,
+          },
+        ],
+      },
+      {
+        title: 'Key Responsibilities',
+        id: 'key_responsibilities',
+        description:
+          'This widget shows the performance of key responsibilities that you are required to complete, that you are reviewing, that you are overseeing and that you have assigned to another person.',
+        widgetImage: ASSETS.keyResponsibilitiesWidget,
+        tabOption: true,
+        value: false,
+        visibility: true,
+        module: 'COMPLIANCE',
+        subWidgets: [
+          {
+            title: 'Overview',
+            id: 'key_responsibilities_overview_flag',
+            value: false,
+            visibility: true,
+          },
+          {
+            title: 'My Responsibilities',
+            id: 'key_my_responsibilities_flag',
+            value: false,
+            visibility: true,
+          },
+          {
+            title: 'I’m Reviewing',
+            id: 'key_i_am_reviewing_flag',
+            value: false,
+            visibility: true,
+          },
+          {
+            title: 'I’m Overseeing',
+            id: 'key_i_am_overseeing_flag',
+            value: false,
+            visibility: true,
+          },
+        ],
+      },
+      {
+        title: 'Trend Analysis',
+        id: 'trend_analysis_flag',
+        description:
+          'The Trend Analysis is a graphical representation of the performance of responsibilities over a period.',
+        widgetImage: ASSETS.trendAnalysisWidget,
+        value: false,
+        visibility: true,
+        module: 'COMPLIANCE',
+        subWidgets: [],
+      },
+    ],
+  
+  };
+
+  selectWidget(
+    event: any,
+    module: 'COMPLIANCE',
+    widgetId: string,
+    subWidgetId?: string
+  ) {
+    const widgetIndex = this.widgetsList[module].findIndex(
+      (ele: any) => ele.id == widgetId
+    );
+    const isSubWidgetAddable = this.selectedWidgets.findIndex(
+      (widget: any) => widget.id === widgetId
+    );
+    if (event) {
+      if (
+        this.selectedWidgets.length >= 10 &&
+        !(subWidgetId && isSubWidgetAddable >= 0)
+      ) {
+        this.snackBar.show('You cannot add more than 10 widgets.', 'alert');
+        this.showWidgets = false;
+        setTimeout(() => {
+          this.widgetsList[module][widgetIndex].value = false;
+          this.showWidgets = true;
+        }, 10);
+        return;
+      }
+      this.widgetsList[module][widgetIndex].value = true;
+      if (this.widgetsList[module][widgetIndex].subWidgets.length > 0) {
+        if (!subWidgetId) {
+          this.widgetsList[module][widgetIndex].subWidgets.forEach(
+            (ele) => (ele.value = true)
+          );
+        } else {
+          const subWidgetIndex = this.widgetsList[module][
+            widgetIndex
+          ].subWidgets.findIndex((ele: any) => ele.id == subWidgetId);
+          this.widgetsList[module][widgetIndex].subWidgets[
+            subWidgetIndex
+          ].value = true;
+        }
+      }
+    } else {
+      if (this.widgetsList[module][widgetIndex].subWidgets.length > 0) {
+        if (!subWidgetId) {
+          this.widgetsList[module][widgetIndex].value = false;
+          this.widgetsList[module][widgetIndex].subWidgets.forEach(
+            (ele: any) => (ele.value = false)
+          );
+        } else {
+          const subWidgetIndex = this.widgetsList[module][
+            widgetIndex
+          ].subWidgets.findIndex((ele: any) => ele.id == subWidgetId);
+          this.widgetsList[module][widgetIndex].subWidgets[
+            subWidgetIndex
+          ].value = false;
+
+          const isAllWidgetsRemoved = this.widgetsList[module][
+            widgetIndex
+          ].subWidgets.every((ele: any) => ele.value == false);
+          if (isAllWidgetsRemoved) {
+            this.widgetsList[module][widgetIndex].value = false;
+          }
+        }
+      } else {
+        this.widgetsList[module][widgetIndex].value = false;
+      }
+    }
+    this.setSelectedWidgets();
+  }
+  setSelectedWidgets() {
+    this.selectedWidgets = [];
+    this.widgetsList.COMPLIANCE.forEach((ele: any) => {
+      if (ele.value) {
+        this.selectedWidgets.push(ele);
+      }
+    });
+    // this.widgetsList.RISK.forEach((ele: any) => {
+    //   if (ele.value) {
+    //     this.selectedWidgets.push(ele);
+    //   }
+    // });
+  }
+
+  removeWidget(widget: widgetConfig) {
+    const widgetIndex = this.widgetsList[widget.module].findIndex(
+      (ele: any) => ele.id == widget.id
+    );
+    this.widgetsList[widget.module][widgetIndex].value = false;
+    if (this.widgetsList[widget.module][widgetIndex].subWidgets.length > 0) {
+      this.widgetsList[widget.module][widgetIndex].subWidgets.forEach(
+        (ele: any) => (ele.value = false)
+      );
+    }
+    this.setSelectedWidgets();
+  }
+
+  onNextClick() {
+    this.widgetsDataModified.emit(this.selectedWidgets);
+  }
+
+  closeConfigureDashboard() {
+    this.selectedWidgets = [];
+    this.dialog.close();
+    this.closeConfigureWidgets.emit(false);
+  }
+
+  setWidgetsVisibilityToFalse() {
+    this.widgetsList.COMPLIANCE.forEach((ele: any) => {
+      ele.visibility = false;
+      if (ele.subWidgets.length > 0) {
+        ele.subWidgets.forEach((subElement: any) => {
+          subElement.visibility = false;
+        });
+      }
+    });
+    // this.widgetsList.RISK.forEach((ele: any) => {
+    //   ele.visibility = false;
+    //   if (ele.subWidgets.length > 0) {
+    //     ele.subWidgets.forEach((subElement: any) => {
+    //       subElement.visibility = false;
+    //     });
+    //   }
+    // });
+  }
+}

package/src/lib/create-dashboard-container/configure-widgets/configure-widgets/widget.interface.ts

@@ -0,0 +1,9 @@
+export interface widgetConfig{
+    title: string,
+    id: string,
+    description: string,
+    widgetImage: string,
+    value: boolean,
+    module: 'COMPLIANCE',
+    subWidgets: []
+}

package/src/lib/create-dashboard-container/configure-widgets/configure-widgets.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
+import { FloatingBarModule } from '../../ui-kit//floating-bar/floating-bar.module';
+import { FormgroupModule } from '../../ui-kit/formgroup/formgroup.module';
+import { FormsModule } from '@angular/forms';
+import { SearchPipe } from '../pipes/search.pipe';
+import { ConfigureWidgetsComponent } from './configure-widgets/configure-widgets.component';
+import { DirectivesModule } from '../directives/directives.module';
+import { NoDataModule } from '../../ui-kit/no-data/no-data.module';
+
+
+
+@NgModule({
+  declarations: [
+    ConfigureWidgetsComponent, SearchPipe
+  ],
+  imports: [
+    CommonModule,
+    FloatingBarModule,
+    FormgroupModule,
+    FormsModule,
+    DirectivesModule,
+    NoDataModule,
+    NgOptimizedImage
+  ],
+  exports: [
+    ConfigureWidgetsComponent
+  ]
+})
+export class ConfigureWidgetsModule { }

package/src/lib/create-dashboard-container/constants/assets.constant.ts

@@ -0,0 +1,37 @@
+const BASE_URL = 'https://cdn.v-comply.com';
+
+export const ASSETS = {
+  dashBoardIcon: `${BASE_URL}/libraries/workflow-engine/assets/workflow/what.svg`,
+  dashBoardUsersIcon: `${BASE_URL}/libraries/workflow-engine/assets/workflow/who.svg`,
+  dashBoardRcIcon: `${BASE_URL}/libraries/workflow-engine/assets/workflow/responsibility-center.svg`,
+  dashBoardProgramIcon: `${BASE_URL}/libraries/workflow-engine/assets/workflow/category.svg`,
+  dashBoardRiskIcon: `${BASE_URL}/libraries/workflow-engine/assets/workflow/category.svg`,
+  dashBoardTimeFrameIcon: `${BASE_URL}/libraries/workflow-engine/assets/workflow/when.svg`,
+  dashBoardEmailSummariesIcon: `${BASE_URL}/libraries/workflow-engine/assets/workflow/send-resolution.svg`,
+  configure_widget: `${BASE_URL}/libraries/configure-widget/assets/images/configure-widget.svg`,
+  overviewWidget: `${BASE_URL}/libraries/configure-widget/assets/images/overview.png`,
+  responsibilityCalenderWidget: `${BASE_URL}/libraries/configure-widget/assets/images/responsibility-calender.png`,
+  responsibilityCenterOverviewWidget: `${BASE_URL}/libraries/configure-widget/assets/images/responsibility-center-overview.png`,
+  myResponsibilitiesWidget: `${BASE_URL}/libraries/configure-widget/assets/images/my-responsibilities.png`,
+  keyResponsibilitiesWidget: `${BASE_URL}/libraries/configure-widget/assets/images/key-responsibilities.png`,
+  trendAnalysisWidget: `${BASE_URL}/libraries/configure-widget/assets/images/trend-analysis.png`,
+  workroomUpdatesWidget: `${BASE_URL}/libraries/configure-widget/assets/images/workroom-updates.png`,
+  recentActivitiesWidget: `${BASE_URL}/libraries/configure-widget/assets/images/recent-activities.png`,
+  exceptionSummaryWidget: `${BASE_URL}/libraries/configure-widget/assets/images/exception-summary.png`,
+  riskOverviewWidget: `${BASE_URL}/libraries/configure-widget/assets/images/riskV2/risk-overview.png`,
+  appetiteToleranceWidget: `${BASE_URL}/libraries/configure-widget/assets/images/riskV2/appetite-tolerance.png`,
+  inherentRCWidget: `${BASE_URL}/libraries/configure-widget/assets/images/riskV2/inherent-RC.png`,
+  residualRCWidget: `${BASE_URL}/libraries/configure-widget/assets/images/riskV2/residual-RC.png`,
+  riskCategoryOverviewWidget: `${BASE_URL}/libraries/configure-widget/assets/images/riskV2/risk-category-overview.png`,
+  riskHeatmapWidget: `${BASE_URL}/libraries/configure-widget/assets/images/risk-heatmap.png`,
+  inherentCategoriesWidget: `${BASE_URL}/libraries/configure-widget/assets/images/riskV2/inherent-categories.png`,
+  residualCategoriesWidget: `${BASE_URL}/libraries/configure-widget/assets/images/riskV2/residual-categories.png`,
+  tenRiskRatingsWidget: `${BASE_URL}/libraries/configure-widget/assets/images/10-risk-ratings.png`,
+  search_data: `${BASE_URL}/libraries/workflow-engine/assets/workflow/search-data.svg`,
+  appetite_tolerance: `${BASE_URL}/libraries/configure-widget/assets/images/appetite-tolerance.png`,
+  inherent_trend: `${BASE_URL}/libraries/configure-widget/assets/images/inherent-trend.png`,
+  residual_trend: `${BASE_URL}/libraries/configure-widget/assets/images/residual-trend.png`,
+  risk_trend: `${BASE_URL}/libraries/configure-widget/assets/images/risk-trend.png`,
+  policyApproverView: `${BASE_URL}/policy/images/policy-approver-view.svg`,
+  responsibilitiesByAssignee: `${BASE_URL}/libraries/configure-widget/assets/images/responsibilitiesByAssignee.png`,
+}

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

@@ -0,0 +1,24 @@
+export interface CreateDashboardForm {
+    dashboardName: string,
+    dashboardDescriptionText: string,
+    selectedViewers: any[],
+    selectedGroup:any[],
+    selectedFromDate: any,
+    selectedToDate: any,
+    selectedResponsibilityCenters: any[],
+    selectedResponsibilityCategories: any[],
+    selectedRiskCategories: any[],
+    
+
+    displayCriteria:string,
+    configureWidget: any[],
+
+
+    frequencyDetails:string,
+    selectedFrequencyType: string,
+    selectedFrequencies: any,
+    frequencyMessage:string
+    frequencyDate:any
+
+  }
+