From f6e1099763cdc18535e7d1bce4c920967bc0f872 Mon Sep 17 00:00:00 2001
From: Fredrik Busklein <fredrik.busklein@bekk.no>
Date: Mon, 21 Aug 2023 11:38:30 +0200
Subject: [PATCH] feat(edit): title can now be changed and saved

---
 next-tavla/src/Admin/scenarios/Edit/index.tsx | 68 +++++++++++++++++--
 .../Admin/scenarios/Edit/styles.module.css    | 15 ++++
 next-tavla/src/Shared/types/settings.ts       |  1 +
 3 files changed, 80 insertions(+), 4 deletions(-)

diff --git a/next-tavla/src/Admin/scenarios/Edit/index.tsx b/next-tavla/src/Admin/scenarios/Edit/index.tsx
index 65da3c2ed9..5d1a15402e 100644
--- a/next-tavla/src/Admin/scenarios/Edit/index.tsx
+++ b/next-tavla/src/Admin/scenarios/Edit/index.tsx
@@ -1,17 +1,28 @@
 import { TSettings } from 'types/settings'
 import { TilesOverview } from '../TilesOverview'
-import { useReducer } from 'react'
+import { useReducer, useState } from 'react'
 import classes from './styles.module.css'
 import dynamic from 'next/dynamic'
 import { AddTile } from '../AddTile'
 import { SettingsDispatchContext } from 'Admin/utils/contexts'
 import { settingsReducer } from './reducer'
-import { PrimaryButton, SecondaryButton } from '@entur/button'
+import {
+    PrimaryButton,
+    SecondaryButton,
+    SecondarySquareButton,
+} from '@entur/button'
 import { useAutoSaveSettings } from './hooks/useAutoSaveSettings'
 import { Heading1 } from '@entur/typography'
-import { CopyIcon, SaveIcon } from '@entur/icons'
+import {
+    CheckIcon,
+    CloseIcon,
+    CopyIcon,
+    EditIcon,
+    SaveIcon,
+} from '@entur/icons'
 import { SecondaryLink } from 'components/SecondaryLink'
 import { useToast } from '@entur/alert'
+import { TextField } from '@entur/form'
 
 function Edit({
     initialSettings,
@@ -23,6 +34,9 @@ function Edit({
     const [settings, dispatch] = useReducer(settingsReducer, initialSettings)
     const { addToast } = useToast()
 
+    const [editingTitle, setEditingTitle] = useState<boolean>(false)
+    const [title, setTitle] = useState<string>(initialSettings.title || 'Tavla')
+
     const linkUrl = window.location.host + '/' + documentId
 
     const saveSettings = useAutoSaveSettings(documentId, settings)
@@ -31,7 +45,53 @@ function Edit({
         <SettingsDispatchContext.Provider value={dispatch}>
             <div className={classes.settings}>
                 <div className="flexBetween">
-                    <Heading1>Tavla</Heading1>
+                    <div className={classes.leftContainer}>
+                        {editingTitle ? (
+                            <>
+                                <TextField
+                                    defaultValue={title}
+                                    size="medium"
+                                    label="Tavlenavn"
+                                    className={classes.editInput}
+                                    onChange={(e) => setTitle(e.target.value)}
+                                />
+
+                                <SecondarySquareButton
+                                    className={classes.squareButton}
+                                    onClick={() => {
+                                        settings.title = title
+                                        setEditingTitle(false)
+                                    }}
+                                >
+                                    <CheckIcon aria-label="Bekreft tittelendring" />
+                                </SecondarySquareButton>
+                                <SecondarySquareButton
+                                    className={classes.squareButton}
+                                    onClick={() => {
+                                        setTitle(settings.title || 'Tavla')
+                                        setEditingTitle(false)
+                                    }}
+                                >
+                                    <CloseIcon aria-label="Avbryt tittelendring" />
+                                </SecondarySquareButton>
+                            </>
+                        ) : (
+                            <>
+                                <Heading1
+                                    className={classes.title}
+                                    onClick={() => setEditingTitle(true)}
+                                >
+                                    {settings.title || 'Tavla'}
+                                </Heading1>
+                                <SecondarySquareButton
+                                    className={classes.squareButton}
+                                    onClick={() => setEditingTitle(true)}
+                                >
+                                    <EditIcon aria-label="Rediger tittel" />
+                                </SecondarySquareButton>
+                            </>
+                        )}
+                    </div>
                     <div className="flexGap">
                         <SecondaryButton
                             onClick={() => {
diff --git a/next-tavla/src/Admin/scenarios/Edit/styles.module.css b/next-tavla/src/Admin/scenarios/Edit/styles.module.css
index 960c510c45..4b5055d4bc 100644
--- a/next-tavla/src/Admin/scenarios/Edit/styles.module.css
+++ b/next-tavla/src/Admin/scenarios/Edit/styles.module.css
@@ -18,3 +18,18 @@
     font-size: 1em;
     font-weight: 400;
 }
+
+.leftContainer {
+    display: flex;
+    height: 3rem;
+    align-items: center;
+}
+
+.title {
+    margin: auto;
+    line-height: 3rem;
+}
+
+.squareButton {
+    margin-left: 1rem;
+}
diff --git a/next-tavla/src/Shared/types/settings.ts b/next-tavla/src/Shared/types/settings.ts
index aab50561df..cab8c1c9de 100644
--- a/next-tavla/src/Shared/types/settings.ts
+++ b/next-tavla/src/Shared/types/settings.ts
@@ -3,6 +3,7 @@ import { TTile } from './tile'
 export type TTheme = 'entur' | 'dark' | 'light'
 
 export type TSettings = {
+    title?: string
     tiles: TTile[]
     version?: number
     theme?: TTheme