mirror of
https://github.com/shishantbiswas/bknd.git
synced 2026-03-17 04:46:05 +00:00
public commit
This commit is contained in:
dswbx
136
app/src/ui/routes/data/_data.root.tsx
Normal file
136
app/src/ui/routes/data/_data.root.tsx
Normal file
@@ -0,0 +1,136 @@
|
||||
import { SegmentedControl } from "@mantine/core";
|
||||
import { IconDatabase } from "@tabler/icons-react";
|
||||
import type { Entity, TEntityType } from "data";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { useBknd } from "../../client";
|
||||
import { Empty } from "../../components/display/Empty";
|
||||
import { Link } from "../../components/wouter/Link";
|
||||
import { useBrowserTitle } from "../../hooks/use-browser-title";
|
||||
import * as AppShell from "../../layouts/AppShell/AppShell";
|
||||
import { routes, useNavigate } from "../../lib/routes";
|
||||
|
||||
export function DataRoot({ children }) {
|
||||
// @todo: settings routes should be centralized
|
||||
const {
|
||||
app: { entities }
|
||||
} = useBknd();
|
||||
const entityList: Record<TEntityType, Entity[]> = {
|
||||
regular: [],
|
||||
generated: [],
|
||||
system: []
|
||||
} as const;
|
||||
const [navigate] = useNavigate();
|
||||
const context = window.location.href.match(/\/schema/) ? "schema" : "data";
|
||||
|
||||
for (const entity of entities) {
|
||||
entityList[entity.getType()].push(entity);
|
||||
}
|
||||
|
||||
function handleSegmentChange(value?: string) {
|
||||
if (!value) return;
|
||||
const selected = window.location.href.match(/\/entity\/([^/]+)/)?.[1] || null;
|
||||
switch (value) {
|
||||
case "data":
|
||||
if (selected) {
|
||||
navigate(routes.data.entity.list(selected));
|
||||
} else {
|
||||
navigate(routes.data.root(), { absolute: true });
|
||||
}
|
||||
break;
|
||||
case "schema":
|
||||
if (selected) {
|
||||
navigate(routes.data.schema.entity(selected));
|
||||
} else {
|
||||
navigate(routes.data.schema.root());
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<AppShell.Sidebar>
|
||||
<AppShell.SectionHeader
|
||||
right={
|
||||
<SegmentedControl
|
||||
data={[
|
||||
{ value: "data", label: "Data" },
|
||||
{ value: "schema", label: "Schema" }
|
||||
]}
|
||||
value={context}
|
||||
onChange={handleSegmentChange}
|
||||
/>
|
||||
}
|
||||
>
|
||||
Entities
|
||||
</AppShell.SectionHeader>
|
||||
<AppShell.Scrollable initialOffset={96}>
|
||||
<div className="flex flex-col flex-grow py-3 gap-3">
|
||||
{/*<div className="pt-3 px-3">
|
||||
<SearchInput placeholder="Search entities" />
|
||||
</div>*/}
|
||||
|
||||
<EntityLinkList entities={entityList.regular} context={context} />
|
||||
<EntityLinkList entities={entityList.system} context={context} title="System" />
|
||||
<EntityLinkList
|
||||
entities={entityList.generated}
|
||||
context={context}
|
||||
title="Generated"
|
||||
/>
|
||||
</div>
|
||||
</AppShell.Scrollable>
|
||||
</AppShell.Sidebar>
|
||||
<AppShell.Main>{children}</AppShell.Main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const EntityLinkList = ({
|
||||
entities,
|
||||
title,
|
||||
context
|
||||
}: { entities: Entity[]; title?: string; context: "data" | "schema" }) => {
|
||||
if (entities.length === 0) return null;
|
||||
|
||||
return (
|
||||
<nav
|
||||
className={twMerge(
|
||||
"flex flex-col flex-1 gap-1 px-3",
|
||||
title && "border-t border-primary/10 pt-2"
|
||||
)}
|
||||
>
|
||||
{title && <div className="text-sm text-primary/50 ml-3.5 mb-1">{title}</div>}
|
||||
|
||||
{entities.map((entity) => {
|
||||
const href =
|
||||
context === "data"
|
||||
? routes.data.entity.list(entity.name)
|
||||
: routes.data.schema.entity(entity.name);
|
||||
return (
|
||||
<AppShell.SidebarLink key={entity.name} as={Link} href={href}>
|
||||
{entity.label}
|
||||
</AppShell.SidebarLink>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export function DataEmpty() {
|
||||
useBrowserTitle(["Data"]);
|
||||
const [navigate] = useNavigate();
|
||||
|
||||
function handleButtonClick() {
|
||||
navigate(routes.settings.path(["data", "entities"]), { absolute: true });
|
||||
}
|
||||
|
||||
return (
|
||||
<Empty
|
||||
Icon={IconDatabase}
|
||||
title="No entity selected"
|
||||
description="Please select an entity from the left sidebar or create a new one to continue."
|
||||
buttonText="Create Entity"
|
||||
buttonOnClick={handleButtonClick}
|
||||
/>
|
||||
);
|
||||
}
|
||||
296
app/src/ui/routes/data/data.$entity.$id.tsx
Normal file
296
app/src/ui/routes/data/data.$entity.$id.tsx
Normal file
@@ -0,0 +1,296 @@
|
||||
import { encodeSearch, ucFirst } from "core/utils";
|
||||
import type { Entity, EntityData } from "data";
|
||||
import type { EntityRelation } from "data";
|
||||
import { Fragment, memo, useState } from "react";
|
||||
import { TbArrowLeft, TbDots } from "react-icons/tb";
|
||||
import { EntityForm } from "ui/modules/data/components/EntityForm";
|
||||
import { EntityTable2 } from "ui/modules/data/components/EntityTable2";
|
||||
import { useEntityForm } from "ui/modules/data/hooks/useEntityForm";
|
||||
import { useClient } from "../../client";
|
||||
import { useBknd } from "../../client";
|
||||
import { Button } from "../../components/buttons/Button";
|
||||
import { IconButton } from "../../components/buttons/IconButton";
|
||||
import { Dropdown } from "../../components/overlay/Dropdown";
|
||||
import { useEntity } from "../../container";
|
||||
import { useBrowserTitle } from "../../hooks/use-browser-title";
|
||||
import * as AppShell from "../../layouts/AppShell/AppShell";
|
||||
import { SectionHeaderLink } from "../../layouts/AppShell/AppShell";
|
||||
import { Breadcrumbs2 } from "../../layouts/AppShell/Breadcrumbs2";
|
||||
import { routes, useNavigate } from "../../lib/routes";
|
||||
import { bkndModals } from "../../modals";
|
||||
|
||||
export function DataEntityUpdate({ params }) {
|
||||
const { app } = useBknd();
|
||||
const entity = app.entity(params.entity as string)!;
|
||||
const entityId = Number.parseInt(params.id as string);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [navigate] = useNavigate();
|
||||
useBrowserTitle(["Data", entity.label, `#${entityId}`]);
|
||||
const targetRelations = app.relations.listableRelationsOf(entity);
|
||||
console.log("targetRelations", targetRelations, app.relations.relationsOf(entity));
|
||||
// filter out polymorphic for now
|
||||
//.filter((r) => r.type() !== "poly");
|
||||
const local_relation_refs = app.relations
|
||||
.sourceRelationsOf(entity)
|
||||
?.map((r) => r.other(entity).reference);
|
||||
|
||||
const container = useEntity(entity.name, entityId, {
|
||||
fetch: {
|
||||
query: {
|
||||
with: local_relation_refs
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function goBack(state?: Record<string, any>) {
|
||||
window.history.go(-1);
|
||||
}
|
||||
|
||||
async function onSubmitted(changeSet?: EntityData) {
|
||||
console.log("update:changeSet", changeSet);
|
||||
//return;
|
||||
if (!changeSet) {
|
||||
goBack();
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await container.actions.update(changeSet);
|
||||
console.log("update:res", res);
|
||||
if (res.data?.error) {
|
||||
setError(res.data.error);
|
||||
} else {
|
||||
error && setError(null);
|
||||
goBack();
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
if (confirm("Are you sure to delete?")) {
|
||||
const res = await container.actions.remove();
|
||||
if (res.error) {
|
||||
setError(res.error);
|
||||
} else {
|
||||
error && setError(null);
|
||||
goBack();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const { Form, handleSubmit } = useEntityForm({
|
||||
action: "update",
|
||||
entity,
|
||||
initialData: container.data,
|
||||
onSubmitted
|
||||
});
|
||||
//console.log("form.data", Form.state.values, container.data);
|
||||
|
||||
const makeKey = (key: string | number = "") =>
|
||||
`${params.entity.name}_${entityId}_${String(key)}`;
|
||||
|
||||
const fieldsDisabled =
|
||||
container.raw.fetch?.isLoading ||
|
||||
container.status.fetch.isUpdating ||
|
||||
Form.state.isSubmitting;
|
||||
|
||||
return (
|
||||
<Fragment key={makeKey()}>
|
||||
<AppShell.SectionHeader
|
||||
right={
|
||||
<>
|
||||
<Dropdown
|
||||
position="bottom-end"
|
||||
items={[
|
||||
{
|
||||
label: "Inspect",
|
||||
onClick: () => {
|
||||
bkndModals.open("debug", {
|
||||
data: {
|
||||
data: container.data as any,
|
||||
entity: entity.toJSON(),
|
||||
schema: entity.toSchema(true),
|
||||
form: Form.state.values,
|
||||
state: Form.state
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "Settings",
|
||||
onClick: () =>
|
||||
navigate(routes.settings.path(["data", "entities", entity.name]), {
|
||||
absolute: true
|
||||
})
|
||||
},
|
||||
{
|
||||
label: "Delete",
|
||||
onClick: handleDelete,
|
||||
destructive: true,
|
||||
disabled: fieldsDisabled
|
||||
}
|
||||
]}
|
||||
>
|
||||
<IconButton Icon={TbDots} />
|
||||
</Dropdown>
|
||||
<Form.Subscribe
|
||||
selector={(state) => [state.canSubmit, state.isSubmitting]}
|
||||
children={([canSubmit, isSubmitting]) => (
|
||||
<Button
|
||||
type="button"
|
||||
onClick={Form.handleSubmit}
|
||||
variant="primary"
|
||||
tabIndex={entity.fields.length + 1}
|
||||
disabled={!canSubmit || isSubmitting || fieldsDisabled}
|
||||
>
|
||||
Update
|
||||
</Button>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
className="pl-3"
|
||||
>
|
||||
<Breadcrumbs2
|
||||
path={[
|
||||
{ label: entity.label, href: routes.data.entity.list(entity.name) },
|
||||
{ label: `Edit #${entityId}` }
|
||||
]}
|
||||
/>
|
||||
</AppShell.SectionHeader>
|
||||
<AppShell.Scrollable>
|
||||
{error && (
|
||||
<div className="flex flex-row dark:bg-red-950 bg-red-100 p-4">
|
||||
<b className="mr-2">Update failed: </b> {error}
|
||||
</div>
|
||||
)}
|
||||
<EntityForm
|
||||
entity={entity}
|
||||
entityId={entityId}
|
||||
handleSubmit={handleSubmit}
|
||||
fieldsDisabled={fieldsDisabled}
|
||||
data={container.data ?? undefined}
|
||||
Form={Form}
|
||||
action="update"
|
||||
className="flex flex-grow flex-col gap-3 p-3"
|
||||
/>
|
||||
{targetRelations.length > 0 ? (
|
||||
<EntityDetailRelations id={entityId} entity={entity} relations={targetRelations} />
|
||||
) : null}
|
||||
</AppShell.Scrollable>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
function EntityDetailRelations({
|
||||
id,
|
||||
entity,
|
||||
relations
|
||||
}: {
|
||||
id: number;
|
||||
entity: Entity;
|
||||
relations: EntityRelation[];
|
||||
}) {
|
||||
const [selected, setSelected] = useState<EntityRelation>(
|
||||
// @ts-ignore
|
||||
relations.length > 0 ? relations[0] : undefined
|
||||
);
|
||||
|
||||
function handleClick(relation: EntityRelation) {
|
||||
setSelected(relation);
|
||||
}
|
||||
|
||||
if (relations.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
//console.log("selected", selected, relations[0].helper(entity.name).other.reference);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col max-w-full">
|
||||
<AppShell.SectionHeaderTabs
|
||||
title="Relations"
|
||||
items={relations.map((relation) => {
|
||||
const other = relation.other(entity);
|
||||
|
||||
return {
|
||||
as: "button",
|
||||
type: "button",
|
||||
label: ucFirst(other.reference),
|
||||
onClick: () => handleClick(relation),
|
||||
active: selected?.other(entity).reference === other.reference,
|
||||
badge: relation.type()
|
||||
};
|
||||
})}
|
||||
/>
|
||||
<div className="flex flex-grow flex-col gap-3 p-3">
|
||||
<EntityDetailInner id={id} entity={entity} relation={selected} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EntityDetailInner({
|
||||
id,
|
||||
entity,
|
||||
relation
|
||||
}: {
|
||||
id: number;
|
||||
entity: Entity;
|
||||
relation: EntityRelation;
|
||||
}) {
|
||||
const other = relation.other(entity);
|
||||
const client = useClient();
|
||||
const [navigate] = useNavigate();
|
||||
|
||||
const search = {
|
||||
select: other.entity.getSelect(undefined, "table"),
|
||||
limit: 10,
|
||||
offset: 0
|
||||
};
|
||||
const query = client
|
||||
.query()
|
||||
.data.entity(entity.name)
|
||||
.readManyByReference(id, other.reference, other.entity.name, search);
|
||||
|
||||
function handleClickRow(row: Record<string, any>) {
|
||||
navigate(routes.data.entity.edit(other.entity.name, row.id));
|
||||
}
|
||||
|
||||
function handleClickNew() {
|
||||
try {
|
||||
const ref = relation.getReferenceQuery(other.entity, id, other.reference);
|
||||
|
||||
navigate(routes.data.entity.create(other.entity.name), {
|
||||
query: ref.where
|
||||
});
|
||||
//navigate(routes.data.entity.create(other.entity.name) + `?${query}`);
|
||||
} catch (e) {
|
||||
console.error("handleClickNew", e);
|
||||
}
|
||||
}
|
||||
|
||||
if (query.isPending) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const isUpdating = query.isInitialLoading || query.isFetching;
|
||||
//console.log("query", query, search.select);
|
||||
|
||||
return (
|
||||
<div
|
||||
data-updating={isUpdating ? 1 : undefined}
|
||||
className="transition-opacity data-[updating]:opacity-50"
|
||||
>
|
||||
<EntityTable2
|
||||
select={search.select}
|
||||
data={query.data?.data ?? []}
|
||||
entity={other.entity}
|
||||
onClickRow={handleClickRow}
|
||||
onClickNew={handleClickNew}
|
||||
page={1}
|
||||
/* @ts-ignore */
|
||||
total={query.data?.body?.meta?.count ?? 1}
|
||||
/*onClickPage={handleClickPage}*/
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
103
app/src/ui/routes/data/data.$entity.create.tsx
Normal file
103
app/src/ui/routes/data/data.$entity.create.tsx
Normal file
@@ -0,0 +1,103 @@
|
||||
import { Type } from "core/utils";
|
||||
import { useState } from "react";
|
||||
import { EntityForm } from "ui/modules/data/components/EntityForm";
|
||||
import { useEntityForm } from "ui/modules/data/hooks/useEntityForm";
|
||||
import { useBknd } from "../../client/BkndProvider";
|
||||
import { Button } from "../../components/buttons/Button";
|
||||
import { type EntityData, useEntity } from "../../container";
|
||||
import { useBrowserTitle } from "../../hooks/use-browser-title";
|
||||
import { useSearch } from "../../hooks/use-search";
|
||||
import * as AppShell from "../../layouts/AppShell/AppShell";
|
||||
import { Breadcrumbs2 } from "../../layouts/AppShell/Breadcrumbs2";
|
||||
import { routes } from "../../lib/routes";
|
||||
|
||||
export function DataEntityCreate({ params }) {
|
||||
const { app } = useBknd();
|
||||
const entity = app.entity(params.entity as string)!;
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
useBrowserTitle(["Data", entity.label, "Create"]);
|
||||
|
||||
const container = useEntity(entity.name);
|
||||
// @todo: use entity schema for prefilling
|
||||
const search = useSearch(Type.Object({}), {});
|
||||
console.log("search", search.value);
|
||||
|
||||
function goBack(state?: Record<string, any>) {
|
||||
window.history.go(-1);
|
||||
}
|
||||
|
||||
async function onSubmitted(changeSet?: EntityData) {
|
||||
console.log("create:changeSet", changeSet);
|
||||
//return;
|
||||
const res = await container.actions.create(changeSet);
|
||||
console.log("create:res", res);
|
||||
if (res.data?.error) {
|
||||
setError(res.data.error);
|
||||
} else {
|
||||
error && setError(null);
|
||||
// @todo: navigate to created?
|
||||
goBack();
|
||||
}
|
||||
}
|
||||
|
||||
const { Form, handleSubmit, values } = useEntityForm({
|
||||
action: "create",
|
||||
entity,
|
||||
initialData: search.value,
|
||||
onSubmitted
|
||||
});
|
||||
|
||||
const fieldsDisabled =
|
||||
container.raw.fetch?.isLoading ||
|
||||
container.status.fetch.isUpdating ||
|
||||
Form.state.isSubmitting;
|
||||
|
||||
return (
|
||||
<>
|
||||
<AppShell.SectionHeader
|
||||
right={
|
||||
<>
|
||||
<Button onClick={goBack}>Cancel</Button>
|
||||
<Form.Subscribe
|
||||
selector={(state) => [state.canSubmit, state.isSubmitting]}
|
||||
children={([canSubmit, isSubmitting]) => (
|
||||
<Button
|
||||
type="button"
|
||||
onClick={Form.handleSubmit}
|
||||
variant="primary"
|
||||
tabIndex={entity.fields.length}
|
||||
disabled={!canSubmit || isSubmitting}
|
||||
>
|
||||
Create
|
||||
</Button>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<Breadcrumbs2
|
||||
path={[
|
||||
{ label: entity.label, href: routes.data.entity.list(entity.name) },
|
||||
{ label: "Create" }
|
||||
]}
|
||||
/>
|
||||
</AppShell.SectionHeader>
|
||||
<AppShell.Scrollable key={entity.name}>
|
||||
{error && (
|
||||
<div className="flex flex-row dark:bg-red-950 bg-red-100 p-4">
|
||||
<b className="mr-2">Create failed: </b> {error}
|
||||
</div>
|
||||
)}
|
||||
<EntityForm
|
||||
entity={entity}
|
||||
handleSubmit={handleSubmit}
|
||||
fieldsDisabled={fieldsDisabled}
|
||||
data={search.value}
|
||||
Form={Form}
|
||||
action="create"
|
||||
className="flex flex-grow flex-col gap-3 p-3"
|
||||
/>
|
||||
</AppShell.Scrollable>
|
||||
</>
|
||||
);
|
||||
}
|
||||
145
app/src/ui/routes/data/data.$entity.index.tsx
Normal file
145
app/src/ui/routes/data/data.$entity.index.tsx
Normal file
@@ -0,0 +1,145 @@
|
||||
import { Type } from "core/utils";
|
||||
import { querySchema } from "data";
|
||||
import { TbDots } from "react-icons/tb";
|
||||
import { EntityTable2 } from "ui/modules/data/components/EntityTable2";
|
||||
import { useBknd } from "../../client";
|
||||
import { Button } from "../../components/buttons/Button";
|
||||
import { IconButton } from "../../components/buttons/IconButton";
|
||||
import { Dropdown } from "../../components/overlay/Dropdown";
|
||||
import { EntitiesContainer } from "../../container";
|
||||
import { useBrowserTitle } from "../../hooks/use-browser-title";
|
||||
import { useSearch } from "../../hooks/use-search";
|
||||
import * as AppShell from "../../layouts/AppShell/AppShell";
|
||||
import { routes, useNavigate } from "../../lib/routes";
|
||||
|
||||
// @todo: migrate to Typebox
|
||||
const searchSchema = Type.Composite(
|
||||
[
|
||||
Type.Pick(querySchema, ["select", "where", "sort"]),
|
||||
Type.Object({
|
||||
page: Type.Optional(Type.Number({ default: 1 })),
|
||||
perPage: Type.Optional(Type.Number({ default: 10 }))
|
||||
})
|
||||
],
|
||||
{ additionalProperties: false }
|
||||
);
|
||||
|
||||
export function DataEntityList({ params }) {
|
||||
console.log("params", params);
|
||||
const { app } = useBknd();
|
||||
const entity = app.entity(params.entity as string)!;
|
||||
const [navigate] = useNavigate();
|
||||
const search = useSearch(searchSchema, {
|
||||
select: entity.getSelect(undefined, "table"),
|
||||
sort: entity.getDefaultSort()
|
||||
});
|
||||
console.log("search", search.value);
|
||||
useBrowserTitle(["Data", entity.label]);
|
||||
const PER_PAGE_OPTIONS = [5, 10, 25];
|
||||
|
||||
//console.log("search", search.value);
|
||||
|
||||
function handleClickRow(row: Record<string, any>) {
|
||||
navigate(routes.data.entity.edit(entity.name, row.id));
|
||||
}
|
||||
|
||||
function handleClickPage(page: number) {
|
||||
search.set("page", page);
|
||||
}
|
||||
|
||||
function handleSortClick(name: string) {
|
||||
const sort = search.value.sort!;
|
||||
const newSort = { by: name, dir: sort.by === name && sort.dir === "asc" ? "desc" : "asc" };
|
||||
|
||||
// // @ts-expect-error - somehow all search keys are optional
|
||||
console.log("new sort", newSort);
|
||||
search.set("sort", newSort as any);
|
||||
}
|
||||
|
||||
function handleClickPerPage(perPage: number) {
|
||||
// @todo: also reset page to 1
|
||||
search.set("perPage", perPage);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<AppShell.SectionHeader
|
||||
right={
|
||||
<>
|
||||
<Dropdown
|
||||
items={[
|
||||
{
|
||||
label: "Settings",
|
||||
onClick: () =>
|
||||
navigate(routes.settings.path(["data", "entities", entity.name]), {
|
||||
absolute: true
|
||||
})
|
||||
}
|
||||
]}
|
||||
position="bottom-end"
|
||||
>
|
||||
<IconButton Icon={TbDots} />
|
||||
</Dropdown>
|
||||
<Button
|
||||
onClick={() => {
|
||||
navigate(routes.data.entity.create(entity.name));
|
||||
}}
|
||||
variant="primary"
|
||||
>
|
||||
Create new
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
{entity.label}
|
||||
</AppShell.SectionHeader>
|
||||
<AppShell.Scrollable key={entity.name}>
|
||||
<div className="flex flex-col flex-grow p-3 gap-3">
|
||||
{/*<div className="w-64">
|
||||
<SearchInput placeholder={`Filter ${entity.label}`} />
|
||||
</div>*/}
|
||||
|
||||
<EntitiesContainer
|
||||
entity={entity.name}
|
||||
query={{
|
||||
select: search.value.select,
|
||||
limit: search.value.perPage,
|
||||
offset: (search.value.page - 1) * search.value.perPage,
|
||||
sort: search.value.sort
|
||||
}}
|
||||
>
|
||||
{(params) => {
|
||||
if (params.status.fetch.isLoading) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const isUpdating = params.status.fetch.isUpdating;
|
||||
|
||||
return (
|
||||
<div
|
||||
data-updating={isUpdating ? 1 : undefined}
|
||||
className="data-[updating]:opacity-50 transition-opacity pb-10"
|
||||
>
|
||||
<EntityTable2
|
||||
data={params.data ?? []}
|
||||
entity={entity}
|
||||
select={search.value.select}
|
||||
onClickRow={handleClickRow}
|
||||
page={search.value.page}
|
||||
sort={search.value.sort}
|
||||
onClickSort={handleSortClick}
|
||||
perPage={search.value.perPage}
|
||||
perPageOptions={PER_PAGE_OPTIONS}
|
||||
total={params.meta?.count}
|
||||
onClickPage={handleClickPage}
|
||||
onClickPerPage={handleClickPerPage}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</EntitiesContainer>
|
||||
</div>
|
||||
</AppShell.Scrollable>
|
||||
</>
|
||||
);
|
||||
}
|
||||
233
app/src/ui/routes/data/data.schema.$entity.tsx
Normal file
233
app/src/ui/routes/data/data.schema.$entity.tsx
Normal file
@@ -0,0 +1,233 @@
|
||||
import {
|
||||
IconAlignJustified,
|
||||
IconBolt,
|
||||
IconCirclesRelation,
|
||||
IconSettings
|
||||
} from "@tabler/icons-react";
|
||||
import { isDebug } from "core";
|
||||
import type { Entity } from "data";
|
||||
import { cloneDeep, omit } from "lodash-es";
|
||||
import { forwardRef, useImperativeHandle, useRef, useState } from "react";
|
||||
import { TbArrowLeft, TbDots } from "react-icons/tb";
|
||||
import { useBknd } from "ui/client";
|
||||
import { useBkndData } from "ui/client/schema/data/use-bknd-data";
|
||||
import { Button } from "ui/components/buttons/Button";
|
||||
import { IconButton } from "ui/components/buttons/IconButton";
|
||||
import { Empty } from "ui/components/display/Empty";
|
||||
import {
|
||||
JsonSchemaForm,
|
||||
type JsonSchemaFormRef
|
||||
} from "ui/components/form/json-schema/JsonSchemaForm";
|
||||
import { Dropdown } from "ui/components/overlay/Dropdown";
|
||||
import * as AppShell from "ui/layouts/AppShell/AppShell";
|
||||
import { SectionHeaderAccordionItem } from "ui/layouts/AppShell/AppShell";
|
||||
import { Breadcrumbs2 } from "ui/layouts/AppShell/Breadcrumbs2";
|
||||
import { routes, useGoBack, useNavigate } from "ui/lib/routes";
|
||||
import { extractSchema } from "../settings/utils/schema";
|
||||
import { EntityFieldsForm, type EntityFieldsFormRef } from "./forms/entity.fields.form";
|
||||
|
||||
export function DataSchemaEntity({ params }) {
|
||||
const { $data } = useBkndData();
|
||||
const [value, setValue] = useState("fields");
|
||||
const fieldsRef = useRef<EntityFieldsFormRef>(null);
|
||||
|
||||
function toggle(value) {
|
||||
return () => setValue(value);
|
||||
}
|
||||
|
||||
const [navigate] = useNavigate();
|
||||
const entity = $data.entity(params.entity as string)!;
|
||||
|
||||
return (
|
||||
<>
|
||||
<AppShell.SectionHeader
|
||||
right={
|
||||
<>
|
||||
<Dropdown
|
||||
items={[
|
||||
{
|
||||
label: "Settings",
|
||||
onClick: () =>
|
||||
navigate(routes.settings.path(["data", "entities", entity.name]), {
|
||||
absolute: true
|
||||
})
|
||||
}
|
||||
]}
|
||||
position="bottom-end"
|
||||
>
|
||||
<IconButton Icon={TbDots} />
|
||||
</Dropdown>
|
||||
</>
|
||||
}
|
||||
className="pl-3"
|
||||
>
|
||||
<Breadcrumbs2
|
||||
path={[{ label: "Schema", href: "/" }, { label: entity.label }]}
|
||||
backTo="/"
|
||||
/>
|
||||
</AppShell.SectionHeader>
|
||||
<div className="flex flex-col h-full" key={entity.name}>
|
||||
<Fields entity={entity} open={value === "fields"} toggle={toggle("fields")} />
|
||||
|
||||
<BasicSettings entity={entity} open={value === "2"} toggle={toggle("2")} />
|
||||
<AppShell.SectionHeaderAccordionItem
|
||||
title="Relations"
|
||||
open={value === "3"}
|
||||
toggle={toggle("3")}
|
||||
ActiveIcon={IconCirclesRelation}
|
||||
>
|
||||
<Empty
|
||||
title="Relations"
|
||||
description="This will soon be available here. Meanwhile, check advanced settings."
|
||||
buttonText="Advanced Settings"
|
||||
buttonOnClick={() =>
|
||||
navigate(routes.settings.path(["data", "relations"]), {
|
||||
absolute: true
|
||||
})
|
||||
}
|
||||
/>
|
||||
</AppShell.SectionHeaderAccordionItem>
|
||||
<AppShell.SectionHeaderAccordionItem
|
||||
title="Indices"
|
||||
open={value === "4"}
|
||||
toggle={toggle("4")}
|
||||
ActiveIcon={IconBolt}
|
||||
>
|
||||
<Empty
|
||||
title="Indices"
|
||||
description="This will soon be available here. Meanwhile, check advanced settings."
|
||||
buttonText="Advanced Settings"
|
||||
buttonOnClick={() =>
|
||||
navigate(routes.settings.path(["data", "indices"]), {
|
||||
absolute: true
|
||||
})
|
||||
}
|
||||
/>
|
||||
</AppShell.SectionHeaderAccordionItem>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const Fields = ({
|
||||
entity,
|
||||
open,
|
||||
toggle
|
||||
}: { entity: Entity; open: boolean; toggle: () => void }) => {
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [updates, setUpdates] = useState(0);
|
||||
const { actions } = useBkndData();
|
||||
const [res, setRes] = useState<any>();
|
||||
const ref = useRef<EntityFieldsFormRef>(null);
|
||||
async function handleUpdate() {
|
||||
if (submitting) return;
|
||||
setSubmitting(true);
|
||||
const fields = ref.current?.getData()!;
|
||||
await actions.entity.patch(entity.name).fields.set(fields);
|
||||
setSubmitting(false);
|
||||
setUpdates((u) => u + 1);
|
||||
}
|
||||
|
||||
// @todo: the return of toJSON from Fields doesn't match "type" enum
|
||||
const initialFields = Object.fromEntries(entity.fields.map((f) => [f.name, f.toJSON()])) as any;
|
||||
|
||||
return (
|
||||
<AppShell.SectionHeaderAccordionItem
|
||||
title="Fields"
|
||||
open={open}
|
||||
toggle={toggle}
|
||||
ActiveIcon={IconAlignJustified}
|
||||
renderHeaderRight={({ open }) =>
|
||||
open ? (
|
||||
<Button variant="primary" disabled={!open} onClick={handleUpdate}>
|
||||
Update
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
>
|
||||
<div className="flex flex-col flex-grow py-3 px-4 max-w-4xl gap-3 relative">
|
||||
{submitting && (
|
||||
<div className="animate-fade-in absolute w-full h-full top-0 bottom-0 left-0 right-0 bg-background/65 z-50" />
|
||||
)}
|
||||
<EntityFieldsForm fields={initialFields} ref={ref} key={String(updates)} sortable />
|
||||
|
||||
{isDebug() && (
|
||||
<div>
|
||||
<div className="flex flex-row gap-1 justify-center">
|
||||
<Button size="small" onClick={() => setRes(ref.current?.isValid())}>
|
||||
valid
|
||||
</Button>
|
||||
<Button size="small" onClick={() => setRes(ref.current?.getValues())}>
|
||||
values
|
||||
</Button>
|
||||
<Button size="small" onClick={() => setRes(ref.current?.getData())}>
|
||||
data
|
||||
</Button>
|
||||
<Button size="small" onClick={handleUpdate}>
|
||||
update
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<pre className="select-text">{JSON.stringify(res, null, 2)}</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</AppShell.SectionHeaderAccordionItem>
|
||||
);
|
||||
};
|
||||
|
||||
const BasicSettings = ({
|
||||
entity,
|
||||
open,
|
||||
toggle
|
||||
}: { entity: Entity; open: boolean; toggle: () => void }) => {
|
||||
const d = useBkndData();
|
||||
const config = d.entities?.[entity.name]?.config;
|
||||
const formRef = useRef<JsonSchemaFormRef>(null);
|
||||
|
||||
const schema = cloneDeep(
|
||||
// @ts-ignore
|
||||
d.schema.properties.entities.additionalProperties?.properties?.config
|
||||
);
|
||||
|
||||
const [_schema, _config] = extractSchema(schema as any, config, ["fields"]);
|
||||
|
||||
// set fields as enum
|
||||
try {
|
||||
// @ts-ignore
|
||||
_schema.properties.sort_field.enum = entity.getFields().map((f) => f.name);
|
||||
} catch (e) {
|
||||
console.error("error setting sort_field enum", e);
|
||||
}
|
||||
|
||||
async function handleUpdate() {
|
||||
console.log("update", formRef.current?.formData());
|
||||
await d.actions.entity.patch(entity.name).config(formRef.current?.formData());
|
||||
}
|
||||
|
||||
return (
|
||||
<AppShell.SectionHeaderAccordionItem
|
||||
title="Settings"
|
||||
open={open}
|
||||
toggle={toggle}
|
||||
ActiveIcon={IconSettings}
|
||||
renderHeaderRight={({ open }) =>
|
||||
open ? (
|
||||
<Button variant="primary" disabled={!open} onClick={handleUpdate}>
|
||||
Update
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
>
|
||||
<div className="flex flex-col flex-grow py-3 px-4 max-w-4xl gap-3 relative">
|
||||
<JsonSchemaForm
|
||||
ref={formRef}
|
||||
schema={_schema}
|
||||
formData={_config}
|
||||
onSubmit={console.log}
|
||||
className="legacy hide-required-mark fieldset-alternative mute-root"
|
||||
/>
|
||||
</div>
|
||||
</AppShell.SectionHeaderAccordionItem>
|
||||
);
|
||||
};
|
||||
41
app/src/ui/routes/data/data.schema.index.tsx
Normal file
41
app/src/ui/routes/data/data.schema.index.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import { Suspense, lazy, useRef } from "react";
|
||||
import {
|
||||
CreateModal,
|
||||
type CreateModalRef
|
||||
} from "ui/modules/data/components/schema/create-modal/CreateModal";
|
||||
import { Button } from "../../components/buttons/Button";
|
||||
import * as AppShell from "../../layouts/AppShell/AppShell";
|
||||
|
||||
const DataSchemaCanvas = lazy(() =>
|
||||
import("ui/modules/data/components/canvas/DataSchemaCanvas").then((m) => ({
|
||||
default: m.DataSchemaCanvas
|
||||
}))
|
||||
);
|
||||
|
||||
export function DataSchemaIndex() {
|
||||
const createModalRef = useRef<CreateModalRef>(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
<CreateModal ref={createModalRef} />
|
||||
<AppShell.SectionHeader
|
||||
right={
|
||||
<Button
|
||||
type="button"
|
||||
variant="primary"
|
||||
onClick={() => createModalRef.current?.open()}
|
||||
>
|
||||
Create new
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
Schema Overview
|
||||
</AppShell.SectionHeader>
|
||||
<div className="w-full h-full">
|
||||
<Suspense>
|
||||
<DataSchemaCanvas />
|
||||
</Suspense>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
454
app/src/ui/routes/data/forms/entity.fields.form.tsx
Normal file
454
app/src/ui/routes/data/forms/entity.fields.form.tsx
Normal file
@@ -0,0 +1,454 @@
|
||||
import { typeboxResolver } from "@hookform/resolvers/typebox";
|
||||
import { Tabs, TextInput, Textarea, Tooltip } from "@mantine/core";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { Type } from "@sinclair/typebox";
|
||||
import {
|
||||
type Static,
|
||||
StringIdentifier,
|
||||
objectCleanEmpty,
|
||||
ucFirstAllSnakeToPascalWithSpaces
|
||||
} from "core/utils";
|
||||
import { Entity } from "data";
|
||||
import {
|
||||
type TAppDataEntityFields,
|
||||
fieldsSchemaObject as originalFieldsSchemaObject
|
||||
} from "data/data-schema";
|
||||
import { omit } from "lodash-es";
|
||||
import { forwardRef, memo, useEffect, useImperativeHandle } from "react";
|
||||
import { type FieldArrayWithId, type UseFormReturn, useFieldArray, useForm } from "react-hook-form";
|
||||
import { TbGripVertical, TbSettings, TbTrash } from "react-icons/tb";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { Button } from "ui";
|
||||
import { useBknd } from "ui/client";
|
||||
import { useBkndData } from "ui/client/schema/data/use-bknd-data";
|
||||
import { IconButton } from "ui/components/buttons/IconButton";
|
||||
import { JsonViewer } from "ui/components/code/JsonViewer";
|
||||
import { MantineSwitch } from "ui/components/form/hook-form-mantine/MantineSwitch";
|
||||
import { JsonSchemaForm } from "ui/components/form/json-schema/JsonSchemaForm";
|
||||
import { type SortableItemProps, SortableList } from "ui/components/list/SortableList";
|
||||
import { Popover } from "ui/components/overlay/Popover";
|
||||
import { fieldSpecs } from "ui/modules/data/components/fields-specs";
|
||||
import { dataFieldsUiSchema } from "../../settings/routes/data.settings";
|
||||
|
||||
const fieldsSchemaObject = originalFieldsSchemaObject;
|
||||
const fieldsSchema = Type.Union(Object.values(fieldsSchemaObject));
|
||||
|
||||
const fieldSchema = Type.Object({
|
||||
name: StringIdentifier,
|
||||
new: Type.Optional(Type.Boolean({ const: true })),
|
||||
field: fieldsSchema
|
||||
});
|
||||
type TFieldSchema = Static<typeof fieldSchema>;
|
||||
|
||||
const schema = Type.Object({
|
||||
fields: Type.Array(fieldSchema)
|
||||
});
|
||||
type TFieldsFormSchema = Static<typeof schema>;
|
||||
|
||||
const fieldTypes = Object.keys(fieldsSchemaObject);
|
||||
const defaultType = fieldTypes[0];
|
||||
const blank_field = { name: "", field: { type: defaultType, config: {} } } as TFieldSchema;
|
||||
const commonProps = ["label", "description", "required", "fillable", "hidden", "virtual"];
|
||||
|
||||
function specificFieldSchema(type: keyof typeof fieldsSchemaObject) {
|
||||
//console.log("specificFieldSchema", type);
|
||||
return Type.Omit(fieldsSchemaObject[type]?.properties.config, commonProps);
|
||||
}
|
||||
|
||||
export type EntityFieldsFormRef = {
|
||||
getValues: () => TFieldsFormSchema;
|
||||
getData: () => TAppDataEntityFields;
|
||||
isValid: () => boolean;
|
||||
reset: () => void;
|
||||
};
|
||||
|
||||
export const EntityFieldsForm = forwardRef<
|
||||
EntityFieldsFormRef,
|
||||
{
|
||||
fields: TAppDataEntityFields;
|
||||
onChange?: (formData: TAppDataEntityFields) => void;
|
||||
sortable?: boolean;
|
||||
}
|
||||
>(function EntityFieldsForm({ fields: _fields, sortable, ...props }, ref) {
|
||||
const entityFields = Object.entries(_fields).map(([name, field]) => ({
|
||||
name,
|
||||
field
|
||||
}));
|
||||
/*const entityFields = entity.fields.map((field) => ({
|
||||
name: field.name,
|
||||
field: field.toJSON()
|
||||
}));*/
|
||||
|
||||
const {
|
||||
control,
|
||||
formState: { isValid, errors },
|
||||
getValues,
|
||||
handleSubmit,
|
||||
watch,
|
||||
register,
|
||||
setValue,
|
||||
setError,
|
||||
reset,
|
||||
clearErrors
|
||||
} = useForm({
|
||||
mode: "all",
|
||||
resolver: typeboxResolver(schema),
|
||||
defaultValues: {
|
||||
fields: entityFields
|
||||
} as TFieldsFormSchema
|
||||
});
|
||||
const { fields, append, remove, move } = useFieldArray({
|
||||
control,
|
||||
name: "fields"
|
||||
});
|
||||
|
||||
function toCleanValues(formData: TFieldsFormSchema): TAppDataEntityFields {
|
||||
return Object.fromEntries(
|
||||
formData.fields.map((field) => [field.name, objectCleanEmpty(field.field)])
|
||||
);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (props?.onChange) {
|
||||
console.log("----set");
|
||||
watch((data: any) => {
|
||||
console.log("---calling");
|
||||
props?.onChange?.(toCleanValues(data));
|
||||
});
|
||||
}
|
||||
//props?.onChange?.()
|
||||
}, []);
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
reset,
|
||||
getValues: () => getValues(),
|
||||
getData: () => {
|
||||
return toCleanValues(getValues());
|
||||
/*return Object.fromEntries(
|
||||
getValues().fields.map((field) => [field.name, objectCleanEmpty(field.field)])
|
||||
);*/
|
||||
},
|
||||
isValid: () => isValid
|
||||
}));
|
||||
console.log("errors", errors.fields);
|
||||
|
||||
/*useEffect(() => {
|
||||
console.log("change", values);
|
||||
onSubmit(values);
|
||||
}, [values]);*/
|
||||
|
||||
function onSubmit(data: TFieldsFormSchema) {
|
||||
console.log("submit", isValid, data, errors);
|
||||
}
|
||||
function onSubmitInvalid(a, b) {
|
||||
console.log("submit invalid", a, b);
|
||||
}
|
||||
|
||||
function handleAppend(_type: keyof typeof fieldsSchemaObject) {
|
||||
const newField = {
|
||||
name: "",
|
||||
new: true,
|
||||
field: {
|
||||
type: _type,
|
||||
config: {}
|
||||
}
|
||||
};
|
||||
console.log("handleAppend", _type, newField);
|
||||
append(newField);
|
||||
}
|
||||
|
||||
const formProps = {
|
||||
watch,
|
||||
register,
|
||||
setValue,
|
||||
getValues,
|
||||
control,
|
||||
setError
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<form
|
||||
onSubmit={handleSubmit(onSubmit as any, onSubmitInvalid)}
|
||||
className="flex flex-col gap-6"
|
||||
>
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex flex-col gap-4">
|
||||
{sortable ? (
|
||||
<SortableList
|
||||
data={fields}
|
||||
key={fields.length}
|
||||
onReordered={move}
|
||||
extractId={(item) => item.id}
|
||||
disableIndices={[0]}
|
||||
renderItem={({ dnd, ...props }, index) => (
|
||||
<EntityFieldMemo
|
||||
key={props.id}
|
||||
field={props as any}
|
||||
index={index}
|
||||
form={formProps}
|
||||
errors={errors}
|
||||
remove={remove}
|
||||
dnd={dnd}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<div>
|
||||
{fields.map((field, index) => (
|
||||
<EntityField
|
||||
key={field.id}
|
||||
field={field as any}
|
||||
index={index}
|
||||
form={formProps}
|
||||
errors={errors}
|
||||
remove={remove}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Popover
|
||||
className="flex flex-col w-full"
|
||||
target={({ toggle }) => (
|
||||
<SelectType
|
||||
onSelect={(type) => {
|
||||
handleAppend(type as any);
|
||||
toggle();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
>
|
||||
<Button className="justify-center">Add Field</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" className="hidden" />
|
||||
{/*<Debug watch={watch} errors={errors} />*/}
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
const SelectType = ({ onSelect }: { onSelect: (type: string) => void }) => {
|
||||
const types = fieldSpecs.filter((s) => s.addable !== false);
|
||||
|
||||
return (
|
||||
<div className="flex flex-row gap-2 justify-center flex-wrap">
|
||||
{types.map((type) => (
|
||||
<Button
|
||||
key={type.type}
|
||||
IconLeft={type.icon}
|
||||
variant="ghost"
|
||||
onClick={() => onSelect(type.type)}
|
||||
>
|
||||
{type.label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Debug = ({ watch, errors }) => {
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
{Object.entries(errors).map(([key, value]) => (
|
||||
<p key={key}>
|
||||
{/* @ts-ignore */}
|
||||
{key}: {value.message}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
<pre>{JSON.stringify(watch(), null, 2)}</pre>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const EntityFieldMemo = memo(EntityField, (prev, next) => {
|
||||
return prev.field.id !== next.field.id;
|
||||
});
|
||||
|
||||
function EntityField({
|
||||
field,
|
||||
index,
|
||||
form: { watch, register, setValue, getValues, control, setError },
|
||||
remove,
|
||||
errors,
|
||||
dnd
|
||||
}: {
|
||||
field: FieldArrayWithId<TFieldsFormSchema, "fields", "id">;
|
||||
index: number;
|
||||
form: Pick<
|
||||
UseFormReturn<any>,
|
||||
"watch" | "register" | "setValue" | "getValues" | "control" | "setError"
|
||||
>;
|
||||
remove: (index: number) => void;
|
||||
errors: any;
|
||||
dnd?: SortableItemProps;
|
||||
}) {
|
||||
const [opened, handlers] = useDisclosure(false);
|
||||
const prefix = `fields.${index}.field` as const;
|
||||
const type = field.field.type;
|
||||
const name = watch(`fields.${index}.name`);
|
||||
const fieldSpec = fieldSpecs.find((s) => s.type === type)!;
|
||||
const specificData = omit(field.field.config, commonProps);
|
||||
const disabled = fieldSpec.disabled || [];
|
||||
const hidden = fieldSpec.hidden || [];
|
||||
const dragDisabled = index === 0;
|
||||
const hasErrors = !!errors?.fields?.[index];
|
||||
|
||||
function handleDelete(index: number) {
|
||||
return () => {
|
||||
if (name.length === 0) {
|
||||
remove(index);
|
||||
return;
|
||||
}
|
||||
window.confirm(`Sure to delete "${name}"?`) && remove(index);
|
||||
};
|
||||
}
|
||||
//console.log("register", register(`${prefix}.config.required`));
|
||||
const dndProps = dnd ? { ...dnd.provided.draggableProps, ref: dnd.provided.innerRef } : {};
|
||||
|
||||
return (
|
||||
<div
|
||||
key={field.id}
|
||||
className={twMerge(
|
||||
"flex flex-col border border-muted rounded bg-background mb-2",
|
||||
opened && "mb-6",
|
||||
hasErrors && "border-red-500 "
|
||||
)}
|
||||
{...dndProps}
|
||||
>
|
||||
<div className="flex flex-row gap-2 px-2 py-2">
|
||||
{dnd ? (
|
||||
<div className="flex items-center" {...dnd.provided.dragHandleProps}>
|
||||
<IconButton Icon={TbGripVertical} className="mt-1" disabled={dragDisabled} />
|
||||
</div>
|
||||
) : null}
|
||||
<div className="flex flex-row flex-grow gap-4 items-center md:mr-6">
|
||||
<Tooltip label={fieldSpec.label}>
|
||||
<div className="flex flex-row items-center p-2 bg-primary/5 rounded">
|
||||
<fieldSpec.icon className="size-5" />
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
{field.new ? (
|
||||
<TextInput
|
||||
error={!!errors?.fields?.[index]?.name.message}
|
||||
placeholder="Enter a property name..."
|
||||
classNames={{
|
||||
root: "w-full h-full",
|
||||
wrapper: "font-mono h-full",
|
||||
input: "pt-px !h-full"
|
||||
}}
|
||||
{...register(`fields.${index}.name`)}
|
||||
disabled={!field.new}
|
||||
/>
|
||||
) : (
|
||||
<div className="font-mono flex-grow flex flex-row gap-3">
|
||||
<span>{name}</span>
|
||||
{field.field.config?.label && (
|
||||
<span className="opacity-50">{field.field.config?.label}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-col gap-1 hidden md:flex">
|
||||
<span className="text-xs text-primary/50 leading-none">Required</span>
|
||||
<MantineSwitch size="sm" name={`${prefix}.config.required`} control={control} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-end">
|
||||
<div className="flex flex-row gap-4">
|
||||
<IconButton
|
||||
size="lg"
|
||||
Icon={TbSettings}
|
||||
iconProps={{ strokeWidth: 1.5 }}
|
||||
onClick={handlers.toggle}
|
||||
variant={opened ? "primary" : "ghost"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{opened && (
|
||||
<div className="flex flex-col border-t border-t-muted px-3 py-2 bg-lightest/50">
|
||||
{/*<pre>{JSON.stringify(field, null, 2)}</pre>*/}
|
||||
<Tabs defaultValue="general">
|
||||
<Tabs.List className="flex flex-row">
|
||||
<Tabs.Tab value="general">General</Tabs.Tab>
|
||||
<Tabs.Tab value="specific">{ucFirstAllSnakeToPascalWithSpaces(type)}</Tabs.Tab>
|
||||
<Tabs.Tab value="visibility" disabled>
|
||||
Visiblity
|
||||
</Tabs.Tab>
|
||||
<div className="flex flex-grow" />
|
||||
<Tabs.Tab value="code" className="!self-end">
|
||||
Code
|
||||
</Tabs.Tab>
|
||||
</Tabs.List>
|
||||
<Tabs.Panel value="general">
|
||||
<div className="flex flex-col gap-2 pt-3 pb-1" key={`${prefix}_${type}`}>
|
||||
<div className="flex flex-row">
|
||||
<MantineSwitch
|
||||
label="Required"
|
||||
name={`${prefix}.config.required`}
|
||||
control={control}
|
||||
/>
|
||||
</div>
|
||||
<TextInput
|
||||
label="Label"
|
||||
placeholder="Label"
|
||||
{...register(`${prefix}.config.label`)}
|
||||
/>
|
||||
<Textarea
|
||||
label="Description"
|
||||
placeholder="Description"
|
||||
{...register(`${prefix}.config.description`)}
|
||||
/>
|
||||
{!hidden.includes("virtual") && (
|
||||
<MantineSwitch
|
||||
label="Virtual"
|
||||
name={`${prefix}.config.virtual`}
|
||||
control={control}
|
||||
disabled={disabled.includes("virtual")}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Tabs.Panel>
|
||||
<Tabs.Panel value="specific">
|
||||
<div className="flex flex-col gap-2 pt-3 pb-1">
|
||||
<JsonSchemaForm
|
||||
key={type}
|
||||
schema={specificFieldSchema(type as any)}
|
||||
formData={specificData}
|
||||
uiSchema={dataFieldsUiSchema.config}
|
||||
className="legacy hide-required-mark fieldset-alternative mute-root"
|
||||
onChange={(value) => {
|
||||
setValue(`${prefix}.config`, {
|
||||
...getValues([`fields.${index}.config`])[0],
|
||||
...value
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Tabs.Panel>
|
||||
<Tabs.Panel value="code">
|
||||
{(() => {
|
||||
const { id, ...json } = field;
|
||||
return <JsonViewer json={json} expand={4} />;
|
||||
})()}
|
||||
</Tabs.Panel>
|
||||
<div className="flex flex-row justify-end">
|
||||
<Button
|
||||
IconLeft={TbTrash}
|
||||
onClick={handleDelete(index)}
|
||||
size="small"
|
||||
variant="subtlered"
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</Tabs>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
25
app/src/ui/routes/data/index.tsx
Normal file
25
app/src/ui/routes/data/index.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import { Route, Switch } from "wouter";
|
||||
import { DataEmpty, DataRoot } from "./_data.root";
|
||||
import { DataEntityUpdate } from "./data.$entity.$id";
|
||||
import { DataEntityCreate } from "./data.$entity.create";
|
||||
import { DataEntityList } from "./data.$entity.index";
|
||||
import { DataSchemaEntity } from "./data.schema.$entity";
|
||||
import { DataSchemaIndex } from "./data.schema.index";
|
||||
|
||||
export default function DataRoutes() {
|
||||
return (
|
||||
<DataRoot>
|
||||
<Switch>
|
||||
<Route path="/" component={DataEmpty} />
|
||||
<Route path="/entity/:entity" component={DataEntityList} />
|
||||
<Route path="/entity/:entity/create" component={DataEntityCreate} />
|
||||
<Route path="/entity/:entity/edit/:id" component={DataEntityUpdate} />
|
||||
|
||||
<Route path="/schema" nest>
|
||||
<Route path="/" component={DataSchemaIndex} />
|
||||
<Route path="/entity/:entity" component={DataSchemaEntity} />
|
||||
</Route>
|
||||
</Switch>
|
||||
</DataRoot>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user