@ynput/ayon-frontend-shared 0.2.3 → 0.2.5

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

@@ -1,9 +1,9 @@
 import { j as jsxRuntimeExports } from "../../../../_virtual/jsx-runtime.es.js";
-import { memo, createElement, useRef, useEffect, useMemo } from "react";
+import { memo, createElement, useMemo, useRef, useEffect } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { flexRender, useReactTable, filterFns, getSortedRowModel, getExpandedRowModel, getFilteredRowModel, getCoreRowModel, functionalUpdate } from "@tanstack/react-table";
+import { flexRender, useReactTable, filterFns, getSortedRowModel, getExpandedRowModel, getFilteredRowModel, getCoreRowModel } from "@tanstack/react-table";
 import clsx from "clsx";
-import ProjectTreeTableColumns from "./ProjectTreeTableColumns.es.js";
+import buildTreeTableColumns from "./buildTreeTableColumns.es.js";
 import { TableCell as TableCell$1, TableWrapper, TableContainer, TableHeader, ColumnHeader, TR, HeaderCell, TableCellContent, HeaderButtons, ResizedHandler } from "./ProjectTreeTable.styled.es.js";
 import HeaderActionButton from "./components/HeaderActionButton.es.js";
 import { EmptyPlaceholder } from "../../components/EmptyPlaceholder/EmptyPlaceholder.es.js";
@@ -12,89 +12,19 @@ import { useCellEditing } from "./context/CellEditingContext.es.js";
 import { useSelectionCellsContext, ROW_SELECTION_COLUMN_ID } from "./context/SelectionCellsContext.es.js";
 import { ClipboardProvider } from "./context/ClipboardContext.es.js";
 import { useSelectedRowsContext } from "./context/SelectedRowsContext.es.js";
-import { useColumnSettings } from "./context/ColumnSettingsContext.es.js";
+import { useColumnSettingsContext } from "./context/ColumnSettingsContext.es.js";
 import useCustomColumnWidthVars from "./hooks/useCustomColumnWidthVars.es.js";
 import { usePrefetchFolderTasks } from "./hooks/usePrefetchFolderTasks.es.js";
-import { useLocalStorage } from "../../hooks/useLocalStorage.es.js";
-import "../../context/RemoteModulesContext.es.js";
-import "../../../../_virtual/runtime.es.js";
-import "../../../../_virtual/semver.es.js";
-import "../../api/base/client.es.js";
-import "../../api/generated/graphql.es.js";
-import "../../api/generated/access.es.js";
-import "../../api/generated/actions.es.js";
-import "../../api/generated/activityFeed.es.js";
-import "../../api/generated/addons.es.js";
-import "../../api/generated/anatomy.es.js";
-import "../../api/generated/attributes.es.js";
-import "../../api/generated/authentication.es.js";
-import "../../api/generated/bundles.es.js";
-import "../../api/generated/configuration.es.js";
-import "../../api/generated/desktop.es.js";
-import "../../api/generated/entityLists.es.js";
-import "../../api/generated/events.es.js";
-import "../../api/generated/files.es.js";
-import "../../api/generated/folders.es.js";
-import "../../api/generated/inbox.es.js";
-import "../../api/generated/links.es.js";
-import "../../api/generated/market.es.js";
-import "../../api/generated/onboarding.es.js";
-import "../../api/generated/operations.es.js";
-import "../../api/generated/products.es.js";
-import "../../api/generated/projectDashboard.es.js";
-import "../../api/generated/projects.es.js";
-import "../../api/generated/reviewables.es.js";
-import "../../api/generated/services.es.js";
-import "../../api/generated/system.es.js";
-import "../../api/generated/tasks.es.js";
-import "../../api/generated/teams.es.js";
-import "../../api/generated/thumbnails.es.js";
-import "../../api/generated/uRIs.es.js";
-import "../../api/generated/users.es.js";
-import "../../api/generated/versions.es.js";
-import "../../api/generated/workfiles.es.js";
-import "../../api/generated/ynputCloud.es.js";
-import "../../api/queries/actions/getActions.es.js";
-import "../../api/queries/activities/getActivities.es.js";
-import "../../api/queries/activities/updateActivities.es.js";
-import "../../api/queries/activities/updateReaction.es.js";
-import "../../api/queries/activities/getMentions.es.js";
-import "../../api/queries/addons/getAddons.es.js";
-import "../../api/queries/addons/updateAddons.es.js";
-import "../../api/queries/attributes/getAttributes.es.js";
-import "../../api/queries/attributes/updateAttributes.es.js";
-import "../../api/queries/authentication/getAuthentication.es.js";
-import "../../api/queries/entities/getEntity.es.js";
-import "../../api/queries/entities/getEntityPanel.es.js";
-import "../../api/queries/entities/updateEntity.es.js";
-import "../../api/queries/folders/getFolders.es.js";
-import "../../api/queries/overview/getOverview.es.js";
-import "../../api/queries/overview/updateOverview.es.js";
-import "../../api/queries/project/getProject.es.js";
-import "../../api/queries/project/updateProject.es.js";
-import "../../api/queries/review/getReview.es.js";
-import "../../api/queries/review/updateReview.es.js";
-import "../../api/queries/system/getSystem.es.js";
-import "../../api/queries/userDashboard/getUserDashboard.es.js";
-import "../../api/queries/users/getUsers.es.js";
-import "../../api/queries/users/updateUsers.es.js";
-import "../../api/queries/watchers/getWatchers.es.js";
-import "../../../../_virtual/lodash.es.js";
-import "react-toastify";
-import "../../context/DetailsPanelContext.es.js";
-import "../../context/ThumbnailUploaderContext.es.js";
-import "../../context/pip/PiPProvider.es.js";
-import { createPortal } from "react-dom";
-import "../../context/pip/PiPWrapper.es.js";
-import "react-router-dom";
-import "custom-protocol-check";
 import useCellContextMenu from "./hooks/useCellContextMenu.es.js";
 import useColumnVirtualization from "./hooks/useColumnVirtualization.es.js";
 import useKeyboardNavigation from "./hooks/useKeyboardNavigation.es.js";
 import { getCellId } from "./utils/cellUtils.es.js";
 import { generateDummyAttributes, generateLoadingRows } from "./utils/loadingUtils.es.js";
+import { createPortal } from "react-dom";
 import { Icon } from "@ynput/ayon-react-components";
 import { useProjectTableContext } from "./context/ProjectTableContext.es.js";
+import { getTableFieldOptions } from "./utils/getTableFieldOptions.es.js";
+import { getReadOnlyLists } from "./utils/getReadOnlyLists.es.js";
 const getCommonPinningStyles = (column) => {
   const isPinned = column.getIsPinned();
   return {
@@ -105,16 +35,14 @@ const getCommonPinningStyles = (column) => {
     zIndex: isPinned ? 100 : 0
   };
 };
-const FlexTableWithProviders = (props) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ClipboardProvider, { options: props.options, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FlexTable, { ...props }) });
-};
-const FlexTable = ({
+const ProjectTreeTable = ({
   scope,
-  attribs,
-  options,
   sliceId,
   fetchMoreOnBottomReached,
   onOpenNew,
+  readOnly,
+  excludedColumns,
+  extraColumns,
   pt,
   ...props
 }) => {
@@ -125,29 +53,39 @@ const FlexTable = ({
     columnPinning,
     columnPinningUpdater,
     columnOrder,
-    columnOrderUpdater
-  } = useColumnSettings();
+    columnOrderUpdater,
+    columnSizing,
+    columnSizingUpdater
+  } = useColumnSettingsContext();
   const {
+    projectInfo,
     tableData,
+    attribFields,
+    entitiesMap,
+    users,
     isLoading,
     isInitialized,
     expanded,
+    projectName,
     updateExpanded,
     toggleExpandAll,
-    toggleExpanded,
     sorting,
     updateSorting,
     showHierarchy
   } = useProjectTableContext();
+  const { statuses = [], folderTypes = [], taskTypes = [], tags = [] } = projectInfo || {};
+  const options = useMemo(
+    () => getTableFieldOptions({
+      users,
+      statuses,
+      folderTypes,
+      taskTypes,
+      tags
+    }),
+    [users, statuses, folderTypes, taskTypes]
+  );
   const tableContainerRef = useRef(null);
   const { registerGrid } = useSelectionCellsContext();
-  const [columnSizing, setColumnSizing] = useLocalStorage(
-    `column-widths-${scope}`,
-    {}
-  );
-  const updateColumnSizing = (columnSizingUpdater) => {
-    setColumnSizing(functionalUpdate(columnSizingUpdater, columnSizing));
-  };
   useEffect(() => {
     fetchMoreOnBottomReached(tableContainerRef.current);
   }, [fetchMoreOnBottomReached]);
@@ -156,26 +94,44 @@ const FlexTable = ({
     const tableRowsCount = ((_a2 = tableContainerRef.current) == null ? void 0 : _a2.querySelectorAll("tbody tr").length) || 0;
     const loadingAttrib2 = generateDummyAttributes();
     const loadingRows2 = 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 } = useMemo(
+    () => getReadOnlyLists(attribFields, readOnly),
+    [attribFields, readOnly]
+  );
+  const { updateEntities } = useCellEditing();
+  const columnAttribs = useMemo(
+    () => isInitialized ? attribFields : loadingAttrib,
+    [attribFields, loadingAttrib, isInitialized]
+  );
+  const columns = useMemo(
+    () => buildTreeTableColumns({
+      attribs: columnAttribs,
+      showHierarchy,
+      options,
+      extraColumns,
+      excluded: excludedColumns
+    }),
+    [
+      // columnAttribs,
+      // showHierarchy,
+      // options,
+      extraColumns
+      // excludedColumns
+    ]
+  );
   const table = useReactTable({
     data: showLoadingRows ? loadingRows : tableData,
     columns,
+    defaultColumn: {
+      minSize: 50,
+      size: 150
+    },
     enableRowSelection: true,
     //enable row selection for all rows
     getRowId: (row) => row.id,
@@ -194,7 +150,7 @@ const FlexTable = ({
     onSortingChange: updateSorting,
     columnResizeMode: "onChange",
     onColumnPinningChange: columnPinningUpdater,
-    onColumnSizingChange: updateColumnSizing,
+    onColumnSizingChange: columnSizingUpdater,
     onColumnVisibilityChange: columnVisibilityUpdater,
     onColumnOrderChange: columnOrderUpdater,
     // @ts-ignore
@@ -210,7 +166,14 @@ const FlexTable = ({
       columnVisibility,
       columnOrder
     },
-    enableSorting: true
+    enableSorting: true,
+    meta: {
+      projectName,
+      options,
+      readOnly: readOnlyColumns,
+      updateEntities,
+      toggleExpandAll
+    }
   });
   const { rows } = table.getRowModel();
   useEffect(() => {
@@ -232,59 +195,72 @@ const FlexTable = ({
     columnPinning
   });
   const columnSizeVars = useCustomColumnWidthVars(table, columnSizing);
-  const readOnlyColumns = useMemo(
-    () => attribs.filter((attrib) => attrib.readOnly).map((attrib) => "attrib_" + attrib.name),
-    [attribs]
-  );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(TableWrapper, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-    TableContainer,
+  const attribByField = 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__ */ jsxRuntimeExports.jsx(
+    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__ */ jsxRuntimeExports.jsxs(
-        "table",
+      entitiesMap,
+      columnEnums: { ...options, ...attribByField },
+      columnReadOnly: readOnlyAttribs,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(TableWrapper, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        TableContainer,
         {
-          style: {
-            display: "grid",
-            borderCollapse: "collapse",
-            userSelect: "none",
-            ...columnSizeVars,
-            width: table.getTotalSize()
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              TableHead,
-              {
-                columnVirtualizer,
-                table,
-                virtualPaddingLeft,
-                virtualPaddingRight,
-                isLoading,
-                readOnlyColumns,
-                ...pt == null ? void 0 : pt.head
-              }
-            ),
-            /* @__PURE__ */ 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__ */ jsxRuntimeExports.jsxs(
+            "table",
+            {
+              style: {
+                display: "grid",
+                borderCollapse: "collapse",
+                userSelect: "none",
+                ...columnSizeVars,
+                width: table.getTotalSize()
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  TableHead,
+                  {
+                    columnVirtualizer,
+                    table,
+                    virtualPaddingLeft,
+                    virtualPaddingRight,
+                    isLoading,
+                    readOnlyColumns,
+                    ...pt == null ? void 0 : pt.head
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  TableBody,
+                  {
+                    columnVirtualizer,
+                    table,
+                    tableContainerRef,
+                    virtualPaddingLeft,
+                    virtualPaddingRight,
+                    showHierarchy,
+                    attribs: attribFields,
+                    onOpenNew
+                  }
+                )
+              ]
+            }
+          )
         }
-      )
+      ) })
     }
-  ) });
+  );
 };
 const TableHead = ({
   columnVirtualizer,
@@ -329,7 +305,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
       );
@@ -340,81 +321,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 === ROW_SELECTION_COLUMN_ID;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     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__ */ jsxRuntimeExports.jsxs(
-        TableCellContent,
-        {
-          className: clsx("bold", {
-            large: column.id === "folderType"
-          }),
-          children: [
-            flexRender(column.columnDef.header, header.getContext()),
-            isReadOnly && /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: "lock", "data-tooltip": "You only have permission to read this column." }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(HeaderButtons, { className: "actions", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                HeaderActionButton,
-                {
-                  icon: "visibility_off",
-                  selected: !column.getIsVisible(),
-                  onClick: column.getToggleVisibilityHandler()
-                }
-              ),
-              /* @__PURE__ */ 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__ */ jsxRuntimeExports.jsx(
-                HeaderActionButton,
-                {
-                  icon: "sort",
-                  style: {
-                    transform: column.getIsSorted() === "asc" ? "scaleY(-1)" : void 0
-                  },
-                  onClick: column.getToggleSortingHandler(),
-                  selected: !!column.getIsSorted()
-                }
-              )
-            ] }),
-            !isRowSelectionColumn && /* @__PURE__ */ jsxRuntimeExports.jsx(
-              ResizedHandler,
-              {
-                ...{
-                  onDoubleClick: () => column.resetSize(),
-                  onMouseDown: header.getResizeHandler(),
-                  onTouchStart: header.getResizeHandler(),
-                  className: clsx("resize-handle", {
-                    resizing: column.getIsResizing()
-                  })
+      children: header.isPlaceholder ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs(TableCellContent, { className: clsx("bold"), children: [
+        flexRender(column.columnDef.header, header.getContext()),
+        isReadOnly && /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: "lock", "data-tooltip": "You only have permission to read this column." }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(HeaderButtons, { className: "actions", children: [
+          canHide && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            HeaderActionButton,
+            {
+              icon: "visibility_off",
+              selected: !column.getIsVisible(),
+              onClick: column.getToggleVisibilityHandler()
+            }
+          ),
+          canPin && /* @__PURE__ */ 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__ */ jsxRuntimeExports.jsx(
+            HeaderActionButton,
+            {
+              icon: "sort",
+              style: {
+                transform: column.getIsSorted() === "asc" ? "scaleY(-1)" : void 0
+              },
+              onClick: column.getToggleSortingHandler(),
+              selected: !!column.getIsSorted()
+            }
+          )
+        ] }),
+        canResize && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ResizedHandler,
+          {
+            ...{
+              onDoubleClick: () => column.resetSize(),
+              onMouseDown: header.getResizeHandler(),
+              onTouchStart: header.getResizeHandler(),
+              className: clsx("resize-handle", {
+                resizing: column.getIsResizing()
+              })
+            }
+          }
+        )
+      ] })
     },
     header.id
   );
@@ -472,10 +452,7 @@ const TableBody = ({
         );
       })
     }
-  ) : tableContainerRef.current && createPortal(
-    /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyPlaceholder, { message: "No folders or tasks found" }),
-    tableContainerRef.current
-  );
+  ) : tableContainerRef.current && createPortal(/* @__PURE__ */ jsxRuntimeExports.jsx(EmptyPlaceholder, { message: "No items found" }), tableContainerRef.current);
 };
 const TableBodyRow = ({
   columnVirtualizer,
@@ -550,7 +527,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),
@@ -606,6 +582,6 @@ const TableCell = ({ cell, rowId, cellId, className, showHierarchy, ...props })
 };
 const TableCellMemo = memo(TableCell);
 export {
-  FlexTableWithProviders as ProjectTreeTable
+  ProjectTreeTable
 };
 //# sourceMappingURL=ProjectTreeTable.es.js.map