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   @ViewChild(MatTable) table: MatTable<T>;
  64   @ViewChild('input') input: ElementRef;
  65
  66   limit: number = 1000;
  67   full: boolean = true;
  68   applicationService: any;
  69   public displayedColumns = [];
  70   public columnsInfoList = [];
  71   public dataSource;
  72   isPaginationRequired: boolean = false;
  73   pageSize: number = 5;
  74   isEditMode: boolean;
  75   isSearchEnabled: boolean;
  76   isServerSidePaginationEnabled: boolean  = false;
  77   showAddButton: boolean = true;
  78   result : any;
  79   totalRowsCount: any;
  80   showSpinner: boolean;
  81
  82   constructor(public dataTableService: RdpDataTableService, private rdpModal: RdpModalService) { }
  83
  84   ngOnInit(): void {
  85     if (this.data) {
  86       this.setData(this.data);
  87     }
  88   }
  89
  90   ngAfterViewInit() {
  91     if(this.isServerSidePaginationEnabled){
  92
  93       this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
  94
  95       fromEvent(this.input.nativeElement,'keyup')
  96       .pipe(
  97           debounceTime(150),
  98           distinctUntilChanged(),
  99           tap(() => {
 100               this.paginator.pageIndex = 0;
 101
 102               this.loadData(this.paginator.pageIndex, this.paginator.pageSize);
 103           })
 104       ).subscribe();
 105
 106       merge(this.sort.sortChange, this.paginator.page)
 107       .pipe(
 108           tap(() => this.loadData(this.paginator.pageIndex, this.paginator.pageSize))
 109       ).subscribe();
 110     }
 111
 112     this.dataSource.paginator = this.paginator;
 113     this.dataSource.sort = this.sort;
 114   }
 115
 116   ngOnChanges() {
 117      if (this.settings) {
 118       console.log("Table setting Objects >>>>", this.settings);
 119
 120       this.applicationService = this.settings.applicationService;
 121
 122       this.settings.columns.forEach(element => {
 123         this.displayedColumns.push(element.title);
 124         this.columnsInfoList.push(element);
 125       });
 126
 127       if (!this.settings.isReadOnly) {
 128         this.displayedColumns.push('edit');
 129       }
 130
 131       if (!this.settings.isReadOnly) {
 132         this.displayedColumns.push('delete');
 133       }
 134
 135       if (this.settings.isReadOnly) {
 136         this.showAddButton = false;
 137       }
 138
 139       if (this.settings.isTableSearchEnabled) {
 140         this.isSearchEnabled = true;
 141       }
 142
 143       if(this.settings.isServerSidePaginationEnabled){
 144         this.isServerSidePaginationEnabled = true;
 145       }
 146
 147       if (this.settings.isToggleEnabled) {
 148         this.displayedColumns.push('toggle');
 149       }
 150
 151       if (this.settings.isPaginationEnabled) {
 152         this.isPaginationRequired = true;
 153         if (this.settings.paginationsSize) {
 154           this.pageSize = this.settings.paginationsSize;
 155         }
 156       }
 157       console.log("this.displayedColumns>>>>>", this.displayedColumns);
 158     }
 159   }
 160
 161   setData(data) {
 162     if(this.settings.isServerSidePaginationEnabled){
 163       console.log("Server side pagination is enabled");
 164       this.dataSource = new RDPDataSource();
 165       this.dataSource.loadData(this.settings.applicationService,'', this.sort.active, this.sort.direction, 0, this.settings.paginationsSize);
 166       this.totalRowsCount = this.getTotalRowCount();
 167
 168     }else{
 169       this.dataSource = new MatTableDataSource([]);
 170       console.log("Server side pagination is not enabled");
 171       if (Array.isArray(data)) {
 172         this.dataSource.data = data;
 173         this.totalRowsCount = data.length;
 174       }
 175     }
 176   }
 177
 178   getTotalRowCount(): any {
 179     let totalRows = 0;
 180     try {
 181       totalRows = this.settings.applicationService.getTotalRowCount();
 182     }catch (error){
 183        console.log("Error while getting total row count :: ",error);
 184     }
 185     return totalRows;
 186   }
 187
 188   loadData(pageIndex:any, pageSize:any) {
 189     this.dataSource = new RDPDataSource();
 190     this.dataSource.loadData(this.settings.applicationService, this.input.nativeElement.value, this.sort.active, this.sort.direction, pageIndex , pageSize);
 191   }
 192
 193   onPaginationChange(event:any){
 194     console.log("onPaginationChange event :: ",event);
 195     //this.loadData(event.pageIndex, event.pageSize);
 196   }
 197
 198   addRow(data: any) {
 199     this.dataTableService.add(this.applicationService, data);
 200   }
 201
 202   updateRow(data: any) {
 203    return this.dataTableService.update(this.applicationService, data);
 204   }
 205
 206   getRow(data: any) {
 207     this.dataTableService.get(this.applicationService, data);
 208   }
 209
 210   deleteRow(data: any) {
 211     this.dataTableService.delete(this.applicationService, data);
 212   }
 213
 214   applyFilter(filterValue: string) {
 215     this.dataSource.filter = filterValue.trim().toLowerCase();
 216   }
 217
 218   cloneObject: any;
 219   /**
 220    * openAddNewRoleModal
 221    * @param rowData
 222    */
 223   openEditModalPopup(rowData: any) {
 224     this.showSpinner = true;
 225     console.log("Row data : ", rowData);
 226     this.cloneObject = Object.assign({}, rowData)
 227     console.log("Update or Add functionality intialized");
 228     const modalRef = this.rdpModal.open(RdpDataTableEditComponent, { size: 'lg' });
 229     modalRef.componentInstance.title = 'Edit';
 230     modalRef.componentInstance.settings = this.settings;
 231     if (this.cloneObject.data != 'undefined' && this.cloneObject) {
 232       modalRef.componentInstance.rowdata = this.cloneObject;
 233       modalRef.componentInstance.applicationService = this.applicationService;
 234       modalRef.componentInstance.isEditMode = true;
 235       this.isEditMode = true;
 236     } else {
 237       modalRef.componentInstance.rowdata = {};
 238       modalRef.componentInstance.isEditMode = false;
 239       this.isEditMode = false;
 240     }
 241     modalRef.componentInstance.passEntry.subscribe((receivedEntry: any) => {
 242       if (receivedEntry) {
 243         this.data = receivedEntry;
 244         this.setData(this.data);
 245       }
 246       this.showSpinner = false;
 247     });
 248
 249   }
 250
 251   handleScroll = (scrolled: boolean) => {
 252     scrolled ? this.dataSource : _noop();
 253   }
 254
 255   toggleUserActive(rowData: any) {
 256     console.log("Row data : ", rowData);
 257   }
 258
 259   //hasMore = () => !this.dataSource || this.dataSource.data.length < this.limit;
 260
 261 }