@multiplatform.one/backoffice 6.6.0 → 7.0.0

package/dist/cjs/list/DoctypeListScreen.cjs

@@ -30,16 +30,19 @@ var import_theme = require("@multiplatform.one/theme");
 var import_forms = require("@multiplatform.one/forms");
 var import_react = require("@phosphor-icons/react");
 var import_frappe_ui = require("@multiplatform.one/frappe-ui");
-var import_table = require("@multiplatform.one/table");
 var import_react2 = require("react");
 var import_react_i18next = require("react-i18next");
 var import_BackofficeProvider = require("../config/BackofficeProvider.cjs");
 var import_i18n = require("../i18n/index.cjs");
-var import_paths = require("../navigation/paths.cjs");
 var import_QuickEntryDialog = require("../quickEntry/QuickEntryDialog.cjs");
+var import_platformHooks = require("../form/platformHooks.cjs");
+var import_deskLinks = require("../shared/deskLinks.cjs");
+var import_listNavContext = require("../shared/listNavContext.cjs");
 var import_useRecentVisit = require("../shared/useRecentVisit.cjs");
 var import_fieldPermissions = require("../form/fieldPermissions.cjs");
 var import_useDoctypeMeta = require("../shared/useDoctypeMeta.cjs");
+var import_viewAvailability = require("../views/viewAvailability.cjs");
+var import_ViewSwitcherMenu = require("../views/ViewSwitcherMenu.cjs");
 var import_useFrappeApp = require("../shared/useFrappeApp.cjs");
 var import_useUserRoles = require("../shared/useUserRoles.cjs");
 var import_AddTagsDialog = require("./AddTagsDialog.cjs");
@@ -50,6 +53,7 @@ var import_bulk_export = require("./bulk-export.cjs");
 var import_bulk_submit_cancel = require("./bulk-submit-cancel.cjs");
 var import_filter_chips = require("./filter-chips.cjs");
 var import_filterConversion = require("./filterConversion.cjs");
+var import_sidebar_stats = require("./sidebar-stats.cjs");
 var import_ListFilterBar = require("./ListFilterBar.cjs");
 var import_ListSidebar = require("./ListSidebar.cjs");
 var import_listColumns = require("./listColumns.cjs");
@@ -93,6 +97,7 @@ function DoctypeListScreen({
   const config = (0, import_frappe_ui.useFrappeConfig)();
   const app = (0, import_useFrappeApp.useFrappeApp)();
   const fixtureMode = Boolean(config?.fixtures);
+  const deskHref = config?.baseURL && !fixtureMode ? (0, import_deskLinks.deskViewUrl)(config.baseURL, doctype) : void 0;
   const sessionUser = (0, import_useSessionUserId.useSessionUserId)();
   const compactChrome = (0, import_theme.useLayoutSizeClass)() === "compact";
   (0, import_useRecentVisit.useRecentVisit)(fixtureMode ? void 0 : {
@@ -118,10 +123,8 @@ function DoctypeListScreen({
     if (fromParam.length > 0) return fromParam;
     return initialFilters ? [...initialFilters] : fromParam;
   });
-  const [filtersGen, setFiltersGen] = (0, import_react2.useState)(0);
   const [effectiveFilters, setEffectiveFilters] = (0, import_react2.useState)(null);
   const [sort, setSort] = (0, import_react2.useState)(() => (0, import_listUrlState.parseSortParam)(sortParam) ?? null);
-  const [sortGen, setSortGen] = (0, import_react2.useState)(0);
   const [refreshGen, setRefreshGen] = (0, import_react2.useState)(0);
   const [sidebarVisible, setSidebarVisible] = (0, import_react2.useState)(true);
   const [quickEntryOpen, setQuickEntryOpen] = (0, import_react2.useState)(false);
@@ -160,7 +163,6 @@ function DoctypeListScreen({
       if (doctypeChanged || !sameFilters(next, baseFiltersRef.current)) {
         setBaseFilters(next);
         setEffectiveFilters(withFixed(next));
-        setFiltersGen(generation => generation + 1);
       }
     }
     if (doctypeChanged) {
@@ -172,7 +174,6 @@ function DoctypeListScreen({
       const parsed = (0, import_listUrlState.parseSortParam)(sortParam) ?? null;
       if (!sameSort(parsed, sortRef.current)) {
         setSort(parsed);
-        setSortGen(generation => generation + 1);
       }
     }
   }, [doctype, filtersParam, sortParam, withFixed]);
@@ -190,6 +191,8 @@ function DoctypeListScreen({
   const connection = (0, import_react2.useMemo)(() => config ? {
     baseURL: config.baseURL,
     socketPort: config.socketPort,
+    siteName: config.siteName,
+    socketBaseURL: config.socketBaseURL,
     auth: config.auth ? {
       useToken: config.auth.useToken,
       token: typeof config.auth.token === "string" ? config.auth.token : void 0,
@@ -239,10 +242,17 @@ function DoctypeListScreen({
       sessionUser,
       onToggleLike: handleToggleLike,
       likeOverrides,
-      permMatrix
+      permMatrix,
+      getDocHref: name => paths.form(doctype, name),
+      onFilterClick: (fieldname, value) => {
+        const next = (0, import_sidebar_stats.toggleFacetFilter)(baseFiltersRef.current, [fieldname, "=", value]);
+        setBaseFilters(next);
+        setEffectiveFilters(withFixed(next));
+        writeUrlState(next, sortRef.current);
+      }
     });
     return columnOverrides ? columnOverrides(built) : built;
-  }, [meta, t, sessionUser, handleToggleLike, likeOverrides, permMatrix, columnOverrides]);
+  }, [meta, t, sessionUser, handleToggleLike, likeOverrides, permMatrix, columnOverrides, paths, doctype, withFixed, writeUrlState]);
   const fields = (0, import_react2.useMemo)(() => (0, import_listFields.listFieldsToFetch)(meta, permMatrix), [meta, permMatrix]);
   const filterableFields = (0, import_react2.useMemo)(() => {
     if (!meta?.fields) return void 0;
@@ -264,7 +274,6 @@ function DoctypeListScreen({
   const handleBaseFiltersChange = (0, import_react2.useCallback)(next => {
     setBaseFilters(next);
     setEffectiveFilters(withFixed(next));
-    setFiltersGen(generation => generation + 1);
     writeUrlState(next, sortRef.current);
   }, [withFixed, writeUrlState]);
   const handleSortChange = (0, import_react2.useCallback)((field, order) => {
@@ -272,7 +281,6 @@ function DoctypeListScreen({
       field,
       order
     });
-    setSortGen(generation => generation + 1);
     writeUrlState(baseFiltersRef.current, {
       field,
       order
@@ -280,6 +288,7 @@ function DoctypeListScreen({
   }, [writeUrlState]);
   const handleStateChange = (0, import_react2.useCallback)(state => {
     if (state.pagination?.pageSize) pageSizeRef.current = state.pagination.pageSize;
+    (0, import_listNavContext.setListNavContext)(doctype, (state.data ?? []).map(row => row.name).filter(value => typeof value === "string" && value.length > 0));
     const nextFilters = (0, import_filterConversion.tableStateToFrappeFilters)(state);
     setEffectiveFilters(previous => previous && sameFilters(previous, nextFilters) ? previous : nextFilters);
     const sorting = state.sorting?.[0];
@@ -295,7 +304,7 @@ function DoctypeListScreen({
         writeUrlState(baseFiltersRef.current, nextSort);
       }
     }
-  }, [writeUrlState]);
+  }, [writeUrlState, doctype]);
   const handleRefresh = (0, import_react2.useCallback)(() => {
     setRefreshGen(generation => generation + 1);
     count.refresh();
@@ -523,14 +532,26 @@ function DoctypeListScreen({
     }
   }, ...hostListActions], [t, app, doctype, count, isSubmittable, handleBulkExport, handleBulkDocstatus, capabilities.assignments.enabled, capabilities.tags.enabled, hostListActions]);
   const bulkActionsEnabled = capabilities.bulkActions.enabled;
-  const views = (0, import_react2.useMemo)(() => {
+  const availableViews = (0, import_react2.useMemo)(() => {
     if (!capabilities.views.enabled) return [];
-    return import_paths.BACKOFFICE_VIEWS.filter(view => capabilities.views.allow.includes(view) && (!viewsAllowlist || viewsAllowlist.includes(view))).map(view => ({
-      type: view,
-      label: t(`views.${view}`, view.charAt(0).toUpperCase() + view.slice(1))
-    }));
-  }, [t, capabilities.views.enabled, capabilities.views.allow, viewsAllowlist]);
-  const tableKey = `${doctype}|${refreshGen}|${sortGen}|${filtersGen}`;
+    const allow = viewsAllowlist ? capabilities.views.allow.filter(view => viewsAllowlist.includes(view)) : capabilities.views.allow;
+    return (0, import_viewAvailability.deriveAvailableViews)(meta, {
+      current: "list",
+      allow
+    });
+  }, [meta, capabilities.views.enabled, capabilities.views.allow, viewsAllowlist]);
+  const tableKey = doctype;
+  const controlledSorting = (0, import_react2.useMemo)(() => [{
+    id: sortField,
+    desc: sortOrder === "desc"
+  }], [sortField, sortOrder]);
+  const controlledTableState = (0, import_react2.useMemo)(() => ({
+    filters: initialTableFilters,
+    sorting: controlledSorting,
+    columnVisibility: {
+      modified: false
+    }
+  }), [initialTableFilters, controlledSorting]);
   if (metaError && !meta) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
       flex: 1,
@@ -556,7 +577,7 @@ function DoctypeListScreen({
     });
   }
   const showCreateFirst = !count.isLoading && count.value === 0 && currentFilters.length === 0;
-  const countText = count.isLoading ? void 0 : t("list.resultCount", {
+  const countText = count.value === void 0 && count.isLoading ? void 0 : t("list.resultCount", {
     count: count.value ?? 0,
     defaultValue_one: "{{count}} result",
     defaultValue_other: "{{count}} results"
@@ -564,24 +585,80 @@ function DoctypeListScreen({
   const handleViewChange = view => {
     if (view !== "list") navigator.navigate(paths.view(doctype, view));
   };
-  const showViewSwitcher = views.length > 1;
+  const listToolbar = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+    gap: "$1.5",
+    alignItems: "center",
+    flexWrap: "wrap",
+    children: [!compactChrome && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      size: "$3",
+      circular: true,
+      chromeless: true,
+      icon: import_react.SidebarSimpleIcon,
+      display: "none",
+      $sm: {
+        display: "flex"
+      },
+      onPress: () => setSidebarVisible(visible => !visible),
+      "aria-expanded": sidebarVisible,
+      "aria-label": sidebarVisible ? t("list.hideSidebar", "Hide sidebar") : t("list.showSidebar", "Show sidebar")
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ListFilterBar.ListFilterBar, {
+      compact: compactChrome,
+      showChips: false,
+      doctype,
+      meta,
+      filters: baseFilters,
+      onFiltersChange: handleBaseFiltersChange,
+      sortField,
+      sortOrder,
+      onSortChange: handleSortChange,
+      likedByUser: sessionUser
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ViewSwitcherMenu.ViewSwitcherMenu, {
+      views: availableViews,
+      current: "list",
+      onViewChange: handleViewChange
+    }), deskHref && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      size: "$3",
+      circular: true,
+      chromeless: true,
+      icon: import_react.ArrowSquareOutIcon,
+      onPress: () => (0, import_platformHooks.openInNewTab)(deskHref),
+      "aria-label": t("list.openInDesk", "Open in Desk")
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      size: "$3",
+      circular: true,
+      chromeless: true,
+      icon: import_react.ArrowsClockwiseIcon,
+      onPress: handleRefresh,
+      "aria-label": t("list.refresh", "Refresh")
+    }), showNew && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      size: compactChrome ? "$3" : "$2",
+      accent: true,
+      ...(compactChrome ? {
+        icon: import_react.PlusIcon
+      } : {}),
+      onPress: () => setQuickEntryOpen(true),
+      "aria-label": t("list.new", {
+        defaultValue: "New {{doctype}}",
+        doctype
+      }),
+      children: compactChrome ? t("list.newShort", "New") : t("list.new", {
+        defaultValue: "New {{doctype}}",
+        doctype
+      })
+    })]
+  });
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
     flex: 1,
-    gap: compactChrome ? "$2" : "$3",
-    padding: compactChrome ? "$3" : "$4",
-    children: [compactChrome ?
-    // Compact chrome (< 640): one title row (title + live count inline,
-    // icon refresh, compact New), then one row with the view switcher
-    // (horizontally scrollable — all views stay reachable) and the
-    // single Filter affordance (filters/sort collapse into its sheet).
-    /* @__PURE__ */
-    (0, import_jsx_runtime.jsxs)(import_components.PageHeader, {
+    gap: "$2",
+    padding: compactChrome ? "$2" : "$3",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.PageHeader, {
+      gap: "$2",
       heading: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
         gap: "$2",
         alignItems: "baseline",
         flexWrap: "wrap",
         children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.H1, {
-          size: "$7",
+          size: compactChrome ? "$6" : "$7",
           margin: 0,
           flexShrink: 1,
           minWidth: 0,
@@ -593,128 +670,18 @@ function DoctypeListScreen({
           children: countText
         }) : null]
       }),
-      actions: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
-        gap: "$2",
-        alignItems: "center",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-          size: "$3",
-          circular: true,
-          chromeless: true,
-          icon: import_react.ArrowsClockwiseIcon,
-          onPress: handleRefresh,
-          "aria-label": t("list.refresh", "Refresh")
-        }), showNew && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-          size: "$3",
-          accent: true,
-          icon: import_react.PlusIcon,
-          onPress: () => setQuickEntryOpen(true),
-          "aria-label": t("list.new", {
-            defaultValue: "New {{doctype}}",
-            doctype
-          }),
-          children: t("list.newShort", "New")
-        })]
-      }),
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
-        gap: "$2",
-        alignItems: "center",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ScrollView, {
-          horizontal: true,
-          flexGrow: 1,
-          flexShrink: 1,
-          minWidth: 0,
-          showsHorizontalScrollIndicator: false,
-          children: showViewSwitcher ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ViewSwitcher, {
-            views,
-            currentView: "list",
-            onViewChange: handleViewChange
-          }) : null
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ListFilterBar.ListFilterBar, {
-          compact: true,
-          doctype,
-          meta,
-          filters: baseFilters,
-          onFiltersChange: handleBaseFiltersChange,
-          sortField,
-          sortOrder,
-          onSortChange: handleSortChange
-        })]
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_filter_chips.FilterChips, {
+      actions: listToolbar,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_filter_chips.FilterChips, {
         meta,
         filters: baseFilters,
         onFiltersChange: handleBaseFiltersChange
-      })]
-    }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.PageHeader, {
-        title: doctype,
-        titleScale: "moderate",
-        subtitle: countText,
-        actions: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
-          gap: "$2",
-          alignItems: "center",
-          flexWrap: "wrap",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-            size: "$3",
-            circular: true,
-            chromeless: true,
-            icon: import_react.ArrowsClockwiseIcon,
-            onPress: handleRefresh,
-            "aria-label": t("list.refresh", "Refresh")
-          }), showViewSwitcher ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ViewSwitcher, {
-            views,
-            currentView: "list",
-            onViewChange: handleViewChange
-          }) : null, showNew && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-            size: "$2",
-            accent: true,
-            onPress: () => setQuickEntryOpen(true),
-            children: t("list.new", {
-              defaultValue: "New {{doctype}}",
-              doctype
-            })
-          })]
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
-        gap: "$2",
-        alignItems: "flex-start",
-        children: [!fixtureMode &&
-        // Icon-only sidebar toggle: the bare "Hide sidebar" text read
-        // as a floating label, not a control, and its 28px box missed
-        // the press floor. House Button icon slot (LC-53) + circular
-        // sub-44 floor via the house channel (LC-54); aria-expanded
-        // carries the region state.
-        /* @__PURE__ */
-        (0, import_jsx_runtime.jsx)(import_forms.Button, {
-          size: "$3",
-          circular: true,
-          chromeless: true,
-          icon: import_react.SidebarSimpleIcon,
-          display: "none",
-          $sm: {
-            display: "flex"
-          },
-          onPress: () => setSidebarVisible(visible => !visible),
-          "aria-expanded": sidebarVisible,
-          "aria-label": sidebarVisible ? t("list.hideSidebar", "Hide sidebar") : t("list.showSidebar", "Show sidebar")
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
-          flex: 1,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ListFilterBar.ListFilterBar, {
-            doctype,
-            meta,
-            filters: baseFilters,
-            onFiltersChange: handleBaseFiltersChange,
-            sortField,
-            sortOrder,
-            onSortChange: handleSortChange
-          })
-        })]
-      })]
+      })
     }), (() => {
       const listBody = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
         flex: 1,
         gap: "$2",
         alignItems: "stretch",
-        children: [sidebarVisible && !fixtureMode && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        children: [sidebarVisible && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
           display: "none",
           $sm: {
             display: "flex"
@@ -752,7 +719,7 @@ function DoctypeListScreen({
             columns,
             fields,
             serverSide: !fixtureMode,
-            ...(fixtureMode && withFixed(baseFilters).length > 0 ? {
+            ...(fixtureMode ? {
               filters: withFixed(baseFilters)
             } : {}),
             filterableFields,
@@ -764,23 +731,27 @@ function DoctypeListScreen({
               filters: initialTableFilters,
               pagination: {
                 pageIndex: 0,
-                pageSize: pageSizeRef.current
+                pageSize: fixtureMode ? 500 : pageSizeRef.current
+              },
+              columnVisibility: {
+                modified: false
               }
             },
-            enablePagination: true,
-            renderPagination: paginationProps => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table.DataTablePagination, {
-              ...paginationProps,
-              pageSizeOptions: [...PAGE_SIZES],
-              compact: true
-            }),
+            controlledState: controlledTableState,
+            refreshToken: refreshGen,
+            enablePagination: !fixtureMode,
+            paginationMode: "infinite",
+            compact: true,
             enableFiltering: false,
+            enableGlobalSearch: false,
             enableSorting: true,
             enableRowSelection: bulkActionsEnabled,
             ...(bulkActionsEnabled ? {
               bulkActions
             } : {}),
             onRowClick: handleRowClick,
-            onStateChange: handleStateChange
+            onStateChange: handleStateChange,
+            layout: "list"
           }, tableKey)
         })]
       });