vc-create-dashboard 3.0.83 → 3.0.84

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

@@ -0,0 +1,472 @@
+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';
+import { ASSETS } from '../constants/assets.constant';
+
+@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;
+  ASSETS = ASSETS;
+
+  @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 = true;
+    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/{lib/create-dashboard-container/user-list/user-list.config.d.ts → src/lib/create-dashboard-container/user-list/user-list.config.ts}

@@ -1,13 +1,13 @@
-/**
- * defines listing structure for Reusable list components
- */
-export interface UserListConfiguration {
-    selectedUsersList: {}[];
-    selectedGroupList: {}[];
-    nonRemovableUsersList: any[];
-    displayElementKey: string;
-    displayGroupKey: string;
-    groupIdkey: string;
-    elementIdKey: string;
-    tooltipKey: string;
-}
+/**
+ * defines listing structure for Reusable list components
+ */
+ export interface UserListConfiguration {
+    selectedUsersList: {}[];
+    selectedGroupList:{}[];
+    nonRemovableUsersList:any[]
+    displayElementKey: string;
+    displayGroupKey:string,
+    groupIdkey:string,
+    elementIdKey: string;
+    tooltipKey: string;
+}