tango-app-ui-manage-tickets 3.7.0-beta.15 → 3.7.0-beta.16

package/src/lib/components/tickets/tickets.component.ts

@@ -0,0 +1,748 @@
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+import { GlobalStateService } from "tango-app-ui-global";
+import { Subject, takeUntil } from "rxjs";
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+import { AddCsmModalComponent } from "../add-csm-modal/add-csm-modal.component";
+import { TicketService } from "../../services/ticket.service";
+import { ExcelService } from '../../services/excel.service';
+import { CommentModelComponent } from "../comment-model/comment-model.component";
+@Component({
+  selector: "lib-tickets",
+  templateUrl: "./tickets.component.html",
+  styleUrl: "./tickets.component.scss",
+})
+export class TicketsComponent implements OnInit, OnDestroy {
+  type = "Infra";
+  searchValue: any = "";
+  selectedTab: any = "total";
+  // paginationVariables
+  itemsPerPage = 10;
+  currentPage = 1;
+  totalItems = 0;
+  paginationSizes = [10, 20, 30];
+  pageSize = 10;
+  private readonly destroy$ = new Subject();
+  assignTicket: boolean = false;
+  filterByStores: any = [];
+  filterByinstalled: any = [];
+  filterByStatus: any = [];
+  filterByQueryType: any = [];
+  issueType: any = [];
+  sortedColumn: string;
+  sortDirection: number;
+  headerFilters: any;
+  userList_req: any;
+  userList: any = [];
+  dataObject: any=[];
+  storeList: any = [];
+  statusType: { text: string; id: string }[];
+  typeName: string;
+  users: any;
+  limit: number = 10;
+  offset: number = 1;
+  sortBy: any = -1;
+  sortColumName: any = "";
+  listArray: any = [];
+  tableListArray: any = [];
+  loading: boolean = true;
+  noData: boolean = false;
+  selectAll: any = false;
+  assignStores: any = [];
+  issueTypeList: any=[];
+  queryTypeList: any=[];
+  
+  constructor(
+    private cd: ChangeDetectorRef,
+    private router: Router,
+    private route: ActivatedRoute,
+    public gs: GlobalStateService,
+    private modalService: NgbModal,
+    private service: TicketService,
+    private excelservice: ExcelService,
+  ) {}
+
+  ngOnInit(): void {
+    const userData: any = JSON.parse(localStorage.getItem("user-info") || "{}");
+    this.users = userData;
+    this.route?.queryParams
+      ?.pipe(takeUntil(this.destroy$))
+      .subscribe((params) => {
+        this.type = params.type;
+        this.filterByStores =[]; this.storeList=[]
+        this.filterByinstalled=[]; this.statusType =[]
+        this.filterByStatus =[]; this.userList=[];
+        this.issueType=[]; this.issueTypeList =[]
+        this.filterByQueryType =[]; this.queryTypeList=[];
+        this.dataObject=[]
+        this.gs.manageRefreshTrigger.next(true)
+        this.getInitload();
+        this.gs.dataRangeValue?.pipe(takeUntil(this.destroy$))?.subscribe({
+          next: (data: any) => {
+            if (data) {
+              this.headerFilters = data;
+              this.userList_req = {
+                limit: 10000,
+                offset: 1,
+                userType: this.users.userType,
+              };
+              this.getstoreFilter();
+            }
+          },
+        });
+        if (this.type === "installation") {
+          this.typeName = "Installed By";
+          this.statusType = [
+            { text: "Onboarded", id: "onboarded" },
+            { text: "Paired", id: "paired" },
+            { text: "Installationfailed", id: "installationfailed" },
+            { text: "Deployed", id: "deployed" },
+          ];
+        } else {
+          this.typeName = "Resolved By";
+         
+          if (this.users.userType === "tango" &&  this.type ==='infra'){ 
+            this.statusType  = [
+              { text: "Open", id: "open" },
+              { text: "In Progress", id: "inprogress" },
+              { text: "Refresh Ticket", id: "refreshticket" },
+              { text: "Closed", id: "closed" },
+            ];
+        }else{
+          this.statusType = [
+            { text: "Open", id: "open" },
+            { text: "In Progress", id: "inprogress" },
+            { text: "Closed", id: "closed" },
+          ];
+        }
+          this.issueTypeList = [
+            { text: "High Count", id: "highcount" },
+            { text: "Low Count", id: "lowcount" },
+          ];
+          this.queryTypeList = [
+            { text: "Internal", id: "internal" },
+            { text: "External", id: "external" },
+          ];
+        }
+      });
+  }
+  getInitload() {
+    this.searchValue = "";
+    this.limit = 10;
+    this.pageSize = 10;
+    this.currentPage = 1;
+    this.offset = 1;
+    this.selectedTab = "total";
+    this.loading = true;
+    this.noData = false;
+    this.sortedColumn='';
+  }
+  getstoreFilter() {
+    this.service
+      .getSotresList({ issueType: this.type,clientId:this.headerFilters.clients })
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({  
+        next: (res: any) => {
+        if (res && res.code === 200) {
+          this.storeList = res?.data?.data;
+          this.storeList.forEach((element: any) => {
+            element.text = element.storeId;
+            element.id = element.storeId;
+          });
+          if(this.users.userType === "tango"){
+            this.getuserlist();
+          } else {
+            if(this.type ==='installation'){
+            this.dataObject = [
+              { Description: "Store ID", Issues: this.storeList },
+              { Description: "Deployed Status", Issues: this.statusType },
+            ];
+          } else if(this.type ==='infra' || this.type ==='dataMismatch'){
+            this.dataObject = [
+              { Description: "Store ID", Issues: this.storeList },
+              { Description: "Status", Issues: this.statusType },
+            ]; 
+          }else if(this.type ==='mat' ){
+            this.dataObject = [
+              { Description: "Status", Issues: this.statusType },
+            ]; 
+          }
+          }
+          this.getTable();
+        }else{
+           this.getTable();
+        }
+      },
+      error: (err: any) => {
+        this.loading = false;
+        this.noData = true;
+        this.cd.detectChanges();
+      },
+      complete: () => {},
+  });
+  }
+  getuserlist() {
+    this.service
+      .getUserList(this.userList_req)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((res: any) => {
+        if (res && res.code === 200) {
+          this.userList = res?.data?.result;
+          this.userList?.forEach((element: any) => {
+            element.text = element.userName;
+            element.id = element.email;
+          });
+        }
+        
+        if (this.users.userType === "tango" && (this.type ==='installation')) {
+          this.dataObject = [
+            { Description: "Store ID", Issues: this.storeList },
+            { Description: "Deployed Status", Issues: this.statusType },
+            { Description: this.typeName, Issues: this.userList },
+          ];
+         } else if (this.users.userType === "tango" &&  this.type ==='infra') {
+          this.dataObject = [
+            { Description: "Store ID", Issues: this.storeList },
+            { Description: "Status", Issues: this.statusType },
+            { Description: this.typeName, Issues: this.userList },
+          ];
+         } else if(this.users.userType === "tango" && this.type ==='dataMismatch'){
+          this.dataObject = [
+            { Description: "Store ID", Issues: this.storeList },
+            { Description: "Query Type", Issues: this.queryTypeList },
+            { Description: "Status", Issues: this.statusType },
+          ];
+         } else if(this.type ==='mat'){
+          this.dataObject = [
+            { Description: "Status", Issues: this.statusType },
+          ];
+         } 
+      });
+  }
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+  searchData() {
+    this.currentPage = 1;
+    this.offset = 1;
+    this.limit=10;
+    this.getTable();
+  }
+
+  onSort(column: string) {
+    if (this.sortedColumn === column) {
+      this.sortDirection = this.sortDirection === 1 ? -1 : 1;
+    } else {
+      this.sortedColumn = column;
+      this.sortDirection = 1;
+    }
+    this.getTable();
+  }
+  exportXLSX() {
+    let obj: Record<string, any> = {
+      clientId: this.headerFilters?.clients,
+      fromDate: this.headerFilters?.date?.startDate,
+      toDate: this.headerFilters?.date?.endDate,
+      offset: this.offset,
+      limit: this.limit,
+      filterIssue: this.selectedTab ? this.selectedTab : "",
+      searchValue: this.searchValue ? this.searchValue : "",
+      export: true,
+    };
+    if (this.sortedColumn) {
+      obj.sortColumName = this.sortedColumn;
+      obj.sortBy = this.sortDirection;
+    }
+    if(this.type === "installation" || this.type === "infra"){
+      if (this.filterByStores?.length) {
+        obj.storeIdFilter = this.filterByStores ? this.filterByStores : [];
+      } 
+      if (this.filterByStatus?.length) {
+        obj.statusFilter = this.filterByStatus ? this.filterByStatus : [];
+      }
+      if (this.filterByinstalled?.length) {
+        obj.userFilter = this.filterByinstalled ? this.filterByinstalled : [];
+      }
+    }else if(this.type ==="mat"){
+      if (this.filterByStatus?.length) {
+        obj.statusFilter = this.filterByStatus ? this.filterByStatus : [];
+      }
+    }  else {
+      if (this.filterByStores?.length) {
+        obj.filterByStores = this.filterByStores ? this.filterByStores : [];
+      } 
+      if (this.filterByStatus?.length) {
+        obj.filterByStatus = this.filterByStatus ? this.filterByStatus : [];
+      }
+      if(this.filterByQueryType?.length){
+        obj.filterByQueryType = this.filterByQueryType ? this.filterByQueryType : [];
+    }
+  }
+    if (this.type === "installation") {
+      this.service
+        .exportInstallationList(obj)
+        .pipe(takeUntil(this.destroy$))
+        .subscribe({
+          next: (res: any) => {
+            this.excelservice.saveAsExcelFile(res, 'Installation')
+
+          },
+          error: (err: any) => {
+            this.loading = false;
+            this.noData = true;
+            this.cd.detectChanges();
+          },
+          complete: () => {},
+        });
+    } else if (this.type === "infra") {
+      this.service
+        .exportInfraList(obj)
+        .pipe(takeUntil(this.destroy$))
+        .subscribe({
+          next: (res: any) => {
+           
+              this.excelservice.saveAsExcelFile(res, 'Infra')
+            
+          },
+          error: (err: any) => {
+            this.loading = false;
+            this.noData = true;
+            this.cd.detectChanges();
+          },
+          complete: () => {},
+        });
+    }  else if (this.type === "mat") {
+      this.service
+        .exportMatList(obj)
+        .pipe(takeUntil(this.destroy$))
+        .subscribe({
+          next: (res: any) => {
+           
+              this.excelservice.saveAsExcelFile(res, 'Mat')
+            
+          },
+          error: (err: any) => {
+            this.loading = false;
+            this.noData = true;
+            this.cd.detectChanges();
+          },
+          complete: () => {},
+        });
+    }else if(this.type==='dataMismatch'){
+      this.service
+      .exportDataMismatchList(obj)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          this.excelservice.saveAsExcelFile(res, 'Data Mismatch')
+        },
+        error: (err: any) => {
+          this.loading = false;
+          this.noData = true;
+          this.cd.detectChanges();
+        },
+        complete: () => {},
+      });
+    }
+
+
+
+  }
+
+  selectedTabs(type: any) {
+    this.currentPage = 1;
+    this.offset = 1;
+    this.limit=10;
+    if(this.type ==='dataMismatch'){
+    this.selectedTab = type.name.replace(/\s+/g, '').toLocaleLowerCase();
+    this.currentPage = 1;
+    this.offset = 1;
+    this.limit = 10;
+    this.pageSize = 10;
+    this.getTable();
+    this.transformName(type);
+    } else {
+      this.selectedTab = type.name;
+      this.currentPage = 1;
+      this.offset = 1;
+      this.limit = 10;
+      this.pageSize = 10;
+    this.getTable();
+    }
+  }
+  transformName(name: string): string {
+    return name.toLocaleLowerCase().replace(/\s+/g, '');
+    
+  }
+  onPageChange(pageOffset: number) {
+    this.currentPage = Number(pageOffset);
+    this.offset = Number(pageOffset);
+    this.limit =10;
+    this.getTable();
+  }
+
+  onPageSizeChange(pageSize: number) {
+    this.pageSize = Number(pageSize);
+    this.limit = Number(pageSize);
+    this.currentPage = 1;
+    this.offset = 1;
+    this.getTable();
+  }
+  selectAllStore(event: any) {
+    this.selectAll = event.target.checked;
+    this.tableListArray.forEach((obj: any) => (obj.checked = this.selectAll));
+    // If all checkboxes are checked, assign all ticketIds to assignStores, otherwise clear assignStores
+    this.assignStores = this.selectAll
+      ? this.tableListArray.map((obj: any) => obj.ticketId)
+      : [];
+    this.assignTicket = this.selectAll; // Update assignTicket based on selectAll state
+  }
+
+  updateCheck(event: any, ticketId: any) {
+    const ticket = this.tableListArray.find(
+      (obj: any) => obj.ticketId === ticketId
+    );
+
+    if (ticket) {
+      ticket.checked = event.target.checked;
+      // If the checkbox is checked, add or remove the corresponding array from the selected arrays
+      if (event.target.checked) {
+        this.assignStores.push(ticketId);
+      } else {
+        const index = this.assignStores.indexOf(ticketId);
+        if (index !== -1) {
+          this.assignStores.splice(index, 1);
+        }
+      }
+      // Update selectAll based on the current state of checkboxes
+      this.selectAll = this.tableListArray.every((obj: any) => obj.checked);
+      // Update assignTicket based on whether any individual ticket checkbox is checked
+      this.assignTicket = this.tableListArray.some((obj: any) => obj.checked);
+    }
+  }
+
+  addAssignTicket() {
+    const modalRef = this.modalService.open(AddCsmModalComponent, {
+      centered: true,
+      size: "md",
+      scrollable: true,
+      backdrop:"static"
+    });
+    modalRef.componentInstance.ticketId = this.assignStores;
+    modalRef.result.then((result) => {
+      if (result === "submit") {
+        this.searchValue = "";
+        this.assignStores = [];
+        this.selectAll = false;
+        this.assignTicket = false;
+        this.getTable();
+      }
+    });
+  }
+
+  applyFilters(event: any) {
+    if (event?.length) {
+      event.forEach((element: any) => {
+        if (element.Description === "Store ID") {
+          this.filterByStores = element.Issues.map((val: any) => val?.id);
+        }
+       if(this.type !=='installation'){
+        if (element.Description === "Status") {
+          this.filterByStatus = element.Issues.map((val: any) => val?.id);
+        }
+      } if(this.type==='installation'){
+        if (element.Description === "Deployed Status") {
+          this.filterByStatus = element.Issues.map((val: any) => val?.id);
+        }
+      }
+        if (this.users.userType === "tango" && (this.type ==='installation' || this.type==='infra')) {
+          if (element.Description === this.typeName) {
+            this.filterByinstalled = element.Issues.map((val: any) => val?.id);
+          }
+        } else {
+          this.filterByinstalled = [];
+        }
+        if (element.Description === "Query Type") {
+          this.filterByQueryType = element.Issues.map((val: any) => val?.id);
+        }
+        // if (element.Description === "Issue Type") {
+        //   this.issueType = element.Issues.map((val: any) => val?.id);
+        // }
+      });
+    }
+
+    this.currentPage = 1;
+    this.offset = 1;
+    this.limit=10;
+    this.getTable();
+  }
+
+  getTable() {
+    this.loading = true;
+    this.noData = false;
+    let obj: Record<string, any> = {
+      clientId: this.headerFilters?.clients,
+      fromDate: this.headerFilters?.date?.startDate,
+      toDate: this.headerFilters?.date?.endDate,
+      offset: this.offset,
+      limit: this.limit,
+      filterIssue: this.selectedTab ? this.selectedTab : "",
+      searchValue: this.searchValue ? this.searchValue : "",
+      export: false,
+    };
+    if (this.sortedColumn) {
+      if(this.type ==='dataMismatch'){
+        obj.sortColumnName = this.sortedColumn;
+        obj.sortBy = this.sortDirection;
+      } else {
+      obj.sortColumName = this.sortedColumn;
+      obj.sortBy = this.sortDirection;
+      }
+    }
+    if(this.type === "installation" || this.type === "infra"){
+    if (this.filterByStores?.length) {
+      obj.storeIdFilter = this.filterByStores ? this.filterByStores : [];
+    } 
+    if (this.filterByStatus?.length) {
+      obj.statusFilter = this.filterByStatus ? this.filterByStatus : [];
+    }
+    if (this.filterByinstalled?.length) {
+      obj.userFilter = this.filterByinstalled ? this.filterByinstalled : [];
+    }
+  } else if(this.type === "mat"){
+    if (this.filterByStatus?.length) {
+      obj.statusFilter = this.filterByStatus ? this.filterByStatus : [];
+    }
+  } else {
+    if (this.filterByStores?.length) {
+      obj.filterByStores = this.filterByStores ? this.filterByStores : [];
+    } 
+    if (this.filterByStatus?.length) {
+      obj.filterByStatus = this.filterByStatus ? this.filterByStatus : [];
+    }
+    if(this.filterByQueryType?.length){
+      obj.filterByQueryType = this.filterByQueryType ? this.filterByQueryType : [];
+  }
+  }
+    // console.log(obj)
+    // return
+    if (this.type === "installation") {
+      this.service
+        .getInstallationList(obj)
+        .pipe(takeUntil(this.destroy$))
+        .subscribe({
+          next: (res: any) => {
+            if (res && res.code === 200) {
+              this.listArray = res.data.response;
+              if(res.data.result.length ===0){
+                this.loading = false;
+                this.noData = true;
+              } else {
+              this.tableListArray = res.data.result;
+                this.totalItems = res.data?.count;
+                if (this.totalItems < 10) { this.paginationSizes = [this.totalItems] } else { this.paginationSizes = [10, 20, 30] }
+              this.loading = false;
+              this.noData = false;
+              this.selectAll = false;
+              this.assignTicket =false;
+              this.cd.detectChanges();
+              }
+            } else {
+              this.loading = false;
+              this.noData = true;
+            }
+          },
+          error: (err: any) => {
+            this.loading = false;
+            this.noData = true;
+            this.cd.detectChanges();
+          },
+          complete: () => {},
+        });
+    } else if (this.type === "infra") {
+      this.service
+        .getInfraList(obj)
+        .pipe(takeUntil(this.destroy$))
+        .subscribe({
+          next: (res: any) => {
+            if (res && res.code === 200) {
+              this.listArray = res.data.response;
+              if(res.data.result.length ===0){
+                this.loading = false;
+                this.noData = true;
+              } else {
+              this.tableListArray = res.data.result;
+                this.totalItems = res.data?.count;
+                if (this.totalItems < 10) { this.paginationSizes = [this.totalItems] } else { this.paginationSizes = [10, 20, 30] }
+              this.loading = false;
+              this.noData = false;
+              this.selectAll = false;
+              this.assignTicket =false;
+              }
+            } else {
+              this.loading = false;
+              this.noData = true;
+            }
+          },
+          error: (err: any) => {
+            this.loading = false;
+            this.noData = true;
+            this.cd.detectChanges();
+          },
+          complete: () => {},
+        });
+    } else if (this.type === "mat") {
+      this.service
+        .getMatList(obj)
+        .pipe(takeUntil(this.destroy$))
+        .subscribe({
+          next: (res: any) => {
+            if (res && res.code === 200) {
+              this.listArray = res?.data?.response;
+              this.tableListArray = res?.data?.result;
+              this.totalItems = res.data?.count;
+              if (this.totalItems < 10) { this.paginationSizes = [this.totalItems] } else { this.paginationSizes = [10, 20, 30] }              this.loading = false;
+              this.noData = false;
+            } else {
+              this.loading = false;
+              this.noData = true;
+            }
+          },
+          error: (err: any) => {
+            this.loading = false;
+            this.noData = true;
+            this.cd.detectChanges();
+          },
+          complete: () => {},
+        }); } else if(this.type==='dataMismatch'){
+          this.service
+          .getDataMismathList(obj)
+          .pipe(takeUntil(this.destroy$))
+          .subscribe({
+            next: (res: any) => {
+              if (res && res.code === 200) {
+                this.listArray = res?.data?.response;
+                if(res.data.result.length ===0){
+                  this.loading = false;
+                  this.noData = true;
+                } else {
+                this.tableListArray = res?.data?.result;
+                  this.totalItems = res.data?.count;
+                  if (this.totalItems < 10) { this.paginationSizes = [this.totalItems] } else { this.paginationSizes = [10, 20, 30] }
+                this.loading = false;
+                this.noData = false;
+                this.selectAll = false;
+                this.assignTicket =false;
+                this.cd.detectChanges();
+                }
+              } else {
+                this.loading = false;
+                this.noData = true;
+              }
+            },
+            error: (err: any) => {
+              this.loading = false;
+              this.noData = true;
+              this.cd.detectChanges();
+            },
+            complete: () => {},
+          });
+        }
+  }
+
+  routeToStore(storeId: any, clientId: any) {
+    let data: any = JSON.parse(localStorage.getItem("header-filters") || "");
+    data.store = storeId;
+    data.client = clientId;
+    localStorage.setItem("header-filters", JSON.stringify(data));
+    this.gs.dataRangeValue.next(data);
+    this.router.navigate(['/manage/stores/infra-ticket'], { 
+      queryParams: { storeId: storeId }
+    });
+  }
+  routeToMat(storeId: any, clientId: any,clientName:any) {
+    let data: any = JSON.parse(localStorage.getItem("header-filters") || "");
+    data.store = storeId;
+    data.client = clientId;
+    data.clientName = clientName ? clientName:'Stores';
+    localStorage.setItem("header-filters", JSON.stringify(data));
+    this.gs.dataRangeValue.next(data);
+    this.router.navigate(['/manage/stores/mat'], { 
+      queryParams: { storeId: storeId }
+    });
+  }
+  commentModal(obj:any){
+    const modalRef = this.modalService.open(CommentModelComponent, {
+      centered: true,
+      size: "md",
+      scrollable: true,
+      backdrop:"static"
+    });
+    modalRef.componentInstance.ticketId = obj.ticketId;
+    modalRef.result.then((result) => {
+    })
+  }
+
+  tickets(type:any,clientId:any,storeId:any,clientName:any){
+    if(type ==='mat'){
+      let data: any = JSON.parse(localStorage.getItem("header-filters") || "");
+      data.store = storeId;
+      data.client = clientId;
+      data.clientName = clientName ? clientName:'Stores';
+      localStorage.setItem("header-filters", JSON.stringify(data));
+      this.gs.dataRangeValue.next(data);
+      this.router.navigate(['/manage/stores/mat'], { 
+        queryParams: { storeId: storeId }
+      });
+    } else {
+  let data: any = JSON.parse(localStorage.getItem("header-filters") || "");
+  data.store = storeId;
+  data.client = clientId;
+  data.clientName = clientName ? clientName:'Stores';
+  localStorage.setItem("header-filters", JSON.stringify(data));
+  this.gs.dataRangeValue.next(data);
+  this.router.navigate(['/manage/stores/infra-ticket'], { 
+    queryParams: { storeId: storeId,type:type }
+  });
+}
+  }
+
+  clientTickets(clientId:any,storeId:any,clientName:any){
+    let data: any = JSON.parse(localStorage.getItem("header-filters") || "");
+    data.store = storeId;
+    data.client = clientId;
+    data.clientName = clientName ? clientName:'Stores';
+    localStorage.setItem("header-filters", JSON.stringify(data));
+    this.gs.dataRangeValue.next(data);
+    this.router.navigate(['/manage/stores']);
+  }
+  storeTickets(clientId:any,storeId:any,clientName:any){
+    let data: any = JSON.parse(localStorage.getItem("header-filters") || "");
+    data.store = storeId;
+    data.client = clientId;
+    data.clientName = clientName ? clientName:'Stores';
+    localStorage.setItem("header-filters", JSON.stringify(data));
+    this.gs.dataRangeValue.next(data);
+    this.router.navigate(['/manage/stores/cameras'], { 
+      queryParams: { storeId: storeId }
+    });
+  }
+  userTickets(clientId:any,storeId:any){
+    let data: any = JSON.parse(localStorage.getItem("header-filters") || "");
+    data.store = storeId;
+    data.client = clientId;
+    localStorage.setItem("header-filters", JSON.stringify(data));
+    this.gs.dataRangeValue.next(data);
+    this.router.navigate(['/manage/users']);
+  }
+
+  setpageSize() {
+    if (this.totalItems < 10) {
+      return this.totalItems;
+    } else {
+      return this.pageSize;
+    }
+  }
+
+}