@micro-cms/admin-ui 0.0.3 → 0.0.5
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/dist/AutoForm.js +1 -1
- package/dist/AutoTable.d.ts +9 -1
- package/dist/AutoTable.js +40 -16
- package/package.json +1 -1
package/dist/AutoForm.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useState, useEffect } from 'react';
|
|
2
2
|
import { ComponentRegistry, DefaultTextInput } from './registry';
|
|
3
3
|
export const AutoForm = ({ entity, initialData = {}, onSubmit }) => {
|
|
4
|
-
const [formData, setFormData] = useState(initialData);
|
|
4
|
+
const [formData, setFormData] = useState(initialData || {});
|
|
5
5
|
// Update form data if initialData changes
|
|
6
6
|
useEffect(() => {
|
|
7
7
|
setFormData(initialData || {});
|
package/dist/AutoTable.d.ts
CHANGED
|
@@ -1,10 +1,18 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Entity } from '@micro-cms/types';
|
|
3
|
+
interface PaginatedResponse<T = any> {
|
|
4
|
+
data: T[];
|
|
5
|
+
total: number;
|
|
6
|
+
page: number;
|
|
7
|
+
limit: number;
|
|
8
|
+
}
|
|
3
9
|
interface AutoTableProps {
|
|
4
10
|
entity: Entity;
|
|
5
|
-
data: any[];
|
|
11
|
+
data: any[] | PaginatedResponse;
|
|
6
12
|
onEdit?: (item: any) => void;
|
|
7
13
|
onDelete?: (item: any) => void;
|
|
14
|
+
onPageChange?: (page: number) => void;
|
|
15
|
+
onLimitChange?: (limit: number) => void;
|
|
8
16
|
}
|
|
9
17
|
export declare const AutoTable: React.FC<AutoTableProps>;
|
|
10
18
|
export {};
|
package/dist/AutoTable.js
CHANGED
|
@@ -1,21 +1,45 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export const AutoTable = ({ entity, data, onEdit, onDelete }) => {
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
export const AutoTable = ({ entity, data, onEdit, onDelete, onPageChange, onLimitChange }) => {
|
|
3
|
+
const isPaginated = !Array.isArray(data) && data && 'total' in data;
|
|
4
|
+
const items = isPaginated ? data.data : data;
|
|
5
|
+
const total = isPaginated ? data.total : items.length;
|
|
6
|
+
const page = isPaginated ? data.page : 1;
|
|
7
|
+
const limit = isPaginated ? data.limit : items.length;
|
|
8
|
+
if (!items || items.length === 0) {
|
|
9
|
+
return React.createElement("div", { className: "p-4 text-gray-500 text-center border rounded bg-white" },
|
|
5
10
|
"No records found for ",
|
|
6
11
|
entity.name);
|
|
7
12
|
}
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
:
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
onDelete && (React.createElement("
|
|
13
|
+
const totalPages = Math.ceil(total / limit);
|
|
14
|
+
return (React.createElement("div", { className: "space-y-4" },
|
|
15
|
+
React.createElement("div", { className: "overflow-x-auto border rounded bg-white shadow-sm" },
|
|
16
|
+
React.createElement("table", { className: "min-w-full divide-y divide-gray-200" },
|
|
17
|
+
React.createElement("thead", { className: "bg-gray-50" },
|
|
18
|
+
React.createElement("tr", null,
|
|
19
|
+
entity.fields.map((field) => (React.createElement("th", { key: field.name, className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" }, field.label || field.name))),
|
|
20
|
+
(onEdit || onDelete) && React.createElement("th", { className: "px-6 py-3 text-right" }, "Actions"))),
|
|
21
|
+
React.createElement("tbody", { className: "bg-white divide-y divide-gray-200" }, items.map((item, idx) => (React.createElement("tr", { key: item.id || idx, className: "hover:bg-gray-50 transition-colors" },
|
|
22
|
+
entity.fields.map((field) => (React.createElement("td", { key: field.name, className: "px-6 py-4 whitespace-nowrap text-sm text-gray-900" }, typeof item[field.name] === 'boolean'
|
|
23
|
+
? item[field.name] ? '✅' : '❌'
|
|
24
|
+
: String(item[field.name] ?? '-')))),
|
|
25
|
+
(onEdit || onDelete) && (React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm font-medium" },
|
|
26
|
+
onEdit && (React.createElement("button", { onClick: () => onEdit(item), className: "text-blue-600 hover:text-blue-900 mr-4 font-semibold" }, "Edit")),
|
|
27
|
+
onDelete && (React.createElement("button", { onClick: () => onDelete(item), className: "text-red-600 hover:text-red-900 font-semibold" }, "Delete")))))))))),
|
|
28
|
+
isPaginated && (React.createElement("div", { className: "flex items-center justify-between px-4 py-3 bg-white border rounded shadow-sm" },
|
|
29
|
+
React.createElement("div", { className: "text-sm text-gray-700" },
|
|
30
|
+
"Showing ",
|
|
31
|
+
React.createElement("span", { className: "font-medium" }, (page - 1) * limit + 1),
|
|
32
|
+
" to ",
|
|
33
|
+
React.createElement("span", { className: "font-medium" }, Math.min(page * limit, total)),
|
|
34
|
+
" of ",
|
|
35
|
+
React.createElement("span", { className: "font-medium" }, total),
|
|
36
|
+
" results"),
|
|
37
|
+
React.createElement("div", { className: "flex gap-2" },
|
|
38
|
+
React.createElement("button", { onClick: () => onPageChange?.(page - 1), disabled: page <= 1, className: "px-3 py-1 border rounded text-sm disabled:opacity-50 hover:bg-gray-50" }, "Previous"),
|
|
39
|
+
React.createElement("div", { className: "flex items-center px-2 text-sm" },
|
|
40
|
+
"Page ",
|
|
41
|
+
page,
|
|
42
|
+
" of ",
|
|
43
|
+
totalPages),
|
|
44
|
+
React.createElement("button", { onClick: () => onPageChange?.(page + 1), disabled: page >= totalPages, className: "px-3 py-1 border rounded text-sm disabled:opacity-50 hover:bg-gray-50" }, "Next"))))));
|
|
21
45
|
};
|