styling(tile): add icons to tile card

next-tavla/app/(admin)/components/CreateBoard/StopPlaceList.tsx

@@ -0,0 +1,25 @@
+import { Paragraph } from '@entur/typography'
+import { TTile } from 'types/tile'
+import { TileCard } from './TileCard'
+
+function StopPlaceList({
+    tiles,
+    onRemove,
+}: {
+    tiles?: TTile[]
+    onRemove: (tile: TTile) => void
+}) {
+    if (!tiles || tiles.length === 0)
+        return (
+            <Paragraph>Du har ikke lagt til noen stoppesteder enda.</Paragraph>
+        )
+    return (
+        <div className="g-2 m-2">
+            {tiles.map((tile) => (
+                <TileCard key={tile.uuid} tile={tile} onRemove={onRemove} />
+            ))}
+        </div>
+    )
+}
+
+export { StopPlaceList }

next-tavla/app/(admin)/components/CreateBoard/TileCard.tsx

@@ -0,0 +1,52 @@
+'use client'
+import { IconButton } from '@entur/button'
+import { DeleteIcon } from '@entur/icons'
+import { useLines } from 'app/(admin)/edit/[id]/components/TileCard/useLines'
+import { TransportIcon } from 'components/TransportIcon'
+import classes from './styles.module.css'
+import { TTile } from 'types/tile'
+import { uniqBy } from 'lodash'
+
+function TileCard({
+    tile,
+    onRemove,
+}: {
+    tile: TTile
+    onRemove: (tile: TTile) => void
+}) {
+    console.log('tile', tile)
+    const lines = useLines(tile)
+    if (!lines) return <div className={classes.card}>Laster..</div>
+    console.log('lines', lines)
+    const transportModes = uniqBy(lines, 'transportMode')
+        .map((l) => l.transportMode)
+        .sort()
+    console.log('transportModes', transportModes)
+
+    return (
+        <div>
+            <div className={classes.card}>
+                <div className="flexRow g-2 alignCenter">
+                    <div className="flexRow g-2 h-3">
+                        {transportModes.map((tm) => (
+                            <TransportIcon transportMode={tm} key={tm} />
+                        ))}
+                    </div>
+                    {tile.name}
+                </div>
+                <div className="flexRow">
+                    <IconButton
+                        onClick={() => {
+                            onRemove
+                        }}
+                    >
+                        <DeleteIcon />
+                        Fjern
+                    </IconButton>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export { TileCard }

next-tavla/app/(admin)/components/CreateBoard/actions.ts

@@ -1,18 +1,32 @@
 'use server'
 
-import { getUserFromSessionCookie } from 'Admin/utils/formActions'
-import { TFormFeedback, getFormFeedbackForError } from 'app/(admin)/utils'
-import { revalidatePath } from 'next/cache'
+import { initializeAdminApp } from 'Admin/utils/firebase'
+import admin, { firestore } from 'firebase-admin'
+import { TBoard, TOrganizationID, TUserID } from 'types/settings'
+
+initializeAdminApp()
 
 export async function createBoard(
-    prevState: TFormFeedback | undefined,
-    data: FormData,
+    id: TUserID | TOrganizationID,
+    board: TBoard,
+    collection: 'users' | 'organizations',
 ) {
-    const user = await getUserFromSessionCookie()
-
-    if (!user) return getFormFeedbackForError('general')
-
-    console.log(data)
-
-    revalidatePath('/')
+    const createdBoard = await firestore()
+        .collection('boards')
+        .add({
+            ...board,
+            meta: {
+                ...board.meta,
+                created: Date.now(),
+                dateModified: Date.now(),
+            },
+        })
+    firestore()
+        .collection(collection)
+        .doc(id)
+        .update({
+            [collection === 'users' ? 'owner' : 'boards']:
+                admin.firestore.FieldValue.arrayUnion(createdBoard.id),
+        })
+    return createdBoard.id
 }

next-tavla/app/(admin)/components/CreateBoard/index.tsx

@@ -4,11 +4,7 @@ import { IconButton, PrimaryButton, SecondaryButton } from '@entur/button'
 import { AddIcon, BackArrowIcon, ForwardIcon } from '@entur/icons'
 import { Stepper } from '@entur/menu'
 import { Modal } from '@entur/modal'
-import { useFormState } from 'react-dom'
-import { createBoard } from './actions'
-import { getFormFeedbackForField } from 'app/(admin)/utils'
-import { FormError } from '../FormError'
-import { Heading3, Paragraph } from '@entur/typography'
+import { Heading3, Heading4, Paragraph } from '@entur/typography'
 import { Name } from './Name'
 import { Organization } from './Organization'
 import Link from 'next/link'
@@ -17,15 +13,23 @@ import { usePathname, useRouter } from 'next/navigation'
 import { useSearchParamsSetter } from 'app/(admin)/hooks/useSearchParamsSetter'
 import { TileSelector } from 'app/(admin)/edit/[id]/components/TileSelector'
 import { TCreateBoard } from 'Admin/types/createBoard'
+import { TTile } from 'types/tile'
+import { useState } from 'react'
+import { StopPlaceList } from './StopPlaceList'
 
 function CreateBoard() {
-    const [state, formAction] = useFormState(createBoard, undefined)
     const pathname = usePathname()
     const router = useRouter()
     const getPathWithParams =
         useSearchParamsSetter<TCreateBoard>('create-board')
     const { open, hasPage, pageParam } = usePageParam('create-board')
     const steps = ['Navn og organisasjon', 'Legg til stopp']
+    const [tiles, setTiles] = useState<TTile[]>([])
+
+    const removeTile = (tile: TTile) => {
+        console.log('removeTile', tile)
+        setTiles(tiles.filter((t) => t.uuid !== tile.uuid))
+    }
 
     return (
         <ToastProvider>
@@ -35,7 +39,10 @@ function CreateBoard() {
             <Modal
                 open={open}
                 size="medium"
-                onDismiss={() => router.push(pathname ?? '/')}
+                onDismiss={() => {
+                    setTiles([])
+                    router.push(pathname ?? '/')
+                }}
                 closeLabel="Avbryt opprettelse av tavle"
             >
                 <Stepper
@@ -44,12 +51,9 @@ function CreateBoard() {
                     className="justifyCenter"
                 />
 
-                <form action={formAction}>
+                <form action={() => {}}>
                     <div className={pageParam === '' ? '' : 'displayNone'}>
                         <Name />
-                        <FormError
-                            {...getFormFeedbackForField('general', state)}
-                        />
                         <Organization />
                     </div>
                     <div className={pageParam === 'stops' ? '' : 'displayNone'}>
@@ -59,9 +63,11 @@ function CreateBoard() {
                             alle retninger, eller flere enkelte retninger.
                         </Paragraph>
                         <TileSelector
-                            action={formAction}
+                            addTile={(tile) => setTiles([...tiles, tile])}
                             flexDirection="flexColumn"
                         />
+                        <Heading4>Stoppesteder lagt til i Tavla</Heading4>
+                        <StopPlaceList tiles={tiles} onRemove={removeTile} />
                     </div>
                     <div className="flexRow justifyBetween">
                         {hasPage && (

next-tavla/app/(admin)/components/CreateBoard/styles.module.css

@@ -0,0 +1,15 @@
+.card {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: 0.5em;
+    border: 1px solid var(--colors-brand-blue);
+    margin-bottom: 1em;
+    padding: 0.5em;
+}
+
+.publicCode {
+    background-color: var(--tertiary-background-color);
+    padding: 0.35em 0.5em;
+    border-radius: 0.5em;
+}

next-tavla/app/(admin)/edit/[id]/components/TileSelector/index.tsx

@@ -6,13 +6,18 @@ import { useStopPlaceSearch } from 'app/(admin)/hooks/useStopPlaceSearch'
 import { useQuaySearch } from 'app/(admin)/hooks/useQuaySearch'
 import { Button } from '@entur/button'
 import { HiddenInput } from 'components/Form/HiddenInput'
+import { TTile } from 'types/tile'
+import { SyntheticEvent } from 'react'
+import { nanoid } from 'nanoid'
 
 function TileSelector({
     action,
     flexDirection = 'flexRow',
+    addTile,
 }: {
-    action: (data: FormData) => void
+    action?: (data: FormData) => void
     flexDirection?: 'flexRow' | 'flexColumn'
+    addTile?: (tile: TTile) => void
 }) {
     const { counties, selectedCounties, setSelectedCounties } =
         useCountiesSearch()
@@ -65,9 +70,40 @@ function TileSelector({
                 value={selectedStopPlace?.label}
             />
             <HiddenInput id="quay" value={selectedQuay?.value} />
-            <Button variant="primary" type="submit">
-                Legg til
-            </Button>
+
+            {addTile ? (
+                <Button
+                    variant="primary"
+                    onClick={(e: SyntheticEvent) => {
+                        e.preventDefault()
+                        const placeId = selectedQuay?.value
+                            ? selectedQuay?.value
+                            : selectedStopPlace?.value
+                        const tile = {
+                            type:
+                                placeId !== selectedStopPlace?.value
+                                    ? 'quay'
+                                    : 'stopPlace',
+                            name: selectedStopPlace?.label,
+                            uuid: nanoid(),
+                            placeId,
+                            columns: [
+                                'line',
+                                'destination',
+                                'time',
+                                'realtime',
+                            ],
+                        } as TTile
+                        addTile(tile)
+                    }}
+                >
+                    Legg til
+                </Button>
+            ) : (
+                <Button variant="primary" type="submit">
+                    Legg til
+                </Button>
+            )}
         </form>
     )
 }