diff options
Diffstat (limited to 'ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-data-table')
8 files changed, 545 insertions, 0 deletions
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 @@ +<!-- + ============LICENSE_START========================================== + ONAP Portal- SDK + =================================================================== + Copyright (C) 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============================================ + + --> + + <div class="container"> + <div class="modal-header"> + <h4 class="modal-title">{{modalPopupTitle}}</h4> + <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross')"> + <span aria-hidden="true">×</span> + </button> + </div> + + <div class="modal-body"> + <!-- This is the modal body where fields has to apper with respect to their field type --> + <div *ngFor="let column of columnsInfoList"> + {{column.dispalyTitle | titlecase}} + <div [ngSwitch]="column.type"> + <div *ngSwitchCase="'text'"> + <rdp-input-editor (changedColumnValue)="columnDataChanged($event, column.title)" + rowdata="{{selectedRowData}}" + columntitle="{{column.title}}" + disabled="{{column.isColumnDisabled}}" + > + </rdp-input-editor> + </div> + <div *ngSwitchCase="'dropdown'"> + <rdp-select-editor (changedColumnValue)="columnDataChanged($event, column.title)" + rowdata="{{selectedRowData}}" + [data]="column.listData" + columntitle="{{column.title}}"></rdp-select-editor> + </div> + <div *ngSwitchCase="'textarea'"> + <rdp-textarea-editor rowdata="{{selectedRowData}}" columntitle="{{column.title}}"></rdp-textarea-editor> + </div> + <div *ngSwitchCase="'checkbox'"> + <rdp-checkbox-editor rowdata="{{selectedRowData}}" columntitle="{{column.title}}"></rdp-checkbox-editor> + </div> + <div *ngSwitchCase="'radio'"> + <rdp-radio-editor (changedColumnValue)="columnDataChanged($event, column.title)" + [data]="column.listData" + rowdata="{{selectedRowData}}" + columntitle="{{column.title}}"></rdp-radio-editor> + </div> + <div *ngSwitchCase="'datepicker'"> + <rdp-datepicker-editor rowdata="{{selectedRowData}}" columntitle="{{column.title}}"></rdp-datepicker-editor> + </div> + <div *ngSwitchDefault> + <rdp-input-editor (changedColumnValue)="columnDataChanged($event, column.title)" + rowdata="{{selectedRowData}}" columntitle="{{column.title}}"></rdp-input-editor> + </div> + </div> + </div> + </div> + + <div class="modal-footer"> + <button type="button" class="btn btn-primary" (click)="saveChanges()">Save</button> + <button type="button" class="btn btn-primary" (click)="activeModal.close('Close')">Cancel</button> + </div> + </div>
\ 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 --- /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.scss 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<RdpDataTableEditComponent>; + + 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<any> = 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 @@ +<div> + <div class="table-search-box"> + <mat-form-field *ngIf="isSearchEnabled"> + <input matInput *ngIf="!isServerSidePaginationEnabled" type="text" (keyup)="applyFilter($event.target.value)" placeholder="Search in entire table"> + <input matInput *ngIf="isServerSidePaginationEnabled" type="text" #input placeholder="Search in entire table"> + </mat-form-field> + <button *ngIf="showAddButton" type="button" style="float: right;" class="btn btn-primary" (click)="openEditModalPopup('')"> + <i class="icon ion-md-person-add"></i> Add + </button> + </div> + <!-- <rdp-scroll-container [more]="hasMore()" [scrollOffset]="2500" [scrollDelay]="3000" (scrolled)="handleScroll($event)" + [class.full]="full" [class.part]="!full"> --> + <table mat-table #table [dataSource]="dataSource" style="width: 100%" matSort> + <rdp-column *ngFor="let column of columnsInfoList" name="{{column.title}}" + label="{{column.dispalyTitle | titlecase }}" sort="{{column.sort}}"> + </rdp-column> + + <!--Edit column will be displayed only if displayedColumns has Delete--> + <ng-container matColumnDef="edit"> + <th mat-header-cell *matHeaderCellDef id="heading5">Edit</th> + <td id="rowheader_t1_{{i}}" mat-cell *matCellDef="let rowData; let i=index;"> + <span class="icon-trash" id="{{i}}-button-role-edit" (click)="openEditModalPopup(rowData)"> + <i class="ion ion-md-create"></i> + </span> + </td> + </ng-container> + <!--End of Edit Column--> + + <!--Delete column will be displayed only if displayedColumns has Delete--> + <ng-container matColumnDef="delete"> + <th mat-header-cell *matHeaderCellDef id="heading6">Delete</th> + <td id="rowheader_t1_{{i}}" mat-cell *matCellDef="let rowData; let i=index;"> + <span class="icon-trash" id="{{i}}-button-role-remove" (click)="deleteRow(rowData)"> + <i class="icon ion-md-trash"></i> + </span> + </td> + </ng-container> + <!--End of Delete Column--> + + <!--Toggle column will be displayed only if displayedColumns has toggle--> + <ng-container matColumnDef="toggle"> + <th mat-header-cell *matHeaderCellDef id="heading6">Active?</th> + <td mat-cell *matCellDef="let rowData"> + <mat-slide-toggle [(ngModel)]="rowData.active" (change)="toggleUserActive(rowData)"></mat-slide-toggle> + </td> + </ng-container> + <!--End of Toggle Column--> + + <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> + <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> + </table> + <!-- </rdp-scroll-container> --> + <div *ngIf="isPaginationRequired"> + <mat-paginator [length]="totalRowsCount" #paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="pageSize" + (page)="pageEvent = $event; onPaginationChange($event)"></mat-paginator> + </div> +</div>
\ 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<RdpDataTableComponent>; + + 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<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; + +} |