vc-create-dashboard 2.9.6 → 2.9.7

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

@@ -0,0 +1,228 @@
+import { Injectable, Optional } from '@angular/core';
+import { widgetDataModel} from '../interfaces/widget-data-model'
+import { HttpClient,  HttpHeaders, JsonpClientBackend } from '@angular/common/http';
+import { catchError, map, retry } from 'rxjs/operators';
+import { JwtHelperService } from '@auth0/angular-jwt';
+import { of } from 'rxjs';
+import { AuthService } from './auth.service';
+import { Configurations } from '../../configurations';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ConfigureWidgetsService {
+  public env !: any;
+
+  constructor(
+    private http: HttpClient,
+    private authService: AuthService,
+     @Optional() config?: Configurations) { 
+      if (config) {
+        this.env = config.envConfig;
+      }}
+
+  complianceWidgetsData = [
+    {
+      title: 'Overview',
+      id: 'overview_flag',
+      description: 'Displays all responsibilities that have been assigned to you.',
+      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/overview.png',
+      value: 0,
+    },
+    {
+      title: 'Responsibility Calendar',
+      id: 'compliance_calendar_flag',
+      description: 'Displays all responsibilities that are due on a particular day.',
+      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/responsibility-calender.png',
+      value: 0,
+    },
+    {
+      title: 'Responsibility Center Overview',
+      id: 'responsibility_center_overview_flag',
+      description: 'Displays all responsibilities that have been assigned to you.',
+      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/overview.png',
+      value: 0,
+    },
+    {
+      title: 'My Responsibilities',
+      id: 'my_responsibilities',
+      description: 'Displays all responsibilities that have been assigned to you.',
+      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/my-responsibilities.png',
+      tabOption: true,
+      value: 0,
+    },
+    {
+      title: 'Key Responsibilities',
+      id: 'key_responsibilities',
+      description: 'Displays all responsibilities that are due on a particular day.',
+      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/key-responsibilities.png',
+      tabOption: true,
+      value: 0,
+    },
+    {
+      title: 'Trend Analysis',
+      id: 'trend_analysis_flag',
+      description: 'Displays all responsibilities that have been assigned to you.',
+      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/trend-analysis.png',
+      value: 0,
+    },
+    {
+      title: 'Workroom Updates',
+      id: 'workroom_alert_flag',
+      description: 'Displays all responsibilities that have been assigned to you.',
+      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/workroom-updates.png',
+      value: 0,
+    },
+    {
+      title: 'Recent Activities',
+      id: 'recent_activity_flag',
+      description: 'Displays all responsibilities that have been assigned to you.',
+      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/recent-activities.png',
+      value: 0,
+    },
+    {
+      title: 'Exception Summary',
+      id: 'exception_summary_flag',
+      description: 'Displays all responsibilities that have been assigned to you.',
+      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/exception-summary.png',
+      value: 0,
+    }
+  ];
+
+
+
+  riskWidgetsData = [
+    {
+      title: 'Risk Overview',
+      id: 'risk_overview',
+      description: 'description',
+      // widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/risk-overview.png',
+      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/riskV2/risk-overview.png',
+      value: 0,
+    },
+    {
+      title: 'Risk Appetite & Tolerance',
+      id: 'risk_appetite_tolerance',
+      description: 'description',
+      // widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/appetite-tolerance.png',
+      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/riskV2/appetite-tolerance.png',
+      value: 0,
+    },
+    {
+      title: 'Risk Ratings',
+      id: 'risk_ratings',
+      description: 'Description.',
+      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/appetite-tolerance.png',
+      value: 0,
+    },
+    {
+      title: 'Risks Without Controls',
+      id: 'risks_without_controls',
+      description: 'Description',
+      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/appetite-tolerance.png',
+      value: 0,
+    },     
+    {
+      title: 'Risks Exceeding Risk Tolerance',
+      id: 'exceeds_risk_tolerance',
+      description: 'description',
+      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/appetite-tolerance.png',
+      value: 0,
+    },
+    {
+      title: 'Inherent Risk Rating by Responsibility Centers ',
+      id: 'inherent_risk_rating_by_responsibility_centers',
+      description: 'Description.',
+      // widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/inherent-RC.png',
+      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/riskV2/inherent-RC.png',
+      value: 0,
+    },
+    {
+      title: 'Residual Risk Rating by Responsibility Centers ',
+      id: 'residual_risk_rating_by_responsibility_centers',
+      description: 'Description.',
+      // widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/residual-RC.png',
+      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/riskV2/residual-RC.png',
+      value: 0,
+    },
+    {
+      title: 'Risk Category Overview',
+      id: 'risk_category_overview',
+      description: 'description',
+      // widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/risk-category-overview.png',
+      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/riskV2/risk-category-overview.png',
+      value: 0,
+    },
+    {
+      title: 'Risk Heatmap',
+      id: 'risk_heatmap',
+      description: 'Description.',
+      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/risk-heatmap.png',
+      value: 0,
+    },
+    {
+      title: 'Inherent Risk Rating by Categories',
+      id: 'inherent_risk_rating_by_categories',
+      description: 'Description.',
+      // widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/inherent-categories.png',
+      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/riskV2/inherent-categories.png',
+      value: 0,
+    },
+     
+    {
+      title: 'Residual Risk Rating by Categories',
+      id: 'residual_risk_rating_by_categories',
+      description: 'description',
+      // widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/residual-categories.png',
+      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/riskV2/residual-categories.png',
+      value: 0,
+    },
+    {
+      title: 'Inherent Risk Rating Trend by Responsibility Centers',
+      id: 'inherent_risk_rating_trend_by_responsibility_centers',
+      description: 'Description.',
+      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/inherent-trend.png',
+      value: 0,
+    },
+    {
+      title: 'Residual Risk Rating Trend by Responsibility Centers',
+      id: 'residual_risk_rating_trend_by_responsibility_centers',
+      description: 'Description.',
+      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/residual-trend.png',
+      value: 0,
+    },        
+    {
+      title: 'Risk Rating Trend by Categories',
+      id: 'risk_rating_trend_by_categories',
+      description: 'Description.',
+      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/risk-trend.png',
+      value: 0,
+    },
+    {
+      title: 'Top 5 Risk Ratings',
+      id: 'top_5_residual_risk_ratings',
+      description: 'Description.',
+      // widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/5-risk-ratings.png',
+      widgetImage: 'https://cdn.v-comply.com/libraries/configure-widget/assets/images/10-risk-ratings.png',
+      value: 0,
+    },
+  ];
+  auditWidgetsData = [];
+  policyWidgetsData = [];
+
+
+  // For dashboard view
+  dashBoardWidgetUpdate(widGetJson: any) {
+    const headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken());
+    return this.http.put(this.env.OrganizationPut + 'dashboardWidgets', widGetJson).pipe(retry(2));
+  }
+
+  moduleType(identifier:string){
+   if(JSON.stringify(this.complianceWidgetsData).includes(identifier)){
+    return 'COMPLIANCE'
+   }else if(JSON.stringify(this.riskWidgetsData).includes(identifier)){
+    return 'RISK'
+   }
+  }
+}

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

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

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

@@ -0,0 +1,139 @@
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { Injectable, Optional } from '@angular/core';
+import { JwtHelperService } from '@auth0/angular-jwt';
+import { of } from 'rxjs';
+import { catchError, map, retry } from 'rxjs/operators';
+import { Configurations } from '../../configurations';
+import { AuthService } from './auth.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CreateDashboardService {
+  public env !: any;
+
+  httpOptions = {
+    headers: new HttpHeaders({ 'Content-Type': 'application/json', token: this.authService.getAuthorizationToken() })
+  };
+  constructor(private http: HttpClient,
+    private authService: AuthService, @Optional() config?: Configurations) {
+    if (config) {
+      this.env = config.envConfig;
+    }
+  }
+
+  /*
+  * Fetches the Organization Users List by making an API call
+  */
+  getOrganizationUsers(url?: any) {
+    return this.http.get(this.env?.organizationGet + 'organisationUsersList&paginationType=small' +
+      (url.p ? '&p=' + url.p : '') + (url.type ? '&type=' + url.type : '') +
+      (url.q ? '&q=' + url.q : ''), this.httpOptions).pipe(map((res: any) => {
+        return res;
+      }), retry(2), catchError(err => of(err)));
+  }
+
+  /**
+   * Fetches the OrganizationUsers details of users List to set pagination details including number of
+   * pages and records limit per page,
+   * @param url  contains info about type & search query
+   */
+  getOrganizationUsersCount(url?: any) {
+    return this.http.get(this.env?.organizationGet + 'organisationUsersCount&paginationType=small' +
+      (url.type ? '&type=' + url.type : '') + (url.q ? '&q=' + url.q : ''), this.httpOptions).pipe(map(res => {
+        return res;
+      }), catchError(err => of(err)));
+  }
+
+  getCategoryList() {
+    const headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken());
+    return this.http
+      .get<any[]>(this.env?.riskGet + 'category/list', { headers })
+      .pipe(retry(2));
+  }
+
+  /**
+   * Fetches all users by making an API call
+   */
+  getAllUsers() {
+    return this.http.get(this.env?.organizationGet + 'selectAllUsers&type=all', this.httpOptions).pipe(retry(2));
+  }
+
+  /**
+   *  Fetches all groups by making an API call
+   * */
+   getAllGroups(params?: HttpParams){
+    const headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken());
+    return this.http.get(this.env?.organizationGet + 'groupsList&permType=dashboard&memberExists=1', {params, headers}).pipe(retry(2));
+  }
+  
+  /**
+  * Fetches responsibilityCentersList by making an API call
+  */
+  getResponsibilityCenterList() {
+    const headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken());
+    return this.http.get<any[]>(this.env?.complianceGet + 'responsibilityCenterTree', {
+      headers,
+    }).pipe(retry(2));
+  }
+
+  getComplianceCategoriesList() {
+    const headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken());
+    return this.http.get<any[]>(this.env.complianceGet + 'complianceCategory/CategoryListTree', {
+      headers,
+    }).pipe(retry(2));
+  }
+
+  getComplianceCategoriesListFromGlobal() {
+    const headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken());
+    return this.http.get<any[]>(this.env?.complianceGet + 'complianceCategory/CategoryListTree&program=1&isDashboard=true', {
+      headers,
+    }).pipe(retry(2));
+  }
+
+  submitDashboard(payload: any) {
+    const headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken());
+    return this.http.post(this.env.dashboard+'CreateDashboard', payload, { headers }).pipe(
+      retry(2)
+    );
+  }
+
+  /**
+   * Fetches the Dashboard details for data population to Edit the dashboard
+   * @param id
+   */
+  fetchDashboard(id: any) {
+    return this.http.get(this.env.dashboard + id + '?mode=edit', this.httpOptions).pipe(
+      retry(2)
+    );
+  }
+
+  updateDashboard(id: any, payload: any) {
+    return this.http.put(this.env.dashboard + 'UpdateDashboard/' + id, payload, this.httpOptions).pipe(
+      retry(2)
+    );
+  }
+
+  getUserInformation() {
+    return this.http.get(this.env?.organizationGet + 'users&id=' + this?._ID(), this.httpOptions).pipe(
+      retry(2)
+    );
+  }
+  _ID() {
+    const helper = new JwtHelperService();
+    const myRawToken = localStorage.getItem('currentUser') || '{}';
+    const isExpired = helper?.isTokenExpired(myRawToken);
+    if (isExpired === false) {
+      const tokenInfo = helper?.decodeToken(myRawToken);
+      return tokenInfo._id;
+    }
+    return '';
+  }
+
+  checkDuplicateDashboardName(payload: any) {
+    return this.http.post(this.env.dashboard + 'DuplicateDashboard', payload, this.httpOptions).pipe(
+      retry(2)
+    );
+
+  }
+}

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

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PaginationService } from './pagination.service';
+
+describe('PaginationService', () => {
+  let service: PaginationService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(PaginationService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/create-dashboard-container/services/pagination.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+
+/**
+ * Service to implement pagination for users while creating an app
+ */
+export class PaginationService {
+  currentPage = 1;
+  searchValue = '';
+  currentValues = new BehaviorSubject({});
+
+  constructor() { }
+
+  setCurrentState() {
+    this.currentValues.next(true);
+  }
+  reset(){
+    this.currentPage = 1;
+    this.searchValue = '';
+  }
+}

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

@@ -0,0 +1,146 @@
+<div class="user-list" [class.animate-slideInRight]="animation">
+    <div class="user-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4">
+        <div class="vx-fs-14 vx-fw-500 vx-label-txt">Who can view this dashboard?</div>
+    </div>
+    <div class="user-list-body">
+      <div class="user-list-tab vx-d-flex vx-align-center vx-mb-2" *ngIf="groupsEnabled">
+          <button (click)="switchTab('USER')" class="tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4" [class.active]="currentTab === 'USER'">USERS <span class="vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4">{{totalList}}</span></button>
+          <button id="switchtab" (click)="switchTab('GROUP')" class="tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4" [class.active]="currentTab === 'GROUP'" >USER GROUPS <span id="groupscount" class="vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4">{{totalgroups}}</span></button>
+      </div>
+
+      <div class="user-list-search vx-mb-2">
+        <i class="icons">&#xe90b;</i>
+        <input type="text" [(ngModel)]="searchValue" placeholder="{{currentTab === 'USER' ? 'Search User(s)' :'Search User Group(s)'}} who can view this dashboard" (keyup.enter)="setSearchValue()" (focusout)="setSearchValue()">
+      </div>
+
+      <ng-container *ngIf="currentTab === 'USER'">
+          <div class="vx-d-flex vx-align-center vx-justify-end" *ngIf="totalPages>1">
+              <div class="pagination-box" *ngIf="totalPages>1 && searchList.length>1">             
+                  <app-pagination (paginationFilter)="paginationFilter($event)" [limit]="limit" [totalPages]="totalPages" [totalList]="totalList"></app-pagination>
+              </div>
+          </div>
+          <div class="user-list-body-top" *ngIf="searchList.length !== 0">
+              <app-cs-checkbox *ngIf="!searchValue && searchList.length>1" [ngValue]="selectedList.length == totalList" (ngValueChange)="selectAllUsers($event)">
+                  <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>
+              </app-cs-checkbox>
+              <app-cs-checkbox *ngIf="searchValue && searchList.length>1" [ngValue]="checkSelectAll()" (ngValueChange)="selectAll($event)">
+                  <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>
+              </app-cs-checkbox>
+          </div>
+          <div class="list-of-user">
+              <div class="selection-list vx-mb-4" [class.with-group]="groupsEnabled" [class.with-noData]="searchList.length == 0" [class.with-pagination]="totalPages>1 && searchList.length>1">
+                <ul *ngIf="searchList.length !== 0">
+                  <li *ngFor="let data of searchList; let i = index">
+                    <app-cs-checkbox [disabled]="listDetails.nonRemovableUsersList.includes(data[listDetails.elementIdKey])" [ngValue]="selectedList.length>0 && selectedIds.includes(data[listDetails.elementIdKey])" (ngValueChange)="selectElement(data)" [arTooltip]="data[listDetails.tooltipKey]" placement="bottom-left" delay="0" [tooltipMandatory]="true">{{data[listDetails.displayElementKey]}}</app-cs-checkbox>
+                  </li>
+                </ul>
+
+                <app-no-data *ngIf="!vLoader && searchList.length == 0" [noDataImage]="'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'" [noDataText]="'No data to display'"></app-no-data>
+              </div>
+
+              <app-loader-inline *ngIf="vLoader"></app-loader-inline>
+          </div>
+      </ng-container>
+
+      <ng-container *ngIf="currentTab === 'GROUP' && groupsEnabled">
+        <ng-container *ngIf="(groupdata) as groups ">
+          <div class="vx-d-flex vx-align-center vx-justify-end" *ngIf="true">
+            <div class="pagination-box" *ngIf="total_group_pages>1">             
+              <app-pagination (paginationFilter)="paginationFilter($event)" [limit]="limit" [totalPages]="total_group_pages" [totalList]="totalgroups"></app-pagination>
+            </div>
+          </div>
+          <ng-container *ngIf="true">
+              <div class="user-list-mid vx-mb-4" [class.with-pagination]="total_group_pages>1">
+                  <ng-container *ngIf="groups?.length > 0">
+                      <div class="user-list-select vx-mb-4">
+                          <app-cs-checkbox [disabled]="false" *ngIf="!searchValue && groups.length>1" [ngValue]="selectedgroupList.length == totalgroups" (ngValueChange)="selectAllGroups($event)">
+                              <div class="user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>
+                          </app-cs-checkbox>
+                          <app-cs-checkbox [disabled]="false" *ngIf="searchValue && groups.length>1" [ngValue]="checkSelectAllGroups()" (ngValueChange)="selectAllsearchgroups($event)">
+                            <div class="user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none">{{((selectedgroupList.length == totalgroups) ? 'Deselect All':'Select All')}}</div>
+                        </app-cs-checkbox>
+                      </div>
+                      <div class="user-list-item">
+                        <ul class="vx-m-0 vx-p-0 vx-d-flex">
+                          <li class="vx-mb-4" *ngFor="let data of groups; let i = index">
+                            <app-cs-checkbox (ngValueChange)="selectGroupElement(data)" [disabled]="false" [ngValue]="selectedgroupList.length>0 && selectedGroupIds.includes(data[listDetails.groupIdkey])">
+                              <div class="user-name vx-d-flex vx-align-center">  
+                                <div class="group-name" [arTooltip]="data[listDetails.displayGroupKey]" placement="bottom-left"
+                                delay="0" [tooltipMandatory]="true">{{data[listDetails.displayGroupKey]}}</div>
+                                <span id="usersofgroup" class="counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2">{{data["associatedUsers"].length}} {{data["associatedUsers"].length > 1 ? 'USERS' :'USER'}}</span>
+                              </div>
+                            </app-cs-checkbox>
+                          </li>
+                        </ul>
+                      </div>
+                  </ng-container>
+                  <ng-container *ngIf="groups?.length == 0 && !vLoaderGroups">
+                      <app-no-data  [noDataImage]="'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'" [noDataText]="(searchKey?.length > 0 ?'No match found.':'No data to display.')"></app-no-data>
+                  </ng-container>
+                  <app-loader-inline *ngIf="vLoaderGroups"></app-loader-inline>
+              </div>
+          </ng-container>
+        </ng-container>
+      </ng-container>
+       
+      <div class="user-floating-bar" *ngIf="groupsEnabled">
+        <div class="user-floating-bar-container vx-d-flex vx-align-center vx-justify-between">
+          <div class="left vx-d-flex vx-align-center">
+              <button class="counter vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-m-0 vx-pl-1 vx-pr-1" *ngIf="selectedList?.length" appPopover (click)="userCount.popover()" placement="left">{{selectedList?.length}}</button>
+              <div class="name vx-fs-12 vx-paragraph-txt vx-ml-2"> 
+                <span *ngIf="selectedList?.length === 1">User {{selectedgroupList?.length > 0 ?' & ':'selected'}}</span>
+                <span *ngIf="selectedList?.length > 1">Users {{selectedgroupList?.length > 0 ?' & ':'are selected'}}</span>
+              </div>
+              <button class="counter group vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-ml-2 vx-pl-1 vx-pr-1" *ngIf="selectedgroupList?.length" appPopover (click)="groupCount.popover()" placement="left">{{selectedgroupList?.length}}</button>
+              <div class="name vx-fs-12 vx-paragraph-txt vx-ml-2">
+                <span *ngIf="selectedgroupList?.length === 1">User Group selected</span>
+                <span *ngIf="selectedgroupList?.length > 1">User Groups selected</span>
+              </div>
+
+              <app-popover #userCount [dontCloseonClick]="true">
+                <div class="action-list">
+                  <ul class="action-item">
+                    <li *ngFor="let element of selectedList">
+                      <div class="avatar-card">
+                        <span class="value" [arTooltip]="element.member_name" placement="bottom-left" delay="0" type="black" [tooltipMandatory]="false">
+                          <i class="icons cross-icon" (click)="selectElement(element)" *ngIf="!listDetails.nonRemovableUsersList.includes(element?.member_id)">&#xe90d;</i> {{element.member_name}}
+                        </span>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </app-popover>
+    
+              <app-popover #groupCount [dontCloseonClick]="true">
+                <div class="action-list">
+                  <ul class="action-item">
+                    <li *ngFor="let element of selectedgroupList">
+                      <div class="avatar-card">
+                        <span class="value" [arTooltip]="element?.group_name" placement="bottom-left" delay="0" type="black" [tooltipMandatory]="false">
+                          <i class="icons cross-icon" (click)="selectGroupElement(element)">&#xe90d;</i> {{element?.group_name}}
+                        </span>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </app-popover>
+          </div>
+        
+          <div class="right vx-d-flex vx-align-center">
+            <button class="cancel" (click)="closeUserList.emit()">Cancel</button>
+            <button [disabled]="false" (click)="onSubmit()">Next <i class="icons">&#xe91e;</i></button>
+          </div>
+        </div>
+      </div>
+
+      <div class="user-list-footer" *ngIf="!groupsEnabled">
+        <app-dashboard-footer 
+        [footerDetails] ="footerDetails"
+        (cancelEvent)="closeUserList.emit(); paginationService.reset();"
+        (deleteEvent) ="selectElement($event)"
+        (submitEvent)="onSubmit()"
+        [userButtonColor]="'greenBg'"
+        ></app-dashboard-footer>
+      </div>
+    </div>
+</div>