Menu mandatory field, add/update fixes

Change-Id: I238d9ba1ae20210bd305461ebc2fd6180ee9940d
Issue-ID: PORTAL-864
Signed-off-by: rachitha.ramappa@att.com

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">&times;</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 { }