@ynput/ayon-frontend-shared 0.2.2 → 0.2.4

package/dist/shared/src/containers/ProjectTreeTable/ProjectTreeTable.cjs.js

@@ -5,7 +5,7 @@ const React = require("react");
 const reactVirtual = require("@tanstack/react-virtual");
 const reactTable = require("@tanstack/react-table");
 const clsx = require("clsx");
-const ProjectTreeTableColumns = require("./ProjectTreeTableColumns.cjs.js");
+const buildTreeTableColumns = require("./buildTreeTableColumns.cjs.js");
 const ProjectTreeTable_styled = require("./ProjectTreeTable.styled.cjs.js");
 const HeaderActionButton = require("./components/HeaderActionButton.cjs.js");
 const EmptyPlaceholder = require("../../components/EmptyPlaceholder/EmptyPlaceholder.cjs.js");
@@ -17,86 +17,16 @@ const SelectedRowsContext = require("./context/SelectedRowsContext.cjs.js");
 const ColumnSettingsContext = require("./context/ColumnSettingsContext.cjs.js");
 const useCustomColumnWidthVars = require("./hooks/useCustomColumnWidthVars.cjs.js");
 const usePrefetchFolderTasks = require("./hooks/usePrefetchFolderTasks.cjs.js");
-const useLocalStorage = require("../../hooks/useLocalStorage.cjs.js");
-require("../../context/RemoteModulesContext.cjs.js");
-require("../../../../_virtual/runtime.cjs.js");
-require("../../../../_virtual/semver.cjs.js");
-require("../../api/base/client.cjs.js");
-require("../../api/generated/graphql.cjs.js");
-require("../../api/generated/access.cjs.js");
-require("../../api/generated/actions.cjs.js");
-require("../../api/generated/activityFeed.cjs.js");
-require("../../api/generated/addons.cjs.js");
-require("../../api/generated/anatomy.cjs.js");
-require("../../api/generated/attributes.cjs.js");
-require("../../api/generated/authentication.cjs.js");
-require("../../api/generated/bundles.cjs.js");
-require("../../api/generated/configuration.cjs.js");
-require("../../api/generated/desktop.cjs.js");
-require("../../api/generated/entityLists.cjs.js");
-require("../../api/generated/events.cjs.js");
-require("../../api/generated/files.cjs.js");
-require("../../api/generated/folders.cjs.js");
-require("../../api/generated/inbox.cjs.js");
-require("../../api/generated/links.cjs.js");
-require("../../api/generated/market.cjs.js");
-require("../../api/generated/onboarding.cjs.js");
-require("../../api/generated/operations.cjs.js");
-require("../../api/generated/products.cjs.js");
-require("../../api/generated/projectDashboard.cjs.js");
-require("../../api/generated/projects.cjs.js");
-require("../../api/generated/reviewables.cjs.js");
-require("../../api/generated/services.cjs.js");
-require("../../api/generated/system.cjs.js");
-require("../../api/generated/tasks.cjs.js");
-require("../../api/generated/teams.cjs.js");
-require("../../api/generated/thumbnails.cjs.js");
-require("../../api/generated/uRIs.cjs.js");
-require("../../api/generated/users.cjs.js");
-require("../../api/generated/versions.cjs.js");
-require("../../api/generated/workfiles.cjs.js");
-require("../../api/generated/ynputCloud.cjs.js");
-require("../../api/queries/actions/getActions.cjs.js");
-require("../../api/queries/activities/getActivities.cjs.js");
-require("../../api/queries/activities/updateActivities.cjs.js");
-require("../../api/queries/activities/updateReaction.cjs.js");
-require("../../api/queries/activities/getMentions.cjs.js");
-require("../../api/queries/addons/getAddons.cjs.js");
-require("../../api/queries/addons/updateAddons.cjs.js");
-require("../../api/queries/attributes/getAttributes.cjs.js");
-require("../../api/queries/attributes/updateAttributes.cjs.js");
-require("../../api/queries/authentication/getAuthentication.cjs.js");
-require("../../api/queries/entities/getEntity.cjs.js");
-require("../../api/queries/entities/getEntityPanel.cjs.js");
-require("../../api/queries/entities/updateEntity.cjs.js");
-require("../../api/queries/folders/getFolders.cjs.js");
-require("../../api/queries/overview/getOverview.cjs.js");
-require("../../api/queries/overview/updateOverview.cjs.js");
-require("../../api/queries/project/getProject.cjs.js");
-require("../../api/queries/project/updateProject.cjs.js");
-require("../../api/queries/review/getReview.cjs.js");
-require("../../api/queries/review/updateReview.cjs.js");
-require("../../api/queries/system/getSystem.cjs.js");
-require("../../api/queries/userDashboard/getUserDashboard.cjs.js");
-require("../../api/queries/users/getUsers.cjs.js");
-require("../../api/queries/users/updateUsers.cjs.js");
-require("../../api/queries/watchers/getWatchers.cjs.js");
-require("../../../../_virtual/lodash.cjs.js");
-require("react-toastify");
-require("../../context/DetailsPanelContext.cjs.js");
-require("../../context/ThumbnailUploaderContext.cjs.js");
-require("../../context/pip/PiPProvider.cjs.js");
-const ReactDOM = require("react-dom");
-require("../../context/pip/PiPWrapper.cjs.js");
-require("react-router-dom");
-require("custom-protocol-check");
 const useCellContextMenu = require("./hooks/useCellContextMenu.cjs.js");
 const useColumnVirtualization = require("./hooks/useColumnVirtualization.cjs.js");
 const useKeyboardNavigation = require("./hooks/useKeyboardNavigation.cjs.js");
 const cellUtils = require("./utils/cellUtils.cjs.js");
 const loadingUtils = require("./utils/loadingUtils.cjs.js");
+const ReactDOM = require("react-dom");
 const ayonReactComponents = require("@ynput/ayon-react-components");
 const ProjectTableContext = require("./context/ProjectTableContext.cjs.js");
+const getTableFieldOptions = require("./utils/getTableFieldOptions.cjs.js");
+const getReadOnlyLists = require("./utils/getReadOnlyLists.cjs.js");
 const getCommonPinningStyles = (column) => {
   const isPinned = column.getIsPinned();
   return {
@@ -107,16 +37,14 @@ const getCommonPinningStyles = (column) => {
     zIndex: isPinned ? 100 : 0
   };
 };
-const FlexTableWithProviders = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ClipboardContext.ClipboardProvider, { options: props.options, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(FlexTable, { ...props }) });
-};
-const FlexTable = ({
+const ProjectTreeTable = ({
   scope,
-  attribs,
-  options,
   sliceId,
   fetchMoreOnBottomReached,
   onOpenNew,
+  readOnly,
+  excludedColumns,
+  extraColumns,
   pt,
   ...props
 }) => {
@@ -127,29 +55,39 @@ const FlexTable = ({
     columnPinning,
     columnPinningUpdater,
     columnOrder,
-    columnOrderUpdater
-  } = ColumnSettingsContext.useColumnSettings();
+    columnOrderUpdater,
+    columnSizing,
+    columnSizingUpdater
+  } = ColumnSettingsContext.useColumnSettingsContext();
   const {
+    projectInfo,
     tableData,
+    attribFields,
+    entitiesMap,
+    users,
     isLoading,
     isInitialized,
     expanded,
+    projectName,
     updateExpanded,
     toggleExpandAll,
-    toggleExpanded,
     sorting,
     updateSorting,
     showHierarchy
   } = ProjectTableContext.useProjectTableContext();
+  const { statuses = [], folderTypes = [], taskTypes = [], tags = [] } = projectInfo || {};
+  const options = React.useMemo(
+    () => getTableFieldOptions.getTableFieldOptions({
+      users,
+      statuses,
+      folderTypes,
+      taskTypes,
+      tags
+    }),
+    [users, statuses, folderTypes, taskTypes]
+  );
   const tableContainerRef = React.useRef(null);
   const { registerGrid } = SelectionCellsContext.useSelectionCellsContext();
-  const [columnSizing, setColumnSizing] = useLocalStorage.useLocalStorage(
-    `column-widths-${scope}`,
-    {}
-  );
-  const updateColumnSizing = (columnSizingUpdater) => {
-    setColumnSizing(reactTable.functionalUpdate(columnSizingUpdater, columnSizing));
-  };
   React.useEffect(() => {
     fetchMoreOnBottomReached(tableContainerRef.current);
   }, [fetchMoreOnBottomReached]);
@@ -158,26 +96,44 @@ const FlexTable = ({
     const tableRowsCount = ((_a2 = tableContainerRef.current) == null ? void 0 : _a2.querySelectorAll("tbody tr").length) || 0;
     const loadingAttrib2 = loadingUtils.generateDummyAttributes();
     const loadingRows2 = loadingUtils.generateLoadingRows(
-      attribs,
+      attribFields,
       showHierarchy && tableData.length > 0 ? Math.min(tableRowsCount, 50) : 50
     );
     return { loadingAttrib: loadingAttrib2, loadingRows: loadingRows2 };
-  }, [attribs, tableData, showHierarchy, tableContainerRef.current]);
+  }, [attribFields, tableData, showHierarchy, tableContainerRef.current]);
   const showLoadingRows = !isInitialized || isLoading;
-  const columns = ProjectTreeTableColumns({
-    tableData: showLoadingRows ? loadingRows : tableData,
-    columnSizing,
-    attribs: isInitialized ? attribs : loadingAttrib,
-    isLoading: !isInitialized,
-    showHierarchy,
-    sliceId,
-    options,
-    toggleExpandAll: (id) => toggleExpandAll([id]),
-    toggleExpanded: (id) => toggleExpanded(id)
-  });
+  const { readOnlyColumns, readOnlyAttribs } = React.useMemo(
+    () => getReadOnlyLists.getReadOnlyLists(attribFields, readOnly),
+    [attribFields, readOnly]
+  );
+  const { updateEntities } = CellEditingContext.useCellEditing();
+  const columnAttribs = React.useMemo(
+    () => isInitialized ? attribFields : loadingAttrib,
+    [attribFields, loadingAttrib, isInitialized]
+  );
+  const columns = React.useMemo(
+    () => buildTreeTableColumns.default({
+      attribs: columnAttribs,
+      showHierarchy,
+      options,
+      extraColumns,
+      excluded: excludedColumns
+    }),
+    [
+      // columnAttribs,
+      // showHierarchy,
+      // options,
+      extraColumns
+      // excludedColumns
+    ]
+  );
   const table = reactTable.useReactTable({
     data: showLoadingRows ? loadingRows : tableData,
     columns,
+    defaultColumn: {
+      minSize: 50,
+      size: 150
+    },
     enableRowSelection: true,
     //enable row selection for all rows
     getRowId: (row) => row.id,
@@ -196,7 +152,7 @@ const FlexTable = ({
     onSortingChange: updateSorting,
     columnResizeMode: "onChange",
     onColumnPinningChange: columnPinningUpdater,
-    onColumnSizingChange: updateColumnSizing,
+    onColumnSizingChange: columnSizingUpdater,
     onColumnVisibilityChange: columnVisibilityUpdater,
     onColumnOrderChange: columnOrderUpdater,
     // @ts-ignore
@@ -212,7 +168,14 @@ const FlexTable = ({
       columnVisibility,
       columnOrder
     },
-    enableSorting: true
+    enableSorting: true,
+    meta: {
+      projectName,
+      options,
+      readOnly: readOnlyColumns,
+      updateEntities,
+      toggleExpandAll
+    }
   });
   const { rows } = table.getRowModel();
   React.useEffect(() => {
@@ -234,59 +197,72 @@ const FlexTable = ({
     columnPinning
   });
   const columnSizeVars = useCustomColumnWidthVars(table, columnSizing);
-  const readOnlyColumns = React.useMemo(
-    () => attribs.filter((attrib) => attrib.readOnly).map((attrib) => "attrib_" + attrib.name),
-    [attribs]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ProjectTreeTable_styled.TableWrapper, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-    ProjectTreeTable_styled.TableContainer,
+  const attribByField = React.useMemo(() => {
+    return attribFields.reduce((acc, attrib) => {
+      var _a2, _b, _c;
+      if ((_b = (_a2 = attrib.data) == null ? void 0 : _a2.enum) == null ? void 0 : _b.length) {
+        acc[attrib.name] = (_c = attrib.data) == null ? void 0 : _c.enum;
+      }
+      return acc;
+    }, {});
+  }, [attribFields]);
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    ClipboardContext.ClipboardProvider,
     {
-      ref: tableContainerRef,
-      style: { height: "100%", padding: 0 },
-      onScroll: (e) => fetchMoreOnBottomReached(e.currentTarget),
-      ...pt == null ? void 0 : pt.container,
-      className: clsx("table-container", (_a = pt == null ? void 0 : pt.container) == null ? void 0 : _a.className),
-      children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
-        "table",
+      entitiesMap,
+      columnEnums: { ...options, ...attribByField },
+      columnReadOnly: readOnlyAttribs,
+      children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ProjectTreeTable_styled.TableWrapper, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        ProjectTreeTable_styled.TableContainer,
         {
-          style: {
-            display: "grid",
-            borderCollapse: "collapse",
-            userSelect: "none",
-            ...columnSizeVars,
-            width: table.getTotalSize()
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-              TableHead,
-              {
-                columnVirtualizer,
-                table,
-                virtualPaddingLeft,
-                virtualPaddingRight,
-                isLoading,
-                readOnlyColumns,
-                ...pt == null ? void 0 : pt.head
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-              TableBody,
-              {
-                columnVirtualizer,
-                table,
-                tableContainerRef,
-                virtualPaddingLeft,
-                virtualPaddingRight,
-                showHierarchy,
-                attribs,
-                onOpenNew
-              }
-            )
-          ]
+          ref: tableContainerRef,
+          style: { height: "100%", padding: 0 },
+          onScroll: (e) => fetchMoreOnBottomReached(e.currentTarget),
+          ...pt == null ? void 0 : pt.container,
+          className: clsx("table-container", (_a = pt == null ? void 0 : pt.container) == null ? void 0 : _a.className),
+          children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+            "table",
+            {
+              style: {
+                display: "grid",
+                borderCollapse: "collapse",
+                userSelect: "none",
+                ...columnSizeVars,
+                width: table.getTotalSize()
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                  TableHead,
+                  {
+                    columnVirtualizer,
+                    table,
+                    virtualPaddingLeft,
+                    virtualPaddingRight,
+                    isLoading,
+                    readOnlyColumns,
+                    ...pt == null ? void 0 : pt.head
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                  TableBody,
+                  {
+                    columnVirtualizer,
+                    table,
+                    tableContainerRef,
+                    virtualPaddingLeft,
+                    virtualPaddingRight,
+                    showHierarchy,
+                    attribs: attribFields,
+                    onOpenNew
+                  }
+                )
+              ]
+            }
+          )
         }
-      )
+      ) })
     }
-  ) });
+  );
 };
 const TableHead = ({
   columnVirtualizer,
@@ -331,7 +307,12 @@ const TableHeadRow = ({
         {
           header,
           isLoading,
-          isReadOnly: readOnlyColumns == null ? void 0 : readOnlyColumns.includes(header.id)
+          isReadOnly: readOnlyColumns == null ? void 0 : readOnlyColumns.includes(header.id),
+          canSort: header.column.getCanSort(),
+          canFilter: header.column.getCanFilter(),
+          canHide: header.column.getCanHide(),
+          canPin: header.column.getCanPin(),
+          canResize: header.column.getCanResize()
         },
         header.id
       );
@@ -342,81 +323,80 @@ const TableHeadRow = ({
     ) : null
   ] }, headerGroup.id);
 };
-const TableHeadCell = ({ header, isLoading, isReadOnly }) => {
+const TableHeadCell = ({
+  header,
+  isLoading,
+  canFilter,
+  canHide,
+  canSort,
+  canPin,
+  canResize,
+  isReadOnly
+}) => {
   const { column } = header;
-  const isRowSelectionColumn = column.id === SelectionCellsContext.ROW_SELECTION_COLUMN_ID;
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
     ProjectTreeTable_styled.HeaderCell,
     {
       className: clsx(header.id, "shimmer-dark", {
         loading: isLoading,
-        large: column.id === "folderType",
         "last-pinned-left": column.getIsPinned() === "left" && column.getIsLastColumn("left")
       }),
       style: {
         ...getCommonPinningStyles(column),
         width: `calc(var(--header-${header == null ? void 0 : header.id}-size) * 1px)`
       },
-      children: header.isPlaceholder ? null : /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
-        ProjectTreeTable_styled.TableCellContent,
-        {
-          className: clsx("bold", {
-            large: column.id === "folderType"
-          }),
-          children: [
-            reactTable.flexRender(column.columnDef.header, header.getContext()),
-            isReadOnly && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.Icon, { icon: "lock", "data-tooltip": "You only have permission to read this column." }),
-            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(ProjectTreeTable_styled.HeaderButtons, { className: "actions", children: [
-              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-                HeaderActionButton,
-                {
-                  icon: "visibility_off",
-                  selected: !column.getIsVisible(),
-                  onClick: column.getToggleVisibilityHandler()
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-                HeaderActionButton,
-                {
-                  icon: "push_pin",
-                  selected: header.column.getIsPinned() === "left",
-                  onClick: () => {
-                    if (header.column.getIsPinned() === "left") {
-                      header.column.pin(false);
-                    } else {
-                      header.column.pin("left");
-                    }
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-                HeaderActionButton,
-                {
-                  icon: "sort",
-                  style: {
-                    transform: column.getIsSorted() === "asc" ? "scaleY(-1)" : void 0
-                  },
-                  onClick: column.getToggleSortingHandler(),
-                  selected: !!column.getIsSorted()
-                }
-              )
-            ] }),
-            !isRowSelectionColumn && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-              ProjectTreeTable_styled.ResizedHandler,
-              {
-                ...{
-                  onDoubleClick: () => column.resetSize(),
-                  onMouseDown: header.getResizeHandler(),
-                  onTouchStart: header.getResizeHandler(),
-                  className: clsx("resize-handle", {
-                    resizing: column.getIsResizing()
-                  })
+      children: header.isPlaceholder ? null : /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(ProjectTreeTable_styled.TableCellContent, { className: clsx("bold"), children: [
+        reactTable.flexRender(column.columnDef.header, header.getContext()),
+        isReadOnly && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.Icon, { icon: "lock", "data-tooltip": "You only have permission to read this column." }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(ProjectTreeTable_styled.HeaderButtons, { className: "actions", children: [
+          canHide && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            HeaderActionButton,
+            {
+              icon: "visibility_off",
+              selected: !column.getIsVisible(),
+              onClick: column.getToggleVisibilityHandler()
+            }
+          ),
+          canPin && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            HeaderActionButton,
+            {
+              icon: "push_pin",
+              selected: header.column.getIsPinned() === "left",
+              onClick: () => {
+                if (header.column.getIsPinned() === "left") {
+                  header.column.pin(false);
+                } else {
+                  header.column.pin("left");
                 }
               }
-            )
-          ]
-        }
-      )
+            }
+          ),
+          canSort && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            HeaderActionButton,
+            {
+              icon: "sort",
+              style: {
+                transform: column.getIsSorted() === "asc" ? "scaleY(-1)" : void 0
+              },
+              onClick: column.getToggleSortingHandler(),
+              selected: !!column.getIsSorted()
+            }
+          )
+        ] }),
+        canResize && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          ProjectTreeTable_styled.ResizedHandler,
+          {
+            ...{
+              onDoubleClick: () => column.resetSize(),
+              onMouseDown: header.getResizeHandler(),
+              onTouchStart: header.getResizeHandler(),
+              className: clsx("resize-handle", {
+                resizing: column.getIsResizing()
+              })
+            }
+          }
+        )
+      ] })
     },
     header.id
   );
@@ -474,10 +454,7 @@ const TableBody = ({
         );
       })
     }
-  ) : tableContainerRef.current && ReactDOM.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(EmptyPlaceholder.EmptyPlaceholder, { message: "No folders or tasks found" }),
-    tableContainerRef.current
-  );
+  ) : tableContainerRef.current && ReactDOM.createPortal(/* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(EmptyPlaceholder.EmptyPlaceholder, { message: "No items found" }), tableContainerRef.current);
 };
 const TableBodyRow = ({
   columnVirtualizer,
@@ -552,7 +529,6 @@ const TableCell = ({ cell, rowId, cellId, className, showHierarchy, ...props })
       $isLastPinned: isLastLeftPinnedColumn,
       className: clsx(
         cell.column.id,
-        cell.column.id === "folderType" ? "large" : "",
         {
           selected: isCellSelected(cellId),
           focused: isCellFocused(cellId),
@@ -607,5 +583,5 @@ const TableCell = ({ cell, rowId, cellId, className, showHierarchy, ...props })
   );
 };
 const TableCellMemo = React.memo(TableCell);
-exports.ProjectTreeTable = FlexTableWithProviders;
+exports.ProjectTreeTable = ProjectTreeTable;
 //# sourceMappingURL=ProjectTreeTable.cjs.js.map