vc-create-dashboard 3.0.82 → 3.0.84

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

@@ -0,0 +1,220 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { DashboardFooterConfig } from '../../ui-kit/dashboard-footer/dashboard-footer-config';
+import { CategoriesConfig } from './categories-config';
+import { ASSETS } from '../constants/assets.constant';
+
+@Component({
+  selector: 'app-categories',
+  templateUrl: './categories.component.html',
+  styleUrls: ['./categories.component.less'],
+})
+export class CategoriesComponent implements OnInit {
+  ASSETS = ASSETS;
+
+  @Input() categoryList: CategoriesConfig = {
+    regulations: {
+      list: [],
+      selectedList: [],
+    },
+    standards: {
+      list: [],
+      selectedList: [],
+    },
+    internalControls: {
+      list: [],
+      selectedList: [],
+    },
+    others: {
+      list: [],
+      selectedList: [],
+    },
+  };
+  @Input() allCategories: any[] = [];
+
+  @Input() categoryIdKey: any;
+  @Input() selectedCategories: any[] = [];
+
+  search = '';
+  activeTab: 'standards' | 'regulations' | 'internalControls' | 'others' =
+    'regulations';
+  selectedIds: any[] = [];
+  animation = false;
+  blockWidth: any;
+  footerDetails: DashboardFooterConfig = {
+    selectedData: [],
+    nonRemovableList: [],
+    displayElementKey: 'item_name',
+    elementId: 'item_id',
+    singularText: 'Program selected',
+    pluralText: 'Programs selected',
+    showFrequency: false,
+    frequencyText: '',
+    isDisabled: false,
+  };
+
+  @Output() saveSelectedCategory = new EventEmitter();
+  @Output() closeList = new EventEmitter();
+  @Output() closeCategoriesList = new EventEmitter();
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.animation = true;
+    setTimeout(() => {
+      this.animation = false;
+    }, 300);
+    this.selectedIds = [];
+    if (this.selectedCategories) {
+      this.selectedCategories.forEach((element) => {
+        this.selectedIds.push(element[this.categoryIdKey]);
+      });
+    }
+    this.setList();
+  }
+
+  selectCategory(mode: any, activeTab: any, category: any) {
+    if (mode) {
+      this.selectedIds.push(category[this.categoryIdKey]);
+      const rcElement = this.allCategories.findIndex(
+        (ele: any) => ele.category_id == category[this.categoryIdKey]
+      );
+      if (rcElement !== -1) {
+        const parentRc: any = this.allCategories[rcElement];
+        if (parentRc?.child_cat_ids?.length > 0) {
+          parentRc.child_cat_ids.forEach((childElement: any) => {
+            if (!this.selectedIds.includes(childElement)) {
+              this.selectedIds.push(childElement);
+            }
+          });
+        }
+      }
+    } else {
+      const index = this.selectedIds.findIndex(
+        (element: any) => element == category[this.categoryIdKey]
+      );
+      this.selectedIds.splice(index, 1);
+      const rcElement = this.allCategories.findIndex(
+        (ele: any) => ele.category_id == category[this.categoryIdKey]
+      );
+      if (rcElement !== -1) {
+        const parentRc: any = this.allCategories[rcElement];
+        if (parentRc?.child_cat_ids?.length > 0) {
+          parentRc.child_cat_ids.forEach((childElement: any) => {
+            const removeIndex = this.selectedIds.findIndex(
+              (removeElement: any) => removeElement == childElement
+            );
+            this.selectedIds.splice(removeIndex, 1);
+          });
+        }
+      }
+    }
+    this.setList();
+  }
+
+  deleteEvent(event: any) {
+    const index = this.selectedIds.findIndex(
+      (element: any) => element == event[this.categoryIdKey]
+    );
+    this.selectedIds.splice(index, 1);
+    this.setList();
+  }
+
+  selectAll(
+    mode: any,
+    activeTab: 'standards' | 'regulations' | 'internalControls' | 'others'
+  ) {
+    if (mode) {
+      const list = [...this.categoryList[activeTab].list];
+      list.forEach((element) => {
+        if (!this.selectedIds.includes(element[this.categoryIdKey])) {
+          this.selectedIds.push(element[this.categoryIdKey]);
+        }
+      });
+    } else {
+      const list = [...this.categoryList[activeTab].list];
+      list.forEach((element) => {
+        if (this.selectedIds.includes(element[this.categoryIdKey])) {
+          let idIndex = this.selectedIds.findIndex(
+            (id: any) => id == element[this.categoryIdKey]
+          );
+          this.selectedIds.splice(idIndex, 1);
+        }
+      });
+    }
+    this.setList();
+  }
+
+  setList() {
+    const data: any = [];
+    const categoryList = [...new Set(this.allCategories)];
+    // cloneDeep(this.allCategories)
+    const selectedIds = [...new Set(this.selectedIds)];
+    //  cloneDeep(this.selectedIds);
+    this.categoryList.regulations.selectedList = [];
+    this.categoryList.standards.selectedList = [];
+    this.categoryList.internalControls.selectedList = [];
+    this.categoryList.others.selectedList = [];
+
+    categoryList.forEach((element: any) => {
+      if (selectedIds.includes(element[this.categoryIdKey])) {
+        data.push(element);
+      }
+    });
+    this.selectedCategories = data;
+    this.footerDetails.selectedData = data;
+
+    this.categoryList.regulations.list.forEach((category: any) => {
+      if (selectedIds.includes(category[this.categoryIdKey])) {
+        this.categoryList.regulations.selectedList.push(category);
+      }
+    });
+    this.categoryList.standards.list.forEach((category: any) => {
+      if (selectedIds.includes(category[this.categoryIdKey])) {
+        this.categoryList.standards.selectedList.push(category);
+      }
+    });
+    this.categoryList.internalControls.list.forEach((category: any) => {
+      if (selectedIds.includes(category[this.categoryIdKey])) {
+        this.categoryList.internalControls.selectedList.push(category);
+      }
+    });
+    this.categoryList.others.list.forEach((category: any) => {
+      if (selectedIds.includes(category[this.categoryIdKey])) {
+        this.categoryList.others.selectedList.push(category);
+      }
+    });
+    if (!this.activeTab) {
+      this.setActiveTab();
+    }
+  }
+  setActiveTab() {
+    if (this.categoryList.regulations.selectedList.length > 0) {
+      this.activeTab = 'regulations';
+    } else if (this.categoryList.standards.selectedList.length > 0) {
+      this.activeTab = 'standards';
+    } else if (this.categoryList.internalControls.selectedList.length > 0) {
+      this.activeTab = 'internalControls';
+    } else if (this.categoryList.others.selectedList.length > 0) {
+      this.activeTab = 'others';
+    } else {
+      this.activeTab = 'regulations';
+    }
+  }
+
+  checkSelectAll(
+    activeTab: 'standards' | 'regulations' | 'internalControls' | 'others'
+  ) {
+    const data = this.categoryList[activeTab].list.every((user: any) =>
+      this.selectedIds.includes(user[this.categoryIdKey])
+    );
+    return data;
+  }
+
+  save() {
+    this.saveSelectedCategory.emit(this.selectedCategories);
+  }
+
+  close() {
+    this.closeCategoriesList.emit();
+  }
+}

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

@@ -0,0 +1,141 @@
+<div class="configure-widgets vx-d-block" *ngIf="showWidgets">
+  <div
+    class="configure-widgets-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4"
+  >
+    <div class="configure-widgets-title vx-fs-14 vx-fw-500 vx-label-txt">
+      Configure Widgets
+    </div>
+    <button
+      class="configure-widgets-back vx-fs-14 vx-fw-500 vx-label-txt vx-m-0 vx-p-0 vx-d-inline-flex vx-align-center"
+      (click)="closeConfigureDashboard()"
+    >
+      <i class="icons vx-fs-16">&#xe91d;</i> Back
+    </button>
+  </div>
+  <div class="configure-widgets-body">
+    <div class="configure-widgets-tab">
+      <ul>
+        <li
+          [class.active]="module === 'COMPLIANCE'"
+          *ngIf="showCompliance"
+          (click)="module = 'COMPLIANCE'"
+        >
+          <!-- <button>
+            Compliance<span>{{ complianceWidgetsDisplayCount }}</span>
+          </button> -->
+        </li>
+        <li [class.active]="module === 'RISK'" *ngIf="showRisk">
+          <button (click)="module = 'RISK'">
+            Risks<span>{{ riskWidgetsDisplayCount }}</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+    <div class="configure-widgets-search vx-mb-2">
+      <i class="icons">&#xe90b;</i>
+      <input type="text" placeholder="Search widgets" [(ngModel)]="search" />
+    </div>
+    <div
+      class="configure-widgets-list vx-d-flex vx-flex-wrap"
+      *ngIf="(widgetsList[module] | search : search).length !== 0"
+    >
+      <ng-container
+        *ngFor="let widget of widgetsList[module] | search : search"
+      >
+        <div class="configure-widgets-item" *ngIf="widget?.visibility">
+          <label class="block">
+            <input
+              type="checkbox"
+              [checked]="widget.value"
+              (change)="selectWidget($event.target.checked, module, widget.id)"
+            />
+            <div class="check-icon">
+              <svg
+                class="check"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 52 52"
+              >
+                <circle
+                  class="check-circle"
+                  cx="26"
+                  cy="26"
+                  r="25"
+                  fill="none"
+                />
+                <path
+                  class="check-circle"
+                  fill="none"
+                  d="M14.1 27.2l7.1 7.2 16.7-16.8"
+                />
+              </svg>
+            </div>
+            <div class="configure-widgets-item-head">
+              <h4
+                class="configure-widgets-item-title"
+                [innerHTML]="widget?.title"
+              ></h4>
+              <p
+                class="configure-widgets-item-description"
+                [innerHTML]="widget?.description"
+              ></p>
+              <button
+                *ngIf="!widget.value"
+                class="configure-widgets-item-button add"
+                (click)="selectWidget(true, module, widget.id)"
+              >
+                + ADD
+              </button>
+              <button
+                *ngIf="widget.value"
+                class="configure-widgets-item-button remove"
+                (click)="selectWidget(false, module, widget.id)"
+              >
+                - Remove
+              </button>
+            </div>
+            <div class="configure-widgets-item-body">
+              <div class="image-wrapper">
+                <img
+                  [ngSrc]="widget?.widgetImage"
+                  alt=""
+                  width="790"
+                  height="613"
+                />
+              </div>
+              <div
+                class="floating-option vx-d-flex"
+                *ngIf="widget?.subWidgets?.length > 0"
+              >
+                <ng-container *ngFor="let subWidget of widget.subWidgets">
+                  <app-cs-checkbox
+                    *ngIf="subWidget.visibility"
+                    (ngValueChange)="
+                      selectWidget($event, module, widget.id, subWidget.id)
+                    "
+                    [ngValue]="subWidget.value"
+                    >{{ subWidget.title }}
+                  </app-cs-checkbox>
+                </ng-container>
+              </div>
+            </div>
+          </label>
+        </div>
+      </ng-container>
+
+      <!-- No Data Image -->
+    </div>
+    <app-no-data
+      *ngIf="(widgetsList[module] | search : search).length === 0"
+      [noDataImage]="ASSETS.configure_widget"
+      [noDataText]="'No data to display'"
+    >
+    </app-no-data>
+
+    <floating-bar
+      (submitEvent)="onNextClick()"
+      (cancelEvent)="closeConfigureDashboard()"
+      [selectedData]="selectedWidgets"
+      (deleteEvent)="removeWidget($event)"
+    ></floating-bar>
+  </div>
+</div>