@prostgles/prostgles 2.3.6-dev.1786548258

package/client/src/dashboard/SmartForm/JoinedRecords/JoinedRecords.tsx

@@ -0,0 +1,155 @@
+import { type DetailedFilter } from "@common/filterUtils";
+import { FlexCol, FlexRow, classOverride } from "@components/Flex";
+import Loading from "@components/Loader/Loading";
+import { Section } from "@components/Section";
+import { SvgIcon } from "@components/SvgIcon";
+import { type AnyObject } from "prostgles-types";
+import React, { useEffect } from "react";
+import type { Prgl } from "../../../App";
+import type { FieldConfig } from "../../SmartCard/SmartCard";
+import type { SmartFormProps } from "../SmartForm";
+import { ViewMoreSmartCardList } from "../SmartFormField/ViewMoreSmartCardList";
+import type { NewRow, NewRowDataHandler } from "../SmartFormNewRowDataHandler";
+import { JoinedRecordsAddRow } from "./JoinedRecordsAddRow";
+import { JoinedRecordsSection } from "./JoinedRecordsSection";
+import { useJoinedRecordsSections } from "./useJoinedRecordsSections";
+
+export type JoinedRecordsProps = Pick<
+  Prgl,
+  "db" | "tables" | "methods" | "sql"
+> &
+  Pick<SmartFormProps, "onSuccess" | "parentForm"> & {
+    className?: string;
+    style?: React.CSSProperties;
+    tableName: string;
+    rowFilter?: DetailedFilter[];
+    newRowData: NewRow | undefined;
+    newRowDataHandler: NewRowDataHandler | undefined;
+    showRelated?: "descendants";
+    modeType?: "update" | "insert" | "view";
+    onTabChange: (tabKey: string | undefined) => void;
+    activeTabKey: string | undefined;
+    errors: AnyObject;
+    row?: AnyObject;
+    tablesToShow?: Record<
+      string,
+      | true
+      | {
+          /**
+           * @deprecated
+           */
+          fieldConfigs?: FieldConfig[];
+        }
+    >;
+  };
+
+export const JoinedRecords = (props: JoinedRecordsProps) => {
+  const sectionData = useJoinedRecordsSections(props);
+  const {
+    sections = [],
+    isLoadingSections,
+    descendants,
+    isInsert,
+  } = sectionData;
+  const {
+    db,
+    tables,
+    methods,
+    style,
+    className = "",
+    modeType: action,
+    activeTabKey,
+    onTabChange,
+    sql,
+  } = props;
+
+  /** Open errored section */
+  useEffect(() => {
+    const erroredSection = sections.find((s) => s.error);
+    if (erroredSection && erroredSection.tableName !== activeTabKey) {
+      onTabChange(erroredSection.tableName);
+    }
+  }, [sections, onTabChange, activeTabKey]);
+
+  if (isLoadingSections) {
+    return <Loading className="m-1 as-center" />;
+  } else if (!sections.length) {
+    return null;
+  }
+
+  if (action === "insert" && sections.every((s) => !s.canInsert)) {
+    return null;
+  }
+
+  return (
+    <FlexCol
+      data-command="JoinedRecords"
+      className={classOverride(
+        "gap-0 bt b-color min-h-0 bg-inherit f-1",
+        className,
+      )}
+      style={style}
+    >
+      {sections.map((section) => {
+        const { label, path, count, table } = section;
+        const icon = table.icon;
+        return (
+          <Section
+            key={path.join(".")}
+            className="trigger-hover "
+            btnProps={{
+              ["data-command"]: "JoinedRecords.SectionToggle",
+              ["data-key"]: path.join("."),
+              style: { flex: 1 },
+            }}
+            data-command="JoinedRecords.Section"
+            data-key={path.join(".")}
+            titleIcon={icon && <SvgIcon icon={icon} />}
+            title={
+              <FlexRow data-key={path.join(".")}>
+                <div>{label}</div>
+                <div className="text-2" style={{ fontWeight: "normal" }}>
+                  {count}
+                </div>
+              </FlexRow>
+            }
+            titleRightContent={
+              props.newRowDataHandler && (
+                <FlexRow className="show-on-trigger-hover ml-auto gap-0">
+                  {!isInsert && (
+                    <ViewMoreSmartCardList
+                      db={db}
+                      methods={methods}
+                      ftable={table}
+                      sql={sql}
+                      searchFilter={section.detailedJoinFilter}
+                      getActions={undefined}
+                      tables={tables}
+                      rootTableName={table.name}
+                    />
+                  )}
+                  <JoinedRecordsAddRow
+                    {...props}
+                    btnProps={{ size: "small" }}
+                    section={section}
+                    newRowDataHandler={props.newRowDataHandler}
+                  />
+                </FlexRow>
+              )
+            }
+          >
+            <JoinedRecordsSection
+              {...props}
+              section={section}
+              descendants={descendants}
+              isInsert={isInsert}
+              onSuccess={() => {
+                void sectionData.refreshSectionCount(section);
+              }}
+            />
+          </Section>
+        );
+      })}
+    </FlexCol>
+  );
+};

package/client/src/dashboard/SmartForm/JoinedRecords/JoinedRecordsAddRow.tsx

@@ -0,0 +1,182 @@
+import { mdiPlus } from "@mdi/js";
+import React, { useCallback, useMemo, useState } from "react";
+import Btn, { type BtnProps } from "@components/Btn";
+import { SmartForm, type SmartFormProps } from "../SmartForm";
+import { useNestedInsertDefaultData } from "../SmartFormField/useNestedInsertDefaultData";
+import { NewRowDataHandler } from "../SmartFormNewRowDataHandler";
+import type { JoinedRecordsProps } from "./JoinedRecords";
+import type { JoinedRecordSection } from "./useJoinedRecordsSections";
+
+type P = Omit<JoinedRecordsProps, "newRowDataHandler"> & {
+  newRowDataHandler: NewRowDataHandler;
+  section: JoinedRecordSection;
+  btnProps?: Pick<
+    BtnProps,
+    "size" | "className" | "variant" | "children" | "data-command"
+  >;
+};
+export const JoinedRecordsAddRow = (props: P) => {
+  const {
+    tables,
+    db,
+    tableName,
+    methods,
+    onSuccess,
+    section,
+    newRowDataHandler,
+    rowFilter,
+    newRowData,
+    row,
+    sql,
+  } = props;
+
+  const [insert, setInsert] = useState<{
+    /**
+     * auto = A parent row exists. Will insert record with appropriate values in the fkey columns
+     * manual = The parent will is yet to be inserted. Data is just passed to the parent row
+     * */
+    type: "auto" | "manual";
+    smartFormProps: Pick<
+      SmartFormProps,
+      | "parentForm"
+      | "columns"
+      | "label"
+      | "defaultData"
+      | "onInserted"
+      | "onSuccess"
+    >;
+  }>();
+
+  const isInsert = !rowFilter;
+
+  const onClose = useCallback(() => {
+    setInsert(undefined);
+  }, []);
+
+  const defaultData = useNestedInsertDefaultData({
+    ftable: section.tableName,
+    tables,
+    tableName,
+    row,
+  });
+
+  const btnProps: Pick<BtnProps, "title" | "onClick" | "disabledInfo"> =
+    useMemo(() => {
+      if (isInsert) {
+        const fcols = tables.find((t) => t.name === section.tableName)?.columns;
+        const existingColumnData = newRowData?.[section.tableName];
+        const existingRowData =
+          existingColumnData?.type === "nested-column" ?
+            existingColumnData.value
+          : undefined;
+        const defaultNewRow =
+          existingRowData instanceof NewRowDataHandler ? existingRowData : (
+            undefined
+          );
+        return {
+          title: "Add referenced record",
+          onClick: () => {
+            setInsert({
+              type: "manual",
+              // onChange: (newRow) => {
+              //   const value = [
+              //     ...(newRowData?.[section.tableName]?.value ?? []),
+              //     newRow,
+              //   ];
+              //   newRowDataHandler.setColumnData(section.tableName, {
+              //     type: "nested-table",
+              //     value,
+              //   });
+              // },
+              smartFormProps: {
+                columns: fcols
+                  ?.filter(
+                    (c) => !c.references?.some((r) => r.ftable === tableName),
+                  )
+                  .reduce((a, v) => ({ ...a, [v.name]: 1 }), {}),
+                parentForm: {
+                  type: "insert",
+                  newRowDataHandler: defaultNewRow,
+                  table: tables.find((t) => t.name === tableName)!,
+                  setColumnData: (newColData) => {
+                    newRowDataHandler.setNestedTable(section.tableName, [
+                      newColData,
+                    ]);
+                    onClose();
+                  },
+                  parentForm: props.parentForm,
+                },
+              },
+            });
+          },
+        };
+      }
+      return {
+        title: "Add new record",
+        onClick: () => {
+          if (defaultData) {
+            setInsert({
+              type: "auto",
+              smartFormProps: {
+                defaultData,
+                onInserted: onClose,
+                onSuccess: onSuccess,
+              },
+            });
+          }
+        },
+        disabledInfo:
+          !section.canInsert ?
+            section.table.isView ? "Cannot insert into a view"
+            : !section.tableHandler?.insert ? "Cannot insert into this table"
+            : `Cannot reference more than one ${JSON.stringify(section.tableName)}`
+          : undefined,
+      };
+    }, [
+      isInsert,
+      section.canInsert,
+      section.table.isView,
+      section.tableName,
+      section.tableHandler,
+      newRowData,
+      newRowDataHandler,
+      tableName,
+      tables,
+      onClose,
+      onSuccess,
+      props.parentForm,
+      defaultData,
+    ]);
+
+  /** Cannot insert if nested table
+   * TODO: allow insert if path.length === 2 and first path is a mapping table
+   */
+  if (section.path.length > 1) return null;
+
+  if (isInsert && !section.tableHandler) return null;
+
+  return (
+    <>
+      {insert && (
+        <SmartForm
+          tableName={section.tableName}
+          db={db}
+          sql={sql}
+          methods={methods}
+          tables={tables}
+          asPopup={true}
+          onClose={onClose}
+          {...insert.smartFormProps}
+        />
+      )}
+      <Btn
+        data-command="JoinedRecords.AddRow"
+        {...props.btnProps}
+        data-key={section.tableName}
+        color="action"
+        iconPath={mdiPlus}
+        {...btnProps}
+      />
+    </>
+  );
+};

package/client/src/dashboard/SmartForm/JoinedRecords/JoinedRecordsSection.tsx

@@ -0,0 +1,168 @@
+import ErrorComponent from "@components/ErrorComponent";
+import { FlexCol } from "@components/Flex";
+import { InfoRow } from "@components/InfoRow";
+import { isDefined } from "prostgles-types";
+import React, { useMemo } from "react";
+import { SmartCardList } from "../../SmartCardList/SmartCardList";
+import { SmartCardListJoinedNewRecords } from "../../SmartCardList/SmartCardListJoinedNewRecords";
+import { NewRowDataHandler } from "../SmartFormNewRowDataHandler";
+import type { JoinedRecordsProps } from "./JoinedRecords";
+import type { JoinedRecordSection } from "./useJoinedRecordsSections";
+import { useJoinedSectionFieldConfigs } from "./useJoinedSectionFieldConfigs";
+import { JoinedRecordsAddRow } from "./JoinedRecordsAddRow";
+
+export const JoinedRecordsSection = ({
+  section,
+  descendants,
+  isInsert,
+  ...props
+}: JoinedRecordsProps & {
+  section: JoinedRecordSection;
+  isInsert: boolean;
+  descendants: JoinedRecordsProps["tables"];
+}) => {
+  return (
+    <FlexCol className=" px-1 pb-1 pt-p5 " data-command="JoinedRecords.Section">
+      <ErrorComponent
+        error={section.error}
+        variant="outlined"
+        className=" f-1"
+      />
+      <JoinedRecordsSectionCardList
+        {...props}
+        section={section}
+        descendants={descendants}
+        isInsert={isInsert}
+      />
+    </FlexCol>
+  );
+};
+
+const JoinedRecordsSectionCardList = (
+  props: JoinedRecordsProps & {
+    section: JoinedRecordSection;
+    isInsert: boolean;
+    descendants: JoinedRecordsProps["tables"];
+  },
+) => {
+  const {
+    db,
+    tables,
+    methods,
+    newRowData,
+    onSuccess,
+    section: s,
+    isInsert,
+    descendants,
+    newRowDataHandler,
+    tableName,
+    tablesToShow,
+    sql,
+  } = props;
+
+  const descendantInsertTables = useMemo(
+    () => descendants.filter((t) => db[t.name]?.insert).map((t) => t.name),
+    [db, descendants],
+  );
+
+  const nestedInsertData = useMemo(
+    () =>
+      Object.fromEntries(
+        Object.entries(newRowData ?? {})
+          .map(([k, d]) =>
+            d.type === "nested-table" ?
+              [
+                k,
+                d.value.map((_v) =>
+                  _v instanceof NewRowDataHandler ? _v.getRow() : _v,
+                ),
+              ]
+            : undefined,
+          )
+          .filter(isDefined),
+      ),
+    [newRowData],
+  );
+
+  const fieldConfigs = useJoinedSectionFieldConfigs({
+    sectionTable: s.table,
+    tables,
+    tableName,
+    tablesToShow,
+  });
+
+  const { count } = s;
+
+  const noDataComponent = (
+    <InfoRow
+      className=" "
+      color="info"
+      variant="filled"
+      contentClassname="flex-row gap-1 ai-center"
+    >
+      <div>No records</div>
+      {newRowDataHandler && (
+        <JoinedRecordsAddRow
+          {...props}
+          btnProps={{
+            size: "small",
+            variant: "filled",
+            children: "Add",
+            "data-command": "JoinedRecords.AddRowNoRecords",
+          }}
+          section={s}
+          newRowDataHandler={newRowDataHandler}
+        />
+      )}
+    </InfoRow>
+  );
+
+  const limit = 20;
+  if (isInsert) {
+    if (!descendantInsertTables.includes(s.tableName)) {
+      return null;
+    }
+    return (
+      <SmartCardListJoinedNewRecords
+        key={s.path.join(".")}
+        db={db}
+        sql={sql}
+        methods={methods}
+        table={s.table}
+        tables={tables}
+        className="px-1"
+        excludeNulls={true}
+        onSuccess={onSuccess}
+        data={nestedInsertData?.[s.tableName] ?? []}
+        onChange={(newData) => {
+          newRowDataHandler?.setNestedTable(s.tableName, newData);
+        }}
+        noDataComponent={noDataComponent}
+        noDataComponentMode="hide-all"
+      />
+    );
+  }
+
+  return (
+    <div className="flex-col gap-p25">
+      {count > 20 && <div className="text-2">Showing top {limit} records</div>}
+      <SmartCardList
+        key={s.path.join(".")}
+        db={db}
+        sql={sql}
+        tables={tables}
+        methods={methods}
+        tableName={s.tableName}
+        filter={s.joinFilter}
+        className="px-1"
+        onSuccess={onSuccess}
+        realtime={true}
+        excludeNulls={true}
+        showTopBar={false}
+        noDataComponent={noDataComponent}
+        noDataComponentMode="hide-all"
+        fieldConfigs={fieldConfigs}
+      />
+    </div>
+  );
+};

package/client/src/dashboard/SmartForm/JoinedRecords/getJoinFilter.ts

@@ -0,0 +1,31 @@
+import type { DetailedFilter, DetailedFilterBase } from "@common/filterUtils";
+import { isDefined } from "../../../utils/utils";
+
+export const getJoinFilter = function (
+  path: string[],
+  tableName: string,
+  rowFilter: DetailedFilterBase[] = [],
+  opts?: Pick<DetailedFilter, "minimised" | "disabled">,
+): DetailedFilter[] {
+  const f: DetailedFilter[] = rowFilter.map(({ fieldName, type, value }) => {
+    const filter = {
+      fieldName,
+      value,
+      type,
+      ...opts,
+    };
+
+    /** Why hide self joins? */
+    // if(path.at(-1) === tableName){
+    //   return filter;
+    // }
+
+    return {
+      type: "$existsJoined",
+      path: [...path.slice(0, -1), tableName].filter(isDefined),
+      filter,
+      ...opts,
+    };
+  });
+  return f;
+};