fix persisting of many to many entity

app/src/ui/components/form/Formy/components.tsx

@@ -72,8 +72,9 @@ export const FieldLabel: React.FC<React.ComponentProps<"label"> & { field: Field
 }) => {
    const desc = field.getDescription();
    return (
-      <Label {...props} title={desc} className="flex flex-row gap-2 items-center">
+      <Label {...props} title={desc} className="flex flex-row gap-1 items-center">
          {field.getLabel()}
+         {field.isRequired() && <span className="font-medium opacity-30">*</span>}
          {desc && <TbInfoCircle className="opacity-50" />}
       </Label>
    );

app/src/ui/modules/data/components/EntityTable.tsx

@@ -25,7 +25,7 @@ export const Check = () => {
    );
 };
 
-type TableProps = {
+export type EntityTableProps = {
    data: EntityData[];
    entity: Entity;
    select?: string[];
@@ -44,7 +44,7 @@ type TableProps = {
    };
 };
 
-export const EntityTable: React.FC<TableProps> = ({
+export const EntityTable: React.FC<EntityTableProps> = ({
    data = [],
    entity,
    select,
@@ -184,7 +184,7 @@ const SortIndicator = ({
    sort,
    field
 }: {
-   sort: Pick<TableProps, "sort">["sort"];
+   sort: Pick<EntityTableProps, "sort">["sort"];
    field: string;
 }) => {
    if (!sort || sort.by !== field) return <TbSelector size={18} className="mt-[1px]" />;

app/src/ui/modules/data/components/fields/EntityRelationalFormField.tsx

@@ -12,7 +12,8 @@ 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";
+import { EntityTable, type EntityTableProps } from "../EntityTable";
+import type { ResponseObject } from "modules/ModuleApi";
 
 // @todo: allow clear if not required
 export function EntityRelationalFormField({
@@ -20,7 +21,7 @@ export function EntityRelationalFormField({
    field,
    data,
    disabled,
-   tabIndex
+   tabIndex,
 }: {
    fieldApi: FieldApi<any, any>;
    field: RelationField;
@@ -30,12 +31,18 @@ export function EntityRelationalFormField({
 }) {
    const { app } = useBknd();
    const entity = app.entity(field.target())!;
-   const [query, setQuery] = useState<any>({ limit: 10, page: 1, perPage: 10 });
+   const [query, setQuery] = useState<any>({
+      limit: 10,
+      page: 1,
+      perPage: 10,
+      select: entity.getSelect(undefined, "table"),
+   });
    const [, navigate] = useLocation();
    const ref = useRef<any>(null);
    const $q = useEntityQuery(field.target(), undefined, {
+      select: query.select,
       limit: query.limit,
-      offset: (query.page - 1) * query.limit
+      offset: (query.page - 1) * query.limit,
    });
    const [_value, _setValue] = useState<{ id: number | undefined; [key: string]: any }>();
 
@@ -120,8 +127,8 @@ export function EntityRelationalFormField({
                         "Enter",
                         () => {
                            ref.current?.click();
-                        }
-                     ]
+                        },
+                     ],
                   ])}
                >
                   {_value ? (
@@ -179,31 +186,37 @@ export function EntityRelationalFormField({
    );
 }
 
-const PopoverTable = ({ container, entity, query, toggle, onClickRow, onClickPage }) => {
+type PropoverTableProps = Omit<EntityTableProps, "data"> & {
+   container: ResponseObject;
+   query: any;
+   toggle: () => void;
+}
+const PopoverTable = ({ container, entity, query, toggle, onClickRow, onClickPage }: PropoverTableProps) => {
    function handleNext() {
       if (query.limit * query.page < container.meta?.count) {
-         onClickPage(query.page + 1);
+         onClickPage?.(query.page + 1);
       }
    }
 
    function handlePrev() {
       if (query.page > 1) {
-         onClickPage(query.page - 1);
+         onClickPage?.(query.page - 1);
       }
    }
 
    useHotkeys([
       ["ArrowRight", handleNext],
       ["ArrowLeft", handlePrev],
-      ["Escape", toggle]
+      ["Escape", toggle],
    ]);
 
    return (
       <div>
          <EntityTable
             classNames={{ value: "line-clamp-1 truncate max-w-52 text-nowrap" }}
-            data={container.data ?? []}
+            data={container ?? []}
             entity={entity}
+            select={query.select}
             total={container.meta?.count}
             page={query.page}
             onClickRow={onClickRow}

app/src/ui/routes/data/data.$entity.$id.tsx

@@ -262,18 +262,18 @@ function EntityDetailInner({
       navigate(routes.data.entity.edit(other.entity.name, row.id));
    }
 
-   function handleClickNew() {
-      try {
+   let handleClickNew: any;
+   try {
+      if (other.entity.type !== "system") {
          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);
+         handleClickNew = () => {
+            navigate(routes.data.entity.create(other.entity.name), {
+               query: ref.where
+            });
+            //navigate(routes.data.entity.create(other.entity.name) + `?${query}`);
+         };
       }
-   }
+   } catch (e) {}
 
    if (!$q.data) {
       return null;

app/src/ui/routes/data/data.$entity.create.tsx

@@ -18,7 +18,7 @@ export function DataEntityCreate({ params }) {
    const entity = $data.entity(params.entity as string);
    if (!entity) {
       return <Message.NotFound description={`Entity "${params.entity}" doesn't exist.`} />;
-   } else if (entity.type !== "regular") {
+   } else if (entity.type === "system") {
       return <Message.NotAllowed description={`Entity "${params.entity}" cannot be created.`} />;
    }
 

app/src/ui/routes/data/data.$entity.index.tsx

@@ -155,7 +155,7 @@ function EntityCreateButton({ entity }: { entity: Entity }) {
 
    const [navigate] = useNavigate();
    if (!entity) return null;
-   if (entity.type !== "regular") {
+   if (entity.type === "system") {
       const system = {
          users: b.app.config.auth.entity_name,
          media: b.app.config.media.entity_name