vc-create-dashboard 3.0.6 → 3.0.62

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

@@ -0,0 +1,1333 @@
+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;
+    }
+  }
+}