From d0cde14162fa3ecbcd1fc07ec283025b8b3953e2 Mon Sep 17 00:00:00 2001 From: gokulrajtm Date: Mon, 23 Sep 2024 17:00:05 +0530 Subject: [PATCH] Revert "Add the changes for crayons inbox form changes for dynamic section" --- .../src/components/form/form-util.ts | 2 +- .../src/components/form/form.scss | 4 - .../crayons-core/src/components/form/form.tsx | 124 +++--------------- .../src/components/popover/popover.e2e.ts | 1 + packages/crayons-core/src/index.html | 111 ---------------- packages/crayons-extended/untitled.js | 82 ++++++++++++ 6 files changed, 102 insertions(+), 222 deletions(-) delete mode 100644 packages/crayons-core/src/components/form/form.scss create mode 100644 packages/crayons-extended/untitled.js diff --git a/packages/crayons-core/src/components/form/form-util.ts b/packages/crayons-core/src/components/form/form-util.ts index 47adb2d7e..f126b42d4 100644 --- a/packages/crayons-core/src/components/form/form-util.ts +++ b/packages/crayons-core/src/components/form/form-util.ts @@ -402,7 +402,7 @@ export const translateErrors = async (errors = {}, fields) => { ); }; -export const formServFieldTypes = { +const formServFieldTypes = { '1': { type: 'TEXT' }, '2': { type: 'DROPDOWN' }, '3': { type: 'EMAIL' }, diff --git a/packages/crayons-core/src/components/form/form.scss b/packages/crayons-core/src/components/form/form.scss deleted file mode 100644 index 2a33aa1aa..000000000 --- a/packages/crayons-core/src/components/form/form.scss +++ /dev/null @@ -1,4 +0,0 @@ -.nest_indent { - border-inline-start: 1px solid $color-smoke-100; - padding-inline: 10px 0px; -} diff --git a/packages/crayons-core/src/components/form/form.tsx b/packages/crayons-core/src/components/form/form.tsx index feb6067be..89bd4238f 100644 --- a/packages/crayons-core/src/components/form/form.tsx +++ b/packages/crayons-core/src/components/form/form.tsx @@ -10,7 +10,6 @@ import { Watch, Event, EventEmitter, - Fragment, } from '@stencil/core'; import { v4 as uuidv4 } from 'uuid'; import { @@ -33,12 +32,11 @@ import { getMappedSchema, getValueForField, LEGO, - formServFieldTypes, } from './form-util'; import { debounce, hasSlot } from '../../utils'; + @Component({ tag: 'fw-form', - styleUrl: 'form.scss', shadow: true, }) export class Form { @@ -195,27 +193,8 @@ export class Form { } async handleFormSchemaAndInitialValuesChange(formSchema, initialValues) { - const getSectionFields = (fields = []) => { - return fields.reduce((acc, field) => { - // Update the type based on formServFieldTypes - field.type = formServFieldTypes[field.type]?.type || field.type; - return { - ...acc, - [field.name]: field, - ...getSectionFields(field?.fields || []), - }; - }, {}); - }; - this.fields = formSchema?.fields?.reduce((acc, field) => { - // If there are Section fields, add them as well, outside of `fields` key - const nestedFields = getSectionFields(field?.fields || []); - - return { - ...acc, - [field.name]: field, - ...nestedFields, - }; + return { ...acc, [field.name]: field }; }, {}); this.formValidationSchema = @@ -382,26 +361,6 @@ export class Form { componentValue = value; } - // reset for section fields when values changed - - const previousfield = this.formSchema.fields.find( - (field) => field.name === name - ); - - if (previousfield && previousfield?.field_options?.has_sections) { - const selectedObj = previousfield?.choices?.find( - ({ id }) => id === this.values[name] - ); - - selectedObj?.dependent_ids?.field?.forEach((fieldId) => { - const fieldOptionName = previousfield?.fields.find( - ({ id }) => id === fieldId - )?.name; - - delete this.values[fieldOptionName]; - }); - } - this.values = { ...this.values, [name]: componentValue, @@ -836,50 +795,6 @@ export class Form { ) || {}; } - renderSectionFields(field) { - const utils: FormUtils = this.composedUtils(); - // Early return if no value for the field or no dependent choices - const selectedChoiceHash = this.values[field.name]; - if (!selectedChoiceHash) return null; - - // Find the selected field and get dependent field IDs - const dependendFieldIds = field.choices?.find( - ({ id }) => id === selectedChoiceHash - )?.dependent_ids?.field; - if (!dependendFieldIds?.length) return null; - - // Map dependent field IDs to form controls - return ( -
- {dependendFieldIds.map((dependendFieldId) => { - const fieldObj = field.fields?.find( - ({ id }) => id === dependendFieldId - ); - if (!fieldObj) return null; - - return ( -
- ); - } - render() { const utils: FormUtils = this.composedUtils(); @@ -892,25 +807,22 @@ export class Form { .map((field) => { return ( this.shouldRenderFormControl(field) && ( - - - {this.renderSectionFields(field)} - + ) ); }) diff --git a/packages/crayons-core/src/components/popover/popover.e2e.ts b/packages/crayons-core/src/components/popover/popover.e2e.ts index cde3366d1..233080a1c 100644 --- a/packages/crayons-core/src/components/popover/popover.e2e.ts +++ b/packages/crayons-core/src/components/popover/popover.e2e.ts @@ -24,5 +24,6 @@ describe('fw-popover', () => { await document.body.click(); await page.waitForChanges(); content = await page.find('fw-popover >>> .popper-content'); + expect(content).not.toHaveAttribute('data-show'); }); }); diff --git a/packages/crayons-core/src/index.html b/packages/crayons-core/src/index.html index 79924f1aa..dd547c2a5 100644 --- a/packages/crayons-core/src/index.html +++ b/packages/crayons-core/src/index.html @@ -836,117 +836,6 @@

Dynamic form via `formSchema`

option_value_path: 'text', }, }, - { - "id": "74f86523-7591-4250-8f9d-44d31efedee6", - "name": "cf_sectiontype", - "label": "sectiontype", - "type": 2, - "field_options": { - "option_value_path": "id", - "has_sections": "true", - "option_label_path": "value", - "unique": "false", - "required_on_resolve": "false" - }, - "custom": true, - "editable": true, - "position": 150, - "deleted": false, - "required": false, - "visible": true, - "column_type_blob": false, - "nodegroup_skip": false, - "validatable": false, - "builder": false, - "internal": false, - "choices": [ - { - "id": "c322ad67-9b28-4b40-9833-6c3017228464", - "value": "order", - "field_id": "74f86523-7591-4250-8f9d-44d31efedee6", - "choice_options": {}, - "dependent_ids": { - "field": [], - "choice": [] - } - }, - { - "id": "b9018ff6-2a6e-4ebe-97a8-a31e840df3aa", - "value": "tracking", - "field_id": "74f86523-7591-4250-8f9d-44d31efedee6", - "choice_options": { - "section_name": "sep5" - }, - "dependent_ids": { - "field": [ - "2b532f15-ec62-47de-8e5a-fc501e390774", - "40af799f-a852-4265-a2c1-a83ad0818541" - ] - } - } - ], - "fields": [ - { - "id": "2b532f15-ec62-47de-8e5a-fc501e390774", - "parent_id": "74f86523-7591-4250-8f9d-44d31efedee6", - "name": "cf_order_tr_num", - "column_name": "cf_int026", - "label": "order_tr_num", - "type": 8, - "field_options": { - "is_section_field": "true", - "unique": "false" - }, - "custom": true, - "editable": true, - "position": 1, - "deleted": false, - "required": false, - "visible": true, - "column_type_blob": false, - "nodegroup_skip": false, - "validatable": false, - "builder": false, - "internal": false, - "choices": [], - "fields": [], - "regex": {}, - "created_at": 1725949057000, - "updated_at": 1725949057000 - }, - { - "id": "40af799f-a852-4265-a2c1-a83ad0818541", - "parent_id": "74f86523-7591-4250-8f9d-44d31efedee6", - "name": "cf_return_reason", - "column_name": "cf_str023", - "label": "return_reason", - "type": 1, - "field_options": { - "is_section_field": "true", - "unique": "false" - }, - "custom": true, - "editable": true, - "position": 2, - "deleted": false, - "required": false, - "visible": true, - "column_type_blob": false, - "nodegroup_skip": false, - "validatable": false, - "builder": false, - "internal": false, - "choices": [], - "fields": [], - "regex": {}, - "created_at": 1725949081000, - "updated_at": 1725949081000 - } - ], - "regex": {}, - "created_at": 1725529206000, - "updated_at": 1725949081000 - }, ], }; diff --git a/packages/crayons-extended/untitled.js b/packages/crayons-extended/untitled.js new file mode 100644 index 000000000..ad00b296a --- /dev/null +++ b/packages/crayons-extended/untitled.js @@ -0,0 +1,82 @@ +// TYPES +[ + 'PRIMARY', ==> same as 'TEXT' + 'TEXT', + 'EMAIL', + 'CHECKBOX', + 'PARAGRAPH', + 'NUMBER', + 'DECIMAL', + 'DATE', + 'DROPDOWN', + 'RELATIONSHIP', + 'MULTI_SELECT', +] + +// PRIMARY | TEXT | NUMBER | DECIMAL | PARAGRAPH | DATE | CHECKBOX + +id, name, label, type, required, field_options (unique), filterable, display_label + +// RELATIONSHIP + +id, name, label, type, required, field_options (unique), filterable, related_entity_id, display_label + +// PARAGRAPH + +id, name, label, type, required, field_options (unique), filterable, display_label + +// DROPDOWN | MULTI_SELECT + +id, name, label, type, required, field_options (unique), filterable, display_label, choices + +// --choices + +id, value + +// FORMSERV EQUIVALENT KEYS + +type - NUMBER instead of STRING + +/* + +{ + 'TEXT': 1, + + 'DROPDOWN': 2, + + 'EMAIL': 3, + + 'PHONE_NUMBER': 4, + 'CHECKBOX': 5, + + 'PARAGRAPH': 6, + + 'DATE_TIME': 7, + 'NUMBER': 8, + + 'URL': 10, + 'RADIO': 12, + 'DECIMAL': 13, + + 'SECTION': 14, + 'AUTO_COMPLETE': 16, + 'DATE': 17, + + 'MULTI_SELECT': 18, + + 'BIG_NUMBER': 20, +} + + +// SUPPORTED TYPES EQUIVALENTS +{ + 'TEXT': 1, + + 'DROPDOWN': 2, + + 'EMAIL': 3, + + 'CHECKBOX': 5, + + 'PARAGRAPH': 6, + + 'NUMBER': 8, + + 'DECIMAL': 13, + + 'DATE': 17, + + 'MULTI_SELECT': 18, + +} + +*/ + + +/* +{ + label: display_label, +} +*/