From b81b67e8ab63258a8f982631093fffbd1743d844 Mon Sep 17 00:00:00 2001 From: Gaurav Kumar Date: Sat, 27 Dec 2025 08:45:54 +0530 Subject: [PATCH] edit --- .../adddynamicform.component.css | 39 +++ .../adddynamicform.component.css.map | 1 + .../adddynamicform.component.html | 139 +++++++++ .../adddynamicform.component.scss | 39 +++ .../adddynamicform.component.spec.ts | 25 ++ .../adddynamicform.component.ts | 178 +++++++++++ .../alldynamicform.component.css | 20 ++ .../alldynamicform.component.css.map | 1 + .../alldynamicform.component.html | 144 +++++++++ .../alldynamicform.component.scss | 19 ++ .../alldynamicform.component.spec.ts | 25 ++ .../alldynamicform.component.ts | 191 ++++++++++++ .../dynamic-form-viewer.component.html | 166 ++++++++++ .../dynamic-form-viewer.component.scss | 20 ++ .../dynamic-form-viewer.component.ts | 284 ++++++++++++++++++ .../dynamicform/dynamicform.component.css | 1 + .../dynamicform/dynamicform.component.css.map | 1 + .../dynamicform/dynamicform.component.html | 1 + .../dynamicform/dynamicform.component.scss | 0 .../dynamicform/dynamicform.component.spec.ts | 25 ++ .../dynamicform/dynamicform.component.ts | 15 + .../editdynamicform.component.css | 39 +++ .../editdynamicform.component.css.map | 1 + .../editdynamicform.component.html | 128 ++++++++ .../editdynamicform.component.scss | 39 +++ .../editdynamicform.component.spec.ts | 25 ++ .../editdynamicform.component.ts | 166 ++++++++++ 27 files changed, 1732 insertions(+) create mode 100644 frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/adddynamicform/adddynamicform.component.css create mode 100644 frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/adddynamicform/adddynamicform.component.css.map create mode 100644 frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/adddynamicform/adddynamicform.component.html create mode 100644 frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/adddynamicform/adddynamicform.component.scss create mode 100644 frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/adddynamicform/adddynamicform.component.spec.ts create mode 100644 frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/adddynamicform/adddynamicform.component.ts create mode 100644 frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/alldynamicform/alldynamicform.component.css create mode 100644 frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/alldynamicform/alldynamicform.component.css.map create mode 100644 frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/alldynamicform/alldynamicform.component.html create mode 100644 frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/alldynamicform/alldynamicform.component.scss create mode 100644 frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/alldynamicform/alldynamicform.component.spec.ts create mode 100644 frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/alldynamicform/alldynamicform.component.ts create mode 100644 frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamic-form-viewer/dynamic-form-viewer.component.html create mode 100644 frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamic-form-viewer/dynamic-form-viewer.component.scss create mode 100644 frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamic-form-viewer/dynamic-form-viewer.component.ts create mode 100644 frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamicform.component.css create mode 100644 frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamicform.component.css.map create mode 100644 frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamicform.component.html create mode 100644 frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamicform.component.scss create mode 100644 frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamicform.component.spec.ts create mode 100644 frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamicform.component.ts create mode 100644 frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/editdynamicform/editdynamicform.component.css create mode 100644 frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/editdynamicform/editdynamicform.component.css.map create mode 100644 frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/editdynamicform/editdynamicform.component.html create mode 100644 frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/editdynamicform/editdynamicform.component.scss create mode 100644 frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/editdynamicform/editdynamicform.component.spec.ts create mode 100644 frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/editdynamicform/editdynamicform.component.ts diff --git a/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/adddynamicform/adddynamicform.component.css b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/adddynamicform/adddynamicform.component.css new file mode 100644 index 0000000..03ce560 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/adddynamicform/adddynamicform.component.css @@ -0,0 +1,39 @@ +.button1::after { + content: none; +} + +.button1:hover::after { + content: "ADD ROWS"; +} + +.section { + background-color: #dddddd; + height: 40px; +} + +.section p { + padding: 10px; + font-size: 18px; +} + +.clr-input { + color: #212529; + border: 1px solid #ced4da; + border-radius: 0.25rem; + padding: 0.75rem 0.75rem; + background-color: rgb(255, 255, 255); + margin-top: 3px; + width: 100%; + margin-bottom: 10px; +} + +select { + width: 100%; + padding: 5px 5px; + border: 1px solid #ccc; + border-radius: 4px; +} + +.center { + text-align: center; +}/*# sourceMappingURL=adddynamicform.component.css.map */ \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/adddynamicform/adddynamicform.component.css.map b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/adddynamicform/adddynamicform.component.css.map new file mode 100644 index 0000000..498b5ae --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/adddynamicform/adddynamicform.component.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["adddynamicform.component.scss","adddynamicform.component.css"],"names":[],"mappings":"AAEA;EACE,aAAA;ACDF;;ADGA;EACE,mBAAA;ACAF;;ADGA;EACE,yBAVS;EAWT,YAAA;ACAF;;ADGA;EAEE,aAAA;EACA,eAAA;ACDF;;ADIA;EACE,cAAA;EACA,yBAAA;EACA,sBAAA;EACA,wBAAA;EACA,oCAAA;EACA,eAAA;EACA,WAAA;EACA,mBAAA;ACDF;;ADGA;EACE,WAAA;EACA,gBAAA;EACA,sBAAA;EACA,kBAAA;ACAF;;ADEA;EACE,kBAAA;ACCF","file":"adddynamicform.component.css"} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/adddynamicform/adddynamicform.component.html b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/adddynamicform/adddynamicform.component.html new file mode 100644 index 0000000..88dfad9 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/adddynamicform/adddynamicform.component.html @@ -0,0 +1,139 @@ +

DYNAMIC FORM SETUP

+Add Mode
+
+ +
+ + +
+
+
+ + +
+ {{ error.message }} +
+
+
+ + +
+ {{ error.message }} +
+
+
+ + +
+ {{ error.message }} +
+
+
+ + +
+ {{ error.message }} +
+
+
+ + +
+ {{ error.message }} +
+
+
+ +
+ +

Component Details

+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + +
LabelTypeMappingReadonlyDrop Values{{ controls.length > 1 ? 'Actions' : '' }}
+ + + + + + +
+ + +
+ 		+ +
+ + {{ val }} + + +
+ + + + + 		+ + + +
+
+
+
+
+ +
+
+
\ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/adddynamicform/adddynamicform.component.scss b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/adddynamicform/adddynamicform.component.scss new file mode 100644 index 0000000..788684c --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/adddynamicform/adddynamicform.component.scss @@ -0,0 +1,39 @@ +$bg-color: #dddddd; + +.button1::after { + content: none; +} +.button1:hover::after { + content: "ADD ROWS"; +} + +.section { + background-color: $bg-color; + height: 40px; +} + +.section p { + //color: white; + padding: 10px; + font-size: 18px; +} + +.clr-input { + color: #212529; + border: 1px solid #ced4da; + border-radius: 0.25rem; + padding: 0.75rem 0.75rem; + background-color:rgb(255, 255, 255); + margin-top: 3px; + width: 100%; + margin-bottom: 10px; +} +select{ + width: 100%; + padding: 5px 5px; + border: 1px solid #ccc; + border-radius: 4px; +} +.center { + text-align: center; +} diff --git a/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/adddynamicform/adddynamicform.component.spec.ts b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/adddynamicform/adddynamicform.component.spec.ts new file mode 100644 index 0000000..b5d66f7 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/adddynamicform/adddynamicform.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AdddynamicformComponent } from './adddynamicform.component'; + +describe('AdddynamicformComponent', () => { + let component: AdddynamicformComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AdddynamicformComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AdddynamicformComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/adddynamicform/adddynamicform.component.ts b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/adddynamicform/adddynamicform.component.ts new file mode 100644 index 0000000..bb20dd5 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/adddynamicform/adddynamicform.component.ts @@ -0,0 +1,178 @@ +import { HttpClient } from '@angular/common/http'; +import { Component, OnInit } from '@angular/core'; +import { FormArray, FormBuilder, FormGroup } from '@angular/forms'; +import { ActivatedRoute, Router } from '@angular/router'; +import { ValidationError } from 'src/app/models/fnd/ValidationError'; +import { DynamicformService } from 'src/app/services/fnd/dynamicform.service'; +import { Mapping } from "src/app/models/fnd/Mapping"; +import { ToastrService } from 'ngx-toastr'; + +@Component({ + selector: 'app-adddynamicform', + templateUrl: './adddynamicform.component.html', + styleUrls: ['./adddynamicform.component.scss'] +}) +export class AdddynamicformComponent implements OnInit { + public entryForm: FormGroup; + submitted = false; + basic: boolean = false; + fieldErrors: ValidationError[] = []; + related_to = ['Menu', 'Related To']; + page_event = ['OnClick', 'OnBlur']; + field_type = ['text', 'dropdown', 'date', 'checkbox', 'textarea', 'togglebutton']; + // mappings: Mapping[]; + mappings = [ + { label: 'textfield1', value: 'comp1' }, + { label: 'textfield2', value: 'comp2' }, + { label: 'textfield3', value: 'comp3' }, + { label: 'textfield4', value: 'comp4' }, + { label: 'textfield5', value: 'comp5' }, + { label: 'textfield6', value: 'comp6' }, + { label: 'textfield7', value: 'comp7' }, + { label: 'textfield8', value: 'comp8' }, + { label: 'textfield9', value: 'comp9' }, + { label: 'textfield10', value: 'comp10' }, + { label: 'textfield11', value: 'comp11' }, + { label: 'textfield12', value: 'comp12' }, + { label: 'textfield13', value: 'comp13' }, + { label: 'textfield14', value: 'comp14' }, + { label: 'textfield15', value: 'comp15' }, + { label: 'textfield16', value: 'comp16' }, + { label: 'textfield17', value: 'comp17' }, + { label: 'textfield18', value: 'comp18' }, + { label: 'textfield19', value: 'comp19' }, + { label: 'textfield20', value: 'comp20' }, + { label: 'textfield21', value: 'comp21' }, + { label: 'textfield22', value: 'comp22' }, + { label: 'textfield23', value: 'comp23' }, + { label: 'textfield24', value: 'comp24' }, + { label: 'textfield25', value: 'comp25' }, + { label: 'textfield26', value: 'comp26' }, + { label: 'longtext1', value: 'comp_l27' }, + { label: 'longtext2', value: 'comp_l28' }, + { label: 'longtext3', value: 'comp_l29' }, + { label: 'longtext4', value: 'comp_l30' } + ]; + + + + constructor(private _fb: FormBuilder, + private router: Router, + private toastr: ToastrService, + private dynamicservice: DynamicformService, + private httpService: HttpClient, + private route: ActivatedRoute,) { } + + ngOnInit(): void { + // this.getMapings(); + console.log(this.mappings); + this.entryForm = this._fb.group({ + form_name: [null], + form_desc: [null], + related_to: [null], + page_event: [null], + button_caption: [null], + components: this._fb.array([this.initLinesForm()]), + }); + } + // getMapings() { + // this.httpService + // .get('./assets/json/form-setup-mapping.json') + // .subscribe(data => { + // console.log(data); + // this.mappings = data; + // }, err => console.log(err) + // ) + // } + initLinesForm() { + return this._fb.group({ + label: [null], + type: [null], + mapping: [null], + mandatory: [null], + readonly: [null], + drop_values: [null], + sp: [null], + }); + } + + get controls() { + return (this.entryForm.get("components") as FormArray).controls; + } + + getFilteredMappings(index: number) { + const components = this.entryForm.get('components') as FormArray; + // Get all selected values from other rows + const selectedValues = components.controls + .map((control, i) => { + if (i === index) return null; // Don't block current row's value + return control.get('mapping').value; + }) + .filter(val => val !== null && val !== 'null' && val !== ''); + + // Return mappings that remain + return this.mappings.filter(m => !selectedValues.includes(m.value)); + } + + // Tag Input Helpers + getDropValuesArray(index: number): string[] { + const control = (this.entryForm.get('components') as FormArray).at(index).get('drop_values'); + const val = control.value; + if (!val) return []; + return val.split(',').map(s => s.trim()).filter(s => s.length > 0); + } + + addDropValue(index: number, event: any) { + const value = event.target.value; + if (!value) return; + + const control = (this.entryForm.get('components') as FormArray).at(index).get('drop_values'); + const currentArr = this.getDropValuesArray(index); + + if (!currentArr.includes(value.trim())) { + currentArr.push(value.trim()); + control.setValue(currentArr.join(',')); + } + event.target.value = ''; // Clear input + } + + removeDropValue(index: number, valueToRemove: string) { + const control = (this.entryForm.get('components') as FormArray).at(index).get('drop_values'); + let currentArr = this.getDropValuesArray(index); + currentArr = currentArr.filter(v => v !== valueToRemove); + control.setValue(currentArr.join(',')); + } + + onAddLines() { + (this.entryForm.get("components")).push(this.initLinesForm()); + } + + onRemoveLines(index: number) { + (this.entryForm.get("components")).removeAt(index); + } + onSubmit() { + console.log(this.entryForm.value); + this.dynamicservice.create(this.entryForm.value).subscribe( + (data) => { + console.log(data); + this.router.navigate(["../all"], { relativeTo: this.route }); + if (data) { + this.toastr.success('Added successfully'); + } + }, + (error) => { + console.log(error); + const objectArray = Object.entries(error.error.fieldErrors); + objectArray.forEach(([k, v]) => { + console.log(k); + console.log(v); + this.fieldErrors.push({ field: k, message: v }); + }); + console.log(this.fieldErrors); // this will come from backend + if (error) { + this.toastr.error('Not Added Data Getting Some Error'); + } + } + ); + } +} diff --git a/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/alldynamicform/alldynamicform.component.css b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/alldynamicform/alldynamicform.component.css new file mode 100644 index 0000000..3549ed1 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/alldynamicform/alldynamicform.component.css @@ -0,0 +1,20 @@ +.td-title { + text-align: center; + color: white; + font-weight: bold; + background-color: rgba(63, 122, 231, 0.863); +} + +th { + background-color: rgb(170, 169, 169); + font-weight: bold; +} + +.td-content { + text-align: left; +} + +.delete, .heading { + text-align: center; + color: red; +}/*# sourceMappingURL=alldynamicform.component.css.map */ \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/alldynamicform/alldynamicform.component.css.map b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/alldynamicform/alldynamicform.component.css.map new file mode 100644 index 0000000..8a7f17e --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/alldynamicform/alldynamicform.component.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["alldynamicform.component.scss","alldynamicform.component.css"],"names":[],"mappings":"AAAA;EACE,kBAAA;EACF,YAAA;EACE,iBAAA;EACA,2CAAA;ACCF;;ADEA;EACE,oCAAA;EACA,iBAAA;ACCF;;ADEA;EACE,gBAAA;ACCF;;ADCA;EACE,kBAAA;EACA,UAAA;ACEF","file":"alldynamicform.component.css"} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/alldynamicform/alldynamicform.component.html b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/alldynamicform/alldynamicform.component.html new file mode 100644 index 0000000..f4f422d --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/alldynamicform/alldynamicform.component.html @@ -0,0 +1,144 @@ +
    +
    2. +
  2. Super Admin
    3. +
  3. Dynamic Form
    4. +
+ +
+
+
+

Dynamic Form

+
+
+ + + +
+
+ + + Loading ... +
{{error}}
 + + + + + + Go To + + + Form Name + + + Form Description + + + Related To + + + Page Event + + Button Caption + + + Go To Form + + + Action + + + + + + + Build + + {{user.form_name}} + {{user.form_desc}} + {{user.related_to}} + {{user.page_event}} + {{user.button_caption}} + OPEN FORM + + + + + +
Who Column
+
Account ID: {{user.accountId}}
+
Created At: {{user.createdAt| date}}
+
Created By: {{user.createdBy}}
+
Updated At: {{user.updatedAt | date}}
+
Updated By: {{user.updatedBy}}
+ + + + + + + + + + + + + + + + + + + + + +
Form Name:{{user.form_name}}
Form_desc:{{user.form_desc}}
Related_to:{{user.related_to}}
Page_event:{{user.page_event}}
+ + + + + + + + + + + + + + + + + + + +
LableTypeMappingReadOnlyDrop Values
{{person.label}}{{person.type}}{{person.mapping}} {{person.readonly}} {{person.drop_values}}
+ + + + + + Users per page + {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} + of {{pagination.totalItems}} users + + + +
+ + + +
+

Are You Sure Want to delete?

+

{{rowSelected.form_id}}

+
+ + +
+
+ diff --git a/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/alldynamicform/alldynamicform.component.scss b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/alldynamicform/alldynamicform.component.scss new file mode 100644 index 0000000..cd0636d --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/alldynamicform/alldynamicform.component.scss @@ -0,0 +1,19 @@ +.td-title { + text-align: center; +color: white; + font-weight: bold; + background-color: rgba(63, 122, 231, 0.863); + //color: rgb(24, 13, 13); +} +th{ + background-color:rgb(170, 169, 169); + font-weight: bold; + +} +.td-content{ + text-align: left; +} +.delete,.heading{ + text-align: center; + color: red; +} diff --git a/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/alldynamicform/alldynamicform.component.spec.ts b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/alldynamicform/alldynamicform.component.spec.ts new file mode 100644 index 0000000..dc50804 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/alldynamicform/alldynamicform.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AlldynamicformComponent } from './alldynamicform.component'; + +describe('AlldynamicformComponent', () => { + let component: AlldynamicformComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AlldynamicformComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AlldynamicformComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/alldynamicform/alldynamicform.component.ts b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/alldynamicform/alldynamicform.component.ts new file mode 100644 index 0000000..de949fe --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/alldynamicform/alldynamicform.component.ts @@ -0,0 +1,191 @@ +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { ToastrService } from 'ngx-toastr'; +import { DynamicformService } from '../../../../../services/fnd/dynamicform.service' +import { MenumaintanceService } from 'src/app/services/admin/menumaintance.service'; +import { Rn_Forms_Setup } from 'src/app/models/fnd/Rn_Forms_Setup'; +@Component({ + selector: 'app-alldynamicform', + templateUrl: './alldynamicform.component.html', + styleUrls: ['./alldynamicform.component.scss'] +}) +export class AlldynamicformComponent implements OnInit { + rowSelected: any = {}; + modaldelete = false; + loading = false; + data; + error; + selected: any[] = []; + constructor(private dynamicservice: DynamicformService, + private router: Router, + private toastr: ToastrService, + private route: ActivatedRoute, + private menumaintanceService: MenumaintanceService, + + ) { } + + ngOnInit(): void { + this.getall(); + } + getall() { + this.dynamicservice.getAll().subscribe((data) => { + this.data = data.items; + this.data = [...this.data].reverse(); + console.log('dynmic data ', data); + if (data.length == 0) { + this.error = "No data Available plz add if Required"; + console.log(this.error) + } + }, (error) => { + console.log(error); + if (error) { + this.error = "Server Error"; + } + }) + } + goToAdd() { + this.router.navigate(["../add"], { relativeTo: this.route }); + } + goToEdit(id: number) { + console.log("goToEdit() id = " + id); + this.router.navigate(["../edit/" + id], { relativeTo: this.route }); + } + goToForm(id: number) { + this.router.navigate(['/cns-portal/dynamicform1'], { queryParams: { form_id: id } }); + + } + form_id; + alertType: string; + alertMessage: string = ""; + alert = [ + { type: "success", message: "Build Successfully" }, + { type: "danger", message: "Some error Happens" }, + ]; + buildDynamicForm(id) { + this.form_id = id; + console.log("buildDynamicForm() Form_id = " + this.form_id); + if (this.form_id === null) { + this.alertType = this.alert[1].type; + this.alertMessage = "form_code is null"; + return; + } + + // Fetch form definition to check relation + this.dynamicservice.getById(id).subscribe( + (form: Rn_Forms_Setup) => { + if (form && form.related_to === 'Menu') { + this.createMenuForForm(form); + } else { + // Standard behavior for non-Menu forms + console.log("Form construction handled by frontend viewer."); + this.alertType = this.alert[0].type; + this.alertMessage = this.alert[0].message; + this.toastr.success("Form Ready for Viewing (Frontend Render)", "Success"); + } + }, + (err) => { + console.error(err); + this.toastr.error("Failed to fetch form details"); + } + ); + } + + + createMenuForForm(form: Rn_Forms_Setup) { + // Construct Payload for Menu Creation + // Requirement: menuId = 12832 + // Link: dynamicform1?form_id={id} + + const menuPayload = { + menuId: 12832, + menuItemDesc: form.form_name, + itemSeq: 1, // Default sequence + moduleName: form.form_name, + status: 'Enable', + main_menu_action_name: `dynamicform1/${form.form_id}` + }; + + // Check for duplicate menu + this.menumaintanceService.getLatestMenu(12832, menuPayload.moduleName, menuPayload.main_menu_action_name) + .subscribe( + (existingMenu) => { + if (existingMenu) { + console.log('Menu already exists:', existingMenu); + this.toastr.info('Menu Already Created'); + } else { + // Not found, create it + this.proceedToCreateMenu(menuPayload); + } + }, + (err) => { + console.error('Error checking duplicate menu', err); + // Optional: Proceed if error is 404, but angular http might treat 404 as error + // If backend returns null for not found, we fall into if(existingMenu) else block. + // If backend throws error for not found, we handle here. + // Assuming backend returns empty body or null 200 OK if not found is ideal, + // but if it throws exception, we might want to proceed? + // Safe bet: if error, try to create or warn. + // Given msg "menu already created" requirement, let's assume valid check. + // Let's assume error means "Not Found" -> Create + this.proceedToCreateMenu(menuPayload); + } + ); + } + + proceedToCreateMenu(menuPayload: any) { + console.log('Building Menu for Form:', menuPayload); + + this.menumaintanceService.create1(menuPayload).subscribe( + (data) => { + console.log('Menu Item Created:', data); + this.toastr.success('Menu Item Created. Syncing...'); + + // 3. Sync + this.syncMenu(menuPayload); + }, + (err) => { + console.error('Failed to create menu item', err); + this.toastr.error('Failed to create menu item'); + } + ); + } + + syncMenu(payload: any) { + const syncPayload = { ...payload }; + if (syncPayload.subMenus && syncPayload.subMenus !== 0) { + syncPayload.subMenus = []; + } + + this.menumaintanceService.sink(12832, syncPayload).subscribe( + (data) => { + this.toastr.success('Menu Synced Successfully'); + this.toastr.info('Form is now accessible via Menu'); + }, + (err) => { + console.error('Sync failed', err); + this.toastr.error('Menu Sync Failed'); + } + ); + } + + onDelete(row) { + this.rowSelected = row; + this.modaldelete = true; + } + delete(id) { + this.modaldelete = false; + console.log("in delete " + id); + this.dynamicservice.delete(id).subscribe((data) => { + console.log(data); + this.ngOnInit(); + if (data.body) { + this.toastr.success('Deleted successfully'); + } + }, (error) => { + console.log('Error in adding data...', +error); + if (error) { + this.toastr.error('Not Deleted Data Getting Some Error'); + } + }); + } +} diff --git a/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamic-form-viewer/dynamic-form-viewer.component.html b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamic-form-viewer/dynamic-form-viewer.component.html new file mode 100644 index 0000000..3d7748d --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamic-form-viewer/dynamic-form-viewer.component.html @@ -0,0 +1,166 @@ +
+ + +
+
+

{{ formSetup.form_name }} Form Data

+
+
+ + +
+
+ + +
+ + + {{ col.header }} + + + Actions + + + + {{ item[col.field] }} + + + + + + + + + + Items per page + {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} + of {{pagination.totalItems}} items + + + +
+ + +
+

{{ viewMode === 'add' ? 'ENTRY FORM' : 'EDIT FORM' }}

+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{ comp.label }}: + +
+ {{ comp.label }} is required +
+ 		{{ comp.label }}: + + {{ comp.label }} + + {{ comp.label }} + + {{ comp.label }}: + +
+ {{ comp.label }} is required +
+ 		{{ comp.label }}: + +
+ {{ comp.label }} is required +
+ 		{{ comp.label }}: +
+ + +
+
+
+
+ + +
+
+
+
+ +
+ + +
+ Loading form configuration... +
+
{{ error }}
+ \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamic-form-viewer/dynamic-form-viewer.component.scss b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamic-form-viewer/dynamic-form-viewer.component.scss new file mode 100644 index 0000000..c5eb1e3 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamic-form-viewer/dynamic-form-viewer.component.scss @@ -0,0 +1,20 @@ +.entry-pg { + background: #fff; + padding: 16px; + border: 1px solid #ccc; + border-radius: 4px; +} +.form-block { + padding: 10px; +} +table { + width: 100%; +} +td { + padding: 5px; +} +.text-danger { + color: red; + font-size: 0.8em; +} +.toggle-switch { display: inline-block; position: relative; width: 44px; height: 24px; } .toggle-switch input { display: none; } .toggle-switch label { display: block; overflow: hidden; cursor: pointer; border: 0 solid #bbb; border-radius: 20px; margin: 0; } .toggle-switch label:before { content: ''; display: block; width: 100%; height: 100%; background-color: #f1f1f1; border: 1px solid #bbb; border-radius: 20px; transition: background-color 0.2s; } .toggle-switch label:after { content: ''; display: block; width: 18px; height: 18px; background: #fff; position: absolute; top: 3px; left: 3px; border-radius: 100%; box-shadow: 0 1px 3px rgba(0,0,0,0.4); transition: margin 0.2s; } .toggle-switch input:checked + label:before { background-color: #007cbb; border-color: #007cbb; } .toggle-switch input:checked + label:after { margin-left: 20px; } diff --git a/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamic-form-viewer/dynamic-form-viewer.component.ts b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamic-form-viewer/dynamic-form-viewer.component.ts new file mode 100644 index 0000000..ba14851 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamic-form-viewer/dynamic-form-viewer.component.ts @@ -0,0 +1,284 @@ +import { Component, OnInit } from '@angular/core'; +import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms'; +import { ActivatedRoute, Router } from '@angular/router'; +import { DynamicformService } from '../../../../../services/fnd/dynamicform.service'; +import { Rn_Forms_Setup } from 'src/app/models/fnd/Rn_Forms_Setup'; +import { Rn_Forms_Component_Setup } from 'src/app/models/fnd/Rn_Forms_Component_Setup'; + +import { ToastrService } from 'ngx-toastr'; + +@Component({ + selector: 'app-dynamic-form-viewer', + templateUrl: './dynamic-form-viewer.component.html', + styleUrls: ['./dynamic-form-viewer.component.scss'] +}) +export class DynamicFormViewerComponent implements OnInit { + formId: number; + formSetup: Rn_Forms_Setup; + dynamicForm: FormGroup; + loading = false; + error = ''; + + viewMode: 'list' | 'add' | 'edit' = 'list'; + gridColumns: any[] = []; + gridData: any[] = []; + + constructor( + private route: ActivatedRoute, + private router: Router, + private dynamicFormService: DynamicformService, + private fb: FormBuilder, + private toastr: ToastrService + ) { } + + ngOnInit(): void { + // Check Query Params first + this.route.queryParams.subscribe(params => { + const id = params['form_id']; + if (id) { + this.formId = Number(id); + this.loadFormSetup(this.formId); + return; + } + }); + + // Check Route Params if Query Params didn't trigger + this.route.params.subscribe(params => { + const id = params['form_id']; + if (id && !this.formId) { + this.formId = Number(id); + this.loadFormSetup(this.formId); + } else if (!id && !this.formId) { + this.error = "Form ID is missing."; + } + }); + } + + loadFormSetup(id: number) { + this.loading = true; + this.dynamicFormService.getById(id).subscribe( + (data: Rn_Forms_Setup) => { + this.formSetup = data; + if (this.formSetup && this.formSetup.components) { + this.buildForm(this.formSetup.components); + this.setupGridColumns(this.formSetup.components); + this.loadData(); + } else { + this.error = "Form configuration is empty or invalid."; + } + this.loading = false; + }, + (err) => { + console.error(err); + this.error = "Failed to load form setup from server."; + this.loading = false; + } + ); + } + + setupGridColumns(components: Rn_Forms_Component_Setup[]) { + this.gridColumns = []; + // Always add ID column at the start (hidden or visible) + // this.gridColumns.push({ field: 'id', header: 'ID', type: 'number' }); + + let loopCount = 0; + components.forEach((comp) => { + loopCount++; + const type = comp.type ? comp.type.toLowerCase() : ''; + + // Exclude heavy text fields from grid + if (!this.isTextArea(type)) { + // Ensure we use the exact same control name as in the form group + // The buildForm logic uses: + let controlName = `comp${loopCount}`; + if (type === 'textarea' || type === 'longtext' || type === 'long text') { + controlName = `comp_l${25 + loopCount}`; + } + + this.gridColumns.push({ + field: controlName, // Use the actual key bound to the data + header: comp.label, + type: type + }); + } + }); + } + + getStorageKey(): string { + return `dynamic_form_data_${this.formId}`; + } + + loadData() { + // Use real API + this.dynamicFormService.getTransactionsByFormId(this.formId).subscribe( + (data: any[]) => { + this.gridData = data || []; + }, + (err) => { + console.error(err); + this.toastr.error('Failed to load data'); + } + ); + } + + // saveData() { + // localStorage.setItem(this.getStorageKey(), JSON.stringify(this.gridData)); + // } // REMOVED + + buildForm(components: Rn_Forms_Component_Setup[]) { + const group: any = {}; + let loopCount = 0; + + components.forEach((comp) => { + loopCount++; + const i = loopCount; + + let controlName = `comp${i}`; + const type = comp.type ? comp.type.toLowerCase() : ''; + + // Match the logic in Java backend for field naming + if (type === 'textarea' || type === 'longtext' || type === 'long text') { + controlName = `comp_l${25 + i}`; + } + + const validators = []; + if (comp.mandatory === 'true' || comp.mandatory === 'True' || comp.mandatory === '1') { + validators.push(Validators.required); + } + + const isDisabled = (comp.readonly === 'true' || comp.readonly === 'True' || comp.readonly === '1'); + + let defaultValue = ''; + if ((type === 'textarea' || type === 'longtext' || type === 'long text') && comp.drop_values) { + defaultValue = comp.drop_values; + } + + group[controlName] = new FormControl({ value: defaultValue, disabled: isDisabled }, validators); + + // Save the key so html can use it + (comp as any).generatedControlName = controlName; + }); + + // Add hidden ID control + group['id'] = new FormControl(null); + // Add hidden form_id control logic or just handle in submit + // group['form_id'] = new FormControl(this.formId); + + this.dynamicForm = new FormGroup(group); + } + + goToAdd() { + this.dynamicForm.reset(); + this.viewMode = 'add'; + } + + goToEdit(row: any) { + this.viewMode = 'edit'; + this.dynamicForm.patchValue(row); + } + + onDelete(row: any) { + if (confirm('Are you sure you want to delete this record?')) { + this.dynamicFormService.deleteTransaction(row.id).subscribe( + (res) => { + this.toastr.success('Record deleted'); + this.loadData(); // Refresh grid + }, + (err) => { + console.error(err); + this.toastr.error('Failed to delete record'); + } + ); + } + } + + cancel() { + this.viewMode = 'list'; + this.dynamicForm.reset(); + } + + onSubmit() { + if (this.dynamicForm.valid) { + const formValue = this.dynamicForm.value; + + // Ensure form_id is attached + formValue.form_id = this.formId; + + if (this.viewMode === 'add') { + this.dynamicFormService.createTransaction(formValue).subscribe( + (res) => { + this.toastr.success('Record Added'); + this.viewMode = 'list'; + this.loadData(); + }, + (err) => { + console.error(err); + this.toastr.error('Failed to add record'); + } + ); + } else { + // Update existing + const id = formValue.id; // ID should be in the form value if we patched it + this.dynamicFormService.updateTransaction(id, this.formId, formValue).subscribe( + (res) => { + this.toastr.success('Record Updated'); + this.viewMode = 'list'; + this.loadData(); + }, + (err) => { + console.error(err); + this.toastr.error('Failed to update record'); + } + ); + } + } else { + Object.keys(this.dynamicForm.controls).forEach(field => { + const control = this.dynamicForm.get(field); + control.markAsTouched({ onlySelf: true }); + }); + } + } + + // Type checkers + isTextField(type: string): boolean { + if (!type) return false; + const t = type.toLowerCase(); + return t.includes('text') && !t.includes('area') && !t.includes('long') && !t.includes('date'); + } + + isTextArea(type: string): boolean { + if (!type) return false; + const t = type.toLowerCase(); + return t.includes('area') || t.includes('long'); + } + + isCheckbox(type: string): boolean { + if (!type) return false; + return type.toLowerCase().includes('checkbox'); + } + + isAutocomplete(type: string): boolean { + if (!type) return false; + return type.toLowerCase().includes('auto'); + } + + isDropdown(type: string): boolean { + if (!type) return false; + return type.toLowerCase().includes('drop') || type.toLowerCase().includes('select'); + } + + isDate(type: string): boolean { + if (!type) return false; + return type.toLowerCase().includes('date'); + } + + isToggle(type: string): boolean { + if (!type) return false; + return type.toLowerCase().includes('toggle'); + } + + getDropdownOptions(values: string): string[] { + if (!values) return []; + return values.split(',').map(v => v.trim()); + } +} diff --git a/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamicform.component.css b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamicform.component.css new file mode 100644 index 0000000..8a0b035 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamicform.component.css @@ -0,0 +1 @@ +/*# sourceMappingURL=dynamicform.component.css.map */ \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamicform.component.css.map b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamicform.component.css.map new file mode 100644 index 0000000..ea3d949 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamicform.component.css.map @@ -0,0 +1 @@ +{"version":3,"sources":[],"names":[],"mappings":"","file":"dynamicform.component.css"} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamicform.component.html b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamicform.component.html new file mode 100644 index 0000000..0680b43 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamicform.component.html @@ -0,0 +1 @@ + diff --git a/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamicform.component.scss b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamicform.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamicform.component.spec.ts b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamicform.component.spec.ts new file mode 100644 index 0000000..6e72560 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamicform.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DynamicformComponent } from './dynamicform.component'; + +describe('DynamicformComponent', () => { + let component: DynamicformComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ DynamicformComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(DynamicformComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamicform.component.ts b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamicform.component.ts new file mode 100644 index 0000000..040e7be --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/dynamicform.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-dynamicform', + templateUrl: './dynamicform.component.html', + styleUrls: ['./dynamicform.component.scss'] +}) +export class DynamicformComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/editdynamicform/editdynamicform.component.css b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/editdynamicform/editdynamicform.component.css new file mode 100644 index 0000000..c8d2831 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/editdynamicform/editdynamicform.component.css @@ -0,0 +1,39 @@ +.button1::after { + content: none; +} + +.button1:hover::after { + content: "ADD ROWS"; +} + +.section { + background-color: #dddddd; + height: 40px; +} + +.section p { + padding: 10px; + font-size: 18px; +} + +.clr-input { + color: #212529; + border: 1px solid #ced4da; + border-radius: 0.25rem; + padding: 0.75rem 0.75rem; + background-color: rgb(255, 255, 255); + margin-top: 3px; + width: 100%; + margin-bottom: 10px; +} + +select { + width: 100%; + padding: 5px 5px; + border: 1px solid #ccc; + border-radius: 4px; +} + +.center { + text-align: center; +}/*# sourceMappingURL=editdynamicform.component.css.map */ \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/editdynamicform/editdynamicform.component.css.map b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/editdynamicform/editdynamicform.component.css.map new file mode 100644 index 0000000..2f8c038 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/editdynamicform/editdynamicform.component.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["editdynamicform.component.scss","editdynamicform.component.css"],"names":[],"mappings":"AAEA;EACE,aAAA;ACDF;;ADGA;EACE,mBAAA;ACAF;;ADGA;EACE,yBAVS;EAWT,YAAA;ACAF;;ADGA;EAEE,aAAA;EACA,eAAA;ACDF;;ADIA;EACE,cAAA;EACA,yBAAA;EACA,sBAAA;EACA,wBAAA;EACA,oCAAA;EACA,eAAA;EACA,WAAA;EACA,mBAAA;ACDF;;ADGA;EACE,WAAA;EACA,gBAAA;EACA,sBAAA;EACA,kBAAA;ACAF;;ADEA;EACE,kBAAA;ACCF","file":"editdynamicform.component.css"} \ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/editdynamicform/editdynamicform.component.html b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/editdynamicform/editdynamicform.component.html new file mode 100644 index 0000000..3e869af --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/editdynamicform/editdynamicform.component.html @@ -0,0 +1,128 @@ +

DYNAMIC FORM SETUP

+Edit Mode
+
+
+ +
+
+
+ + +
+ {{ error.message }} +
+
+
+ + +
+ {{ error.message }} +
+
+
+ + +
+ {{ error.message }} +
+
+
+ + +
+ {{ error.message }} +
+
+
+ + +
+ {{ error.message }} +
+
+
+ + +

Component Details

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
LabelTypeMappingReadOnlyDrop Values{{ components?.length >= 1 ? 'Actions' : '' }}
+ + + + + + +
+ + +
+ 		+ +
+ + {{ val }} + + +
+ + + + 		+ +
+
+
+ +
+
\ No newline at end of file diff --git a/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/editdynamicform/editdynamicform.component.scss b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/editdynamicform/editdynamicform.component.scss new file mode 100644 index 0000000..788684c --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/editdynamicform/editdynamicform.component.scss @@ -0,0 +1,39 @@ +$bg-color: #dddddd; + +.button1::after { + content: none; +} +.button1:hover::after { + content: "ADD ROWS"; +} + +.section { + background-color: $bg-color; + height: 40px; +} + +.section p { + //color: white; + padding: 10px; + font-size: 18px; +} + +.clr-input { + color: #212529; + border: 1px solid #ced4da; + border-radius: 0.25rem; + padding: 0.75rem 0.75rem; + background-color:rgb(255, 255, 255); + margin-top: 3px; + width: 100%; + margin-bottom: 10px; +} +select{ + width: 100%; + padding: 5px 5px; + border: 1px solid #ccc; + border-radius: 4px; +} +.center { + text-align: center; +} diff --git a/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/editdynamicform/editdynamicform.component.spec.ts b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/editdynamicform/editdynamicform.component.spec.ts new file mode 100644 index 0000000..0ee49ed --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/editdynamicform/editdynamicform.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EditdynamicformComponent } from './editdynamicform.component'; + +describe('EditdynamicformComponent', () => { + let component: EditdynamicformComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ EditdynamicformComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(EditdynamicformComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/editdynamicform/editdynamicform.component.ts b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/editdynamicform/editdynamicform.component.ts new file mode 100644 index 0000000..9041b52 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/superadmin/dynamicform/editdynamicform/editdynamicform.component.ts @@ -0,0 +1,166 @@ +import { HttpClient, HttpErrorResponse } from '@angular/common/http'; +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { Rn_Forms_Component_Setup } from 'src/app/models/fnd/Rn_Forms_Component_Setup'; +import { Rn_Forms_Setup } from 'src/app/models/fnd/Rn_Forms_Setup'; +import { ValidationError } from 'src/app/models/fnd/ValidationError'; +import { DynamicformService } from 'src/app/services/fnd/dynamicform.service'; +import { Mapping } from "src/app/models/fnd/Mapping"; +@Component({ + selector: 'app-editdynamicform', + templateUrl: './editdynamicform.component.html', + styleUrls: ['./editdynamicform.component.scss'] +}) +export class EditdynamicformComponent implements OnInit { + updated = false; + fieldErrors: ValidationError[] = []; + rn_froms_setup: Rn_Forms_Setup; + components: Rn_Forms_Component_Setup[]; + id: number; + + related_to = ["Menu", "Related To"]; + page_event = ["OnClick", "OnBlur"]; + field_type = [ + "textfield", + "dropdown", + "date", + "checkbox", + "textarea", + "togglebutton", + ]; + // mappings: Mapping[]; + + mappings = [ + { label: 'textfield1', value: 'comp1' }, + { label: 'textfield2', value: 'comp2' }, + { label: 'textfield3', value: 'comp3' }, + { label: 'textfield4', value: 'comp4' }, + { label: 'textfield5', value: 'comp5' }, + { label: 'textfield6', value: 'comp6' }, + { label: 'textfield7', value: 'comp7' }, + { label: 'textfield8', value: 'comp8' }, + { label: 'textfield9', value: 'comp9' }, + { label: 'textfield10', value: 'comp10' }, + { label: 'textfield11', value: 'comp11' }, + { label: 'textfield12', value: 'comp12' }, + { label: 'textfield13', value: 'comp13' }, + { label: 'textfield14', value: 'comp14' }, + { label: 'textfield15', value: 'comp15' }, + { label: 'textfield16', value: 'comp16' }, + { label: 'textfield17', value: 'comp17' }, + { label: 'textfield18', value: 'comp18' }, + { label: 'textfield19', value: 'comp19' }, + { label: 'textfield20', value: 'comp20' }, + { label: 'textfield21', value: 'comp21' }, + { label: 'textfield22', value: 'comp22' }, + { label: 'textfield23', value: 'comp23' }, + { label: 'textfield24', value: 'comp24' }, + { label: 'textfield25', value: 'comp25' }, + { label: 'textfield26', value: 'comp26' }, + { label: 'longtext1', value: 'comp_l27' }, + { label: 'longtext2', value: 'comp_l28' }, + { label: 'longtext3', value: 'comp_l29' }, + { label: 'longtext4', value: 'comp_l30' } + ]; + constructor(private router: Router, + private route: ActivatedRoute, + private dynamicservice: DynamicformService, + private httpService: HttpClient) { } + + ngOnInit(): void { + // this.getMapings(); + this.rn_froms_setup = new Rn_Forms_Setup(); + this.id = this.route.snapshot.params["id"]; + console.log("update with id = ", this.id); + this.getById(this.id); + } + getById(id: number) { + this.dynamicservice.getById(id).subscribe((data) => { + this.rn_froms_setup = data; + this.components = data.components; + console.log('component length = ', this.components.length.toString()); + + }); + } + update() { + this.fieldErrors = []; + this.dynamicservice.update(this.id, this.rn_froms_setup).subscribe( + (data) => { + console.log(data); + this.router.navigate(["../../all"], { relativeTo: this.route }); + }, + (error: HttpErrorResponse) => { + /* (error: HttpErrorResponse) => { */ + console.log(error); + const objectArray = Object.entries(error.error.fieldErrors); + objectArray.forEach(([k, v]) => { + console.log(k); + console.log(v); + this.fieldErrors.push({ field: k, message: v }); + }); + console.log(this.fieldErrors); // this will come from backend + this.rn_froms_setup = new Rn_Forms_Setup(); + + } + ); + } + onSubmit() { + this.updated = true; + this.update(); + } + + getFilteredMappings(index: number) { + if (!this.components) return this.mappings; + + const selectedValues = this.components + .map((comp, i) => { + if (i === index) return null; + return comp.mapping; + }) + .filter(val => val !== null && val !== 'null' && val !== ''); + + return this.mappings.filter(m => !selectedValues.includes(m.value)); + } + + // Tag Input Helpers for Edit Mode + getDropValuesArray(index: number): string[] { + const component = this.components[index]; + const val = component.drop_values; + if (!val) return []; + return val.split(',').map(s => s.trim()).filter(s => s.length > 0); + } + + addDropValue(index: number, event: any) { + const value = event.target.value; + if (!value) return; + + const component = this.components[index]; + const currentArr = this.getDropValuesArray(index); + + if (!currentArr.includes(value.trim())) { + currentArr.push(value.trim()); + component.drop_values = currentArr.join(','); + } + event.target.value = ''; // Clear input + } + + removeDropValue(index: number, valueToRemove: string) { + const component = this.components[index]; + let currentArr = this.getDropValuesArray(index); + currentArr = currentArr.filter(v => v !== valueToRemove); + component.drop_values = currentArr.join(','); + } + // this.httpService + // .get("./assets/json/form-setup-mapping.json") + // .subscribe( + // (data) => { + // console.log(data); + // this.mappings = data; + // }, + // (err) => console.log(err) + // ); + // } + back() { + this.router.navigate(["../../all"], { relativeTo: this.route }); + } +}