shishantbiswas/bknd
1
0
Fork 0
mirror of https://github.com/shishantbiswas/bknd.git synced 2026-03-16 04:27:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #51 from bknd-io/feat/admin-data-improve

Browse Source 
Admin UI improvements
This commit is contained in:
dswbx
2025-01-17 13:46:38 +01:00
committed by GitHub
parent ac3c7316ff c19d3b2d75
commit c3d0f01390
26 changed files with 352 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/src/data/fields/Field.ts
View File

@@ -157,8 +157,12 @@ export abstract class Field<
return this.config.virtual ?? false;
}
getLabel(): string {
return this.config.label ?? snakeToPascalWithSpaces(this.name);
getLabel(options?: { fallback?: boolean }): string | undefined {
return this.config.label
? this.config.label
: options?.fallback !== false
? snakeToPascalWithSpaces(this.name)
: undefined;
}
getDescription(): string | undefined {

7
app/src/ui/client/BkndProvider.tsx
View File

@@ -33,6 +33,7 @@ export function BkndProvider({
useState<Pick<BkndContext, "version" | "schema" | "config" | "permissions">>();
const [fetched, setFetched] = useState(false);
const errorShown = useRef<boolean>();
const [local_version, set_local_version] = useState(0);
const api = useApi();
async function reloadSchema() {
@@ -80,6 +81,7 @@ export function BkndProvider({
setSchema(schema);
setWithSecrets(_includeSecrets);
setFetched(true);
set_local_version((v) => v + 1);
});
}
@@ -98,7 +100,10 @@ export function BkndProvider({
const actions = getSchemaActions({ api, setSchema, reloadSchema });
return (
<BkndContext.Provider value={{ ...schema, actions, requireSecrets, app, adminOverride }}>
<BkndContext.Provider
value={{ ...schema, actions, requireSecrets, app, adminOverride }}
key={local_version}
>
{children}
</BkndContext.Provider>
);

33
app/src/ui/client/schema/data/use-bknd-data.ts
View File

@@ -12,6 +12,7 @@ import {
} from "data/data-schema";
import { useBknd } from "ui/client/bknd";
import type { TSchemaActions } from "ui/client/schema/actions";
import { bkndModals } from "ui/modals";
export function useBkndData() {
const { config, app, schema, actions: bkndActions } = useBknd();
@@ -62,7 +63,8 @@ export function useBkndData() {
}
};
const $data = {
entity: (name: string) => entities[name]
entity: (name: string) => entities[name],
modals
};
return {
@@ -75,6 +77,35 @@ export function useBkndData() {
};
}
const modals = {
createAny: () => bkndModals.open(bkndModals.ids.dataCreate, {}),
createEntity: () =>
bkndModals.open(bkndModals.ids.dataCreate, {
initialPath: ["entities", "entity"],
initialState: { action: "entity" }
}),
createRelation: (rel: { source?: string; target?: string; type?: string }) =>
bkndModals.open(bkndModals.ids.dataCreate, {
initialPath: ["entities", "relation"],
initialState: {
action: "relation",
relations: {
create: [rel as any]
}
}
}),
createMedia: (entity?: string) =>
bkndModals.open(bkndModals.ids.dataCreate, {
initialPath: ["entities", "template-media"],
initialState: {
action: "template-media",
initial: {
entity
}
}
})
};
function entityFieldActions(bkndActions: TSchemaActions, entityName: string) {
return {
add: async (name: string, field: TAppDataField) => {

12
app/src/ui/components/buttons/Button.tsx
View File

@@ -4,15 +4,15 @@ import { twMerge } from "tailwind-merge";
import { Link } from "ui/components/wouter/Link";
const sizes = {
small: "px-2 py-1.5 rounded-md gap-1.5 text-sm",
default: "px-3 py-2.5 rounded-md gap-2.5",
large: "px-4 py-3 rounded-md gap-3 text-lg"
small: "px-2 py-1.5 rounded-md gap-1 text-sm",
default: "px-3 py-2.5 rounded-md gap-1.5",
large: "px-4 py-3 rounded-md gap-2.5 text-lg"
};
const iconSizes = {
small: 15,
default: 18,
large: 22
small: 12,
default: 16,
large: 20
};
const styles = {

6
app/src/ui/components/buttons/IconButton.tsx
View File

@@ -10,9 +10,9 @@ export type IconType =
const styles = {
xs: { className: "p-0.5", size: 13 },
sm: { className: "p-0.5", size: 16 },
md: { className: "p-1", size: 20 },
lg: { className: "p-1.5", size: 24 }
sm: { className: "p-0.5", size: 15 },
md: { className: "p-1", size: 18 },
lg: { className: "p-1.5", size: 22 }
} as const;
interface IconButtonProps extends ComponentPropsWithoutRef<"button"> {

26
app/src/ui/components/display/Empty.tsx
View File

@@ -1,33 +1,33 @@
import { Button } from "../buttons/Button";
import { twMerge } from "tailwind-merge";
import { Button, type ButtonProps } from "../buttons/Button";
export type EmptyProps = {
Icon?: any;
title?: string;
description?: string;
buttonText?: string;
buttonOnClick?: () => void;
primary?: ButtonProps;
secondary?: ButtonProps;
className?: string;
};
export const Empty: React.FC<EmptyProps> = ({
Icon = undefined,
title = undefined,
description = "Check back later my friend.",
buttonText,
buttonOnClick
primary,
secondary,
className
}) => (
<div className="flex flex-col h-full w-full justify-center items-center">
<div className={twMerge("flex flex-col h-full w-full justify-center items-center", className)}>
<div className="flex flex-col gap-3 items-center max-w-80">
{Icon && <Icon size={48} className="opacity-50" stroke={1} />}
<div className="flex flex-col gap-1">
{title && <h3 className="text-center text-lg font-bold">{title}</h3>}
<p className="text-center text-primary/60">{description}</p>
</div>
{buttonText && (
<div className="mt-1.5">
<Button variant="primary" onClick={buttonOnClick}>
{buttonText}
</Button>
</div>
)}
<div className="mt-1.5 flex flex-row gap-2">
{secondary && <Button variant="default" {...secondary} />}
{primary && <Button variant="primary" {...primary} />}
</div>
</div>
</div>
);

8
app/src/ui/components/steps/Steps.tsx
View File

@@ -10,6 +10,7 @@ import {
export type TStepsProps = {
children: any;
initialPath?: string[];
initialState?: any;
lastBack?: () => void;
[key: string]: any;
};
@@ -19,13 +20,14 @@ type TStepContext<T = any> = {
stepBack: () => void;
close: () => void;
state: T;
path: string[];
setState: Dispatch<SetStateAction<T>>;
};
const StepContext = createContext<TStepContext>(undefined as any);
export function Steps({ children, initialPath = [], lastBack }: TStepsProps) {
const [state, setState] = useState<any>({});
export function Steps({ children, initialPath = [], initialState = {}, lastBack }: TStepsProps) {
const [state, setState] = useState<any>(initialState);
const [path, setPath] = useState<string[]>(initialPath);
const steps: any[] = Children.toArray(children).filter(
(child: any) => child.props.disabled !== true
@@ -46,7 +48,7 @@ export function Steps({ children, initialPath = [], lastBack }: TStepsProps) {
const current = steps.find((step) => step.props.id === path[path.length - 1]) || steps[0];
return (
<StepContext.Provider value={{ nextStep, stepBack, state, setState, close: lastBack! }}>
<StepContext.Provider value={{ nextStep, stepBack, state, path, setState, close: lastBack! }}>
{current}
</StepContext.Provider>
);

32
app/src/ui/hooks/use-effect.ts Normal file
View File

@@ -0,0 +1,32 @@
import { useEffect, useRef } from "react";
export function useEffectOnce(effect: () => void | (() => void | undefined), deps: any[]): void {
const hasRunRef = useRef(false);
const savedDepsRef = useRef<any[] | undefined>(deps);
useEffect(() => {
const depsChanged = !hasRunRef.current || !areDepsEqual(savedDepsRef.current, deps);
if (depsChanged) {
hasRunRef.current = true;
savedDepsRef.current = deps;
return effect();
}
}, [deps]);
}
function areDepsEqual(prevDeps: any[] | undefined, nextDeps: any[]): boolean {
if (prevDeps && prevDeps.length === 0 && nextDeps.length === 0) {
return true;
}
if (!prevDeps && nextDeps.length === 0) {
return true;
}
if (!prevDeps || !nextDeps || prevDeps.length !== nextDeps.length) {
return false;
}
return prevDeps.every((dep, index) => Object.is(dep, nextDeps[index]));
}

12
app/src/ui/modals/index.tsx
View File

@@ -1,8 +1,8 @@
import type { ModalProps } from "@mantine/core";
import { modals as $modals, ModalsProvider, closeModal, openContextModal } from "@mantine/modals";
import { transformObject } from "core/utils";
import type { ComponentProps } from "react";
import { OverlayModal } from "ui/modals/debug/OverlayModal";
import { CreateModal } from "ui/modules/data/components/schema/create-modal/CreateModal";
import { DebugModal } from "./debug/DebugModal";
import { SchemaFormModal } from "./debug/SchemaFormModal";
import { TestModal } from "./debug/TestModal";
@@ -11,7 +11,8 @@ const modals = {
test: TestModal,
debug: DebugModal,
form: SchemaFormModal,
overlay: OverlayModal
overlay: OverlayModal,
dataCreate: CreateModal
};
declare module "@mantine/modals" {
@@ -54,10 +55,9 @@ function close<Modal extends keyof typeof modals>(modal: Modal) {
}
export const bkndModals = {
ids: transformObject(modals, (key) => key) as unknown as Record<
keyof typeof modals,
keyof typeof modals
>,
ids: Object.fromEntries(Object.keys(modals).map((key) => [key, key])) as {
[K in keyof typeof modals]: K;
},
open,
close,
closeAll: $modals.closeAll

13
app/src/ui/modules/data/components/fields/EntityRelationalFormField.tsx
View File

@@ -9,6 +9,7 @@ import { useBknd } from "ui/client/bknd";
import { Button } from "ui/components/buttons/Button";
import * as Formy from "ui/components/form/Formy";
import { Popover } from "ui/components/overlay/Popover";
import { Link } from "ui/components/wouter/Link";
import { routes } from "ui/lib/routes";
import { useLocation } from "wouter";
import { EntityTable } from "../EntityTable";
@@ -82,7 +83,9 @@ export function EntityRelationalFormField({
return (
<Formy.Group>
<Formy.Label htmlFor={fieldApi.name}>{field.getLabel()}</Formy.Label>
<Formy.Label htmlFor={fieldApi.name}>
{field.getLabel({ fallback: false }) ?? entity.label}
</Formy.Label>
<div
data-disabled={fetching || disabled ? 1 : undefined}
className="data-[disabled]:opacity-70 data-[disabled]:pointer-events-none"
@@ -152,9 +155,11 @@ export function EntityRelationalFormField({
);
})}
</div>
<Button IconLeft={TbEye} onClick={handleViewItem} size="small">
View
</Button>
<Link to={routes.data.entity.edit(entity.name, _value.id as any)}>
<Button IconLeft={TbEye} size="small">
View
</Button>
</Link>
</>
) : (
<div className="pl-2">- Select -</div>

100
app/src/ui/modules/data/components/schema/create-modal/CreateModal.tsx
View File

@@ -1,15 +1,9 @@
import { type Static, StringEnum, StringIdentifier, Type, transformObject } from "core/utils";
import { FieldClassMap } from "data";
import type { ModalProps } from "@mantine/core";
import type { ContextModalProps } from "@mantine/modals";
import { type Static, StringEnum, StringIdentifier, Type } from "core/utils";
import { entitiesSchema, fieldsSchema, relationsSchema } from "data/data-schema";
import { omit } from "lodash-es";
import { forwardRef, useState } from "react";
import {
Modal2,
type Modal2Ref,
ModalBody,
ModalFooter,
ModalTitle
} from "ui/components/modal/Modal2";
import { useState } from "react";
import { type Modal2Ref, ModalBody, ModalFooter, ModalTitle } from "ui/components/modal/Modal2";
import { Step, Steps, useStepContext } from "ui/components/steps/Steps";
import { StepCreate } from "ui/modules/data/components/schema/create-modal/step.create";
import { StepEntity } from "./step.entity";
@@ -45,6 +39,7 @@ export type TFieldCreate = Static<typeof createFieldSchema>;
const createModalSchema = Type.Object(
{
action: schemaAction,
initial: Type.Optional(Type.Any()),
entities: Type.Optional(
Type.Object({
create: Type.Optional(Type.Array(entitySchema))
@@ -67,48 +62,59 @@ const createModalSchema = Type.Object(
);
export type TCreateModalSchema = Static<typeof createModalSchema>;
export const CreateModal = forwardRef<CreateModalRef>(function CreateModal(props, ref) {
const [path, setPath] = useState<string[]>([]);
export function CreateModal({
context,
id,
innerProps: { initialPath = [], initialState }
}: ContextModalProps<{ initialPath?: string[]; initialState?: TCreateModalSchema }>) {
const [path, setPath] = useState<string[]>(initialPath);
console.log("...", initialPath, initialState);
function close() {
// @ts-ignore
ref?.current?.close();
context.closeModal(id);
}
return (
<Modal2 ref={ref}>
<Steps path={path} lastBack={close}>
<Step id="select">
<ModalTitle path={["Create New"]} onClose={close} />
<StepSelect />
</Step>
<Step id="entity" path={["action"]}>
<ModalTitle path={["Create New", "Entity"]} onClose={close} />
<StepEntity />
</Step>
<Step id="entity-fields" path={["action", "entity"]}>
<ModalTitle path={["Create New", "Entity", "Fields"]} onClose={close} />
<StepEntityFields />
</Step>
<Step id="relation" path={["action"]}>
<ModalTitle path={["Create New", "Relation"]} onClose={close} />
<StepRelation />
</Step>
<Step id="create" path={["action"]}>
<ModalTitle path={["Create New", "Creation"]} onClose={close} />
<StepCreate />
</Step>
<Steps path={path} lastBack={close} initialPath={initialPath} initialState={initialState}>
<Step id="select">
<ModalTitle path={["Create New"]} onClose={close} />
<StepSelect />
</Step>
<Step id="entity" path={["action"]}>
<ModalTitle path={["Create New", "Entity"]} onClose={close} />
<StepEntity />
</Step>
<Step id="entity-fields" path={["action", "entity"]}>
<ModalTitle path={["Create New", "Entity", "Fields"]} onClose={close} />
<StepEntityFields />
</Step>
<Step id="relation" path={["action"]}>
<ModalTitle path={["Create New", "Relation"]} onClose={close} />
<StepRelation />
</Step>
<Step id="create" path={["action"]}>
<ModalTitle path={["Create New", "Creation"]} onClose={close} />
<StepCreate />
</Step>
{/* Templates */}
{Templates.map(([Component, meta]) => (
<Step key={meta.id} id={meta.id} path={["action"]}>
<ModalTitle path={["Create New", "Template", meta.title]} onClose={close} />
<Component />
</Step>
))}
</Steps>
</Modal2>
{/* Templates */}
{Templates.map(([Component, meta]) => (
<Step key={meta.id} id={meta.id} path={["action"]}>
<ModalTitle path={["Create New", "Template", meta.title]} onClose={close} />
<Component />
</Step>
))}
</Steps>
);
});
}
CreateModal.defaultTitle = undefined;
CreateModal.modalProps = {
withCloseButton: false,
size: "xl",
padding: 0,
classNames: {
root: "bknd-admin"
}
} satisfies Partial<ModalProps>;
export { ModalBody, ModalFooter, ModalTitle, useStepContext, relationsSchema };

5
app/src/ui/modules/data/components/schema/create-modal/step.create.tsx
View File

@@ -10,6 +10,7 @@ import { ucFirst } from "core/utils";
import { useEffect, useState } from "react";
import { TbCirclesRelation, TbSettings } from "react-icons/tb";
import { twMerge } from "tailwind-merge";
import { useBknd } from "ui/client/bknd";
import { useBkndData } from "ui/client/schema/data/use-bknd-data";
import { IconButton, type IconType } from "ui/components/buttons/IconButton";
import { JsonViewer } from "ui/components/code/JsonViewer";
@@ -26,6 +27,7 @@ export function StepCreate() {
const [states, setStates] = useState<(boolean | string)[]>([]);
const [submitting, setSubmitting] = useState(false);
const $data = useBkndData();
const b = useBknd();
const items: ActionItem[] = [];
if (state.entities?.create) {
@@ -90,7 +92,8 @@ export function StepCreate() {
states.every((s) => s === true)
);
if (items.length === states.length && states.every((s) => s === true)) {
close();
b.actions.reload().then(close);
//close();
} else {
setSubmitting(false);
}

50
app/src/ui/modules/data/components/schema/create-modal/step.relation.tsx
View File

@@ -9,12 +9,15 @@ import {
registerCustomTypeboxKinds
} from "core/utils";
import { ManyToOneRelation, type RelationType, RelationTypes } from "data";
import { type ReactNode, useEffect } from "react";
import { type ReactNode, startTransition, useEffect } from "react";
import { type Control, type FieldValues, type UseFormRegister, useForm } from "react-hook-form";
import { TbRefresh } from "react-icons/tb";
import { useBknd } from "ui/client/bknd";
import { Button } from "ui/components/buttons/Button";
import { MantineNumberInput } from "ui/components/form/hook-form-mantine/MantineNumberInput";
import { MantineSelect } from "ui/components/form/hook-form-mantine/MantineSelect";
import { useStepContext } from "ui/components/steps/Steps";
import { useEvent } from "ui/hooks/use-event";
import { ModalBody, ModalFooter, type TCreateModalSchema } from "./CreateModal";
// @todo: check if this could become an issue
@@ -63,7 +66,7 @@ type ComponentCtx<T extends FieldValues = FieldValues> = {
export function StepRelation() {
const { config } = useBknd();
const entities = config.data.entities;
const { nextStep, stepBack, state, setState } = useStepContext<TCreateModalSchema>();
const { nextStep, stepBack, state, path, setState } = useStepContext<TCreateModalSchema>();
const {
register,
handleSubmit,
@@ -93,6 +96,22 @@ export function StepRelation() {
}
}
const flip = useEvent(() => {
const { source, target } = data;
if (source && target) {
setValue("source", target);
setValue("target", source);
} else {
if (source) {
setValue("target", source);
setValue("source", null as any);
} else {
setValue("source", target);
setValue("target", null as any);
}
}
});
return (
<>
<form onSubmit={handleSubmit(handleNext)}>
@@ -109,14 +128,23 @@ export function StepRelation() {
disabled: data.target === name
}))}
/>
<MantineSelect
control={control}
name="type"
onChange={() => setValue("config", {})}
label="Relation Type"
data={Relations.map((r) => ({ value: r.type, label: r.label }))}
allowDeselect={false}
/>
<div className="flex flex-col gap-1">
<MantineSelect
control={control}
name="type"
onChange={() => setValue("config", {})}
label="Relation Type"
data={Relations.map((r) => ({ value: r.type, label: r.label }))}
allowDeselect={false}
/>
{data.type && (
<div className="flex justify-center mt-1">
<Button size="small" IconLeft={TbRefresh} onClick={flip}>
Flip entities
</Button>
</div>
)}
</div>
<MantineSelect
control={control}
allowDeselect={false}
@@ -146,7 +174,7 @@ export function StepRelation() {
onClick: handleNext
}}
prev={{ onClick: stepBack }}
debug={{ state, data }}
debug={{ state, path, data }}
/>
</form>
</>

3
app/src/ui/modules/data/components/schema/create-modal/step.select.tsx
View File

@@ -12,7 +12,7 @@ import {
import Templates from "./templates/register";
export function StepSelect() {
const { nextStep, stepBack, state, setState } = useStepContext<TCreateModalSchema>();
const { nextStep, stepBack, state, path, setState } = useStepContext<TCreateModalSchema>();
const selected = state.action ?? null;
function handleSelect(action: TSchemaAction) {
@@ -74,6 +74,7 @@ export function StepSelect() {
}}
prev={{ onClick: stepBack }}
prevLabel="Cancel"
debug={{ state, path }}
/>
</>
);

6
app/src/ui/modules/data/components/schema/create-modal/templates/media/template.media.component.tsx
View File

@@ -31,7 +31,7 @@ const schema = Type.Object({
type TCreateModalMediaSchema = Static<typeof schema>;
export function TemplateMediaComponent() {
const { stepBack, setState, state, nextStep } = useStepContext<TCreateModalSchema>();
const { stepBack, setState, state, path, nextStep } = useStepContext<TCreateModalSchema>();
const {
register,
handleSubmit,
@@ -41,7 +41,7 @@ export function TemplateMediaComponent() {
control
} = useForm({
resolver: typeboxResolver(schema),
defaultValues: Default(schema, {}) as TCreateModalMediaSchema
defaultValues: Default(schema, state.initial ?? {}) as TCreateModalMediaSchema
});
const { config } = useBknd();
@@ -134,7 +134,7 @@ export function TemplateMediaComponent() {
prev={{
onClick: stepBack
}}
debug={{ state, data }}
debug={{ state, path, data }}
/>
</form>
</>

66
app/src/ui/routes/data/_data.root.tsx
View File

@@ -1,8 +1,10 @@
import { SegmentedControl } from "@mantine/core";
import { SegmentedControl, Tooltip } from "@mantine/core";
import { IconDatabase } from "@tabler/icons-react";
import type { Entity, TEntityType } from "data";
import { TbDatabasePlus } from "react-icons/tb";
import { twMerge } from "tailwind-merge";
import { useBknd } from "ui/client/bknd";
import { useBkndData } from "ui/client/schema/data/use-bknd-data";
import { IconButton } from "ui/components/buttons/IconButton";
import { Empty } from "ui/components/display/Empty";
import { Link } from "ui/components/wouter/Link";
import { useBrowserTitle } from "ui/hooks/use-browser-title";
@@ -11,9 +13,7 @@ import { routes, useNavigate } from "ui/lib/routes";
export function DataRoot({ children }) {
// @todo: settings routes should be centralized
const {
app: { entities }
} = useBknd();
const { entities, $data } = useBkndData();
const entityList: Record<TEntityType, Entity[]> = {
regular: [],
generated: [],
@@ -22,7 +22,7 @@ export function DataRoot({ children }) {
const [navigate] = useNavigate();
const context = window.location.href.match(/\/schema/) ? "schema" : "data";
for (const entity of entities) {
for (const entity of Object.values(entities)) {
entityList[entity.getType()].push(entity);
}
@@ -52,14 +52,19 @@ export function DataRoot({ children }) {
<AppShell.Sidebar>
<AppShell.SectionHeader
right={
<SegmentedControl
data={[
{ value: "data", label: "Data" },
{ value: "schema", label: "Schema" }
]}
value={context}
onChange={handleSegmentChange}
/>
<>
<SegmentedControl
data={[
{ value: "data", label: "Data" },
{ value: "schema", label: "Schema" }
]}
value={context}
onChange={handleSegmentChange}
/>
<Tooltip label="New Entity">
<IconButton Icon={TbDatabasePlus} onClick={$data.modals.createEntity} />
</Tooltip>
</>
}
>
Entities
@@ -70,7 +75,7 @@ export function DataRoot({ children }) {
<SearchInput placeholder="Search entities" />
</div>*/}
<EntityLinkList entities={entityList.regular} context={context} />
<EntityLinkList entities={entityList.regular} context={context} suggestCreate />
<EntityLinkList entities={entityList.system} context={context} title="System" />
<EntityLinkList
entities={entityList.generated}
@@ -88,9 +93,22 @@ export function DataRoot({ children }) {
const EntityLinkList = ({
entities,
title,
context
}: { entities: Entity[]; title?: string; context: "data" | "schema" }) => {
if (entities.length === 0) return null;
context,
suggestCreate = false
}: { entities: Entity[]; title?: string; context: "data" | "schema"; suggestCreate?: boolean }) => {
const { $data } = useBkndData();
if (entities.length === 0) {
return suggestCreate ? (
<Empty
className="py-10"
description="Create your first entity to get started."
secondary={{
children: "Create entity",
onClick: () => $data.modals.createEntity()
}}
/>
) : null;
}
return (
<nav
@@ -119,9 +137,9 @@ const EntityLinkList = ({
export function DataEmpty() {
useBrowserTitle(["Data"]);
const [navigate] = useNavigate();
const { $data } = useBkndData();
function handleButtonClick() {
//navigate(routes.settings.path(["data", "entities"]), { absolute: true });
navigate(routes.data.schema.root());
}
@@ -130,8 +148,14 @@ export function DataEmpty() {
Icon={IconDatabase}
title="No entity selected"
description="Please select an entity from the left sidebar or create a new one to continue."
buttonText="Go to schema"
buttonOnClick={handleButtonClick}
secondary={{
children: "Go to schema",
onClick: handleButtonClick
}}
primary={{
children: "Create entity",
onClick: $data.modals.createEntity
}}
/>
);
}

4
app/src/ui/routes/data/data.$entity.$id.tsx
View File

@@ -41,6 +41,7 @@ export function DataEntityUpdate({ params }) {
with: local_relation_refs
},
{
keepPreviousData: false,
revalidateOnFocus: false,
shouldRetryOnError: false
}
@@ -95,8 +96,7 @@ export function DataEntityUpdate({ params }) {
);
}
const makeKey = (key: string | number = "") =>
`${params.entity.name}_${entityId}_${String(key)}`;
const makeKey = (key: string | number = "") => `${entity.name}_${entityId}_${String(key)}`;
const fieldsDisabled = $q.isLoading || $q.isValidating || Form.state.isSubmitting;

16
app/src/ui/routes/data/data.$entity.index.tsx
View File

@@ -40,8 +40,8 @@ export function DataEntityList({ params }) {
useBrowserTitle(["Data", entity?.label ?? params.entity]);
const [navigate] = useNavigate();
const search = useSearch(searchSchema, {
select: entity?.getSelect(undefined, "table") ?? [],
sort: entity?.getDefaultSort()
select: undefined,
sort: undefined
});
const $q = useApiQuery(
@@ -50,7 +50,7 @@ export function DataEntityList({ params }) {
select: search.value.select,
limit: search.value.perPage,
offset: (search.value.page - 1) * search.value.perPage,
sort: search.value.sort
sort: `${search.value.sort.dir === "asc" ? "" : "-"}${search.value.sort.by}`
}),
{
enabled: !!entity,
@@ -94,6 +94,14 @@ export function DataEntityList({ params }) {
items={[
{
label: "Settings",
onClick: () => navigate(routes.data.schema.entity(entity.name))
},
{
label: "Data Schema",
onClick: () => navigate(routes.data.schema.root())
},
{
label: "Advanced Settings",
onClick: () =>
navigate(routes.settings.path(["data", "entities", entity.name]), {
absolute: true
@@ -123,7 +131,7 @@ export function DataEntityList({ params }) {
<EntityTable2
data={data ?? null}
entity={entity}
/*select={search.value.select}*/
select={search.value.select}
onClickRow={handleClickRow}
page={search.value.page}
sort={search.value.sort}

61
app/src/ui/routes/data/data.schema.$entity.tsx
View File

@@ -8,11 +8,12 @@ import { isDebug } from "core";
import type { Entity } from "data";
import { cloneDeep } from "lodash-es";
import { useRef, useState } from "react";
import { TbDots } from "react-icons/tb";
import { TbCirclesRelation, TbDots, TbPhoto, TbPlus } from "react-icons/tb";
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 { Message } from "ui/components/display/Message";
import { JsonSchemaForm, type JsonSchemaFormRef } from "ui/components/form/json-schema";
import { Dropdown } from "ui/components/overlay/Dropdown";
import * as AppShell from "ui/layouts/AppShell/AppShell";
@@ -24,7 +25,6 @@ import { EntityFieldsForm, type EntityFieldsFormRef } from "./forms/entity.field
export function DataSchemaEntity({ params }) {
const { $data } = useBkndData();
const [value, setValue] = useState("fields");
const fieldsRef = useRef<EntityFieldsFormRef>(null);
function toggle(value) {
return () => setValue(value);
@@ -32,6 +32,9 @@ export function DataSchemaEntity({ params }) {
const [navigate] = useNavigate();
const entity = $data.entity(params.entity as string)!;
if (!entity) {
return <Message.NotFound description={`Entity "${params.entity}" doesn't exist.`} />;
}
return (
<>
@@ -41,7 +44,14 @@ export function DataSchemaEntity({ params }) {
<Dropdown
items={[
{
label: "Settings",
label: "Data",
onClick: () =>
navigate(routes.data.root() + routes.data.entity.list(entity.name), {
absolute: true
})
},
{
label: "Advanced Settings",
onClick: () =>
navigate(routes.settings.path(["data", "entities", entity.name]), {
absolute: true
@@ -52,6 +62,27 @@ export function DataSchemaEntity({ params }) {
>
<IconButton Icon={TbDots} />
</Dropdown>
<Dropdown
items={[
{
icon: TbCirclesRelation,
label: "Add relation",
onClick: () =>
$data.modals.createRelation({
target: entity.name,
type: "n:1"
})
},
{
icon: TbPhoto,
label: "Add media",
onClick: () => $data.modals.createMedia(entity.name)
}
]}
position="bottom-end"
>
<Button IconRight={TbPlus}>Add</Button>
</Dropdown>
</>
}
className="pl-3"
@@ -74,12 +105,11 @@ export function DataSchemaEntity({ params }) {
<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
})
}
primary={{
children: "Advanced Settings",
onClick: () =>
navigate(routes.settings.path(["data", "relations"]), { absolute: true })
}}
/>
</AppShell.SectionHeaderAccordionItem>
<AppShell.SectionHeaderAccordionItem
@@ -91,12 +121,13 @@ export function DataSchemaEntity({ params }) {
<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
})
}
primary={{
children: "Advanced Settings",
onClick: () =>
navigate(routes.settings.path(["data", "indices"]), {
absolute: true
})
}}
/>
</AppShell.SectionHeaderAccordionItem>
</div>

21
app/src/ui/routes/data/data.schema.index.tsx
View File

@@ -1,10 +1,7 @@
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";
import { Suspense, lazy } from "react";
import { useBkndData } from "ui/client/schema/data/use-bknd-data";
import { Button } from "ui/components/buttons/Button";
import * as AppShell from "ui/layouts/AppShell/AppShell";
const DataSchemaCanvas = lazy(() =>
import("ui/modules/data/components/canvas/DataSchemaCanvas").then((m) => ({
@@ -13,18 +10,12 @@ const DataSchemaCanvas = lazy(() =>
);
export function DataSchemaIndex() {
const createModalRef = useRef<CreateModalRef>(null);
const { $data } = useBkndData();
return (
<>
<CreateModal ref={createModalRef} />
<AppShell.SectionHeader
right={
<Button
type="button"
variant="primary"
onClick={() => createModalRef.current?.open()}
>
<Button type="button" variant="primary" onClick={$data.modals.createAny}>
Create new
</Button>
}

6
app/src/ui/routes/flows_old/_flows.root.tsx
View File

@@ -55,8 +55,10 @@ export function FlowsEmpty() {
title="No flow selected"
description="Please select a flow from the left sidebar or create a new one
to continue."
buttonText="Create Flow"
buttonOnClick={() => navigate(app.getSettingsPath(["flows"]))}
primary={{
children: "Create Flow",
onClick: () => navigate(app.getSettingsPath(["flows"]))
}}
/>
</main>
</>

6
app/src/ui/routes/media/_media.root.tsx
View File

@@ -20,8 +20,10 @@ export function MediaRoot({ children }) {
Icon={IconPhoto}
title="Media not enabled"
description="Please enable media in the settings to continue."
buttonText="Manage Settings"
buttonOnClick={() => navigate(app.getSettingsPath(["media"]))}
primary={{
children: "Manage Settings",
onClick: () => navigate(app.getSettingsPath(["media"]))
}}
/>
);
}

7
app/src/ui/routes/root.tsx
View File

@@ -1,17 +1,18 @@
import { IconHome } from "@tabler/icons-react";
import { useEffect } from "react";
import { useAuth } from "ui/client";
import { useEffectOnce } from "ui/hooks/use-effect";
import { Empty } from "../components/display/Empty";
import { useBrowserTitle } from "../hooks/use-browser-title";
import * as AppShell from "../layouts/AppShell/AppShell";
import { useNavigate } from "../lib/routes";
export const Root = ({ children }) => {
const { verify } = useAuth();
const { verify, user } = useAuth();
useEffect(() => {
useEffectOnce(() => {
verify();
}, []);
}, [user?.id]);
return (
<AppShell.Root>

5
app/src/ui/routes/settings/components/Setting.tsx
View File

@@ -175,7 +175,10 @@ export function Setting<Schema extends TObject = any>({
<Empty
title="Not found"
description={`Configuration at path ${path.join(".")} doesn't exist.`}
buttonText="Go back"
primary={{
children: "Go back",
onClick: () => goBack()
}}
/>
);
}

13
app/vite.dev.ts
View File

@@ -7,12 +7,11 @@ import { StorageLocalAdapter } from "./src/media/storage/adapters/StorageLocalAd
registries.media.register("local", StorageLocalAdapter);
const run_example: string | boolean = false;
//run_example = "ex-admin-rich";
const example = import.meta.env.VITE_EXAMPLE;
const credentials = run_example
const credentials = example
? {
url: `file:.configs/${run_example}.db`
url: `file:.configs/${example}.db`
//url: ":memory:"
}
: {
@@ -26,10 +25,8 @@ if (!credentials.url) {
const connection = new LibsqlConnection(createClient(credentials));
let initialConfig: any = undefined;
if (run_example) {
const { version, ...config } = JSON.parse(
await readFile(`.configs/${run_example}.json`, "utf-8")
);
if (example) {
const { version, ...config } = JSON.parse(await readFile(`.configs/${example}.json`, "utf-8"));
initialConfig = config;
}

1
biome.json
View File

@@ -52,6 +52,7 @@
"noSwitchDeclarations": "warn"
},
"complexity": {
"noUselessFragments": "warn",
"noStaticOnlyClass": "off",
"noForEach": "off",
"useLiteralKeys": "warn",