Adjustable List-Column-Width

playwright.config.ts

@@ -59,7 +59,6 @@ export default defineConfig({
     {
       name: 'firefox',
       use: { ...devices['Desktop Firefox'], ignoreHTTPSErrors: true },
-      timeout: 40 * 1000,
     },
 
     {

src/management-system-v2/components/bpmn-canvas.tsx

@@ -185,7 +185,7 @@ const BPMNCanvas = forwardRef<BPMNCanvasRef, BPMNCanvasProps>(
         .get<Keyboard>('keyboard')
         .addListener(async ({ keyEvent }: { keyEvent: KeyboardEvent }) => {
           // handle the copy shortcut
-          if (keyEvent.ctrlKey && keyEvent.key === 'c') {
+          if ((keyEvent.ctrlKey || keyEvent.metaKey) && keyEvent.key === 'c') {
             await copyProcessImage(modeler.current!);
           }
         }, 'keyboard.keyup');

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

@@ -71,7 +71,7 @@ const ItemIconViewProps = <T extends { id: string }>({
   const onClick: TabCardProps<T>['onClick'] =
     elementSelection &&
     ((event, item) => {
-      if (event.ctrlKey) {
+      if (event.ctrlKey || event.metaKey) {
         if (!elementSelection.selectedElements.find(({ id }) => id === item.id)) {
           elementSelection.setSelectionElements((prev) => [...prev, item]);
         } else {

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { Button, Checkbox, Dropdown, Grid, Table, TableProps } from 'antd';
-import { PropsWithChildren, SetStateAction, useMemo, useRef } from 'react';
+import { PropsWithChildren, ReactNode, SetStateAction, useMemo, useRef } from 'react';
 import cn from 'classnames';
 import styles from './item-list-view.module.scss';
 import { MoreOutlined } from '@ant-design/icons';
@@ -90,6 +90,9 @@ const ElementList = <T extends { id: string }>({
   );
 
   columns = [...columns];
+  /* Add functionality for changing width of columns */
+  // columns = useColumnWidth(columns);
+
   if (selectableColumns) {
     columns.push({
       width: 50,
@@ -111,9 +114,18 @@ const ElementList = <T extends { id: string }>({
         elementSelection && {
           type: 'checkbox',
           selectedRowKeys: selectedElementsKeys,
-          onChange: (_, selectedRows) => elementSelection.setSelectionElements(selectedRows),
+          // onChange: (_, selectedRows) => elementSelection.setSelectionElements(selectedRows),
           getCheckboxProps: (record) => ({ name: record.id }),
-          onSelect: (_, __, selectedRows) => elementSelection.setSelectionElements(selectedRows),
+          onSelect: (record, __, selectedRows, nativeEvent) => {
+            console.log(nativeEvent);
+            // @ts-ignore
+            if (nativeEvent.shiftKey && elementSelection.selectedElements.length > 0) {
+              console.log('shift key pressed');
+            } else {
+              elementSelection.setSelectionElements(selectedRows);
+            }
+            lastItemClicked.current = record;
+          },
           onSelectNone: () => elementSelection.setSelectionElements([]),
           onSelectAll: (_, selectedRows) => elementSelection.setSelectionElements(selectedRows),
         }
@@ -126,35 +138,35 @@ const ElementList = <T extends { id: string }>({
           return {
             ...propFunctions,
             onClick: (event) => {
-              if (event.ctrlKey) {
-                if (!selectedElementsKeys!.includes(item?.id)) {
-                  elementSelection.setSelectionElements((prev) => [...prev, item]);
-                } else {
-                  elementSelection.setSelectionElements((prev) =>
-                    prev.filter(({ id }) => id !== item.id),
-                  );
-                }
-              } else if (event.shiftKey && elementSelection.selectedElements.length > 0) {
-                const lastItemId = lastItemClicked.current!.id; // if elementselection is not undefined, then lastElementClicked.current will not be null
-                const lastIdx = data.findIndex(({ id }) => id === lastItemId);
-                const currIdx = data.findIndex(({ id }) => id === item.id);
-
-                const rangeSelectedElements =
-                  lastIdx < currIdx
-                    ? data.slice(lastIdx, currIdx + 1)
-                    : data.slice(currIdx, lastIdx + 1);
-
-                elementSelection.setSelectionElements((prev) => [
-                  ...prev.filter(
-                    ({ id }) => !rangeSelectedElements.some(({ id: rangeId }) => id === rangeId),
-                  ),
-                  ...rangeSelectedElements,
-                ]);
-              } else {
-                elementSelection.setSelectionElements([item]);
-              }
-
-              lastItemClicked.current = item;
+              // if (event.ctrlKey || event.metaKey) {
+              //   if (!selectedElementsKeys!.includes(item?.id)) {
+              //     elementSelection.setSelectionElements((prev) => [...prev, item]);
+              //   } else {
+              //     elementSelection.setSelectionElements((prev) =>
+              //       prev.filter(({ id }) => id !== item.id),
+              //     );
+              //   }
+              // } else if (event.shiftKey && elementSelection.selectedElements.length > 0) {
+              //   const lastItemId = lastItemClicked.current!.id; // if elementselection is not undefined, then lastElementClicked.current will not be null
+              //   const lastIdx = data.findIndex(({ id }) => id === lastItemId);
+              //   const currIdx = data.findIndex(({ id }) => id === item.id);
+
+              //   const rangeSelectedElements =
+              //     lastIdx < currIdx
+              //       ? data.slice(lastIdx, currIdx + 1)
+              //       : data.slice(currIdx, lastIdx + 1);
+
+              //   elementSelection.setSelectionElements((prev) => [
+              //     ...prev.filter(
+              //       ({ id }) => !rangeSelectedElements.some(({ id: rangeId }) => id === rangeId),
+              //     ),
+              //     ...rangeSelectedElements,
+              //   ]);
+              // } else {
+              //   elementSelection.setSelectionElements([item]);
+              // }
+
+              // lastItemClicked.current = item;
               if (propFunctions?.onClick) propFunctions.onClick(event);
             },
           };

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

@@ -23,6 +23,9 @@ 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 Link from 'next/link';
+import { useColumnWidth } from '@/lib/useColumnWidth';
+import SpaceLink from './space-link';
 
 const DraggableRow = DraggableElementGenerator('tr', 'data-row-key');
 
@@ -53,7 +56,7 @@ const ProcessList: FC<ProcessListProps> = ({
   const space = useEnvironment();
   const breakpoint = Grid.useBreakpoint();
 
-  const selectedColumns = useUserPreferences.use['process-list-columns-desktop']();
+  const selectedColumns = useUserPreferences.use['columns-in-table-view-process-list']();
 
   const addPreferences = useUserPreferences.use.addPreferences();
 
@@ -142,25 +145,36 @@ const ProcessList: FC<ProcessListProps> = ({
       key: 'Name',
       // sorter: (a, b) => a.name.value.localeCompare(b.name.value),
       render: (_, record) => (
-        <div
-          className={
-            breakpoint.xs
-              ? styles.MobileTitleTruncation
-              : breakpoint.xl
-                ? styles.TitleTruncation
-                : styles.TabletTitleTruncation
+        <SpaceLink
+          href={
+            record.type === 'folder' ? `/processes/folder/${record.id}` : `/processes/${record.id}`
           }
           style={{
-            overflow: 'hidden',
-            whiteSpace: 'nowrap',
-            textOverflow: 'ellipsis',
-            // TODO: color
-            color: record.id === folder.parentId ? 'grey' : undefined,
-            fontStyle: record.id === folder.parentId ? 'italic' : undefined,
+            color: 'inherit' /* or any color you want */,
+            textDecoration: 'none' /* removes underline */,
+            display: 'block',
           }}
         >
-          {record.type === 'folder' ? <FolderFilled /> : <FileFilled />} {record.name.value}
-        </div>
+          <div
+            className={
+              breakpoint.xs
+                ? styles.MobileTitleTruncation
+                : breakpoint.xl
+                  ? styles.TitleTruncation
+                  : styles.TabletTitleTruncation
+            }
+            style={{
+              // overflow: 'hidden',
+              // whiteSpace: 'nowrap',
+              // textOverflow: 'ellipsis',
+              // TODO: color
+              color: record.id === folder.parentId ? 'grey' : undefined,
+              fontStyle: record.id === folder.parentId ? 'italic' : undefined,
+            }}
+          >
+            {record.type === 'folder' ? <FolderFilled /> : <FileFilled />} {record.name.highlighted}
+          </div>
+        </SpaceLink>
       ),
       responsive: ['xs', 'sm'],
     },
@@ -170,16 +184,27 @@ const ProcessList: FC<ProcessListProps> = ({
       key: 'Description',
       // sorter: (a, b) => a.description.value.localeCompare(b.description.value),
       render: (_, record) => (
-        <div
+        <SpaceLink
+          href={
+            record.type === 'folder' ? `/processes/folder/${record.id}` : `/processes/${record.id}`
+          }
           style={{
-            maxWidth: '15vw',
-            overflow: 'hidden',
-            whiteSpace: 'nowrap',
-            textOverflow: 'ellipsis',
+            color: 'inherit' /* or any color you want */,
+            textDecoration: 'none' /* removes underline */,
+            display: 'block',
           }}
         >
-          {record.description.highlighted}
-        </div>
+          {/* <div
+            style={{
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
+              textOverflow: 'ellipsis',
+            }}
+          > */}
+          {record.description.value.length == 0 ? <>&emsp;</> : record.description.highlighted}
+          {/* Makes the link-cell clickable, when there is no description */}
+          {/* </div> */}
+        </SpaceLink>
       ),
       responsive: ['sm'],
     },
@@ -228,10 +253,15 @@ const ProcessList: FC<ProcessListProps> = ({
     },
   ];
 
-  const columnsFiltered = breakpoint.xl
-    ? columns.filter((c) => selectedColumns.includes(c?.key as string))
+  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',
+  ]);
+
   return (
     <ElementList
       data={data}
@@ -242,11 +272,21 @@ const ProcessList: FC<ProcessListProps> = ({
       }}
       selectableColumns={{
         setColumnTitles: (cols) => {
-          if (typeof cols === 'function') cols = cols(selectedColumns as string[]);
+          if (typeof cols === 'function')
+            cols = cols(
+              selectedColumns.map((col: any) => col.name) as string[],
+            ); /* TODO: When are cols a function -> cols need to be in preference format */
 
-          addPreferences({ 'process-list-columns-desktop': cols });
+          /* Add other properties and add to preferences */
+          const propcols = cols.map((col: string) => ({
+            name: col,
+            width:
+              (selectedColumns.find((c: any) => c.name === col)?.width as string) /* | number */ ||
+              'auto',
+          }));
+          addPreferences({ 'columns-in-table-view-process-list': propcols });
         },
-        selectedColumnTitles: selectedColumns as string[],
+        selectedColumnTitles: selectedColumns.map((col: any) => col.name) as string[],
         allColumnTitles: ColumnHeader,
         columnProps: {
           width: 'fit-content',
@@ -261,12 +301,12 @@ const ProcessList: FC<ProcessListProps> = ({
       }}
       tableProps={{
         onRow: (item) => ({
-          onDoubleClick: () =>
-            router.push(
-              item.type === 'folder'
-                ? `/${space.spaceId}/processes/folder/${item.id}`
-                : `/${space.spaceId}/processes/${item.id}`,
-            ),
+          // onDoubleClick: () =>
+          //   router.push(
+          //     item.type === 'folder'
+          //       ? `/${space.spaceId}/processes/folder/${item.id}`
+          //       : `/${space.spaceId}/processes/${item.id}`,
+          //   ),
           onContextMenu: () => {
             if (selection.includes(item.id)) {
               setContextMenuItem(selectedElements);

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

@@ -420,7 +420,10 @@ const Processes = ({
                     selectedElements={selectedRowElements}
                     // TODO: Replace with server component loading state
                     //isLoading={isLoading}
-                    onExportProcess={(id) => setOpenExportModal(true)}
+                    onExportProcess={(id) => {
+                      setSelectedRowElements([id]);
+                      setOpenExportModal(true);
+                    }}
                     setShowMobileMetaData={setShowMobileMetaData}
                     processActions={processActions}
                   />

src/management-system-v2/components/space-link.tsx

@@ -5,15 +5,20 @@ import { useEnvironment } from './auth-can';
 import { ReactNode, forwardRef } from 'react';
 import { spaceURL } from '@/lib/utils';
 
-const SpaceLink = forwardRef<HTMLAnchorElement, { href: string; children: ReactNode } & LinkProps>(
-  ({ href, children, ...linkProps }, ref) => {
-    const space = useEnvironment();
-    return (
-      <Link ref={ref} {...linkProps} href={spaceURL(space, href)}>
-        {children}
-      </Link>
-    );
-  },
-);
+const SpaceLink = forwardRef<
+  HTMLAnchorElement,
+  { href: string; children: ReactNode } & Omit<
+    React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    keyof LinkProps
+  > &
+    LinkProps
+>(({ href, children, ...linkProps }, ref) => {
+  const space = useEnvironment();
+  return (
+    <Link ref={ref} {...linkProps} href={spaceURL(space, href)}>
+      {children}
+    </Link>
+  );
+});
 
 export default SpaceLink;