Skip to content

Commit

Permalink
Allowing making complete collections editable
Browse files Browse the repository at this point in the history
  • Loading branch information
@fgatti675
fgatti675 committed Nov 22, 2023
1 parent aa4e152 commit 1ae6a4c
Show file tree
Hide file tree
Showing 19 changed files with 110 additions and 39 deletions.
4 changes: 2 additions & 2 deletions examples/example_v3/src/collections/products_collection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export const productsCollection = buildCollection<Product>({
icon: "shopping_cart",
description: "List of the products currently sold in our shop",
textSearchEnabled: true,
editable: true,
permissions: ({ authController }) => ({
edit: true,
create: true,
Expand Down Expand Up @@ -84,8 +85,7 @@ export const productsCollection = buildCollection<Product>({
clearable: true,
validation: {
required: true
},
editable: true
}
},
main_image: {
dataType: "string",
Expand Down
21 changes: 17 additions & 4 deletions packages/collection_editor/src/ConfigControllerProvider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,8 +111,11 @@ export const ConfigControllerProvider = React.memo(
editedCollectionPath: string,
fullPath?: string,
parentPathSegments: string[],
collectionEditable: boolean;
}>();

console.log("currentPropertyDialog", currentPropertyDialog);

const defaultConfigPermissions: CollectionEditorPermissionsBuilder = useCallback(() => ({
createCollections: true,
editCollections: true,
Expand Down Expand Up @@ -146,14 +149,14 @@ export const ConfigControllerProvider = React.memo(
editedCollectionPath,
currentPropertiesOrder,
parentPathSegments,
parentCollection
collection
}: {
propertyKey?: string,
property?: Property,
currentPropertiesOrder?: string[],
editedCollectionPath: string,
parentPathSegments: string[],
parentCollection?: EntityCollection
collection: EntityCollection,
}) => {
// namespace is all the path until the last dot
const namespace = propertyKey && propertyKey.includes(".")
Expand All @@ -162,14 +165,15 @@ export const ConfigControllerProvider = React.memo(
const propertyKeyWithoutNamespace = propertyKey && propertyKey.includes(".")
? propertyKey.substring(propertyKey.lastIndexOf(".") + 1)
: propertyKey;
console.log("edit property", propertyKeyWithoutNamespace, collection)
setCurrentPropertyDialog({
propertyKey: propertyKeyWithoutNamespace,
property,
namespace,
currentPropertiesOrder,
editedCollectionPath,
parentPathSegments,
parentCollection
collectionEditable: collection?.editable ?? false
});
}, []);

Expand Down Expand Up @@ -207,6 +211,9 @@ export const ConfigControllerProvider = React.memo(
}
}

console.log("aaa", getData, currentPropertyDialog?.editedCollectionPath);
console.log(currentPropertyDialog)

return (
<ConfigControllerContext.Provider value={collectionConfigController}>
<CollectionEditorContext.Provider
Expand Down Expand Up @@ -249,7 +256,13 @@ export const ConfigControllerProvider = React.memo(
autoUpdateId={!currentPropertyDialog ? false : !currentPropertyDialog?.propertyKey}
autoOpenTypeSelect={!currentPropertyDialog ? false : !currentPropertyDialog?.propertyKey}
inArray={false}
getData={getData && currentDialog?.fullPath ? () => getData(currentDialog.fullPath!) : undefined}
collectionEditable={currentPropertyDialog?.collectionEditable ?? false}
getData={getData && currentPropertyDialog?.editedCollectionPath
? () => {
const resolvedPath = navigation.resolveAliasesFrom(currentPropertyDialog.editedCollectionPath!)
return getData(resolvedPath);
}
: undefined}
onPropertyChanged={({
id,
property
Expand Down
9 changes: 6 additions & 3 deletions packages/collection_editor/src/components/CollectionViewHeaderAction.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { IconButton, ResolvedProperty, SettingsIcon, Tooltip } from "@firecms/core";
import { EntityCollection, IconButton, ResolvedProperty, SettingsIcon, Tooltip } from "@firecms/core";
import React from "react";
import { useCollectionEditorController } from "../useCollectionEditorController";

Expand All @@ -7,13 +7,15 @@ export function CollectionViewHeaderAction({
onHover,
property,
fullPath,
parentPathSegments
parentPathSegments,
collection
}: {
property: ResolvedProperty,
propertyKey: string,
onHover: boolean,
fullPath: string,
parentPathSegments: string[],
collection: EntityCollection;
}) {

const collectionEditorController = useCollectionEditorController();
Expand All @@ -27,7 +29,8 @@ export function CollectionViewHeaderAction({
propertyKey,
property,
editedCollectionPath: fullPath,
parentPathSegments
parentPathSegments,
collection
});
}}
size={"small"}>
Expand Down
3 changes: 2 additions & 1 deletion packages/collection_editor/src/components/PropertyAddColumnComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@ export function PropertyAddColumnComponent({
collectionEditorController.editProperty({
editedCollectionPath: fullPath,
parentPathSegments,
currentPropertiesOrder: getDefaultPropertiesOrder(collection)
currentPropertiesOrder: getDefaultPropertiesOrder(collection),
collection
});
}}>
<AddIcon color={"inherit"}/>
Expand Down
6 changes: 5 additions & 1 deletion packages/collection_editor/src/components/collection_editor/CollectionEditorDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -392,7 +392,8 @@ export function CollectionEditorDialogInternal<M extends {

const path = values.path ?? editedCollectionPath;
const updatedFullPath = fullPath?.includes("/") ? fullPath?.split("/").slice(0, -1).join("/") + "/" + path : path;
const getDataWithPath = updatedFullPath && getData ? () => getData(updatedFullPath) : undefined;
const resolvedPath = navigation.resolveAliasesFrom(updatedFullPath);
const getDataWithPath = resolvedPath && getData ? () => getData(resolvedPath) : undefined;

// eslint-disable-next-line react-hooks/rules-of-hooks
useEffect(() => {
Expand Down Expand Up @@ -430,6 +431,7 @@ export function CollectionEditorDialogInternal<M extends {
})
};

const collectionEditable = collection?.editable || isNewCollection;
return (
<>
{!isNewCollection && <Tabs value={currentView}
Expand Down Expand Up @@ -476,6 +478,7 @@ export function CollectionEditorDialogInternal<M extends {

{currentView === "import_data_mapping" && importConfig &&
<CollectionEditorImportMapping importConfig={importConfig}
collectionEditable={collectionEditable}
customFields={customFields}/>}

{currentView === "import_data_preview" && importConfig &&
Expand Down Expand Up @@ -527,6 +530,7 @@ export function CollectionEditorDialogInternal<M extends {
getData={getDataWithPath}
doCollectionInference={doCollectionInference}
customFields={customFields}
collectionEditable={collectionEditable}
extraIcon={extraView?.icon &&
<IconButton
color={"primary"}
Expand Down
8 changes: 7 additions & 1 deletion ...ges/collection_editor/src/components/collection_editor/CollectionPropertiesEditorForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ type CollectionEditorFormProps = {
getData?: () => Promise<object[]>;
doCollectionInference: (collection: PersistedCollection<any, string>) => Promise<EntityCollection | null> | undefined;
customFields: Record<string, PropertyConfig>;
collectionEditable: boolean;
};

export function CollectionPropertiesEditorForm({
Expand All @@ -55,7 +56,8 @@ export function CollectionPropertiesEditorForm({
getUser,
getData,
doCollectionInference,
customFields
customFields,
collectionEditable
}: CollectionEditorFormProps) {

const {
Expand Down Expand Up @@ -354,6 +356,7 @@ export function CollectionPropertiesEditorForm({
propertiesOrder={usedPropertiesOrder}
onPropertyMove={onPropertyMove}
onPropertyRemove={isNewCollection ? deleteProperty : undefined}
collectionEditable={collectionEditable}
errors={showErrors ? errors : {}}/>
</ErrorBoundary>

Expand Down Expand Up @@ -392,6 +395,7 @@ export function CollectionPropertiesEditorForm({
initialErrors={initialErrors}
getData={getData}
customFields={customFields}
collectionEditable={collectionEditable}
/>}

{!selectedProperty &&
Expand Down Expand Up @@ -426,6 +430,7 @@ export function CollectionPropertiesEditorForm({
initialErrors={initialErrors}
getData={getData}
customFields={customFields}
collectionEditable={collectionEditable}
onOkClicked={asDialog
? closePropertyDialog
: undefined
Expand All @@ -450,6 +455,7 @@ export function CollectionPropertiesEditorForm({
getData={getData}
allowDataInference={!isNewCollection}
customFields={customFields}
collectionEditable={collectionEditable}
existingPropertyKeys={values.propertiesOrder as string[]}/>

</>
Expand Down
14 changes: 8 additions & 6 deletions packages/collection_editor/src/components/collection_editor/EnumForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {
FormikArrayContainer,
IconButton,
ListIcon,
LoadingButton,
Paper,
SettingsIcon,
Typography
Expand Down Expand Up @@ -132,7 +131,8 @@ function EnumFormFields({
};

const inferValues = async () => {

if (!getData)
return;
setInferring(true);
getData?.().then((data) => {
if (!data)
Expand Down Expand Up @@ -169,12 +169,14 @@ function EnumFormFields({
Values
</Typography>
{allowDataInference &&
<LoadingButton loading={inferring}
disabled={disabled || inferring}
variant={"text"} size={"small"} onClick={inferValues}>
<Button loading={inferring}
disabled={disabled || inferring}
variant={"text"}
size={"small"}
onClick={inferValues}>
{inferring ? <CircularProgress size={"small"}/> : <AutoAwesomeIcon/>}
Infer values from data
</LoadingButton>}
</Button>}
</div>

<Paper className="p-4 m-1">
Expand Down
19 changes: 15 additions & 4 deletions packages/collection_editor/src/components/collection_editor/PropertyEditView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import {
isPropertyBuilder,
mergeDeep,
Property,
PropertyConfig,
PropertyConfig, PropertyOrBuilder,
Select,
toSnakeCase,
Typography
Expand Down Expand Up @@ -73,6 +73,7 @@ export type PropertyFormProps = {
getData?: () => Promise<object[]>;
getHelpers?: (formikProps: FormikProps<PropertyWithId>) => void;
customFields: Record<string, PropertyConfig>;
collectionEditable: boolean;
};

export const PropertyForm = React.memo(
Expand All @@ -95,15 +96,17 @@ export const PropertyForm = React.memo(
allowDataInference,
getHelpers,
getData,
customFields
customFields,
collectionEditable
}: PropertyFormProps) {

const initialValue: PropertyWithId = {
id: "",
name: ""
} as PropertyWithId;

const disabled = (property && !editableProperty(property)) ?? false;
const disabled = (Boolean(property && !editableProperty(property)) && !collectionEditable);
console.log("PropertyForm disabled", disabled)

const lastSubmittedProperty = useRef<OnPropertyChangedParams | undefined>(property ? {
id: propertyKey,
Expand Down Expand Up @@ -182,6 +185,7 @@ export const PropertyForm = React.memo(
getData={getData}
allowDataInference={allowDataInference}
customFields={customFields}
collectionEditable={collectionEditable}
{...props}/>;

}}
Expand All @@ -201,6 +205,7 @@ export function PropertyFormDialog({
onOkClicked,
onPropertyChanged,
getData,
collectionEditable,
...formProps
}: PropertyFormProps & {
open?: boolean;
Expand All @@ -224,6 +229,7 @@ export function PropertyFormDialog({
onPropertyChanged?.(params);
onOkClicked?.();
}}
collectionEditable={collectionEditable}
onPropertyChangedImmediate={false}
getHelpers={getHelpers}
getData={getData}
Expand Down Expand Up @@ -271,7 +277,8 @@ function PropertyEditView({
existingPropertyKeys,
getData,
allowDataInference,
customFields
customFields,
collectionEditable
}: {
includeIdAndTitle?: boolean;
existing: boolean;
Expand All @@ -288,6 +295,7 @@ function PropertyEditView({
getData?: () => Promise<object[]>;
allowDataInference: boolean;
customFields: Record<string, PropertyConfig>;
collectionEditable: boolean;
} & FormikProps<PropertyWithId>) {

const [selectOpen, setSelectOpen] = useState(autoOpenTypeSelect);
Expand Down Expand Up @@ -395,10 +403,12 @@ function PropertyEditView({
} else if (selectedFieldConfigId === "group") {
childComponent =
<MapPropertyField disabled={disabled} getData={getData} allowDataInference={allowDataInference}
collectionEditable={collectionEditable}
customFields={customFields}/>;
} else if (selectedFieldConfigId === "block") {
childComponent =
<BlockPropertyField disabled={disabled} getData={getData} allowDataInference={allowDataInference}
collectionEditable={collectionEditable}
customFields={customFields}/>;
} else if (selectedFieldConfigId === "reference") {
childComponent =
Expand All @@ -421,6 +431,7 @@ function PropertyEditView({
getData={getData}
allowDataInference={allowDataInference}
disabled={disabled}
collectionEditable={collectionEditable}
customFields={customFields}/>;
} else if (selectedFieldConfigId === "key_value") {
childComponent =
Expand Down
Loading

0 comments on commit 1ae6a4c

Please sign in to comment.