@ruc-lib/metaform 2.0.0 → 2.0.1

package/src/components/ruc-meta-select/ruc-meta-select.component.ts

@@ -0,0 +1,45 @@
+import { Component, Input, OnInit, EventEmitter, Output } from '@angular/core';
+import { RucMetaFormService } from "../../services/ruc-meta-form.service"
+import {RucMetaFormValidationService} from  '../../services/ruc-meta-form-validation.service';
+
+@Component({
+  selector: 'ruc-meta-select',
+  templateUrl: './ruc-meta-select.component.html',
+  styleUrls: ['./ruc-meta-select.component.css']
+})
+export class RucMetaSelectComponent implements OnInit {
+  
+  @Input() rucInputData : any;
+  errorMessage: string | undefined
+  @Output() transferUserInput = new EventEmitter<any>();
+  constructor(public service: RucMetaFormService,public validationService:RucMetaFormValidationService) { }
+
+  ngOnInit(): void {
+    this.errorMessage = this.validationService.defaultErrorMessage;
+  }
+
+  modelChangeFn(e:any) {    
+    this.rucInputData.groupOptions.forEach((x: any)=>{
+      if(x.value == e.value){
+        this.rucInputData.selectedParentId = x.id;
+      }
+    });
+    if(this.rucInputData.dependentFields){
+      this.removDependentFieldParentIdFromOther(this.rucInputData.dependentFields);
+    }
+    this.service.currentFormElement = this.rucInputData;
+    this.transferUserInput.emit(this.rucInputData);
+  }
+
+  removDependentFieldParentIdFromOther(child: any){
+      child.forEach((x:any)=>{
+        if(x.selectedParentId){
+          delete(x.selectedParentId);
+          x.value = "";
+          if(x.dependentFields){
+            this.removDependentFieldParentIdFromOther(x.dependentFields);
+          }    
+        }             
+      })
+  }
+}

package/src/components/ruc-text-area/ruc-text-area.component.html

@@ -0,0 +1,16 @@
+<mat-form-field [ngStyle]="{ 'width.%': rucInputData?.width }" [appearance]="rucInputData?.appearance || 'fill'" class="{{customTheme}}">
+    <mat-label>{{rucInputData?.label}}</mat-label>
+    <textarea matInput
+              placeholder="{{rucInputData?.placeholder}}"
+              cdkTextareaAutosize
+              #autosize="cdkTextareaAutosize"
+              cdkAutosizeMinRows="{{rucInputData.min}}"
+              cdkAutosizeMaxRows="{{rucInputData.max}}"
+              [readonly]="rucInputData?.readonly"
+              [(ngModel)]="rucInputData.value" 
+              matTooltip="{{rucInputData?.tooltip}}"
+              (ngModelChange)="modelChangeFn($event.target)"></textarea>
+  </mat-form-field>
+  <div *ngIf="rucInputData?.errorMsg" class="form-error">
+    {{rucInputData?.customErrorMessage ? rucInputData?.customErrorMessage : errorMessage}}
+  </div>

package/src/components/ruc-text-area/ruc-text-area.component.spec.ts

@@ -0,0 +1,100 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RucTextAreaComponent } from './ruc-text-area.component';
+import {TextFieldModule} from '@angular/cdk/text-field';
+import { MetaFormConfig } from '../../interfaces/metaFormsDefault';
+describe('RucTextAreaComponent', () => {
+  let component: RucTextAreaComponent;
+  let fixture: ComponentFixture<RucTextAreaComponent>;
+  const mockFormData: MetaFormConfig = {
+    "formType": "simple",
+    "fieldType": "textarea",
+    "inputType": "text",
+    "id": "firstName",
+    "name": "firstName",
+    "errorMsg": false,
+    "label": "First Name",
+    "className": "firstName",
+    "value": "",
+    "alt": "na",
+    "appearance": "outline",
+    "min": "4",
+    "max": "20",
+    "width": "100",
+    "height": "20",
+    "checked": false,
+    "disabled": false,
+    "maxlength": "100",
+    "readonly": false,
+    "required": false,
+    "size": "100",
+    "step": "100",
+    "sameRow": true,
+    "sameRowColumnWidth": "25",
+    "tooltip": "First Name",
+    "tooltipPosition": "right",
+    "pattern": "any",
+    "placeholder": "First Name",
+    "autofocus": true,
+    "autocomplete": ["amar", "bharat", "charan"],
+    "customComponentName": "none",
+    "rucDialogInput": {},
+    "hasDependentFields": false,
+    "dependentFieldParentId": "any",
+    "toolTipDescription": "none",
+    "showErrorOnPopUp": true,
+    "groupOptions": [
+      {
+        "id": "Winter",
+        "name": "Winter",
+        "value": ""
+      },
+      {
+        "id": "Spring",
+        "name": "Spring",
+        "value": ""
+      },
+      {
+        "id": "Summer",
+        "name": "Summer",
+        "value": ""
+      },
+      {
+        "id": "Autumn",
+        "name": "Autumn",
+        "value": ""
+      }
+    ],
+    "dependentFields": []
+  } 
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TextFieldModule],
+      declarations: [ RucTextAreaComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RucTextAreaComponent);
+    component = fixture.componentInstance;
+    component.rucInputData = mockFormData;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    component.rucInputData = mockFormData;
+    expect(component).toBeTruthy();
+  });
+
+  it('should called modelChangeFn ', () => {
+    component.rucInputData = mockFormData;
+    const event = {
+      value: "Winter"
+    }
+    const spy = spyOn(component.transferUserInput, 'emit');
+    component.modelChangeFn(event);
+    
+    expect(spy).toHaveBeenCalled();
+  })
+});

package/src/components/ruc-text-area/ruc-text-area.component.ts

@@ -0,0 +1,30 @@
+import { Component, Input, OnInit, EventEmitter, Output } from '@angular/core';
+import {RucMetaFormValidationService} from  '../../services/ruc-meta-form-validation.service';
+
+@Component({
+  selector: 'ruc-text-area',
+  templateUrl: './ruc-text-area.component.html',
+  styleUrls: ['./ruc-text-area.component.css']
+})
+export class RucTextAreaComponent implements OnInit {
+  @Input() rucInputData : any;
+  @Output() transferUserInput = new EventEmitter<any>();
+  @Input() customTheme: string | undefined;
+  errorMessage: string | undefined
+
+  constructor(public validationService:RucMetaFormValidationService) { 
+    
+  }
+
+  ngOnInit(): void {
+    this.errorMessage = this.validationService.defaultErrorMessage;
+  }
+  /**
+   * 
+   * @param e 
+   */
+  modelChangeFn(e:any) {
+    this.transferUserInput.emit(this.rucInputData);
+  }
+
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './lib/ruclib-metaform.module';
+export * from './lib/ruclib-metaform/ruclib-metaform.component';

package/src/interfaces/metaFormsDefault.ts

@@ -0,0 +1,71 @@
+
+export interface MetaFormConfig {
+    formType?: 'simple' | 'stepper' // less priority    
+    inputType: 'text' | 'password' | 'button' | 'checkbox' | 'email' | 'color' | 'date' | 'file' | 'hidden' | 'image' | 'radio' | 'number' | 'range'    | 'reset' | 'search' | 'submit' | 'time' | 'tel' | 'url' | 'week' | 'month' | 'number' | 'custom' | 'select' | 'rucMultiFileUpload' | 'rucMultiSelect',
+    fieldType: string,
+    id?: string,
+    errorMsg? : boolean,
+    name?: string,
+    label?: string,
+    value?: any,
+    className?: string, // to be check    value?: string, //Specifies the default value for an input field    src?: string,
+    alt?: string,
+    appearance?: string,
+    min?: string, //Specifies the minimum value for an input field    
+    max?: string, //Specifies the maximum value for an input field    
+    width?: string, // like for image    
+    height?: string, // like for image    
+    checked?: boolean, //Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio")    
+    disabled?: boolean, //Specifies that an input field should be disabled    
+    maxlength?: string, //Specifies the maximum number of character for an input field    
+    readonly?: boolean, //Specifies that an input field is read only (cannot be changed)    
+    required?: boolean, //Specifies that an input field is required (must be filled out)    
+    size?: string, //Specifies the width (in characters) of an input field    
+    step?: string, //Specifies the legal number intervals for an input field   
+    sameRow? : boolean, 
+    sameRowColumnWidth? : string, 
+    tooltip? : string,
+    tooltipPosition? : string, //'after', 'before', 'above', 'below', 'left', 'right'
+    pattern? : any, // The input pattern attribute specifies a regular expression that the input field's value is checked against, when the form is submitted. The pattern attribute works with the following input types: text, date, search, url, tel, email, and password.    
+    placeholder?: any,
+    autofocus?: any, //The input autofocus attribute specifies that an input field should automatically get focus when the page loads.   
+    autocomplete?: any,
+    customComponentName?: 'dialog' | 'multiselect' | 'none',
+    rucDialogInput? : any,    
+    rucMultiselectInput? : {
+      rucInputData? : any,
+      dataSource? : any
+    }, // multiselect interface   
+    rucMultiFileUpload? : {rucInputData? : any}
+    hasDependentFields?: boolean,
+    dependentFieldParentId?: any,
+    dependentFields?: MetaFormConfig[];
+    selectedParentId?: any;
+    toolTipDescription?: string,
+    customErrorMessage?: string,
+    showErrorOnPopUp?: boolean, //need to be discuss more. as a enhancement    
+    groupOptions?: groupOptions[] // Or like [''],
+    stepperForm?: boolean;
+    stepper?: Stepper[],
+    rucMultiFileUploadInput?:{
+      rucInputData? : any,
+    }
+}
+  export interface FormAttributes {
+    action: any,
+    target?: any,
+    method?:any,
+    novalidate?: boolean,
+    showFormProgress?: boolean // need to spend time on it  
+}
+  export interface groupOptions{
+    id: string,
+    name: string,
+    value?: string, // compulsary if its select option part    selected?: boolean 
+    disable? : boolean
+ }
+ export interface Stepper{
+  stepControl?: string;
+  stepperlabel?: string;
+  stepperFormData?: MetaFormConfig[];  
+ }

package/src/lib/ruclib-metaform/ruclib-metaform.component.html

@@ -0,0 +1,99 @@
+<form novalidate>
+    <ng-container *ngFor="let dynamicField of formData; let j = index;" [ngSwitch]="dynamicField?.fieldType">
+        <div [ngStyle] = "{ 'width.%': dynamicField.sameRowColumnWidth - 2 }"  [ngClass]="dynamicField.sameRow === true ? 'margin-5 column-in-same-row' : 'margin-5 column-in-new-row'" 
+        *ngIf="dynamicField.formType != 'stepper'">
+       
+        <ng-template [ngSwitchCase]="'input'">
+            <div *ngIf="(!selectedParentId && !dynamicField.hasDependentFields) || (selectedParentId && selectedParentId == dynamicField.dependentFieldParentId)">
+                <ruc-meta-inputs [customTheme] = "customTheme" [rucInputData]="dynamicField" (transferUserInput)="getMetaFormData($event)"></ruc-meta-inputs>
+            </div>
+        </ng-template>
+        <ng-template [ngSwitchCase]="'radio'">
+            <div *ngIf="(!selectedParentId && !dynamicField.dependentFields) || (selectedParentId && selectedParentId == dynamicField.dependentFieldParentId) || (!selectedParentId && dynamicField.dependentFields && !isChild)">
+                <ruc-meta-radio-group [customTheme] = "customTheme" [rucInputData]="dynamicField" (transferUserInput)="getMetaFormData($event)"></ruc-meta-radio-group>
+            </div>
+        </ng-template>
+        <ng-template [ngSwitchCase]="'checkbox'">
+            <div *ngIf="(!selectedParentId && !dynamicField.dependentFields) || (selectedParentId && selectedParentId == dynamicField.dependentFieldParentId) || (!selectedParentId && dynamicField.dependentFields && !isChild)">
+                <ruc-meta-checkbox-group [rucInputData]="dynamicField" (transferUserInput)="getMetaFormData($event)"></ruc-meta-checkbox-group>
+            </div>
+        </ng-template>
+        <ng-template class="" [ngSwitchCase]="'select'">
+            <div *ngIf="(!selectedParentId && !dynamicField.dependentFields) || (selectedParentId && selectedParentId == dynamicField.dependentFieldParentId) || (!selectedParentId && dynamicField.dependentFields && !isChild)">
+                <ruc-meta-select [rucInputData]="dynamicField" (transferUserInput)="getMetaFormData($event)"></ruc-meta-select>
+            </div>
+        </ng-template>
+        <ng-template class="" [ngSwitchCase]="'textarea'">
+            <ruc-text-area [rucInputData]="dynamicField" (transferUserInput)="getMetaFormData($event)"></ruc-text-area>
+        </ng-template>
+        <ng-template [ngSwitchCase]="'rucMultiSelect'">
+            <uxp-ruclib-multi-select [rucInputData]="dynamicField?.rucMultiselectInput?.rucInputData"
+            [dataSource]="dynamicField?.rucMultiselectInput?.dataSource" [customTheme]="customTheme"
+                (rucEvent)="passEvent($event)"></uxp-ruclib-multi-select>
+        </ng-template>
+        <ng-template [ngSwitchCase]="'rucMultiFileUpload'">
+            <uxp-ruclib-multi-file-upload
+                [rucInputData]="dynamicField?.rucMultiFileUploadInput?.rucInputData" [customTheme]="customTheme"
+                (rucEvent)="passEvent($event,dynamicField)"></uxp-ruclib-multi-file-upload>
+        </ng-template>
+        <div *ngIf="dynamicField.hasDependentFields && dynamicField.value">
+            <uxp-ruclib-metaform #dynamicField.id [rucInputData]="formData" [childForm] ="dynamicField.dependentFields"
+                     [isChild]="true" [selectedParentId] = "dynamicField.selectedParentId" (rucEvent)="passEvent($event,dynamicField.id)"></uxp-ruclib-metaform>
+        </div>
+        
+    </div>
+    <div *ngIf="dynamicField.formType == 'stepper'">
+            <mat-stepper linear #stepper>
+                <div *ngFor="let stapperField of dynamicField.stepper; let s = index;"  [ngSwitch]="stapperField?.fieldType">
+                    <mat-step [stepControl]="stapperField.stepControl" *ngIf="stapperField.stepControl != 'done'">
+                        <ng-template matStepLabel>{{stapperField.stepperlabel}}</ng-template>
+                        <ng-container *ngFor="let stepperFormData of stapperField.stepperFormData; let j = index;" [ngSwitch]="stepperFormData?.fieldType">
+                            <div [ngStyle] = "{ 'width.%': dynamicField.sameRowColumnWidth - 2 }"  [ngClass]="dynamicField.sameRow === true ? 'margin-5 column-in-same-row' : 'margin-5 column-in-new-row'" 
+                            >
+                            <ng-template [ngSwitchCase]="'input'">
+                                <div>
+                                    <ruc-meta-inputs [customTheme] = "customTheme" [rucInputData]="stepperFormData" (transferUserInput)="getMetaFormData($event)"></ruc-meta-inputs>
+                                </div>
+                            </ng-template>
+                            <ng-template class="" [ngSwitchCase]="'textarea'">
+                                <ruc-text-area [rucInputData]="stepperFormData" (transferUserInput)="getMetaFormData($event)"></ruc-text-area>
+                            </ng-template>
+                            <ng-template [ngSwitchCase]="'radio'">
+                                <div>
+                                    <ruc-meta-radio-group [customTheme] = "customTheme" [rucInputData]="stepperFormData" (transferUserInput)="getMetaFormData($event)"></ruc-meta-radio-group>
+                                </div>
+                            </ng-template>
+                            <ng-template [ngSwitchCase]="'checkbox'">
+                                <div >
+                                    <ruc-meta-checkbox-group [rucInputData]="stepperFormData" (transferUserInput)="getMetaFormData($event)"></ruc-meta-checkbox-group>
+                                </div>
+                            </ng-template>
+                            <ng-template class="" [ngSwitchCase]="'select'">
+                                <div *ngIf="(!selectedParentId && !dynamicField.dependentFields) || (selectedParentId && selectedParentId == dynamicField.dependentFieldParentId) || (!selectedParentId && dynamicField.dependentFields && !isChild)">
+                                    <ruc-meta-select [rucInputData]="dynamicField" (transferUserInput)="getMetaFormData($event)"></ruc-meta-select>
+                                </div>
+                            </ng-template>
+                        </div>
+                        </ng-container>
+                        <div>
+                            <button mat-button matStepperPrevious *ngIf="s > 0">Back</button>
+                            <button mat-button matStepperNext *ngIf="s< dynamicField.stepper.length">Next</button>
+                          </div>
+                    </mat-step>
+                    <mat-step *ngIf="stapperField.stepControl == 'done'">
+                        <ng-template matStepLabel>{{stapperField.stepControl}}</ng-template>
+                        <p>{{stapperField.stepperlabel}}</p>
+                        <div>
+                          <button mat-button matStepperPrevious>Back</button>
+                          <button mat-button (click)="stepper.reset()">Reset</button>
+                        </div>
+                    </mat-step>
+                </div>
+            </mat-stepper>
+        </div>
+    </ng-container>
+    <ng-container>
+        <button mat-raised-button color="primary" (click)="clearForm()" *ngIf="!isChild">Clear Form</button>
+    </ng-container>
+    
+</form>

package/src/lib/ruclib-metaform/ruclib-metaform.component.scss

@@ -0,0 +1,15 @@
+.form-error{
+    color:red;
+}
+
+.column-in-same-row {
+    float: left;
+}
+
+.column-in-new-row {
+    clear: left;
+}
+
+.margin-5 {
+    margin: 1%;
+}