From 5505e42484efac0273627795583179d58f81a1ee Mon Sep 17 00:00:00 2001 From: Sudarshan Kumar Date: Fri, 31 Jan 2020 17:10:17 +0530 Subject: Added RDP Library added RDP Library Issue-ID: PORTAL-826 Change-Id: If00af4c55b568bb4e41c789b6b18749d8bc96858 Signed-off-by: Sudarshan Kumar --- .../rdp-data-table-edit.component.html | 92 +++++++ .../rdp-data-table-edit.component.scss | 0 .../rdp-data-table-edit.component.spec.ts | 25 ++ .../rdp-data-table-edit.component.ts | 46 ++++ .../rdp-data-table/rdp-data-table.component.html | 57 +++++ .../rdp-data-table/rdp-data-table.component.scss | 34 +++ .../rdp-data-table.component.spec.ts | 25 ++ .../rdp/rdp-data-table/rdp-data-table.component.ts | 266 +++++++++++++++++++++ 8 files changed, 545 insertions(+) create mode 100644 ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table-edit/rdp-data-table-edit.component.html create mode 100644 ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table-edit/rdp-data-table-edit.component.scss create mode 100644 ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table-edit/rdp-data-table-edit.component.spec.ts create mode 100644 ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table-edit/rdp-data-table-edit.component.ts create mode 100644 ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table.component.html create mode 100644 ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table.component.scss create mode 100644 ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table.component.spec.ts create mode 100644 ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table.component.ts (limited to 'ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table') diff --git a/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table-edit/rdp-data-table-edit.component.html b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table-edit/rdp-data-table-edit.component.html new file mode 100644 index 00000000..8a967121 --- /dev/null +++ b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table-edit/rdp-data-table-edit.component.html @@ -0,0 +1,92 @@ + + +
+
+

{{modalPopupTitle}}

+ +
+ +
+ +
+ {{column.dispalyTitle | titlecase}} +
+
+ + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+   + +
+
\ No newline at end of file diff --git a/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table-edit/rdp-data-table-edit.component.scss b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table-edit/rdp-data-table-edit.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table-edit/rdp-data-table-edit.component.spec.ts b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table-edit/rdp-data-table-edit.component.spec.ts new file mode 100644 index 00000000..755e33d9 --- /dev/null +++ b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table-edit/rdp-data-table-edit.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RdpDataTableEditComponent } from './rdp-data-table-edit.component'; + +describe('RdpDataTableEditComponent', () => { + let component: RdpDataTableEditComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ RdpDataTableEditComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(RdpDataTableEditComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table-edit/rdp-data-table-edit.component.ts b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table-edit/rdp-data-table-edit.component.ts new file mode 100644 index 00000000..ede8aa25 --- /dev/null +++ b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table-edit/rdp-data-table-edit.component.ts @@ -0,0 +1,46 @@ +import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core'; +import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; +import { RdpDataTableService } from '../../shared/rdp-data-table.service'; + +@Component({ + selector: 'rdp-rdp-data-table-edit', + templateUrl: './rdp-data-table-edit.component.html', + styleUrls: ['./rdp-data-table-edit.component.scss'] +}) +export class RdpDataTableEditComponent implements OnInit { + + @Input() settings: any; + @Input() rowdata: any; + @Input() isEditMode: boolean; + @Output() passEntry: EventEmitter = new EventEmitter(); + modalPopupTitle: string; + selectedRowData: any; + public columnsInfoList = []; + + constructor(public activeModal: NgbActiveModal, public rdpDataTableService: RdpDataTableService) { } + + ngOnInit() { + this.modalPopupTitle = "Edit"; + if (this.rowdata) { + this.selectedRowData = JSON.stringify(this.rowdata); + } + if (this.settings) { + if (this.settings.modalPopupTitle) { + this.modalPopupTitle = this.settings.modalPopupTitle; + } + for (var index in this.settings.columns) { + this.columnsInfoList.push(this.settings.columns[index]); + } + } + } + + saveChanges() { + this.passEntry.emit(this.rowdata); + this.activeModal.close(); + } + + columnDataChanged($event, columnTitle) { + this.rowdata[columnTitle] = $event; + } + +} diff --git a/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table.component.html b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table.component.html new file mode 100644 index 00000000..a87a7b70 --- /dev/null +++ b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table.component.html @@ -0,0 +1,57 @@ +
+
+ + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Edit + + + + Delete + + + + Active? + +
+ +
+ +
+
\ No newline at end of file diff --git a/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table.component.scss b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table.component.scss new file mode 100644 index 00000000..4bc8e11b --- /dev/null +++ b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table.component.scss @@ -0,0 +1,34 @@ +.icon-trash{ + cursor: pointer; +} + +.table-search-box { + float: right; +} + +::ng-deep .table-search-box .mat-form-field-infix { + display: block; + position: relative; + flex: auto; + min-width: 0; + width: 340px; +} + +:host { + justify-content: flex-start; + display: flex; + flex-direction: column; +} + +rdp-scroll-container { + flex-grow: 0; + flex-shrink: 0; +} + +rdp-scroll-container.full { + flex-basis: auto; +} + +rdp-scroll-container.part { + flex-basis: 200px; +} \ No newline at end of file diff --git a/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table.component.spec.ts b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table.component.spec.ts new file mode 100644 index 00000000..dc063ef2 --- /dev/null +++ b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table/rdp-data-table.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RdpDataTableComponent } from './rdp-data-table.component'; + +describe('RdpDataTableComponent', () => { + let component: RdpDataTableComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ RdpDataTableComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(RdpDataTableComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 implements OnChanges, AfterViewInit, OnInit { + + @Input() data: any; + @Input() settings: any; + + @ViewChild(MatSort) sort: MatSort; + @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatTable) table: MatTable; + @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; + +} -- cgit 1.2.3-korg