vc-create-dashboard 2.9.5 → 2.9.7

package/src/lib/create-dashboard-container/risk-categories/risk-categories.component.less

@@ -0,0 +1,230 @@
+@import url("https://cdn.v-comply.com/design-system/css/icons/icons.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/text/text.css");
+@import url("https://cdn.v-comply.com/design-system/css/color/color.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 .risk-category-list {
+    background: #FFFFFF;
+    border-right: 1px solid #F1F1F1;
+    position: fixed;
+    top: 0;
+    right: 500px;
+    bottom: 0;
+    left: 0;
+
+    &-head {
+      background: #fbfbfb;
+      height: 2.75rem;
+      border-bottom: 1px solid #f1f1f1;
+    }
+
+    &-card {
+        box-shadow: 0 0 2px #00000029;
+        border-radius  : 2px;
+        height         : 56px;
+        padding        : 12px;
+        width          : 100%;
+        display        : flex;
+        align-items    : center;
+        justify-content: space-between;
+        cursor         : pointer;
+        position: relative;
+
+        .left {
+            display       : flex;
+            flex-wrap     : wrap;
+            pointer-events: none;
+
+            label {
+                color         : #747576;
+                font-size     : 11px;
+                font-weight   : 600;
+                line-height   : 16px;
+                text-transform: uppercase;
+                width         : 100%;
+            }
+
+            p {
+                color      : #161b2f;
+                font-size  : 11px;
+                font-weight: 600;
+                line-height: 16px;
+                margin     : 0;
+            }
+        }
+
+        span.counter {
+            display        : flex;
+            height         : 32px;
+            min-width      : 32px;
+            border-radius  : 2px;
+            background     : #042e7d;
+            color          : #fff;
+            font-size      : 11px;
+            font-weight: 500;
+            line-height    : 32px;
+            justify-content: center;
+            align-items    : center;
+            padding        : 0 4px;
+            pointer-events : none;
+        }
+
+        &.active {
+            box-shadow: 0px 3px 12px #1E5DD326;
+            z-index: 1;
+            pointer-events: none;
+
+            span.counter {
+                background     : #f1f1f1;
+                color          : #042E7D;
+            }
+        }
+
+        &+.risk-category-list-card {
+            margin-left: 4px;
+        }
+    }
+
+    &-mid {
+        height: calc(100vh - 2.75rem);
+        padding: 2rem;
+        position: relative;
+
+        &::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        .select-all {
+            display       : flex;
+            padding-bottom: 1rem;
+
+            app-cs-checkbox {
+                display: flex;
+
+                .checkbox-item {
+                    .value {
+                        max-width: unset !important;
+                        font-size: 12px !important;
+
+                        strong {
+                            font-weight: 600;
+                            color: #161b2f;
+                        }
+                    }
+                }
+            }
+        }
+
+        app-no-data {
+            .no-data-wrapper {
+                height: calc(100vh - 260px);
+            }
+        }
+    }
+
+    &-search {
+        position: relative;
+  
+        input {
+          height       : 2.75rem;
+          line-height  : 1.5rem;
+          padding      : .5rem 1rem .5rem 2.5rem;
+          outline      : none;
+          border       : 1px solid #7475763f;
+          border-radius: .25rem;
+          width        : 100%;
+          font-size    : 14px;
+          color        : #747576;
+  
+          &:focus {
+            border-color: #1e5dd3;
+          }
+        }
+  
+        i {
+          position: absolute;
+          left: 1rem;
+          top: 1rem;
+          pointer-events: none;
+          color: #f1f1f1;
+          font-size: 12px;
+        }
+    }
+
+    &-item {
+        list-style-type: none;
+        display        : block;
+        height     : calc(100vh - 288px);
+        overflow       : hidden;
+        overflow-y: auto;
+
+        &::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        &.with-selectAll {
+            height: calc(100vh - 320px);
+        }
+
+        ul.risk-category-list-item-ul {
+            padding: 0;
+            margin: 0;
+
+            li {
+                list-style: none;
+
+                app-cs-radio,
+                app-cs-checkbox {
+                    display: flex;
+
+                    label {
+                        width: 100%;
+
+                        &.radio-item,
+                        &.checkbox-item {
+                            span.value {
+                                width          : auto;
+                                justify-content: flex-start;
+
+                                ul {
+                                    &.categories {
+                                        display        : flex;
+                                        max-width      : 100%;
+                                        padding        : 0;
+                                        margin         : 0;
+                                        justify-content: flex-start;
+                                        width          : auto;
+
+                                        li {
+                                            display      : block;
+                                            padding      : 0 16px 0 0;
+                                            position     : relative;
+                                            white-space  : nowrap;
+                                            overflow     : hidden;
+                                            text-overflow: ellipsis;
+                                            font-size    : 12px;
+                                            color        : #161b2f;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,39 @@
+import { CommonModule } from '@angular/common';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { DashboardFooterModule } from '../../ui-kit/dashboard-footer/dashboard-footer.module';
+import { FloatingBarModule } from '../../ui-kit/floating-bar/floating-bar.module';
+import { SelectModule } from '../../ui-kit/select/select.module';
+import { TooltipModule } from '../../ui-kit/tooltip/tooltip.module';
+import { RiskCategoriesComponent } from './risk-categories.component';
+import { FilterPipe } from '../pipes/filter.pipe';
+
+describe('RiskCategoriesComponent', () => {
+  let component: RiskCategoriesComponent;
+  let fixture: ComponentFixture<RiskCategoriesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ RiskCategoriesComponent,FilterPipe ],
+      imports:[
+        CommonModule,  
+        FormsModule,
+        TooltipModule,
+        SelectModule,
+        DashboardFooterModule,
+        FloatingBarModule,
+      ],
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RiskCategoriesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,191 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { DashboardFooterConfig } from '../../ui-kit/dashboard-footer/dashboard-footer-config';
+import { RiskCategoriesConfig } from './risk-categories-config';
+
+@Component({
+  selector: 'app-risk-categories',
+  templateUrl: './risk-categories.component.html',
+  styleUrls: ['./risk-categories.component.less']
+})
+export class RiskCategoriesComponent implements OnInit {
+
+
+  @Input() categoryList: RiskCategoriesConfig = {
+    strategic: {
+      list: [],
+      selectedList: [],
+    },
+    operational: {
+      list: [],
+      selectedList: [],
+    },
+    compliance: {
+      list: [],
+      selectedList: [],
+    },
+    others: {
+      list: [],
+      selectedList: [],
+    }
+  }
+  @Input() allCategories: any[] = [];
+
+  @Input() categoryIdKey: any;
+  @Input() selectedCategories: any[] = [];
+
+  search = '';
+  activeTab: "strategic" | "operational" | "compliance" | "others"="strategic";
+  selectedIds: any[] = [];
+  animation = false;
+  blockWidth: any;
+  footerDetails: DashboardFooterConfig = {
+    selectedData: [],
+    nonRemovableList:[],
+    displayElementKey: 'category_name',
+    elementId: 'category_id',
+    singularText: 'Risk Category selected',
+    pluralText: 'Risk Categories 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]);
+    } else {
+      const index = this.selectedIds.findIndex((element: any) => element == category[this.categoryIdKey]);
+      this.selectedIds.splice(index, 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: string) {
+
+    if (mode) {
+      if (activeTab === "strategic" || activeTab === "operational" || activeTab === "compliance" || activeTab === "others") {
+        const list = this.categoryList[activeTab].list;
+        list.forEach(element => {
+          if (!this.selectedIds.includes(element[this.categoryIdKey])) {
+            this.selectedIds.push(element[this.categoryIdKey]);
+          }
+        });
+      }
+
+    } else {
+      if (activeTab === "strategic" || activeTab === "operational" || activeTab === "compliance" || activeTab === "others") {
+        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.strategic.selectedList = [];
+    this.categoryList.operational.selectedList = [];
+    this.categoryList.compliance.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.strategic.list.forEach((category: any) => {
+      if (selectedIds.includes(category[this.categoryIdKey])) {
+        this.categoryList.strategic.selectedList.push(category)
+      }
+    });
+    this.categoryList.operational.list.forEach((category: any) => {
+      if (selectedIds.includes(category[this.categoryIdKey])) {
+        this.categoryList.operational.selectedList.push(category)
+      }
+    });
+    this.categoryList.compliance.list.forEach((category: any) => {
+      if (selectedIds.includes(category[this.categoryIdKey])) {
+        this.categoryList.compliance.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.strategic.selectedList.length > 0) {
+      this.activeTab = 'strategic'
+    } else if (this.categoryList.operational.selectedList.length > 0) {
+      this.activeTab = 'operational'
+    } else if (this.categoryList.compliance.selectedList.length > 0) {
+      this.activeTab = 'compliance'
+    } else if (this.categoryList.others.selectedList.length > 0) {
+      this.activeTab = 'others'
+    } else {
+      this.activeTab = 'strategic'
+    }
+  }
+
+
+  checkSelectAll(activeTab: string) {
+    if (activeTab === "strategic" || activeTab === "operational" || activeTab === "compliance" || activeTab === "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/services/auth.service.ts

@@ -0,0 +1,27 @@
+import { Injectable, Optional } from '@angular/core';
+import { JwtHelperService } from '@auth0/angular-jwt';
+import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
+import { of, BehaviorSubject, Observable, Subject } from 'rxjs';
+import { map, shareReplay, catchError, delay} from 'rxjs/operators';
+import { Configurations } from '../../configurations';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+  public env !: any;
+
+  constructor(private http: HttpClient, @Optional() config?: Configurations) { 
+    if (config) {
+      this.env = config.envConfig;
+    }
+  }
+  getAuthorizationToken() {
+    if (localStorage.getItem('currentUser')) {
+      const currentUser = JSON.parse(localStorage.getItem('currentUser') || '{}');
+      return currentUser.token;
+    }
+  }
+
+  
+}

package/src/lib/create-dashboard-container/services/configure-widgets.service.spec.ts

@@ -0,0 +1,19 @@
+import { HttpClientModule } from '@angular/common/http';
+import { TestBed } from '@angular/core/testing';
+
+import { ConfigureWidgetsService } from './configure-widgets.service';
+
+describe('ConfigureWidgetsService', () => {
+  let service: ConfigureWidgetsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports:[HttpClientModule]
+    });
+    service = TestBed.inject(ConfigureWidgetsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});