vc-create-dashboard 2.9.7 → 3.0.0

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

@@ -1,433 +0,0 @@
-import { HttpParams } from '@angular/common/http';
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { DashboardFooterConfig } from '../../ui-kit/dashboard-footer/dashboard-footer-config';
-import { CreateDashboardService } from '../services/create-dashboard.service';
-import { PaginationService } from '../services/pagination.service';
-import { UserListConfiguration } from './user-list.config';
-
-@Component({
-  selector: 'app-user-list',
-  templateUrl: './user-list.component.html',
-  styleUrls: ['./user-list.component.less']
-})
-export class UserListComponent implements OnInit {
-  @Output() closeUserList = new EventEmitter();
-  @Output() saveSelectedUsers = new EventEmitter();
-  @Input() selectionType = '';
-  @Input() listDetails: UserListConfiguration = {
-    displayElementKey: '',
-    displayGroupKey:'',
-    groupIdkey:'',
-    elementIdKey: '',
-    tooltipKey: '',
-    selectedUsersList: [],
-    selectedGroupList:[],
-    nonRemovableUsersList: []
-  };
-
-  footerDetails: DashboardFooterConfig = {
-    selectedData: [],
-    nonRemovableList: [],
-    displayElementKey: '',
-    elementId: '',
-    singularText: 'User selected',
-    pluralText: 'Users selected',
-    showFrequency: false,
-    frequencyText: '',
-    isDisabled: false
-
-  };
-  vLoader = false;
-  vLoaderGroups = false
-
-  @Input() totalPages = 1;
-  @Input() limit = 1;
-  @Input() totalList = 1;
-  @Input() feature:any;
-  @Input()  totalgroupscount : any;
-  searchList = [];
-  searchValue = '';
-  searchFilter = '';
-  selectedIds: any[] = [];
-  selectedList: any[] = [];
-  groupdata: any[] = [];
-
-
-  animation = true;
-  totalgroups: any;
-  total_group_pages: any;
-  selectedGroupIds: any[]= [];
-  groupsEnabled:any;
-  selectedgroupList: any[] =[];
-  currentPage=1;
-  constructor(
-    public paginationService: PaginationService,
-    private dashboardService: CreateDashboardService,
-  ) { 
-    this.paginationService.reset();
-    this.getOrganizationUsersCount('');
-  }
-
-  ngOnChanges() {
-
-  }
-
-  ngOnInit(): void {
-    this.groupsEnabled=this.feature?.isFeatureEnabled("ff_groups_improvements");
-    this.animation = true;
-    setTimeout(() => {
-      this.animation = false;
-    }, 300);
-    if (this.listDetails.selectedUsersList.length > 0) {
-      this.selectedList = [...new Set(this.listDetails.selectedUsersList)];
-      const selectedData = [...new Set(this.listDetails.selectedUsersList)];
-      this.footerDetails.selectedData = selectedData;
-      this.footerDetails.nonRemovableList = this.listDetails.nonRemovableUsersList;
-      this.selectedIds = selectedData.map((ele: any) => {
-        if (ele[this.listDetails.elementIdKey]) { return ele[this.listDetails.elementIdKey]; }
-      });
-
-    }
-    this.getUsersList({
-      // p: this.paginationService.currentPage === 1 ? '' : this.paginationService.currentPage,
-      p: this.paginationService.currentPage ?? 1,
-      type: '',
-    });
-    this.footerDetails.displayElementKey = this.listDetails.displayElementKey;
-    this.footerDetails.elementId = this.listDetails.elementIdKey;
-    if (this.groupsEnabled) {
-      this.getGroupsList({})
-    } 
-  if (this.listDetails.selectedGroupList.length > 0) {
-    this.selectedgroupList = [...new Set(this.listDetails.selectedGroupList)];
-    const selectedData = [...new Set(this.listDetails.selectedGroupList)];
-    this.footerDetails.selectedData = selectedData;
-    this.footerDetails.nonRemovableList = this.listDetails.nonRemovableUsersList;
-    this.selectedGroupIds = selectedData.map((ele: any) => {
-      if (ele[this.listDetails.groupIdkey]) { return ele[this.listDetails.groupIdkey]; }
-      
-    });
-
-  }
-  }
-
-  cancelChanges() {
-
-  }
-  removeElement(event: any) {
-
-  }
-  submitChanges() {
-
-  }
-  selectAll(event: any) {
-    if (event) {
-      this.searchList.forEach(searchElement => {
-
-        if (!this.selectedIds.includes(searchElement[this.listDetails.elementIdKey])) {
-          this.selectedList.push(searchElement);
-          this.selectedIds.push(searchElement[this.listDetails.elementIdKey]);
-          this.footerDetails.selectedData = this.selectedList;
-        }
-      });
-
-    } else {
-      this.searchList.forEach(searchElement => {
-        if (!this.listDetails.nonRemovableUsersList.includes(searchElement[this.listDetails.elementIdKey])) {
-          const index = this.selectedList.findIndex(ele => ele[this.listDetails.elementIdKey] ===
-            searchElement[this.listDetails.elementIdKey]);
-          this.selectedList.splice(index, 1);
-          const filteredList = [...this.selectedList];
-          this.footerDetails.selectedData = this.selectedList;
-
-          const idIndex = this.selectedIds.findIndex(ele => ele === searchElement[this.listDetails.elementIdKey]);
-          this.selectedIds.splice(idIndex, 1);
-        }
-      });
-
-    }
-  }
-
-  /**
-   * Selects all admins and managers at once by making api call.
-   * @param event consists boolean value to select of unselect.
-   */
-  selectAllUsers(event: any) {
-    if (event) {
-      this.vLoader = true;
-      this.dashboardService.getAllUsers().subscribe((res: any) => {
-
-        if(res.length>1){
-          res.forEach((searchElement:any) => {
-  
-          if (!this.selectedIds.includes(searchElement[this.listDetails.elementIdKey])) {
-            this.selectedList.push(searchElement);
-            this.selectedIds.push(searchElement[this.listDetails.elementIdKey]);
-            this.footerDetails.selectedData = this.selectedList;
-          }
-        });
-        }
-        this.vLoader = false;
-      });
-
-    } else {
-
-
-
-      const selectedData = [...new Set(this.selectedList)];
-      const index = selectedData.findIndex(ele => ele[this.listDetails.elementIdKey] === this.listDetails.nonRemovableUsersList[0]);
-      if (index != -1) {
-        const owner = Object.assign(selectedData[index]);
-
-        this.selectedList = [];
-        this.selectedIds = [];
-        this.footerDetails.selectedData = [];
-
-        this.selectedList.push(owner);
-        this.selectedIds.push(owner.member_id);
-        this.footerDetails.selectedData = this.selectedList;
-
-      } else {
-        this.selectedList = [];
-        this.selectedIds = [];
-        this.footerDetails.selectedData = [];
-      }
-    }
-  }
-
-  selectAllGroups(event: any) {
-    let params =new HttpParams();
-    params = params.append('fetch_all', 1);
-    if (event) {
-      this.vLoaderGroups = true;
-      this.dashboardService.getAllGroups(params).subscribe((res: any) => {
-        if (res.data.length > 1) {
-          
-          res.data.forEach((searchElement: any) => {
-
-            if (!this.selectedGroupIds.includes(searchElement[this.listDetails.groupIdkey])) {
-              this.selectedgroupList.push(searchElement);
-              this.selectedGroupIds.push(searchElement[this.listDetails.groupIdkey]);
-              this.footerDetails.selectedData = this.selectedgroupList;
-            }
-          });          
-        }
-        this.vLoaderGroups = false;
-      });    
-    } else {
-        this.selectedgroupList = [];
-        this.selectedGroupIds = [];
-        this.footerDetails.selectedData = [];        
-      }
-    }
-
-    selectAllsearchgroups(event: any) {
-      if (event) {
-        this.groupdata.forEach(searchElement => {
-  
-          if (!this.selectedGroupIds.includes(searchElement[this.listDetails.groupIdkey])) {
-            this.selectedgroupList.push(searchElement);
-            this.selectedGroupIds.push(searchElement[this.listDetails.groupIdkey]);
-            this.footerDetails.selectedData = this.selectedgroupList;
-          }
-        });
-  
-      } else {
-        this.selectedgroupList = [];
-        this.selectedGroupIds = [];
-        this.footerDetails.selectedData = []; 
-  
-      }
-    }  
-
-/**
- * Selects checked item from the list.
- * In case of user's list calculates number of admins/manages to set visibility(either to all admins/ admins and managers)
- * @param data is the selected element
- */
-selectElement(data: any) {
-  if (this.selectedIds.includes(data[this.listDetails.elementIdKey])) {
-    if (!this.listDetails.nonRemovableUsersList.includes(data[this.listDetails.elementIdKey])) {
-      const index = this.selectedList.findIndex(ele => ele[this.listDetails.elementIdKey] === data[this.listDetails.elementIdKey]);
-      this.selectedList.splice(index, 1);
-      this.footerDetails.selectedData = this.selectedList;
-
-      const idIndex = this.selectedIds.findIndex(ele => ele === data[this.listDetails.elementIdKey]);
-
-      this.selectedIds.splice(idIndex, 1);
-    }
-
-  } else {
-    this.selectedList.push(data);
-    this.selectedIds.push(data[this.listDetails.elementIdKey]);
-    this.footerDetails.selectedData = this.selectedList;
-
-  }
-}
-
-  selectGroupElement(data: any) {        
-    if (this.selectedGroupIds.includes(data[this.listDetails.groupIdkey])) {
-        const index = this.selectedgroupList.findIndex((ele: { [x: string]: any; }) => ele[this.listDetails.groupIdkey] === data[this.listDetails.groupIdkey]);
-        this.selectedgroupList.splice(index, 1);
-        this.footerDetails.selectedData = this.selectedgroupList;
-        const idIndex = this.selectedGroupIds.findIndex(ele => ele === data[this.listDetails.groupIdkey]);
-        this.selectedGroupIds.splice(idIndex, 1);
-    } else {
-      this.selectedgroupList.push(data);
-      this.selectedGroupIds.push(data[this.listDetails.groupIdkey]);
-      this.footerDetails.selectedData = this.selectedgroupList;      
-    }
-  }
-/**
- * It is used to set and search value incase of backend driven list to differentiate search list and original list
- */
-setSearchValue() {
-  if(this.paginationService.searchValue !== this.searchValue) {
-    this.paginationService.currentPage = 1;
-    this.paginationService.searchValue = this.searchValue;
-    this.paginationFilter(true);
-  }
-
-}
-
-/**
-* it is used check select all condition incase of backend driven search
-*/
-checkSelectAll() {
-  if (this.searchList.length > 0) {
-    const data: boolean = this.searchList.every(ele => this.selectedIds.includes(ele[this.listDetails.elementIdKey]));
-    return data;
-  } else {
-    return false;
-
-  }
-
-}
-
-/**
-* it is used check select all groups condition incase of backend driven search
-*/
-checkSelectAllGroups() {
-  if (this.groupdata.length > 0) {
-    const data: boolean = this.groupdata.every(ele => this.selectedGroupIds.includes(ele[this.listDetails.groupIdkey]));
-    return data;
-  } else {
-    return false;
-
-  }
-
-}
-
-/**
- * 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) return
-  if(this.groupsEnabled){
-    this.vLoader = true;
-    if(this.currentTab == 'USER'){
-        this.getUsersList({
-          // p: this.paginationService.currentPage === 1 ? '' : this.paginationService.currentPage,
-          p: this.paginationService.currentPage ?? 1,
-          type: '',
-          q: (!this.paginationService.searchValue) ? '' : this.paginationService.searchValue,
-        });  
-        this.getOrganizationUsersCount({
-          p: this.paginationService.currentPage ?? 1,
-          type: '',
-          q: (!this.paginationService.searchValue) ? '' : this.paginationService.searchValue,
-        }) 
-    }
-    else{
-        this.getGroupsList({
-          page: this.paginationService.currentPage === 1 ? '' : this.paginationService.currentPage,
-          groupName: (!this.paginationService.searchValue) ? '' : this.paginationService.searchValue,
-        });
-    }
-  }else{
-      this.vLoader = true;
-      this.getUsersList({
-        // p: this.paginationService.currentPage === 1 ? '' : this.paginationService.currentPage,
-        p: this.paginationService.currentPage ?? 1,
-        type: '',
-        q: (!this.paginationService.searchValue) ? '' : this.paginationService.searchValue,
-      });
-      this.getOrganizationUsersCount({
-        p: this.paginationService.currentPage ?? 1,
-        type: '',
-        q: (!this.paginationService.searchValue) ? '' : this.paginationService.searchValue,
-      })
-  }
-}
-/**
- * Gets user's list  by making api call
- * @param url contains userlist filter details
- */
-getUsersList(url: any) {
-  this.vLoader = true;
-
-  this.dashboardService.getOrganizationUsers(url ? url : '').subscribe(res => {
-
-    this.searchList = res;
-    this.vLoader = false;
-
-
-    });
-
-  }
-getGroupsList(event:any){
-  this.vLoaderGroups = true
-  let params =new HttpParams()
-  if (event.hasOwnProperty("groupName")) {
-    params = params.append('groupName', event["groupName"]);
-  }
-  if(event.hasOwnProperty("page") && !this.searchValue) {
-    params = params.append('page', event["page"]);
-  }
-  if(this.totalgroupscount > 30 && !this.searchValue){
-   params = params.append('limit', 30);
-  }
-   this.dashboardService.getAllGroups(params).subscribe((res:any)=>{
-    this.groupdata = res?.data;
-    this.vLoaderGroups = false;
-    this.totalgroups = res.total_items;
-    this.total_group_pages = res.total_pages;
- 
-})
-}
-
-  /**
-   * on click on next button from the list, it emits the selected list of elements to parent component.
-   */
-  onSubmit() {
-    // const data = [...new Set(this.selectedList)];
-    // data.push(this.selectedgroupList)
-    this.saveSelectedUsers.emit({ users: this.selectedList, groups: this.selectedgroupList });
-    this.paginationService.reset();
-  }
-  currentTab = 'USER'
-  switchTab(tab: string) {
-    this.paginationService.reset();
-    this.getOrganizationUsersCount('');
-    this.currentTab = tab;
-    if(this.currentTab=="USER"){
-      this.searchValue=''
-      this.getUsersList({p: this.paginationService.currentPage});
-    }else{
-      this.searchValue=''
-      this.getGroupsList({})
-    }
-  }
-
-  getOrganizationUsersCount(Url: any) {
-    this.dashboardService.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;
-      }
-    });
-  }
-}

package/src/lib/create-dashboard.service.ts

@@ -1,8 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class CreateDashboardService {
-  constructor() {}
-}

package/src/lib/ui-kit/action-dialog/access-capability/access-capability.component.html

@@ -1,22 +0,0 @@
-<div class="alert-dialog">
-  <div class="alert-dialog-container">
-    <div class="alert-dialog-body">
-      <div class="alert-dialog-icon">
-        <i class="risk-icons">&#xe934;</i>
-      </div>
-      <p class="heading"><span>Risk name:</span>{{ dialogConfig.data.heading }}</p>
-      <p [innerHTML]="dialogConfig.data.info"></p>
-    </div>
-    <div class="editor-block" [class.space-bottom]="!editor">
-      <button class="add-coment" (click)="toggleComment()"><i class="risk-icons" *ngIf="!editor">&#xe915;</i><i class="risk-icons" *ngIf="editor">&#xe90d;</i> Add Comments</button>
-      <vcomply-editor [(ngModel)]="comment" *ngIf="editor" [editorConfig]="editorConfig"></vcomply-editor>
-    </div>
-    <div class="alert-dialog-footer">
-      <p>Are you sure you would like to proceed?</p>
-      <div class="alert-dialog-btn">
-        <button class="greyButton" (click)="close(false)">no</button>
-        <button class="blueBtn" (click)="close(true)">Yes</button>
-      </div>
-    </div>
-  </div>
-</div>

package/src/lib/ui-kit/action-dialog/access-capability/access-capability.component.less

@@ -1,218 +0,0 @@
-.alert-dialog {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  &-container {
-    width: 540px;
-    border-radius: 5px;
-    -webkit-animation: scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) 50ms both;
-    animation: scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) 50ms both;
-  }
-
-  &-body {
-    background: #f8f8f8;
-    border-radius: 5px 5px 0 0;
-    padding: 50px 15px 35px;
-
-    p {
-      font-size: 14px;
-      color: #747576;
-      text-align: center;
-      margin: 0 0 10px;
-      font-weight: 300;
-
-      strong {
-        font-weight: 500;
-      }
-
-      &.heading {
-        color: #161b2f;
-        font-weight: 400;
-        font-size: 13px;
-        margin-bottom: 10px;
-
-        span {
-          font-size: 11px;
-          line-height: 20px;
-          color: #747576;
-          font-weight: 600;
-          margin-right: 5px;
-          text-transform: uppercase;
-        }
-      }
-    }
-  }
-
-  &-icon {
-    background: #fff;
-    border: 1px solid #dcdcdc;
-    width: 80px;
-    height: 80px;
-    border-radius: 50%;
-    margin: 0 auto 35px;
-    padding: 5px 0 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    i {
-      color: #1e5dd3;
-      font-size: 20px;
-      transform: rotate(-90deg);
-    }
-  }
-
-  &-footer {
-    display: flex;
-    font-size: 14px;
-    background: #ffffff;
-    padding: 15px 20px;
-    letter-spacing: 0.2px;
-    border-radius: 0 0 4px 4px;
-    z-index: 1;
-    position: relative;
-    align-items: center;
-    justify-content: space-between;
-
-    p {
-      color: #161b2f;
-      margin: 0;
-    }
-
-    button {
-      font-size: 12px;
-      color: #1e5dd3;
-      letter-spacing: 1px;
-      font-weight: 500;
-      padding: 0 25px;
-      margin-left: 5px;
-      text-transform: uppercase;
-      border-radius: 3px;
-      height: 30px;
-      outline: none;
-      cursor: pointer;
-
-      &.greyButton {
-        background: #f1f1f1;
-        color: #1e5dd3;
-        border: 1px solid #f1f1f1;
-      }
-
-      &.blueBtn {
-        background: #1e5dd3;
-        color: #ffffff;
-        border: 1px solid #1e5dd3;
-      }
-    }
-  }
-
-  &.btn {
-    display: flex;
-    align-items: center;
-  }
-}
-
-::ng-deep .editor-block {
-  padding: 0 15px;
-  background: #f8f8f8;
-  position: relative;
-  padding-bottom: 20px;
-
-  &.space-bottom {
-    border-top: 1px solid #1e5dd3;
-  }
-
-  button.add-coment {
-    background: #1e5dd3;
-    border: 1px solid #1e5dd3;
-    border-radius: 2px;
-    height: 18px;
-    cursor: pointer;
-    color: #fff;
-    font-size: 8px;
-    font-weight: 600;
-    line-height: 18px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-transform: uppercase;
-    padding: 0 5px;
-    font-weight: 500;
-    position: absolute;
-    top: -9px;
-    right: 36px;
-    z-index: 1;
-
-    i {
-      font-size: 6px;
-      margin-right: 5px;
-      line-height: 17px;
-    }
-  }
-
-  marx-editor,
-  marvcomplyx-editor {
-    width: 100%;
-
-    .editor-container {
-      background: #fff;
-
-      .editable-block {
-        font-size: 12px;
-        font-weight: 400;
-        min-height: 70px !important;
-      }
-
-      .editor-tools {
-        app-editor-menu {
-          .editor-menu {
-            .col {
-              button {
-                height: 22px;
-                width: 22px;
-                padding: 0 6px;
-
-                svg {
-                  height: 22px;
-                  width: 12px;
-                }
-                &.submit {
-                  width: 80px !important;
-                  line-height: 22px;
-                  justify-content: center;
-                }
-              }
-
-              .popover {
-                &.small {
-                  ul.option-list {
-                    li {
-                      button {
-                        width: 100% !important;
-                        height: auto !important;
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-// Editor
-::ng-deep marx-modal,
-::ng-deep vcomply-modal {
-  .popup-modal-background {
-    background-color: #161B2FCC !important;
-  }
-}

package/src/lib/ui-kit/action-dialog/access-capability/access-capability.component.ts

@@ -1,30 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { EditorConfig } from '@vcomply/editor';
-import { DialogConfig } from '../../dialog/dialog-config';
-import { DialogRef } from '../../dialog/dialog-ref';
-
-@Component({
-  selector: 'app-access-capability',
-  templateUrl: './access-capability.component.html',
-  styleUrls: ['./access-capability.component.less'],
-})
-export class AccessCapabilityComponent implements OnInit {
-  public comment!: string;
-  editor = true;
-  constructor(
-    public dialogConfig: DialogConfig,
-    private dialogRef: DialogRef
-  ) {}
-  editorConfig: EditorConfig = {
-    maxHeight: '100px',
-    placeholder: 'Add comments',
-  };
-  ngOnInit(): void {}
-
-  close(flag: boolean) {
-    this.dialogRef.close({ flag, comment: this.comment });
-  }
-  toggleComment() {
-    this.editor = !this.editor;
-  }
-}