vc-create-dashboard 3.0.67 → 3.0.69

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

@@ -1,1333 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  HostListener,
-  Input,
-  OnChanges,
-  OnInit,
-  Output,
-  ViewChild,
-} from '@angular/core';
-import { EditorConfig } from '@vcomply/editor';
-import { DatePickerComponent, IDatePickerConfig } from 'ng2-date-picker';
-import { CreateDashboardService } from './services/create-dashboard.service';
-import { PaginationService } from './services/pagination.service';
-import { UserListConfiguration } from './user-list/user-list.config';
-import { CreateDashboardForm } from './create-dashboard-config';
-import { SnackBarService } from '../ui-kit/snack-bar/snack-bar.service';
-import { ConfigureWidgetsService } from './services/configure-widgets.service';
-
-import dayjs from 'dayjs';
-import { PopoverService } from '../ui-kit/popover/popover.service';
-import { TextCountPipe } from './pipes/text-count.pipe';
-import { ASSETS } from './constants/assets.constant';
-
-@Component({
-  selector: 'app-create-dashboard',
-  templateUrl: './create-dashboard.component.html',
-  styleUrls: ['./create-dashboard.component.less'],
-  providers: [TextCountPipe],
-})
-export class CreateDashboardComponent implements OnInit, OnChanges {
-  @Input() feature: any;
-  activeSelector = '';
-  disabled = false;
-  @Input() mode = 'CREATE';
-  @Input() dashboardId = '';
-  @Output() close = new EventEmitter();
-  @Input() createdBy = 0;
-  @ViewChild('fromDatePicker') fromDatePicker!: DatePickerComponent;
-  @ViewChild('toDatePicker') toDatePicker!: DatePickerComponent;
-  animation = true;
-  @Input() configureWidget = false;
-  ASSETS: any = ASSETS;
-
-  totalPages = 1;
-  totalList = 1;
-  usersList: any[] = [];
-  vLoader = true;
-  userListLoaded = false;
-  rcListLoaded = false;
-  complianceCategoriesListLoaded = false;
-  riskCategoryListLoaded = false;
-  hideToDate = false;
-  listDetails: UserListConfiguration = {
-    selectedUsersList: [],
-    selectedGroupList: [],
-    nonRemovableUsersList: [],
-    displayElementKey: 'member_name',
-    displayGroupKey: 'group_name',
-    groupIdkey: 'group_id',
-    elementIdKey: 'member_id',
-    tooltipKey: 'member_email',
-  };
-  dashboardDescription: EditorConfig = {
-    placeholder: 'Description (Max limit: 250 characters)',
-    mode: 'prime',
-    id: 'description',
-  };
-  responsibilityCategoriesTree: any = {
-    regulations: {
-      list: [],
-      selectedList: [],
-    },
-    standards: {
-      list: [],
-      selectedList: [],
-    },
-    internalControls: {
-      list: [],
-      selectedList: [],
-    },
-    others: {
-      list: [],
-      selectedList: [],
-    },
-  };
-  allComplianceCategories: any[] = [];
-  allRiskCategories: any[] = [];
-  showRiskCategory = false;
-  showCriteria = true;
-
-  dashboardForm: CreateDashboardForm = {
-    dashboardName: '',
-    dashboardDescriptionText: '',
-    selectedViewers: [],
-    selectedGroup: [],
-    selectedFromDate: undefined,
-    selectedToDate: undefined,
-    selectedResponsibilityCenters: [],
-    selectedResponsibilityCategories: [],
-    selectedRiskCategories: [],
-    displayCriteria: 'or',
-    configureWidget: [],
-    frequencyDetails: '',
-    selectedFrequencyType: '',
-    selectedFrequencies: [0],
-    frequencyMessage: '',
-    frequencyDate: 1,
-  };
-
-  openConfigureWidgets = false;
-  selectedWidgets: any = [];
-  displayedWidgets: any = [];
-
-  responsibilityCentersList = [];
-  datePickerOverlay = false;
-  dayNames = [
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday',
-    'Sunday',
-  ];
-  monthNames = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ];
-  quarters = [
-    'January, April, July, October',
-    'February, May, August, November',
-    'March, June, September, December',
-  ];
-
-  categoryListLoaded = false;
-  showRiskWidgets = false;
-  showComplianceWidgets = false;
-  isManageRisk: boolean = false;
-
-  riskCategoryList = {
-    strategic: {
-      list: [],
-      selectedList: [],
-    },
-    operational: {
-      list: [],
-      selectedList: [],
-    },
-    compliance: {
-      list: [],
-      selectedList: [],
-    },
-    others: {
-      list: [],
-      selectedList: [],
-    },
-  };
-
-  fromDatePickerConfig: IDatePickerConfig = {
-    min: this.getCurrentDate(),
-  };
-
-  toDatePickerConfig: IDatePickerConfig = {};
-
-  isSmiley!: boolean;
-  smileyMessage: string = '';
-  groupList: any;
-  groupsEnabled: boolean = false;
-  totalgroups: any;
-  @ViewChild('fromDatePicker', { read: ElementRef, static: false })
-  fromDatePickerPopup!: ElementRef;
-  @ViewChild('toDatePicker', { read: ElementRef, static: false })
-  toDatePickerPopup!: ElementRef;
-  openedDatePicker: string = '';
-
-  constructor(
-    private createDashboardService: CreateDashboardService,
-    private paginationService: PaginationService,
-    private cdr: ChangeDetectorRef,
-    private snackBar: SnackBarService,
-    public popoverService: PopoverService,
-    private configureWidgetsService: ConfigureWidgetsService,
-    private textCount: TextCountPipe,
-  ) {}
-
-  ngOnChanges() {
-    if (this.createdBy) {
-      this.listDetails.nonRemovableUsersList.push(this.createdBy);
-    }
-  }
-
-  @HostListener('document:keydown.escape', ['$event']) onKeydownHandler(
-    event: KeyboardEvent
-  ) {
-    this.close.emit({ mode: 'discard' });
-    this.isSmiley = false;
-  }
-
-  ngOnInit(): void {
-    this.groupsEnabled = true;
-    this.animation = true;
-    setTimeout(() => {
-      this.animation = false;
-    }, 300);
-    // this.getOrganizationUsersCount('');
-    this.getCategoryList();
-    this.getRCList();
-    this.getComplianceCategoryList();
-    this.setFrequency('2~1~0~0', 'import');
-    this.checkWhetherAllListsLoaded();
-    this.getUsersList('');
-    this.getGroupList();
-    this.createDashboardService.getUserInformation().subscribe(
-      (res: any) => {
-        this.setPermission(res?.roleActions);
-        const quickLink = res.quick_link;
-        if (quickLink.risk) {
-          this.showRiskCategory = true;
-        } else {
-          this.showRiskCategory = false;
-        }
-      },
-      (error) => {
-        console.error(error);
-      }
-    );
-  }
-
-  /**
-   * Displays the listing pages the left side of policy form to set and edit the dropdown fields values
-   * @param type holds name of particular list is to be displayed
-   * @param event contains boolean value to display the list or not
-   */
-  activateSelector(type: any, event: boolean) {
-    if (type == 'frequency' || this.activeSelector == 'frequency') {
-      this.showCriteria = false;
-      setTimeout(() => {
-        this.showCriteria = true;
-      }, 1);
-    }
-    this.activeSelector = event ? type : '';
-  }
-
-  openFromDatePicker() {
-    this.openedDatePicker = 'FROM_DATE';
-
-    this.fromDatePicker?.api?.open();
-    this.datePickerOverlay = true;
-  }
-
-  openToDatePicker() {
-    this.openedDatePicker = 'TO_DATE';
-
-    this.toDatePicker?.api?.open();
-
-    this.datePickerOverlay = true;
-  }
-  closeFromDatePicker() {
-    this.fromDatePicker?.api?.close();
-    if (!this.dashboardForm.selectedFromDate) {
-      this.dashboardForm.selectedToDate = undefined;
-      this.hideToDate = true;
-      setTimeout(() => {
-        this.hideToDate = false;
-      }, 20);
-      this.fromDatePicker.api.close();
-      this.datePickerOverlay = false;
-      return;
-    }
-    let minToDate = this.setToDate(this.dashboardForm.selectedFromDate);
-    this.toDatePickerConfig = { min: minToDate };
-
-    const fromDate = new Date(minToDate.split('-').reverse().join('-'));
-    const toDate = new Date(this.dashboardForm.selectedToDate);
-    const inValidDate = fromDate >= toDate ? true : false;
-    if (inValidDate) {
-      this.dashboardForm.selectedToDate = undefined;
-      this.hideToDate = true;
-      setTimeout(() => {
-        this.hideToDate = false;
-      }, 20);
-    }
-
-    this.datePickerOverlay = false;
-  }
-
-  closeToDatePicker() {
-    this.toDatePicker?.api?.close();
-    this.datePickerOverlay = false;
-  }
-
-  animateImage() {
-    const circleImage = document.getElementsByClassName('image');
-  }
-
-  saveFrequency(eventValues: any) {
-    this.dashboardForm.selectedFrequencyType = eventValues.frequencyType;
-    this.dashboardForm.selectedFrequencies = eventValues.frequencies;
-    this.dashboardForm.frequencyMessage = eventValues.frequencyString;
-    this.dashboardForm.frequencyDate = eventValues.selectedDate;
-    this.activateSelector('', false);
-  }
-
-  getCurrentDate() {
-    let today = new Date();
-    return dayjs(today).format('DD-MM-YYYY');
-  }
-  setToDate(data: string) {
-    let today = new Date(data);
-    return dayjs(today).format('DD-MM-YYYY');
-  }
-  getFromDate(data: string) {
-    let today = new Date(data);
-    return (
-      today.getDate() + '-' + (today.getMonth() + 1) + '-' + today.getFullYear()
-    );
-  }
-
-  /**
-   * It takes a string, converts it to a date, then returns a string in the format of YYYY-MM-DD.
-   * @param {string} data - the date you want to format
-   * @returns A string in the format of YYYY-MM-DD
-   */
-  getDateFormate(data: string) {
-    let today = new Date(data);
-    return (
-      today.getFullYear() +
-      '-' +
-      String(today.getMonth() + 1).padStart(2, '0') +
-      '-' +
-      String(today.getDate()).padStart(2, '0')
-    );
-  }
-
-  configureDashboard() {
-    let fieldsStatus = this.validateDashboard();
-    if (fieldsStatus) {
-      if (this.mode == 'CREATE') {
-        this.vLoader = true;
-        const payload = {
-          dashboard_name: this.dashboardForm.dashboardName,
-          dashboard_id: '',
-        };
-        this.createDashboardService
-          .checkDuplicateDashboardName(payload)
-          .subscribe(
-            (res) => {
-              if (!res) {
-                this.vLoader = false;
-                this.showRiskWidgets =
-                  this.isManageRisk &&
-                  this.showRiskCategory &&
-                  (this.dashboardForm.selectedRiskCategories.length > 0 ||
-                    this.dashboardForm.selectedResponsibilityCenters.length > 0)
-                    ? true
-                    : false;
-                this.showComplianceWidgets =
-                  this.dashboardForm.selectedResponsibilityCategories.length >
-                    0 ||
-                  this.dashboardForm.selectedResponsibilityCenters.length > 0
-                    ? true
-                    : false;
-                this.openConfigureWidgets = true;
-              } else {
-                this.vLoader = false;
-                this.snackBar.show(
-                  'A dashboard with this name already exists. Specify a different name for the dashboard.',
-                  'alert'
-                );
-                return;
-              }
-            },
-            (error) => {
-              console.error(error);
-              this.vLoader = false;
-            }
-          );
-      } else if (this.mode == 'EDIT') {
-        this.vLoader = true;
-        const payload = {
-          dashboard_name: this.dashboardForm.dashboardName,
-          dashboard_id: this.dashboardId,
-        };
-        this.createDashboardService
-          .checkDuplicateDashboardName(payload)
-          .subscribe(
-            (res) => {
-              if (!res) {
-                this.vLoader = false;
-                this.showRiskWidgets =
-                  this.isManageRisk &&
-                  this.showRiskCategory &&
-                  (this.dashboardForm.selectedRiskCategories.length > 0 ||
-                    this.dashboardForm.selectedResponsibilityCenters.length > 0)
-                    ? true
-                    : false;
-                this.showComplianceWidgets =
-                  this.dashboardForm.selectedResponsibilityCategories.length >
-                    0 ||
-                  this.dashboardForm.selectedResponsibilityCenters.length > 0
-                    ? true
-                    : false;
-                this.openConfigureWidgets = true;
-              } else {
-                this.vLoader = false;
-                this.snackBar.show(
-                  'A dashboard with this name already exists. Specify a different name for the dashboard.',
-                  'alert'
-                );
-                return;
-              }
-            },
-            (error) => {
-              this.vLoader = false;
-              console.error(error);
-            }
-          );
-      }
-    }
-  }
-
-  /**
-   * Fetches organization users count api to get total number of pages
-   * @param Url contains prams
-   */
-  getOrganizationUsersCount(Url: any) {
-    this.createDashboardService
-      .getOrganizationUsersCount(Url)
-      .subscribe((res) => {
-        this.totalList = res.total_members;
-        if (res.total_members && res.limit_per_page > 1) {
-          this.totalPages = res.create_page;
-        } else {
-          this.totalPages = 1;
-        }
-      });
-  }
-
-  /**
-   * Get users list by making api call and pre selects all admins by adding to viewers
-   * @param url contains query params for organization users api
-   */
-  getUsersList(url: any) {
-    this.createDashboardService.getAllUsers().subscribe((res: any) => {
-      this.usersList = res;
-      this.userListLoaded = true;
-
-      if (this.mode === 'EDIT') {
-        this.vLoader = true;
-      } else {
-        this.dashboardForm.selectedViewers = this.setList(
-          this.usersList,
-          [this.createdBy],
-          'member_id'
-        );
-        this.listDetails.selectedUsersList = this.dashboardForm.selectedViewers;
-        this.vLoader = false;
-      }
-    });
-  }
-
-  getGroupList() {
-    this.createDashboardService.getAllGroups().subscribe((res: any) => {
-      this.totalgroups = res.total_items;
-      this.groupList = res.data;
-      this.userListLoaded = true;
-      if (this.mode === 'EDIT') {
-        this.vLoader = true;
-      } else {
-        this.dashboardForm.selectedGroup = this.setList(
-          this.groupList,
-          [this.createdBy],
-          'group_id'
-        );
-        this.listDetails.selectedGroupList = this.dashboardForm.selectedGroup;
-        this.vLoader = false;
-      }
-    });
-  }
-
-  getComplianceCategoryList() {
-    this.createDashboardService
-      .getComplianceCategoriesListFromGlobal()
-      .subscribe(
-        (res: any) => {
-          const data = res;
-          this.allComplianceCategories = Object.assign(res);
-          // cloneDeep(res);
-          data.forEach((element: any) => {
-            if (element && element.compliance_type == 0) {
-              this.responsibilityCategoriesTree.others.list.push(element);
-            }
-            if (element && element.compliance_type == 1) {
-              this.responsibilityCategoriesTree.regulations.list.push(element);
-            }
-            if (element && element.compliance_type == 2) {
-              this.responsibilityCategoriesTree.standards.list.push(element);
-            }
-            if (element && element.compliance_type == 3) {
-              this.responsibilityCategoriesTree.internalControls.list.push(
-                element
-              );
-            }
-          });
-          this.complianceCategoriesListLoaded = true;
-        },
-        (err: any) => {
-          console.error(err);
-          this.complianceCategoriesListLoaded = true;
-        }
-      );
-  }
-
-  getCategoryList() {
-    this.createDashboardService.getCategoryList().subscribe(
-      (res: any) => {
-        this.riskCategoryList.strategic.list = res.strategic_arr;
-        this.riskCategoryList.operational.list = res.operational_arr;
-        this.riskCategoryList.compliance.list = res.compliance_arr;
-        this.riskCategoryList.others.list = res.others_arr;
-        this.riskCategoryListLoaded = true;
-        this.allRiskCategories = [
-          ...new Set(
-            this.allRiskCategories.concat(
-              res.strategic_arr,
-              res.operational_arr,
-              res.compliance_arr,
-              res.others_arr
-            )
-          ),
-        ];
-      },
-      (err) => {
-        console.error(err);
-        this.riskCategoryListLoaded = true;
-      }
-    );
-  }
-
-  /**
-   * It is to ensure whether all required lists on Policy from is loaded from the api call or not
-   */
-  checkWhetherAllListsLoaded() {
-    if (
-      this.rcListLoaded &&
-      this.complianceCategoriesListLoaded &&
-      this.riskCategoryListLoaded &&
-      this.userListLoaded
-    ) {
-      if (this.mode === 'EDIT') {
-        this.editDashboard();
-      } else {
-        this.vLoader = false;
-      }
-    } else {
-      setTimeout(() => {
-        this.checkWhetherAllListsLoaded();
-      }, 300);
-    }
-  }
-
-  setSelectedWidgets(data: any) {
-    if (this.mode === 'CREATE') {
-      const widgetsArray: any = [];
-      data.forEach((element: any) => {
-        let obj: any = {};
-        obj.module_name = element.module;
-        obj._id = '';
-        obj.widget_name = element.title;
-        obj.widget_code = element.id;
-        obj.sub_widgets = [];
-        obj.state = 'ACTIVE';
-        if (element.subWidgets.length > 0) {
-          element.subWidgets.forEach((subWidget: any) => {
-            let subWidgetObject: any = {};
-            subWidgetObject._id = '';
-            subWidgetObject.widget_name = subWidget.title;
-            subWidgetObject.widget_code = subWidget.id;
-            subWidgetObject.state = subWidget.value ? 'ACTIVE' : 'INACTIVE';
-            obj.sub_widgets.push(Object.assign(subWidgetObject));
-          });
-        }
-        widgetsArray.push(obj);
-      });
-
-      this.dashboardForm.configureWidget = widgetsArray;
-    } else if (this.mode === 'EDIT') {
-      const widgetsArray: any = [];
-
-      data.forEach((element: any) => {
-        if (
-          !JSON.stringify(this.dashboardForm.configureWidget).includes(
-            element.id
-          )
-        ) {
-          let obj: any = {};
-          obj.module_name = element.module;
-          obj._id = '';
-          obj.widget_name = element.title;
-          obj.widget_code = element.id;
-          obj.sub_widgets = [];
-          obj.state = 'ACTIVE';
-          if (element.subWidgets.length > 0) {
-            element.subWidgets.forEach((subWidget: any) => {
-              let subWidgetObject: any = {};
-              subWidgetObject._id = '';
-              subWidgetObject.widget_name = subWidget.title;
-              subWidgetObject.widget_code = subWidget.id;
-              subWidgetObject.state = subWidget.value ? 'ACTIVE' : 'INACTIVE';
-              obj.sub_widgets.push(subWidgetObject);
-            });
-          }
-          this.dashboardForm.configureWidget.push(obj);
-        } else {
-          const index = this.selectedWidgets.findIndex(
-            (ele: any) => ele.widget_code == element.id
-          );
-          if (index != -1) {
-            this.selectedWidgets[index].state = 'ACTIVE';
-            if (this.selectedWidgets[index].sub_widgets.length > 0) {
-              this.selectedWidgets[index].sub_widgets.forEach(
-                (subWidgetData: any) => {
-                  const elementIndex = element.subWidgets.findIndex(
-                    (ele: any) => ele.id == subWidgetData.widget_code
-                  );
-                  if (elementIndex != -1) {
-                    subWidgetData.state = element.subWidgets[elementIndex].value
-                      ? 'ACTIVE'
-                      : 'INACTIVE';
-                  }
-                }
-              );
-            }
-          }
-        }
-      });
-      this.dashboardForm.configureWidget.forEach((savedWidget: any) => {
-        const index = data.findIndex(
-          (dataElement: any) => dataElement.id == savedWidget.widget_code
-        );
-        if (index == -1) {
-          savedWidget.state = 'INACTIVE';
-          if (savedWidget.sub_widgets.length > 0) {
-            savedWidget.sub_widgets.forEach((saveSubWidget: any) => {
-              saveSubWidget.state = 'INACTIVE';
-            });
-          }
-        }
-      });
-    }
-    this.selectedWidgets = data;
-    this.openConfigureWidgets = false;
-    this.submitDashboard();
-  }
-
-  closeConfigureWidgets(event: boolean) {
-    this.openConfigureWidgets = event;
-  }
-
-  /**
-   * Filter list user's list based on pagination by making api call
-   * @param event specifies a boolean value to call api
-   */
-  paginationFilter(event: any) {
-    if (event) {
-      this.getUsersList({
-        p:
-          this.paginationService.currentPage === 1
-            ? ''
-            : this.paginationService.currentPage,
-        type: 'all_except_executive',
-        q: !this.paginationService.searchValue
-          ? ''
-          : this.paginationService.searchValue,
-      });
-    }
-  }
-
-  getRCList() {
-    this.createDashboardService.getResponsibilityCenterList().subscribe(
-      (res: any) => {
-        this.responsibilityCentersList = res;
-        this.rcListLoaded = true;
-      },
-      (err: any) => {
-        console.error(err);
-        this.rcListLoaded = true;
-      }
-    );
-  }
-  /**
-   * #### Description
-   *
-   * Returns the unique array of object based on unique key
-   * @param array
-   * @param key
-   * @returns
-   */
-  uniqueByProp(array: any, key: string) {
-    return Array.from(
-      array
-        .reduce(
-          (acc: any, item: any) => (
-            item && item[key] && acc.set(item[key], item), acc
-          ),
-          new Map()
-        )
-        .values()
-    );
-  }
-
-  saveSelectedList(type: string, selectedItems: any) {
-    switch (type) {
-      case 'rc':
-        this.dashboardForm.selectedResponsibilityCenters = this.setList(
-          this.responsibilityCentersList,
-          selectedItems,
-          'item_id'
-        );
-        if (this.dashboardForm.selectedResponsibilityCenters.length == 0) {
-          if (this.dashboardForm.selectedResponsibilityCategories.length == 0) {
-            this.selectedWidgets = this.selectedWidgets.filter(
-              (element: any) => element.module_name != 'COMPLIANCE'
-            );
-          } else if (this.dashboardForm.selectedRiskCategories.length == 0) {
-            this.selectedWidgets = this.selectedWidgets.filter(
-              (element: any) => element.module_name != 'RISK'
-            );
-          }
-        }
-        break;
-      case 'whoCanView':
-        this.dashboardForm.selectedViewers = this.uniqueByProp(
-          selectedItems?.users,
-          'member_id'
-        );
-        this.listDetails.selectedUsersList = this.dashboardForm.selectedViewers;
-        this.dashboardForm.selectedGroup = this.uniqueByProp(
-          selectedItems?.groups,
-          'group_id'
-        );
-        this.listDetails.selectedGroupList = this.dashboardForm.selectedGroup;
-        break;
-      case 'responsibilityCategories':
-        this.dashboardForm.selectedResponsibilityCategories = selectedItems;
-        if (this.dashboardForm.selectedResponsibilityCenters.length == 0) {
-          if (this.dashboardForm.selectedResponsibilityCategories.length == 0) {
-            this.selectedWidgets = this.selectedWidgets.filter(
-              (element: any) => element.module_name != 'COMPLIANCE'
-            );
-          } else if (this.dashboardForm.selectedRiskCategories.length == 0) {
-            this.selectedWidgets = this.selectedWidgets.filter(
-              (element: any) => element.module_name != 'RISK'
-            );
-          }
-        }
-        break;
-      case 'riskCategory':
-        this.dashboardForm.selectedRiskCategories = selectedItems;
-        if (this.dashboardForm.selectedResponsibilityCenters.length == 0) {
-          if (this.dashboardForm.selectedResponsibilityCategories.length == 0) {
-            this.selectedWidgets = this.selectedWidgets.filter(
-              (element: any) => element.module_name != 'COMPLIANCE'
-            );
-          } else if (this.dashboardForm.selectedRiskCategories.length == 0) {
-            this.selectedWidgets = this.selectedWidgets.filter(
-              (element: any) => element.module_name != 'RISK'
-            );
-          }
-        }
-        break;
-    }
-    this.activateSelector('', false);
-  }
-
-  remove(type: any, event: any, removeIndex?: any) {
-    switch (type) {
-      case 'rc':
-        const rcIndex =
-          this.dashboardForm.selectedResponsibilityCenters.findIndex(
-            (rc: any) => rc.rc_id == event.rc_id
-          );
-        if (rcIndex !== -1) {
-          const parentRc: any =
-            this.dashboardForm.selectedResponsibilityCenters[rcIndex];
-          this.dashboardForm.selectedResponsibilityCenters.splice(rcIndex, 1);
-
-          if (parentRc?.item_child_ids?.length > 0) {
-            parentRc.item_child_ids.forEach((childElement: any) => {
-              const removeIndex =
-                this.dashboardForm.selectedResponsibilityCenters.findIndex(
-                  (removeElement: any) => removeElement.rc_id == childElement
-                );
-              this.dashboardForm.selectedResponsibilityCenters.splice(
-                removeIndex,
-                1
-              );
-            });
-          }
-        }
-        if (this.dashboardForm.selectedResponsibilityCenters.length == 0) {
-          if (this.dashboardForm.selectedResponsibilityCategories.length == 0) {
-            this.selectedWidgets = this.selectedWidgets.filter(
-              (element: any) => element.module_name != 'COMPLIANCE'
-            );
-          } else if (this.dashboardForm.selectedRiskCategories.length == 0) {
-            this.selectedWidgets = this.selectedWidgets.filter(
-              (element: any) => element.module_name != 'RISK'
-            );
-          }
-        }
-        break;
-
-      case 'whoCanView':
-        const reviewerIndex = this.dashboardForm.selectedViewers.findIndex(
-          (viewer: any) => viewer.member_id == event.member_id
-        );
-        this.dashboardForm.selectedViewers.splice(reviewerIndex, 1);
-        break;
-      case 'whoCanViewGroup':
-        const groups = this.dashboardForm.selectedGroup.findIndex(
-          (ele: any) => ele?.group_id == event?.group_id
-        );
-        this.dashboardForm.selectedGroup.splice(groups, 1);
-        break;
-      case 'responsibilityCategories':
-        const CCcategoryIndex =
-          this.dashboardForm.selectedResponsibilityCategories.findIndex(
-            (CCcategory: any) => CCcategory.category_id == event.category_id
-          );
-        this.dashboardForm.selectedResponsibilityCategories.splice(
-          CCcategoryIndex,
-          1
-        );
-        if (this.dashboardForm.selectedResponsibilityCenters.length == 0) {
-          if (this.dashboardForm.selectedResponsibilityCategories.length == 0) {
-            this.selectedWidgets = this.selectedWidgets.filter(
-              (element: any) => element.module_name != 'COMPLIANCE'
-            );
-          } else if (this.dashboardForm.selectedRiskCategories.length == 0) {
-            this.selectedWidgets = this.selectedWidgets.filter(
-              (element: any) => element.module_name != 'RISK'
-            );
-          }
-        }
-        break;
-
-      case 'riskCategory':
-        const riskCategoryIndex =
-          this.dashboardForm.selectedRiskCategories.findIndex(
-            (riskCategory: any) => riskCategory.category_id == event.category_id
-          );
-        if (riskCategoryIndex !== -1) {
-          const parent: any =
-            this.dashboardForm.selectedRiskCategories[riskCategoryIndex];
-          this.dashboardForm.selectedRiskCategories.splice(
-            riskCategoryIndex,
-            1
-          );
-          if (parent?.child_cat_ids?.length > 0) {
-            parent.child_cat_ids.forEach((childElement: any) => {
-              const removeIndex =
-                this.dashboardForm.selectedRiskCategories.findIndex(
-                  (removeElement: any) =>
-                    removeElement.category_id == childElement
-                );
-              this.dashboardForm.selectedRiskCategories.splice(removeIndex, 1);
-            });
-          }
-        }
-        this.dashboardForm.selectedRiskCategories.splice(riskCategoryIndex, 1);
-        if (this.dashboardForm.selectedResponsibilityCenters.length == 0) {
-          if (this.dashboardForm.selectedResponsibilityCategories.length == 0) {
-            this.selectedWidgets = this.selectedWidgets.filter(
-              (element: any) => element.module_name != 'COMPLIANCE'
-            );
-          } else if (this.dashboardForm.selectedRiskCategories.length == 0) {
-            this.selectedWidgets = this.selectedWidgets.filter(
-              (element: any) => element.module_name != 'RISK'
-            );
-          }
-        }
-        break;
-    }
-  }
-
-  setList(list: any[], ids: any[], key: string) {
-    const data: any = [];
-
-    ids.forEach((element: any) => {
-      const index = list.findIndex(
-        (listElement: any) => listElement[key] == element
-      );
-      if (index !== -1) {
-        data.push(list[index]);
-      }
-    });
-    return data;
-  }
-  submitted = false;
-
-  /**
-   * Returns id's from a particular list elements
-   * @param list actual selected list
-   * @param key contains key to extract id from the list
-   */
-  returnIds(list: any[], key: string) {
-    return list?.map((ele) => {
-      if (ele[key]) {
-        return ele[key];
-      }
-    });
-  }
-
-  /**
-   * Validates the data submitted on create dashboard form
-   */
-  validateDashboard() {
-    setTimeout(() => {
-      this.submitted = true;
-    }, 100);
-    const event = this.dashboardForm.dashboardName;
-    const re = /&nbsp;|<br>/g;
-    this.dashboardForm.dashboardName = event.replace(re, '').trim();
-    const description = this.dashboardForm.dashboardDescriptionText;
-    this.dashboardForm.dashboardDescriptionText = description
-      .replace(re, '')
-      .trim();
-    if (
-      !this.dashboardForm.dashboardName ||
-      this.dashboardForm.dashboardName.trim() == '' ||
-      this.dashboardForm.dashboardName.length > 30 ||
-      this.textCount.transform(this.dashboardForm?.dashboardDescriptionText) >
-        250 ||
-      (this.dashboardForm?.selectedFromDate &&
-        !this.dashboardForm?.selectedToDate) ||
-      (this.dashboardForm.selectedResponsibilityCenters.length == 0 &&
-        this.dashboardForm.selectedResponsibilityCategories.length == 0 &&
-        this.dashboardForm.selectedRiskCategories.length == 0)
-    ) {
-      return false;
-    } else {
-      return true;
-    }
-  }
-
-  /**
-   * Makes an api call to create a policy
-   * @param dashboard contains dashboardForm data
-   */
-  submitDashboard() {
-    this.submitted = false;
-    const valid = this.validateDashboard();
-    if (!valid) {
-      return false;
-    }
-    this.vLoader = true;
-    const dashboard = this.dashboardForm;
-    const payload: any = {
-      dashboard_name: dashboard.dashboardName,
-      description: [
-        {
-          content: dashboard.dashboardDescriptionText,
-          attachments: [],
-        },
-      ],
-      visible_to_users: this.returnIds(dashboard.selectedViewers, 'member_id'),
-      visible_to_groups: this.returnIds(dashboard.selectedGroup, 'group_id'),
-      responsibility_center: this.returnIds(
-        dashboard.selectedResponsibilityCenters,
-        'item_id'
-      ),
-      responsibility_category: this.returnIds(
-        dashboard.selectedResponsibilityCategories,
-        'category_id'
-      ),
-      risk_category: this.returnIds(
-        dashboard.selectedRiskCategories,
-        'category_id'
-      ),
-      display_criteria:
-        dashboard.displayCriteria === 'and'
-          ? 'BOTH_RC_AND_CATEGORY'
-          : 'RC_OR_CATEGORY',
-      timeframe: {
-        start_date: dashboard.selectedFromDate
-          ? this.getDateFormate(dashboard?.selectedFromDate)
-          : '',
-        end_date: dashboard.selectedToDate
-          ? this.getDateFormate(dashboard?.selectedToDate)
-          : '',
-      },
-      email_summary: this.setFrequency('', 'export'), //setFormat
-      widget_details: dashboard.configureWidget,
-    };
-    if (this.mode == 'CREATE') {
-      this.createDashboardService.submitDashboard(payload).subscribe(
-        (res: any) => {
-          this.vLoader = false;
-          // this.snackBar.show('The dashboard has been created.','info');
-          this.isSmiley = true;
-          this.smileyMessage = 'The dashboard has been created.';
-          setTimeout(() => {
-            this.isSmiley = false;
-            this.close.emit({ mode: 'created', id: res._id });
-          }, 3000);
-        },
-        (err) => {
-          if (err.status === 409) {
-            this.snackBar.show(
-              'A dashboard with this name already exists. Specify a different name for the dashboard.',
-              'alert'
-            );
-            this.vLoader = false;
-          } else {
-            console.error(err);
-            this.vLoader = false;
-            this.snackBar.show(
-              'OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?',
-              'alert'
-            );
-          }
-        }
-      );
-    }
-    if (this.mode === 'EDIT') {
-      payload.widget_update_flag = true;
-      this.createDashboardService
-        .updateDashboard(this.dashboardId, payload)
-        .subscribe({
-          next: (res: any) => {
-            this.vLoader = false;
-            // this.snackBar.show('The dashboard has been updated','info');
-            this.isSmiley = true;
-            this.smileyMessage = 'The dashboard has been updated';
-            setTimeout(() => {
-              this.isSmiley = false;
-              this.close.emit({ mode: 'updated' });
-            }, 3000);
-          },
-          error: (error: any) => {
-            console.error(error);
-            this.vLoader = false;
-            this.snackBar.show(
-              'OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?',
-              'alert'
-            );
-          },
-        });
-    }
-  }
-
-  editDashboard() {
-    if (this.dashboardId) {
-      this.createDashboardService.fetchDashboard(this.dashboardId).subscribe(
-        (res: any) => {
-          const data = res;
-          this.listDetails.nonRemovableUsersList = [res.created_by];
-          data.visible_to_groups =
-            data?.visible_to_groups && data.visible_to_groups.length
-              ? data.visible_to_groups
-              : [];
-          this.populateDashboardForm(data);
-        },
-        (error) => {
-          console.error(error);
-        }
-      );
-    }
-  }
-
-  populateDashboardForm(data: any) {
-    try {
-      (this.dashboardForm.dashboardName = data?.dashboard_name),
-        (this.dashboardForm.dashboardDescriptionText =
-          data?.description[0]?.content ?? ''),
-        (this.dashboardForm.selectedViewers = this.setList(
-          this.usersList,
-          data?.visible_to_users,
-          'member_id'
-        ));
-      this.listDetails.selectedUsersList = this.dashboardForm.selectedViewers;
-      data.visible_to_groups =
-        data?.visible_to_groups && data?.visible_to_groups.length
-          ? data?.visible_to_groups
-          : [];
-      this.dashboardForm.selectedGroup = this.setList(
-        this.groupList,
-        data?.visible_to_groups ?? [],
-        'group_id'
-      );
-      this.listDetails.selectedGroupList = this.dashboardForm.selectedGroup;
-      this.dashboardForm.selectedResponsibilityCenters = this.setList(
-        this.responsibilityCentersList,
-        data?.responsibility_center,
-        'item_id'
-      );
-      this.dashboardForm.selectedResponsibilityCategories = this.setList(
-        this.allComplianceCategories,
-        data?.responsibility_category,
-        'category_id'
-      );
-      this.dashboardForm.selectedRiskCategories = this.setList(
-        this.allRiskCategories,
-        data?.risk_category,
-        'category_id'
-      );
-      this.dashboardForm.displayCriteria =
-        data?.display_criteria === 'BOTH_RC_AND_CATEGORY' ? 'and' : 'or';
-      this.dashboardForm.selectedFromDate = data?.timeframe?.start_date
-        ? new Date(data?.timeframe?.start_date)
-        : undefined;
-      this.dashboardForm.selectedToDate = data?.timeframe?.end_date
-        ? new Date(data?.timeframe?.end_date)
-        : undefined;
-      this.vLoader = false;
-      this.dashboardForm.configureWidget = data.widget_details;
-      this.selectedWidgets =
-        data.widget_details.length > 0 ? [...new Set(data.widget_details)] : [];
-      this.displayedWidgets =
-        data.all_widgets.length > 0 ? [...new Set(data.all_widgets)] : [];
-      this.setFrequency(data?.email_summary, 'import');
-      let minToDate = this.setToDate(data?.timeframe?.start_date);
-      this.toDatePickerConfig = { min: minToDate };
-      this.hideToDate = true;
-      setTimeout(() => {
-        this.hideToDate = false;
-      }, 20);
-    } catch (error) {
-      console.error('populate dashboard error =>', error);
-    }
-  }
-
-  setFrequency(event: any, mode: any) {
-    if (mode === 'export') {
-      switch (this.dashboardForm.selectedFrequencyType) {
-        case 'weekly':
-          const weeklyValueData = this.dashboardForm?.selectedFrequencies?.map(
-            (ele: any) => Number(ele) + 1
-          );
-          const weeklyValue = weeklyValueData?.join();
-          return '2~' + weeklyValue + '~0~0';
-        case 'monthly':
-          const monthlyValueData = this.dashboardForm?.selectedFrequencies?.map(
-            (ele: any) => Number(ele) + 1
-          );
-          const monthlyValue = monthlyValueData?.join();
-          return (
-            '3~' + this.dashboardForm?.frequencyDate + '~' + monthlyValue + '~0'
-          );
-        case 'quarterly':
-          const quarterlyValueData =
-            Number(this.dashboardForm.selectedFrequencies) + 1;
-          return (
-            '7~' +
-            this.dashboardForm.frequencyDate +
-            '~' +
-            quarterlyValueData +
-            '~0'
-          );
-      }
-    }
-    if (mode === 'import') {
-      const val = event.split('~');
-      switch (val[0]) {
-        case '2':
-          {
-            let stringVal = 'Every ';
-            this.dashboardForm.selectedFrequencyType = 'weekly';
-            this.dashboardForm.selectedFrequencies = val[1]
-              ?.split(',')
-              ?.map((element: any) => Number(element) - 1);
-            this.dashboardForm.selectedFrequencies?.forEach(
-              (dayIndex: any, index: any) => {
-                stringVal +=
-                  index === 0
-                    ? this.dayNames[dayIndex]
-                    : ', ' + this.dayNames[dayIndex];
-              }
-            );
-            this.dashboardForm.frequencyMessage = stringVal;
-          }
-
-          break;
-        case '3':
-          {
-            let stringVal = 'every ';
-            this.dashboardForm.selectedFrequencyType = 'monthly';
-            this.dashboardForm.frequencyDate = val[1];
-            this.dashboardForm.selectedFrequencies = val[2]
-              ?.split(',')
-              ?.map((element: any) => Number(element) - 1);
-            this.dashboardForm.selectedFrequencies.forEach(
-              (monthIndex: any, index: any) => {
-                stringVal +=
-                  index === 0
-                    ? this.monthNames[monthIndex]
-                    : ', ' + this.monthNames[monthIndex];
-              }
-            );
-            let monthDateName;
-            if (this.dashboardForm.frequencyDate == '1') {
-              monthDateName = '1st';
-            } else if (this.dashboardForm.frequencyDate == '2') {
-              monthDateName = '2nd';
-            } else if (this.dashboardForm.frequencyDate == '3') {
-              monthDateName = '3rd';
-            } else {
-              monthDateName = this.dashboardForm.frequencyDate + 'th';
-            }
-            this.dashboardForm.frequencyMessage =
-              monthDateName + ' of ' + stringVal;
-          }
-          break;
-        case '7':
-          {
-            let stringVal = 'every ';
-            this.dashboardForm.selectedFrequencyType = 'quarterly';
-            this.dashboardForm.frequencyDate = val[1];
-            this.dashboardForm.selectedFrequencies =
-              Number(val[2].split(',')[0]) - 1;
-            stringVal += this.quarters[this.dashboardForm.selectedFrequencies];
-            let monthDateName;
-            if (this.dashboardForm.frequencyDate == '1') {
-              monthDateName = '1st';
-            } else if (this.dashboardForm.frequencyDate == '2') {
-              monthDateName = '2nd';
-            } else if (this.dashboardForm.frequencyDate == '3') {
-              monthDateName = '3rd';
-            } else {
-              monthDateName = this.dashboardForm.frequencyDate + 'th';
-            }
-            this.dashboardForm.frequencyMessage =
-              monthDateName + ' of ' + stringVal;
-          }
-          break;
-      }
-    }
-  }
-
-  ngAfterViewChecked() {
-    //your code to update the model
-    this.cdr.detectChanges();
-  }
-
-  setPermission(roleActions: any) {
-    let ifExistRisk = roleActions?.find((el: any) => el.moduleName == 'risk');
-    ifExistRisk?.subModule?.forEach((module: any) => {
-      module?.permissions?.forEach((permission: any) => {
-        switch (permission?.code) {
-          case 'RRMR': {
-            if (permission?.defaultPermission == 1 || permission?.enable == 1) {
-              this.isManageRisk = true;
-            }
-            break;
-          }
-        }
-      });
-    });
-  }
-  @HostListener('document:click', ['$event'])
-  documentClick(event: any): void {
-    const targetElement = event?.target as Element;
-    const fromDateInputElement =
-      document.getElementById(this.openedDatePicker.toLowerCase()) || null;
-    const datePickerCalendarContainer = document.getElementsByClassName(
-      'dp-day-calendar-container'
-    )[0];
-    const monthYearElement = document.querySelector(
-      '.dp-month-calendar-container'
-    );
-    const isNotMonthYearElement = !monthYearElement?.contains(targetElement);
-
-    const openedElement =
-      this.openedDatePicker === 'FROM_DATE'
-        ? this.fromDatePickerPopup
-        : this.toDatePickerPopup;
-    const isOutsideFromDateInput =
-      !openedElement?.nativeElement?.contains(targetElement);
-    const isNotFromDateElement = event?.target !== fromDateInputElement;
-    const isNotInsideCalendar =
-      !datePickerCalendarContainer?.contains(targetElement);
-    const selectedDatePicker =
-      this.openedDatePicker === 'FROM_DATE'
-        ? this.fromDatePicker
-        : this.toDatePicker;
-
-    const isNotCalendarMonth =
-      !targetElement.className.includes('dp-calendar-month');
-
-    if (
-      isOutsideFromDateInput &&
-      isNotFromDateElement &&
-      isNotInsideCalendar &&
-      isNotCalendarMonth &&
-      isNotMonthYearElement &&
-      datePickerCalendarContainer
-    ) {
-      this.documentClickListener(
-        event.target,
-        openedElement,
-        selectedDatePicker
-      );
-    }
-  }
-
-  documentClickListener(
-    target: any,
-    openedElements: ElementRef,
-    selectedDatePicker: any
-  ): void {
-    if (
-      !openedElements?.nativeElement?.contains(target) &&
-      selectedDatePicker?.areCalendarsShown
-    ) {
-      selectedDatePicker?.api?.close();
-      this.datePickerOverlay = false;
-    }
-  }
-}