Skip to content

Commit b35752b

Browse files
fgatti675fgatti675
committed
Updated collection editor property select view
1 parent 12d606b commit b35752b

File tree

3 files changed

+77
-29
lines changed

3 files changed

+77
-29
lines changed

‎packages/collection_editor/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -474,6 +474,7 @@ export function CollectionPropertiesEditorForm({
474474
getData={getData}
475475
propertyConfigs={propertyConfigs}
476476
collectionEditable={collectionEditable}
477+
onCancel={closePropertyDialog}
477478
onOkClicked={asDialog
478479
? closePropertyDialog
479480
: undefined

‎packages/collection_editor/src/ui/collection_editor/PropertyEditView.tsx

Lines changed: 74 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ export type PropertyFormProps = {
7474
property?: Property;
7575
onPropertyChanged?: (params: OnPropertyChangedParams) => void;
7676
onPropertyChangedImmediate?: boolean;
77+
onDismiss?: () => void;
7778
onDelete?: (id?: string, namespace?: string) => void;
7879
onError?: (id: string, namespace?: string, error?: Record<string, any>) => void;
7980
initialErrors?: Record<string, any>;
@@ -101,6 +102,7 @@ export const PropertyForm = React.memo(
101102
property,
102103
onPropertyChanged,
103104
onPropertyChangedImmediate = true,
105+
onDismiss,
104106
onDelete,
105107
onError,
106108
initialErrors,
@@ -218,6 +220,7 @@ export const PropertyForm = React.memo(
218220
includeIdAndTitle={includeIdAndName}
219221
propertyNamespace={propertyNamespace}
220222
onError={onError}
223+
onDismiss={onDismiss}
221224
showErrors={forceShowErrors || formexController.submitCount > 0}
222225
existing={existingProperty}
223226
autoUpdateId={autoUpdateId}
@@ -273,6 +276,7 @@ export function PropertyFormDialog({
273276
}}>
274277
<DialogContent>
275278
<PropertyForm {...formProps}
279+
onDismiss={onCancel}
276280
onPropertyChanged={(params) => {
277281
onPropertyChanged?.(params);
278282
onOkClicked?.();
@@ -317,6 +321,7 @@ function PropertyEditFormFields({
317321
onPropertyChanged,
318322
onDelete,
319323
propertyNamespace,
324+
onDismiss,
320325
onError,
321326
showErrors,
322327
disabled,
@@ -331,6 +336,7 @@ function PropertyEditFormFields({
331336
autoUpdateId?: boolean;
332337
autoOpenTypeSelect: boolean;
333338
propertyNamespace?: string;
339+
onDismiss?: () => void;
334340
onPropertyChanged?: (params: OnPropertyChangedParams) => void;
335341
onDelete?: (id?: string, namespace?: string) => void;
336342
onError?: (id: string, namespace?: string, error?: Record<string, any>) => void;
@@ -493,7 +499,12 @@ function PropertyEditFormFields({
493499
value={selectedFieldConfigId as PropertyConfigId}
494500
onValueChange={(value) => onWidgetSelectChanged(value as PropertyConfigId)}
495501
open={selectOpen}
496-
onOpenChange={setSelectOpen}
502+
onOpenChange={(open, hasValue) => {
503+
if (!hasValue) {
504+
onDismiss?.();
505+
}
506+
setSelectOpen(open);
507+
}}
497508
disabled={disabled}
498509
showError={Boolean(selectedWidgetError)}
499510
existing={existing}
@@ -576,7 +587,7 @@ function validateName(value: string) {
576587
return error;
577588
}
578589

579-
const WIDGET_TYPE_MAP = {
590+
const WIDGET_TYPE_MAP: Record<PropertyConfigId, string> = {
580591
text_field: "Text",
581592
multiline: "Text",
582593
markdown: "Text",
@@ -594,10 +605,10 @@ const WIDGET_TYPE_MAP = {
594605
multi_references: "Reference",
595606
date_time: "Date",
596607
group: "Group",
597-
key_value: "Key-Value",
598-
repeat: "Repeat",
608+
key_value: "Group",
609+
repeat: "Array",
599610
custom_array: "Array",
600-
block: "Block"
611+
block: "Group"
601612
};
602613

603614
function WidgetSelectView({
@@ -616,8 +627,8 @@ function WidgetSelectView({
616627
value?: PropertyConfigId,
617628
onValueChange: (value: string) => void,
618629
showError: boolean,
619-
open: any,
620-
onOpenChange: any,
630+
open: boolean,
631+
onOpenChange: (open: boolean, hasValue: boolean) => void,
621632
disabled: boolean,
622633
existing: boolean,
623634
propertyConfigs: Record<string, PropertyConfig>,
@@ -626,21 +637,38 @@ function WidgetSelectView({
626637

627638
const allSupportedFields = Object.entries(supportedFields).concat(Object.entries(propertyConfigs));
628639

629-
const displayedWidgets = inArray
640+
const displayedWidgets = (inArray
630641
? allSupportedFields.filter(([_, propertyConfig]) => !isPropertyBuilder(propertyConfig.property) && propertyConfig.property?.dataType !== "array")
631-
: allSupportedFields;
642+
: allSupportedFields)
643+
.map(([key, propertyConfig]) => ({
644+
[key]: propertyConfig
645+
}))
646+
.reduce((a, b) => {
647+
return {
648+
...a,
649+
...b
650+
}
651+
}, {});
632652

633653
const key = value;
634654
const propertyConfig = key ? (DEFAULT_FIELD_CONFIGS[key] ?? propertyConfigs[key]) : undefined;
635655
const baseProperty = propertyConfig?.property;
636656
const baseFieldConfig = baseProperty && !isPropertyBuilder(baseProperty) ? getFieldConfig(baseProperty, propertyConfigs) : undefined;
637657
const computedFieldConfig = baseFieldConfig && propertyConfig ? mergeDeep(baseFieldConfig, propertyConfig) : propertyConfig;
638658

659+
const groups: string[] = [...new Set(Object.keys(displayedWidgets).map(key => {
660+
const group = WIDGET_TYPE_MAP[key as PropertyConfigId];
661+
if (group) {
662+
return group;
663+
}
664+
return "Custom/Other"
665+
}))];
666+
639667
return <>
640668
<div
641669
onClick={() => {
642670
if (!disabled) {
643-
onOpenChange(!open);
671+
onOpenChange(!open, Boolean(value));
644672
}
645673
}}
646674
className={cls(
@@ -666,24 +694,46 @@ function WidgetSelectView({
666694
</div>}
667695
</div>
668696
<Dialog open={open}
669-
onOpenChange={onOpenChange}
697+
onOpenChange={(open) => onOpenChange(open, Boolean(value))}
670698
maxWidth={"4xl"}>
671699
<DialogTitle>
672700
Select a property widget
673701
</DialogTitle>
674702
<DialogContent>
675-
<div className={"grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-2 mt-4"}>
676-
{displayedWidgets.map(([key, propertyConfig]) => {
677-
return <WidgetSelectViewItem
678-
key={key}
679-
initialProperty={initialProperty}
680-
onClick={() => {
681-
onValueChange(key);
682-
onOpenChange(false);
683-
}}
684-
propertyConfig={propertyConfig}
685-
existing={existing}/>;
703+
<div>
704+
{groups.map(group => {
705+
return <div key={group} className={"mt-4"}>
706+
<Typography variant={"label"}>{group}</Typography>
707+
<div className={"grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-2 mt-4"}>
708+
{Object.entries(displayedWidgets).map(([key, propertyConfig]) => {
709+
const groupKey = WIDGET_TYPE_MAP[key as PropertyConfigId];
710+
if (groupKey === group) {
711+
return <WidgetSelectViewItem
712+
key={key}
713+
initialProperty={initialProperty}
714+
onClick={() => {
715+
onValueChange(key);
716+
onOpenChange(false, true);
717+
}}
718+
propertyConfig={propertyConfig}
719+
existing={existing}/>;
720+
}
721+
return null;
722+
})}
723+
</div>
724+
</div>;
686725
})}
726+
{/*{displayedWidgets.map(([key, propertyConfig]) => {*/}
727+
{/* return <WidgetSelectViewItem*/}
728+
{/* key={key}*/}
729+
{/* initialProperty={initialProperty}*/}
730+
{/* onClick={() => {*/}
731+
{/* onValueChange(key);*/}
732+
{/* onOpenChange(false);*/}
733+
{/* }}*/}
734+
{/* propertyConfig={propertyConfig}*/}
735+
{/* existing={existing}/>;*/}
736+
{/*})}*/}
687737
</div>
688738
</DialogContent>
689739
</Dialog>
@@ -709,15 +759,13 @@ export function WidgetSelectViewItem({
709759

710760
return <Card
711761
onClick={onClick}
712-
// disabled={optionDisabled}
713762
className={"flex flex-row items-center px-4 py-2"}>
714763
<div
715764
className={cls(
716765
"flex flex-row items-center text-base min-h-[48px]",
717-
// optionDisabled ? "w-full" : ""
718766
)}>
719767
<div className={"mr-8"}>
720-
<PropertyConfigBadge propertyConfig={propertyConfig} disabled={!shouldWarnChangingDataType}/>
768+
<PropertyConfigBadge propertyConfig={propertyConfig} disabled={shouldWarnChangingDataType}/>
721769
</div>
722770
<div>
723771
<div className={"flex flex-row gap-2 items-center"}>
@@ -728,12 +776,11 @@ export function WidgetSelectViewItem({
728776
<Typography
729777
color={shouldWarnChangingDataType ? "secondary" : undefined}>{propertyConfig.name}</Typography>
730778
</div>
779+
731780
<Typography variant={"caption"}
732781
color={"secondary"}
733782
className={"max-w-sm"}>
734783
{propertyConfig.description}
735-
736-
{/*{existing && optionDisabled ? "You can only switch to widgets that use the same data type" : propertyConfig.description}*/}
737784
</Typography>
738785

739786
</div>

‎packages/firecms_core/src/components/PropertyConfigBadge.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ export function PropertyConfigBadge({
99
propertyConfig: PropertyConfig | undefined,
1010
disabled?: boolean
1111
}): React.ReactNode {
12-
const classes = "h-8 w-8 p-1 rounded-full shadow text-white bg-gray-400 dark:bg-gray-600";
12+
const classes = "h-8 w-8 p-1 rounded-full shadow text-white " + (disabled ? "bg-gray-400 dark:bg-gray-600" : "");
1313

1414
const defaultPropertyConfig = typeof propertyConfig?.property === "object" ? getDefaultFieldConfig(propertyConfig.property) : undefined;
1515

1616
return <div
1717
className={classes}
1818
style={{
19-
background: disabled ? (propertyConfig?.color ?? defaultPropertyConfig?.color ?? "#888") : undefined
19+
background: !disabled ? (propertyConfig?.color ?? defaultPropertyConfig?.color ?? "#888") : undefined
2020
}}>
2121
{propertyConfig?.Icon ? getIconForWidget(propertyConfig, "medium") : getIconForWidget(defaultPropertyConfig, "medium")}
2222
</div>

0 commit comments

Comments
 (0)