gerrit.onap Code Review - portal/sdk.git/blob

   1 /*
   2  * ============LICENSE_START==========================================
   3  * ONAP Portal SDK
   4  * ===================================================================
   5  * Copyright © 2019 AT&T Intellectual Property. All rights reserved.
   6  * ===================================================================
   7  *
   8  * Unless otherwise specified, all software contained herein is licensed
   9  * under the Apache License, Version 2.0 (the "License");
  10  * you may not use this software except in compliance with the License.
  11  * You may obtain a copy of the License at
  12  *
  13  *             http://www.apache.org/licenses/LICENSE-2.0
  14  *
  15  * Unless required by applicable law or agreed to in writing, software
  16  * distributed under the License is distributed on an "AS IS" BASIS,
  17  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  18  * See the License for the specific language governing permissions and
  19  * limitations under the License.
  20  *
  21  * Unless otherwise specified, all documentation contained herein is licensed
  22  * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
  23  * you may not use this documentation except in compliance with the License.
  24  * You may obtain a copy of the License at
  25  *
  26  *             https://creativecommons.org/licenses/by/4.0/
  27  *
  28  * Unless required by applicable law or agreed to in writing, documentation
  29  * distributed under the License is distributed on an "AS IS" BASIS,
  30  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  31  * See the License for the specific language governing permissions and
  32  * limitations under the License.
  33  *
  34  * ============LICENSE_END============================================
  35  *
  36  *
  37  */
  38
  39 import { Component, Input, OnInit, OnChanges, ViewChild, AfterViewInit, ElementRef} from '@angular/core';
  40 import { MatPaginator, MatSort, MatTable, MatTableDataSource } from '@angular/material';
  41 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
  42 import { RdpDataTableService } from '../shared/rdp-data-table.service';
  43 import { RdpDataTableEditComponent } from './rdp-data-table-edit/rdp-data-table-edit.component';
  44 import { noop as _noop, update } from 'lodash-es';
  45 import { RDPDataSource } from '../datasouce/RDPDataSource';
  46 import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
  47 import { merge, fromEvent } from "rxjs";
  48 import { RdpModalService } from '../services/rdp-modal.service';
  49
  50
  51 @Component({
  52   selector: 'rdp-data-table',
  53   templateUrl: './rdp-data-table.component.html',
  54   styleUrls: ['./rdp-data-table.component.scss']
  55 })
  56 export class RdpDataTableComponent<T> implements OnChanges, AfterViewInit, OnInit {
  57
  58   @Input() data: any;
  59   @Input() settings: any;
  60
  61   @ViewChild(MatSort) sort: MatSort;
  62   //@ViewChild(MatPaginator) paginator: MatPaginator;
  63   private paginator: MatPaginator;
  64
  65   @ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
  66     this.paginator = mp;
  67     this.setData(this.data);
  68   }
  69
  70   @ViewChild(MatTable) table: MatTable<T>;
  71   @ViewChild('input') input: ElementRef;
  72
  73   limit: number = 1000;
  74   full: boolean = true;
  75   applicationService: any;
  76   public displayedColumns = [];
  77   public columnsInfoList = [];
  78   public dataSource;
  79   isPaginationRequired: boolean = false;
  80   pageSize: number = 5;
  81   isEditMode: boolean;
  82   isSearchEnabled: boolean;
  83   isServerSidePaginationEnabled: boolean  = false;
  84   showAddButton: boolean = false;
  85   result : any;
  86   totalRowsCount: any;
  87   showSpinner: boolean;
  88
  89   constructor(public dataTableService: RdpDataTableService, private rdpModal: RdpModalService) { }
  90
  91   ngOnInit(): void {
  92     if (this.data) {
  93       this.setData(this.data);
  94     }
  95   }
  96
  97   ngAfterViewInit() {
  98     if(this.settings && this.settings.isServerSidePaginationEnabled && this.data){
  99
 100       this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
 101
 102       fromEvent(this.input.nativeElement,'keyup')
 103       .pipe(
 104           debounceTime(150),
 105           distinctUntilChanged(),
 106           tap(() => {
 107               this.paginator.pageIndex = 0;
 108
 109               this.loadData(this.paginator.pageIndex, this.paginator.pageSize);
 110           })
 111       ).subscribe();
 112
 113       merge(this.sort.sortChange, this.paginator.page)
 114       .pipe(
 115           tap(() => this.loadData(this.paginator.pageIndex, this.paginator.pageSize))
 116       ).subscribe();
 117     }
 118     if(this.data) {
 119       this.dataSource.paginator = this.paginator;
 120       this.dataSource.sort = this.sort;
 121     }
 122   }
 123
 124   ngOnChanges() {
 125      if(this.data) {
 126        this.setData(this.data);
 127      }
 128      if (this.settings) {
 129       console.log("Table setting Objects >>>>", this.settings);
 130
 131       this.applicationService = this.settings.applicationService;
 132
 133       this.settings.columns.forEach(element => {
 134         this.displayedColumns.push(element.title);
 135         this.columnsInfoList.push(element);
 136       });
 137
 138       if (!this.settings.isReadOnly) {
 139         this.displayedColumns.push('edit');
 140       }
 141
 142       if (!this.settings.isReadOnly) {
 143         this.displayedColumns.push('delete');
 144       }
 145
 146       if (this.settings.isReadOnly) {
 147         this.showAddButton = false;
 148       }else{
 149         this.showAddButton = true;
 150       }
 151
 152       if (this.settings.isTableSearchEnabled) {
 153         this.isSearchEnabled = true;
 154       }
 155
 156       if(this.settings.isServerSidePaginationEnabled){
 157         this.isServerSidePaginationEnabled = true;
 158       }
 159
 160       if (this.settings.isToggleEnabled) {
 161         this.displayedColumns.push('toggle');
 162       }
 163
 164       if (this.settings.isPaginationEnabled) {
 165         this.isPaginationRequired = true;
 166         if (this.settings.paginationsSize) {
 167           this.pageSize = this.settings.paginationsSize;
 168         }
 169       }
 170       console.log("this.displayedColumns>>>>>", this.displayedColumns);
 171     }
 172   }
 173
 174   setData(data) {
 175     if(this.settings && this.settings.isServerSidePaginationEnabled){
 176       console.log("Server side pagination is enabled");
 177       this.dataSource = new RDPDataSource();
 178       this.dataSource.loadData(this.settings.applicationService,'', this.sort.active, this.sort.direction, 0, this.settings.paginationsSize);
 179       this.totalRowsCount = this.getTotalRowCount();
 180
 181     }else{
 182       this.dataSource = new MatTableDataSource([]);
 183       console.log("Server side pagination is not enabled");
 184       if (Array.isArray(data)) {
 185         this.dataSource.data = data;
 186         this.dataSource.paginator = this.paginator;
 187         this.dataSource.sort = this.sort;
 188         this.totalRowsCount = data.length;
 189       }
 190     }
 191   }
 192
 193   getTotalRowCount(): any {
 194     let totalRows = 0;
 195     try {
 196       totalRows = this.settings.applicationService.getTotalRowCount();
 197     }catch (error){
 198        console.log("Error while getting total row count :: ",error);
 199     }
 200     return totalRows;
 201   }
 202
 203   loadData(pageIndex:any, pageSize:any) {
 204     this.dataSource = new RDPDataSource();
 205     this.dataSource.loadData(this.settings.applicationService, this.input.nativeElement.value, this.sort.active, this.sort.direction, pageIndex , pageSize);
 206   }
 207
 208   onPaginationChange(event:any){
 209     console.log("onPaginationChange event :: ",event);
 210     //this.loadData(event.pageIndex, event.pageSize);
 211   }
 212
 213   addRow(data: any) {
 214     this.dataTableService.add(this.applicationService, data);
 215   }
 216
 217   updateRow(data: any) {
 218    return this.dataTableService.update(this.applicationService, data);
 219   }
 220
 221   getRow(data: any) {
 222     this.dataTableService.get(this.applicationService, data);
 223   }
 224
 225   deleteRow(data: any) {
 226     this.dataTableService.delete(this.applicationService, data);
 227   }
 228
 229   applyFilter(filterValue: string) {
 230     this.dataSource.filter = filterValue.trim().toLowerCase();
 231   }
 232
 233   cloneObject: any;
 234   /**
 235    * openAddNewRoleModal
 236    * @param rowData
 237    */
 238   openEditModalPopup(rowData: any) {
 239     this.showSpinner = true;
 240     console.log("Row data : ", rowData);
 241     this.cloneObject = Object.assign({}, rowData)
 242     console.log("Update or Add functionality intialized");
 243     const modalRef = this.rdpModal.open(RdpDataTableEditComponent, { size: 'lg' });
 244     modalRef.componentInstance.title = 'Edit';
 245     modalRef.componentInstance.settings = this.settings;
 246     if (this.cloneObject.data != 'undefined' && this.cloneObject) {
 247       modalRef.componentInstance.rowdata = this.cloneObject;
 248       modalRef.componentInstance.applicationService = this.applicationService;
 249       modalRef.componentInstance.isEditMode = true;
 250       this.isEditMode = true;
 251     } else {
 252       modalRef.componentInstance.rowdata = {};
 253       modalRef.componentInstance.isEditMode = false;
 254       this.isEditMode = false;
 255     }
 256     modalRef.componentInstance.passEntry.subscribe((receivedEntry: any) => {
 257       if (receivedEntry) {
 258         this.data = receivedEntry;
 259         this.setData(this.data);
 260       }
 261       this.showSpinner = false;
 262     });
 263
 264   }
 265
 266   handleScroll = (scrolled: boolean) => {
 267     scrolled ? this.dataSource : _noop();
 268   }
 269
 270   toggleUserActive(rowData: any) {
 271     console.log("Row data : ", rowData);
 272   }
 273
 274   //hasMore = () => !this.dataSource || this.dataSource.data.length < this.limit;
 275
 276 }