Sunbird-Ed · pallakartheekreddy · Oct 25, 2022 · Oct 21, 2022
diff --git a/projects/common-form-elements/src/lib/common-form-config.ts b/projects/common-form-elements/src/lib/common-form-config.ts
@@ -114,7 +114,9 @@ export interface FieldConfig<T, F extends FieldConfigInputType = any> {
   output?: string;
   sourceCategory?: string;
   association?: any;
-  showInfo?:any;
+  showInfo?: any;
+  disabled?: any;
+  martixType?: any;
 }
 
 export enum FilterType {

diff --git a/projects/common-form-elements/src/lib/common-form-elements.module.ts b/projects/common-form-elements/src/lib/common-form-elements.module.ts
@@ -40,6 +40,7 @@ import { DynamicDateComponent } from './dynamic-date/dynamic-date.component';
 import { DynamicRichtextComponent } from './dynamic-richtext/dynamic-richtext.component';
 import { DynamicInputFieldComponent } from './dynamic-input-field/dynamic-input-field.component';
 import { DynamicInfoComponent } from './dynamic-info/dynamic-info.component';
+import { MatrixComponent } from './matrix/matrix.component';
 
 @NgModule({
    declarations: [
@@ -78,7 +79,8 @@ import { DynamicInfoComponent } from './dynamic-info/dynamic-info.component';
       DynamicDateComponent,
       DynamicRichtextComponent,
       DynamicInputFieldComponent,
-      DynamicInfoComponent
+      DynamicInfoComponent,
+      MatrixComponent
    ],
    imports: [
       CommonModule,

diff --git a/projects/common-form-elements/src/lib/dynamic-field/dynamic-field.directive.ts b/projects/common-form-elements/src/lib/dynamic-field/dynamic-field.directive.ts
@@ -26,6 +26,7 @@ import { DynamicFrameworkCategoryNestedSelectComponent } from '../dynamic-framew
 import { DynamicDateComponent } from '../dynamic-date/dynamic-date.component';
 import { DynamicRichtextComponent } from '../dynamic-richtext/dynamic-richtext.component';
 import { DynamicInputFieldComponent } from '../dynamic-input-field/dynamic-input-field.component';
+import { MatrixComponent } from '../matrix/matrix.component';
 
 const componentMapper = {
   textarea: DynamicTextareaComponent,
@@ -48,7 +49,8 @@ const componentMapper = {
   dialcode: DynamicDialcodeComponent,
   date: DynamicDateComponent,
   richtext: DynamicRichtextComponent,
-  dynamicInput: DynamicInputFieldComponent
+  dynamicInput: DynamicInputFieldComponent,
+  matrix: MatrixComponent
 };
 
 @Directive({

diff --git a/projects/common-form-elements/src/lib/dynamic-form/dynamic-form.component.ts b/projects/common-form-elements/src/lib/dynamic-form/dynamic-form.component.ts
@@ -191,6 +191,9 @@ export class DynamicFormComponent implements OnInit, OnChanges, OnDestroy  {
       case 'richtext':
         defaultVal = element.default || null;
         break;
+      case 'matrix':
+        defaultVal = element.default || null;
+        break;
       case 'select':
       case 'topicselector':
       case 'framework':
@@ -267,6 +270,8 @@ export class DynamicFormComponent implements OnInit, OnChanges, OnDestroy  {
               validationList.push(Validators.required);
             } else if (element.inputType === 'checkbox') {
               validationList.push(Validators.requiredTrue);
+            } else if (element.inputType === 'matrix') {
+              validationList.push(Validators.requiredTrue);
             } else {
               validationList.push(Validators.required);
             }

diff --git a/projects/common-form-elements/src/lib/keywords/keywords.component.ts b/projects/common-form-elements/src/lib/keywords/keywords.component.ts
@@ -90,18 +90,18 @@ export class KeywordsComponent implements OnInit,OnChanges,OnDestroy {
   }
 
   onItemAdded(ev) {
-    let items: any = [];
-    items = this.field.options;
-    let res = items.filter(item => item === ev.label);
-    if (res.length === 0) {
-      items.push(ev.label);
+    let fieldOptions = [];
+    fieldOptions = this.field.options;
+    const checkObject = fieldOptions.find(o => o.label === ev.label);
+    if (!checkObject) {
+    const obj = this.selectedItems.find(o => o.label === ev.label);
+    obj.value =  'ECM_' + Date.now();
+    }
+    if (ev.label === ev.value) {
+      const index = _.findIndex(this.selectedItems, (el) => el.value === ev.value);
+      this.selectedItems.splice(index, 1);
+      this.formControlRef.patchValue(this.selectedItems);
     }
-    this.selectedItems.push(ev.label)
-    this.selectedItems.forEach((el, index) => {
-      if (el?.label === ev.label) {
-        this.selectedItems.splice(index, 1);
-      }
-    })
   }
 
   isOptionsClosure(options: any) {

diff --git a/projects/common-form-elements/src/lib/matrix/matrix.component.css b/projects/common-form-elements/src/lib/matrix/matrix.component.css
@@ -0,0 +1,32 @@
+label {
+    font-size: 16px;
+}
+
+.sb-textbox {
+    width: 15%;
+    margin: 5px;
+    padding: 8px 16px;
+    border: 0.5px solid #333333;
+    box-sizing: border-box;
+    margin-bottom: 15px;
+    text-align: center;
+}
+
+::placeholder {
+    padding: 0.25rem;
+    opacity: 0.99;
+    color: #999999;
+    font-family: "Noto Sans";
+    font-size: 12px;
+    font-weight: bold;
+}
+
+.sb-input {
+    margin: 1rem 0;
+}
+
+.cf-error{
+    color: red;
+    font-family: "Noto Sans";
+    font-size: 12px;
+  }
diff --git a/projects/common-form-elements/src/lib/matrix/matrix.component.html b/projects/common-form-elements/src/lib/matrix/matrix.component.html
@@ -0,0 +1,17 @@
+<div class="sb-input">
+    <label *ngIf="label" [attr.data-title]="field.description ? field.description : null">{{label}}</label>
+    <sb-dynamic-info [data]="field"></sb-dynamic-info>
+    <form [formGroup]="form">
+      <div *ngFor="let row of form.controls;let i=index">
+        <input *ngFor="let col of row.controls;let j=index" [formControl]="col" class="sb-textbox"
+          [type]='field?.dataType[j]' [placeholder]='field?.placeholder[j]' [attr.disabled]='field?.disabled[j]'
+          (input)="onChange(this.form.value,this.form.valid)" required>
+      </div>
+    </form>
+    <ng-container *ngFor="let validation of validations">
+      <div class="cf-error"
+        *ngIf="(validation.type && (validation.type).toLowerCase() && validation.message && formControlRef.errors && formControlRef.errors[(validation.type).toLowerCase()])">
+        {{ validation.message }}
+      </div>
+    </ng-container>
+  </div>
diff --git a/projects/common-form-elements/src/lib/matrix/matrix.component.spec.ts b/projects/common-form-elements/src/lib/matrix/matrix.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MatrixComponent } from './matrix.component';
+
+describe('MatrixComponent', () => {
+  let component: MatrixComponent;
+  let fixture: ComponentFixture<MatrixComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MatrixComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MatrixComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/common-form-elements/src/lib/matrix/matrix.component.ts b/projects/common-form-elements/src/lib/matrix/matrix.component.ts
@@ -0,0 +1,52 @@
+import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { FormArray, FormControl, Validators } from '@angular/forms';
+import {
+  CustomFormControl,
+  FieldConfig,
+  FieldConfigAsyncValidation,
+} from '../common-form-config';
+import * as _ from 'lodash-es';
+
+@Component({
+  selector: 'sb-matrix',
+  templateUrl: './matrix.component.html',
+  styleUrls: ['./matrix.component.css'],
+})
+export class MatrixComponent implements OnInit {
+  form = new FormArray([]);
+  @Input() formControlRef: CustomFormControl;
+  @Input() field: FieldConfig<String>;
+  @Input() label: String;
+  @Input() validations?: any;
+  @Input() asyncValidation?: FieldConfigAsyncValidation;
+  @ViewChild('validationTrigger') validationTrigger: ElementRef;
+
+  constructor() {
+  }
+
+  ngOnInit() {
+    for (let i = 0; i < _.get(this.field, 'martixType[0]'); i++) {
+      this.form.push(new FormArray([]));
+      for (let j = 0; j < _.get(this.field, 'martixType[1]'); j++) {
+        (this.form.at(i) as FormArray).push(new FormControl());
+      }
+    }
+    this.form.patchValue(this.field?.default);
+    setTimeout(() => {
+        this.onChange(this.form.value, this.form.valid);
+    }, 100);
+  }
+
+  onChange(value, isValid) {
+    this.formControlRef.setValue(value);
+    this.formControlRef.markAsTouched();
+    if (isValid) {
+      this.formControlRef.clearValidators();
+      this.formControlRef.setErrors(null);
+    } else {
+      this.formControlRef.setValidators([Validators.requiredTrue]);
+      this.formControlRef.setErrors({required: true});
+    }
+    this.formControlRef.updateValueAndValidity();
+  }
+}
diff --git a/src/app/formConfig.ts b/src/app/formConfig.ts
@@ -27,7 +27,131 @@ export const timer = [
         ],
         'required': true,
         'visible': true,
-      }]
+      },
+      {
+        'code': 'scoreRange',
+        'dataType': ['text', 'number', 'number'],
+        'description': 'Name of the Instruction',
+        'showInfo': true,
+        'editable': true,
+        'disabled': [true, null, null],
+        'inputType': 'matrix',
+        'martixType': [3, 2],
+        'label': 'Define Score range for Each levels',
+        'name': 'Instruction',
+        'placeholder': ['label', 'minimum', 'maximum'],
+        'default': [['Good', 70, 100], ['Average', 40, 70], ['Bad', null, 30]],
+        'renderingHints': {
+          'class': 'sb-g-col-lg-2 required'
+        },
+        'validations': [
+          {
+            'type': 'required',
+            'message': 'Score range for Each levels'
+          }
+        ],
+        'required': true,
+        'visible': true,
+      },
+      {
+        code: 'recordedBy',
+        name: 'RecordedBy',
+        label: 'Observation Recorded By',
+        placeholder: 'Select Observation Recorded By',
+        description: 'Select Observation Recorded By',
+        dataType: 'text',
+        inputType: 'select',
+        editable: true,
+        output: 'label',
+        required: true,
+        visible: true,
+        renderingHints: {
+          class: 'sb-g-col-lg-1 required',
+        },
+        range: [
+          {
+            value: 'Self',
+            label: 'Self',
+          },
+          {
+            value: 'External',
+            label: 'External',
+          },
+        ],
+        validations: [
+          {
+            type: 'required',
+            message: 'Observation Recorded By is required',
+          },
+        ],
+      },
+      {
+        code: 'allowECM',
+        name: 'allowECM',
+        depends: ['recordedBy'],
+        label: 'Add Evidence collection methods',
+        placeholder: 'Add Evidence collection methods',
+        description: 'Add Evidence collection methods',
+        dataType: 'text',
+        inputType: 'checkbox',
+        editable: true,
+        required: false,
+        visible: true,
+        renderingHints: {
+          class: 'sb-g-col-lg-1',
+        },
+      },
+      {
+        code: 'ecm',
+        name: 'ECM',
+        depends: ['allowECM'],
+        label: 'Select ECM',
+        placeholder: 'Select ECM',
+        description: 'ECM for the Observation with rubrics',
+        dataType: 'list',
+        inputType: 'selectTextBox',
+        editable: true,
+        required: false,
+        visible: true,
+        renderingHints: {
+          class: 'sb-g-col-lg-1',
+        },
+        options: [
+          {
+            value: 'ECM_1665656636257',
+            label: 'Student interview',
+          },
+          {
+            value: 'ECM_1665656666379',
+            label: 'Teacher interview',
+          },
+          {
+            value: 'ECM_1665656694741',
+            label: 'HM/HT interview',
+          },
+          {
+            value: 'ECM_1665656716414',
+            label: 'Parent interview',
+          },
+          {
+            value: 'ECM_1665719517607',
+            label: 'Official interview',
+          },
+          {
+            value: 'ECM_1665719576656',
+            label: 'School walkthrough',
+          },
+          {
+            value: 'ECM_1665719587380',
+            label: 'Class observation',
+          },
+          {
+            value: 'ECM_1665719655162',
+            label: 'Document Review',
+          }
+        ],
+      },
+    ]
 },
 {
     'name': 'First Section',