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

entur · Aug 21, 2023 · f6e1099 · f6e1099
1 parent 70a8468
commit f6e1099
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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