vc-create-dashboard 2.9.5 → 2.9.7

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

@@ -0,0 +1,205 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { DashboardFooterConfig } from '../../ui-kit/dashboard-footer/dashboard-footer-config';
+import { CategoriesConfig } from './categories-config';
+
+@Component({
+  selector: 'app-categories',
+  templateUrl: './categories.component.html',
+  styleUrls: ['./categories.component.less']
+})
+export class CategoriesComponent implements OnInit {
+
+
+  @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,70 @@
+<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 [src]="widget?.widgetImage" alt="">
+                            </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]="'https://cdn.v-comply.com/libraries/configure-widget/assets/images/configure-widget.svg'"
+            [noDataText]="'No data to display'">
+        </app-no-data>
+
+        <floating-bar (submitEvent)="onNextClick()" (cancelEvent)="closeConfigureDashboard()" [selectedData]="selectedWidgets" (deleteEvent)="removeWidget($event)"></floating-bar>
+    </div>
+</div>

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

@@ -0,0 +1,381 @@
+@import url('https://cdn.v-comply.com/design-system/css/mixin/mixin.css');
+@import url('https://cdn.v-comply.com/design-system/css/icons/icons.css');
+@import url('https://cdn.v-comply.com/design-system/css/color/color.css');
+@import url('https://cdn.v-comply.com/design-system/css/text/text.css');
+@import url('https://cdn.v-comply.com/design-system/css/display/display.css');
+@import url('https://cdn.v-comply.com/design-system/css/alignment/alignment.css');
+@import url('https://cdn.v-comply.com/design-system/css/width/width.css');
+@import url('https://cdn.v-comply.com/design-system/css/margin/margin.css');
+@import url('https://cdn.v-comply.com/design-system/css/margin/margin-top.css');
+@import url('https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css');
+@import url('https://cdn.v-comply.com/design-system/css/margin/margin-left.css');
+@import url('https://cdn.v-comply.com/design-system/css/margin/margin-right.css');
+@import url('https://cdn.v-comply.com/design-system/css/padding/padding.css');
+@import url('https://cdn.v-comply.com/design-system/css/padding/padding-top.css');
+@import url('https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css');
+@import url('https://cdn.v-comply.com/design-system/css/padding/padding-left.css');
+@import url('https://cdn.v-comply.com/design-system/css/padding/padding-right.css');
+
+
+::ng-deep .configure-widgets {
+    width      : calc(100vw - 3rem);
+    height     : 100vh;
+    margin-left: 3rem;
+    background : #fff;
+    
+    @media screen and (max-width:1280px){
+        width      : 100vw;
+        margin-left: 0;
+    }
+
+    &-head {
+        height         : 2.75rem;
+        background     : #FBFBFB;
+        border-bottom  : 1px solid #F1F1F1;
+    }
+
+    &-back {
+        border     : none;
+        outline    : none;
+        background : transparent;
+
+        i {
+            margin-right: 6px;
+        }
+    }
+
+    &-body {
+        padding: 2rem;
+        position: relative;
+        height: calc(100vh - 2.75rem);
+
+        app-no-data {
+            .no-data-wrapper {
+                height: calc(100vh - 13.875rem) !important;
+            }
+        }
+
+        .floating-option {
+            position  : absolute;
+            right     : 0;
+            bottom    : 0;
+            left      : 0;
+            background: #fff;
+            padding   : 16px 12px;
+            z-index   : 3;
+            box-shadow: 0 -6px 12px #1E5DD31A;
+
+            app-cs-checkbox {
+                display: flex;
+
+                label {
+                    span.value {
+                        color      : #161B2F !important;
+                        font-size  : 11px !important;
+                        line-height: 16px !important;
+                        margin-left: 8px !important;
+                        white-space: nowrap;
+                    }
+                }
+
+                &+app-cs-checkbox {
+                    margin-left: 20px;
+                }
+            }
+        }
+    }
+
+    &-tab {
+        ul {
+            padding      : 0;
+            margin       : 0 0 8px;
+            display      : flex;
+            border-bottom: 1px solid #DBDBDB;
+
+            li {
+                list-style: none;
+                display   : flex;
+                width     : auto;
+                padding   : 0;
+
+                button {
+                    color         : #747576;
+                    display       : inline-block;
+                    font-size     : 11px;
+                    line-height   : 16px;
+                    font-weight   : 600;
+                    text-transform: uppercase;
+                    border        : none;
+                    outline       : none;
+                    background    : transparent;
+                    padding       : 0 0 8px;
+                    position      : relative;
+                    margin: 0;
+
+                    span {
+                        display    : inline-block;
+                        margin-left: 8px;
+                        color      : #74757680;
+                    }
+                }
+
+                &+li {
+                    padding-left: 28px;
+                }
+
+                &.active {
+                    button {
+                        color: #1E5DD3;
+
+                        span {
+                            color: #1E5DD3;
+                        }
+
+                        &:after {
+                            content         : "";
+                            right           : 0;
+                            bottom          : 0;
+                            left            : 0;
+                            height          : 2px;
+                            border-radius   : 2px;
+                            position        : absolute;
+                            background-color: #1E5DD3;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &-search {
+        position     : relative;
+        margin-bottom: 24px;
+
+        i {
+            position: absolute;
+            top     : 16px;
+            left    : 16px;
+            color   : #DBDBDB;
+        }
+
+        input {
+            border       : 1px solid #DBDBDB;
+            border-radius: 4px;
+            height       : 44px;
+            padding      : 10px 180px 10px 40px;
+            width        : 100%;
+            font-size    : 14px;
+            color        : #747576;
+            outline      : none;
+
+            &:focus {
+                border-color: #1E5DD3;
+                box-shadow  : 0 0 5px #1e5dd345;
+            }
+        }
+    }
+
+    &-list {
+        margin   : 0 -1rem .5rem;
+        height   : calc(100vh - 15.5rem);
+        overflow : hidden;
+        overflow-y : auto;
+
+        &::-webkit-scrollbar-track {
+            background-color: transparent;
+        }
+    }
+
+    &-item {
+        width        : 50%;
+        padding      : 0 16px;
+        margin-bottom: 32px;
+
+        .block {
+            background   : #F8F8F8;
+            border-radius: 4px;
+            padding-left: 44px;
+            padding-right: 44px;
+            padding-top: 16px;
+            padding-bottom: 4px;
+            cursor       : pointer;
+            position     : relative;
+            display      : block;
+
+            .check-icon {
+                position       : absolute;
+                top            : 8px;
+                left           : 0;
+                height         : 36px;
+                width          : 36px;
+                border-radius  : 0 4px 4px 0;
+                display        : flex;
+                justify-content: center;
+                align-items    : center;
+                background     : #34AA44;
+                opacity        : 0;
+                pointer-events : none;
+
+                .check {
+                    display          : none;
+                    width            : 27px;
+                    height           : 27px;
+                    background       : transparent;
+                    border-radius    : 50%;
+                    stroke-width     : 4;
+                    stroke           : #ffffff;
+                    stroke-miterlimit: 10;
+                    box-shadow       : inset 0px 0px 0px #ffffff;
+                    animation        : fillCheck 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
+                    margin-top       : 0;
+
+                    &-circle {
+                        stroke-dasharray : 166;
+                        stroke-dashoffset: 166;
+                        stroke-width     : 4;
+                        stroke-miterlimit: 10;
+                        stroke           : #ffffff;
+                        fill             : none;
+                        animation        : strokeCheck 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+                    }
+
+                    &-check {
+                        transform-origin : 50% 50%;
+                        stroke-dasharray : 48;
+                        stroke-dashoffset: 48;
+                        animation        : strokeCheck 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
+                    }
+                }
+            }
+
+            input[type=checkbox] {
+                opacity : 0;
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                z-index: 1;
+                cursor: pointer;
+
+                &:checked {
+                    &+.check-icon {
+                        opacity: 1;
+
+                        .check {
+                            display: block;
+                        }
+                    }
+
+                    &~.configure-widgets-item-body .image-wrapper {
+                        opacity: 0.5;
+                    }
+
+                    &~.configure-widgets-item-head {
+                        button.add {
+                            display: none;
+                        }
+
+                        button.remove {
+                            display: flex;
+                        }
+                    }
+                }
+            }
+        }
+
+        &-head {
+            padding : 0 0 16px 0;
+            position: relative;
+        }
+
+        &-title {
+            margin        : 0 0 12px;
+            font-size     : 14px;
+            line-height   : 20px;
+            text-transform: uppercase;
+            color         : #161B2F;
+            max-width     : calc(100% - 72px);
+            font-weight   : 500;
+        }
+
+        &-description {
+            font-size  : 12px;
+            line-height: 20px;
+            color      : #747576;
+            margin     : 0;
+            font-weight: 400;
+            height: 60px;
+        }
+
+        &-button {
+            width          : 72px;
+            height         : 28px;
+            cursor         : pointer;
+            display        : flex;
+            position       : absolute;
+            top            : 0;
+            right          : -24px;
+            font-size      : 11px;
+            font-weight    : 500;
+            border         : none;
+            outline        : none;
+            justify-content: center;
+            align-items    : center;
+            border-radius  : 2px;
+            text-transform: uppercase;
+            padding: 0;
+            margin: 0;
+
+            &.add {
+                color     : #FFFFFF;
+                background: #1E5DD3;
+            }
+
+            &.remove {
+                background: #FFFFFF;
+                border: 1px solid #f1f1f1;
+                color     : #C7381B;
+                display   : none;
+            }
+        }
+
+        &-body {
+            overflow: hidden;
+            height: 220px;
+            border: 1px solid #f1f1f1;
+            border-bottom: none;
+            border-radius: 2px 2px 0 0;
+            box-shadow   : 0 -4px 8px #161b2f10;
+
+            .image-wrapper {
+                box-shadow   : 0px -6px 12px #0000001A;
+                border-radius: 2px;
+                overflow     : hidden;
+                background   : #FFFFFF;
+            }
+
+            img {
+                width: 100%;
+            }
+        }
+    }
+}
+
+@keyframes strokeCheck {
+    100% {
+        stroke-dashoffset: 0;
+    }
+}
+
+@keyframes fillCheck {
+    100% {
+        box-shadow: inset 0px 0px 0px 2px #FFFFFF;
+    }
+}
+
+.disabled{
+    pointer-events: none;
+    opacity: 0.7;
+}