feat(edit): change display name on tile (#1616)

* feat(edit): change display name on tile * chore(edit): use name directly * chore(edit): remove undefined
entur · Aug 21, 2024 · a2c4897 · a2c4897
1 parent 793bbcc
commit a2c4897
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 12 deletions.
diff --git a/tavla/app/(admin)/components/Delete/index.tsx b/tavla/app/(admin)/components/Delete/index.tsx
@@ -49,7 +49,7 @@ function Delete({
                     className="gap-4"
                     variant="secondary"
                     aria-label="Slett organisasjon"
-                    size="small"
+                    size="medium"
                 >
                     {type === 'secondary' && 'Slett'}
                     <DeleteIcon />

diff --git a/tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx b/tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx
@@ -1,13 +1,14 @@
 'use client'
-import { BaseExpand } from '@entur/expand'
-import { TTile } from 'types/tile'
+import { useToast } from '@entur/alert'
 import {
     Button,
     IconButton,
     NegativeButton,
     SecondarySquareButton,
 } from '@entur/button'
 import { FilterChip } from '@entur/chip'
+import { BaseExpand } from '@entur/expand'
+import { Checkbox, Switch, TextField } from '@entur/form'
 import {
     CloseIcon,
     DeleteIcon,
@@ -16,15 +17,17 @@ import {
     QuestionIcon,
     UpwardIcon,
 } from '@entur/icons'
-import { Checkbox, Switch, TextField } from '@entur/form'
 import { Modal } from '@entur/modal'
+import { Tooltip } from '@entur/tooltip'
 import {
     Heading3,
     Heading4,
     Label,
     Paragraph,
     SubParagraph,
 } from '@entur/typography'
+import { isEmptyOrSpaces } from 'app/(admin)/edit/utils'
+import { ColumnModal } from 'app/(admin)/organizations/components/DefaultColumns/ColumnModal'
 import Goat from 'assets/illustrations/Goat.png'
 import { HiddenInput } from 'components/Form/HiddenInput'
 import { SubmitButton } from 'components/Form/SubmitButton'
@@ -34,15 +37,13 @@ import Image from 'next/image'
 import { usePostHog } from 'posthog-js/react'
 import { Dispatch, SetStateAction, useEffect, useState } from 'react'
 import { Columns, TColumn } from 'types/column'
+import { TLocation } from 'types/meta'
 import { TBoard, TBoardID } from 'types/settings'
+import { TTile } from 'types/tile'
+import { TransportModeAndLines } from './TransportModeAndLines'
 import { deleteTile, getOrganizationForBoard, saveTile } from './actions'
 import { useLines } from './useLines'
 import { sortLineByPublicCode } from './utils'
-import { TransportModeAndLines } from './TransportModeAndLines'
-import { TLocation } from 'types/meta'
-import { Tooltip } from '@entur/tooltip'
-import { ColumnModal } from 'app/(admin)/organizations/components/DefaultColumns/ColumnModal'
-import { useToast } from '@entur/alert'
 
 function TileCard({
     bid,
@@ -220,6 +221,16 @@ function TileCard({
                             data.delete('showDistance')
                             const offset = data.get('offset') as number | null
                             data.delete('offset')
+                            const displayName = data.get(
+                                'displayName',
+                            ) as string
+                            data.delete('displayName')
+
+                            if (isEmptyOrSpaces(displayName))
+                                return addToast({
+                                    variant: 'info',
+                                    content: 'Navnet kan ikke være tomt.',
+                                })
 
                             let lines: string[] = []
                             for (const line of data.values()) {
@@ -240,6 +251,7 @@ function TileCard({
                                     distance: tile.walkingDistance?.distance,
                                 },
                                 offset: Number(offset) || undefined,
+                                name: displayName,
                             } as TTile
 
                             bid === 'demo'
@@ -249,7 +261,21 @@ function TileCard({
                         onSubmit={reset}
                         onInput={() => setChanged(true)}
                     >
-                        <Heading4 margin="bottom">Gåavstand</Heading4>
+                        <div className="flex flex-col gap-2">
+                            <Heading4 margin="bottom">
+                                Navn på stoppested
+                            </Heading4>
+                            <SubParagraph>
+                                Dette navnet vil vises i tavlen.
+                            </SubParagraph>
+                            <TextField
+                                label="Navn på stoppested"
+                                className="!w-2/5"
+                                name="displayName"
+                                defaultValue={tile.name}
+                            />
+                        </div>
+                        <Heading4>Gåavstand</Heading4>
                         <SubParagraph>
                             Vis gåavstand fra lokasjonen til Tavla til
                             stoppestedet.

diff --git a/tavla/app/(admin)/utils/index.ts b/tavla/app/(admin)/utils/index.ts
@@ -160,6 +160,12 @@ export function getFormFeedbackForError(
                 feedback: 'Du har ikke lagt til noen stoppesteder',
                 variant: 'error',
             }
+        case 'board/tiles-name-missing':
+            return {
+                form_type: 'name',
+                feedback: 'Navnet kan ikke være tomt',
+                variant: 'error',
+            }
         case 'boards/tag-exists':
             return {
                 form_type: 'general',

diff --git a/tavla/src/Board/scenarios/QuayTile/index.tsx b/tavla/src/Board/scenarios/QuayTile/index.tsx
@@ -15,6 +15,7 @@ export function QuayTile({
     columns,
     walkingDistance,
     offset,
+    name,
 }: TQuayTile) {
     const { data } = useQuery(
         GetQuayQuery,
@@ -47,7 +48,10 @@ export function QuayTile({
 
     return (
         <Tile className="flex flex-col">
-            <TableHeader heading={heading} walkingDistance={walkingDistance} />
+            <TableHeader
+                heading={name ?? heading}
+                walkingDistance={walkingDistance}
+            />
             <Table
                 columns={columns}
                 departures={data.quay.estimatedCalls}

diff --git a/tavla/src/Board/scenarios/StopPlaceTile/index.tsx b/tavla/src/Board/scenarios/StopPlaceTile/index.tsx
@@ -14,6 +14,7 @@ export function StopPlaceTile({
     columns,
     walkingDistance,
     offset,
+    name,
 }: TStopPlaceTile) {
     const { data } = useQuery(
         StopPlaceQuery,
@@ -43,7 +44,7 @@ export function StopPlaceTile({
     return (
         <Tile className="flex flex-col">
             <TableHeader
-                heading={data.stopPlace.name}
+                heading={name ?? data.stopPlace.name}
                 walkingDistance={walkingDistance}
             />
             <Table