feat(edit): change and save title (#1167)

* feat(edit): title can now be changed and saved

Signed-off-by: Fredrik Busklein <[email protected]>

* chore(edit): added changeTitle action to reducer

* chore(edit): addressed proposed changes

* fix(edit): optional prop for title

* fix(edit): change to state for temporary title

* fix(edit):remove onclick from heading

* fix(edit): 2 return statements instead of ternary ops

* chore(edit): cleanup in edit board title

* fix(board): changed to named export

---------

Signed-off-by: Fredrik Busklein <[email protected]>
Co-authored-by: Natasha Tikhonova <[email protected]>

next-tavla/src/Admin/scenarios/BoardTitle/index.tsx

@@ -0,0 +1,62 @@
+import { SecondarySquareButton } from '@entur/button'
+import { TextField } from '@entur/form'
+import { CheckIcon, CloseIcon, EditIcon } from '@entur/icons'
+import { Heading1 } from '@entur/typography'
+import { useSettingsDispatch } from 'Admin/utils/contexts'
+import { useState } from 'react'
+import classes from './styles.module.css'
+
+function BoardTitle({ title }: { title?: string }) {
+    const [isEditing, setIsEditing] = useState(false)
+    const dispatch = useSettingsDispatch()
+    const boardTitle = title || 'Tavla'
+    const [tempTitle, setTempTitle] = useState(boardTitle)
+
+    if (!isEditing) {
+        return (
+            <div className={classes.editTitle}>
+                <Heading1 className={classes.title}>{boardTitle}</Heading1>
+                <SecondarySquareButton
+                    className={classes.squareButton}
+                    onClick={() => setIsEditing(true)}
+                >
+                    <EditIcon aria-label="Rediger tittel" />
+                </SecondarySquareButton>
+            </div>
+        )
+    }
+
+    return (
+        <div className={classes.editTitle}>
+            <TextField
+                defaultValue={boardTitle}
+                size="medium"
+                label="Navn på tavlen"
+                onChange={(e) => setTempTitle(e.target.value)}
+            />
+            <SecondarySquareButton
+                className={classes.squareButton}
+                onClick={() => {
+                    setIsEditing(false)
+                    dispatch({
+                        type: 'setTitle',
+                        title: tempTitle,
+                    })
+                }}
+            >
+                <CheckIcon aria-label="Bekreft tittelendring" />
+            </SecondarySquareButton>
+            <SecondarySquareButton
+                className={classes.squareButton}
+                onClick={() => {
+                    setTempTitle(boardTitle)
+                    setIsEditing(false)
+                }}
+            >
+                <CloseIcon aria-label="Avbryt tittelendring" />
+            </SecondarySquareButton>
+        </div>
+    )
+}
+
+export { BoardTitle }

next-tavla/src/Admin/scenarios/BoardTitle/styles.module.css

@@ -0,0 +1,11 @@
+.editTitle {
+    display: flex;
+    height: 3rem;
+    align-items: center;
+    gap: 1em;
+}
+
+.title {
+    margin: auto;
+    line-height: 3rem;
+}

next-tavla/src/Admin/scenarios/Edit/index.tsx

@@ -8,12 +8,12 @@ import { SettingsDispatchContext } from 'Admin/utils/contexts'
 import { settingsReducer } from './reducer'
 import { PrimaryButton, SecondaryButton } from '@entur/button'
 import { useAutoSaveSettings } from './hooks/useAutoSaveSettings'
-import { Heading1 } from '@entur/typography'
 import { CopyIcon, SaveIcon } from '@entur/icons'
 import { SecondaryLink } from 'components/SecondaryLink'
 import { useToast } from '@entur/alert'
 import { Login } from '../Login'
 import { DecodedIdToken } from 'firebase-admin/lib/auth/token-verifier'
+import { BoardTitle } from '../BoardTitle'
 
 const LOGIN_ENABLED = false
 
@@ -37,7 +37,7 @@ function Edit({
         <SettingsDispatchContext.Provider value={dispatch}>
             <div className={classes.settings}>
                 <div className="flexBetween">
-                    <Heading1>Tavla</Heading1>
+                    <BoardTitle title={settings.title} />
                     <div className="flexGap">
                         <SecondaryButton
                             onClick={() => {

next-tavla/src/Admin/scenarios/Edit/reducer.ts

@@ -23,6 +23,7 @@ export type Action =
       }
     | { type: 'deleteLines'; tileId: string }
     | { type: 'setColumn'; tileId: string; column: TColumn }
+    | { type: 'setTitle'; title: string }
 
 export function settingsReducer(
     settings: TSettings,
@@ -48,6 +49,9 @@ export function settingsReducer(
     }
 
     switch (action.type) {
+        // Title operations
+        case 'setTitle':
+            return { ...settings, title: action.title }
         // Theme operations
         case 'changeTheme': {
             return { ...settings, theme: action.theme }

next-tavla/src/Admin/scenarios/Edit/styles.module.css

@@ -13,8 +13,3 @@
     bottom: 1.25em;
     right: 5em;
 }
-
-.saveButton {
-    font-size: 1em;
-    font-weight: 400;
-}

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