@firecms/collection_editor 3.0.0-canary.2 → 3.0.0-canary.200
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 +2 -2
- package/dist/index.d.ts +1 -0
- package/dist/index.es.js +10058 -4774
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +10751 -3
- package/dist/index.umd.js.map +1 -1
- package/dist/types/collection_editor_controller.d.ts +4 -2
- package/dist/types/collection_inference.d.ts +1 -1
- package/dist/types/config_permissions.d.ts +2 -2
- package/dist/types/persisted_collection.d.ts +2 -2
- 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/CollectionDetailsForm.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/LayoutModeSwitch.d.ts +5 -0
- package/dist/ui/collection_editor/PropertyEditView.d.ts +8 -0
- 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/import/CollectionEditorImportMapping.d.ts +7 -0
- package/dist/ui/collection_editor/properties/MarkdownPropertyField.d.ts +4 -0
- package/dist/ui/collection_editor/properties/StringPropertyField.d.ts +1 -1
- package/dist/ui/collection_editor/utils/supported_fields.d.ts +2 -2
- package/dist/useCollectionEditorPlugin.d.ts +8 -11
- package/dist/utils/collections.d.ts +6 -0
- package/package.json +25 -36
- package/src/ConfigControllerProvider.tsx +68 -65
- package/src/index.ts +1 -0
- package/src/types/collection_editor_controller.tsx +7 -4
- package/src/types/collection_inference.ts +1 -1
- package/src/types/config_permissions.ts +1 -1
- package/src/types/persisted_collection.ts +3 -4
- package/src/ui/CollectionViewHeaderAction.tsx +10 -5
- package/src/ui/EditorCollectionAction.tsx +10 -63
- package/src/ui/EditorCollectionActionStart.tsx +88 -0
- package/src/ui/HomePageEditorCollectionAction.tsx +19 -13
- package/src/ui/MissingReferenceWidget.tsx +2 -1
- package/src/ui/NewCollectionButton.tsx +12 -10
- package/src/ui/NewCollectionCard.tsx +3 -3
- package/src/ui/PropertyAddColumnComponent.tsx +11 -6
- package/src/ui/collection_editor/CollectionDetailsForm.tsx +105 -29
- package/src/ui/collection_editor/CollectionEditorDialog.tsx +114 -43
- package/src/ui/collection_editor/CollectionEditorWelcomeView.tsx +8 -7
- package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx +39 -36
- package/src/ui/collection_editor/EntityCustomViewsSelectDialog.tsx +6 -5
- package/src/ui/collection_editor/EnumForm.tsx +12 -9
- package/src/ui/collection_editor/GetCodeDialog.tsx +56 -26
- package/src/ui/collection_editor/LayoutModeSwitch.tsx +54 -0
- package/src/ui/collection_editor/PropertyEditView.tsx +258 -80
- package/src/ui/collection_editor/PropertyFieldPreview.tsx +7 -10
- package/src/ui/collection_editor/PropertyTree.tsx +9 -7
- package/src/ui/collection_editor/SubcollectionsEditTab.tsx +26 -19
- package/src/ui/collection_editor/UnsavedChangesDialog.tsx +3 -5
- package/src/ui/collection_editor/import/CollectionEditorImportDataPreview.tsx +26 -9
- package/src/ui/collection_editor/import/CollectionEditorImportMapping.tsx +42 -9
- package/src/ui/collection_editor/properties/BlockPropertyField.tsx +32 -20
- package/src/ui/collection_editor/properties/CommonPropertyFields.tsx +7 -8
- package/src/ui/collection_editor/properties/DateTimePropertyField.tsx +55 -49
- package/src/ui/collection_editor/properties/EnumPropertyField.tsx +3 -1
- package/src/ui/collection_editor/properties/MapPropertyField.tsx +10 -10
- package/src/ui/collection_editor/properties/MarkdownPropertyField.tsx +139 -0
- package/src/ui/collection_editor/properties/ReferencePropertyField.tsx +5 -4
- package/src/ui/collection_editor/properties/RepeatPropertyField.tsx +0 -1
- package/src/ui/collection_editor/properties/StoragePropertyField.tsx +34 -19
- package/src/ui/collection_editor/properties/StringPropertyField.tsx +1 -10
- package/src/ui/collection_editor/properties/UrlPropertyField.tsx +1 -0
- package/src/ui/collection_editor/properties/validation/StringPropertyValidation.tsx +3 -4
- package/src/ui/collection_editor/properties/validation/ValidationPanel.tsx +2 -2
- package/src/ui/collection_editor/templates/pages_template.ts +1 -6
- package/src/ui/collection_editor/utils/supported_fields.tsx +3 -3
- package/src/useCollectionEditorPlugin.tsx +35 -36
- package/src/utils/collections.ts +36 -0
- package/dist/ui/RootCollectionSuggestions.d.ts +0 -3
- package/dist/ui/collection_editor/PropertySelectItem.d.ts +0 -8
- package/dist/ui/collection_editor/properties/FieldHelperView.d.ts +0 -4
- package/src/ui/RootCollectionSuggestions.tsx +0 -63
- package/src/ui/collection_editor/PropertySelectItem.tsx +0 -32
- package/src/ui/collection_editor/properties/FieldHelperView.tsx +0 -13
|
@@ -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 { CloudUploadIcon, DebouncedTextField, ExpandablePanel, 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-surface-500">
|
|
58
|
+
<CloudUploadIcon/>
|
|
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
|
+
}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Field, getIn, useFormex } from "@firecms/formex";
|
|
3
|
-
import { IconForView, NumberProperty, StringProperty, useNavigationController } from "@firecms/core";
|
|
3
|
+
import { FieldCaption, IconForView, NumberProperty, StringProperty, useNavigationController } from "@firecms/core";
|
|
4
4
|
import { CircularProgress, Select, SelectGroup, SelectItem, Typography, } from "@firecms/ui";
|
|
5
|
-
import { FieldHelperView } from "./FieldHelperView";
|
|
6
5
|
|
|
7
6
|
export function ReferencePropertyField({
|
|
8
7
|
existing,
|
|
@@ -90,6 +89,8 @@ export function CollectionsSelect({
|
|
|
90
89
|
value={value ?? ""}
|
|
91
90
|
position={"item-aligned"}
|
|
92
91
|
name={pathPath}
|
|
92
|
+
size={"large"}
|
|
93
|
+
fullWidth={true}
|
|
93
94
|
onChange={handleChange}
|
|
94
95
|
label={"Target collection"}
|
|
95
96
|
renderValue={(selected) => {
|
|
@@ -152,10 +153,10 @@ export function CollectionsSelect({
|
|
|
152
153
|
|
|
153
154
|
</Select>
|
|
154
155
|
|
|
155
|
-
<
|
|
156
|
+
<FieldCaption>
|
|
156
157
|
You can only edit the reference collection upon field
|
|
157
158
|
creation.
|
|
158
|
-
</
|
|
159
|
+
</FieldCaption>
|
|
159
160
|
</>
|
|
160
161
|
);
|
|
161
162
|
}
|
|
@@ -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
|
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import {
|
|
3
3
|
Button,
|
|
4
|
-
|
|
4
|
+
CloudUploadIcon,
|
|
5
5
|
DebouncedTextField,
|
|
6
6
|
ExpandablePanel,
|
|
7
|
-
FileUploadIcon,
|
|
8
7
|
MultiSelect,
|
|
9
8
|
MultiSelectItem,
|
|
10
9
|
Typography
|
|
@@ -44,11 +43,13 @@ export function StoragePropertyField({
|
|
|
44
43
|
|
|
45
44
|
const metadata = `${baseStoragePath}.metadata`;
|
|
46
45
|
const fileName = `${baseStoragePath}.fileName`;
|
|
46
|
+
const maxSize = `${baseStoragePath}.maxSize`;
|
|
47
47
|
const storagePath = `${baseStoragePath}.storagePath`;
|
|
48
48
|
const storeUrl = `${baseStoragePath}.storeUrl`;
|
|
49
49
|
|
|
50
50
|
const fileNameValue = getIn(values, fileName) ?? "{rand}_{file}";
|
|
51
51
|
const storagePathValue = getIn(values, storagePath) ?? "/";
|
|
52
|
+
const maxSizeValue = getIn(values, maxSize);
|
|
52
53
|
|
|
53
54
|
const storedValue = getIn(values, acceptedFiles);
|
|
54
55
|
const fileTypesValue: string[] | undefined = Array.isArray(storedValue) ? storedValue : undefined;
|
|
@@ -56,10 +57,10 @@ export function StoragePropertyField({
|
|
|
56
57
|
|
|
57
58
|
const handleTypesChange = (value: string[]) => {
|
|
58
59
|
if (!value) setFieldValue(acceptedFiles, undefined);
|
|
59
|
-
else if (value.includes("all")) setFieldValue(acceptedFiles, undefined);
|
|
60
|
-
else if (value.length >= Object.keys(fileTypes).length) setFieldValue(acceptedFiles, undefined);
|
|
61
|
-
else if (allFileTypesSelected)
|
|
62
|
-
|
|
60
|
+
// else if (value.includes("all")) setFieldValue(acceptedFiles, undefined);
|
|
61
|
+
// else if (value.length >= Object.keys(fileTypes).length) setFieldValue(acceptedFiles, undefined);
|
|
62
|
+
// else if (allFileTypesSelected)
|
|
63
|
+
// setFieldValue(acceptedFiles, Object.keys(fileTypes).filter((v) => !value.includes(v)));
|
|
63
64
|
else setFieldValue(acceptedFiles, value);
|
|
64
65
|
};
|
|
65
66
|
|
|
@@ -73,8 +74,8 @@ export function StoragePropertyField({
|
|
|
73
74
|
|
|
74
75
|
<ExpandablePanel
|
|
75
76
|
title={
|
|
76
|
-
<div className="flex flex-row text-
|
|
77
|
-
<
|
|
77
|
+
<div className="flex flex-row text-surface-500">
|
|
78
|
+
<CloudUploadIcon/>
|
|
78
79
|
<Typography variant={"subtitle2"}
|
|
79
80
|
className="ml-2">
|
|
80
81
|
File upload config
|
|
@@ -87,10 +88,12 @@ export function StoragePropertyField({
|
|
|
87
88
|
<div className={"col-span-12"}>
|
|
88
89
|
|
|
89
90
|
<MultiSelect
|
|
91
|
+
className={"w-full"}
|
|
92
|
+
placeholder={"All file types allowed"}
|
|
90
93
|
disabled={disabled}
|
|
91
94
|
name={acceptedFiles}
|
|
92
95
|
value={fileTypesValue ?? []}
|
|
93
|
-
|
|
96
|
+
onValueChange={handleTypesChange}
|
|
94
97
|
label={allFileTypesSelected ? undefined : "Allowed file types"}
|
|
95
98
|
renderValues={(selected) => {
|
|
96
99
|
if (!selected || selected.length === 0) return "All file types allowed";
|
|
@@ -99,21 +102,15 @@ export function StoragePropertyField({
|
|
|
99
102
|
.join(", ");
|
|
100
103
|
}}>
|
|
101
104
|
|
|
102
|
-
<MultiSelectItem key={"all"} value={"all"} className={"flex items-center gap-2"}>
|
|
103
|
-
<Checkbox
|
|
104
|
-
checked={!fileTypesValue}/>
|
|
105
|
-
All
|
|
106
|
-
</MultiSelectItem>
|
|
107
|
-
|
|
108
105
|
{Object.entries(fileTypes).map(([value, label]) => (
|
|
109
106
|
<MultiSelectItem key={value} value={value} className={"flex items-center gap-2"}>
|
|
110
|
-
|
|
111
|
-
|
|
107
|
+
{/*<Checkbox*/}
|
|
108
|
+
{/* checked={allFileTypesSelected || fileTypesValue.indexOf(value) > -1}/>*/}
|
|
112
109
|
<div className={"flex-grow"}>
|
|
113
110
|
{label}
|
|
114
111
|
</div>
|
|
115
112
|
<Button size={"small"}
|
|
116
|
-
variant={"
|
|
113
|
+
variant={"text"}
|
|
117
114
|
onClick={(e) => {
|
|
118
115
|
e.preventDefault();
|
|
119
116
|
e.stopPropagation();
|
|
@@ -161,7 +158,10 @@ export function StoragePropertyField({
|
|
|
161
158
|
|
|
162
159
|
<Field name={storeUrl}
|
|
163
160
|
type="checkbox">
|
|
164
|
-
{({
|
|
161
|
+
{({
|
|
162
|
+
field,
|
|
163
|
+
form
|
|
164
|
+
}: FormexFieldProps) => {
|
|
165
165
|
return <SwitchControl
|
|
166
166
|
label={"Save URL instead of storage path"}
|
|
167
167
|
disabled={existing || disabled}
|
|
@@ -178,6 +178,21 @@ export function StoragePropertyField({
|
|
|
178
178
|
You can only change this prop upon creation.
|
|
179
179
|
</Typography>
|
|
180
180
|
</div>
|
|
181
|
+
|
|
182
|
+
<div className={"col-span-12"}>
|
|
183
|
+
<DebouncedTextField name={maxSize}
|
|
184
|
+
type={"number"}
|
|
185
|
+
label={"Max size (in bytes)"}
|
|
186
|
+
size={"small"}
|
|
187
|
+
value={maxSizeValue !== undefined && maxSizeValue !== null ? maxSizeValue.toString() : ""}
|
|
188
|
+
onChange={(e) => {
|
|
189
|
+
const value = e.target.value;
|
|
190
|
+
if (value === "") setFieldValue(maxSize, undefined);
|
|
191
|
+
else setFieldValue(maxSize, parseInt(value));
|
|
192
|
+
}}
|
|
193
|
+
/>
|
|
194
|
+
</div>
|
|
195
|
+
|
|
181
196
|
</div>
|
|
182
197
|
</ExpandablePanel>
|
|
183
198
|
|
|
@@ -10,7 +10,7 @@ export function StringPropertyField({
|
|
|
10
10
|
disabled,
|
|
11
11
|
showErrors
|
|
12
12
|
}: {
|
|
13
|
-
widgetId: "text_field" | "multiline" | "
|
|
13
|
+
widgetId: "text_field" | "multiline" | "email";
|
|
14
14
|
disabled: boolean;
|
|
15
15
|
showErrors: boolean;
|
|
16
16
|
}) {
|
|
@@ -42,15 +42,6 @@ export function StringPropertyField({
|
|
|
42
42
|
trim={true}
|
|
43
43
|
uppercase={true}
|
|
44
44
|
showErrors={showErrors}/>}
|
|
45
|
-
{widgetId === "markdown" &&
|
|
46
|
-
<StringPropertyValidation disabled={disabled}
|
|
47
|
-
length={true}
|
|
48
|
-
lowercase={true}
|
|
49
|
-
max={true}
|
|
50
|
-
min={true}
|
|
51
|
-
trim={true}
|
|
52
|
-
uppercase={true}
|
|
53
|
-
showErrors={showErrors}/>}
|
|
54
45
|
|
|
55
46
|
{widgetId === "email" &&
|
|
56
47
|
<StringPropertyValidation disabled={disabled}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
|
|
3
3
|
import { Field, FormexFieldProps, getIn, useFormex } from "@firecms/formex";
|
|
4
|
-
import { serializeRegExp } from "@firecms/core";
|
|
4
|
+
import { FieldCaption, serializeRegExp } from "@firecms/core";
|
|
5
5
|
import { DebouncedTextField, } from "@firecms/ui";
|
|
6
6
|
import { GeneralPropertyValidation } from "./GeneralPropertyValidation";
|
|
7
|
-
import { FieldHelperView } from "../FieldHelperView";
|
|
8
7
|
import { SwitchControl } from "../../SwitchControl";
|
|
9
8
|
|
|
10
9
|
export function StringPropertyValidation({
|
|
@@ -140,9 +139,9 @@ export function StringPropertyValidation({
|
|
|
140
139
|
disabled={disabled}
|
|
141
140
|
value={matchesStringValue}
|
|
142
141
|
error={Boolean(matchesError)}/>
|
|
143
|
-
<
|
|
142
|
+
<FieldCaption error={Boolean(matchesError)}>
|
|
144
143
|
{matchesError ? "Not a valid regexp" : "e.g. /^\\d+$/ for digits only"}
|
|
145
|
-
</
|
|
144
|
+
</FieldCaption>
|
|
146
145
|
</div>}
|
|
147
146
|
|
|
148
147
|
</div>
|
|
@@ -10,9 +10,9 @@ export function ValidationPanel({
|
|
|
10
10
|
<ExpandablePanel
|
|
11
11
|
initiallyExpanded={false}
|
|
12
12
|
asField={true}
|
|
13
|
-
|
|
13
|
+
innerClassName="p-4"
|
|
14
14
|
title={
|
|
15
|
-
<div className="flex flex-row text-
|
|
15
|
+
<div className="flex flex-row text-surface-500">
|
|
16
16
|
<RuleIcon/>
|
|
17
17
|
<Typography variant={"subtitle2"}
|
|
18
18
|
className="ml-2">
|
|
@@ -19,7 +19,7 @@ export const pagesCollectionTemplate: EntityCollection = {
|
|
|
19
19
|
validation: {
|
|
20
20
|
required: true,
|
|
21
21
|
unique: true,
|
|
22
|
-
matches:
|
|
22
|
+
matches: "^[a-z0-9]+(?:-[a-z0-9]+)*$",
|
|
23
23
|
matchesMessage: "Must be lowercase, alphanumeric, and hyphenated"
|
|
24
24
|
}
|
|
25
25
|
},
|
|
@@ -178,11 +178,6 @@ export const pagesCollectionTemplate: EntityCollection = {
|
|
|
178
178
|
name: "Is Published",
|
|
179
179
|
columnWidth: 100,
|
|
180
180
|
description: "Should this page be live on the site?"
|
|
181
|
-
},
|
|
182
|
-
author_uid: {
|
|
183
|
-
dataType: "reference",
|
|
184
|
-
name: "Author",
|
|
185
|
-
path: "users"
|
|
186
181
|
}
|
|
187
182
|
}
|
|
188
183
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { DEFAULT_FIELD_CONFIGS,
|
|
1
|
+
import { DEFAULT_FIELD_CONFIGS, PropertyConfigId, PropertyConfig } from "@firecms/core";
|
|
2
2
|
|
|
3
|
-
export const supportedFieldsIds:
|
|
3
|
+
export const supportedFieldsIds: PropertyConfigId[] = [
|
|
4
4
|
"text_field",
|
|
5
5
|
"multiline",
|
|
6
6
|
"markdown",
|
|
@@ -24,6 +24,6 @@ export const supportedFieldsIds: FieldConfigId[] = [
|
|
|
24
24
|
];
|
|
25
25
|
|
|
26
26
|
export const supportedFields: Record<string, PropertyConfig> = Object.entries(DEFAULT_FIELD_CONFIGS)
|
|
27
|
-
.filter(([id]) => supportedFieldsIds.includes(id as
|
|
27
|
+
.filter(([id]) => supportedFieldsIds.includes(id as PropertyConfigId))
|
|
28
28
|
.map(([id, config]) => ({ [id]: config }))
|
|
29
29
|
.reduce((a, b) => ({ ...a, ...b }), {});
|
|
@@ -4,18 +4,18 @@ import { ConfigControllerProvider } from "./ConfigControllerProvider";
|
|
|
4
4
|
import { CollectionEditorPermissionsBuilder } from "./types/config_permissions";
|
|
5
5
|
import { EditorCollectionAction } from "./ui/EditorCollectionAction";
|
|
6
6
|
import { HomePageEditorCollectionAction } from "./ui/HomePageEditorCollectionAction";
|
|
7
|
-
import { NewCollectionCard } from "./ui/NewCollectionCard";
|
|
8
7
|
import { PersistedCollection } from "./types/persisted_collection";
|
|
9
8
|
import { CollectionInference } from "./types/collection_inference";
|
|
10
9
|
import { CollectionsConfigController } from "./types/config_controller";
|
|
11
|
-
import { RootCollectionSuggestions } from "./ui/RootCollectionSuggestions";
|
|
12
10
|
import { CollectionViewHeaderAction } from "./ui/CollectionViewHeaderAction";
|
|
13
11
|
import { PropertyAddColumnComponent } from "./ui/PropertyAddColumnComponent";
|
|
14
12
|
import { NewCollectionButton } from "./ui/NewCollectionButton";
|
|
15
|
-
import { AddIcon, Button, Typography } from "@firecms/ui";
|
|
13
|
+
import { AddIcon, Button, Paper, Typography } from "@firecms/ui";
|
|
16
14
|
import { useCollectionEditorController } from "./useCollectionEditorController";
|
|
15
|
+
import { EditorCollectionActionStart } from "./ui/EditorCollectionActionStart";
|
|
16
|
+
import { NewCollectionCard } from "./ui/NewCollectionCard";
|
|
17
17
|
|
|
18
|
-
export interface CollectionConfigControllerProps<EC extends PersistedCollection = PersistedCollection,
|
|
18
|
+
export interface CollectionConfigControllerProps<EC extends PersistedCollection = PersistedCollection, USER extends User = User> {
|
|
19
19
|
|
|
20
20
|
/**
|
|
21
21
|
* Firebase app where the configuration is saved.
|
|
@@ -25,14 +25,14 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
|
|
|
25
25
|
/**
|
|
26
26
|
* Define what actions can be performed on the configuration.
|
|
27
27
|
*/
|
|
28
|
-
configPermissions?: CollectionEditorPermissionsBuilder<
|
|
28
|
+
configPermissions?: CollectionEditorPermissionsBuilder<USER, EC>;
|
|
29
29
|
|
|
30
30
|
/**
|
|
31
31
|
* The words you define here will not be allowed to be used as group
|
|
32
32
|
* names when creating collections.
|
|
33
33
|
* e.g. ["admin"]
|
|
34
34
|
*/
|
|
35
|
-
reservedGroups
|
|
35
|
+
reservedGroups?: string[];
|
|
36
36
|
|
|
37
37
|
extraView?: {
|
|
38
38
|
View: React.ComponentType<{
|
|
@@ -41,18 +41,16 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
|
|
|
41
41
|
icon: React.ReactNode
|
|
42
42
|
};
|
|
43
43
|
|
|
44
|
-
|
|
44
|
+
getPathSuggestions?: (path?: string) => Promise<string[]>;
|
|
45
45
|
|
|
46
46
|
collectionInference?: CollectionInference;
|
|
47
47
|
|
|
48
48
|
getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
|
|
49
49
|
|
|
50
|
-
getUser
|
|
50
|
+
getUser?: (uid: string) => USER | null;
|
|
51
51
|
|
|
52
52
|
onAnalyticsEvent?: (event: string, params?: object) => void;
|
|
53
53
|
|
|
54
|
-
introMode?: "new_project" | "existing_project";
|
|
55
|
-
|
|
56
54
|
}
|
|
57
55
|
|
|
58
56
|
/**
|
|
@@ -62,30 +60,26 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
|
|
|
62
60
|
* @param configPermissions
|
|
63
61
|
* @param reservedGroups
|
|
64
62
|
* @param extraView
|
|
65
|
-
* @param
|
|
63
|
+
* @param getData
|
|
66
64
|
* @param getUser
|
|
67
65
|
* @param collectionInference
|
|
68
66
|
*/
|
|
69
|
-
export function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection,
|
|
67
|
+
export function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, USER extends User = User>
|
|
70
68
|
({
|
|
71
69
|
collectionConfigController,
|
|
72
|
-
introMode,
|
|
73
70
|
configPermissions,
|
|
74
71
|
reservedGroups,
|
|
75
72
|
extraView,
|
|
76
|
-
|
|
73
|
+
getPathSuggestions,
|
|
77
74
|
getUser,
|
|
78
75
|
collectionInference,
|
|
79
76
|
getData,
|
|
80
|
-
onAnalyticsEvent
|
|
81
|
-
}: CollectionConfigControllerProps<EC,
|
|
77
|
+
onAnalyticsEvent,
|
|
78
|
+
}: CollectionConfigControllerProps<EC, USER>): FireCMSPlugin<any, any, PersistedCollection> {
|
|
82
79
|
|
|
83
80
|
return {
|
|
84
|
-
|
|
81
|
+
key: "collection_editor",
|
|
85
82
|
loading: collectionConfigController.loading,
|
|
86
|
-
collections: {
|
|
87
|
-
CollectionActions: EditorCollectionAction
|
|
88
|
-
},
|
|
89
83
|
provider: {
|
|
90
84
|
Component: ConfigControllerProvider,
|
|
91
85
|
props: {
|
|
@@ -94,29 +88,29 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
|
|
|
94
88
|
collectionInference,
|
|
95
89
|
reservedGroups,
|
|
96
90
|
extraView,
|
|
97
|
-
|
|
91
|
+
getPathSuggestions,
|
|
98
92
|
getUser,
|
|
99
93
|
getData,
|
|
100
|
-
onAnalyticsEvent
|
|
94
|
+
onAnalyticsEvent,
|
|
101
95
|
}
|
|
102
96
|
},
|
|
103
97
|
homePage: {
|
|
104
98
|
additionalActions: <NewCollectionButton/>,
|
|
105
|
-
additionalChildrenStart:
|
|
106
|
-
additionalChildrenEnd: <RootCollectionSuggestions introMode={introMode}/>,
|
|
99
|
+
additionalChildrenStart: <IntroWidget/>,
|
|
100
|
+
// additionalChildrenEnd: <RootCollectionSuggestions introMode={introMode}/>,
|
|
107
101
|
CollectionActions: HomePageEditorCollectionAction,
|
|
108
|
-
AdditionalCards:
|
|
102
|
+
AdditionalCards: NewCollectionCard,
|
|
109
103
|
},
|
|
110
104
|
collectionView: {
|
|
105
|
+
CollectionActionsStart: EditorCollectionActionStart,
|
|
106
|
+
CollectionActions: EditorCollectionAction,
|
|
111
107
|
HeaderAction: CollectionViewHeaderAction,
|
|
112
108
|
AddColumnComponent: PropertyAddColumnComponent
|
|
113
109
|
}
|
|
114
110
|
};
|
|
115
111
|
}
|
|
116
112
|
|
|
117
|
-
export function IntroWidget({
|
|
118
|
-
introMode?: "new_project" | "existing_project";
|
|
119
|
-
}) {
|
|
113
|
+
export function IntroWidget({}: {}) {
|
|
120
114
|
|
|
121
115
|
const navigation = useNavigationController();
|
|
122
116
|
if (!navigation.topLevelNavigation)
|
|
@@ -131,17 +125,19 @@ export function IntroWidget({ introMode }: {
|
|
|
131
125
|
}).createCollections
|
|
132
126
|
: true;
|
|
133
127
|
|
|
128
|
+
if (!navigation.initialised || (navigation.collections ?? []).length > 0) {
|
|
129
|
+
return null;
|
|
130
|
+
}
|
|
131
|
+
|
|
134
132
|
return (
|
|
135
|
-
<
|
|
136
|
-
|
|
137
|
-
<Typography
|
|
138
|
-
<Typography
|
|
133
|
+
<Paper
|
|
134
|
+
className={"my-4 px-4 py-6 flex flex-col bg-white dark:bg-surface-accent-800 gap-2"}>
|
|
135
|
+
<Typography variant={"subtitle2"} className={"uppercase"}>No collections found</Typography>
|
|
136
|
+
<Typography>
|
|
139
137
|
Start building collections in FireCMS easily. Map them to your existing
|
|
140
|
-
database data, import from files, or use our templates.
|
|
141
|
-
now.
|
|
138
|
+
database data, import from files, or use our templates.
|
|
142
139
|
</Typography>
|
|
143
140
|
{canCreateCollections && <Button
|
|
144
|
-
className={"mt-4"}
|
|
145
141
|
onClick={collectionEditorController && canCreateCollections
|
|
146
142
|
? () => collectionEditorController.createCollection({
|
|
147
143
|
parentCollectionIds: [],
|
|
@@ -151,6 +147,9 @@ export function IntroWidget({ introMode }: {
|
|
|
151
147
|
: undefined}>
|
|
152
148
|
<AddIcon/>Create your first collection
|
|
153
149
|
</Button>}
|
|
154
|
-
|
|
150
|
+
<Typography color={"secondary"}>
|
|
151
|
+
You can also define collections programmatically.
|
|
152
|
+
</Typography>
|
|
153
|
+
</Paper>
|
|
155
154
|
);
|
|
156
155
|
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import {
|
|
2
|
+
EntityCollection,
|
|
3
|
+
joinCollectionLists,
|
|
4
|
+
makePropertiesEditable,
|
|
5
|
+
ModifyCollectionProps,
|
|
6
|
+
Properties
|
|
7
|
+
} from "@firecms/core";
|
|
8
|
+
import { PersistedCollection } from "../types/persisted_collection";
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Function in charge of merging collections defined in code with those stored in the backend.
|
|
12
|
+
*/
|
|
13
|
+
export const mergeCollections = (baseCollections: EntityCollection[],
|
|
14
|
+
backendCollections: PersistedCollection[] = [],
|
|
15
|
+
modifyCollection?: (props: ModifyCollectionProps) => EntityCollection | void
|
|
16
|
+
) => {
|
|
17
|
+
|
|
18
|
+
const markAsEditable = (c: PersistedCollection) => {
|
|
19
|
+
makePropertiesEditable(c.properties as Properties);
|
|
20
|
+
c.subcollections?.forEach(markAsEditable);
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
backendCollections.forEach(markAsEditable);
|
|
24
|
+
|
|
25
|
+
const result = joinCollectionLists(baseCollections, backendCollections, [], modifyCollection);
|
|
26
|
+
|
|
27
|
+
// sort the collections so they are in the same order as the base collections
|
|
28
|
+
result.sort((a, b) => baseCollections.findIndex(c => c.id === a.id) - baseCollections.findIndex(c => c.id === b.id));
|
|
29
|
+
console.debug("Collections result", {
|
|
30
|
+
baseCollections,
|
|
31
|
+
backendCollections,
|
|
32
|
+
result
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
return result;
|
|
36
|
+
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { PropertyConfig } from "@firecms/core";
|
|
2
|
-
export interface PropertySelectItemProps {
|
|
3
|
-
value: string;
|
|
4
|
-
optionDisabled: boolean;
|
|
5
|
-
propertyConfig: PropertyConfig;
|
|
6
|
-
existing: boolean;
|
|
7
|
-
}
|
|
8
|
-
export declare function PropertySelectItem({ value, optionDisabled, propertyConfig, existing }: PropertySelectItemProps): import("react/jsx-runtime").JSX.Element;
|