From 97c73093c5df6e17473a134050e39f769cc49c00 Mon Sep 17 00:00:00 2001 From: dineshkumarkannan Date: Fri, 12 Oct 2018 16:53:50 +0530 Subject: [PATCH] template master details view , listing design page : kdk --- .../templates/templates.service.spec.ts | 12 ++ .../service/templates/templates.service.ts | 9 + ng6-seed/src/app/template/template.module.ts | 8 +- .../edit-category.component.html | 38 ++++ .../edit-category.component.scss | 0 .../edit-category.component.spec.ts | 25 +++ .../edit-category/edit-category.component.ts | 103 +++++++++++ .../edit-lender/edit-lender.component.html | 46 +++++ .../edit-lender/edit-lender.component.scss | 0 .../edit-lender/edit-lender.component.spec.ts | 25 +++ .../edit/edit-lender/edit-lender.component.ts | 74 ++++++++ .../edit-question-answer.component.html | 100 ++++++++++ .../edit-question-answer.component.scss | 0 .../edit-question-answer.component.spec.ts | 25 +++ .../edit-question-answer.component.ts | 104 +++++++++++ .../edit/templates.edit.component.html | 78 +++----- .../edit/templates.edit.component.ts | 11 +- .../templates.list.component.html | 76 +++++++- .../templates.list.component.scss | 52 ++++++ .../templates.list.component.ts | 173 +++++++++++++++++- .../template/templates/templates.component.ts | 2 +- .../template/templates/templates.module.ts | 13 +- 22 files changed, 908 insertions(+), 66 deletions(-) create mode 100644 ng6-seed/src/app/template/service/templates/templates.service.spec.ts create mode 100644 ng6-seed/src/app/template/service/templates/templates.service.ts create mode 100644 ng6-seed/src/app/template/templates/templates-list/edit/edit-category/edit-category.component.html create mode 100644 ng6-seed/src/app/template/templates/templates-list/edit/edit-category/edit-category.component.scss create mode 100644 ng6-seed/src/app/template/templates/templates-list/edit/edit-category/edit-category.component.spec.ts create mode 100644 ng6-seed/src/app/template/templates/templates-list/edit/edit-category/edit-category.component.ts create mode 100644 ng6-seed/src/app/template/templates/templates-list/edit/edit-lender/edit-lender.component.html create mode 100644 ng6-seed/src/app/template/templates/templates-list/edit/edit-lender/edit-lender.component.scss create mode 100644 ng6-seed/src/app/template/templates/templates-list/edit/edit-lender/edit-lender.component.spec.ts create mode 100644 ng6-seed/src/app/template/templates/templates-list/edit/edit-lender/edit-lender.component.ts create mode 100644 ng6-seed/src/app/template/templates/templates-list/edit/edit-question-answer/edit-question-answer.component.html create mode 100644 ng6-seed/src/app/template/templates/templates-list/edit/edit-question-answer/edit-question-answer.component.scss create mode 100644 ng6-seed/src/app/template/templates/templates-list/edit/edit-question-answer/edit-question-answer.component.spec.ts create mode 100644 ng6-seed/src/app/template/templates/templates-list/edit/edit-question-answer/edit-question-answer.component.ts create mode 100644 ng6-seed/src/app/template/templates/templates-list/templates.list.component.scss diff --git a/ng6-seed/src/app/template/service/templates/templates.service.spec.ts b/ng6-seed/src/app/template/service/templates/templates.service.spec.ts new file mode 100644 index 000000000..1e482017f --- /dev/null +++ b/ng6-seed/src/app/template/service/templates/templates.service.spec.ts @@ -0,0 +1,12 @@ +import { TestBed } from '@angular/core/testing'; + +import { TemplatesService } from './templates.service'; + +describe('TemplatesService', () => { + beforeEach(() => TestBed.configureTestingModule({})); + + it('should be created', () => { + const service: TemplatesService = TestBed.get(TemplatesService); + expect(service).toBeTruthy(); + }); +}); diff --git a/ng6-seed/src/app/template/service/templates/templates.service.ts b/ng6-seed/src/app/template/service/templates/templates.service.ts new file mode 100644 index 000000000..875551de0 --- /dev/null +++ b/ng6-seed/src/app/template/service/templates/templates.service.ts @@ -0,0 +1,9 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class TemplatesService { + + constructor() { } +} diff --git a/ng6-seed/src/app/template/template.module.ts b/ng6-seed/src/app/template/template.module.ts index 732349611..880c418bf 100644 --- a/ng6-seed/src/app/template/template.module.ts +++ b/ng6-seed/src/app/template/template.module.ts @@ -8,7 +8,10 @@ import { MatRadioModule, MatButtonModule,MatTableModule,MatPaginatorModule, MatProgressBarModule,MatDialogModule, MatSortModule, - MatToolbarModule,MatSelectModule } from '@angular/material'; + MatToolbarModule,MatSelectModule, +MatListModule, MatMenuModule, + MatCheckboxModule, MatStepperModule, MatTabsModule, + MatExpansionModule } from '@angular/material'; import {MatSlideToggleModule} from '@angular/material/slide-toggle'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FileUploadModule } from 'ng2-file-upload/ng2-file-upload'; @@ -44,6 +47,9 @@ import { MastersService } from './service/masters/masters.service'; MatButtonModule,MatTableModule,MatPaginatorModule, MatProgressBarModule,MatDialogModule, MatSortModule, MatToolbarModule,MatSelectModule, + MatListModule, MatMenuModule, + MatCheckboxModule, MatStepperModule, MatTabsModule, + MatExpansionModule , FormsModule,ReactiveFormsModule, // HttpClientModule, ], diff --git a/ng6-seed/src/app/template/templates/templates-list/edit/edit-category/edit-category.component.html b/ng6-seed/src/app/template/templates/templates-list/edit/edit-category/edit-category.component.html new file mode 100644 index 000000000..217c94345 --- /dev/null +++ b/ng6-seed/src/app/template/templates/templates-list/edit/edit-category/edit-category.component.html @@ -0,0 +1,38 @@ +
+
+ + +
+
+
+ + + {{ category.name }} + + + +
+
+ + + % +
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
\ No newline at end of file diff --git a/ng6-seed/src/app/template/templates/templates-list/edit/edit-category/edit-category.component.scss b/ng6-seed/src/app/template/templates/templates-list/edit/edit-category/edit-category.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/ng6-seed/src/app/template/templates/templates-list/edit/edit-category/edit-category.component.spec.ts b/ng6-seed/src/app/template/templates/templates-list/edit/edit-category/edit-category.component.spec.ts new file mode 100644 index 000000000..962cea890 --- /dev/null +++ b/ng6-seed/src/app/template/templates/templates-list/edit/edit-category/edit-category.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EditCategoryComponent } from './edit-category.component'; + +describe('EditCategoryComponent', () => { + let component: EditCategoryComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ EditCategoryComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(EditCategoryComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ng6-seed/src/app/template/templates/templates-list/edit/edit-category/edit-category.component.ts b/ng6-seed/src/app/template/templates/templates-list/edit/edit-category/edit-category.component.ts new file mode 100644 index 000000000..2687c5cf1 --- /dev/null +++ b/ng6-seed/src/app/template/templates/templates-list/edit/edit-category/edit-category.component.ts @@ -0,0 +1,103 @@ +import { Component, ViewChild, OnInit, OnDestroy, Input } from '@angular/core'; +import { MatPaginator, MatSort, MatTableDataSource, MatDialog, PageEvent } from '@angular/material'; +import { FormGroup, FormControl, FormBuilder, Validators , FormArray} from '@angular/forms'; +import { ActivatedRoute, Router } from '@angular/router'; +import { DataSource } from '@angular/cdk/table'; +import { Observable } from 'rxjs/Observable'; + +@Component({ + selector: 'app-template-edit-category', + templateUrl: './edit-category.component.html', + styleUrls: ['./edit-category.component.scss'] +}) +export class EditCategoryComponent implements OnInit, OnDestroy { + + @Input() questionId: number; + + public _editTempCategoryFrom: FormGroup; + public submitted = false; + constructor( + private _formBuilder: FormBuilder, + public dialog: MatDialog) { + } + + + ngOnInit() { + this.initalLoadFormData(); + if(this.categoryList.length > 0){ + for (let val of this.categoryList) { + // alert(JSON.stringify(val)); + let vals = val; + this.addLanguage(vals['fk_category_id'], vals['name'], vals['weightage'], null); + } + } + } + + initalLoadFormData(){ + this._editTempCategoryFrom = this._formBuilder.group({ + temp_category: this._formBuilder.array([ + // this.initAnswers(), + ]) + }) + } + + // convenience getter for easy access to form fields + get f() { return this._editTempCategoryFrom.controls; } + + public m_categoryList = [{ + fk_category_id: 1, + name: 'Category List 1', + weightage: 2, + },{ + fk_category_id: 2, + name: 'Category List 2', + weightage: 5, + },{ + fk_category_id: 3, + name: 'Category List 2', + weightage: 5, + }]; + + public categoryList = [{ + fk_category_id: 1, + name: 'Category List 1', + weightage: 2, + },{ + fk_category_id: 2, + name: 'Category List 2', + weightage: 5, + }]; + + // Dynamic Form field creation Functionality : START ===> + initAnswers(fk_cat_id, name, weightage) { + return this._formBuilder.group({ + fk_category_id: [fk_cat_id, Validators.compose([Validators.required])], + name: [name, Validators.compose([Validators.required])], + weightage: [weightage, Validators.compose([Validators.required])], + }); + } + addLanguage(fk_cat_id, name, weightage, e) { + const control = this._editTempCategoryFrom.controls['temp_category']; + control.push(this.initAnswers(fk_cat_id, name, weightage)); + } + removeLanguage(i: number) { + const control = this._editTempCategoryFrom.controls['temp_category']; + control.removeAt(i); + } + + // END ===> + + + /** To Save/Edited Popup Data */ + onSubmit() { + this.submitted = true; + // stop here if form is invalid + } + + ngOnDestroy(): void { + //Called once, before the instance is destroyed. + //Add 'implements OnDestroy' to the class. + } + + +} diff --git a/ng6-seed/src/app/template/templates/templates-list/edit/edit-lender/edit-lender.component.html b/ng6-seed/src/app/template/templates/templates-list/edit/edit-lender/edit-lender.component.html new file mode 100644 index 000000000..af969774d --- /dev/null +++ b/ng6-seed/src/app/template/templates/templates-list/edit/edit-lender/edit-lender.component.html @@ -0,0 +1,46 @@ +
+
+
+
+
+ + + {{ enti.name }} + + You must Select Lender Type. + + + + + {{ enti.name }} + + You must Select Product. + + + + + {{ enti.name }} + + You must Select Category Segment. + + + + + + +
+
+
+ +
+
+ + +
+
\ No newline at end of file diff --git a/ng6-seed/src/app/template/templates/templates-list/edit/edit-lender/edit-lender.component.scss b/ng6-seed/src/app/template/templates/templates-list/edit/edit-lender/edit-lender.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/ng6-seed/src/app/template/templates/templates-list/edit/edit-lender/edit-lender.component.spec.ts b/ng6-seed/src/app/template/templates/templates-list/edit/edit-lender/edit-lender.component.spec.ts new file mode 100644 index 000000000..7a62261c3 --- /dev/null +++ b/ng6-seed/src/app/template/templates/templates-list/edit/edit-lender/edit-lender.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EditLenderComponent } from './edit-lender.component'; + +describe('EditLenderComponent', () => { + let component: EditLenderComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ EditLenderComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(EditLenderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ng6-seed/src/app/template/templates/templates-list/edit/edit-lender/edit-lender.component.ts b/ng6-seed/src/app/template/templates/templates-list/edit/edit-lender/edit-lender.component.ts new file mode 100644 index 000000000..7c8ba8437 --- /dev/null +++ b/ng6-seed/src/app/template/templates/templates-list/edit/edit-lender/edit-lender.component.ts @@ -0,0 +1,74 @@ +import { Component, ViewChild, OnInit, OnDestroy, Input } from '@angular/core'; +import { MatPaginator, MatSort, MatTableDataSource, MatDialog, PageEvent } from '@angular/material'; +import { FormGroup, FormControl, FormBuilder, Validators , FormArray} from '@angular/forms'; +import { ActivatedRoute, Router } from '@angular/router'; +import { DataSource } from '@angular/cdk/table'; +import { Observable } from 'rxjs/Observable'; + +@Component({ + selector: 'app-template-edit-lender', + templateUrl: './edit-lender.component.html', + styleUrls: ['./edit-lender.component.scss'] +}) +export class EditLenderComponent implements OnInit { + + + @Input() questionId: number; + + public _editTempLenderFrom: FormGroup; + public submitted = false; + constructor( + private _formBuilder: FormBuilder) { + } + + ngOnInit() { + this._editTempLenderFrom = this._formBuilder.group({ + temp_lender: this._formBuilder.array([ + this.initAnswers(), + ]) + }) + } + + // convenience getter for easy access to form fields + get f() { return this._editTempLenderFrom.controls; } + + + public entityOptions = [{ + fk_lender_id: 1, + name: 'Lender1' + },{ + fk_lender_id: 2, + name: 'Lender2' + }]; + + // Dynamic Form field creation Functionality : START ===> + initAnswers() { + return this._formBuilder.group({ + fk_lender_id: ['', Validators.compose([Validators.required])], + fk_product_id: ['', Validators.compose([Validators.required])], + fk_category_segment_id: ['', Validators.compose([Validators.required])], + }); + } + addLanguage(e) { + const control = this._editTempLenderFrom.controls['temp_lender']; + control.push(this.initAnswers()); + } + removeLanguage(i: number) { + const control = this._editTempLenderFrom.controls['temp_lender']; + control.removeAt(i); + } + + // END ===> + + + /** To Save/Edited Popup Data */ + onSubmit() { + this.submitted = true; + // stop here if form is invalid + } + + ngOnDestroy(): void { + //Called once, before the instance is destroyed. + //Add 'implements OnDestroy' to the class. + } +} diff --git a/ng6-seed/src/app/template/templates/templates-list/edit/edit-question-answer/edit-question-answer.component.html b/ng6-seed/src/app/template/templates/templates-list/edit/edit-question-answer/edit-question-answer.component.html new file mode 100644 index 000000000..c8a3175eb --- /dev/null +++ b/ng6-seed/src/app/template/templates/templates-list/edit/edit-question-answer/edit-question-answer.component.html @@ -0,0 +1,100 @@ + + + + + + + Category 1 + + + 50% + + + + + + + + + Category 2 + + + 50% + + +

I'm visible because I am open

+ + + diff --git a/ng6-seed/src/app/template/templates/templates-list/edit/edit-question-answer/edit-question-answer.component.scss b/ng6-seed/src/app/template/templates/templates-list/edit/edit-question-answer/edit-question-answer.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/ng6-seed/src/app/template/templates/templates-list/edit/edit-question-answer/edit-question-answer.component.spec.ts b/ng6-seed/src/app/template/templates/templates-list/edit/edit-question-answer/edit-question-answer.component.spec.ts new file mode 100644 index 000000000..f9cb80e43 --- /dev/null +++ b/ng6-seed/src/app/template/templates/templates-list/edit/edit-question-answer/edit-question-answer.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EditQuestionAnswerComponent } from './edit-question-answer.component'; + +describe('EditQuestionAnswerComponent', () => { + let component: EditQuestionAnswerComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ EditQuestionAnswerComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(EditQuestionAnswerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ng6-seed/src/app/template/templates/templates-list/edit/edit-question-answer/edit-question-answer.component.ts b/ng6-seed/src/app/template/templates/templates-list/edit/edit-question-answer/edit-question-answer.component.ts new file mode 100644 index 000000000..7c53dca47 --- /dev/null +++ b/ng6-seed/src/app/template/templates/templates-list/edit/edit-question-answer/edit-question-answer.component.ts @@ -0,0 +1,104 @@ +import { Component, ViewChild, OnInit, OnDestroy, Input } from '@angular/core'; +import { MatPaginator, MatSort, MatTableDataSource, MatDialog, PageEvent } from '@angular/material'; +import { FormGroup, FormControl, FormBuilder, Validators , FormArray} from '@angular/forms'; +import { ActivatedRoute, Router } from '@angular/router'; +import { DataSource } from '@angular/cdk/table'; +import { Observable } from 'rxjs/Observable'; + +@Component({ + selector: 'app-template-edit-question-answer', + templateUrl: './edit-question-answer.component.html', + styleUrls: ['./edit-question-answer.component.scss'] +}) +export class EditQuestionAnswerComponent implements OnInit { + + + @Input() questionId: number; + + public _editTempCategoryFrom: FormGroup; + public submitted = false; + public panelOpenState : boolean; + constructor( + private _formBuilder: FormBuilder, + public dialog: MatDialog) { + } + + + ngOnInit() { + this.initalLoadFormData(); + if(this.categoryList.length > 0){ + for (let val of this.categoryList) { + // alert(JSON.stringify(val)); + let vals = val; + this.addLanguage(vals['fk_category_id'], vals['name'], vals['weightage'], null); + } + } + } + + initalLoadFormData(){ + this._editTempCategoryFrom = this._formBuilder.group({ + temp_category: this._formBuilder.array([ + // this.initAnswers(), + ]) + }) + } + + // convenience getter for easy access to form fields + get f() { return this._editTempCategoryFrom.controls; } + + public m_categoryList = [{ + fk_category_id: 1, + name: 'Category List 1', + weightage: 2, + },{ + fk_category_id: 2, + name: 'Category List 2', + weightage: 5, + },{ + fk_category_id: 3, + name: 'Category List 2', + weightage: 5, + }]; + + public categoryList = [{ + fk_category_id: 1, + name: 'Category List 1', + weightage: 2, + },{ + fk_category_id: 2, + name: 'Category List 2', + weightage: 5, + }]; + + // Dynamic Form field creation Functionality : START ===> + initAnswers(fk_cat_id, name, weightage) { + return this._formBuilder.group({ + fk_category_id: [fk_cat_id, Validators.compose([Validators.required])], + name: [name, Validators.compose([Validators.required])], + weightage: [weightage, Validators.compose([Validators.required])], + }); + } + addLanguage(fk_cat_id, name, weightage, e) { + const control = this._editTempCategoryFrom.controls['temp_category']; + control.push(this.initAnswers(fk_cat_id, name, weightage)); + } + removeLanguage(i: number) { + const control = this._editTempCategoryFrom.controls['temp_category']; + control.removeAt(i); + } + + // END ===> + + + /** To Save/Edited Popup Data */ + onSubmit() { + this.submitted = true; + // stop here if form is invalid + } + + ngOnDestroy(): void { + //Called once, before the instance is destroyed. + //Add 'implements OnDestroy' to the class. + } + +} diff --git a/ng6-seed/src/app/template/templates/templates-list/edit/templates.edit.component.html b/ng6-seed/src/app/template/templates/templates-list/edit/templates.edit.component.html index a2d2f3f4e..abf8dcde4 100644 --- a/ng6-seed/src/app/template/templates/templates-list/edit/templates.edit.component.html +++ b/ng6-seed/src/app/template/templates/templates-list/edit/templates.edit.component.html @@ -1,56 +1,38 @@ + -
-

{{pageTitle}}

-
-
+
-
-
-
+
Template Name
+
+ +
- - You must Include Pan Number. - -
+ + + +
+ + +
+
+
- - - - -
- Fill out your name - - - -
- -
-
- - -
- Fill out your address - - - -
- - -
-
- - - Done - You are now done. -
- - -
- - + + + + + + + + + + + + + + + diff --git a/ng6-seed/src/app/template/templates/templates-list/edit/templates.edit.component.ts b/ng6-seed/src/app/template/templates/templates-list/edit/templates.edit.component.ts index 6881ca31f..9f15b1428 100644 --- a/ng6-seed/src/app/template/templates/templates-list/edit/templates.edit.component.ts +++ b/ng6-seed/src/app/template/templates/templates-list/edit/templates.edit.component.ts @@ -16,11 +16,14 @@ import { TemplateListComponent } from './../templates.list.component'; templateUrl: './templates.edit.component.html' }) export class TemplateEditComponent implements OnInit, OnDestroy { - public pageTitle: string = "Edit Template"; + public pageTitle: string = "Edit Template"; + public question_id : number; + public submitted: boolean = false; constructor( private route: ActivatedRoute, private router: Router, private templateListComponent : TemplateListComponent) { + this.question_id = this.route.snapshot.params['question-id']; } ngOnInit() { @@ -32,6 +35,12 @@ export class TemplateEditComponent implements OnInit, OnDestroy { this.router.navigate([ '../../' ], { relativeTo: this.route }); } + /** To Save/Edited Popup Data */ + onSubmit() { + this.submitted = true; + // stop here if form is invalid + } + ngOnDestroy(): void { //Called once, before the instance is destroyed. //Add 'implements OnDestroy' to the class. diff --git a/ng6-seed/src/app/template/templates/templates-list/templates.list.component.html b/ng6-seed/src/app/template/templates/templates-list/templates.list.component.html index efc3cdd58..ab73ed692 100644 --- a/ng6-seed/src/app/template/templates/templates-list/templates.list.component.html +++ b/ng6-seed/src/app/template/templates/templates-list/templates.list.component.html @@ -1,11 +1,73 @@
- - - - + + +
+ + +
+
Template Master
+
List of Templates
+
+
+
+ +
+
+ + +
+
+ + +
+ +
+ +
+ +
+
+ {{ template.template_name }} +
+
+
+ {{lender.full_name}} - {{lender.product_name}} - {{lender.customer_segment_name}} , +
+
+
+
+
+ +
+
+ +
+ + +
No Record Found ...
+ + + + + +
+ + -
+
- -
\ No newline at end of file + +
+ + + \ No newline at end of file diff --git a/ng6-seed/src/app/template/templates/templates-list/templates.list.component.scss b/ng6-seed/src/app/template/templates/templates-list/templates.list.component.scss new file mode 100644 index 000000000..fa863a272 --- /dev/null +++ b/ng6-seed/src/app/template/templates/templates-list/templates.list.component.scss @@ -0,0 +1,52 @@ +// mat table css + +.example-container { + display: flex; + flex-direction: column; + min-width: 300px; +} + +.example-header { + min-height: 64px; + padding: 8px 24px 0; +} + +.mat-form-field { + font-size: 14px; +// width: 100%; +} + +.mat-table { + overflow: auto; + max-height: 500px; +} + +.text-line-limit { + text-overflow: ellipsis; + overflow: hidden; + // white-space: nowrap; + display: -webkit-box; + line-height: 16px; /* fallback */ + max-height: 32px; /* fallback */ + -webkit-line-clamp: 2; /* number of lines to show */ + -webkit-box-orient: vertical; + + // text-overflow: ellipsis; + // overflow: hidden; + // width: 160px; + // height: 1.2em; + // white-space: nowrap; +} + +.category-label { + padding: 2px 6px; + background: #629cff; + color: #fff; + box-shadow: 0 2px 3px #c8bbbb; +} + +.no-record-found { + font-size: 18px; + color: #03a9f4; + padding : 12px 8px; +} \ No newline at end of file diff --git a/ng6-seed/src/app/template/templates/templates-list/templates.list.component.ts b/ng6-seed/src/app/template/templates/templates-list/templates.list.component.ts index 6062bc415..12501d0ab 100644 --- a/ng6-seed/src/app/template/templates/templates-list/templates.list.component.ts +++ b/ng6-seed/src/app/template/templates/templates-list/templates.list.component.ts @@ -11,25 +11,81 @@ import { Observable } from 'rxjs/Observable'; */ @Component({ selector: 'app-list', + styleUrls: ['./templates.list.component.scss'], templateUrl: './templates.list.component.html' }) export class TemplateListComponent implements OnInit, OnDestroy { - public listView: boolean = true; + + public templateList = []; + public listView: boolean; public names: string; + public noTemplMasterRecrdFound: boolean = false; + + // pagination variable details + length = 50; + pageIndex = 0; + pageSize = 10; + pageEvent: PageEvent; + + // data source variable details + templateListData = null; + public dataLength: number; + public dataSource = new MatTableDataSource(); + displayedColumns = ['categroy_name', 'question', 'actions']; + + @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatSort) sort: MatSort; + constructor( private route: ActivatedRoute, private router: Router) { + this.listView = true; // this.names = 'dinesh'; } ngOnInit() { - // alert(1); - alert(); this.listView = true; + this.getTemplateMastersListDetails(); + } + + + // get question master list details + getTemplateMastersListDetails() { + this.templateList = this.m_templateList.records; + this.templateListData = this.m_templateList.records; + this.dataLength = this.m_templateList.records.length; + this.dataSource.data = this.templateListData; + + // this.noTemplMasterRecrdFound = false; + // this.search_cid = this.filterFormGroupCtrl.controls.category.value; + // console.log(this.search_cid + ", " + this.filterFormGroupCtrl); + // this.questionsService.getQuestionMasterDetails(this.search_cid).subscribe( + // data => { + // if (data) { + // if (data.records) { + // this.templateList = data.records; + // this.templateListData = data.records; + // this.dataLength = data.records.length; + // this.dataSource.data = this.templateListData; + // } else { + // this.templateList = []; + // this.dataLength = null; + // this.noTemplMasterRecrdFound = true; + // } + // } else { + // this.templateList = []; + // this.dataLength = null; + // this.noTemplMasterRecrdFound = true; + // } + // } + // ) } - goToEdit(){ - this.router.navigate([ '../list/edit', '1' ], { relativeTo: this.route }); + + + + goToEdit(template_id : number){ + this.router.navigate([ '../list/edit', template_id ], { relativeTo: this.route }); this.listView = false; } @@ -41,7 +97,112 @@ export class TemplateListComponent implements OnInit, OnDestroy { ngOnDestroy(): void { //Called once, before the instance is destroyed. //Add 'implements OnDestroy' to the class. - alert(); } + + public m_templateList = { + "dataStatus": true, + "status": 200, + "records": + [ + { + "template_id": "1", + "template_name": "sample dev template", + "createdon": "28/09/2018", + "fk_createdby": "1", + "updatedon": null, + "fk_updatedby": null, + "isactive": "1", + "createdby": "sriram v", + "updatedby": null, + "lender_details": [] + }, + { + "template_id": "2", + "template_name": "two template", + "createdon": "28/09/2018", + "fk_createdby": "1", + "updatedon": null, + "fk_updatedby": null, + "isactive": "1", + "createdby": "sriram v", + "updatedby": null, + "lender_details": [] + }, + { + "template_id": "3", + "template_name": "ABCD template redd", + "createdon": "11/10/2018", + "fk_createdby": "1", + "updatedon": null, + "fk_updatedby": null, + "isactive": "1", + "createdby": "sriram v", + "updatedby": null, + "lender_details": [ + { + "template_lender_map_id": "1", + "fk_template_id": "3", + "fk_lender_id": "1", + "full_name": "ICICIedited", + "short_name": "checkee", + "fk_product_id": "1", + "product_name": "Home Loan ", + "product_abbr": "HL", + "fk_customer_segment": "1", + "customer_segment_name": "Salaried Non Professional ", + "customer_segment_abbr": "SNP", + "createdon": "11/10/2018", + "fk_createdby": "1", + "updatedon": null, + "isactive": "1", + "fk_updatedby": null, + "createdby": "sriram v", + "updatedby": null + }, + { + "template_lender_map_id": "2", + "fk_template_id": "3", + "fk_lender_id": "1", + "full_name": "ICICIedited", + "short_name": "checkee", + "fk_product_id": "2", + "product_name": "Non Residential Premises Loans", + "product_abbr": "NRPL", + "fk_customer_segment": "2", + "customer_segment_name": "Salaried Professional ", + "customer_segment_abbr": "SP", + "createdon": "11/10/2018", + "fk_createdby": "1", + "updatedon": "11/10/2018", + "isactive": "1", + "fk_updatedby": null, + "createdby": "sriram v", + "updatedby": null + }, + { + "template_lender_map_id": "2", + "fk_template_id": "3", + "fk_lender_id": "1", + "full_name": "ICICIedited", + "short_name": "checkee", + "fk_product_id": "2", + "product_name": "Non Residential Premises Loans", + "product_abbr": "NRPL", + "fk_customer_segment": "2", + "customer_segment_name": "Salaried Professional ", + "customer_segment_abbr": "SP", + "createdon": "11/10/2018", + "fk_createdby": "1", + "updatedon": "11/10/2018", + "isactive": "1", + "fk_updatedby": null, + "createdby": "sriram v", + "updatedby": null + } + ] + } + ] +} + } diff --git a/ng6-seed/src/app/template/templates/templates.component.ts b/ng6-seed/src/app/template/templates/templates.component.ts index ace2651e4..4440478d4 100644 --- a/ng6-seed/src/app/template/templates/templates.component.ts +++ b/ng6-seed/src/app/template/templates/templates.component.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; @Component({ - template: `

Templates Master Details List

+ template: `
diff --git a/ng6-seed/src/app/template/templates/templates.module.ts b/ng6-seed/src/app/template/templates/templates.module.ts index f7ca24067..a7c1b6938 100644 --- a/ng6-seed/src/app/template/templates/templates.module.ts +++ b/ng6-seed/src/app/template/templates/templates.module.ts @@ -12,7 +12,8 @@ import { MatProgressBarModule,MatDialogModule, MatSortModule, MatToolbarModule,MatSelectModule, MatListModule, MatMenuModule, - MatCheckboxModule, MatStepperModule + MatCheckboxModule, MatStepperModule, MatTabsModule, + MatExpansionModule } from '@angular/material'; import {MatSlideToggleModule} from '@angular/material/slide-toggle'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; @@ -24,6 +25,9 @@ import { TemplatesRouting } from './templates.routing'; import { TemplatesComponent } from './templates.component'; import { TemplateListComponent } from './templates-list/templates.list.component'; import { TemplateEditComponent } from './templates-list/edit/templates.edit.component'; +import { EditCategoryComponent } from './templates-list/edit/edit-category/edit-category.component'; +import { EditLenderComponent } from './templates-list/edit/edit-lender/edit-lender.component'; +import { EditQuestionAnswerComponent } from './templates-list/edit/edit-question-answer/edit-question-answer.component'; // import { QuestionsService } from './../service/questions/questions.service'; /* @@ -86,7 +90,9 @@ const customNotifierOptions: NotifierOptions = { MatButtonModule,MatTableModule,MatPaginatorModule, MatProgressBarModule,MatDialogModule, MatSortModule, MatToolbarModule,MatSelectModule,MatListModule, MatMenuModule, + MatExpansionModule, MatStepperModule, + MatTabsModule, MatSlideToggleModule, MatCheckboxModule, FormsModule, @@ -96,7 +102,10 @@ const customNotifierOptions: NotifierOptions = { declarations: [ TemplatesComponent, TemplateListComponent, - TemplateEditComponent + TemplateEditComponent, + EditCategoryComponent, + EditLenderComponent, + EditQuestionAnswerComponent ], entryComponents: [ ],