feat(columns): custom columns

next-tavla/src/Admin/scenarios/Boards/components/Column/Actions.tsx

@@ -7,16 +7,19 @@ import { useLink } from '../../hooks/useLink'
 import { useToast } from '@entur/alert'
 import classes from './styles.module.css'
 import { DeleteBoardButton } from '../Delete'
+import { SortableColumn } from './SortableColumn'
 
 function Actions({ board }: { board: TBoard }) {
     const link = useLink(board.id)
     return (
-        <div className={classes.actions}>
-            <Edit bid={board.id} />
-            <Copy link={link} />
-            <Open link={link} />
-            <Delete board={board} />
-        </div>
+        <SortableColumn column="actions">
+            <div className={classes.actions}>
+                <Edit bid={board.id} />
+                <Copy link={link} />
+                <Open link={link} />
+                <Delete board={board} />
+            </div>
+        </SortableColumn>
     )
 }
 

next-tavla/src/Admin/scenarios/Boards/components/Column/LastModified.tsx

@@ -1,7 +1,12 @@
 import { formatTimestamp } from 'Admin/utils/time'
+import { SortableColumn } from './SortableColumn'
 
 function LastModified({ timestamp }: { timestamp?: number }) {
-    return <div>{formatTimestamp(timestamp)}</div>
+    return (
+        <SortableColumn column="lastModified">
+            {formatTimestamp(timestamp)}
+        </SortableColumn>
+    )
 }
 
 export { LastModified }

next-tavla/src/Admin/scenarios/Boards/components/Column/Link.tsx

@@ -1,8 +1,9 @@
 import { useLink } from '../../hooks/useLink'
+import { SortableColumn } from './SortableColumn'
 
 function Link({ bid }: { bid?: string }) {
     const link = useLink(bid)
 
-    return <div>{link}</div>
+    return <SortableColumn column="url">{link}</SortableColumn>
 }
 export { Link }

next-tavla/src/Admin/scenarios/Boards/components/Column/Name.tsx

@@ -1,7 +1,8 @@
 import { DEFAULT_BOARD_NAME } from 'Admin/utils/constants'
+import { SortableColumn } from './SortableColumn'
 
 function Name({ name = DEFAULT_BOARD_NAME }: { name?: string }) {
-    return <div>{name}</div>
+    return <SortableColumn column="name">{name}</SortableColumn>
 }
 
 export { Name }

next-tavla/src/Admin/scenarios/Boards/components/Column/SortableColumn.tsx

@@ -0,0 +1,26 @@
+import { TBoardsColumn } from 'Admin/types/boards'
+import classes from './styles.module.css'
+import { useSortableColumnAttributes } from '../../hooks/useSortableColumnAttributes'
+
+function SortableColumn({
+    column,
+    children,
+}: {
+    column: TBoardsColumn
+    children: React.ReactNode
+}) {
+    const { setNodeRef, style } = useSortableColumnAttributes(column)
+
+    return (
+        <div
+            ref={setNodeRef}
+            style={style}
+            id={column}
+            className={classes.column}
+        >
+            {children}
+        </div>
+    )
+}
+
+export { SortableColumn }

next-tavla/src/Admin/scenarios/Boards/components/Column/styles.module.css

@@ -2,3 +2,10 @@
     display: flex;
     gap: 0.5em;
 }
+
+.column {
+    padding-left: 0.25em;
+    min-height: 2.25rem;
+    display: flex;
+    align-items: center;
+}

next-tavla/src/Admin/scenarios/Boards/components/TableHeader/ColumnHeader.tsx

@@ -0,0 +1,33 @@
+import { BoardsColumns, TBoardsColumn } from 'Admin/types/boards'
+import classes from './styles.module.css'
+import { Sort } from '../Sort'
+import { Tooltip } from '@entur/tooltip'
+import { useSortableColumnAttributes } from '../../hooks/useSortableColumnAttributes'
+
+function ColumnHeader({ column }: { column: TBoardsColumn }) {
+    const { attributes, listeners, setNodeRef, style } =
+        useSortableColumnAttributes(column)
+
+    return (
+        <div
+            ref={setNodeRef}
+            style={style}
+            key={column}
+            className={classes.header}
+        >
+            <Tooltip placement="top" content="Dra for å flytte">
+                <div
+                    {...attributes}
+                    {...listeners}
+                    id={column}
+                    className={classes.title}
+                >
+                    {BoardsColumns[column]}
+                </div>
+            </Tooltip>
+            <Sort column={column} />
+        </div>
+    )
+}
+
+export { ColumnHeader }

next-tavla/src/Admin/scenarios/Boards/components/TableHeader/index.tsx

@@ -1,31 +1,11 @@
-import { useCallback } from 'react'
-import classes from './styles.module.css'
 import { TBoardsColumn } from 'Admin/types/boards'
-import { Sort } from '../Sort'
+import { ColumnHeader } from './ColumnHeader'
 
 function TableHeader({ columns }: { columns: TBoardsColumn[] }) {
-    const title = useCallback((column: TBoardsColumn) => {
-        switch (column) {
-            case 'name':
-                return 'Navn på tavle'
-            case 'url':
-                return 'Lenke'
-            case 'actions':
-                return 'Handlinger'
-            case 'lastModified':
-                return 'Sist oppdatert'
-            default:
-                return 'Ukjent kolonne'
-        }
-    }, [])
-
     return (
         <>
-            {columns.map((column) => (
-                <div key={column} className={classes.header}>
-                    <div className={classes.title}>{title(column)}</div>
-                    <Sort column={column} />
-                </div>
+            {columns.map((column: TBoardsColumn) => (
+                <ColumnHeader key={column} column={column} />
             ))}
         </>
     )

next-tavla/src/Admin/scenarios/Boards/components/TableHeader/styles.module.css

@@ -3,12 +3,27 @@
     align-items: center;
     gap: 0.5em;
     border-bottom: var(--colors-blues-blue20) solid;
-    padding-bottom: 0.5em;
     margin-bottom: 1em;
     height: 3em;
 }
 
 .title {
+    display: flex;
+    height: 3em;
+    align-items: center;
     font-weight: 500;
-    color: var(--colors-brand-lavender);
+    color: var(--border-color);
+    padding: 0 0.25rem;
+    border-top-right-radius: 0.25em;
+    border-top-left-radius: 0.25em;
+}
+
+.title:hover {
+    cursor: grab;
+    background-color: var(--tertiary-background-color);
+}
+
+.title:active {
+    cursor: grabbing;
+    background-color: var(--tertiary-background-color);
 }

next-tavla/src/Admin/scenarios/Boards/components/TableRows/index.tsx

@@ -1,26 +1,26 @@
-import { TBoardsColumn } from 'Admin/types/boards'
 import { useBoardsSettings } from '../../utils/context'
 import { useSortBoardFunction } from '../../hooks/useSortBoardFunction'
 import { DEFAULT_BOARD_NAME } from 'Admin/utils/constants'
 import { Column } from '../Column'
 import { Fragment } from 'react'
 import { TBoard } from 'types/settings'
+import { TBoardsColumn } from 'Admin/types/boards'
 
 function TableRows() {
-    const settings = useBoardsSettings()
+    const { boards, columns, search } = useBoardsSettings()
     const sortFunction = useSortBoardFunction()
 
-    const filter = new RegExp(settings.search, 'i')
+    const filter = new RegExp(search, 'i')
     return (
         <>
-            {settings.boards
+            {boards
                 .filter((board: TBoard) =>
                     filter.test(board?.meta?.title ?? DEFAULT_BOARD_NAME),
                 )
                 .sort(sortFunction)
                 .map((board: TBoard) => (
                     <Fragment key={board.id}>
-                        {settings.columns.map((column: TBoardsColumn) => (
+                        {columns.map((column: TBoardsColumn) => (
                             <Column
                                 key={column}
                                 board={board}

next-tavla/src/Admin/scenarios/Boards/components/ToggleBoardsColumns/index.tsx

@@ -0,0 +1,65 @@
+import { IconButton, SecondarySquareButton } from '@entur/button'
+import { AdjustmentsIcon, CloseIcon } from '@entur/icons'
+import classes from './styles.module.css'
+import {
+    Popover,
+    PopoverCloseButton,
+    PopoverContent,
+    PopoverTrigger,
+} from '@entur/tooltip'
+import { Heading4 } from '@entur/typography'
+import {
+    useBoardsSettings,
+    useBoardsSettingsDispatch,
+} from '../../utils/context'
+import { Checkbox } from '@entur/form'
+import { BoardsColumns, TBoardsColumn } from 'Admin/types/boards'
+
+function ToggleBoardsColumns() {
+    const { columns } = useBoardsSettings()
+    const dispatch = useBoardsSettingsDispatch()
+
+    return (
+        <Popover>
+            <PopoverTrigger>
+                <SecondarySquareButton className="flexColumn">
+                    <AdjustmentsIcon />
+                </SecondarySquareButton>
+            </PopoverTrigger>
+            <PopoverContent>
+                <div className="p-1">
+                    <div className="flexRow">
+                        <Heading4 as="h2" className="m-1">
+                            Velg kolonner
+                        </Heading4>
+                        <PopoverCloseButton>
+                            <IconButton aria-label="Lukk popover">
+                                <CloseIcon aria-hidden="true" />
+                            </IconButton>
+                        </PopoverCloseButton>
+                    </div>
+                    <div className={classes.contentList}>
+                        {Object.entries(BoardsColumns).map(([column]) => (
+                            <Checkbox
+                                key={column}
+                                checked={columns.includes(
+                                    column as TBoardsColumn,
+                                )}
+                                onChange={() =>
+                                    dispatch({
+                                        type: 'toggleColumn',
+                                        column: column as TBoardsColumn,
+                                    })
+                                }
+                            >
+                                {BoardsColumns[column as TBoardsColumn]}
+                            </Checkbox>
+                        ))}
+                    </div>
+                </div>
+            </PopoverContent>
+        </Popover>
+    )
+}
+
+export { ToggleBoardsColumns }

next-tavla/src/Admin/scenarios/Boards/components/ToggleBoardsColumns/styles.module.css

@@ -0,0 +1,16 @@
+.boardListOptions {
+    margin-left: auto;
+}
+
+.popoverHeading {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.contentList {
+    padding: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}

next-tavla/src/Admin/scenarios/Boards/hooks/useSortableColumnAttributes.ts

@@ -0,0 +1,37 @@
+import { CSSProperties } from 'react'
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+
+export function useSortableColumnAttributes(column: string) {
+    const { attributes, listeners, transform, transition, active, setNodeRef } =
+        useSortable({ id: column })
+
+    const otherColumnActive = active && active.id !== column
+    const thisColumnActive = active && active.id === column
+
+    const activeStyle =
+        thisColumnActive &&
+        ({
+            backgroundColor: 'var(--main-background-color)',
+        } as CSSProperties)
+
+    const style = {
+        transform: CSS.Translate.toString(transform),
+        transition: transition,
+        zIndex: thisColumnActive ? 10 : 0,
+        opacity: otherColumnActive ? 0.5 : 1,
+        ...activeStyle,
+    }
+
+    if (thisColumnActive) style.backgroundColor = 'var(--main-background-color)'
+
+    return {
+        style,
+        attributes,
+        listeners,
+        transform,
+        transition,
+        active,
+        setNodeRef,
+    }
+}