From 4365db3f207bc1ab3771f7c946ad3436158812d8 Mon Sep 17 00:00:00 2001 From: AishDani Date: Fri, 19 Jul 2024 12:00:49 +0530 Subject: [PATCH] refactor:mapping for exsting content type case --- .../ContentMapper/contentMapper.interface.ts | 12 +- ui/src/components/ContentMapper/index.tsx | 153 ++++++++++++++---- 2 files changed, 128 insertions(+), 37 deletions(-) diff --git a/ui/src/components/ContentMapper/contentMapper.interface.ts b/ui/src/components/ContentMapper/contentMapper.interface.ts index a247930a..cdc6ba0a 100644 --- a/ui/src/components/ContentMapper/contentMapper.interface.ts +++ b/ui/src/components/ContentMapper/contentMapper.interface.ts @@ -83,11 +83,12 @@ export interface FieldMetadata { multiline?: boolean; allow_rich_text?: boolean; markdown?: boolean; + allow_json_rte?: boolean; } export interface ContentTypesSchema { uid?: string; display_name?: string; - data_type?: 'text' | 'number' | 'isodate' | 'json' | 'file' | 'reference' | 'group'; + data_type?: 'text' | 'number' | 'isodate' | 'json' | 'file' | 'reference' | 'group' | 'boolean' | 'link'; field_metadata?: FieldMetadata; enum?: any; } @@ -108,9 +109,16 @@ export interface ContentTypeList { uid: string; } +interface value { + uid?:string; + data_type?: string; + display_name?: string; + options?: object; + 'No matches found'?:string; +} export interface optionsType { label?: string; - value?: object; + value?: value; isDisabled?: boolean; } diff --git a/ui/src/components/ContentMapper/index.tsx b/ui/src/components/ContentMapper/index.tsx index ad06f238..c5620cb6 100644 --- a/ui/src/components/ContentMapper/index.tsx +++ b/ui/src/components/ContentMapper/index.tsx @@ -79,7 +79,8 @@ const dummy_obj:any = { 'json':{ label:'JSON Rich Text Editor', options : { - 'JSON Rich Text Editor':'json'} + 'JSON Rich Text Editor':'json' + } }, 'html':{ label : 'HTML Rich text Editor', @@ -98,34 +99,50 @@ const dummy_obj:any = { }, 'file': { label:'File', - options: {'File':'file'} + options: { + 'File':'file' + } }, 'number': { label:'Number', - options: {'Number':'number'} + options: { + 'Number':'number' + } }, 'isodate': { label :'Date', - options: {'Date':'isodate'} + options: { + 'Date':'isodate' + } }, 'boolean': { label: 'Boolean', - options: {'Boolean':'boolean'} + options: { + 'Boolean':'boolean' + } }, 'link': { label:'Link', - options: {'Link':'link'} + options: { + 'Link':'link' + } }, 'reference':{ label: 'Reference', - options: {'Reference':'reference'} + options: { + 'Reference':'reference' + } }, 'dropdown': { label:'Dropdown', - options: {'Dropdown':'dropdown'} + options: { + 'Dropdown':'dropdown' + } }, 'radio': { label :'Select', - options: {'Select':'select'} + options: { + 'Select':'select' + } }, 'CheckBox': { label:'Select', @@ -303,7 +320,7 @@ const ContentMapper = ({projectData}:ContentMapperComponentProps) => { }; } }); - setexsitingField(updatedExstingField); + //setexsitingField(updatedExstingField); } }, [tableData, isContentTypeSaved]); @@ -678,11 +695,15 @@ const ContentMapper = ({projectData}:ContentMapperComponentProps) => { }; const SelectAccessorOfColumn = (data: FieldMapType) => { + // object for storing select options according to mapped field + const OptionsForEachRow = dummy_obj?.[data?.backupFieldType]?.options; + + // Mapping of field types const fieldsOfContentstack: Mapping = { 'Single Line Textbox': 'text', 'Single-Line Text': 'text', 'text': 'text', - 'Multi Line Textbox': 'multiline', + 'Multi-Line Text': 'multiline', 'multiline': 'multiline', 'HTML Rich text Editor': 'allow_rich_text', 'JSON Rich Text Editor': 'json', @@ -690,15 +711,21 @@ const ContentMapper = ({projectData}:ContentMapperComponentProps) => { 'Group': 'Group', 'URL': 'url', 'file': 'file', + 'Image':'file', 'number': 'number', + 'Integer':'number', 'Date': 'isodate', 'boolean': 'boolean', + 'Checkbox':'boolean', 'link': 'link', 'reference': 'reference', 'dropdown': 'enum', + 'Droplist':'enum', 'radio': 'enum', - 'CheckBox': 'enum' + //'CheckBox': 'enum' }; + + //array of options if exsting content type has selected const OptionsForRow: optionsType[] = []; if (OtherContentType?.label && contentTypesList) { @@ -708,17 +735,32 @@ const ContentMapper = ({projectData}:ContentMapperComponentProps) => { setContentTypeSchema(ContentType?.schema) } + // If content type schema is available and valid if (contentTypeSchema && validateArray(contentTypeSchema)) { const fieldTypeToMatch = fieldsOfContentstack[data?.otherCmsType as keyof Mapping]; - - contentTypeSchema.forEach((value) => { - switch (fieldTypeToMatch) { + + //check if UID of source cms field is matching with contentstack content type fields + for (const value of contentTypeSchema) { + if (data?.uid === value?.uid) { + OptionsForRow.push({ label: value?.display_name, value: value, isDisabled: false }); + break; + } + } + // If UID does not match then check for field type + if(OptionsForRow.length === 0){ + for (const value of contentTypeSchema) { + const fieldTypes = new Set(['number', 'isodate', 'file', 'reference', 'boolean', 'group', 'link']); + + switch (fieldTypeToMatch) { case 'text': if ( - value?.uid === 'title' && + value?.uid !== 'title' && + value?.uid !=='url' && + !fieldTypes.has(value?.data_type || '') && !value?.field_metadata?.multiline && !value?.enum && !value?.field_metadata?.allow_rich_text && + !value?.field_metadata?.allow_json_rte && !value?.field_metadata?.markdown ) { OptionsForRow.push({ label: value?.display_name, value: value, isDisabled: false }); @@ -782,34 +824,73 @@ const ContentMapper = ({projectData}:ContentMapperComponentProps) => { isDisabled: false }); break; + } - }); + + }} } - + + // Variable to store length of options const selectedOption = OptionsForRow?.length; - const OptionValue: FieldTypes = - OptionsForRow?.length === 0 - ? { - label: data?.ContentstackFieldType, - value: data?.ContentstackFieldType, - isDisabled: data?.ContentstackFieldType === 'group' || - data?.ContentstackFieldType === 'text' || - data?.ContentstackFieldType === 'url' + //variable to store the options if exsting contentstack content type is not selected + let option:any; + if (Array.isArray(OptionsForEachRow)) { + option = OptionsForEachRow.map((option) => ({ + label: option, + value: option, + })); + } else if (typeof OptionsForEachRow === 'object') { + option = Object.entries(OptionsForEachRow).map(([label, value]) => ({ + label, + value, + })); + }else{ + option = [{ label: OptionsForEachRow, value: OptionsForEachRow }] + } + + const OptionValue: any = + OptionsForRow?.length === 1 && + //disable url, title and group fields + (OptionsForRow?.[0]?.value?.uid === 'url' || OptionsForRow?.[0]?.value?.uid === 'title' ||OptionsForRow?.[0]?.value?.uid === 'group') + ? { + label: OptionsForRow?.[0]?.value?.display_name, + value: OptionsForRow?.[0]?.value, + isDisabled: true + } + : OptionsForRow?.length === 0 + ? { + label: dummy_obj[data?.ContentstackFieldType]?.label, + value: dummy_obj[data?.ContentstackFieldType]?.label, + isDisabled: data?.ContentstackFieldType === 'text' || + data?.ContentstackFieldType === 'group' || + data?.ContentstackFieldType === 'url' } - : { label: `${selectedOption} matches`, value: `${selectedOption} matches` }; - - const adjustedOptions = OptionsForRow.map((option: optionsType) => ({ + : { + label: `${selectedOption} matches`, + value: `${selectedOption} matches`, + isDisabled: false + }; + + // Adjust the options based on whether existing contentstack content type is selected + const adjustedOptions = OptionsForRow.length === 0 ? option + : OptionsForRow.map((option: optionsType) => ({ ...option, isDisabled: selectedOptions?.includes(option?.label ?? '') - })); - + })); + return (