});
//rdp table data
- this.columns.push(new Column("id", "Menu ID", ColumnTypes.TEXT, false, null));
- this.columns.push(new Column("label", "Label", ColumnTypes.TEXT, true, null));
- this.columns.push(new Column("parentId", "ParentId", ColumnTypes.DROPDOWN, false, this.parentList));
- this.columns.push(new Column("sortOrder", "Sort Order", ColumnTypes.TEXT, false, null));
- this.columns.push(new Column("action", "Action", ColumnTypes.TEXT, false, null));
- this.columns.push(new Column("functionCd", "Function", ColumnTypes.DROPDOWN, false, this.functionCDselectData));
- this.columns.push(new Column("active", "Active", ColumnTypes.DROPDOWN, false, this.activeStatusOptions));
- this.columns.push(new Column("servlet", "Servlet", ColumnTypes.TEXT, false, null));
- this.columns.push(new Column("queryString", " Query String", ColumnTypes.TEXT, false, null));
- this.columns.push(new Column("externalUrl", "External URL", ColumnTypes.TEXT, false, null));
- this.columns.push(new Column("target", "Target", ColumnTypes.TEXT, false, null));
- this.columns.push(new Column("menuSetCode", "Menu Set Code", ColumnTypes.TEXT, false, null));
- this.columns.push(new Column("separator", "Separator", ColumnTypes.DROPDOWN, false, this.separatorStatusOptions));
- this.columns.push(new Column("imageSrc", "Image Source", ColumnTypes.TEXT, false, null));
+ let menuIdColumn = new Column("id", "Menu ID", ColumnTypes.TEXT, true, null);
+ menuIdColumn.isColumnDisabled = true;
+ this.columns.push(menuIdColumn);
+
+ let label = new Column("label", "Label", ColumnTypes.TEXT, true, null);
+ label.setIsColumnMandatory = true;
+ this.columns.push(label);
+
+ let parent = new Column("parentId", "ParentId", ColumnTypes.DROPDOWN, true, this.parentList);
+ parent.setIsColumnMandatory = true;
+ this.columns.push(parent);
+
+ let sortOrder = new Column("sortOrder", "Sort Order", ColumnTypes.TEXT, true, null);
+ sortOrder.setIsColumnMandatory = true;
+ this.columns.push(sortOrder);
+
+ let action = new Column("action", "Action", ColumnTypes.TEXT, true, null);
+ action.setIsColumnMandatory = true;
+ this.columns.push(action);
+
+ let functionCd = new Column("functionCd", "Function", ColumnTypes.DROPDOWN, true, this.functionCDselectData);
+ functionCd.setIsColumnMandatory = true;
+ this.columns.push(functionCd);
+
+ let active = new Column("active", "Active", ColumnTypes.DROPDOWN, true, this.activeStatusOptions);
+ active.setIsColumnMandatory = true;
+ this.columns.push(active);
+
+ this.columns.push(new Column("servlet", "Servlet", ColumnTypes.TEXT, true, null));
+ this.columns.push(new Column("queryString", " Query String", ColumnTypes.TEXT, true, null));
+ this.columns.push(new Column("externalUrl", "External URL", ColumnTypes.TEXT, true, null));
+ this.columns.push(new Column("target", "Target", ColumnTypes.TEXT, true, null));
+
+ let menuSetCode = new Column("menuSetCode", "Menu Set Code", ColumnTypes.TEXT, false, null);
+ menuSetCode.setIsColumnMandatory = true;
+ this.columns.push(menuSetCode);
+
+ let separator = new Column("separator", "Separator", ColumnTypes.DROPDOWN, false, this.separatorStatusOptions);
+ separator.setIsColumnMandatory = true;
+ this.columns.push(separator);
+ this.columns.push(new Column("imageSrc", "Image Source", ColumnTypes.TEXT, true, null));
this.settings = new DataTableSettings()
this.settings.columns = this.columns;
this.settings.isPaginationEnabled = true;
this.settings.paginationsSize = "5";
this.settings.isReadOnly = false;
- this.settings.isTableSearchEnabled = false;
+ this.settings.isTableSearchEnabled = true;
this.settings.applicationService = this.menuService;
this.showSpinner = false;
//Demonstrating disable feature
let column = new Column("id","ID",ColumnTypes.TEXT, false,list);
column.setIsColumnDisabled = true;
-
this.columns.push(column);
- this.columns.push(new Column("name","Name",ColumnTypes.TEXT, true,list));
- this.columns.push(new Column("company","Company", ColumnTypes.TEXT, false,list));
- this.columns.push(new Column("location","Location", ColumnTypes.DROPDOWN, true,list));
+ let name = new Column("name","Name",ColumnTypes.TEXT, true,list);
+ name.setIsColumnMandatory = true;
+ this.columns.push(name);
+
+ let company = new Column("company","Company", ColumnTypes.TEXT, false,list);
+ company.setIsColumnMandatory = false;
+ this.columns.push(company);
+
+ let location = new Column("location","Location", ColumnTypes.DROPDOWN, true,list);
+ location.setIsColumnMandatory = true;
+ this.columns.push(location);
+ console.log("Columns : ", this.columns);
this.settings = new DataTableSettings()
this.settings.columns = this.columns;
this.settings.isPaginationEnabled=true;
import { RdpCrudInterface } from 'portalsdk-tag-lib';
import { HttpClient, HttpParams } from '@angular/common/http';
import { map } from "rxjs/operators";
-import { Observable } from 'rxjs';
+import { Observable, BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
export class AppService implements RdpCrudInterface{
constructor(private http:HttpClient) { }
+ public statusResponse = new BehaviorSubject("");
add(data:any){
console.log("Add method is getting called from AppServie data:: ",data);
}
update(data:any){
console.log("Update method is getting called from AppServie data:: ",data);
+ this.statusResponse.next("202");
}
delete(data:any){
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;
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 {
-<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
*
*/
-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
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}}
@Input() columntitle: any;
@Input() data: any[];
@Output() changedColumnValue = new EventEmitter<any>();
- selected: any;
columnValue: any;
constructor() { }
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) {
<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}}"
</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"
</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}}"
</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>
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',
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";
}
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) {
--- /dev/null
+<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
--- /dev/null
+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();
+ });
+});
--- /dev/null
+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() {
+ }
+
+}
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({
RdpAutocompleteEditorComponent,
RdpScrollContainerComponent,
RdpButtonComponent,
- RdpIconButtonComponent
+ RdpIconButtonComponent,
+ RdpInformationModelComponent
],
imports: [
CommonModule,
RdpButtonComponent,
RdpIconButtonComponent
],
- entryComponents: [RdpDataTableEditComponent],
+ entryComponents: [RdpDataTableEditComponent, RdpInformationModelComponent],
providers: [RdpDataTableService, RdpModalService]
})
export class RdpModule { }
Code Review / portal / sdk.git / commitdiff