@firecms/collection_editor 3.0.0-canary.13 → 3.0.0-canary.131
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +114 -21
- package/dist/ConfigControllerProvider.d.ts +11 -2
- package/dist/index.d.ts +1 -0
- package/dist/index.es.js +4715 -3491
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +6685 -3
- package/dist/index.umd.js.map +1 -1
- package/dist/types/collection_editor_controller.d.ts +14 -2
- package/dist/types/collection_inference.d.ts +1 -1
- package/dist/ui/CollectionViewHeaderAction.d.ts +3 -2
- package/dist/ui/EditorCollectionActionStart.d.ts +2 -0
- package/dist/ui/PropertyAddColumnComponent.d.ts +3 -1
- package/dist/ui/collection_editor/CollectionEditorDialog.d.ts +4 -3
- package/dist/ui/collection_editor/CollectionEditorWelcomeView.d.ts +1 -1
- package/dist/ui/collection_editor/CollectionPropertiesEditorForm.d.ts +1 -1
- package/dist/ui/collection_editor/PropertyTree.d.ts +9 -9
- package/dist/ui/collection_editor/SubcollectionsEditTab.d.ts +1 -1
- package/dist/ui/collection_editor/properties/MarkdownPropertyField.d.ts +4 -0
- package/dist/ui/collection_editor/properties/StringPropertyField.d.ts +1 -1
- package/dist/useCollectionEditorPlugin.d.ts +15 -9
- package/dist/utils/collections.d.ts +6 -0
- package/package.json +20 -34
- package/src/ConfigControllerProvider.tsx +75 -63
- package/src/index.ts +1 -0
- package/src/types/collection_editor_controller.tsx +14 -4
- package/src/types/collection_inference.ts +1 -1
- package/src/ui/CollectionViewHeaderAction.tsx +9 -4
- package/src/ui/EditorCollectionAction.tsx +10 -63
- package/src/ui/EditorCollectionActionStart.tsx +88 -0
- package/src/ui/HomePageEditorCollectionAction.tsx +18 -13
- package/src/ui/NewCollectionButton.tsx +12 -10
- package/src/ui/NewCollectionCard.tsx +3 -3
- package/src/ui/PropertyAddColumnComponent.tsx +9 -4
- package/src/ui/collection_editor/CollectionDetailsForm.tsx +69 -8
- package/src/ui/collection_editor/CollectionEditorDialog.tsx +57 -32
- package/src/ui/collection_editor/CollectionEditorWelcomeView.tsx +6 -5
- package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx +33 -27
- package/src/ui/collection_editor/GetCodeDialog.tsx +15 -3
- package/src/ui/collection_editor/PropertyEditView.tsx +21 -13
- package/src/ui/collection_editor/PropertyFieldPreview.tsx +3 -6
- package/src/ui/collection_editor/PropertySelectItem.tsx +3 -3
- package/src/ui/collection_editor/PropertyTree.tsx +7 -5
- package/src/ui/collection_editor/SubcollectionsEditTab.tsx +26 -19
- package/src/ui/collection_editor/import/CollectionEditorImportDataPreview.tsx +25 -9
- package/src/ui/collection_editor/import/CollectionEditorImportMapping.tsx +9 -7
- package/src/ui/collection_editor/properties/BlockPropertyField.tsx +14 -8
- package/src/ui/collection_editor/properties/DateTimePropertyField.tsx +50 -47
- package/src/ui/collection_editor/properties/EnumPropertyField.tsx +1 -1
- package/src/ui/collection_editor/properties/MapPropertyField.tsx +5 -5
- package/src/ui/collection_editor/properties/MarkdownPropertyField.tsx +139 -0
- package/src/ui/collection_editor/properties/RepeatPropertyField.tsx +0 -1
- package/src/ui/collection_editor/properties/StoragePropertyField.tsx +31 -16
- package/src/ui/collection_editor/properties/StringPropertyField.tsx +1 -10
- package/src/ui/collection_editor/templates/pages_template.ts +1 -6
- package/src/useCollectionEditorPlugin.tsx +37 -27
- package/src/utils/collections.ts +30 -0
- package/dist/ui/RootCollectionSuggestions.d.ts +0 -3
- package/src/ui/RootCollectionSuggestions.tsx +0 -63
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from "react";
|
|
2
2
|
import equal from "react-fast-compare"
|
|
3
3
|
|
|
4
4
|
import {
|
|
@@ -48,7 +48,7 @@ export const PropertyTree = React.memo(
|
|
|
48
48
|
|
|
49
49
|
const propertiesOrder = propertiesOrderProp ?? Object.keys(properties);
|
|
50
50
|
|
|
51
|
-
const onDragEnd =
|
|
51
|
+
const onDragEnd = (result: any) => {
|
|
52
52
|
// dropped outside the list
|
|
53
53
|
if (!result.destination) {
|
|
54
54
|
return;
|
|
@@ -61,7 +61,7 @@ export const PropertyTree = React.memo(
|
|
|
61
61
|
newPropertiesOrder.splice(endIndex, 0, removed);
|
|
62
62
|
if (onPropertyMove)
|
|
63
63
|
onPropertyMove(newPropertiesOrder, namespace);
|
|
64
|
-
}
|
|
64
|
+
}
|
|
65
65
|
|
|
66
66
|
return (
|
|
67
67
|
<>
|
|
@@ -227,7 +227,8 @@ export function PropertyTreeEntry({
|
|
|
227
227
|
<AutoAwesomeIcon size="small" className={"p-2"}/>
|
|
228
228
|
</Tooltip>}
|
|
229
229
|
|
|
230
|
-
{onPropertyRemove && <Tooltip title={"Remove"}
|
|
230
|
+
{onPropertyRemove && <Tooltip title={"Remove"}
|
|
231
|
+
asChild={true}>
|
|
231
232
|
<IconButton size="small"
|
|
232
233
|
color="inherit"
|
|
233
234
|
onClick={() => onPropertyRemove(propertyKey, namespace)}>
|
|
@@ -235,7 +236,8 @@ export function PropertyTreeEntry({
|
|
|
235
236
|
</IconButton>
|
|
236
237
|
</Tooltip>}
|
|
237
238
|
|
|
238
|
-
{onPropertyMove && <Tooltip title={"Move"}
|
|
239
|
+
{onPropertyMove && <Tooltip title={"Move"}
|
|
240
|
+
asChild={true}>
|
|
239
241
|
<IconButton
|
|
240
242
|
component={"span"}
|
|
241
243
|
size="small"
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import {
|
|
3
|
-
|
|
3
|
+
ConfirmationDialog,
|
|
4
4
|
EntityCollection,
|
|
5
5
|
EntityCustomView,
|
|
6
6
|
resolveEntityView,
|
|
@@ -41,7 +41,7 @@ export function SubcollectionsEditTab({
|
|
|
41
41
|
parentCollection?: EntityCollection,
|
|
42
42
|
configController: CollectionsConfigController;
|
|
43
43
|
collectionInference?: CollectionInference;
|
|
44
|
-
getUser
|
|
44
|
+
getUser?: (uid: string) => User | null;
|
|
45
45
|
parentCollectionIds?: string[];
|
|
46
46
|
}) {
|
|
47
47
|
|
|
@@ -61,7 +61,7 @@ export function SubcollectionsEditTab({
|
|
|
61
61
|
setFieldValue,
|
|
62
62
|
} = useFormex<EntityCollection>();
|
|
63
63
|
|
|
64
|
-
const subcollections = collection.subcollections ?? [];
|
|
64
|
+
const [subcollections, setSubcollections] = React.useState<EntityCollection[]>(collection.subcollections ?? []);
|
|
65
65
|
const resolvedEntityViews = values.entityViews?.filter(e => typeof e === "string")
|
|
66
66
|
.map(e => resolveEntityView(e, contextEntityViews))
|
|
67
67
|
.filter(Boolean) as EntityCustomView[] ?? [];
|
|
@@ -95,7 +95,8 @@ export function SubcollectionsEditTab({
|
|
|
95
95
|
</TableCell>
|
|
96
96
|
<TableCell
|
|
97
97
|
align="right">
|
|
98
|
-
<Tooltip title={"Remove"}
|
|
98
|
+
<Tooltip title={"Remove"}
|
|
99
|
+
asChild={true}>
|
|
99
100
|
<IconButton size="small"
|
|
100
101
|
onClick={(e) => {
|
|
101
102
|
e.preventDefault();
|
|
@@ -135,7 +136,7 @@ export function SubcollectionsEditTab({
|
|
|
135
136
|
{totalEntityViews === 0 &&
|
|
136
137
|
<Alert action={<Button variant="text"
|
|
137
138
|
size={"small"}
|
|
138
|
-
href={"https://firecms.co/docs/
|
|
139
|
+
href={"https://firecms.co/docs/cloud/quickstart"}
|
|
139
140
|
component={"a"}
|
|
140
141
|
rel="noopener noreferrer"
|
|
141
142
|
target="_blank">More info</Button>}>
|
|
@@ -157,7 +158,8 @@ export function SubcollectionsEditTab({
|
|
|
157
158
|
</TableCell>
|
|
158
159
|
<TableCell
|
|
159
160
|
align="right">
|
|
160
|
-
<Tooltip title={"Remove"}
|
|
161
|
+
<Tooltip title={"Remove"}
|
|
162
|
+
asChild={true}>
|
|
161
163
|
<IconButton size="small"
|
|
162
164
|
onClick={(e) => {
|
|
163
165
|
e.preventDefault();
|
|
@@ -209,30 +211,32 @@ export function SubcollectionsEditTab({
|
|
|
209
211
|
<div style={{ height: "52px" }}/>
|
|
210
212
|
|
|
211
213
|
{subcollectionToDelete &&
|
|
212
|
-
<
|
|
213
|
-
|
|
214
|
+
<ConfirmationDialog open={Boolean(subcollectionToDelete)}
|
|
215
|
+
onAccept={() => {
|
|
214
216
|
const props = {
|
|
215
217
|
id: subcollectionToDelete,
|
|
216
218
|
parentCollectionIds: [...(parentCollectionIds ?? []), collection.id]
|
|
217
219
|
};
|
|
218
220
|
console.debug("Deleting subcollection", props)
|
|
219
|
-
configController.deleteCollection(props)
|
|
220
|
-
|
|
221
|
+
configController.deleteCollection(props).then(() => {
|
|
222
|
+
setSubcollectionToDelete(undefined);
|
|
223
|
+
setSubcollections(subcollections?.filter(e => e.id !== subcollectionToDelete))
|
|
224
|
+
});
|
|
221
225
|
}}
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
226
|
+
onCancel={() => setSubcollectionToDelete(undefined)}
|
|
227
|
+
title={<>Delete this subcollection?</>}
|
|
228
|
+
body={<> This will <b>not
|
|
225
229
|
delete any data</b>, only
|
|
226
230
|
the collection in the CMS</>}/>}
|
|
227
231
|
{viewToDelete &&
|
|
228
|
-
<
|
|
229
|
-
|
|
232
|
+
<ConfirmationDialog open={Boolean(viewToDelete)}
|
|
233
|
+
onAccept={() => {
|
|
230
234
|
setFieldValue("entityViews", values.entityViews?.filter(e => e !== viewToDelete));
|
|
231
235
|
setViewToDelete(undefined);
|
|
232
236
|
}}
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
237
|
+
onCancel={() => setViewToDelete(undefined)}
|
|
238
|
+
title={<>Remove this view?</>}
|
|
239
|
+
body={<>This will <b>not
|
|
236
240
|
delete any data</b>, only
|
|
237
241
|
the view in the CMS</>}/>}
|
|
238
242
|
|
|
@@ -245,7 +249,10 @@ export function SubcollectionsEditTab({
|
|
|
245
249
|
isNewCollection={false}
|
|
246
250
|
{...currentDialog}
|
|
247
251
|
getUser={getUser}
|
|
248
|
-
handleClose={() => {
|
|
252
|
+
handleClose={(updatedCollection) => {
|
|
253
|
+
if (updatedCollection && !subcollections.map(e => e.id).includes(updatedCollection.id)) {
|
|
254
|
+
setSubcollections([...subcollections, updatedCollection]);
|
|
255
|
+
}
|
|
249
256
|
setCurrentDialog(undefined);
|
|
250
257
|
}}/>
|
|
251
258
|
|
|
@@ -1,21 +1,33 @@
|
|
|
1
|
-
import { convertDataToEntity,
|
|
2
|
-
import { EntityCollectionTable, Properties, useSelectionController } from "@firecms/core";
|
|
3
|
-
import { useEffect } from "react";
|
|
1
|
+
import { convertDataToEntity, ImportConfig } from "@firecms/data_import_export";
|
|
2
|
+
import { CircularProgressCenter, EntityCollectionTable, Properties, useSelectionController } from "@firecms/core";
|
|
3
|
+
import { useEffect, useState } from "react";
|
|
4
4
|
import { Typography } from "@firecms/ui";
|
|
5
5
|
|
|
6
|
-
export function CollectionEditorImportDataPreview({
|
|
6
|
+
export function CollectionEditorImportDataPreview({
|
|
7
|
+
importConfig,
|
|
8
|
+
properties,
|
|
9
|
+
propertiesOrder
|
|
10
|
+
}: {
|
|
7
11
|
importConfig: ImportConfig,
|
|
8
12
|
properties: Properties,
|
|
9
13
|
propertiesOrder: string[]
|
|
10
14
|
}) {
|
|
11
15
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
16
|
+
const [loading, setLoading] = useState<boolean>(false);
|
|
17
|
+
|
|
18
|
+
async function loadEntities() {
|
|
19
|
+
// const propertiesMapping = getPropertiesMapping(importConfig.originProperties, properties, importConfig.headersMapping);
|
|
20
|
+
const mappedData = importConfig.importData.map(d => convertDataToEntity(d, importConfig.idColumn, importConfig.headersMapping, properties, "TEMP_PATH", importConfig.defaultValues));
|
|
15
21
|
importConfig.setEntities(mappedData);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
loadEntities().finally(() => setLoading(false));
|
|
16
26
|
}, []);
|
|
17
27
|
|
|
18
28
|
const selectionController = useSelectionController();
|
|
29
|
+
if (loading)
|
|
30
|
+
return <CircularProgressCenter/>
|
|
19
31
|
|
|
20
32
|
return <EntityCollectionTable
|
|
21
33
|
title={<div>
|
|
@@ -31,7 +43,11 @@ export function CollectionEditorImportDataPreview({ importConfig, properties, pr
|
|
|
31
43
|
filterable={false}
|
|
32
44
|
sortable={false}
|
|
33
45
|
selectionController={selectionController}
|
|
34
|
-
displayedColumnIds={propertiesOrder.map(p => ({
|
|
35
|
-
|
|
46
|
+
displayedColumnIds={propertiesOrder.map(p => ({
|
|
47
|
+
key: p,
|
|
48
|
+
disabled: false
|
|
49
|
+
}))}
|
|
50
|
+
properties={properties}
|
|
51
|
+
enablePopupIcon={false}/>
|
|
36
52
|
|
|
37
53
|
}
|
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
} from "@firecms/data_import_export";
|
|
7
7
|
import { getIn, useFormex } from "@firecms/formex";
|
|
8
8
|
|
|
9
|
-
import {
|
|
9
|
+
import { getFieldConfig, getFieldId, Properties, Property, PropertyConfig, PropertyConfigBadge, } from "@firecms/core";
|
|
10
10
|
import { Container, Select, Tooltip, Typography } from "@firecms/ui";
|
|
11
11
|
import React, { useState } from "react";
|
|
12
12
|
import { OnPropertyChangedParams, PropertyFormDialog, PropertyWithId } from "../PropertyEditView";
|
|
@@ -143,18 +143,20 @@ export function CollectionEditorImportMapping({
|
|
|
143
143
|
<div className={"overflow-auto my-auto"}>
|
|
144
144
|
<Container maxWidth={"6xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
|
|
145
145
|
|
|
146
|
-
<Typography variant="h6" className={"
|
|
146
|
+
<Typography variant="h6" className={"my-4 ml-3.5"}>Data property mapping</Typography>
|
|
147
147
|
|
|
148
|
-
<DataNewPropertiesMapping
|
|
149
|
-
idColumn={importConfig.idColumn}
|
|
150
|
-
originProperties={importConfig.originProperties}
|
|
148
|
+
<DataNewPropertiesMapping importConfig={importConfig}
|
|
151
149
|
destinationProperties={values.properties as Properties}
|
|
152
|
-
onIdPropertyChanged={(value) => importConfig.setIdColumn(value ?? undefined)}
|
|
153
150
|
buildPropertyView={({
|
|
154
151
|
property,
|
|
155
152
|
propertyKey,
|
|
156
|
-
importKey
|
|
153
|
+
importKey,
|
|
154
|
+
isIdColumn
|
|
157
155
|
}) => {
|
|
156
|
+
if (isIdColumn) {
|
|
157
|
+
return <Typography> This column will be used as ID</Typography>
|
|
158
|
+
}
|
|
159
|
+
|
|
158
160
|
return <ImportNewPropertyFieldPreview
|
|
159
161
|
property={property}
|
|
160
162
|
propertyKey={propertyKey}
|
|
@@ -1,12 +1,18 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useState } from "react";
|
|
2
2
|
import { AddIcon, Button, Paper, Typography } from "@firecms/ui";
|
|
3
3
|
import { getIn, useFormex } from "@firecms/formex";
|
|
4
4
|
import { PropertyFormDialog } from "../PropertyEditView";
|
|
5
|
-
import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath } from "../util";
|
|
5
|
+
import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath, namespaceToPropertiesPath } from "../util";
|
|
6
6
|
import { PropertyTree } from "../PropertyTree";
|
|
7
7
|
import { ArrayProperty, Property, PropertyConfig } from "@firecms/core";
|
|
8
8
|
|
|
9
|
-
export function BlockPropertyField({
|
|
9
|
+
export function BlockPropertyField({
|
|
10
|
+
disabled,
|
|
11
|
+
getData,
|
|
12
|
+
allowDataInference,
|
|
13
|
+
propertyConfigs,
|
|
14
|
+
collectionEditable
|
|
15
|
+
}: {
|
|
10
16
|
disabled: boolean;
|
|
11
17
|
getData?: () => Promise<object[]>;
|
|
12
18
|
allowDataInference: boolean;
|
|
@@ -43,20 +49,20 @@ export function BlockPropertyField({ disabled, getData, allowDataInference, prop
|
|
|
43
49
|
const selectedPropertyFullId = selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : undefined;
|
|
44
50
|
const selectedProperty = selectedPropertyFullId ? getIn(values.oneOf?.properties, selectedPropertyFullId.replaceAll(".", ".properties.")) : undefined;
|
|
45
51
|
|
|
46
|
-
const deleteProperty =
|
|
52
|
+
const deleteProperty = (propertyKey?: string, namespace?: string) => {
|
|
47
53
|
const fullId = propertyKey ? getFullId(propertyKey, namespace) : undefined;
|
|
48
54
|
if (!fullId)
|
|
49
55
|
throw Error("collection editor miss config");
|
|
50
56
|
|
|
51
57
|
setFieldValue(`oneOf.${idToPropertiesPath(fullId)}`, undefined, false);
|
|
52
58
|
const propertiesOrderPath = `oneOf.${namespaceToPropertiesOrderPath(namespace)}`;
|
|
53
|
-
const currentPropertiesOrder: string[] = getIn(values, propertiesOrderPath);
|
|
59
|
+
const currentPropertiesOrder: string[] = getIn(values, propertiesOrderPath) ?? Object.keys(getIn(values, namespaceToPropertiesPath(namespace)));
|
|
54
60
|
setFieldValue(propertiesOrderPath, currentPropertiesOrder.filter((p) => p !== propertyKey), false);
|
|
55
61
|
|
|
56
62
|
setPropertyDialogOpen(false);
|
|
57
63
|
setSelectedPropertyKey(undefined);
|
|
58
64
|
setSelectedPropertyNamespace(undefined);
|
|
59
|
-
}
|
|
65
|
+
};
|
|
60
66
|
|
|
61
67
|
const addChildButton = <Button
|
|
62
68
|
autoFocus
|
|
@@ -68,9 +74,9 @@ export function BlockPropertyField({ disabled, getData, allowDataInference, prop
|
|
|
68
74
|
Add property to {values.name ?? "this block"}
|
|
69
75
|
</Button>;
|
|
70
76
|
|
|
71
|
-
const onPropertyMove =
|
|
77
|
+
const onPropertyMove = (propertiesOrder: string[], namespace?: string) => {
|
|
72
78
|
setFieldValue(`oneOf.${namespaceToPropertiesOrderPath(namespace)}`, propertiesOrder, false);
|
|
73
|
-
}
|
|
79
|
+
};
|
|
74
80
|
|
|
75
81
|
return (
|
|
76
82
|
<>
|
|
@@ -26,53 +26,56 @@ export function DateTimePropertyField({ disabled }: {
|
|
|
26
26
|
|
|
27
27
|
return (
|
|
28
28
|
<>
|
|
29
|
-
<div className={"flex flex-col col-span-12"}>
|
|
30
|
-
<
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
{modeError}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
29
|
+
<div className={"flex flex-col col-span-12 gap-2"}>
|
|
30
|
+
<div>
|
|
31
|
+
<Select name={modePath}
|
|
32
|
+
value={modeValue ?? "date"}
|
|
33
|
+
error={Boolean(modeError)}
|
|
34
|
+
onValueChange={(v) => setFieldValue(modePath, v)}
|
|
35
|
+
label={"Mode"}
|
|
36
|
+
renderValue={(v) => {
|
|
37
|
+
switch (v) {
|
|
38
|
+
case "date_time":
|
|
39
|
+
return "Date/Time";
|
|
40
|
+
case "date":
|
|
41
|
+
return "Date";
|
|
42
|
+
default:
|
|
43
|
+
return "";
|
|
44
|
+
}
|
|
45
|
+
}}
|
|
46
|
+
disabled={disabled}>
|
|
47
|
+
<SelectItem value={"date_time"}> Date/Time </SelectItem>
|
|
48
|
+
<SelectItem value={"date"}> Date </SelectItem>
|
|
49
|
+
</Select>
|
|
50
|
+
<FieldCaption error={Boolean(modeError)}>
|
|
51
|
+
{modeError}
|
|
52
|
+
</FieldCaption>
|
|
53
|
+
</div>
|
|
54
|
+
<div>
|
|
55
|
+
<Select name={autoValuePath}
|
|
56
|
+
disabled={disabled}
|
|
57
|
+
value={autoValueValue ?? ""}
|
|
58
|
+
onValueChange={(v) => setFieldValue(autoValuePath, v === "none" ? null : v)}
|
|
59
|
+
renderValue={(v) => {
|
|
60
|
+
switch (v) {
|
|
61
|
+
case "on_create":
|
|
62
|
+
return "On create";
|
|
63
|
+
case "on_update":
|
|
64
|
+
return "On any update";
|
|
65
|
+
default:
|
|
66
|
+
return "None";
|
|
67
|
+
}
|
|
68
|
+
}}
|
|
69
|
+
error={Boolean(autoValueError)}
|
|
70
|
+
label={"Automatic value"}>
|
|
71
|
+
<SelectItem value={"none"}> None </SelectItem>
|
|
72
|
+
<SelectItem value={"on_create"}> On create </SelectItem>
|
|
73
|
+
<SelectItem value={"on_update"}> On any update </SelectItem>
|
|
74
|
+
</Select>
|
|
75
|
+
<FieldCaption error={Boolean(autoValueError)}>
|
|
76
|
+
{autoValueError ?? "Update this field automatically when creating or updating the entity"}
|
|
77
|
+
</FieldCaption>
|
|
78
|
+
</div>
|
|
76
79
|
|
|
77
80
|
</div>
|
|
78
81
|
|
|
@@ -71,7 +71,7 @@ export function EnumPropertyField({
|
|
|
71
71
|
}}
|
|
72
72
|
getData={getData
|
|
73
73
|
? () => getData()
|
|
74
|
-
.then(res => res.map(
|
|
74
|
+
.then(res => res.map(entry => values.id && getIn(entry, values.id)).filter(Boolean))
|
|
75
75
|
: undefined}
|
|
76
76
|
onValuesChanged={onValuesChanged}/>
|
|
77
77
|
</div>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useState } from "react";
|
|
2
2
|
import { FieldCaption, MapProperty, Property, PropertyConfig, } from "@firecms/core";
|
|
3
3
|
import { AddIcon, BooleanSwitchWithLabel, Button, Paper, Typography } from "@firecms/ui";
|
|
4
4
|
import { PropertyFormDialog } from "../PropertyEditView";
|
|
@@ -42,7 +42,7 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
|
|
|
42
42
|
setPropertyDialogOpen(false);
|
|
43
43
|
};
|
|
44
44
|
|
|
45
|
-
const deleteProperty =
|
|
45
|
+
const deleteProperty = (propertyKey?: string, namespace?: string) => {
|
|
46
46
|
const fullId = propertyKey ? getFullId(propertyKey, namespace) : undefined;
|
|
47
47
|
if (!fullId)
|
|
48
48
|
throw Error("collection editor miss config");
|
|
@@ -58,16 +58,16 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
|
|
|
58
58
|
setPropertyDialogOpen(false);
|
|
59
59
|
setSelectedPropertyKey(undefined);
|
|
60
60
|
setSelectedPropertyNamespace(undefined);
|
|
61
|
-
}
|
|
61
|
+
};
|
|
62
62
|
|
|
63
63
|
const selectedPropertyFullId = selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : undefined;
|
|
64
64
|
const selectedProperty = selectedPropertyFullId ? getIn(values.properties, selectedPropertyFullId.replaceAll(".", ".properties.")) : undefined;
|
|
65
65
|
|
|
66
66
|
const empty = !propertiesOrder || propertiesOrder.length < 1;
|
|
67
67
|
|
|
68
|
-
const onPropertyMove =
|
|
68
|
+
const onPropertyMove = (propertiesOrder: string[], namespace?: string) => {
|
|
69
69
|
setFieldValue(namespaceToPropertiesOrderPath(namespace), propertiesOrder, false);
|
|
70
|
-
}
|
|
70
|
+
};
|
|
71
71
|
|
|
72
72
|
return (
|
|
73
73
|
<>
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { StringPropertyValidation } from "./validation/StringPropertyValidation";
|
|
3
|
+
import { ValidationPanel } from "./validation/ValidationPanel";
|
|
4
|
+
import { Field, getIn, useFormex } from "@firecms/formex";
|
|
5
|
+
|
|
6
|
+
import { DebouncedTextField, ExpandablePanel, FileUploadIcon, TextField, Typography } from "@firecms/ui";
|
|
7
|
+
|
|
8
|
+
export function MarkdownPropertyField({
|
|
9
|
+
disabled,
|
|
10
|
+
showErrors
|
|
11
|
+
}: {
|
|
12
|
+
disabled: boolean;
|
|
13
|
+
showErrors: boolean;
|
|
14
|
+
}) {
|
|
15
|
+
|
|
16
|
+
const {
|
|
17
|
+
values,
|
|
18
|
+
setFieldValue
|
|
19
|
+
} = useFormex();
|
|
20
|
+
|
|
21
|
+
const baseStoragePath = "storage";
|
|
22
|
+
|
|
23
|
+
const metadata = `${baseStoragePath}.metadata`;
|
|
24
|
+
const fileName = `${baseStoragePath}.fileName`;
|
|
25
|
+
const maxSize = `${baseStoragePath}.maxSize`;
|
|
26
|
+
const storagePath = `${baseStoragePath}.storagePath`;
|
|
27
|
+
|
|
28
|
+
const fileNameValue = getIn(values, fileName) ?? "{rand}_{file}";
|
|
29
|
+
const storagePathValue = getIn(values, storagePath) ?? "/";
|
|
30
|
+
const maxSizeValue = getIn(values, maxSize);
|
|
31
|
+
|
|
32
|
+
const hasFilenameCallback = typeof fileNameValue === "function";
|
|
33
|
+
const hasStoragePathCallback = typeof storagePathValue === "function";
|
|
34
|
+
|
|
35
|
+
return (
|
|
36
|
+
<>
|
|
37
|
+
<div className={"col-span-12"}>
|
|
38
|
+
|
|
39
|
+
<ValidationPanel>
|
|
40
|
+
|
|
41
|
+
<StringPropertyValidation disabled={disabled}
|
|
42
|
+
length={true}
|
|
43
|
+
lowercase={true}
|
|
44
|
+
max={true}
|
|
45
|
+
min={true}
|
|
46
|
+
trim={true}
|
|
47
|
+
uppercase={true}
|
|
48
|
+
showErrors={showErrors}/>
|
|
49
|
+
|
|
50
|
+
</ValidationPanel>
|
|
51
|
+
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<div className={"col-span-12"}>
|
|
55
|
+
<ExpandablePanel
|
|
56
|
+
title={
|
|
57
|
+
<div className="flex flex-row text-gray-500">
|
|
58
|
+
<FileUploadIcon/>
|
|
59
|
+
<Typography variant={"subtitle2"}
|
|
60
|
+
className="ml-2">
|
|
61
|
+
File upload config
|
|
62
|
+
</Typography>
|
|
63
|
+
</div>
|
|
64
|
+
}>
|
|
65
|
+
|
|
66
|
+
<div className={"grid grid-cols-12 gap-2 p-4"}>
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
<div className={"col-span-12"}>
|
|
70
|
+
<Field name={fileName}
|
|
71
|
+
as={DebouncedTextField}
|
|
72
|
+
label={"File name"}
|
|
73
|
+
size={"small"}
|
|
74
|
+
disabled={hasFilenameCallback || disabled}
|
|
75
|
+
value={hasFilenameCallback ? "-" : fileNameValue}
|
|
76
|
+
/>
|
|
77
|
+
</div>
|
|
78
|
+
<div className={"col-span-12"}>
|
|
79
|
+
<Field name={storagePath}
|
|
80
|
+
as={DebouncedTextField}
|
|
81
|
+
label={"Storage path"}
|
|
82
|
+
disabled={hasStoragePathCallback || disabled}
|
|
83
|
+
size={"small"}
|
|
84
|
+
value={hasStoragePathCallback ? "-" : storagePathValue}
|
|
85
|
+
/>
|
|
86
|
+
<Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
|
|
87
|
+
<p>You can use the following placeholders in
|
|
88
|
+
the file name
|
|
89
|
+
and storage path values:</p>
|
|
90
|
+
<ul>
|
|
91
|
+
<li>{"{file} - Full name of the uploaded file"}</li>
|
|
92
|
+
<li>{"{file.name} - Name of the uploaded file without extension"}</li>
|
|
93
|
+
<li>{"{file.ext} - Extension of the uploaded file"}</li>
|
|
94
|
+
<li>{"{entityId} - ID of the entity"}</li>
|
|
95
|
+
<li>{"{propertyKey} - ID of this field"}</li>
|
|
96
|
+
<li>{"{path} - Path of this entity"}</li>
|
|
97
|
+
<li>{"{rand} - Random value used to avoid name collisions"}</li>
|
|
98
|
+
</ul>
|
|
99
|
+
</Typography>
|
|
100
|
+
|
|
101
|
+
<Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
|
|
102
|
+
When using Markdown, the URL of the uploaded files are always saved in the text value
|
|
103
|
+
(not
|
|
104
|
+
the path).
|
|
105
|
+
</Typography>
|
|
106
|
+
</div>
|
|
107
|
+
|
|
108
|
+
<div className={"col-span-12"}>
|
|
109
|
+
<DebouncedTextField name={maxSize}
|
|
110
|
+
type={"number"}
|
|
111
|
+
label={"Max size (in bytes)"}
|
|
112
|
+
size={"small"}
|
|
113
|
+
value={maxSizeValue !== undefined && maxSizeValue !== null ? maxSizeValue.toString() : ""}
|
|
114
|
+
onChange={(e) => {
|
|
115
|
+
const value = e.target.value;
|
|
116
|
+
if (value === "") setFieldValue(maxSize, undefined);
|
|
117
|
+
else setFieldValue(maxSize, parseInt(value));
|
|
118
|
+
}}
|
|
119
|
+
/>
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
</div>
|
|
123
|
+
</ExpandablePanel>
|
|
124
|
+
</div>
|
|
125
|
+
|
|
126
|
+
<div className={"col-span-12"}>
|
|
127
|
+
|
|
128
|
+
<TextField name={"defaultValue"}
|
|
129
|
+
disabled={disabled}
|
|
130
|
+
onChange={(e: any) => {
|
|
131
|
+
setFieldValue("defaultValue", e.target.value === "" ? undefined : e.target.value);
|
|
132
|
+
}}
|
|
133
|
+
label={"Default value"}
|
|
134
|
+
value={getIn(values, "defaultValue") ?? ""}/>
|
|
135
|
+
|
|
136
|
+
</div>
|
|
137
|
+
</>
|
|
138
|
+
);
|
|
139
|
+
}
|
|
@@ -39,7 +39,6 @@ export function RepeatPropertyField({
|
|
|
39
39
|
|
|
40
40
|
const onPropertyChanged = ({ id, property, namespace }:
|
|
41
41
|
{ id?: string, property: Property, namespace?: string }) => {
|
|
42
|
-
console.log("onPropertyChanged", id, property, namespace);
|
|
43
42
|
setFieldValue("of", property);
|
|
44
43
|
};
|
|
45
44
|
|