Skip to content

refactor: add isNumber field to SearchComponent and TeaserComponent f… #823

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
umeshmore45 merged 2 commits into from
Nov 4, 2025
Merged

refactor: add isNumber field to SearchComponent and TeaserComponent f… #823

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b3fa09a
refactor: add isNumber field to SearchComponent and TeaserComponent f…
shobhitupadhyayy Nov 4, 2025
595e9f4
refactor: improve state management and formatting in AdvancePropertis…
shobhitupadhyayy Nov 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
251 changes: 132 additions & 119 deletions ui/src/components/AdvancePropertise/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
Icon,
Select,
Radio,
Button,
Button
} from '@contentstack/venus-components';

// Service
Expand Down Expand Up @@ -78,13 +78,28 @@ const AdvancePropertise = (props: SchemaProps) => {
const [embedObjectsLabels, setEmbedObjectsLabels] = useState<string[]>(
props?.value?.embedObjects
);
const [referencedCT, setReferencedCT] = useState<ContentTypeOption[] | null>(referencedItems || null);
const [referencedCT, setReferencedCT] = useState<ContentTypeOption[] | null>(
referencedItems || null
);
const [showOptions, setShowOptions] = useState<Record<number, boolean>>({});
const [showIcon, setShowIcon] = useState<number>();
const filterRef = useRef<HTMLDivElement | null>(null);
const [options, setOptions] = useState(props?.value?.options || []);
const [draggedIndex, setDraggedIndex] = useState<number | null>(null);

useEffect(() => {
if (props?.data?.refrenceTo && Array.isArray(props?.data?.refrenceTo)) {
const updatedReferencedItems = props?.data?.refrenceTo.map((item: string) => ({
label: item,
value: item
}));
setReferencedCT(updatedReferencedItems);
setToggleStates((prevStates) => ({
...prevStates,
referenedItems: props?.data?.refrenceTo
}));
}
}, [props?.data?.refrenceTo]);
useEffect(() => {
const defaultIndex = toggleStates?.option?.findIndex(
(item: optionsType) => toggleStates?.default_value === item?.key
Expand Down Expand Up @@ -344,9 +359,9 @@ const AdvancePropertise = (props: SchemaProps) => {

const option = validateArray(contentTypesList)
? contentTypesList?.map((option: ContentType) => ({
label: option?.contentstackTitle,
value: option?.contentstackUid
}))
label: option?.contentstackTitle,
value: option?.contentstackUid
}))
: [{ label: contentTypesList, value: contentTypesList }];

return (
Expand All @@ -372,8 +387,7 @@ const AdvancePropertise = (props: SchemaProps) => {
draggable
onDragStart={() => handleDragStart(index)}
onDragOver={(e) => handleDragOver(e, index)}
onDrop={() => handleDrop(index)}
>
onDrop={() => handleDrop(index)}>
<div className="term-drag-icon">
<Icon icon="ActionBar" size="medium" version="v2" />
</div>
Expand All @@ -387,8 +401,7 @@ const AdvancePropertise = (props: SchemaProps) => {
index === showIcon && (
<Icon icon={'CheckSquareOffset'} version="v2" size="medium" />
)
}
></TextInput>
}></TextInput>

<Button
buttonType="light"
Expand All @@ -397,8 +410,7 @@ const AdvancePropertise = (props: SchemaProps) => {
canCloseOnClickOutside={true}
size={'small'}
icon={'v2-DotsThreeLargeVertical'}
onClick={() => handleOnClick(index)}
></Button>
onClick={() => handleOnClick(index)}></Button>

{showOptions[index] && (
<div className="dropdown-filter-wrapper" ref={filterRef}>
Expand All @@ -408,8 +420,7 @@ const AdvancePropertise = (props: SchemaProps) => {
buttonType="light"
icon={'v2-CheckSquareOffset'}
size={'small'}
onClick={() => handleDefalutValue(index, option)}
>
onClick={() => handleDefalutValue(index, option)}>
Mark as Default
</Button>
) : (
Expand All @@ -418,8 +429,7 @@ const AdvancePropertise = (props: SchemaProps) => {
buttonType="light"
icon={'v2-CheckSquareOffset'}
size={'small'}
onClick={() => handleRemoveDefalutValue(index)}
>
onClick={() => handleRemoveDefalutValue(index)}>
Remove as Default
</Button>
)}
Expand All @@ -433,53 +443,52 @@ const AdvancePropertise = (props: SchemaProps) => {

{(props?.fieldtype === 'Single Line Textbox' ||
props?.fieldtype === 'Multi Line Textbox') && (
<>
<Field>
<FieldLabel htmlFor="validation" version="v2">
Default Value
</FieldLabel>
<Tooltip
content={
'Set a default field value for this field. The value will appear by default while creating an entry for this content type.'
}
position="right"
>
<Icon icon="Question" size="small" version="v2" className="Help" />
</Tooltip>
<TextInput
type="text"
value={toggleStates?.default_value}
placeholder="Enter value"
version="v2"
onChange={
handleOnChange &&
((e: React.ChangeEvent<HTMLInputElement>) =>
handleOnChange('default_value', e, true))
}
/>
</Field>

<Field>
<FieldLabel htmlFor="validation" version="v2">
Validation (Regex)
</FieldLabel>
<Tooltip content={'Define the validation for the field.'} position="right">
<Icon icon="Question" size="small" version="v2" className="Help" />
</Tooltip>
<TextInput
type="text"
value={toggleStates?.validationRegex}
placeholder="Enter value"
version="v2"
onChange={
handleOnChange &&
((e: React.ChangeEvent<HTMLInputElement>) =>
handleOnChange('validationRegex', e, true))
}
/>
</Field>
</>
)}
<>
<Field>
<FieldLabel htmlFor="validation" version="v2">
Default Value
</FieldLabel>
<Tooltip
content={
'Set a default field value for this field. The value will appear by default while creating an entry for this content type.'
}
position="right">
<Icon icon="Question" size="small" version="v2" className="Help" />
</Tooltip>
<TextInput
type="text"
value={toggleStates?.default_value}
placeholder="Enter value"
version="v2"
onChange={
handleOnChange &&
((e: React.ChangeEvent<HTMLInputElement>) =>
handleOnChange('default_value', e, true))
}
/>
</Field>

<Field>
<FieldLabel htmlFor="validation" version="v2">
Validation (Regex)
</FieldLabel>
<Tooltip content={'Define the validation for the field.'} position="right">
<Icon icon="Question" size="small" version="v2" className="Help" />
</Tooltip>
<TextInput
type="text"
value={toggleStates?.validationRegex}
placeholder="Enter value"
version="v2"
onChange={
handleOnChange &&
((e: React.ChangeEvent<HTMLInputElement>) =>
handleOnChange('validationRegex', e, true))
}
/>
</Field>
</>
)}

{props?.fieldtype === 'Link' && (
<>
Expand All @@ -491,8 +500,7 @@ const AdvancePropertise = (props: SchemaProps) => {
content={
'Set a default field value for this field. The value will appear by default while creating an entry for this content type.'
}
position="right"
>
position="right">
<Icon icon="Question" size="small" version="v2" className="Help" />
</Tooltip>
</div>
Expand Down Expand Up @@ -540,13 +548,11 @@ const AdvancePropertise = (props: SchemaProps) => {
<Radio
label={'True'}
checked={toggleStates?.default_value === true}
onChange={() => handleRadioChange('default_value', true)}
></Radio>
onChange={() => handleRadioChange('default_value', true)}></Radio>
<Radio
label={'False'}
checked={toggleStates?.default_value === false}
onChange={() => handleRadioChange('default_value', false)}
></Radio>
onChange={() => handleRadioChange('default_value', false)}></Radio>
</div>
</Field>
)}
Expand All @@ -564,19 +570,25 @@ const AdvancePropertise = (props: SchemaProps) => {
setReferencedCT(selectedOptions);
const referencedArray = selectedOptions?.map((item: optionsType) => item?.value);

setToggleStates((prevStates) => ({
...prevStates,
referenedItems: referencedArray
}));

props?.updateFieldSettings(
props?.rowId,
{
...props?.value,
mandatory: toggleStates?.mandatory,
nonLocalizable: toggleStates?.nonLocalizable,
validationRegex: toggleStates?.validationRegex ?? '',
referenedItems: referencedArray // <-- update only this property!
referenedItems: referencedArray
},
true,
props?.data?.contentstackFieldUid
);
}}
options={
option}
options={option}
placeholder="Add Content Type(s)"
version="v2"
isSearchable={true}
Expand All @@ -595,54 +607,56 @@ const AdvancePropertise = (props: SchemaProps) => {
<div className="options-class">
{(props?.fieldtype === 'HTML Rich text Editor' ||
props?.fieldtype === 'JSON Rich Text Editor') && (
<>
<div className="ToggleWrap">
<ToggleSwitch
label="Embed Object(s)"
labelColor="primary"
labelPosition="right"
checked={(ctValue?.length ?? 0) > 0 || toggleStates?.embedObject}
onChange={
handleToggleChange &&
((e: React.MouseEvent<HTMLElement>) =>
handleToggleChange(
'embedObject',
(e.target as HTMLInputElement)?.checked,
true
))
}
/>
</div>
<>
<div className="ToggleWrap">
<ToggleSwitch
label="Embed Object(s)"
labelColor="primary"
labelPosition="right"
checked={(ctValue?.length ?? 0) > 0 || toggleStates?.embedObject}
onChange={
handleToggleChange &&
((e: React.MouseEvent<HTMLElement>) =>
handleToggleChange(
'embedObject',
(e.target as HTMLInputElement)?.checked,
true
))
}
/>
</div>

{((ctValue && ctValue?.length > 0) || toggleStates?.embedObject) && (
<Select
value={ctValue}
isMulti={true}
onChange={(selectedOptions: ContentTypeOption[]) => {
setCTValue(selectedOptions);
const embedObject = selectedOptions?.map((item: optionsType) => item?.value); // Update the state with the selected options
props?.updateFieldSettings(
props?.rowId,
{
validationRegex: toggleStates?.validationRegex ?? '',
embedObjects: embedObject
},
true,
props?.data?.contentstackFieldUid
);
}}
options={option}
placeholder="Select Content Types"
version="v2"
isSearchable={true}
isClearable={true}
width="350px"
maxMenuHeight={200}
{((ctValue && ctValue?.length > 0) || toggleStates?.embedObject) && (
<Select
value={ctValue}
isMulti={true}
onChange={(selectedOptions: ContentTypeOption[]) => {
setCTValue(selectedOptions);
const embedObject = selectedOptions?.map(
(item: optionsType) => item?.value
); // Update the state with the selected options
props?.updateFieldSettings(
props?.rowId,
{
validationRegex: toggleStates?.validationRegex ?? '',
embedObjects: embedObject
},
true,
props?.data?.contentstackFieldUid
);
}}
options={option}
placeholder="Select Content Types"
version="v2"
isSearchable={true}
isClearable={true}
width="350px"
maxMenuHeight={200}
// isSelectAll={true}
/>
)}
</>
)}
/>
)}
</>
)}
{props?.fieldtype !== 'Global' && props?.fieldtype !== 'Boolean' && (
<div className="ToggleWrap">
<ToggleSwitch
Expand All @@ -667,8 +681,7 @@ const AdvancePropertise = (props: SchemaProps) => {
<Tooltip
content="Available only if there are multiple languages in your stack"
position="top"
disabled={props?.isLocalised}
>
disabled={props?.isLocalised}>
<ToggleSwitch
id="disabled"
disabled={!props?.isLocalised}
Expand Down
2 changes: 1 addition & 1 deletion ui/src/components/ContentMapper/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -860,7 +860,7 @@ const ContentMapper = forwardRef(({ handleStepChange }: contentMapperProps, ref:
if (row?.uid === rowId && row?.contentstackFieldUid === rowContentstackFieldUid) {
const updatedRow = {
...row,
refrenceTo: updatedSettings?.referenedItems,
refrenceTo: updatedSettings?.referenedItems || row?.refrenceTo,
advanced: { ...row?.advanced, ...updatedSettings }
};
return updatedRow;
Expand Down
1 change: 1 addition & 0 deletions upload-api/migration-aem/libs/contentType/components/SearchComponent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ export class SearchComponent extends ContentstackComponent {
uid: key,
displayName: key,
description: "",
isNumber: true,
defaultValue: ""
}).toContentstack(),
object: () => null,
Expand Down
1 change: 1 addition & 0 deletions upload-api/migration-aem/libs/contentType/components/TeaserComponent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ export class TeaserComponent extends ContentstackComponent {
uid: key,
displayName: key,
description: "",
isNumber: true,
defaultValue: ""
}).toContentstack(),
object: (key, schemaProp) => {
Expand Down