- 
+
diff --git a/ui/src/components/AdvancePropertise/advanceProperties.interface.ts b/ui/src/components/AdvancePropertise/advanceProperties.interface.ts
index 057ea1417..87d1b6830 100644
--- a/ui/src/components/AdvancePropertise/advanceProperties.interface.ts
+++ b/ui/src/components/AdvancePropertise/advanceProperties.interface.ts
@@ -8,17 +8,17 @@ export interface SchemaProps {
* The type of the field.
*/
fieldtype: string;
-
+
/**
* The updated settings for the field.
*/
value: UpdatedSettings;
-
+
/**
* The ID of the row.
*/
rowId: string;
-
+
/**
* A function to update the field settings.
* @param rowId - The ID of the row.
@@ -26,22 +26,22 @@ export interface SchemaProps {
* @param checkBoxChanged - Indicates whether the checkbox has changed.
*/
updateFieldSettings: (rowId: string, value: Advanced, checkBoxChanged: boolean) => void;
-
+
/**
* Indicates whether the field is localized.
*/
isLocalised: boolean;
-
+
/**
* A function to close the modal.
*/
closeModal: () => void;
-
+
/**
* The data for the field map.
*/
data: FieldMapType;
-
+
/**
* The ID of the project.
*/
@@ -121,8 +121,8 @@ export interface UpdatedSettings {
embedObjects?: any;
- default_value?: string |boolean;
- options?: any[]
+ default_value?: string | boolean;
+ options?: any[];
}
/**
@@ -236,8 +236,8 @@ export interface StateType {
embedAssests?: boolean;
}
-export interface optionsType{
- label?:string;
- key?:string;
- value:string
-}
\ No newline at end of file
+export interface optionsType {
+ label?: string;
+ key?: string;
+ value: string;
+}
diff --git a/ui/src/components/AdvancePropertise/index.tsx b/ui/src/components/AdvancePropertise/index.tsx
index 28ac6a19d..6720013fb 100644
--- a/ui/src/components/AdvancePropertise/index.tsx
+++ b/ui/src/components/AdvancePropertise/index.tsx
@@ -22,7 +22,7 @@ import { getContentTypes } from '../../services/api/migration.service';
import { validateArray } from '../../utilities/functions';
// Interfaces
-import { optionsType, SchemaProps } from './advanceProperties.interface';
+import { optionsType, SchemaProps } from './advanceProperties.interface';
import { ContentType } from '../ContentMapper/contentMapper.interface';
// Styles
@@ -64,45 +64,44 @@ const AdvancePropertise = (props: SchemaProps) => {
const embedObjects = props?.value?.embedObjects?.map((item: string) => ({
label: item,
- value: item,
+ value: item
}));
// State for content types
const [contentTypes, setContentTypes] = useState([]);
const [ctValue, setCTValue] = useState(embedObjects);
- const [embedObjectsLabels, setEmbedObjectsLabels] = useState(props?.value?.embedObjects);
+ const [embedObjectsLabels, setEmbedObjectsLabels] = useState(
+ props?.value?.embedObjects
+ );
const [showOptions, setShowOptions] = useState>({});
const [showIcon, setShowIcon] = useState();
const filterRef = useRef(null);
const [options, setOptions] = useState(props?.value?.options || []);
const [draggedIndex, setDraggedIndex] = useState(null);
-
- useEffect(()=>{
+
+ useEffect(() => {
const defaultIndex = toggleStates?.option?.findIndex(
(item: optionsType) => toggleStates?.default_value === item?.key
);
-
+
if (defaultIndex !== -1) {
setShowIcon(defaultIndex);
}
-
- },[]);
+ }, []);
useEffect(() => {
fetchContentTypes('');
- }, [])
+ }, []);
/**
* Fetches the content types list.
* @param searchText - The search text.
*/
const fetchContentTypes = async (searchText: string) => {
try {
- const { data } = await getContentTypes(props?.projectId ?? '', 0,5000, searchText || ''); //org id will always present
+ const { data } = await getContentTypes(props?.projectId ?? '', 0, 5000, searchText || ''); //org id will always present
setContentTypes(data?.contentTypes);
} catch (error) {
return error;
-
}
-
};
/**
@@ -111,7 +110,11 @@ const AdvancePropertise = (props: SchemaProps) => {
* @param event - The change event.
* @param checkBoxChanged - Indicates if the checkbox was changed.
*/
- const handleOnChange = (field: string, event: React.ChangeEvent, checkBoxChanged: boolean) => {
+ const handleOnChange = (
+ field: string,
+ event: React.ChangeEvent,
+ checkBoxChanged: boolean
+ ) => {
setToggleStates((prevStates) => ({
...prevStates,
[field]: (event.target as HTMLInputElement)?.value
@@ -119,7 +122,7 @@ const AdvancePropertise = (props: SchemaProps) => {
const currentToggleStates = {
...toggleStates,
- [field]: (event.target as HTMLInputElement)?.value,
+ [field]: (event.target as HTMLInputElement)?.value
};
props?.updateFieldSettings(
@@ -130,7 +133,7 @@ const AdvancePropertise = (props: SchemaProps) => {
default_value: currentToggleStates?.default_value,
validationRegex: currentToggleStates?.validationRegex ?? '',
minChars: currentToggleStates?.minChars,
- maxChars:currentToggleStates?.maxChars,
+ maxChars: currentToggleStates?.maxChars,
mandatory: currentToggleStates?.mandatory,
multiple: currentToggleStates?.multiple,
unique: false,
@@ -142,7 +145,7 @@ const AdvancePropertise = (props: SchemaProps) => {
minSize: currentToggleStates?.minSize,
maxSize: currentToggleStates?.maxSize,
title: currentToggleStates?.title,
- url:currentToggleStates?.url
+ url: currentToggleStates?.url
},
checkBoxChanged
);
@@ -161,9 +164,9 @@ const AdvancePropertise = (props: SchemaProps) => {
}));
const currentToggleStates = {
...toggleStates,
- [field]: value,
+ [field]: value
};
-
+
props?.updateFieldSettings(
props?.rowId,
{
@@ -175,30 +178,29 @@ const AdvancePropertise = (props: SchemaProps) => {
unique: false,
nonLocalizable: currentToggleStates?.nonLocalizable,
embedObject: currentToggleStates?.embedObject,
- embedObjects : embedObjectsLabels,
+ embedObjects: embedObjectsLabels,
default_value: currentToggleStates?.default_value,
minChars: currentToggleStates?.minChars,
- maxChars:currentToggleStates?.maxChars,
+ maxChars: currentToggleStates?.maxChars,
minRange: currentToggleStates?.minRange,
maxRange: currentToggleStates?.maxRange,
minSize: currentToggleStates?.minSize,
maxSize: currentToggleStates?.maxSize,
title: currentToggleStates?.title,
- url:currentToggleStates?.url
+ url: currentToggleStates?.url
},
checkBoxChanged
);
};
-
- const handleRadioChange = (field: string,value:boolean) => {
+ const handleRadioChange = (field: string, value: boolean) => {
setToggleStates((prevStates) => ({
...prevStates,
[field]: value
}));
const currentToggleStates = {
...toggleStates,
- [field]: value,
+ [field]: value
};
props?.updateFieldSettings(
@@ -211,26 +213,22 @@ const AdvancePropertise = (props: SchemaProps) => {
unique: false,
nonLocalizable: currentToggleStates?.nonLocalizable,
embedObject: currentToggleStates?.embedObject,
- embedObjects : embedObjectsLabels
+ embedObjects: embedObjectsLabels
},
true
);
-
};
- const handleOnClick = ( index:number) =>{
-
+ const handleOnClick = (index: number) => {
setShowOptions((prev) => ({
-
- [index]: !prev[index],
+ [index]: !prev[index]
}));
- }
-
- const handleDefalutValue = (index:number, option:optionsType) => {
+ };
+
+ const handleDefalutValue = (index: number, option: optionsType) => {
setShowIcon(index);
setShowOptions(() => ({
-
- [index]: false,
+ [index]: false
}));
setToggleStates((prevStates) => ({
...prevStates,
@@ -250,18 +248,16 @@ const AdvancePropertise = (props: SchemaProps) => {
unique: false,
nonLocalizable: currentToggleStates?.nonLocalizable,
embedObject: currentToggleStates?.embedObject,
- embedObjects : embedObjectsLabels,
- options:options
+ embedObjects: embedObjectsLabels,
+ options: options
},
true
);
-
- }
- const handleRemoveDefalutValue = (index:number)=>{
+ };
+ const handleRemoveDefalutValue = (index: number) => {
setShowIcon(-1);
setShowOptions(() => ({
-
- [index]: false,
+ [index]: false
}));
setToggleStates((prevStates) => ({
...prevStates,
@@ -281,50 +277,46 @@ const AdvancePropertise = (props: SchemaProps) => {
unique: false,
nonLocalizable: currentToggleStates?.nonLocalizable,
embedObject: currentToggleStates?.embedObject,
- embedObjects : embedObjectsLabels,
+ embedObjects: embedObjectsLabels,
options: options
},
true
);
- }
+ };
const handleDragStart = (index: number) => {
setDraggedIndex(index);
document.querySelectorAll('.element-wrapper').forEach((el, i) => {
if (i === index) {
- el.classList.add('dragging');
+ el.classList.add('dragging');
}
});
};
- const handleDragOver = (e:React.DragEvent, index:number) => {
- e.preventDefault();
+ const handleDragOver = (e: React.DragEvent, index: number) => {
+ e.preventDefault();
document.querySelectorAll('.element-wrapper').forEach((el, i) => {
if (i === index) {
- el.classList.remove('dragging');
+ el.classList.remove('dragging');
}
});
};
- const handleDrop = (index:number) => {
+ const handleDrop = (index: number) => {
if (draggedIndex === null) return;
-
- const updatedOptions = [...options];
- const draggedItem = updatedOptions[draggedIndex];
- const targetItem = updatedOptions[index];
-
- updatedOptions[draggedIndex] = targetItem;
- updatedOptions[index] = draggedItem;
-
- setOptions(updatedOptions);
- setDraggedIndex(null);
-
-
+
+ const updatedOptions = [...options];
+ const draggedItem = updatedOptions[draggedIndex];
+ const targetItem = updatedOptions[index];
+
+ updatedOptions[draggedIndex] = targetItem;
+ updatedOptions[index] = draggedItem;
+
+ setOptions(updatedOptions);
+ setDraggedIndex(null);
};
-
useEffect(() => {
-
if (ctValue && Array.isArray(ctValue)) {
const labels = ctValue.map((item) => item.label);
setEmbedObjectsLabels(labels);
@@ -332,147 +324,162 @@ const AdvancePropertise = (props: SchemaProps) => {
}, [ctValue]);
// Option for content types
- const contentTypesList = contentTypes?.filter((ct: ContentType) => ct?.type === "content_type");
-
+ const contentTypesList = contentTypes?.filter((ct: ContentType) => ct?.type === 'content_type');
+
const option = validateArray(contentTypesList)
- ? contentTypesList?.map((option: ContentType) => ({ label: option?.contentstackTitle, value: option?.contentstackUid }))
+ ? contentTypesList?.map((option: ContentType) => ({
+ label: option?.contentstackTitle,
+ value: option?.contentstackUid
+ }))
: [{ label: contentTypesList, value: contentTypesList }];
return (
<>
-
-
+
{heading}
-
-
- {(props?.fieldtype === 'Dropdown') &&
- <>
-
- Choice
-
-
- (read only)
-
- {options?.map((option: optionsType,index)=>(
-
-
Default Value
-
-
+
) => handleOnChange('default_value', e, true))}
+ onChange={
+ handleOnChange &&
+ ((e: React.ChangeEvent) =>
+ handleOnChange('default_value', e, true))
+ }
/>
-
+
Validation (Regex)
-
) => handleOnChange('validationRegex', e, true))}
+ onChange={
+ handleOnChange &&
+ ((e: React.ChangeEvent) =>
+ handleOnChange('validationRegex', e, true))
+ }
/>
- )}
+ )}
{props?.fieldtype === 'Link' && (
<>
-
@@ -483,7 +490,10 @@ const AdvancePropertise = (props: SchemaProps) => {
value={toggleStates?.title}
placeholder="Enter value"
version="v2"
- onChange={handleOnChange && ((e: React.ChangeEvent) => handleOnChange('title', e, true))}
+ onChange={
+ handleOnChange &&
+ ((e: React.ChangeEvent) => handleOnChange('title', e, true))
+ }
/>
@@ -496,31 +506,32 @@ const AdvancePropertise = (props: SchemaProps) => {
value={toggleStates?.url}
placeholder="Enter value"
version="v2"
- onChange={handleOnChange && ((e: React.ChangeEvent) => handleOnChange('url', e, true))}
+ onChange={
+ handleOnChange &&
+ ((e: React.ChangeEvent) => handleOnChange('url', e, true))
+ }
/>
-
+
)}
{props?.fieldtype === 'Boolean' && (
-
- Default Value
-
-
+ Default Value
+
+
)}
@@ -529,12 +540,7 @@ const AdvancePropertise = (props: SchemaProps) => {
Referenced Content Type
-
handleDragStart(index)}
- onDragOver={(e)=> handleDragOver(e,index)}
- onDrop={() => handleDrop(index)}
- >
-
+ {props?.fieldtype === 'Dropdown' && (
+ <>
+
+ Choice
+
+ (read only)
+
-
-
-
-
- }
-
- {(props?.fieldtype === 'Single Line Textbox' || props?.fieldtype === 'Multi Line Textbox') && (
+ {(props?.fieldtype === 'Single Line Textbox' ||
+ props?.fieldtype === 'Multi Line Textbox') && (
<>
-
-
+ {options?.map((option: optionsType, index) => (
+
+
+ )}
- handleDragStart(index)}
+ onDragOver={(e) => handleDragOver(e, index)}
+ onDrop={() => handleDrop(index)}
+ >
+
-
- ))}
-
+ ))}
+
+
+
- {showIcon !== index ?
-
- :
-
-
- }
-
-
-
- )}
-
-
-
+ suffix={
+ index === showIcon && (
+
+ {showIcon !== index ? (
+
+ ) : (
+
+ )}
+
+ )}
-
- Default Value
-
-
-
-
+
+
+ Default Value
+
+
+
+
- handleRadioChange('default_value',true)}>
-
- handleRadioChange('default_value',false)}>
-
-
-
-
+
+ handleRadioChange('default_value', true)}
+ >
+ handleRadioChange('default_value', false)}
+ >
+
- {(props?.fieldtype === 'HTML Rich text Editor' || props?.fieldtype === 'JSON Rich Text Editor') && (
+ {(props?.fieldtype === 'HTML Rich text Editor' ||
+ props?.fieldtype === 'JSON Rich Text Editor') && (
<>
-
+
0 || toggleStates?.embedObject}
- onChange={handleToggleChange && ((e: React.MouseEvent) => handleToggleChange('embedObject', (e.target as HTMLInputElement)?.checked, true))}
+ onChange={
+ handleToggleChange &&
+ ((e: React.MouseEvent) =>
+ handleToggleChange(
+ 'embedObject',
+ (e.target as HTMLInputElement)?.checked,
+ true
+ ))
+ }
/>
-
- {(ctValue && ctValue?.length > 0 || toggleStates?.embedObject) && (
+
+ {((ctValue && ctValue?.length > 0) || toggleStates?.embedObject) && (