Skip to content

Commit fd4d592

Browse files
umeshmore45umeshmore45
authored
Merge pull request #823 from contentstack/feat/custom-app
refactor: add isNumber field to SearchComponent and TeaserComponent f…
2 parents f8ac7db + 595e9f4 commit fd4d592

File tree

4 files changed

+135
-120
lines changed

4 files changed

+135
-120
lines changed

‎ui/src/components/AdvancePropertise/index.tsx‎

Lines changed: 132 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
Icon,
1212
Select,
1313
Radio,
14-
Button,
14+
Button
1515
} from '@contentstack/venus-components';
1616

1717
// Service
@@ -78,13 +78,28 @@ const AdvancePropertise = (props: SchemaProps) => {
7878
const [embedObjectsLabels, setEmbedObjectsLabels] = useState<string[]>(
7979
props?.value?.embedObjects
8080
);
81-
const [referencedCT, setReferencedCT] = useState<ContentTypeOption[] | null>(referencedItems || null);
81+
const [referencedCT, setReferencedCT] = useState<ContentTypeOption[] | null>(
82+
referencedItems || null
83+
);
8284
const [showOptions, setShowOptions] = useState<Record<number, boolean>>({});
8385
const [showIcon, setShowIcon] = useState<number>();
8486
const filterRef = useRef<HTMLDivElement | null>(null);
8587
const [options, setOptions] = useState(props?.value?.options || []);
8688
const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
8789

90+
useEffect(() => {
91+
if (props?.data?.refrenceTo && Array.isArray(props?.data?.refrenceTo)) {
92+
const updatedReferencedItems = props?.data?.refrenceTo.map((item: string) => ({
93+
label: item,
94+
value: item
95+
}));
96+
setReferencedCT(updatedReferencedItems);
97+
setToggleStates((prevStates) => ({
98+
...prevStates,
99+
referenedItems: props?.data?.refrenceTo
100+
}));
101+
}
102+
}, [props?.data?.refrenceTo]);
88103
useEffect(() => {
89104
const defaultIndex = toggleStates?.option?.findIndex(
90105
(item: optionsType) => toggleStates?.default_value === item?.key
@@ -344,9 +359,9 @@ const AdvancePropertise = (props: SchemaProps) => {
344359

345360
const option = validateArray(contentTypesList)
346361
? contentTypesList?.map((option: ContentType) => ({
347-
label: option?.contentstackTitle,
348-
value: option?.contentstackUid
349-
}))
362+
label: option?.contentstackTitle,
363+
value: option?.contentstackUid
364+
}))
350365
: [{ label: contentTypesList, value: contentTypesList }];
351366

352367
return (
@@ -372,8 +387,7 @@ const AdvancePropertise = (props: SchemaProps) => {
372387
draggable
373388
onDragStart={() => handleDragStart(index)}
374389
onDragOver={(e) => handleDragOver(e, index)}
375-
onDrop={() => handleDrop(index)}
376-
>
390+
onDrop={() => handleDrop(index)}>
377391
<div className="term-drag-icon">
378392
<Icon icon="ActionBar" size="medium" version="v2" />
379393
</div>
@@ -387,8 +401,7 @@ const AdvancePropertise = (props: SchemaProps) => {
387401
index === showIcon && (
388402
<Icon icon={'CheckSquareOffset'} version="v2" size="medium" />
389403
)
390-
}
391-
></TextInput>
404+
}></TextInput>
392405

393406
<Button
394407
buttonType="light"
@@ -397,8 +410,7 @@ const AdvancePropertise = (props: SchemaProps) => {
397410
canCloseOnClickOutside={true}
398411
size={'small'}
399412
icon={'v2-DotsThreeLargeVertical'}
400-
onClick={() => handleOnClick(index)}
401-
></Button>
413+
onClick={() => handleOnClick(index)}></Button>
402414

403415
{showOptions[index] && (
404416
<div className="dropdown-filter-wrapper" ref={filterRef}>
@@ -408,8 +420,7 @@ const AdvancePropertise = (props: SchemaProps) => {
408420
buttonType="light"
409421
icon={'v2-CheckSquareOffset'}
410422
size={'small'}
411-
onClick={() => handleDefalutValue(index, option)}
412-
>
423+
onClick={() => handleDefalutValue(index, option)}>
413424
Mark as Default
414425
</Button>
415426
) : (
@@ -418,8 +429,7 @@ const AdvancePropertise = (props: SchemaProps) => {
418429
buttonType="light"
419430
icon={'v2-CheckSquareOffset'}
420431
size={'small'}
421-
onClick={() => handleRemoveDefalutValue(index)}
422-
>
432+
onClick={() => handleRemoveDefalutValue(index)}>
423433
Remove as Default
424434
</Button>
425435
)}
@@ -433,53 +443,52 @@ const AdvancePropertise = (props: SchemaProps) => {
433443

434444
{(props?.fieldtype === 'Single Line Textbox' ||
435445
props?.fieldtype === 'Multi Line Textbox') && (
436-
<>
437-
<Field>
438-
<FieldLabel htmlFor="validation" version="v2">
439-
Default Value
440-
</FieldLabel>
441-
<Tooltip
442-
content={
443-
'Set a default field value for this field. The value will appear by default while creating an entry for this content type.'
444-
}
445-
position="right"
446-
>
447-
<Icon icon="Question" size="small" version="v2" className="Help" />
448-
</Tooltip>
449-
<TextInput
450-
type="text"
451-
value={toggleStates?.default_value}
452-
placeholder="Enter value"
453-
version="v2"
454-
onChange={
455-
handleOnChange &&
456-
((e: React.ChangeEvent<HTMLInputElement>) =>
457-
handleOnChange('default_value', e, true))
458-
}
459-
/>
460-
</Field>
461-
462-
<Field>
463-
<FieldLabel htmlFor="validation" version="v2">
464-
Validation (Regex)
465-
</FieldLabel>
466-
<Tooltip content={'Define the validation for the field.'} position="right">
467-
<Icon icon="Question" size="small" version="v2" className="Help" />
468-
</Tooltip>
469-
<TextInput
470-
type="text"
471-
value={toggleStates?.validationRegex}
472-
placeholder="Enter value"
473-
version="v2"
474-
onChange={
475-
handleOnChange &&
476-
((e: React.ChangeEvent<HTMLInputElement>) =>
477-
handleOnChange('validationRegex', e, true))
478-
}
479-
/>
480-
</Field>
481-
</>
482-
)}
446+
<>
447+
<Field>
448+
<FieldLabel htmlFor="validation" version="v2">
449+
Default Value
450+
</FieldLabel>
451+
<Tooltip
452+
content={
453+
'Set a default field value for this field. The value will appear by default while creating an entry for this content type.'
454+
}
455+
position="right">
456+
<Icon icon="Question" size="small" version="v2" className="Help" />
457+
</Tooltip>
458+
<TextInput
459+
type="text"
460+
value={toggleStates?.default_value}
461+
placeholder="Enter value"
462+
version="v2"
463+
onChange={
464+
handleOnChange &&
465+
((e: React.ChangeEvent<HTMLInputElement>) =>
466+
handleOnChange('default_value', e, true))
467+
}
468+
/>
469+
</Field>
470+
471+
<Field>
472+
<FieldLabel htmlFor="validation" version="v2">
473+
Validation (Regex)
474+
</FieldLabel>
475+
<Tooltip content={'Define the validation for the field.'} position="right">
476+
<Icon icon="Question" size="small" version="v2" className="Help" />
477+
</Tooltip>
478+
<TextInput
479+
type="text"
480+
value={toggleStates?.validationRegex}
481+
placeholder="Enter value"
482+
version="v2"
483+
onChange={
484+
handleOnChange &&
485+
((e: React.ChangeEvent<HTMLInputElement>) =>
486+
handleOnChange('validationRegex', e, true))
487+
}
488+
/>
489+
</Field>
490+
</>
491+
)}
483492

484493
{props?.fieldtype === 'Link' && (
485494
<>
@@ -491,8 +500,7 @@ const AdvancePropertise = (props: SchemaProps) => {
491500
content={
492501
'Set a default field value for this field. The value will appear by default while creating an entry for this content type.'
493502
}
494-
position="right"
495-
>
503+
position="right">
496504
<Icon icon="Question" size="small" version="v2" className="Help" />
497505
</Tooltip>
498506
</div>
@@ -540,13 +548,11 @@ const AdvancePropertise = (props: SchemaProps) => {
540548
<Radio
541549
label={'True'}
542550
checked={toggleStates?.default_value === true}
543-
onChange={() => handleRadioChange('default_value', true)}
544-
></Radio>
551+
onChange={() => handleRadioChange('default_value', true)}></Radio>
545552
<Radio
546553
label={'False'}
547554
checked={toggleStates?.default_value === false}
548-
onChange={() => handleRadioChange('default_value', false)}
549-
></Radio>
555+
onChange={() => handleRadioChange('default_value', false)}></Radio>
550556
</div>
551557
</Field>
552558
)}
@@ -564,19 +570,25 @@ const AdvancePropertise = (props: SchemaProps) => {
564570
setReferencedCT(selectedOptions);
565571
const referencedArray = selectedOptions?.map((item: optionsType) => item?.value);
566572

573+
setToggleStates((prevStates) => ({
574+
...prevStates,
575+
referenedItems: referencedArray
576+
}));
577+
567578
props?.updateFieldSettings(
568579
props?.rowId,
569580
{
570581
...props?.value,
582+
mandatory: toggleStates?.mandatory,
583+
nonLocalizable: toggleStates?.nonLocalizable,
571584
validationRegex: toggleStates?.validationRegex ?? '',
572-
referenedItems: referencedArray // <-- update only this property!
585+
referenedItems: referencedArray
573586
},
574587
true,
575588
props?.data?.contentstackFieldUid
576589
);
577590
}}
578-
options={
579-
option}
591+
options={option}
580592
placeholder="Add Content Type(s)"
581593
version="v2"
582594
isSearchable={true}
@@ -595,54 +607,56 @@ const AdvancePropertise = (props: SchemaProps) => {
595607
<div className="options-class">
596608
{(props?.fieldtype === 'HTML Rich text Editor' ||
597609
props?.fieldtype === 'JSON Rich Text Editor') && (
598-
<>
599-
<div className="ToggleWrap">
600-
<ToggleSwitch
601-
label="Embed Object(s)"
602-
labelColor="primary"
603-
labelPosition="right"
604-
checked={(ctValue?.length ?? 0) > 0 || toggleStates?.embedObject}
605-
onChange={
606-
handleToggleChange &&
607-
((e: React.MouseEvent<HTMLElement>) =>
608-
handleToggleChange(
609-
'embedObject',
610-
(e.target as HTMLInputElement)?.checked,
611-
true
612-
))
613-
}
614-
/>
615-
</div>
610+
<>
611+
<div className="ToggleWrap">
612+
<ToggleSwitch
613+
label="Embed Object(s)"
614+
labelColor="primary"
615+
labelPosition="right"
616+
checked={(ctValue?.length ?? 0) > 0 || toggleStates?.embedObject}
617+
onChange={
618+
handleToggleChange &&
619+
((e: React.MouseEvent<HTMLElement>) =>
620+
handleToggleChange(
621+
'embedObject',
622+
(e.target as HTMLInputElement)?.checked,
623+
true
624+
))
625+
}
626+
/>
627+
</div>
616628

617-
{((ctValue && ctValue?.length > 0) || toggleStates?.embedObject) && (
618-
<Select
619-
value={ctValue}
620-
isMulti={true}
621-
onChange={(selectedOptions: ContentTypeOption[]) => {
622-
setCTValue(selectedOptions);
623-
const embedObject = selectedOptions?.map((item: optionsType) => item?.value); // Update the state with the selected options
624-
props?.updateFieldSettings(
625-
props?.rowId,
626-
{
627-
validationRegex: toggleStates?.validationRegex ?? '',
628-
embedObjects: embedObject
629-
},
630-
true,
631-
props?.data?.contentstackFieldUid
632-
);
633-
}}
634-
options={option}
635-
placeholder="Select Content Types"
636-
version="v2"
637-
isSearchable={true}
638-
isClearable={true}
639-
width="350px"
640-
maxMenuHeight={200}
629+
{((ctValue && ctValue?.length > 0) || toggleStates?.embedObject) && (
630+
<Select
631+
value={ctValue}
632+
isMulti={true}
633+
onChange={(selectedOptions: ContentTypeOption[]) => {
634+
setCTValue(selectedOptions);
635+
const embedObject = selectedOptions?.map(
636+
(item: optionsType) => item?.value
637+
); // Update the state with the selected options
638+
props?.updateFieldSettings(
639+
props?.rowId,
640+
{
641+
validationRegex: toggleStates?.validationRegex ?? '',
642+
embedObjects: embedObject
643+
},
644+
true,
645+
props?.data?.contentstackFieldUid
646+
);
647+
}}
648+
options={option}
649+
placeholder="Select Content Types"
650+
version="v2"
651+
isSearchable={true}
652+
isClearable={true}
653+
width="350px"
654+
maxMenuHeight={200}
641655
// isSelectAll={true}
642-
/>
643-
)}
644-
</>
645-
)}
656+
/>
657+
)}
658+
</>
659+
)}
646660
{props?.fieldtype !== 'Global' && props?.fieldtype !== 'Boolean' && (
647661
<div className="ToggleWrap">
648662
<ToggleSwitch
@@ -667,8 +681,7 @@ const AdvancePropertise = (props: SchemaProps) => {
667681
<Tooltip
668682
content="Available only if there are multiple languages in your stack"
669683
position="top"
670-
disabled={props?.isLocalised}
671-
>
684+
disabled={props?.isLocalised}>
672685
<ToggleSwitch
673686
id="disabled"
674687
disabled={!props?.isLocalised}

‎ui/src/components/ContentMapper/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -860,7 +860,7 @@ const ContentMapper = forwardRef(({ handleStepChange }: contentMapperProps, ref:
860860
if (row?.uid === rowId && row?.contentstackFieldUid === rowContentstackFieldUid) {
861861
const updatedRow = {
862862
...row,
863-
refrenceTo: updatedSettings?.referenedItems,
863+
refrenceTo: updatedSettings?.referenedItems || row?.refrenceTo,
864864
advanced: { ...row?.advanced, ...updatedSettings }
865865
};
866866
return updatedRow;

‎upload-api/migration-aem/libs/contentType/components/SearchComponent.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export class SearchComponent extends ContentstackComponent {
4545
uid: key,
4646
displayName: key,
4747
description: "",
48+
isNumber: true,
4849
defaultValue: ""
4950
}).toContentstack(),
5051
object: () => null,

‎upload-api/migration-aem/libs/contentType/components/TeaserComponent.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ export class TeaserComponent extends ContentstackComponent {
6565
uid: key,
6666
displayName: key,
6767
description: "",
68+
isNumber: true,
6869
defaultValue: ""
6970
}).toContentstack(),
7071
object: (key, schemaProp) => {

0 commit comments

Comments
 (0)