1 files changed, 266 insertions, 0 deletions
diff --git a/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table.component.ts b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table.component.ts
new file mode 100644
index 00000000..7187ca07
--- /dev/null
+++ b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table.component.ts
@@ -0,0 +1,266 @@
+/*
+ * ============LICENSE_START==========================================
+ * ONAP Portal SDK
+ * ===================================================================
+ * Copyright © 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+
+import { Component, Input, OnInit, OnChanges, ViewChild, AfterViewInit, ElementRef} from '@angular/core';
+import { MatPaginator, MatSort, MatTable, MatTableDataSource } from '@angular/material';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { RdpDataTableService } from '../shared/rdp-data-table.service';
+import { RdpDataTableEditComponent } from './rdp-data-table-edit/rdp-data-table-edit.component';
+import { noop as _noop, update } from 'lodash-es';
+import { RDPDataSource } from '../datasouce/RDPDataSource';
+import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
+import { merge, fromEvent } from "rxjs";
+import { RdpModalService } from '../services/rdp-modal.service';
+
+
+@Component({
+  selector: 'rdp-data-table',
+  templateUrl: './rdp-data-table.component.html',
+  styleUrls: ['./rdp-data-table.component.scss']
+})
+export class RdpDataTableComponent<T> implements OnChanges, AfterViewInit, OnInit {
+ 
+  @Input() data: any;
+  @Input() settings: any;
+  
+  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatTable) table: MatTable<T>;
+  @ViewChild('input') input: ElementRef;
+  
+  limit: number = 1000;
+  full: boolean = true;
+  applicationService: any;
+  public displayedColumns = [];
+  public columnsInfoList = [];
+  public dataSource;
+  isPaginationRequired: boolean = false;
+  pageSize: number = 5;
+  isEditMode: boolean;
+  isSearchEnabled: boolean;
+  isServerSidePaginationEnabled: boolean  = false;
+  showAddButton: boolean = true;
+  result : any;
+  totalRowsCount: any;
+
+
+  constructor(public dataTableService: RdpDataTableService, private rdpModal: RdpModalService) { }
+
+  ngOnInit(): void {
+    if (this.data) {
+      this.setData(this.data);
+    }
+  }
+
+  ngAfterViewInit() {
+    if(this.isServerSidePaginationEnabled){
+    
+      this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
+    
+      fromEvent(this.input.nativeElement,'keyup')
+      .pipe(
+          debounceTime(150),
+          distinctUntilChanged(),
+          tap(() => {
+              this.paginator.pageIndex = 0;
+
+              this.loadData(this.paginator.pageIndex, this.paginator.pageSize);
+          })
+      ).subscribe();
+   
+      merge(this.sort.sortChange, this.paginator.page)
+      .pipe(
+          tap(() => this.loadData(this.paginator.pageIndex, this.paginator.pageSize))
+      ).subscribe();  
+    }
+
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+  ngOnChanges() {
+     if (this.settings) {
+      console.log("Table setting Objects >>>>", this.settings);
+
+      this.applicationService = this.settings.applicationService;
+
+      this.settings.columns.forEach(element => {
+        this.displayedColumns.push(element.title);
+        this.columnsInfoList.push(element);
+      });
+
+      if (!this.settings.isReadOnly) {
+        this.displayedColumns.push('edit');
+      }
+
+      if (!this.settings.isReadOnly) {
+        this.displayedColumns.push('delete');
+      }
+
+      if (this.settings.isReadOnly) {
+        this.showAddButton = false;
+      }
+
+      if (this.settings.isTableSearchEnabled) {
+        this.isSearchEnabled = true;
+      }
+
+      if(this.settings.isServerSidePaginationEnabled){
+        this.isServerSidePaginationEnabled = true;
+      }
+
+      if (this.settings.isToggleEnabled) {
+        this.displayedColumns.push('toggle');
+      }
+
+      if (this.settings.isPaginationEnabled) {
+        this.isPaginationRequired = true;
+        if (this.settings.paginationsSize) {
+          this.pageSize = this.settings.paginationsSize;
+        }
+      }
+      console.log("this.displayedColumns>>>>>", this.displayedColumns);
+    }
+  }
+
+  setData(data) {
+    if(this.settings.isServerSidePaginationEnabled){
+      console.log("Server side pagination is enabled");
+      this.dataSource = new RDPDataSource();
+      this.dataSource.loadData(this.settings.applicationService,'', this.sort.active, this.sort.direction, 0, this.settings.paginationsSize);
+      this.totalRowsCount = this.getTotalRowCount();
+
+    }else{
+      this.dataSource = new MatTableDataSource([]);
+      console.log("Server side pagination is not enabled");
+      if (Array.isArray(data)) {
+        this.dataSource.data = data;
+        this.totalRowsCount = data.length;
+      }
+    }
+  }
+
+  getTotalRowCount(): any {
+    let totalRows = 0;
+    try { 
+      totalRows = this.settings.applicationService.getTotalRowCount();
+    }catch (error){
+       console.log("Error while getting total row count :: ",error);
+    }  
+    return totalRows;
+  }
+
+  loadData(pageIndex:any, pageSize:any) {
+    this.dataSource = new RDPDataSource();
+    this.dataSource.loadData(this.settings.applicationService, this.input.nativeElement.value, this.sort.active, this.sort.direction, pageIndex , pageSize);
+  } 
+
+  onPaginationChange(event:any){
+    console.log("onPaginationChange event :: ",event);
+    //this.loadData(event.pageIndex, event.pageSize);
+  }
+
+  addRow(data: any) {
+    this.dataTableService.add(this.applicationService, data);
+  }
+
+  updateRow(data: any) {
+   return this.dataTableService.update(this.applicationService, data);
+  }
+
+  getRow(data: any) {
+    this.dataTableService.get(this.applicationService, data);
+  }
+
+  deleteRow(data: any) {
+    this.dataTableService.delete(this.applicationService, data);
+  }
+
+  applyFilter(filterValue: string) {
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
+  cloneObject: any;
+  /**
+   * openAddNewRoleModal
+   * @param rowData 
+   */
+  openEditModalPopup(rowData: any) {
+    this.cloneObject = Object.assign({}, rowData)
+    console.log("Copied Object : ", this.cloneObject);
+    if (this.cloneObject) {
+      const modalRef = this.rdpModal.open(RdpDataTableEditComponent, { size: 'lg' });
+      modalRef.componentInstance.title = 'Edit';
+      modalRef.componentInstance.settings = this.settings;
+      if (this.cloneObject != 'undefined' && this.cloneObject) {
+        modalRef.componentInstance.rowdata = this.cloneObject;
+        modalRef.componentInstance.isEditMode = true;
+        this.isEditMode = true;
+      } else {
+        modalRef.componentInstance.rowdata = {};
+        modalRef.componentInstance.isEditMode = false;
+        this.isEditMode = false;
+      }
+      modalRef.componentInstance.passEntry.subscribe((receivedEntry: any) => {
+        if (receivedEntry) {
+        console.log("Original Object : ", rowData);
+        let response = this.updateRow(receivedEntry);
+        console.log("Response form application ",response);
+          console.log("Entry : ",receivedEntry);
+          rowData = receivedEntry;
+          if(this.dataTableService.response == "Success"){
+            console.log("Result is success, update the tabel");
+            this.columnsInfoList.push(receivedEntry);
+            console.log("Updtae column info list : ", this.columnsInfoList);
+          }
+        }
+      });
+    }
+  }
+
+  handleScroll = (scrolled: boolean) => {
+    scrolled ? this.dataSource : _noop();
+  }
+
+  toggleUserActive(rowData: any) {
+    console.log("Row data : ", rowData);
+  }
+
+  //hasMore = () => !this.dataSource || this.dataSource.data.length < this.limit;
+
+}