feat(edit): duplicate existing board

entur · Jun 12, 2024 · 876ea6d · 876ea6d
1 parent 8e1a788
commit 876ea6d
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 6 deletions.
diff --git a/next-tavla/app/(admin)/boards/components/Column/Delete.tsx b/next-tavla/app/(admin)/boards/components/Column/Delete.tsx
@@ -14,8 +14,15 @@ import { getFormFeedbackForField } from 'app/(admin)/utils'
 import sheep from 'assets/illustrations/Sheep.png'
 import Image from 'next/image'
 import { SubmitButton } from 'components/Form/SubmitButton'
+import { OverflowMenuItem } from '@entur/menu'
 
-function Delete({ board, type }: { board: TBoard; type?: 'icon' | 'button' }) {
+function Delete({
+    board,
+    type,
+}: {
+    board: TBoard
+    type?: 'icon' | 'button' | 'action'
+}) {
     const [state, action] = useFormState(deleteBoardAction, undefined)
     const { isOpen, open, close } = useModalWithValue('delete', board.id ?? '')
 
@@ -68,7 +75,7 @@ function DeleteButton({
     type,
     onClick,
 }: {
-    type?: 'button' | 'icon'
+    type?: 'button' | 'icon' | 'action'
     onClick: () => void
 }) {
     if (type === 'button') {
@@ -83,6 +90,15 @@ function DeleteButton({
             </Button>
         )
     }
+    if (type === 'action')
+        return (
+            <OverflowMenuItem onSelect={onClick}>
+                <div className="flex flex-row">
+                    <DeleteIcon inline />
+                    Slett Tavle
+                </div>
+            </OverflowMenuItem>
+        )
     return (
         <IconButton aria-label="Slett tavle" onClick={onClick}>
             <DeleteIcon />

diff --git a/next-tavla/app/(admin)/components/CreateBoard/actions.ts b/next-tavla/app/(admin)/components/CreateBoard/actions.ts
@@ -22,7 +22,10 @@ export async function create(board: TBoard, oid?: TOrganizationID) {
             ...board,
             meta: {
                 ...board.meta,
-                fontSize: organization?.defaults?.font ?? 'medium',
+                fontSize:
+                    board.meta?.fontSize ??
+                    organization?.defaults?.font ??
+                    'medium',
                 created: Date.now(),
                 dateModified: Date.now(),
             },

diff --git a/next-tavla/app/(admin)/edit/[id]/components/ActionsMenu/index.tsx b/next-tavla/app/(admin)/edit/[id]/components/ActionsMenu/index.tsx
@@ -0,0 +1,42 @@
+'use client'
+import { OverflowMenu } from '@entur/menu'
+import { TBoard, TOrganizationID } from 'types/settings'
+import { DuplicateBoard } from '../DuplicateBoard'
+import { Delete } from 'app/(admin)/boards/components/Column/Delete'
+
+function ActionsMenu({ board, oid }: { board: TBoard; oid?: TOrganizationID }) {
+    return (
+        <>
+            <OverflowActionsMenu board={board} oid={oid} />
+            <ButtonsMenu board={board} oid={oid} />
+        </>
+    )
+}
+
+function OverflowActionsMenu({
+    board,
+    oid,
+}: {
+    board: TBoard
+    oid?: TOrganizationID
+}) {
+    return (
+        <div className="hidden md:flex">
+            <OverflowMenu position="left">
+                <DuplicateBoard board={board} oid={oid} />
+                <Delete board={board} type="action" />
+            </OverflowMenu>
+        </div>
+    )
+}
+
+function ButtonsMenu({ board, oid }: { board: TBoard; oid?: TOrganizationID }) {
+    return (
+        <div className="flex flex-col md:flex-row md:items-center gap-4 md:hidden">
+            <DuplicateBoard board={board} oid={oid} type="button" />
+            <Delete board={board} type="button" />
+        </div>
+    )
+}
+
+export { ActionsMenu }
diff --git a/next-tavla/app/(admin)/edit/[id]/components/DuplicateBoard/index.tsx b/next-tavla/app/(admin)/edit/[id]/components/DuplicateBoard/index.tsx
@@ -0,0 +1,50 @@
+'use client'
+import { Button } from '@entur/button'
+import { AddIcon } from '@entur/icons'
+import { OverflowMenuItem } from '@entur/menu'
+import { create } from 'app/(admin)/components/CreateBoard/actions'
+import { TBoard, TOrganizationID } from 'types/settings'
+
+function DuplicateBoard({
+    board,
+    oid,
+    type,
+}: {
+    board: TBoard
+    oid?: TOrganizationID
+    type?: 'button' | 'action'
+}) {
+    const handleSelect = async () => {
+        await create(
+            {
+                ...board,
+                meta: {
+                    ...board.meta,
+                    title: board.meta.title + ' - duplikat',
+                },
+            },
+            oid,
+        )
+    }
+    if (type === 'button')
+        return (
+            <Button
+                variant="secondary"
+                aria-label="Slett tavle"
+                onClick={handleSelect}
+            >
+                Dupliser Tavle
+                <AddIcon />
+            </Button>
+        )
+    return (
+        <OverflowMenuItem onSelect={handleSelect}>
+            <div className="flex flex-row">
+                <AddIcon inline />
+                Dupliser tavle
+            </div>
+        </OverflowMenuItem>
+    )
+}
+
+export { DuplicateBoard }
diff --git a/next-tavla/app/(admin)/edit/[id]/page.tsx b/next-tavla/app/(admin)/edit/[id]/page.tsx
@@ -11,12 +11,12 @@ import { Metadata } from 'next'
 import { getOrganizationForBoard } from './components/TileCard/actions'
 import { ClientBoard } from './components/ClientBoard'
 import { getUser, hasBoardEditorAccess } from 'app/(admin)/utils/firebase'
-import { Delete } from 'app/(admin)/boards/components/Column/Delete'
 import { Open } from './components/Buttons/Open'
 import { Copy } from './components/Buttons/Copy'
 import { Footer } from './components/Footer'
 import { RefreshButton } from './components/RefreshButton'
 import { DEFAULT_BOARD_NAME } from 'app/(admin)/utils/constants'
+import { ActionsMenu } from './components/ActionsMenu'
 
 type TProps = {
     params: { id: TBoardID }
@@ -44,11 +44,11 @@ export default async function EditPage({ params }: TProps) {
         <div className="flex flex-col gap-14">
             <div className="flex flex-col md:flex-row justify-between">
                 <Heading1 margin="top">Rediger {board.meta?.title}</Heading1>
-                <div className="flex flex-col md:flex-row gap-4">
+                <div className="flex flex-col md:flex-row md:items-center gap-4">
                     <Open bid={board.id} type="button" />
                     <Copy bid={board.id} type="button" />
-                    <Delete board={board} type="button" />
                     <RefreshButton board={board} />
+                    <ActionsMenu board={board} oid={organization?.id} />
                 </div>
             </div>
             <div className="grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] gap-8">