question master add changes : kdk

ng6-seed/src/app/template/questions/add/add.component.html

@@ -1,55 +1,71 @@
-<div style="max-height: 580px;">
+<!--<pre> {{ m_group | json}}</pre>-->
+
+<h2 mat-dialog-title>{{pageTitle}}</h2>
+<mat-dialog-content class="mat-typography">
   <mat-card style="width: 580px; padding: 6px;">
-      <div class="ml-xs mr-xs" style="width: 100%;" fxLayout="row" fxLayoutAlign="center">
+    <form [formGroup]="_addQuesFrom" (submit)="onSubmit()" novalidate>
-        <h2 mat-dialog-title style="width: 50%;">{{pageTitle}}</h2>
+      <div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none">
-        <div style="width: 20%;"></div>
+        <div fxFlex="50">
-        <div style="width: 30%;text-align:right;">
+          <mat-form-field>
-          <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above" (click)="onNoClick()"><mat-icon>close</mat-icon></button>
-        </div>
-      </div>
-      <form [formGroup]="_addQuesFrom" (submit)="onSubmit()">
-        <!--<div class="form-group">-->
-        <div fxLayout="row" fxLayoutAlign="start none">
-          <mat-form-field class="ml-xs example-full-width">
             <mat-select placeholder="Select Category" formControlName="fk_question_category">
               <mat-option *ngFor="let ct of categories" [value]="ct.question_category_id">{{ ct.category_name }}</mat-option>
             </mat-select>
             <mat-error *ngIf="submitted && f.fk_question_category.hasError('required')" class="mat-text-warn">You must Select Category.</mat-error>
           </mat-form-field>
         </div>
+        <div fxFlex="50">
+          <mat-form-field>
+            <mat-select placeholder="Select Group" formControlName="fk_question_group_id">
+              <mat-option *ngFor="let gp of m_group" [value]="gp.question_group_id">{{ gp.group_name }}</mat-option>
+            </mat-select>
+            <mat-error *ngIf="submitted && f.fk_question_group_id.hasError('required')" class="mat-text-warn">You must Select Group.</mat-error>
+          </mat-form-field>
+        </div>
+      </div>
       <div fxLayout="row" fxLayoutAlign="start none">
-          <mat-form-field class="ml-xs example-full-width">
+        <div class="example-full-width">
+          <mat-form-field fxFill>
             <textarea matInput placeholder="Question" formControlName="question"></textarea>
             <mat-error *ngIf="submitted && f.question.hasError('required')" class="mat-text-warn">You must Include Question.</mat-error>
           </mat-form-field>
         </div>
+      </div>
       <div fxLayout="row" fxLayoutAlign="start none">
-          <mat-form-field class="ml-xs example-full-width">
+        <div class="example-full-width">
+          <mat-form-field fxFill>
             <textarea matInput placeholder="Description" formControlName="description"></textarea>
             <mat-error *ngIf="submitted && f.description.hasError('required')" class="mat-text-warn">You must Include Description.</mat-error>
           </mat-form-field>
         </div>
+      </div>
       <div fxLayout="row" fxLayoutAlign="start none">
-          <mat-form-field class="ml-xs example-full-width">
+        <div>
+          <mat-form-field>
             <mat-select placeholder="Select Answer Type" formControlName="fk_question_answertype">
               <mat-option *ngFor="let ans of questionsOptions" [value]="ans.question_answer_type_id">{{ ans.answer_type_name }}</mat-option>
             </mat-select>
             <mat-error *ngIf="submitted && f.fk_question_answertype.hasError('required')" class="mat-text-warn">You must Select Answer Type.</mat-error>
           </mat-form-field>
         </div>
+      </div>
       <div fxLayout="row" fxLayoutAlign="start none">
-          <div formArrayName="answers" class="example-full-width">
+        <div formArrayName="answers" fxFill>
           <div *ngFor="let answ of _addQuesFrom.controls.answers['controls']; let i=index">
             <div [formGroupName]="i">
-                <div fxLayout="row" style="width: 100%">
+              <div fxLayout="row" fxLayoutGap="12px" fxLayoutAlign="start none">
-                  <div style="width: 80%">
+                <div fxFlex="80">
                   <mat-form-field class="ml-xs example-full-width">
-                      <!--<span>Answer {{i + 1}}</span>-->
                     <textarea matInput placeholder="Answer" formControlName="answer"></textarea>
-                      <!--<mat-error *ngIf="submitted && answer.hasError('required')" class="mat-text-warn">You must Include Question.</mat-error>-->
                   </mat-form-field>
                 </div>
-                  <div style="width:20%">
+                <div fxFlex="30">
+                  <mat-form-field>
+                    <mat-select placeholder="Select Group" formControlName="fk_question_group_id">
+                      <mat-option *ngFor="let gp of m_group" [value]="gp.question_group_id">{{ gp.group_name }}</mat-option>
+                    </mat-select>
+                    </mat-form-field>
+                </div>
+                <div fxFlex="20">
                   <span *ngIf="_addQuesFrom.controls.answers.controls.length > 1" (click)="removeLanguage(i)">
                      <button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
                    </span>
@@ -57,22 +73,17 @@
               </div>
             </div>
           </div>
-            <button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Answer" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" (click)="addLanguage($event); false"><mat-icon>add</mat-icon></button>
+          <button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Answer" matTooltipPosition="above"
-            <!-- <button mat-button color="primary" matTooltip="Add More Answer" matTooltipPosition="above" (click)="addLanguage($event); false">Add More</button> -->
+            class="mr-1 mb-1 hover-icon" (click)="addLanguage($event); false"><mat-icon>add</mat-icon></button>
-            <!--<a (click)="addLanguage()" style="cursor: default">Add another Answer </a>-->
         </div>
       </div>
-        <!--Error List Shown Here-->
-        <!--<ul>
-        <li *ngFor="let err of errorMessage">
-          <mat-error>{{err.err}}</mat-error>
-        </li>
-      </ul>-->
       <div class="row" style="text-align:right;">
         <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Reset" matTooltipPosition="above" type="reset"><mat-icon>settings_backup_restore</mat-icon></button>
         <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
       </div>
-        <!--</div>-->
     </form>
   </mat-card>
-  </div>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-button mat-dialog-close>Cancel</button>
+</mat-dialog-actions>

ng6-seed/src/app/template/questions/add/add.component.ts

@@ -39,6 +39,7 @@ export class AddComponent implements OnInit {
   public submitted = false;
   public categories: any = [];
   public questionsOptions: any = [];
+  public m_group: any = [];
   errorMessage: string;
 
 	/**
@@ -62,6 +63,7 @@ export class AddComponent implements OnInit {
       question: [null, Validators.compose([Validators.required])],
       description: [null, Validators.compose([Validators.required])],
       fk_question_category: [null, Validators.compose([Validators.required])],
+      fk_question_group_id: [null, Validators.compose([Validators.required])],
       fk_question_answertype: [null, Validators.compose([Validators.required])],
       answers: this._formBuilder.array([
         this.initAnswers(),
@@ -70,6 +72,7 @@ export class AddComponent implements OnInit {
     // OnInit Load Category and Question Type Masters
     this.getCategoryListMaster();
     this.getQuestionOptionsMaster();
+    this.getQuestionGroupMaster();
   }
 
   // convenience getter for easy access to form fields
@@ -78,7 +81,8 @@ export class AddComponent implements OnInit {
   // Dynamic Form field creation Functionality : START ===>
   initAnswers() {
     return this._formBuilder.group({
-      answer: ['', Validators.compose([Validators.required])]
+      answer: ['', Validators.compose([Validators.required])],
+      fk_question_group_id: ['']
     });
   }
   addLanguage(e) {
@@ -103,6 +107,19 @@ export class AddComponent implements OnInit {
       }
     )
   }
+
+  getQuestionGroupMaster() {
+    this.masterService.getAllMasterData('QUESTIONGROUP').subscribe(
+      data => {
+        this.m_group = data.records;
+      },
+      error => {
+        this.notifier.notify('warning', 'No Question Group Records Found.!');
+        this.errorMessage = "No Question Group Records Found.";
+      }
+    )
+  }
+
   getQuestionOptionsMaster() {
     this.masterService.getAllMasterData('QUESTIONANSWERTYPE').subscribe(
       data => {

ng6-seed/src/app/template/questions/edit/edit.component.html

@@ -1,63 +1,77 @@
-<div style="max-height: 480px;">
+<h2 mat-dialog-title>{{pageTitle}}</h2>
+<mat-dialog-content class="mat-typography">
   <mat-card style="width: 580px; padding: 6px;">
-      <div class="ml-xs mr-xs" style="width: 100%;" fxLayout="row" fxLayoutAlign="center">
-        <h2 mat-dialog-title style="width: 50%;">{{pageTitle}}</h2>
-        <div style="width: 20%;"></div>
-        <div style="width: 30%;text-align:right;">
-          <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above" (click)="onNoClick()"><mat-icon>close</mat-icon></button>
-        </div>
-      </div>
-  
     <form [formGroup]="_addQuesFrom" (submit)="onSubmit()">
       <!--<div class="form-group">-->
-        <div fxLayout="row" fxLayoutAlign="start none">
+      <div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none">
-          <mat-form-field class="ml-xs example-full-width">
+        <div fxFlex="50">
+          <mat-form-field>
             <mat-select placeholder="Select Category" formControlName="fk_question_category">
               <mat-option *ngFor="let ct of categories" [value]="ct.question_category_id">{{ ct.category_name }}</mat-option>
             </mat-select>
             <mat-error *ngIf="submitted && f.fk_question_category.hasError('required')" class="mat-text-warn">You must Select Category.</mat-error>
           </mat-form-field>
         </div>
+        <div fxFlex="50">
+          <mat-form-field>
+            <mat-select placeholder="Select Group" formControlName="fk_question_group_id">
+              <mat-option *ngFor="let gp of m_group" [value]="gp.question_group_id">{{ gp.group_name }}</mat-option>
+            </mat-select>
+            <mat-error *ngIf="submitted && f.fk_question_group_id.hasError('required')" class="mat-text-warn">You must Select Group.</mat-error>
+          </mat-form-field>
+        </div>
+      </div>
       <div fxLayout="row" fxLayoutAlign="start none">
-          <mat-form-field class="ml-xs example-full-width">
+        <div class="example-full-width">
+          <mat-form-field fxFill>
             <textarea matInput placeholder="Question" formControlName="question"></textarea>
             <mat-error *ngIf="submitted && f.question.hasError('required')" class="mat-text-warn">You must Include Question.</mat-error>
           </mat-form-field>
         </div>
+      </div>
       <div fxLayout="row" fxLayoutAlign="start none">
-          <mat-form-field class="ml-xs example-full-width">
+        <div class="example-full-width">
+          <mat-form-field fxFill>
             <textarea matInput placeholder="Description" formControlName="description"></textarea>
             <mat-error *ngIf="submitted && f.description.hasError('required')" class="mat-text-warn">You must Include Description.</mat-error>
           </mat-form-field>
         </div>
+      </div>
       <div fxLayout="row" fxLayoutAlign="start none">
-          <mat-form-field class="ml-xs example-full-width">
+        <div>
+          <mat-form-field>
             <mat-select placeholder="Select Answer Type" formControlName="fk_question_answertype">
               <mat-option *ngFor="let ans of questionsOptions" [value]="ans.question_answer_type_id">{{ ans.answer_type_name }}</mat-option>
             </mat-select>
             <mat-error *ngIf="submitted && f.fk_question_answertype.hasError('required')" class="mat-text-warn">You must Select Answer Type.</mat-error>
           </mat-form-field>
         </div>
+      </div>
       <div fxLayout="row" fxLayoutAlign="start none">
-
         <!--<mat-checkbox formControlName="isactive" [ngModel]="f.isactive.value === 1 ? true : false"
             (ngModelChange)="f.isactive.value = $event ? 1 : 0">Active/InActive</mat-checkbox>
       -->
-
       </div>
       <div fxLayout="row" fxLayoutAlign="start none">
-          <div formArrayName="answers" class="example-full-width">
+        <div formArrayName="answers" fxFill>
           <div *ngFor="let answ of f_ans.controls; let i=index">
             <div [formGroupName]="i">
-                <div fxLayout="row" style="width: 100%">
+              <div fxLayout="row" fxLayoutGap="12px" fxLayoutAlign="start none">
-                  <div style="width: 80%">
+                <div fxFlex="80">
                   <mat-form-field class="ml-xs example-full-width">
                     <!--<span>Answer {{i + 1}} </span>-->
                     <textarea matInput placeholder="Answer" formControlName="answer"></textarea>
                     <!--<mat-error *ngIf="submitted && answer.hasError('required')" class="mat-text-warn">You must Include Question.</mat-error>-->
                   </mat-form-field>
                 </div>
-                  <div style="width:20%">
+                <div fxFlex="30">
+                  <mat-form-field>
+                    <mat-select placeholder="Select Group" formControlName="fk_question_group_id">
+                      <mat-option *ngFor="let gp of m_group" [value]="gp.question_group_id">{{ gp.group_name }}</mat-option>
+                    </mat-select>
+                  </mat-form-field>
+                </div>
+                <div fxFlex="20">
                   <mat-checkbox *ngIf="answ.get('question_answer_id').value != null" formControlName="isactive" [ngModel]="answ.get('isactive').value == 1 ? true : answ.get('isactive').value == 0 ? false : null"
                     (ngModelChange)="answ.get('isactive').value = $event ? 1 : 0"></mat-checkbox>
                   <span *ngIf="_addQuesFrom.controls.answers.controls.length > 1" (click)="removeLanguage(i)">
@@ -67,12 +81,12 @@
               </div>
             </div>
           </div>
-            <button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Answer" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" (click)="addLanguage(null, null, null, $event); false"><mat-icon>add</mat-icon></button>
+          <button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Answer" matTooltipPosition="above"
+            class="mr-1 mb-1 hover-icon" (click)="addLanguage(null, null, null, $event); false"><mat-icon>add</mat-icon></button>
           <!-- <button mat-button color="primary" matTooltip="Add More Answer" matTooltipPosition="above" (click)="addLanguage(null, null, null, $event); false">Add More</button> -->
           <!--<a (click)="addLanguage()" style="cursor: default">Add another Answer </a>-->
         </div>
       </div>
-     
       <!--Error List Shown Here-->
       <!--<ul>
         <li *ngFor="let err of errorMessage">
@@ -87,6 +101,8 @@
       <!--</div>-->
     </form>
   </mat-card>
-  </div>
+</mat-dialog-content>
-  
+<mat-dialog-actions align="end">
+  <button mat-button mat-dialog-close>Cancel</button>
+</mat-dialog-actions>
 <notifier-container></notifier-container>

ng6-seed/src/app/template/questions/edit/edit.component.ts

@@ -39,6 +39,7 @@ export class EditComponent implements OnInit {
   public _addQuesFrom: FormGroup;
   public submitted = false;
   public categories: any = [];
+  public m_group: any = [];
   public questionsOptions: any = [];
   errorMessage: string;
 
@@ -60,15 +61,16 @@ export class EditComponent implements OnInit {
 
   ngOnInit() {
     this.loadFormData();
-    if (this.data["0"].length > 0) {
+    // if (this.data["0"].length > 0) {
-      for (let val of this.data["0"]) {
+    //   for (let val of this.data["0"]) {
-        // alert(JSON.stringify(val));
+    //     // alert(JSON.stringify(val));
-        let vals = val;
+    //     let vals = val;
-        this.addLanguage(vals['answer'], vals['question_answer_id'], vals['isactive'], null);
+    //     this.addLanguage(vals['answer'], vals['question_answer_id'], vals['isactive'], null);
-      }
+    //   }
-    }
+    // }
     // OnInit Load Category and Question Type Masters
     this.getCategoryListMaster();
+    this.getQuestionGroupMaster();
     this.getQuestionOptionsMaster();
   }
 
@@ -78,7 +80,7 @@ export class EditComponent implements OnInit {
       for (let val of this.data["0"]) {
         // alert(JSON.stringify(val));
         let vals = val;
-        this.addLanguage(vals['answer'], vals['question_answer_id'], vals['isactive'], null);
+        this.addLanguage(vals['answer'], vals['question_answer_id'], vals['fk_question_group_id'], vals['isactive'], null);
       }
     }
   }
@@ -91,6 +93,7 @@ export class EditComponent implements OnInit {
       question: [this.data.question, Validators.compose([Validators.required])],
       description: [this.data.description, Validators.compose([Validators.required])],
       fk_question_category: [this.data.fk_question_category, Validators.compose([Validators.required])],
+      fk_question_group_id: [this.data.fk_question_group_id, Validators.compose([Validators.required])],
       fk_question_answertype: [this.data.fk_question_answertype, Validators.compose([Validators.required])],
       isactive: [this.data.isactive],
       answers: this._formBuilder.array([
@@ -107,17 +110,18 @@ export class EditComponent implements OnInit {
 
 
   // Dynamic Form field creation Functionality : START ===>
-  initAnswers(ans, fk_id, isAct) {
+  initAnswers(ans, fk_id, fk_question_group_id, isAct) {
     isAct = isAct == null ? 1 : isAct;
     return this._formBuilder.group({
       answer: [ans, Validators.compose([Validators.required])],
       question_answer_id: [fk_id],
+      fk_question_group_id: [fk_question_group_id],
       isactive: [isAct]
     });
   }
-  addLanguage(ans, fk_id, isAct, e) {
+  addLanguage(ans, fk_id, fk_question_group_id, isAct, e) {
     const control = <FormArray>this._addQuesFrom.controls['answers'];
-    control.push(this.initAnswers(ans, fk_id, isAct));
+    control.push(this.initAnswers(ans, fk_id, fk_question_group_id, isAct));
   }
   removeLanguage(i: number) {
     const control = <FormArray>this._addQuesFrom.controls['answers'];
@@ -137,6 +141,18 @@ export class EditComponent implements OnInit {
       }
     )
   }
+
+   getQuestionGroupMaster() {
+    this.masterService.getAllMasterData('QUESTIONGROUP').subscribe(
+      data => {
+        this.m_group = data.records;
+      },
+      error => {
+        this.notifier.notify('warning', 'No Question Group Records Found.!');
+        this.errorMessage = "No Question Group Records Found.";
+      }
+    )
+  }
   getQuestionOptionsMaster() {
     this.masterService.getAllMasterData('QUESTIONANSWERTYPE').subscribe(
       data => {