Column width: localstorage fix + sortable column width

src/management-system-v2/components/item-list-view.module.scss

@@ -14,11 +14,21 @@
  max-width: 20dvw;
 }
 
-.HoverableTableCell:not(th) {
- opacity: 0;
- transition: opacity 0.2s ease !important;
+.HoverableTableCell {
+ // border: 1px solid black;
+ width: 100%;
+
+ &:not(th) {
+ opacity: 0;
+ transition: opacity 0.2s ease !important;
+ }
 }
 
-tr:has(.HoverableTableCell):hover .HoverableTableCell {
+tr:hover .HoverableTableCell {
  opacity: 1;
 }
+
+.ActionButton {
+ margin-left: 8px;
+ // background-color: red;
+}

src/management-system-v2/components/item-list-view.tsx

@@ -5,6 +5,7 @@ import { PropsWithChildren, ReactNode, SetStateAction, useMemo, useRef } from 'r
 import cn from 'classnames';
 import styles from './item-list-view.module.scss';
 import { MoreOutlined } from '@ant-design/icons';
+import { ResizeableTitle } from '@/lib/useColumnWidth';
 
 type ElementListProps<T extends { id: string }> = PropsWithChildren<{
  data: T[];
@@ -104,10 +105,10 @@ const ElementList = <T extends { id: string }>({
  }
 
  const selectedElementsKeys = elementSelection?.selectedElements.map(({ id }) => id);
-
+ const { components } = tableProps || {};
  return (
  <Table
- size={breakpoint.xs ? 'large' : 'middle'}
+ // size={breakpoint.xs ? 'large' : 'middle'}
  pagination={{ position: ['bottomCenter'], pageSize: numberOfRows }}
  {...tableProps}
  rowSelection={
@@ -176,6 +177,13 @@ const ElementList = <T extends { id: string }>({
  columns={columns}
  dataSource={data}
  className={cn(breakpoint.xs ? styles.MobileTable : '')}
+ components={{
+ ...components,
+ header: {
+ ...components?.header,
+ cell: ResizeableTitle,
+ },
+ }}
  />
  );
 };

src/management-system-v2/components/process-list.tsx

@@ -22,10 +22,11 @@ import { Folder } from '@/lib/data/folder-schema';
 import ElementList from './item-list-view';
 import { contextMenuStore } from './processes/context-menu';
 import { DraggableElementGenerator } from './processes/draggable-element';
-import { useColumnWidth } from '@/lib/useColumnWidth';
+import { useResizeableColumnWidth } from '@/lib/useColumnWidth';
 import SpaceLink from './space-link';
 import useFavouriteProcesses from '@/lib/useFavouriteProcesses';
 import FavouriteStar from './favouriteStar';
+import classNames from 'classnames';
 
 const DraggableRow = DraggableElementGenerator('tr', 'data-row-key');
 
@@ -69,6 +70,7 @@ const ProcessList: FC<ProcessListProps> = ({
  const breakpoint = Grid.useBreakpoint();
 
  const selectedColumns = useUserPreferences.use['columns-in-table-view-process-list']();
+ const metaPanelisOpened = useUserPreferences.use['process-meta-data']().open;
 
  const addPreferences = useUserPreferences.use.addPreferences();
  const { favourites: favProcesses } = useFavouriteProcesses();
@@ -95,40 +97,50 @@ const ProcessList: FC<ProcessListProps> = ({
  {record.type !== 'folder' && (
  <AuthCan {...resource} create>
  <Tooltip placement="top" title={'Copy'}>
- <CopyOutlined
- onClick={(e) => {
-  e.stopPropagation();
-  copyItem([record]);
- }}
+ <Button
+ className={classNames(styles.ActionButton)}
+ type="text"
+ icon={<CopyOutlined />}
+ onClick={() => copyItem([record])}
  />
  </Tooltip>
  </AuthCan>
  )}
 
  {record.type !== 'folder' && (
  <Tooltip placement="top" title={'Export'}>
- <ExportOutlined onClick={() => onExportProcess(record)} />
+ <Button
+ className={classNames(styles.ActionButton)}
+ type="text"
+ icon={<ExportOutlined />}
+ onClick={() => onExportProcess(record)}
+ />
  </Tooltip>
  )}
 
  <AuthCan {...resource} update>
  <Tooltip placement="top" title={'Edit'}>
- <EditOutlined onClick={() => editItem(record)} />
+ <Button
+ className={classNames(styles.ActionButton)}
+ type="text"
+ icon={<EditOutlined />}
+ onClick={() => editItem(record)}
+ />
  </Tooltip>
  </AuthCan>
 
  <AuthCan delete {...resource}>
- <Tooltip placement="top" title={'Delete'}>
- <ConfirmationButton
-  title={`Delete ${record.type === 'folder' ? 'Folder' : 'Process'}`}
-  description="Are you sure you want to delete the selected process?"
-  onConfirm={() => deleteItems([record])}
-  buttonProps={{
-  icon: <DeleteOutlined />,
-  type: 'text',
- }}
- />
- </Tooltip>
+ <ConfirmationButton
+ tooltip="Delete"
+ title={`Delete ${record.type === 'folder' ? 'Folder' : 'Process'}`}
+ description="Are you sure you want to delete the selected process?"
+ onConfirm={() => deleteItems([record])}
+ buttonProps={{
+ icon: <DeleteOutlined />,
+ type: 'text',
+ className: styles.ActionButton,
+ }}
+ />
  </AuthCan>
  </>
  );
@@ -167,8 +179,8 @@ const ProcessList: FC<ProcessListProps> = ({
  color: 'inherit' /* or any color you want */,
  textDecoration: 'none' /* removes underline */,
  display: 'block',
- whiteSpace: 'nowrap',
- textOverflow: 'ellipsis',
+ // whiteSpace: 'nowrap',
+ // textOverflow: 'ellipsis',
  }}
  >
  <div
@@ -188,7 +200,10 @@ const ProcessList: FC<ProcessListProps> = ({
  fontStyle: record.id === folder.parentId ? 'italic' : undefined,
  }}
  >
- {record.type === 'folder' ? <FolderFilled /> : <FileFilled />} {record.name.highlighted}
+ {record.type === 'folder' ? <FolderFilled /> : <FileFilled />}
+ <span>&nbsp;</span>
+ {/* Wrapping whitespace in a element allows to determine the total width (for tooltip) */}
+ {record.name.highlighted}
  </div>
  </SpaceLink>
  ),
@@ -250,8 +265,10 @@ const ProcessList: FC<ProcessListProps> = ({
  {
  title: 'File Size',
  key: 'File Size',
- sorter: folderAwareSort((a, b) => (a < b ? -1 : 1)),
+ // dataIndex: /* TODO: */,
+ // sorter: folderAwareSort((a, b) => (parseInt(a) < parseInt(b) ? -1 : 1)),
  responsive: ['md'],
+ render: (_, __, rowIndex) => <>{rowIndex} MB</> /* TODO: */,
  },
  {
  title: 'Owner',
@@ -279,16 +296,26 @@ const ProcessList: FC<ProcessListProps> = ({
  ),
  responsive: breakpoint.xl ? ['xs'] : ['xs', 'sm'],
  },
+ // {
+ // width: 'fit-content',
+ // dataIndex: 'id',
+ // key: 'auto-sizer',
+ // title: '',
+ // render: (id, record) => '',
+ // responsive: ['xl'],
+ // },
  ];
 
  let columnsFiltered = breakpoint.xl
  ? columns.filter((c) => selectedColumns.map((col: any) => col.name).includes(c?.key as string))
  : columns.filter((c) => processListColumnsMobile.includes(c?.key as string));
 
  /* Add functionality for changing width of columns */
- columnsFiltered = useColumnWidth(columnsFiltered, 'columns-in-table-view-process-list', [
- 'Favorites',
- ]);
+ columnsFiltered = useResizeableColumnWidth(
+ columnsFiltered,
+ 'columns-in-table-view-process-list',
+ ['Favorites'],
+ );
 
  return (
  <ElementList
@@ -317,17 +344,28 @@ const ProcessList: FC<ProcessListProps> = ({
  selectedColumnTitles: selectedColumns.map((col: any) => col.name) as string[],
  allColumnTitles: ['Description', 'Last Edited', 'Created On', 'File Size', 'Owner'],
  columnProps: {
- width: 'fit-content',
+ width: '200px',
  responsive: ['xl'],
  render: (id, record) =>
  id !== folder.parentId && (
- <Row justify="space-evenly" className={styles.HoverableTableCell}>
- {actionBarGenerator(record)}
- </Row>
+ <div
+ style={{
+ width: '100%',
+ height: '100%',
+ display: 'flex',
+ }}
+ >
+ <span style={{ flex: 1 }} />
+ <Row justify="end" wrap={false} className={styles.HoverableTableCell}>
+ {actionBarGenerator(record)}
+ </Row>
+ <span style={{ width: '15%' }} />
+ </div>
  ),
  },
  }}
  tableProps={{
+ scroll: { x: breakpoint.xl ? (metaPanelisOpened ? '71vw' : '85.5vw') : '100%' },
  onRow: (item) => ({
  // onDoubleClick: () =>
  // router.push(

src/management-system-v2/components/processes/index.tsx

@@ -4,6 +4,8 @@ import styles from './processes.module.scss';
 import { ComponentProps, useRef, useState, useTransition } from 'react';
 import { Space, Button, Tooltip, Grid, App, Drawer, Dropdown, Card, Badge, Spin } from 'antd';
 import {
+ CopyOutlined,
+ EditOutlined,
  ExportOutlined,
  DeleteOutlined,
  UnorderedListOutlined,
@@ -28,7 +30,7 @@ import ConfirmationButton from '@/components/confirmation-button';
 import ProcessImportButton from '@/components/process-import';
 import { ProcessMetadata } from '@/lib/data/process-schema';
 import MetaDataContent from '@/components/process-info-card-content';
-import { useEnvironment } from '@/components/auth-can';
+import { AuthCan, useEnvironment } from '@/components/auth-can';
 import { Folder } from '@/lib/data/folder-schema';
 import FolderCreationButton from '@/components/folder-creation-button';
 import {
@@ -111,6 +113,7 @@ const Processes = ({
 
  const addPreferences = useUserPreferences.use.addPreferences();
  const iconView = useUserPreferences.use['icon-view-in-process-list']();
+ const metaPanelisOpened = useUserPreferences.use['process-meta-data']().open;
 
  const [openExportModal, setOpenExportModal] = useState(false);
  const [openCopyModal, setOpenCopyModal] = useState(false);
@@ -319,6 +322,24 @@ const Processes = ({
  )}
 
  <SelectionActions count={selectedRowKeys.length}>
+ {/* TODO: */}
+ {/* Copy */}
+ {/* <AuthCan create Process>
+ <Tooltip placement="top" title={'Copy'}>
+ <Button
+ // className={classNames(styles.ActionButton)}
+ type="text"
+ icon={<CopyOutlined />}
+ onClick={() => {
+ const processes = selectedRowKeys.map((definitionId) => ({
+ definitionId: definitionId as string,
+ }));
+ // copyItem(processes);
+ }}
+ />
+ </Tooltip>
+ </AuthCan> */}
+ {/* Export */}
  <Tooltip placement="top" title={'Export'}>
  <ExportOutlined
  className={styles.Icon}
@@ -327,7 +348,8 @@ const Processes = ({
  }}
  />
  </Tooltip>
-
+ {/* Edit (only if one selected) */}
+ {/* Delete */}
  {canDeleteSelected && (
  <Tooltip placement="top" title={'Delete'}>
  <ConfirmationButton
@@ -421,21 +443,27 @@ const Processes = ({
  setShowMobileMetaData={setShowMobileMetaData}
  />
  ) : (
- <ProcessList
- data={filteredData}
- folder={folder}
- selection={selectedRowKeys}
- setSelectionElements={setSelectedRowElements}
- selectedElements={selectedRowElements}
- // TODO: Replace with server component loading state
- //isLoading={isLoading}
- onExportProcess={(id) => {
- setSelectedRowElements([id]);
- setOpenExportModal(true);
+ <div
+ style={{
+ maxWidth: breakpoint.xl ? (metaPanelisOpened ? '71vw' : '85.5vw') : '100%',
  }}
- setShowMobileMetaData={setShowMobileMetaData}
- processActions={processActions}
- />
+ >
+ <ProcessList
+ data={filteredData}
+ folder={folder}
+ selection={selectedRowKeys}
+ setSelectionElements={setSelectedRowElements}
+ selectedElements={selectedRowElements}
+ // TODO: Replace with server component loading state
+ //isLoading={isLoading}
+ onExportProcess={(id) => {
+ setSelectedRowElements([id]);
+ setOpenExportModal(true);
+ }}
+ setShowMobileMetaData={setShowMobileMetaData}
+ processActions={processActions}
+ />
+ </div>
  )}
  </Spin>
  </DraggableContext>

src/management-system-v2/lib/useColumnWidth.module.scss

@@ -0,0 +1,14 @@
+.react-resizable {
+ position: relative;
+ background-clip: padding-box;
+}
+
+.react-resizable-handle {
+ position: absolute;
+ right: -5px;
+ bottom: 0;
+ z-index: 1;
+ width: 10px;
+ height: 100%;
+ cursor: col-resize;
+}