@nestledjs/data-browser 0.1.17 → 0.1.20

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.
Files changed (15) hide show
  1. package/lib/components/RelationFieldWrapper.js +35 -22
  2. package/lib/components/filters/DateRangeFilter.js +39 -48
  3. package/lib/components/filters/NumberRangeFilter.js +43 -48
  4. package/lib/components/filters/RelationComponents.js +96 -102
  5. package/lib/components/filters/RelationFilterField.js +50 -47
  6. package/lib/components/shared/AdminBreadcrumbs.js +41 -45
  7. package/lib/components/shared/AdminErrorStates.js +47 -93
  8. package/lib/components/shared/AdminStatusDisplay.js +29 -36
  9. package/lib/context/AdminDataContext.js +10 -14
  10. package/lib/layouts/AdminDataLayout.js +90 -177
  11. package/lib/pages/AdminDataCreatePage.js +141 -267
  12. package/lib/pages/AdminDataEditPage.js +258 -460
  13. package/lib/pages/AdminDataIndexPage.js +31 -55
  14. package/lib/pages/AdminDataListPage.js +583 -597
  15. package/package.json +3 -3
package/lib/pages/AdminDataCreatePage.js CHANGED
@@ -1,4 +1,5 @@
1
- import React, { useState, useMemo, useEffect } from "react";
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { useState, useMemo, useEffect } from "react";
2
3
  import { gql } from "@apollo/client";
3
4
  import { useMutation } from "@apollo/client/react";
4
5
  import { ExclamationCircleIcon, CheckCircleIcon } from "@heroicons/react/24/outline";
@@ -7,7 +8,6 @@ import { Form } from "@nestledjs/forms";
7
8
  import { useAdminDataContext } from "../context/AdminDataContext.js";
8
9
  import { useParams, Link, useNavigate } from "react-router";
9
10
  import { getAdminDocuments, buildFormFields, cleanFormInput } from "../utils/graphql-utils.js";
10
- var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/data-browser/src/lib/pages/AdminDataCreatePage.tsx";
11
11
  function toReadableText(text) {
12
12
  return text.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (str) => str.toUpperCase());
13
13
  }
@@ -19,14 +19,8 @@ const toKebabCase = (str) => {
19
19
  return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
20
20
  };
21
21
  function AdminDataCreatePage() {
22
- const {
23
- dataType
24
- } = useParams();
25
- const {
26
- databaseModels,
27
- basePath = "/admin/data",
28
- formTheme
29
- } = useAdminDataContext();
22
+ const { dataType } = useParams();
23
+ const { databaseModels, basePath = "/admin/data", formTheme } = useAdminDataContext();
30
24
  const findModelByName = (name) => {
31
25
  return databaseModels.find((model2) => model2.name === name);
32
26
  };
@@ -42,102 +36,45 @@ function AdminDataCreatePage() {
42
36
  const model = validatedDataType ? findModelByName(validatedDataType) : null;
43
37
  const shouldShowModelNotFound = validatedDataType && true && !model;
44
38
  if (shouldShowUnauthorized) {
45
- return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col justify-center py-12", __self: this, __source: {
46
- fileName: _jsxFileName,
47
- lineNumber: 90,
48
- columnNumber: 7
49
- } }, /* @__PURE__ */ React.createElement("div", { className: "mt-8 mx-auto w-full max-w-md", __self: this, __source: {
50
- fileName: _jsxFileName,
51
- lineNumber: 91,
52
- columnNumber: 9
53
- } }, /* @__PURE__ */ React.createElement("div", { className: "bg-white dark:bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10", __self: this, __source: {
54
- fileName: _jsxFileName,
55
- lineNumber: 92,
56
- columnNumber: 11
57
- } }, /* @__PURE__ */ React.createElement("div", { className: "text-center", __self: this, __source: {
58
- fileName: _jsxFileName,
59
- lineNumber: 93,
60
- columnNumber: 13
61
- } }, /* @__PURE__ */ React.createElement(ExclamationCircleIcon, { className: "mx-auto h-12 w-12 text-red-400", __self: this, __source: {
62
- fileName: _jsxFileName,
63
- lineNumber: 94,
64
- columnNumber: 15
65
- } }), /* @__PURE__ */ React.createElement("h2", { className: "mt-4 text-lg font-medium text-gray-900 dark:text-gray-100", __self: this, __source: {
66
- fileName: _jsxFileName,
67
- lineNumber: 95,
68
- columnNumber: 15
69
- } }, "Unauthorized"), /* @__PURE__ */ React.createElement("p", { className: "mt-2 text-sm text-gray-600 dark:text-gray-400", __self: this, __source: {
70
- fileName: _jsxFileName,
71
- lineNumber: 96,
72
- columnNumber: 15
73
- } }, "Invalid data type or insufficient permissions."), /* @__PURE__ */ React.createElement("div", { className: "mt-6", __self: this, __source: {
74
- fileName: _jsxFileName,
75
- lineNumber: 99,
76
- columnNumber: 15
77
- } }, /* @__PURE__ */ React.createElement(Link, { to: basePath, className: "w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-web hover:bg-green-web-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-web", __self: this, __source: {
78
- fileName: _jsxFileName,
79
- lineNumber: 100,
80
- columnNumber: 17
81
- } }, "Return to Data Browser"))))));
39
+ return /* @__PURE__ */ jsx("div", { className: "flex flex-col justify-center py-12", children: /* @__PURE__ */ jsx("div", { className: "mt-8 mx-auto w-full max-w-md", children: /* @__PURE__ */ jsx("div", { className: "bg-white dark:bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
40
+ /* @__PURE__ */ jsx(ExclamationCircleIcon, { className: "mx-auto h-12 w-12 text-red-400" }),
41
+ /* @__PURE__ */ jsx("h2", { className: "mt-4 text-lg font-medium text-gray-900 dark:text-gray-100", children: "Unauthorized" }),
42
+ /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-600 dark:text-gray-400", children: "Invalid data type or insufficient permissions." }),
43
+ /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsx(
44
+ Link,
45
+ {
46
+ to: basePath,
47
+ className: "w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-web hover:bg-green-web-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-web",
48
+ children: "Return to Data Browser"
49
+ }
50
+ ) })
51
+ ] }) }) }) });
82
52
  }
83
53
  if (shouldShowModelNotFound) {
84
- return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col justify-center py-12", __self: this, __source: {
85
- fileName: _jsxFileName,
86
- lineNumber: 142,
87
- columnNumber: 7
88
- } }, /* @__PURE__ */ React.createElement("div", { className: "mt-8 mx-auto w-full max-w-md", __self: this, __source: {
89
- fileName: _jsxFileName,
90
- lineNumber: 143,
91
- columnNumber: 9
92
- } }, /* @__PURE__ */ React.createElement("div", { className: "bg-white dark:bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10", __self: this, __source: {
93
- fileName: _jsxFileName,
94
- lineNumber: 144,
95
- columnNumber: 11
96
- } }, /* @__PURE__ */ React.createElement("div", { className: "text-center", __self: this, __source: {
97
- fileName: _jsxFileName,
98
- lineNumber: 145,
99
- columnNumber: 13
100
- } }, /* @__PURE__ */ React.createElement(ExclamationCircleIcon, { className: "mx-auto h-12 w-12 text-yellow-400", __self: this, __source: {
101
- fileName: _jsxFileName,
102
- lineNumber: 146,
103
- columnNumber: 15
104
- } }), /* @__PURE__ */ React.createElement("h2", { className: "mt-4 text-lg font-medium text-gray-900 dark:text-gray-100", __self: this, __source: {
105
- fileName: _jsxFileName,
106
- lineNumber: 147,
107
- columnNumber: 15
108
- } }, "Model Not Found"), /* @__PURE__ */ React.createElement("p", { className: "mt-2 text-sm text-gray-600 dark:text-gray-400", __self: this, __source: {
109
- fileName: _jsxFileName,
110
- lineNumber: 148,
111
- columnNumber: 15
112
- } }, 'The data model for "', validatedDataType, '" could not be found.'), /* @__PURE__ */ React.createElement("div", { className: "mt-6", __self: this, __source: {
113
- fileName: _jsxFileName,
114
- lineNumber: 151,
115
- columnNumber: 15
116
- } }, /* @__PURE__ */ React.createElement(Link, { to: basePath, className: "w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-web hover:bg-green-web-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-web", __self: this, __source: {
117
- fileName: _jsxFileName,
118
- lineNumber: 152,
119
- columnNumber: 17
120
- } }, "Return to Data Browser"))))));
54
+ return /* @__PURE__ */ jsx("div", { className: "flex flex-col justify-center py-12", children: /* @__PURE__ */ jsx("div", { className: "mt-8 mx-auto w-full max-w-md", children: /* @__PURE__ */ jsx("div", { className: "bg-white dark:bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
55
+ /* @__PURE__ */ jsx(ExclamationCircleIcon, { className: "mx-auto h-12 w-12 text-yellow-400" }),
56
+ /* @__PURE__ */ jsx("h2", { className: "mt-4 text-lg font-medium text-gray-900 dark:text-gray-100", children: "Model Not Found" }),
57
+ /* @__PURE__ */ jsxs("p", { className: "mt-2 text-sm text-gray-600 dark:text-gray-400", children: [
58
+ 'The data model for "',
59
+ validatedDataType,
60
+ '" could not be found.'
61
+ ] }),
62
+ /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsx(
63
+ Link,
64
+ {
65
+ to: basePath,
66
+ className: "w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-web hover:bg-green-web-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-web",
67
+ children: "Return to Data Browser"
68
+ }
69
+ ) })
70
+ ] }) }) }) });
121
71
  }
122
- return /* @__PURE__ */ React.createElement(AdminDataCreatePageContent, { model, basePath, formTheme, __self: this, __source: {
123
- fileName: _jsxFileName,
124
- lineNumber: 167,
125
- columnNumber: 10
126
- } });
72
+ return /* @__PURE__ */ jsx(AdminDataCreatePageContent, { model, basePath, formTheme });
127
73
  }
128
- function AdminDataCreatePageContent({
129
- model,
130
- basePath,
131
- formTheme
132
- }) {
74
+ function AdminDataCreatePageContent({ model, basePath, formTheme }) {
133
75
  const navigate = useNavigate();
134
- const {
135
- sdk,
136
- databaseModels
137
- } = useAdminDataContext();
138
- const [submissionState, setSubmissionState] = useState({
139
- status: "idle"
140
- });
76
+ const { sdk, databaseModels } = useAdminDataContext();
77
+ const [submissionState, setSubmissionState] = useState({ status: "idle" });
141
78
  const documents = useMemo(() => {
142
79
  try {
143
80
  return getAdminDocuments(sdk, model);
@@ -157,56 +94,32 @@ function AdminDataCreatePageContent({
157
94
  return null;
158
95
  }
159
96
  }, [documents]);
160
- const [createMutation] = useMutation(CREATE_MUTATION || gql`
97
+ const [createMutation] = useMutation(
98
+ CREATE_MUTATION || gql`
161
99
  mutation PlaceholderCreate {
162
100
  __typename
163
101
  }
164
- `);
102
+ `
103
+ );
165
104
  if (!documents || !CREATE_MUTATION) {
166
- return /* @__PURE__ */ React.createElement("div", { className: "min-h-screen bg-gray-50 dark:bg-gray-900 flex flex-col justify-center py-12 sm:px-6 lg:px-8", __self: this, __source: {
167
- fileName: _jsxFileName,
168
- lineNumber: 220,
169
- columnNumber: 7
170
- } }, /* @__PURE__ */ React.createElement("div", { className: "mt-8 sm:mx-auto sm:w-full sm:max-w-2xl", __self: this, __source: {
171
- fileName: _jsxFileName,
172
- lineNumber: 221,
173
- columnNumber: 9
174
- } }, /* @__PURE__ */ React.createElement("div", { className: "bg-white dark:bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10", __self: this, __source: {
175
- fileName: _jsxFileName,
176
- lineNumber: 222,
177
- columnNumber: 11
178
- } }, /* @__PURE__ */ React.createElement("div", { className: "text-center", __self: this, __source: {
179
- fileName: _jsxFileName,
180
- lineNumber: 223,
181
- columnNumber: 13
182
- } }, /* @__PURE__ */ React.createElement(ExclamationCircleIcon, { className: "mx-auto h-12 w-12 text-red-400", __self: this, __source: {
183
- fileName: _jsxFileName,
184
- lineNumber: 224,
185
- columnNumber: 15
186
- } }), /* @__PURE__ */ React.createElement("h2", { className: "mt-4 text-lg font-medium text-gray-900 dark:text-gray-100", __self: this, __source: {
187
- fileName: _jsxFileName,
188
- lineNumber: 225,
189
- columnNumber: 15
190
- } }, "GraphQL Schema Error"), /* @__PURE__ */ React.createElement("p", { className: "mt-2 text-sm text-gray-600 dark:text-gray-400", __self: this, __source: {
191
- fileName: _jsxFileName,
192
- lineNumber: 226,
193
- columnNumber: 15
194
- } }, "Unable to load GraphQL documents for this model. Please ensure the API server is running and the GraphQL schema is up to date."), /* @__PURE__ */ React.createElement("div", { className: "mt-6", __self: this, __source: {
195
- fileName: _jsxFileName,
196
- lineNumber: 230,
197
- columnNumber: 15
198
- } }, /* @__PURE__ */ React.createElement(Link, { to: basePath, className: "w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-web hover:bg-green-web-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-web", __self: this, __source: {
199
- fileName: _jsxFileName,
200
- lineNumber: 231,
201
- columnNumber: 17
202
- } }, "Return to Data Browser"))))));
105
+ return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-gray-50 dark:bg-gray-900 flex flex-col justify-center py-12 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsx("div", { className: "mt-8 sm:mx-auto sm:w-full sm:max-w-2xl", children: /* @__PURE__ */ jsx("div", { className: "bg-white dark:bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
106
+ /* @__PURE__ */ jsx(ExclamationCircleIcon, { className: "mx-auto h-12 w-12 text-red-400" }),
107
+ /* @__PURE__ */ jsx("h2", { className: "mt-4 text-lg font-medium text-gray-900 dark:text-gray-100", children: "GraphQL Schema Error" }),
108
+ /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-600 dark:text-gray-400", children: "Unable to load GraphQL documents for this model. Please ensure the API server is running and the GraphQL schema is up to date." }),
109
+ /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsx(
110
+ Link,
111
+ {
112
+ to: basePath,
113
+ className: "w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-web hover:bg-green-web-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-web",
114
+ children: "Return to Data Browser"
115
+ }
116
+ ) })
117
+ ] }) }) }) });
203
118
  }
204
119
  const formFields = buildFormFields(sdk, model, "create", void 0, submissionState.status === "loading", basePath, databaseModels);
205
120
  const handleSubmit = async (formData) => {
206
121
  try {
207
- setSubmissionState({
208
- status: "loading"
209
- });
122
+ setSubmissionState({ status: "loading" });
210
123
  const cleanedInput = cleanFormInput(formData, model);
211
124
  const result = await createMutation({
212
125
  variables: {
@@ -237,135 +150,96 @@ function AdminDataCreatePageContent({
237
150
  useEffect(() => {
238
151
  if (submissionState.status === "error") {
239
152
  const timer = setTimeout(() => {
240
- setSubmissionState({
241
- status: "idle"
242
- });
153
+ setSubmissionState({ status: "idle" });
243
154
  }, 5e3);
244
155
  return () => clearTimeout(timer);
245
156
  }
246
157
  }, [submissionState.status]);
247
- return /* @__PURE__ */ React.createElement("div", { className: "space-y-6", __self: this, __source: {
248
- fileName: _jsxFileName,
249
- lineNumber: 299,
250
- columnNumber: 5
251
- } }, /* @__PURE__ */ React.createElement("div", { className: "mb-8", __self: this, __source: {
252
- fileName: _jsxFileName,
253
- lineNumber: 301,
254
- columnNumber: 7
255
- } }, /* @__PURE__ */ React.createElement("nav", { className: "flex mb-6", "aria-label": "Breadcrumb", __self: this, __source: {
256
- fileName: _jsxFileName,
257
- lineNumber: 302,
258
- columnNumber: 11
259
- } }, /* @__PURE__ */ React.createElement("ol", { className: "flex items-center space-x-4", __self: this, __source: {
260
- fileName: _jsxFileName,
261
- lineNumber: 303,
262
- columnNumber: 13
263
- } }, /* @__PURE__ */ React.createElement("li", { __self: this, __source: {
264
- fileName: _jsxFileName,
265
- lineNumber: 304,
266
- columnNumber: 15
267
- } }, /* @__PURE__ */ React.createElement(Link, { to: basePath, className: "text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400", __self: this, __source: {
268
- fileName: _jsxFileName,
269
- lineNumber: 305,
270
- columnNumber: 17
271
- } }, "Data Browser")), /* @__PURE__ */ React.createElement("li", { __self: this, __source: {
272
- fileName: _jsxFileName,
273
- lineNumber: 309,
274
- columnNumber: 15
275
- } }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center", __self: this, __source: {
276
- fileName: _jsxFileName,
277
- lineNumber: 310,
278
- columnNumber: 17
279
- } }, /* @__PURE__ */ React.createElement("svg", { className: "flex-shrink-0 h-5 w-5 text-gray-300 dark:text-gray-600", fill: "currentColor", viewBox: "0 0 20 20", __self: this, __source: {
280
- fileName: _jsxFileName,
281
- lineNumber: 311,
282
- columnNumber: 19
283
- } }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 111.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", clipRule: "evenodd", __self: this, __source: {
284
- fileName: _jsxFileName,
285
- lineNumber: 316,
286
- columnNumber: 21
287
- } })), /* @__PURE__ */ React.createElement(Link, { to: `${basePath}/${toKebabCase(model.pluralName)}`, className: "ml-4 text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400", __self: this, __source: {
288
- fileName: _jsxFileName,
289
- lineNumber: 322,
290
- columnNumber: 19
291
- } }, toReadableText(model.pluralName)))), /* @__PURE__ */ React.createElement("li", { __self: this, __source: {
292
- fileName: _jsxFileName,
293
- lineNumber: 330,
294
- columnNumber: 15
295
- } }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center", __self: this, __source: {
296
- fileName: _jsxFileName,
297
- lineNumber: 331,
298
- columnNumber: 17
299
- } }, /* @__PURE__ */ React.createElement("svg", { className: "flex-shrink-0 h-5 w-5 text-gray-300 dark:text-gray-600", fill: "currentColor", viewBox: "0 0 20 20", __self: this, __source: {
300
- fileName: _jsxFileName,
301
- lineNumber: 332,
302
- columnNumber: 19
303
- } }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 111.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", clipRule: "evenodd", __self: this, __source: {
304
- fileName: _jsxFileName,
305
- lineNumber: 337,
306
- columnNumber: 21
307
- } })), /* @__PURE__ */ React.createElement("span", { className: "ml-4 text-gray-500 dark:text-gray-400", __self: this, __source: {
308
- fileName: _jsxFileName,
309
- lineNumber: 343,
310
- columnNumber: 19
311
- } }, "Create New"))))), /* @__PURE__ */ React.createElement("h1", { className: "mt-4 text-3xl font-bold text-gray-900 dark:text-gray-100", __self: this, __source: {
312
- fileName: _jsxFileName,
313
- lineNumber: 348,
314
- columnNumber: 11
315
- } }, "Create ", toReadableText(model.name))), submissionState.status !== "idle" && /* @__PURE__ */ React.createElement("div", { className: `mb-6 rounded-md p-4 ${submissionState.status === "success" ? "bg-green-50 border border-green-200" : submissionState.status === "error" ? "bg-red-50 border border-red-200" : "bg-blue-50 border border-blue-200"}`, __self: this, __source: {
316
- fileName: _jsxFileName,
317
- lineNumber: 355,
318
- columnNumber: 11
319
- } }, /* @__PURE__ */ React.createElement("div", { className: "flex", __self: this, __source: {
320
- fileName: _jsxFileName,
321
- lineNumber: 364,
322
- columnNumber: 13
323
- } }, /* @__PURE__ */ React.createElement("div", { className: "flex-shrink-0", __self: this, __source: {
324
- fileName: _jsxFileName,
325
- lineNumber: 365,
326
- columnNumber: 15
327
- } }, submissionState.status === "success" ? /* @__PURE__ */ React.createElement(CheckCircleIcon, { className: "h-5 w-5 text-green-400", __self: this, __source: {
328
- fileName: _jsxFileName,
329
- lineNumber: 367,
330
- columnNumber: 19
331
- } }) : submissionState.status === "error" ? /* @__PURE__ */ React.createElement(ExclamationCircleIcon, { className: "h-5 w-5 text-red-400", __self: this, __source: {
332
- fileName: _jsxFileName,
333
- lineNumber: 369,
334
- columnNumber: 19
335
- } }) : /* @__PURE__ */ React.createElement("div", { className: "h-5 w-5 border-2 border-blue-400 border-t-transparent rounded-full animate-spin", __self: this, __source: {
336
- fileName: _jsxFileName,
337
- lineNumber: 371,
338
- columnNumber: 19
339
- } })), /* @__PURE__ */ React.createElement("div", { className: "ml-3", __self: this, __source: {
340
- fileName: _jsxFileName,
341
- lineNumber: 374,
342
- columnNumber: 15
343
- } }, /* @__PURE__ */ React.createElement("p", { className: `text-sm font-medium ${submissionState.status === "success" ? "text-green-800" : submissionState.status === "error" ? "text-red-800" : "text-blue-800"}`, __self: this, __source: {
344
- fileName: _jsxFileName,
345
- lineNumber: 375,
346
- columnNumber: 17
347
- } }, submissionState.status === "loading" ? `Creating ${toReadableText(model.name)}...` : submissionState.message)))), /* @__PURE__ */ React.createElement("div", { className: "bg-white dark:bg-gray-800 shadow-sm rounded-lg", __self: this, __source: {
348
- fileName: _jsxFileName,
349
- lineNumber: 394,
350
- columnNumber: 9
351
- } }, /* @__PURE__ */ React.createElement("div", { className: "px-6 py-8", __self: this, __source: {
352
- fileName: _jsxFileName,
353
- lineNumber: 395,
354
- columnNumber: 11
355
- } }, /* @__PURE__ */ React.createElement(Form, { id: `create-${model.name.toLowerCase()}-form`, fields: formFields, submit: handleSubmit, disabled: submissionState.status === "loading", theme: formTheme, __self: this, __source: {
356
- fileName: _jsxFileName,
357
- lineNumber: 396,
358
- columnNumber: 13
359
- } }))));
158
+ return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
159
+ /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
160
+ /* @__PURE__ */ jsx("nav", { className: "flex mb-6", "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsxs("ol", { className: "flex items-center space-x-4", children: [
161
+ /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, { to: basePath, className: "text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400", children: "Data Browser" }) }),
162
+ /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
163
+ /* @__PURE__ */ jsx(
164
+ "svg",
165
+ {
166
+ className: "flex-shrink-0 h-5 w-5 text-gray-300 dark:text-gray-600",
167
+ fill: "currentColor",
168
+ viewBox: "0 0 20 20",
169
+ children: /* @__PURE__ */ jsx(
170
+ "path",
171
+ {
172
+ fillRule: "evenodd",
173
+ d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 111.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",
174
+ clipRule: "evenodd"
175
+ }
176
+ )
177
+ }
178
+ ),
179
+ /* @__PURE__ */ jsx(
180
+ Link,
181
+ {
182
+ to: `${basePath}/${toKebabCase(model.pluralName)}`,
183
+ className: "ml-4 text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400",
184
+ children: toReadableText(model.pluralName)
185
+ }
186
+ )
187
+ ] }) }),
188
+ /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
189
+ /* @__PURE__ */ jsx(
190
+ "svg",
191
+ {
192
+ className: "flex-shrink-0 h-5 w-5 text-gray-300 dark:text-gray-600",
193
+ fill: "currentColor",
194
+ viewBox: "0 0 20 20",
195
+ children: /* @__PURE__ */ jsx(
196
+ "path",
197
+ {
198
+ fillRule: "evenodd",
199
+ d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 111.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",
200
+ clipRule: "evenodd"
201
+ }
202
+ )
203
+ }
204
+ ),
205
+ /* @__PURE__ */ jsx("span", { className: "ml-4 text-gray-500 dark:text-gray-400", children: "Create New" })
206
+ ] }) })
207
+ ] }) }),
208
+ /* @__PURE__ */ jsxs("h1", { className: "mt-4 text-3xl font-bold text-gray-900 dark:text-gray-100", children: [
209
+ "Create ",
210
+ toReadableText(model.name)
211
+ ] })
212
+ ] }),
213
+ submissionState.status !== "idle" && /* @__PURE__ */ jsx(
214
+ "div",
215
+ {
216
+ className: `mb-6 rounded-md p-4 ${submissionState.status === "success" ? "bg-green-50 border border-green-200" : submissionState.status === "error" ? "bg-red-50 border border-red-200" : "bg-blue-50 border border-blue-200"}`,
217
+ children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
218
+ /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: submissionState.status === "success" ? /* @__PURE__ */ jsx(CheckCircleIcon, { className: "h-5 w-5 text-green-400" }) : submissionState.status === "error" ? /* @__PURE__ */ jsx(ExclamationCircleIcon, { className: "h-5 w-5 text-red-400" }) : /* @__PURE__ */ jsx("div", { className: "h-5 w-5 border-2 border-blue-400 border-t-transparent rounded-full animate-spin" }) }),
219
+ /* @__PURE__ */ jsx("div", { className: "ml-3", children: /* @__PURE__ */ jsx(
220
+ "p",
221
+ {
222
+ className: `text-sm font-medium ${submissionState.status === "success" ? "text-green-800" : submissionState.status === "error" ? "text-red-800" : "text-blue-800"}`,
223
+ children: submissionState.status === "loading" ? `Creating ${toReadableText(model.name)}...` : submissionState.message
224
+ }
225
+ ) })
226
+ ] })
227
+ }
228
+ ),
229
+ /* @__PURE__ */ jsx("div", { className: "bg-white dark:bg-gray-800 shadow-sm rounded-lg", children: /* @__PURE__ */ jsx("div", { className: "px-6 py-8", children: /* @__PURE__ */ jsx(
230
+ Form,
231
+ {
232
+ id: `create-${model.name.toLowerCase()}-form`,
233
+ fields: formFields,
234
+ submit: handleSubmit,
235
+ disabled: submissionState.status === "loading",
236
+ theme: formTheme
237
+ }
238
+ ) }) })
239
+ ] });
360
240
  }
361
- function AdminDataCreateErrorBoundary({
362
- error
363
- }) {
364
- return /* @__PURE__ */ React.createElement(ErrorBoundary, { error, __self: this, __source: {
365
- fileName: _jsxFileName,
366
- lineNumber: 410,
367
- columnNumber: 10
368
- } });
241
+ function AdminDataCreateErrorBoundary({ error }) {
242
+ return /* @__PURE__ */ jsx(ErrorBoundary, { error });
369
243
  }
370
244
  export {
371
245
  AdminDataCreateErrorBoundary,