@prostgles/prostgles 2.3.6-dev.1786548258

package/client/src/dashboard/W_SQL/runSQLErrorHints.ts

@@ -0,0 +1,150 @@
+import type { SQLHandler } from "prostgles-types";
+import type { SQLSuggestion } from "../SQLEditor/W_SQLEditor";
+import { isObject } from "@common/publishUtils";
+import { parseError } from "./runSQL/runSQL";
+
+export const runSQLErrorHints = async (
+  rawErr: any,
+  suggestions: SQLSuggestion[] | undefined,
+  sql: SQLHandler,
+  query: string,
+): Promise<string | undefined> => {
+  const err = parseError(rawErr);
+  const message: string =
+    isObject(err) ? err.message?.toLowerCase?.() : undefined;
+  try {
+    const where: string | undefined = err?.message;
+    let hint;
+    if (typeof message !== "string") {
+    } else if (
+      message.endsWith(" is not a function") &&
+      query.toLowerCase().includes("drop function")
+    ) {
+      const funcName = message.split("()")[0];
+      const [funcInfo] = await sql(
+        `SELECT routine_name, routine_type FROM information_schema.routines WHERE routine_name = \${funcName}`,
+        { funcName },
+        { returnType: "rows" },
+      );
+      if (funcInfo) {
+        hint = `Hint: DROP ${funcInfo.routine_type} ${funcInfo.routine_name}();`;
+      }
+    } else if (message.startsWith("error: permission denied for schema ")) {
+      const schemaName = message.split("for schema ")[1] ?? "schema_name";
+      const currentPGUser =
+        (await sql(`SELECT "current_user"()`, {}, { returnType: "value" })) ??
+        "this_user";
+      hint = `Hint: Must grant usage on schema from a more privileged account: \nGRANT USAGE ON SCHEMA ${schemaName} TO ${currentPGUser}`;
+    } else if (
+      where?.startsWith("PL/pgSQL function ") &&
+      where.endsWith("at RAISE")
+    ) {
+      const funcStartKwd = " function ";
+      const funcName = where.slice(
+        where.indexOf(funcStartKwd) + funcStartKwd.length,
+        where.indexOf("("),
+      );
+      const funcS = suggestions?.find(
+        (s) => s.funcInfo && s.funcInfo.escaped_identifier.includes(funcName),
+      );
+      if (funcS?.funcInfo?.definition) {
+        const lineNumKwd = " line ";
+        const lineNumber = +where.slice(
+          where.lastIndexOf(lineNumKwd) + lineNumKwd.length,
+          where.lastIndexOf(" at RAISE"),
+        );
+        if (Number.isInteger(lineNumber)) {
+          return (
+            message +
+            "\n\n" +
+            where +
+            ":\n\n" +
+            funcS.funcInfo.definition
+              .split("\n")
+              .map((l, i) => `L${i + 1}     ${l}`)
+              .slice(Math.max(0, lineNumber - 5), lineNumber + 5)
+              .join("\n")
+          );
+        }
+      }
+    } else if (message === "error: syntax error at end of input") {
+      hint = "Hint: More commands expected at end of query";
+    } else if (
+      message.includes(`error: cannot drop the currently open database`) ||
+      (message.startsWith(`error: database "`) &&
+        message.includes("is being accessed by other users") &&
+        query.trim().toLowerCase().startsWith("drop database"))
+    ) {
+      try {
+        const { server_version } = (await sql(
+          "SHOW server_version;",
+          {},
+          { returnType: "row" },
+        )) as any;
+        if (server_version >= "13" || server_version.startsWith("13")) {
+          hint =
+            'Hint: Connect to a different database and run the command with "WITH (FORCE);"';
+        } else {
+          let isSameCon = true;
+          try {
+            const { current_database } = (await sql(
+              "SELECT current_database() as current_database",
+              {},
+              { returnType: "row" },
+            )) as any;
+            isSameCon = query.includes(current_database);
+          } catch (e) {}
+          hint =
+            "Hint: Must disconnect all users first. " +
+            (isSameCon ?
+              "Run the following queries from another connection (this one will be closed). "
+            : "") +
+            "Replace 'mydb' as required: \n\nALTER DATABASE mydb CONNECTION LIMIT 0; \n SELECT pg_terminate_backend(pid) \nFROM pg_stat_activity WHERE datname = 'mydb'; \n DROP DATABASE mydb;";
+        }
+      } catch (e) {}
+    } else if (
+      message.startsWith("error: function") &&
+      message.endsWith("does not exist") &&
+      err.code === "42883" &&
+      suggestions
+    ) {
+      const errFuncDef = message.slice(16, -15);
+      const errFuncName = errFuncDef.split("(")[0];
+      if (errFuncName) {
+        const matchingFuncs = suggestions.filter(
+          (f) => f.type === "function" && f.name === errFuncName,
+        );
+        if (matchingFuncs.length) {
+          hint =
+            "Similar functions: " +
+            matchingFuncs
+              .map(
+                (f) =>
+                  `${f.escapedIdentifier}(${f.args?.map((a) => a.data_type).join(", ")})`,
+              )
+              .join(", ");
+        } else {
+          hint = "Hint: Check name or ensure the required extension is enabled";
+        }
+      }
+    } else if (
+      message.includes("type") &&
+      message.match(`geometry|geography`) &&
+      message.includes("does not exist")
+    ) {
+      hint = "Hint: Might need postgis for this: CREATE EXTENSION postgis;";
+    } else if (
+      message.includes("cannot be dropped because some objects depend on it")
+    ) {
+      hint = `Hint: Try reassigning objects: \nREASSIGN OWNED BY ${JSON.stringify(message.split('"')[1] || "your_user")} TO postgres;`;
+    }
+
+    if (hint) {
+      return message + `\n\n${hint}`;
+    }
+  } catch (e) {
+    console.error(e);
+  }
+
+  return undefined;
+};

package/client/src/dashboard/W_Table/CardView/CardItem/CardItemBody.tsx

@@ -0,0 +1,151 @@
+import { FlexRowWrap } from "@components/Flex";
+import { _PG_date, isDefined, type AnyObject } from "prostgles-types";
+import React from "react";
+import type { CardLayout } from "src/dashboard/Dashboard/cardLayout";
+import type { DBSchemaTableWJoins } from "../../../Dashboard/dashboardUtils";
+import { RenderValue } from "../../../SmartForm/SmartFormField/RenderValue";
+import type { IndexedRow } from "../CardView";
+import type { CardViewRowProps } from "./CardViewRow";
+import { CARD_ITEM_PADDING } from "../constants";
+
+export const CardBody = ({
+  visibleCols,
+  cardCellMinWidth,
+  cardRows,
+  row,
+  hideCardFieldNames,
+  maxCardRowHeight,
+  rowIndex,
+  indexedRows,
+  cardLayout,
+  table,
+}: Pick<
+  Required<CardViewRowProps["cardOpts"]>,
+  "cardCellMinWidth" | "cardRows"
+> & {
+  visibleCols: CardViewRowProps["cols"];
+  row: AnyObject;
+  maxCardRowHeight: number | undefined;
+  hideCardFieldNames: boolean | undefined;
+  cardCellMinWidth: string;
+  rowIndex: number;
+  indexedRows: IndexedRow[];
+  cardLayout: CardLayout | undefined;
+  table: DBSchemaTableWJoins;
+}) => {
+  const { visibleColumns = visibleCols.map((c) => c.name) } = table.card ?? {};
+  const columnNodeList = visibleColumns
+    .map((c) => {
+      const columnName = typeof c === "string" ? c : c.column;
+      return visibleCols.find((vc) => vc.name === columnName);
+    })
+    .filter(isDefined)
+    .map((c, ci) => {
+      const value = row[c.name] as unknown;
+      const renderedVal = <RenderValue column={c} value={value} />;
+      return (
+        <div
+          key={ci}
+          title={c.udt_name}
+          className={
+            "flex-col gap-p25 min-w-0 " + (cardRows > 1 ? " h-fit w-fit " : "")
+          }
+          style={{ minWidth: cardCellMinWidth }}
+        >
+          {!hideCardFieldNames && (
+            <div
+              className=" text-2 noselect"
+              onContextMenu={
+                c.onContextMenu &&
+                ((e) => c.onContextMenu?.(e, e.currentTarget, c, () => {}))
+              }
+            >
+              {c.label || c.name}
+            </div>
+          )}
+          <div
+            className=" o-auto "
+            title={
+              (
+                typeof value === "string" &&
+                (_PG_date.some((v) => v === c.udt_name) ||
+                  c.tsDataType === "number")
+              ) ?
+                value
+              : ""
+            }
+            style={{
+              lineHeight: 1.33,
+              ...(c.getCellStyle?.(row, value, value) || {}),
+              maxHeight: `${maxCardRowHeight || 800}px`,
+            }}
+          >
+            {c.onRender?.({
+              row: row,
+              value,
+              renderedVal,
+              rowIndex: rowIndex,
+              nextRow: indexedRows[rowIndex + 1],
+              prevRow: indexedRows[rowIndex - 1],
+            }) ?? renderedVal}
+          </div>
+        </div>
+      );
+    });
+
+  if (cardLayout) {
+    const columnNodes: Record<string, React.ReactNode> = {};
+    visibleCols.forEach((c, i) => {
+      columnNodes[c.name] = columnNodeList[i];
+    });
+    return (
+      <CardLayoutRenderer
+        cardLayout={cardLayout}
+        columnNodes={columnNodes}
+        item={cardLayout}
+      />
+    );
+  }
+
+  return (
+    <FlexRowWrap
+      className={"CardBody jc-start ai-start f-0 min-w-0"}
+      style={{
+        gap: CARD_ITEM_PADDING,
+        padding: CARD_ITEM_PADDING,
+        paddingTop: 0,
+      }}
+    >
+      {columnNodeList}
+    </FlexRowWrap>
+  );
+};
+
+const CardLayoutRenderer = ({
+  cardLayout,
+  columnNodes,
+  item,
+}: {
+  cardLayout: CardLayout;
+  columnNodes: Record<string, React.ReactNode>;
+  item: CardLayout["children"][number];
+}) => {
+  if (item.type === "node") {
+    const node = columnNodes[item.columnName];
+    if (!node) return <>Column node missing for {item.columnName}</>;
+    return node;
+  }
+
+  return (
+    <div style={item.style} data-node-type={item.type || "container"}>
+      {item.children.map((childItem, index) => (
+        <CardLayoutRenderer
+          key={index}
+          cardLayout={cardLayout}
+          columnNodes={columnNodes}
+          item={childItem}
+        />
+      ))}
+    </div>
+  );
+};

package/client/src/dashboard/W_Table/CardView/CardItem/CardItemHeader.tsx

@@ -0,0 +1,150 @@
+import { FlexCol, FlexRow } from "@components/Flex";
+import { MediaViewer } from "@components/MediaViewer/MediaViewer";
+import React from "react";
+import { RenderValue } from "../../../SmartForm/SmartFormField/RenderValue";
+import { getEditColumn } from "../../tableUtils/getEditColumn";
+import { DragHeader } from "../DragHeader";
+import type { CardViewRowProps } from "./CardViewRow";
+import { CARD_ITEM_PADDING } from "../constants";
+
+export const CardHeader = ({
+  w,
+  table,
+  cols,
+  indexedRow,
+  indexedRows,
+  rowIndex,
+  moveItemsProps,
+  tableHandler,
+  draggedRow,
+  onEditClickRow,
+  allIndexedRows,
+  onDataChanged,
+  setDraggedRow,
+}: Omit<CardViewRowProps, "cardOpts" | "props">) => {
+  const { card, columns } = table;
+  const headerColumn =
+    card?.headerColumn ?
+      table.columns.find((c) => c.name === card.headerColumn)
+    : undefined;
+
+  const subHeaderColumn =
+    card?.subHeaderColumn ?
+      cols.find((c) => c.name === card.subHeaderColumn)
+    : undefined;
+
+  const avatarColumn =
+    card?.avatarColumn ?
+      table.columns.find((c) => c.name === card.avatarColumn)
+    : undefined;
+
+  const row = indexedRow.data;
+  const avatarUrl =
+    avatarColumn && typeof row[avatarColumn.name] === "string" ?
+      (row[avatarColumn.name] as string)
+    : undefined;
+
+  const padding = CARD_ITEM_PADDING;
+  return (
+    <FlexRow
+      className="CardHeader relative w-full ai-start"
+      style={{ gap: padding, paddingLeft: avatarUrl ? padding : undefined }}
+    >
+      {avatarUrl && (
+        <MediaViewer
+          style={{
+            flex: "none",
+            width: "3em",
+            height: "3em",
+            borderRadius: "50%",
+            overflow: "hidden",
+            alignSelf: "center",
+            border: "1px solid var(--b-color)",
+          }}
+          url={avatarUrl}
+          content_type="image"
+        />
+      )}
+      <FlexCol
+        className="w-full f-1 gap-p25"
+        style={{
+          padding,
+          paddingBottom: ".5em",
+          ...(avatarUrl ?
+            {
+              paddingLeft: 0,
+            }
+          : {}),
+        }}
+      >
+        {headerColumn && (
+          <div
+            className="w-full f-1"
+            title={headerColumn.label || headerColumn.name}
+            style={{
+              fontWeight: "bold",
+              fontSize: "1.1em",
+            }}
+          >
+            <RenderValue column={headerColumn} value={row[headerColumn.name]} />
+          </div>
+        )}
+        {subHeaderColumn && (
+          <div
+            className="w-full f-1 text-1"
+            title={subHeaderColumn.info?.label || subHeaderColumn.name}
+            style={{
+              fontSize: "0.9em",
+            }}
+          >
+            {subHeaderColumn.onRender?.({
+              row: row,
+              value: row[subHeaderColumn.name],
+              renderedVal: (
+                <RenderValue
+                  column={subHeaderColumn}
+                  value={row[subHeaderColumn.name]}
+                />
+              ),
+              rowIndex: rowIndex,
+              nextRow: indexedRows[rowIndex + 1],
+              prevRow: indexedRows[rowIndex - 1],
+            })}
+          </div>
+        )}
+      </FlexCol>
+      {moveItemsProps && (
+        <DragHeader
+          {...moveItemsProps}
+          padding={padding}
+          tableHandler={tableHandler}
+          table={table}
+          allIndexedRows={allIndexedRows}
+          columns={columns}
+          onDataChanged={onDataChanged}
+          onEditClickRow={onEditClickRow}
+          indexedRow={indexedRow}
+          draggedRow={draggedRow}
+          setDraggedRow={setDraggedRow}
+        />
+      )}
+      {!w?.options.hideEditRow &&
+        getEditColumn({
+          table,
+          columnConfig: w?.columns || undefined,
+          tableHandler,
+          onClickRow: (...args) => {
+            if (draggedRow) return;
+            onEditClickRow(...args);
+          },
+        }).onRender!({
+          value: "",
+          renderedVal: "",
+          row,
+          prevRow: indexedRows[rowIndex - 1],
+          nextRow: indexedRows[rowIndex + 1],
+          rowIndex: rowIndex,
+        })}
+    </FlexRow>
+  );
+};

package/client/src/dashboard/W_Table/CardView/CardItem/CardViewRow.tsx

@@ -0,0 +1,160 @@
+import { matchObj } from "@common/utils";
+import { FlexCol } from "@components/Flex";
+import React, { useMemo } from "react";
+import type { DBSchemaTableWJoins } from "../../../Dashboard/dashboardUtils";
+import type { CardViewProps, IndexedRow } from "../CardView";
+import type { CardViewState } from "../useCardViewState";
+import { CardBody } from "./CardItemBody";
+import { CardHeader } from "./CardItemHeader";
+
+const marginTop = ".5em";
+
+export type CardViewRowProps = Pick<
+  CardViewProps,
+  | "props"
+  | "cardOpts"
+  | "onEditClickRow"
+  | "tableHandler"
+  | "onDataChanged"
+  | "cols"
+  | "w"
+> &
+  Pick<
+    CardViewState,
+    "moveItemsProps" | "draggedRow" | "setDraggedRow" | "allIndexedRows"
+  > & {
+    indexedRow: IndexedRow;
+    rowIndex: number;
+    indexedRows: IndexedRow[];
+    table: DBSchemaTableWJoins;
+  };
+
+export type KanBanDraggedRow = IndexedRow & {
+  height: number;
+  target: IndexedRow | undefined;
+};
+
+export const CardViewRow = (props: CardViewRowProps) => {
+  const {
+    props: { activeRow, activeRowColor, joinFilter, onClickRow },
+    indexedRow,
+    cardOpts,
+    table,
+    indexedRows,
+    rowIndex,
+    cols,
+    w,
+    draggedRow,
+  } = props;
+
+  const {
+    cardRows = 1,
+    hideCardFieldNames,
+    maxCardWidth = "min(700px, 100%)",
+    hideEmptyCardCells = true,
+    maxCardRowHeight,
+    cardCellMinWidth = "",
+  } = cardOpts;
+  const marginRight = cardRows > 1 ? `.5em` : "auto";
+  const marginLeftRight =
+    cardRows === 1 && maxCardWidth !== "100%" ? "auto" : "";
+  const row = indexedRow.data;
+  const isMoving = draggedRow;
+  const itemMarginTop =
+    isMoving && indexedRow.index === isMoving.index + 1 ?
+      `calc(${isMoving.height}px + 1em)`
+    : marginTop;
+  const isDragTarget = isMoving?.target?.index === indexedRow.index;
+
+  const style = useMemo(() => {
+    const isActive =
+      joinFilter || (activeRow && matchObj(activeRow.row_filter, row));
+    return {
+      gap: 0,
+      padding: 0,
+      background: isDragTarget ? "var(--bg-li-selected)" : "var(--bg-color-0)",
+      ...(maxCardWidth !== "100%" ?
+        {
+          width: maxCardWidth,
+        }
+      : {
+          width: cardRows > 1 ? `calc(${99 / cardRows}% - .5em)` : "",
+        }),
+      margin: `${itemMarginTop} ${marginRight} 0 ${marginLeftRight}`,
+      ...(isActive && {
+        boxShadow: `inset 0 0 10px ${activeRowColor}`,
+      }),
+    };
+  }, [
+    activeRow,
+    activeRowColor,
+    cardRows,
+    isDragTarget,
+    itemMarginTop,
+    joinFilter,
+    marginLeftRight,
+    marginRight,
+    maxCardWidth,
+    row,
+  ]);
+
+  const visibleCols = useMemo(
+    () =>
+      cols.filter((c) => {
+        const headerFields = [
+          table.card?.headerColumn,
+          table.card?.subHeaderColumn,
+          table.card?.avatarColumn,
+        ];
+        if (headerFields.includes(c.name)) {
+          return false;
+        }
+        return (
+          !c.hidden &&
+          !(
+            hideEmptyCardCells &&
+            [null, undefined, ""].includes(`${row[c.name] ?? ""}`.trim())
+          )
+        );
+      }),
+    [
+      cols,
+      hideEmptyCardCells,
+      row,
+      table.card?.avatarColumn,
+      table.card?.headerColumn,
+      table.card?.subHeaderColumn,
+    ],
+  );
+
+  return (
+    <FlexCol
+      data-command="CardView.row"
+      key={indexedRow.index}
+      data-row-index={indexedRow.index}
+      className={
+        "CardView_Item relative card jc-start ai-stretch f-0 min-w-0 " +
+        (cardRows > 1 ? " fit " : "")
+      }
+      style={style}
+      onClick={(e) => {
+        if (window.getSelection()?.toString()) return;
+        onClickRow?.(row, e);
+      }}
+    >
+      <CardHeader {...props} />
+      <CardBody
+        visibleCols={visibleCols}
+        cardCellMinWidth={cardCellMinWidth}
+        cardRows={cardRows}
+        row={row}
+        hideCardFieldNames={hideCardFieldNames}
+        maxCardRowHeight={maxCardRowHeight}
+        rowIndex={rowIndex}
+        indexedRows={indexedRows}
+        cardLayout={w?.options.cardLayout}
+        table={table}
+      />
+    </FlexCol>
+  );
+};

package/client/src/dashboard/W_Table/CardView/CardView.tsx

@@ -0,0 +1,87 @@
+import type { PaginationProps } from "@components/Table/Pagination";
+import { Pagination } from "@components/Table/Pagination";
+import type { TableHandlerClient } from "prostgles-client";
+import type { AnyObject } from "prostgles-types";
+import React from "react";
+import type {
+  ChartOptions,
+  WindowSyncItem,
+} from "../../Dashboard/dashboardUtils";
+import type { W_TableProps, W_TableState } from "../W_Table";
+import type { OnClickEditRow } from "../tableUtils/getEditColumn";
+import type { ProstglesTableColumn } from "../tableUtils/getTableCols";
+import { CardViewColumn } from "./CardViewColumn";
+import { CardViewKanban } from "./CardViewKanban";
+import { useCardViewState } from "./useCardViewState";
+
+export type CardViewProps = {
+  props: W_TableProps;
+  state: W_TableState;
+  cardOpts: Extract<ChartOptions<"table">["viewAs"], { type: "card" }>;
+  w?: WindowSyncItem<"table">;
+  tableHandler: Partial<TableHandlerClient<AnyObject, void>>;
+  paginationProps: PaginationProps;
+  style?: React.CSSProperties;
+  className?: string;
+  onEditClickRow: OnClickEditRow;
+  onDataChanged: VoidFunction;
+  cols: ProstglesTableColumn[];
+};
+
+export type IndexedRow = {
+  data: AnyObject;
+  index: number;
+};
+
+export const CardView = (_props: CardViewProps) => {
+  const { state, paginationProps, className = "", style, cardOpts } = _props;
+  const { rows: _rows = [] } = state;
+
+  const cardViewState = useCardViewState(_props);
+  const {
+    table,
+    groupByColumn,
+    allIndexedRows,
+    draggedRow,
+    setDraggedRow,
+    moveItemsProps,
+  } = cardViewState;
+
+  if (!table) {
+    return <div>Table info missing</div>;
+  }
+
+  return (
+    <div
+      className={
+        "CardView o-auto min-s-0 flex-col f-1 bg-color-2  " + className
+      }
+      style={style}
+    >
+      {groupByColumn ?
+        <CardViewKanban
+          key="kanban"
+          {..._props}
+          cardOpts={cardOpts}
+          groupByColumn={groupByColumn}
+          allIndexedRows={allIndexedRows}
+          table={table}
+          draggedRow={draggedRow}
+          setDraggedRow={setDraggedRow}
+          moveItemsProps={moveItemsProps}
+        />
+      : <CardViewColumn
+          key="column"
+          {..._props}
+          table={table}
+          indexedRows={allIndexedRows}
+          draggedRow={draggedRow}
+          setDraggedRow={setDraggedRow}
+          moveItemsProps={moveItemsProps}
+          allIndexedRows={allIndexedRows}
+        />
+      }
+      <Pagination {...paginationProps} />
+    </div>
+  );
+};