diff options
author | Rachitha Ramappa <rachitha.ramappa@att.com> | 2020-03-27 10:55:45 +0530 |
---|---|---|
committer | Rachitha Ramappa <rachitha.ramappa@att.com> | 2020-03-27 11:06:41 +0530 |
commit | 13758cf841eda6ab5c2c7b7ffa204ee42f298644 (patch) | |
tree | 861de6ce63dc7f318b52d6e8b1061829f22cc89e /ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp | |
parent | 7d3ad2425c0a774179ddb522e741d977c3bcf992 (diff) |
Menu mandatory field, add/update fixes
Change-Id: I238d9ba1ae20210bd305461ebc2fd6180ee9940d
Issue-ID: PORTAL-864
Signed-off-by: rachitha.ramappa@att.com
Diffstat (limited to 'ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp')
11 files changed, 120 insertions, 33 deletions
diff --git a/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/model/column.ts b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/model/column.ts index f5bda1fe..7bce33b2 100644 --- a/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/model/column.ts +++ b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/model/column.ts @@ -41,8 +41,9 @@ export class Column { dispalyTitle:string; type:ColumnTypes; sort:boolean; - isColumnDisabled:boolean + isColumnDisabled:boolean; listData = []; + isMandatory :boolean; constructor(title:string, dispalyTitle:string, type:ColumnTypes, sort:boolean, listData) { this.title = title; @@ -51,11 +52,16 @@ export class Column { this.sort = sort; this.isColumnDisabled = false; this.listData = listData; + this.isMandatory = false; } set setIsColumnDisabled(value: boolean) { this.isColumnDisabled = value; } + + set setIsColumnMandatory(value: boolean) { + this.isMandatory = value; + } } export enum ColumnTypes { diff --git a/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-cell-editor/rdp-input-editor/rdp-input-editor.component.html b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-cell-editor/rdp-input-editor/rdp-input-editor.component.html index af464510..111c376b 100644 --- a/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-cell-editor/rdp-input-editor/rdp-input-editor.component.html +++ b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-cell-editor/rdp-input-editor/rdp-input-editor.component.html @@ -1,3 +1,2 @@ -<p> - rdp-input-editor works! -</p> +<input class="input-editor" [disabled]="isColumnDisabled" [(ngModel)]="columnValue" type="text" name="{{columntitle}}" + id="{{columntitle}}" (change)="detectChange(columnValue)">
\ No newline at end of file diff --git a/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-cell-editor/rdp-input-editor/rdp-input-editor.component.ts b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-cell-editor/rdp-input-editor/rdp-input-editor.component.ts index ea6d1746..8d604936 100644 --- a/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-cell-editor/rdp-input-editor/rdp-input-editor.component.ts +++ b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-cell-editor/rdp-input-editor/rdp-input-editor.component.ts @@ -36,20 +36,14 @@ * */ -import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { Component, OnInit, Input, Output, EventEmitter, OnChanges, OnDestroy } from '@angular/core'; @Component({ selector: 'rdp-input-editor', styleUrls: ['./rdp-input-editor.component.scss'], - template: ` - <input class="input-editor" [disabled]="isColumnDisabled" - [(ngModel)]="columnValue" - type="text" name="{{columntitle}}" - id="{{columntitle}}" - (change)="detectChange(columnValue)"> - ` + templateUrl : './rdp-input-editor.component.html' }) -export class RdpInputEditorComponent implements OnInit { +export class RdpInputEditorComponent implements OnInit{ @Input() rowdata: any; @Input() columntitle: any diff --git a/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-cell-editor/rdp-select-editor/rdp-select-editor.component.ts b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-cell-editor/rdp-select-editor/rdp-select-editor.component.ts index 5dbc037b..24cb2e6f 100644 --- a/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-cell-editor/rdp-select-editor/rdp-select-editor.component.ts +++ b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-cell-editor/rdp-select-editor/rdp-select-editor.component.ts @@ -44,7 +44,7 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; template: ` <mat-form-field> <mat-label>{{columntitle | titlecase}}:</mat-label> - <mat-select [(value)]="selected" + <mat-select [(value)]="columnValue" (selectionChange)="detectChange(columnValue)"> <mat-option *ngFor="let item of data" [value]="item.name"> {{item.name}} @@ -59,7 +59,6 @@ export class RdpSelectEditorComponent implements OnInit { @Input() columntitle: any; @Input() data: any[]; @Output() changedColumnValue = new EventEmitter<any>(); - selected: any; columnValue: any; constructor() { } @@ -69,12 +68,9 @@ export class RdpSelectEditorComponent implements OnInit { let rowObj = JSON.parse(this.rowdata); let column = this.columntitle; this.columnValue = rowObj[column]; - } else { this.columnValue = null; } - this.selected = this.columnValue; - console.log(" this.selected :::", this.selected); } detectChange(changedValue) { 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 index a0e2b01b..f2ff001b 100644 --- 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 @@ -49,6 +49,7 @@ <div [ngSwitch]="column.type"> <div *ngSwitchCase="'text'" class="groupItem"> <label class="item-label">{{column.dispalyTitle | titlecase}}:</label><br> + <span *ngIf="column.isMandatory" style="color: red;">*</span> <rdp-input-editor (changedColumnValue)="columnDataChanged($event, column.title)" rowdata="{{selectedRowData}}" columntitle="{{column.title}}" @@ -57,6 +58,7 @@ </rdp-input-editor> </div> <div *ngSwitchCase="'dropdown'" class="groupItem"> + <span *ngIf="column.isMandatory" style="color: red;">*</span> <rdp-select-editor (changedColumnValue)="columnDataChanged($event, column.title)" rowdata="{{selectedRowData}}" [data]="column.listData" @@ -64,14 +66,17 @@ </div> <div *ngSwitchCase="'textarea'" class="groupItem"> <label class="item-label">{{column.dispalyTitle | titlecase}}:</label><br> + <span *ngIf="column.isMandatory" style="color: red;">*</span> <rdp-textarea-editor rowdata="{{selectedRowData}}" columntitle="{{column.title}}"></rdp-textarea-editor> </div> <div *ngSwitchCase="'checkbox'" class="groupItem"> <label class="item-label">{{column.dispalyTitle | titlecase}}:</label><br> + <span *ngIf="column.isMandatory" style="color: red;">*</span> <rdp-checkbox-editor rowdata="{{selectedRowData}}" columntitle="{{column.title}}"></rdp-checkbox-editor> </div> <div *ngSwitchCase="'radio'" class="groupItem"> <label class="item-label">{{column.dispalyTitle | titlecase}}:</label><br> + <span *ngIf="column.isMandatory" style="color: red;">*</span> <rdp-radio-editor (changedColumnValue)="columnDataChanged($event, column.title)" [data]="column.listData" rowdata="{{selectedRowData}}" @@ -79,10 +84,12 @@ </div> <div *ngSwitchCase="'datepicker'" class="groupItem"> <label class="item-label">{{column.dispalyTitle | titlecase}}:</label><br> + <span *ngIf="column.isMandatory" style="color: red;">*</span> <rdp-datepicker-editor rowdata="{{selectedRowData}}" columntitle="{{column.title}}"></rdp-datepicker-editor> </div> <div *ngSwitchDefault class="groupItem"> <label class="item-label">{{column.dispalyTitle | titlecase}}:</label><br> + <span *ngIf="column.isMandatory" style="color: red;">*</span> <rdp-input-editor (changedColumnValue)="columnDataChanged($event, column.title)" rowdata="{{selectedRowData}}" columntitle="{{column.title}}"></rdp-input-editor> </div> 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 index d92ce320..5437c174 100644 --- 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 @@ -1,6 +1,8 @@ import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import { RdpDataTableService } from '../../shared/rdp-data-table.service'; +import { RdpModalService } from '../../services/rdp-modal.service'; +import { RdpInformationModelComponent } from '../../rdp-information-model/rdp-information-model.component'; @Component({ selector: 'rdp-rdp-data-table-edit', @@ -18,7 +20,10 @@ export class RdpDataTableEditComponent implements OnInit { selectedRowData: any; public columnsInfoList = []; - constructor(public activeModal: NgbActiveModal, public rdpDataTableService: RdpDataTableService) { } + constructor( + public activeModal: NgbActiveModal, + public rdpDataTableService: RdpDataTableService, + private rdpModal: RdpModalService) { } ngOnInit() { this.modalPopupTitle = "Edit"; @@ -36,19 +41,41 @@ export class RdpDataTableEditComponent implements OnInit { } saveChanges() { - this.applicationService.update(this.rowdata); - this.applicationService.statusResponse.subscribe(responseData => { - if (responseData == "200") { - console.log("Success") - this.applicationService.get(); - this.applicationService.updatedData.subscribe(val => { - if (val) { - this.passEntry.emit(val); - } - }) + let validationResult = this.validateRowData(this.rowdata); + if (validationResult) { + console.log("Validation is complete") + this.applicationService.update(this.rowdata); + this.applicationService.statusResponse.subscribe(responseData => { + if (responseData == "200") { + console.log("Success") + this.applicationService.get(); + this.applicationService.updatedData.subscribe(val => { + if (val) { + this.passEntry.emit(val); + } + }) + } + }) + this.activeModal.close(); + } + } + + validateRowData(rowData): any { + let columnData = this.settings.columns; + let validate: boolean = true; + for (let column of columnData) { + if (column.isMandatory) { + if (rowData[column.title] == undefined || rowData[column.title] == null + || rowData[column.title] == "") { + const modelRef = this.rdpModal.open(RdpInformationModelComponent, { size: 'lg' }); + modelRef.componentInstance.title = 'Missing Mandatory Field'; + modelRef.componentInstance.message = "Please fill mandatory field " + column.dispalyTitle; + validate = false; + break; + } } - }) - this.activeModal.close(); + } + return validate; } columnDataChanged($event, columnTitle) { diff --git a/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-information-model/rdp-information-model.component.css b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-information-model/rdp-information-model.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-information-model/rdp-information-model.component.css diff --git a/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-information-model/rdp-information-model.component.html b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-information-model/rdp-information-model.component.html new file mode 100644 index 00000000..b581f277 --- /dev/null +++ b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-information-model/rdp-information-model.component.html @@ -0,0 +1,12 @@ +<div class="modal-header"> + <h4 class="modal-title">{{title}}</h4> + <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross')"> + <span aria-hidden="true">×</span> + </button> +</div> +<div class="modal-body"> + <p>{{message}}</p> +</div> +<div class="modal-footer"> + <button type="button" class="btn btn-primary" (click)="activeModal.close('Close')">Close</button> +</div>
\ No newline at end of file diff --git a/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-information-model/rdp-information-model.component.spec.ts b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-information-model/rdp-information-model.component.spec.ts new file mode 100644 index 00000000..1df58942 --- /dev/null +++ b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-information-model/rdp-information-model.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RdpInformationModelComponent } from './rdp-information-model.component'; + +describe('RdpInformationModelComponent', () => { + let component: RdpInformationModelComponent; + let fixture: ComponentFixture<RdpInformationModelComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ RdpInformationModelComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(RdpInformationModelComponent); + 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-information-model/rdp-information-model.component.ts b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-information-model/rdp-information-model.component.ts new file mode 100644 index 00000000..e1bc580a --- /dev/null +++ b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp-information-model/rdp-information-model.component.ts @@ -0,0 +1,19 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; + +@Component({ + selector: 'rdp-rdp-information-model', + templateUrl: './rdp-information-model.component.html', + styleUrls: ['./rdp-information-model.component.css'] +}) +export class RdpInformationModelComponent implements OnInit { + + @Input() title: string; + @Input() message: string; + + constructor(public activeModal: NgbActiveModal) { } + + ngOnInit() { + } + +} diff --git a/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp.module.ts b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp.module.ts index e33ad4e6..0cd305e3 100644 --- a/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp.module.ts +++ b/ecomp-sdk/portalsdk-tag-library/projects/portalsdk-tag-lib/src/lib/rdp/rdp.module.ts @@ -21,6 +21,7 @@ import { RdpScrollContainerComponent } from './rdp-scroll-container/rdp-scroll-c import { RdpButtonComponent } from './rdp-cell-editor/rdp-button/rdp-button.component'; import { RdpIconButtonComponent } from './rdp-cell-editor/rdp-icon-button/rdp-icon-button.component'; import { RdpModalService } from './services/rdp-modal.service'; +import { RdpInformationModelComponent } from './rdp-information-model/rdp-information-model.component'; @NgModule({ @@ -37,7 +38,8 @@ import { RdpModalService } from './services/rdp-modal.service'; RdpAutocompleteEditorComponent, RdpScrollContainerComponent, RdpButtonComponent, - RdpIconButtonComponent + RdpIconButtonComponent, + RdpInformationModelComponent ], imports: [ CommonModule, @@ -61,7 +63,7 @@ import { RdpModalService } from './services/rdp-modal.service'; RdpButtonComponent, RdpIconButtonComponent ], - entryComponents: [RdpDataTableEditComponent], + entryComponents: [RdpDataTableEditComponent, RdpInformationModelComponent], providers: [RdpDataTableService, RdpModalService] }) export class RdpModule { } |