feat: adding initial uuid support

2026-03-17 04:46:05 +00:00 · 2025-06-06 20:46:01 +02:00
parent abbd372ddf
commit 9a18e354cd
22 changed files with 184 additions and 52 deletions
--- a/app/src/ui/elements/media/DropzoneContainer.tsx
+++ b/app/src/ui/elements/media/DropzoneContainer.tsx
@@ -1,9 +1,10 @@
 import type { Api } from "bknd/client";
+import type { PrimaryFieldType } from "core";
 import type { RepoQueryIn } from "data";
 import type { MediaFieldSchema } from "media/AppMedia";
 import type { TAppMediaConfig } from "media/media-schema";
 import { useId, useEffect, useRef, useState } from "react";
-import { useApi, useApiInfiniteQuery, useApiQuery, useInvalidate } from "ui/client";
+import { useApi, useApiInfiniteQuery, useApiQuery, useInvalidate } from "bknd/client";
 import { useEvent } from "ui/hooks/use-event";
 import { Dropzone, type DropzoneProps } from "./Dropzone";
 import { mediaItemsToFileStates } from "./helper";
@@ -14,7 +15,7 @@ export type DropzoneContainerProps = {
   infinite?: boolean;
   entity?: {
      name: string;
-      id: number;
+      id: PrimaryFieldType;
      field: string;
   };
   media?: Pick<TAppMediaConfig, "entity_name" | "storage">;
--- a/app/src/ui/modules/data/components/EntityForm.tsx
+++ b/app/src/ui/modules/data/components/EntityForm.tsx
@@ -22,6 +22,7 @@ import { EntityRelationalFormField } from "./fields/EntityRelationalFormField";
 import ErrorBoundary from "ui/components/display/ErrorBoundary";
 import { Alert } from "ui/components/display/Alert";
 import { bkndModals } from "ui/modals";
+import type { PrimaryFieldType } from "core";

 // simplify react form types 🤦
 export type FormApi = ReactFormExtendedApi<any, any, any, any, any, any, any, any, any, any>;
@@ -30,7 +31,7 @@ export type TFieldApi = FieldApi<any, any, any, any, any, any, any, any, any, an

 type EntityFormProps = {
   entity: Entity;
-   entityId?: number;
+   entityId?: PrimaryFieldType;
   data?: EntityData;
   handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
   fieldsDisabled: boolean;
@@ -225,7 +226,7 @@ function EntityMediaFormField({
   formApi: FormApi;
   field: MediaField;
   entity: Entity;
-   entityId?: number;
+   entityId?: PrimaryFieldType;
   disabled?: boolean;
 }) {
   if (!entityId) return;
--- a/app/src/ui/modules/data/components/schema/create-modal/step.entity.fields.tsx
+++ b/app/src/ui/modules/data/components/schema/create-modal/step.entity.fields.tsx
@@ -11,12 +11,14 @@ import {
   type EntityFieldsFormRef,
 } from "ui/routes/data/forms/entity.fields.form";
 import { ModalBody, ModalFooter, type TCreateModalSchema, useStepContext } from "./CreateModal";
+import { useBkndData } from "ui/client/schema/data/use-bknd-data";

 const schema = entitiesSchema;
 type Schema = Static<typeof schema>;

 export function StepEntityFields() {
   const { nextStep, stepBack, state, setState } = useStepContext<TCreateModalSchema>();
+   const { config } = useBkndData();
   const entity = state.entities?.create?.[0]!;
   const defaultFields = { id: { type: "primary", name: "id" } } as const;
   const ref = useRef<EntityFieldsFormRef>(null);
@@ -82,6 +84,8 @@ export function StepEntityFields() {
                        ref={ref}
                        fields={initial.fields as any}
                        onChange={updateListener}
+                        defaultPrimaryFormat={config?.default_primary_format}
+                        isNew={true}
                     />
                  </div>
               </div>
--- a/app/src/ui/modules/data/components/schema/create-modal/step.entity.tsx
+++ b/app/src/ui/modules/data/components/schema/create-modal/step.entity.tsx
@@ -10,12 +10,13 @@ import {
   entitySchema,
   useStepContext,
 } from "./CreateModal";
+import { MantineSelect } from "ui/components/form/hook-form-mantine/MantineSelect";

 export function StepEntity() {
   const focusTrapRef = useFocusTrap();

   const { nextStep, stepBack, state, setState } = useStepContext<TCreateModalSchema>();
-   const { register, handleSubmit, formState, watch } = useForm({
+   const { register, handleSubmit, formState, watch, control } = useForm({
      mode: "onTouched",
      resolver: typeboxResolver(entitySchema),
      defaultValues: state.entities?.create?.[0] ?? {},
@@ -56,7 +57,6 @@ export function StepEntity() {
                  label="What's the name of the entity?"
                  description="Use plural form, and all lowercase. It will be used as the database table."
               />
-               {/*<input type="submit" value="submit" />*/}
               <TextInput
                  {...register("config.name")}
                  error={formState.errors.config?.name?.message}
--- a/app/src/ui/routes/data/data.$entity.$id.tsx
+++ b/app/src/ui/routes/data/data.$entity.$id.tsx
@@ -1,3 +1,4 @@
+import type { PrimaryFieldType } from "core";
 import { ucFirst } from "core/utils";
 import type { Entity, EntityData, EntityRelation } from "data";
 import { Fragment, useState } from "react";
@@ -24,7 +25,7 @@ export function DataEntityUpdate({ params }) {
      return <Message.NotFound description={`Entity "${params.entity}" doesn't exist.`} />;
   }

-   const entityId = Number.parseInt(params.id as string);
+   const entityId = params.id as PrimaryFieldType;
   const [error, setError] = useState<string | null>(null);
   const [navigate] = useNavigate();
   useBrowserTitle(["Data", entity.label, `#${entityId}`]);
@@ -202,7 +203,7 @@ function EntityDetailRelations({
   entity,
   relations,
 }: {
-   id: number;
+   id: PrimaryFieldType;
   entity: Entity;
   relations: EntityRelation[];
 }) {
@@ -250,7 +251,7 @@ function EntityDetailInner({
   entity,
   relation,
 }: {
-   id: number;
+   id: PrimaryFieldType;
   entity: Entity;
   relation: EntityRelation;
 }) {
--- a/app/src/ui/routes/data/data.schema.$entity.tsx
+++ b/app/src/ui/routes/data/data.schema.$entity.tsx
@@ -148,7 +148,7 @@ export function DataSchemaEntity({ params }) {
 const Fields = ({ entity }: { entity: Entity }) => {
   const [submitting, setSubmitting] = useState(false);
   const [updates, setUpdates] = useState(0);
-   const { actions, $data } = useBkndData();
+   const { actions, $data, config } = useBkndData();
   const [res, setRes] = useState<any>();
   const ref = useRef<EntityFieldsFormRef>(null);
   async function handleUpdate() {
@@ -201,6 +201,8 @@ const Fields = ({ entity }: { entity: Entity }) => {
                        }
                     },
                  }))}
+               defaultPrimaryFormat={config?.default_primary_format}
+               isNew={false}
            />

            {isDebug() && (
--- a/app/src/ui/routes/data/forms/entity.fields.form.tsx
+++ b/app/src/ui/routes/data/forms/entity.fields.form.tsx
@@ -28,6 +28,8 @@ import { type TFieldSpec, fieldSpecs } from "ui/modules/data/components/fields-s
 import { dataFieldsUiSchema } from "../../settings/routes/data.settings";
 import * as tbbox from "@sinclair/typebox";
 import { useRoutePathState } from "ui/hooks/use-route-path-state";
+import { MantineSelect } from "ui/components/form/hook-form-mantine/MantineSelect";
+import type { TPrimaryFieldFormat } from "data/fields/PrimaryField";
 const { Type } = tbbox;

 const fieldsSchemaObject = originalFieldsSchemaObject;
@@ -65,6 +67,8 @@ export type EntityFieldsFormProps = {
   sortable?: boolean;
   additionalFieldTypes?: (TFieldSpec & { onClick: () => void })[];
   routePattern?: string;
+   defaultPrimaryFormat?: TPrimaryFieldFormat;
+   isNew?: boolean;
 };

 export type EntityFieldsFormRef = {
@@ -77,7 +81,7 @@ export type EntityFieldsFormRef = {

 export const EntityFieldsForm = forwardRef<EntityFieldsFormRef, EntityFieldsFormProps>(
   function EntityFieldsForm(
-      { fields: _fields, sortable, additionalFieldTypes, routePattern, ...props },
+      { fields: _fields, sortable, additionalFieldTypes, routePattern, isNew, ...props },
      ref,
   ) {
      const entityFields = Object.entries(_fields).map(([name, field]) => ({
@@ -172,6 +176,10 @@ export const EntityFieldsForm = forwardRef<EntityFieldsFormRef, EntityFieldsForm
                                 remove={remove}
                                 dnd={dnd}
                                 routePattern={routePattern}
+                                 primary={{
+                                    defaultFormat: props.defaultPrimaryFormat,
+                                    editable: isNew,
+                                 }}
                              />
                           )}
                        />
@@ -186,6 +194,10 @@ export const EntityFieldsForm = forwardRef<EntityFieldsFormRef, EntityFieldsForm
                                 errors={errors}
                                 remove={remove}
                                 routePattern={routePattern}
+                                 primary={{
+                                    defaultFormat: props.defaultPrimaryFormat,
+                                    editable: isNew,
+                                 }}
                              />
                           ))}
                        </div>
@@ -281,6 +293,7 @@ function EntityField({
   errors,
   dnd,
   routePattern,
+   primary,
 }: {
   field: FieldArrayWithId<TFieldsFormSchema, "fields", "id">;
   index: number;
@@ -292,6 +305,10 @@ function EntityField({
   errors: any;
   dnd?: SortableItemProps;
   routePattern?: string;
+   primary?: {
+      defaultFormat?: TPrimaryFieldFormat;
+      editable?: boolean;
+   };
 }) {
   const prefix = `fields.${index}.field` as const;
   const type = field.field.type;
@@ -363,15 +380,29 @@ function EntityField({
                  </div>
               )}
               <div className="flex-col gap-1 hidden md:flex">
-                  <span className="text-xs text-primary/50 leading-none">Required</span>
                  {is_primary ? (
-                     <Switch size="sm" defaultChecked disabled />
+                     <>
+                        <MantineSelect
+                           data={["integer", "uuid"]}
+                           defaultValue={primary?.defaultFormat}
+                           disabled={!primary?.editable}
+                           placeholder="Select format"
+                           name={`${prefix}.config.format`}
+                           allowDeselect={false}
+                           control={control}
+                           size="xs"
+                           className="w-20"
+                        />
+                     </>
                  ) : (
-                     <MantineSwitch
-                        size="sm"
-                        name={`${prefix}.config.required`}
-                        control={control}
-                     />
+                     <>
+                        <span className="text-xs text-primary/50 leading-none">Required</span>
+                        <MantineSwitch
+                           size="sm"
+                           name={`${prefix}.config.required`}
+                           control={control}
+                        />
+                     </>
                  )}
               </div>
            </div>