vc-create-dashboard 3.0.66 → 3.0.68

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

@@ -1,150 +0,0 @@
-<div class="category-list" [class.animate-slideInRight]="animation">
-  <div
-    class="category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4"
-  >
-    <span class="vx-fs-14 vx-fw-500 vx-label-txt">Select Program(s)</span>
-  </div>
-  <div class="category-list-mid">
-    <div class="vx-d-flex vx-mb-2">
-      <div
-        class="category-list-card"
-        [class.active]="activeTab == 'regulations'"
-        (click)="activeTab = 'regulations'"
-      >
-        <div class="left">
-          <label>REGULATIONS</label>
-          <p *ngIf="categoryList?.regulations?.selectedList?.length != 0">
-            {{ categoryList?.regulations?.selectedList?.length }}
-            {{
-              categoryList?.regulations?.selectedList?.length == 1
-                ? "Program"
-                : "Programs"
-            }}
-            selected
-          </p>
-        </div>
-        <span class="counter">{{
-          categoryList?.regulations?.list?.length
-        }}</span>
-      </div>
-      <div
-        class="category-list-card"
-        [class.active]="activeTab == 'standards'"
-        (click)="activeTab = 'standards'"
-      >
-        <div class="left">
-          <label>STANDARDS</label>
-          <p *ngIf="categoryList?.standards?.selectedList?.length != 0">
-            {{ categoryList?.standards?.selectedList?.length }}
-            {{
-              categoryList?.standards?.selectedList?.length == 1
-                ? "Program"
-                : "Programs"
-            }}
-            selected
-          </p>
-        </div>
-        <span class="counter">{{ categoryList?.standards?.list?.length }}</span>
-      </div>
-      <div
-        class="category-list-card"
-        [class.active]="activeTab == 'internalControls'"
-        (click)="activeTab = 'internalControls'"
-      >
-        <div class="left">
-          <label>INTERNAL CONTROLS</label>
-          <p *ngIf="categoryList?.internalControls?.selectedList?.length != 0">
-            {{ categoryList?.internalControls?.selectedList?.length }}
-            {{
-              categoryList?.internalControls?.selectedList?.length == 1
-                ? "Program"
-                : "programs"
-            }}
-            selected
-          </p>
-        </div>
-        <span class="counter">{{
-          categoryList?.internalControls?.list?.length
-        }}</span>
-      </div>
-      <div
-        class="category-list-card"
-        [class.active]="activeTab == 'others'"
-        (click)="activeTab = 'others'"
-      >
-        <div class="left">
-          <label>OTHERS</label>
-          <p *ngIf="categoryList?.others?.selectedList?.length != 0">
-            {{ categoryList?.others?.selectedList?.length }}
-            {{
-              categoryList?.others?.selectedList?.length == 1
-                ? "Program"
-                : "Programs"
-            }}
-            selected
-          </p>
-        </div>
-        <span class="counter">{{ categoryList?.others?.list?.length }}</span>
-      </div>
-    </div>
-
-    <div class="category-list-search vx-mb-2">
-      <i class="icons">&#xe90b;</i>
-      <input type="text" [(ngModel)]="search" placeholder="Search Program" />
-    </div>
-
-    <ng-container
-      *ngIf="categoryList[activeTab].list | filter : search as searchList"
-    >
-      <div class="select-all" *ngIf="searchList.length > 1">
-        <app-cs-checkbox
-          [ngValue]="checkSelectAll(activeTab)"
-          (ngValueChange)="selectAll($event, activeTab)"
-        >
-          <strong>{{
-            checkSelectAll(activeTab) ? "Deselect All" : "Select All"
-          }}</strong>
-        </app-cs-checkbox>
-      </div>
-      <div
-        class="category-list-item vx-mb-4"
-        [class.with-selectAll]="searchList.length > 1"
-        *ngIf="searchList.length > 0"
-      >
-        <ul class="category-list-item-ul vx-m-0 vx-p-0">
-          <li class="vx-mb-4" *ngFor="let category of searchList">
-            <app-cs-checkbox
-              [ngValue]="selectedIds.includes(category[categoryIdKey])"
-              (ngValueChange)="selectCategory($event, activeTab, category)"
-            >
-              <ul class="categories">
-                <li
-                  *ngFor="let entity of category.category_name; let j = index"
-                  [arTooltip]="entity"
-                  placement="bottom-left"
-                  delay="0"
-                >
-                  {{ entity }}
-                </li>
-              </ul>
-            </app-cs-checkbox>
-          </li>
-        </ul>
-      </div>
-
-      <app-no-data
-        *ngIf="searchList.length == 0"
-        [noDataImage]="ASSETS.search_data"
-        [noDataText]="'No data to display'"
-      >
-      </app-no-data>
-    </ng-container>
-
-    <app-dashboard-footer
-      [footerDetails]="footerDetails"
-      (cancelEvent)="close()"
-      (deleteEvent)="deleteEvent($event)"
-      (submitEvent)="save()"
-    ></app-dashboard-footer>
-  </div>
-</div>

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

@@ -1,252 +0,0 @@
-@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 .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;
-            }
-        }
-
-        &+.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.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 8px;
-                                            position     : relative;
-                                            white-space  : nowrap;
-                                            overflow     : hidden;
-                                            text-overflow: ellipsis;
-                                            font-size    : 12px;
-                                            color        : #747576;
-
-                                            &:after {
-                                                content  : ">";
-                                                position : absolute;
-                                                top      : 0;
-                                                right    : 0;
-                                                color    : #747576;
-                                                font-size: 12px;
-                                            }
-
-                                            &:last-of-type {
-                                                color: #34AA44;
-
-                                                &:after {
-                                                    display: none;
-                                                }
-                                            }
-
-                                            &:first-of-type {
-                                                padding-left: 0;
-                                                color       : #1E5DD3;
-                                            }
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}

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

@@ -1,43 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FilterPipe } from '../pipes/filter.pipe';
-import { CommonModule } from '@angular/common';
-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 { CategoriesComponent } from './categories.component';
-
-import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
-
-
-describe('CategoriesComponent', () => {
-  let component: CategoriesComponent;
-  let fixture: ComponentFixture<CategoriesComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ CategoriesComponent,FilterPipe ],
-      imports:[
-        CommonModule,
-        FormsModule,
-        TooltipModule,
-        SelectModule,
-        DashboardFooterModule,
-        FloatingBarModule,
-        HttpClientTestingModule
-      ],
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(CategoriesComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,220 +0,0 @@
-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();
-  }
-}