@ruc-lib/metaform 2.0.0 → 2.0.1

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

@@ -0,0 +1,91 @@
+import { Component, Input, Output, OnInit, EventEmitter, OnDestroy } from '@angular/core';
+import {MetaFormConfig} from '../../interfaces/metaFormsDefault';
+import { RucMetaFormService } from "../../services/ruc-meta-form.service"
+import { Subscription } from 'rxjs';
+@Component({
+  selector: 'uxp-ruclib-metaform',
+  templateUrl: './ruclib-metaform.component.html',
+  styleUrls: ['./ruclib-metaform.component.scss']
+})
+export class RuclibMetaformComponent implements OnInit,OnDestroy{
+  @Output() rucEvent  = new EventEmitter<any>();
+  @Output() childRucEvent  = new EventEmitter<any>();
+  @Input() rucInputData: MetaFormConfig[] = []
+  @Input() childForm?: MetaFormConfig[]
+  @Input()
+  customTheme!: string;
+  @Input() isChild?: boolean;
+  @Input() selectedParentId: any;
+  inputObjectDataMultiFileUpload?:any;
+  metaFormSubscribeInputs: Subscription | undefined;
+  formData: any
+  constructor(public service: RucMetaFormService) { }
+  
+  ngOnInit(): void {
+    if (!this.isChild) {
+      this.service.getFormJson(this.rucInputData);
+      this.getFormJson();
+    } else {
+      this.formData = this.childForm;
+    }
+    this.inputObjectDataMultiFileUpload = {
+      multifileSelection: true,
+      displayThumbnail: true,
+      label: 'Choose File',
+      uploadUrl: '/api/upload',
+      deleteUrl: '/api/delete',
+    };
+  }
+  
+  /**
+   * The purpose of this function to pass data from dependentFields to parent field
+   * @param getObject 
+   * @param j 
+   */
+  passEvent(getObject: any, formElement?: any) {
+    const eventOutput = getObject?.eventOutput ? getObject.eventOutput : this.service.currentFormElement;
+    if(getObject?.eventName == "onUploading"){
+      formElement.value = getObject?.eventOutput.name ? getObject?.eventOutput.name : getObject?.eventOutput[0].name;
+    }
+    this.rucEvent.emit({ 'eventName': 'metaFormData', 'eventOutput': eventOutput, 'formData': this.formData, 'rucComponentEvent': getObject?.eventName });
+  }
+
+  /**
+   * Initial function to load for data
+   */
+  getFormJson() {
+     this.metaFormSubscribeInputs = this.service.formData.asObservable()
+     .subscribe(
+        (formData)=>{
+          this.formData = formData;
+          this.service.metaFormData = this.formData;
+        }    
+      );
+  }
+
+  /**
+   *  This function is to emit form data
+   * @param event 
+   */
+  getMetaFormData(event: any) {
+    this.rucEvent.emit({ 'eventName': 'metaFormData', 'eventOutput': event, 'formData': this.formData });
+  }
+
+  /**
+   * Clear form data
+   */
+  clearForm(){
+    this.formData.map((x:MetaFormConfig)=>{
+      x.value = '';
+    });
+  }
+
+  /**
+   * Destroy the subscriber
+   */
+  ngOnDestroy() {
+    if (this.metaFormSubscribeInputs) {
+      this.metaFormSubscribeInputs.unsubscribe();
+    }
+  }
+}

package/src/lib/ruclib-metaform.module.ts

@@ -0,0 +1,59 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RuclibMetaformComponent } from './ruclib-metaform/ruclib-metaform.component';
+import { HttpClientModule } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatSelectModule } from '@angular/material/select';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatButtonModule} from '@angular/material/button';
+import { MatTooltipModule} from '@angular/material/tooltip';
+import {MatStepperModule} from '@angular/material/stepper';
+import { TextFieldModule} from '@angular/cdk/text-field';
+import { RucMetaFormService } from '../services/ruc-meta-form.service';
+import { RucMetaInputsComponent } from '../components/ruc-meta-inputs/ruc-meta-inputs.component';
+import { RucMetaRadioGroupComponent } from '../components/ruc-meta-radio-group/ruc-meta-radio-group.component';
+import { RucMetaCheckboxGroupComponent } from '../components/ruc-meta-checkbox-group/ruc-meta-checkbox-group.component';
+import { RucMetaSelectComponent } from '../components/ruc-meta-select/ruc-meta-select.component';
+import { RucTextAreaComponent } from '../components/ruc-text-area/ruc-text-area.component';
+
+import {RuclibMultiSelectModule} from '@ruc-lib/multi-select';
+import {RuclibMultiFileUploadModule} from '@ruc-lib/multi-file-upload';
+
+
+@NgModule({
+  imports: [CommonModule,
+    HttpClientModule,
+    FormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatRadioModule,
+    MatCheckboxModule,
+    MatSelectModule,
+    MatAutocompleteModule,
+    MatButtonModule,    
+    MatTooltipModule,
+    TextFieldModule,
+    MatStepperModule,
+    RuclibMultiSelectModule,
+    RuclibMultiFileUploadModule
+  ],
+  declarations: [
+    RuclibMetaformComponent,
+    RucMetaInputsComponent,
+    RucMetaRadioGroupComponent,
+    RucMetaCheckboxGroupComponent,
+    RucMetaSelectComponent,
+    RucTextAreaComponent
+  ],
+  exports: [
+    RuclibMetaformComponent
+  ],
+  providers: [
+    RucMetaFormService
+  ]
+})
+export class RuclibMetaformModule {}

package/src/services/ruc-meta-form-validation.service.spec.ts

@@ -0,0 +1,75 @@
+import { TestBed } from '@angular/core/testing';
+
+import { RucMetaFormValidationService } from './ruc-meta-form-validation.service';
+import { MetaFormConfig } from '../interfaces/metaFormsDefault';
+
+describe('RucMetaFormValidationService', () => {
+  let service: RucMetaFormValidationService;
+  const mockFormData: MetaFormConfig = {
+    "formType": "simple",
+    "fieldType": "textarea",
+    "inputType": "text",
+    "id": "Address",
+    "name": "Address",
+    "errorMsg": false,
+    "label": "Address",
+    "className": "Address",
+    "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": false,
+    "sameRowColumnWidth": "100",
+    "tooltip": "First Name",
+    "tooltipPosition": "right",
+    "pattern": "any",
+    "placeholder": "Address",
+    "autofocus": true,
+    "autocomplete": ["amar", "bharat", "charan"],
+    "customComponentName": "none",
+    "rucDialogInput": {},
+    "hasDependentFields": false,
+    "dependentFieldParentId": "any",
+    "dependentFields": [],
+    "toolTipDescription": "none",
+    "showErrorOnPopUp": true,
+    "groupOptions": []
+  }
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(RucMetaFormValidationService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should called nospaceValidator', () => {
+    const result = service.nospaceValidator(mockFormData);
+    const re = / /;
+    expect(mockFormData.value).toMatch(re);
+  });
+
+  it('should called alphaNumericValidator', () => {
+    const result =  service.alphaNumericValidator(mockFormData);
+    const re = '^[a-zA-Z0-9_]+$';
+    expect(mockFormData.value).not.toMatch(re);
+  });
+  it('nospaceValidator should return nullTable if value contains space', () => {
+    const formData: MetaFormConfig = mockFormData
+
+    const result = service.nospaceValidator(formData);
+
+    expect(result).toEqual({ nullTable: true });
+  });
+});

package/src/services/ruc-meta-form-validation.service.ts

@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+import {MetaFormConfig} from '../interfaces/metaFormsDefault';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class RucMetaFormValidationService {
+
+  public defaultErrorMessage = 'Invalid Input';
+
+  constructor() { 
+  }
+
+  nospaceValidator(formData:MetaFormConfig){
+    const re = / /;
+    if(formData.value.match(re)){
+      return { nullTable: true }
+    }else{
+      return false;
+    }
+  }
+
+  alphaNumericValidator(formData:MetaFormConfig){
+    const re = '^[a-zA-Z0-9_]+$'
+    return formData.value ? !formData.value.match(re) : false;
+  }
+
+  
+}

package/src/services/ruc-meta-form.service.spec.ts

@@ -0,0 +1,63 @@
+import { TestBed } from '@angular/core/testing';
+
+import { RucMetaFormService } from './ruc-meta-form.service';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { HttpClientModule } from '@angular/common/http';
+describe('RucMetaFormService', () => {
+  let service: RucMetaFormService;
+  const formData = {
+    "formType": "simple",
+    "fieldType": "textarea",
+    "inputType": "textarea",
+    "id": "Address",
+    "name": "Address",
+    "errorMsg": false,
+    "label": "Address",
+    "className": "Address",
+    "value": "Address",
+    "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": false,
+    "sameRowColumnWidth": "100",
+    "tooltip": "First Name",
+    "tooltipPosition": "right",
+    "pattern": "any",
+    "placeholder": "Address",
+    "autofocus": true,
+    "autocomplete": ["amar", "bharat", "charan"],
+    "customComponentName": "none",
+    "rucDialogInput": {},
+    "hasDependentFields": false,
+    "dependentFieldParentId": "any",
+    "dependentFields": "any",
+    "toolTipDescription": "none",
+    "showErrorOnPopUp": true,
+    "groupOptions": []
+  }
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule, HttpClientModule],
+      providers: [RucMetaFormService]
+    });
+    service = TestBed.inject(RucMetaFormService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should call getFormJson', () => {
+    service.getFormJson(formData);
+  })
+});

package/src/services/ruc-meta-form.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { Observable,Subject, BehaviorSubject } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+import {MetaFormConfig} from '../interfaces/metaFormsDefault';
+@Injectable({
+  providedIn: 'root'
+})
+export class RucMetaFormService {
+
+  public metaFormData:MetaFormConfig | undefined;
+  public currentFormElement: MetaFormConfig | undefined;
+
+  constructor(private http: HttpClient) { }
+
+  public formData: BehaviorSubject<any> = new BehaviorSubject([] as any);
+
+  getFormJson(form: any){
+    this.formData.next(form);
+  }
+}

package/src/test-setup.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';

package/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": false,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

package/tsconfig.lib.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/test-setup.ts",
+    "src/**/*.spec.ts",
+    "jest.config.ts",
+    "src/**/*.test.ts"
+  ],
+  "include": ["src/**/*.ts"]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "target": "es2016",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}