fastapi-rtk 0.2.10 → 0.2.11

package/dist/core/cjs/ActionIcons/Edit/EditDialog.cjs

@@ -5,6 +5,7 @@ const constants = require("fastapi-rtk/constants");
 const utils = require("fastapi-rtk/utils");
 const core = require("@mantine/core");
 const hooks = require("@mantine/hooks");
+const lodash = require("../../_virtual/lodash.cjs");
 const React = require("react");
 const convertToFormInputs = require("../../fab-react-toolkit-patch/utils/convertToFormInputs.cjs");
 const useApi = require("../../hooks/api/useApi.cjs");
@@ -23,11 +24,31 @@ function EditDialog({ jsonForms: __jsonForms, ...props }) {
     () => utils.deepMerge({ __: { setNull: true } }, _jsonForms, __jsonForms),
     [_jsonForms, __jsonForms]
   );
+  const { fab } = useInfo.useInfo();
+  const initialState = React.useMemo(
+    () => ({
+      ...constants.initialState,
+      data: fab ? convertToFormInputs.convertToFormInputs((item == null ? void 0 : item.result) || {}, info.edit_columns) : convertToFormInputs$1.convertToFormInputs((item == null ? void 0 : item.result) || {}, info.edit_schema)
+    }),
+    [fab, info.edit_columns, info.edit_schema, item == null ? void 0 : item.result]
+  );
+  const initialStateRef = React.useRef(initialState);
+  React.useEffect(() => {
+    setState({ data: initialState.data });
+    initialStateRef.current = initialState;
+  }, [initialState, setState]);
   const onSubmit = React.useCallback(
     (e) => {
       e == null ? void 0 : e.preventDefault();
       setLoading(true);
-      updateEntry(utils.getItemId(getItem()), getState().data).then((res) => {
+      const new_data = Object.entries(getState().data).reduce((acc, [key, value]) => {
+        if (lodash.lodashExports.isEqual(value, initialStateRef.current.data[key])) {
+          return acc;
+        }
+        acc[key] = value;
+        return acc;
+      }, {});
+      updateEntry(utils.getItemId(getItem()), new_data).then((res) => {
         if (res) {
           refetch();
           refetchInfo();
@@ -40,17 +61,6 @@ function EditDialog({ jsonForms: __jsonForms, ...props }) {
     },
     [setLoading, updateEntry, getItem, getState, refetch, refetchInfo, setOpened]
   );
-  const { fab } = useInfo.useInfo();
-  const initialState = React.useMemo(
-    () => ({
-      ...constants.initialState,
-      data: fab ? convertToFormInputs.convertToFormInputs((item == null ? void 0 : item.result) || {}, info.edit_columns) : convertToFormInputs$1.convertToFormInputs((item == null ? void 0 : item.result) || {}, info.edit_schema)
-    }),
-    [fab, info.edit_columns, info.edit_schema, item == null ? void 0 : item.result]
-  );
-  React.useEffect(() => {
-    setState({ data: initialState.data });
-  }, [initialState, setState]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     CommonModal.CommonModal,
     {

package/dist/core/cjs/Tables/NextGenDataGrid/NextGenDataGrid.cjs

@@ -28,7 +28,7 @@ const useToolbarAlertBanner = require("./hooks/useToolbarAlertBanner/useToolbarA
 const baseProps = { enableStickyHeader: true, enableColumnPinning: true };
 const NextGenDataGrid = React.forwardRef((props, ref) => {
   var _a, _b, _c;
-  const { info, data, queryParams, refetch, specialKey } = useApi.useApi();
+  const { info, data, queryParams, setQueryParams, refetch, specialKey } = useApi.useApi();
   const propsFromMantineTheme = core.useProps("NextGenDataGrid", {}, {});
   const {
     children,
@@ -55,6 +55,7 @@ const NextGenDataGrid = React.forwardRef((props, ref) => {
     enableAdvancedFilters,
     wrapperProps,
     memo,
+    queryOnlyVisibleColumns,
     // Deprecated props
     bodySeparator,
     bodyTruncate,
@@ -192,6 +193,18 @@ const NextGenDataGrid = React.forwardRef((props, ref) => {
     onSelectCheckbox == null ? void 0 : onSelectCheckbox(Object.keys(mrtTable.getState().rowSelection));
     bulkActions == null ? void 0 : bulkActions.setSelectedIds(Object.keys(mrtTable.getState().rowSelection));
   }, [bulkActions, data == null ? void 0 : data.ids, mrtTable.getState().rowSelection, onSelectCheckbox]);
+  React.useEffect(() => {
+    if (!queryOnlyVisibleColumns || !(data == null ? void 0 : data.list_columns)) {
+      return;
+    }
+    const columnVisibility = mrtTable.getState().columnVisibility;
+    const visibleColumns = mrtTable.getAllColumns().filter((col) => columnVisibility[col.id] !== false).filter((col) => data.list_columns.includes(col.id));
+    if (data.list_columns.length === visibleColumns.length) {
+      setQueryParams({ columns: [] });
+      return;
+    }
+    setQueryParams({ columns: visibleColumns.map((col) => col.id) });
+  }, [mrtTable.getState().columnVisibility, setQueryParams]);
   const { setView: setViewAdd } = useForms.useForms("add");
   const { setView: setViewEdit } = useForms.useForms("edit");
   React.useEffect(() => {

package/dist/core/cjs/Tables/NextGenDataGrid/hooks/useColumns/Cell.cjs

@@ -13,7 +13,8 @@ const Cell = ({ body, col, textFilterSeparator, mrtProps }) => {
   const auth = useAuth.useAuth();
   const { specialKey } = useApi.useApi();
   const colProps = utils.mergeProps(body, specialKey.all, col);
-  const { component, separator, truncate, tooltipProps, highlightProps } = colProps;
+  const { component, separator, truncate, highlight: _highlight, tooltipProps, highlightProps } = colProps;
+  let functionProps = { api, auth, data: cell.row.original, colProps, mrtProps };
   const highlights = React.useMemo(() => {
     const globalFilter = table.getState().globalFilter;
     const columnTextFilter = column.getFilterValue();
@@ -24,8 +25,12 @@ const Cell = ({ body, col, textFilterSeparator, mrtProps }) => {
     if (columnTextFilter && typeof columnTextFilter === "string") {
       highlights2.push(...columnTextFilter.split(textFilterSeparator).map((f) => f.trim()));
     }
+    if (_highlight) {
+      const extraHighlight = utils.parseFromValuesOrFunc(_highlight, functionProps);
+      highlights2.push(...Array.isArray(extraHighlight) ? extraHighlight : [extraHighlight]);
+    }
     return highlights2;
-  }, [column.getFilterValue(), table.getState().globalFilter, textFilterSeparator]);
+  }, [column.getFilterValue(), table.getState().globalFilter, textFilterSeparator, _highlight]);
   const cellObj = React.useMemo(() => {
     const result = { value: cell.getValue(), truncate: {}, highlight: [] };
     if (typeof result.value === "number") {
@@ -53,16 +58,7 @@ const Cell = ({ body, col, textFilterSeparator, mrtProps }) => {
     return result;
   }, [cell.getValue(), separator, truncate]);
   const highlight = React.useMemo(() => [...highlights, ...cellObj.highlight], [highlights, cellObj.highlight]);
-  const functionProps = {
-    api,
-    auth,
-    data: cell.row.original,
-    highlight,
-    cell: cellObj,
-    colProps,
-    componentProps: { value: cellObj.value },
-    mrtProps
-  };
+  functionProps = { ...functionProps, highlight, cell: cellObj, componentProps: { value: cellObj.value } };
   return /* @__PURE__ */ jsxRuntime.jsx(
     FallbackWrapper.FallbackWrapper,
     {

package/dist/core/cjs/_virtual/_commonjsHelpers.cjs

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
+exports.commonjsGlobal = commonjsGlobal;
 exports.getDefaultExportFromCjs = getDefaultExportFromCjs;

package/dist/core/cjs/_virtual/lodash.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lodash = require("../../../.external/cjs/lodash@4.17.21/lodash/lodash.cjs");
+var lodashExports = lodash.__require();
+exports.lodashExports = lodashExports;

package/dist/core/cjs/_virtual/lodash2.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var lodash = { exports: {} };
+exports.__module = lodash;

package/dist/core/esm/ActionIcons/Edit/EditDialog.mjs

@@ -3,7 +3,8 @@ import { DEBOUNCE_LOADING_DELAY, initialState, VIEW_MODE } from "fastapi-rtk/con
 import { deepMerge, getItemId } from "fastapi-rtk/utils";
 import { useProps } from "@mantine/core";
 import { useDebouncedState } from "@mantine/hooks";
-import { useMemo, useCallback, useEffect } from "react";
+import { l as lodashExports } from "../../_virtual/lodash.mjs";
+import { useMemo, useRef, useEffect, useCallback } from "react";
 import { convertToFormInputs } from "../../fab-react-toolkit-patch/utils/convertToFormInputs.mjs";
 import { useApi } from "../../hooks/api/useApi.mjs";
 import { useForms } from "../../hooks/api/useForms.mjs";
@@ -21,11 +22,31 @@ function EditDialog({ jsonForms: __jsonForms, ...props }) {
     () => deepMerge({ __: { setNull: true } }, _jsonForms, __jsonForms),
     [_jsonForms, __jsonForms]
   );
+  const { fab } = useInfo();
+  const initialState$1 = useMemo(
+    () => ({
+      ...initialState,
+      data: fab ? convertToFormInputs((item == null ? void 0 : item.result) || {}, info.edit_columns) : convertToFormInputs$1((item == null ? void 0 : item.result) || {}, info.edit_schema)
+    }),
+    [fab, info.edit_columns, info.edit_schema, item == null ? void 0 : item.result]
+  );
+  const initialStateRef = useRef(initialState$1);
+  useEffect(() => {
+    setState({ data: initialState$1.data });
+    initialStateRef.current = initialState$1;
+  }, [initialState$1, setState]);
   const onSubmit = useCallback(
     (e) => {
       e == null ? void 0 : e.preventDefault();
       setLoading(true);
-      updateEntry(getItemId(getItem()), getState().data).then((res) => {
+      const new_data = Object.entries(getState().data).reduce((acc, [key, value]) => {
+        if (lodashExports.isEqual(value, initialStateRef.current.data[key])) {
+          return acc;
+        }
+        acc[key] = value;
+        return acc;
+      }, {});
+      updateEntry(getItemId(getItem()), new_data).then((res) => {
         if (res) {
           refetch();
           refetchInfo();
@@ -38,17 +59,6 @@ function EditDialog({ jsonForms: __jsonForms, ...props }) {
     },
     [setLoading, updateEntry, getItem, getState, refetch, refetchInfo, setOpened]
   );
-  const { fab } = useInfo();
-  const initialState$1 = useMemo(
-    () => ({
-      ...initialState,
-      data: fab ? convertToFormInputs((item == null ? void 0 : item.result) || {}, info.edit_columns) : convertToFormInputs$1((item == null ? void 0 : item.result) || {}, info.edit_schema)
-    }),
-    [fab, info.edit_columns, info.edit_schema, item == null ? void 0 : item.result]
-  );
-  useEffect(() => {
-    setState({ data: initialState$1.data });
-  }, [initialState$1, setState]);
   return /* @__PURE__ */ jsx(
     CommonModal,
     {

package/dist/core/esm/Tables/NextGenDataGrid/NextGenDataGrid.mjs

@@ -26,7 +26,7 @@ import { useToolbarAlertBanner } from "./hooks/useToolbarAlertBanner/useToolbarA
 const baseProps = { enableStickyHeader: true, enableColumnPinning: true };
 const NextGenDataGrid = forwardRef((props, ref) => {
   var _a, _b, _c;
-  const { info, data, queryParams, refetch, specialKey } = useApi();
+  const { info, data, queryParams, setQueryParams, refetch, specialKey } = useApi();
   const propsFromMantineTheme = useProps("NextGenDataGrid", {}, {});
   const {
     children,
@@ -53,6 +53,7 @@ const NextGenDataGrid = forwardRef((props, ref) => {
     enableAdvancedFilters,
     wrapperProps,
     memo,
+    queryOnlyVisibleColumns,
     // Deprecated props
     bodySeparator,
     bodyTruncate,
@@ -190,6 +191,18 @@ const NextGenDataGrid = forwardRef((props, ref) => {
     onSelectCheckbox == null ? void 0 : onSelectCheckbox(Object.keys(mrtTable.getState().rowSelection));
     bulkActions == null ? void 0 : bulkActions.setSelectedIds(Object.keys(mrtTable.getState().rowSelection));
   }, [bulkActions, data == null ? void 0 : data.ids, mrtTable.getState().rowSelection, onSelectCheckbox]);
+  useEffect(() => {
+    if (!queryOnlyVisibleColumns || !(data == null ? void 0 : data.list_columns)) {
+      return;
+    }
+    const columnVisibility = mrtTable.getState().columnVisibility;
+    const visibleColumns = mrtTable.getAllColumns().filter((col) => columnVisibility[col.id] !== false).filter((col) => data.list_columns.includes(col.id));
+    if (data.list_columns.length === visibleColumns.length) {
+      setQueryParams({ columns: [] });
+      return;
+    }
+    setQueryParams({ columns: visibleColumns.map((col) => col.id) });
+  }, [mrtTable.getState().columnVisibility, setQueryParams]);
   const { setView: setViewAdd } = useForms("add");
   const { setView: setViewEdit } = useForms("edit");
   useEffect(() => {

package/dist/core/esm/Tables/NextGenDataGrid/hooks/useColumns/Cell.mjs

@@ -11,7 +11,8 @@ const Cell = ({ body, col, textFilterSeparator, mrtProps }) => {
   const auth = useAuth();
   const { specialKey } = useApi();
   const colProps = mergeProps(body, specialKey.all, col);
-  const { component, separator, truncate, tooltipProps, highlightProps } = colProps;
+  const { component, separator, truncate, highlight: _highlight, tooltipProps, highlightProps } = colProps;
+  let functionProps = { api, auth, data: cell.row.original, colProps, mrtProps };
   const highlights = useMemo(() => {
     const globalFilter = table.getState().globalFilter;
     const columnTextFilter = column.getFilterValue();
@@ -22,8 +23,12 @@ const Cell = ({ body, col, textFilterSeparator, mrtProps }) => {
     if (columnTextFilter && typeof columnTextFilter === "string") {
       highlights2.push(...columnTextFilter.split(textFilterSeparator).map((f) => f.trim()));
     }
+    if (_highlight) {
+      const extraHighlight = parseFromValuesOrFunc(_highlight, functionProps);
+      highlights2.push(...Array.isArray(extraHighlight) ? extraHighlight : [extraHighlight]);
+    }
     return highlights2;
-  }, [column.getFilterValue(), table.getState().globalFilter, textFilterSeparator]);
+  }, [column.getFilterValue(), table.getState().globalFilter, textFilterSeparator, _highlight]);
   const cellObj = useMemo(() => {
     const result = { value: cell.getValue(), truncate: {}, highlight: [] };
     if (typeof result.value === "number") {
@@ -51,16 +56,7 @@ const Cell = ({ body, col, textFilterSeparator, mrtProps }) => {
     return result;
   }, [cell.getValue(), separator, truncate]);
   const highlight = useMemo(() => [...highlights, ...cellObj.highlight], [highlights, cellObj.highlight]);
-  const functionProps = {
-    api,
-    auth,
-    data: cell.row.original,
-    highlight,
-    cell: cellObj,
-    colProps,
-    componentProps: { value: cellObj.value },
-    mrtProps
-  };
+  functionProps = { ...functionProps, highlight, cell: cellObj, componentProps: { value: cellObj.value } };
   return /* @__PURE__ */ jsx(
     FallbackWrapper,
     {

package/dist/core/esm/_virtual/_commonjsHelpers.mjs

@@ -1,6 +1,8 @@
+var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
 export {
+  commonjsGlobal,
   getDefaultExportFromCjs
 };

package/dist/core/esm/_virtual/lodash.mjs

@@ -0,0 +1,5 @@
+import { __require as requireLodash } from "../../../.external/esm/lodash@4.17.21/lodash/lodash.mjs";
+var lodashExports = requireLodash();
+export {
+  lodashExports as l
+};

package/dist/core/esm/_virtual/lodash2.mjs

@@ -0,0 +1,4 @@
+var lodash = { exports: {} };
+export {
+  lodash as __module
+};

package/dist/core/lib/Tables/NextGenDataGrid/NextGenDataGrid.d.ts

@@ -32,6 +32,82 @@ export type NextGenDataGridFilterSyncProps = {
      */
     delay?: number;
 };
+export type NextGenDataGridBodyCellHighlightProps = {
+    /**
+     * - API instance
+     */
+    api: Record<string, any>;
+    /**
+     * - Auth instance
+     */
+    auth: Record<string, any>;
+    /**
+     * - Row data
+     */
+    data: Record<string, any>;
+    /**
+     * - Column properties
+     */
+    colProps: Record<string, any>;
+    /**
+     * - MantineReactTable props
+     */
+    mrtProps: Record<string, any>;
+};
+export type NextGenDataGridBodyCellCellProps = {
+    /**
+     * - The value of the cell, either `string` or `string[]`
+     */
+    value: string | string[];
+    /**
+     * - The truncate object containing the original and truncated value
+     */
+    truncate: Record<string, any>;
+    /**
+     * - The highlight keywords to highlight in the cell value
+     */
+    highlight: string[];
+};
+export type NextGenDataGridBodyCellComponentProps = {
+    /**
+     * - The value of the cell, either `string` or `string[]`
+     */
+    value: string | string[];
+};
+export type NextGenDataGridBodyCellProps = {
+    /**
+     * - API instance
+     */
+    api: Record<string, any>;
+    /**
+     * - Auth instance
+     */
+    auth: Record<string, any>;
+    /**
+     * - Row data
+     */
+    data: Record<string, any>;
+    /**
+     * - Column properties
+     */
+    colProps: Record<string, any>;
+    /**
+     * - MantineReactTable props
+     */
+    mrtProps: Record<string, any>;
+    /**
+     * - Array of highlight keywords
+     */
+    highlights: string[];
+    /**
+     * - The cell object containing the value, truncate and highlight
+     */
+    cell: NextGenDataGridBodyCellCellProps;
+    /**
+     * - Props for the cell component
+     */
+    componentProps: NextGenDataGridBodyCellComponentProps;
+};
 export type NextGenDataGridHeaderProps = {
     /**
      * - Customize the header that is shown above the filter
@@ -88,7 +164,7 @@ export type NextGenDataGridBodyProps = {
     /**
      * - Customize the component within the body
      */
-    component?: JSX.Element | (({ api, auth, mrtProps }: any) => JSX.Element);
+    component?: JSX.Element | ((props: NextGenDataGridBodyCellProps) => JSX.Element);
     /**
      * - Separate the value of a column into multiple rows
      */
@@ -97,14 +173,18 @@ export type NextGenDataGridBodyProps = {
      * - Truncate the value of a column to a certain length. Will be shown as `...` when it exceeds the length with a tooltip containing the full value
      */
     truncate?: number;
+    /**
+     * - Additional highlight keywords to highlight in the cell value. Can be a string, an array of strings, or a function that returns a string or an array of strings
+     */
+    highlight?: string | string[] | ((props: NextGenDataGridBodyCellHighlightProps) => string | string[]);
     /**
      * - Props for the tooltip component that is shown when the value is truncated. The `value` is the value of the cell, either `string` or `string[]`, `data` is the row data, and `cellObj` is the cell object containing the value, truncate and highlight
      */
-    tooltipProps?: Record<string, any> | (({ value, data, cellObj }: any) => Record<string, any>);
+    tooltipProps?: Record<string, any> | ((props: NextGenDataGridBodyCellProps & NextGenDataGridBodyCellComponentProps) => Record<string, any>);
     /**
      * - Props for the highlight component. The `value` is the value of the cell, either `string` or `string[]`, `data` is the row data, and `cellObj` is the cell object containing the value, truncate and highlight
      */
-    highlightProps?: Record<string, any> | (({ value, data, cellObj }: any) => Record<string, any>);
+    highlightProps?: Record<string, any> | ((props: NextGenDataGridBodyCellProps & NextGenDataGridBodyCellComponentProps) => Record<string, any>);
 };
 export type NextGenDataGridProps = {
     /**
@@ -201,9 +281,13 @@ export type NextGenDataGridProps = {
     wrapperProps?: Record<string, any>;
     /**
      * - Whether to memoize the filters and body cells. If `true`, both filters and body cells will be memoized. If `'filters'`, only filters will be memoized. If `'cells'`, only body cells will be memoized. Defaults to `false` (no memoization)
-     * Deprecated props
      */
     memo?: boolean | "filters" | "cells";
+    /**
+     * - Whether to only query the visible columns from the backend. When enabled, it modifies the `columns` from the `queryParams` to only include the visible columns. Defaults to `false`
+     * Deprecated props
+     */
+    queryOnlyVisibleColumns?: boolean;
     /**
      * - Body separator for the table
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fastapi-rtk",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "private": false,
   "description": "A React component library for FastAPI in combination with FastAPI React Toolkit backend, built with Mantine, JsonForms, and Zustand.",
   "license": "MIT",