✨ Innfør valg av quay på admin/rediger side

tavla/app/(admin)/components/TileSelector/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { Dropdown, MultiSelect, SearchableDropdown } from '@entur/dropdown'
+import { MultiSelect, SearchableDropdown } from '@entur/dropdown'
 import { SearchIcon } from '@entur/icons'
 import { HiddenInput } from 'app/(admin)/components/Form/HiddenInput'
 import { SubmitButton } from 'app/(admin)/components/Form/SubmitButton'
@@ -30,7 +30,7 @@ function TileSelector({
     const { stopPlaceItems, selectedStopPlace, setSelectedStopPlace } =
         useStopPlaceSearch(selectedCounties.map((county) => county.value))
 
-    const { quays, selectedQuay, setSelectedQuay } = useQuaySearch(
+    const { selectedQuay, setSelectedQuay } = useQuaySearch(
         selectedStopPlace?.value.id ?? '',
     )
 
@@ -126,31 +126,6 @@ function TileSelector({
                     {...getFormFeedbackForField('stop_place', state)}
                 />
             </div>
-            <div className="w-full">
-                <Dropdown
-                    items={quays}
-                    label="Plattform/retning"
-                    prepend={<SearchIcon aria-hidden />}
-                    selectedItem={
-                        selectedQuay ??
-                        (selectedStopPlace
-                            ? {
-                                  value: selectedStopPlace.value.id,
-                                  label: 'Vis alle',
-                              }
-                            : null)
-                    }
-                    onChange={(e) => {
-                        posthog.capture('stop_place_add_interaction', {
-                            location: trackingLocation,
-                            field: 'platform',
-                            action: e?.value ? 'selected' : 'cleared',
-                        })
-                        setSelectedQuay(e)
-                    }}
-                    {...getFormFeedbackForField('quay', state)}
-                />
-            </div>
             <HiddenInput id="stop_place" value={selectedStopPlace?.value.id} />
             <HiddenInput
                 id="stop_place_name"

tavla/app/(admin)/tavler/[id]/rediger/components/Settings/index.tsx

@@ -49,13 +49,13 @@ function Settings({ board }: { board: BoardDB }) {
     }, [])
 
     return (
-        <div className="flex flex-col gap-4 rounded-md bg-background px-2 py-2 md:px-6 md:py-8">
+        <div className="flex flex-col gap-4 rounded-md bg-tintLight px-2 py-2 md:px-6 md:py-8">
             <Heading2>Innstillinger</Heading2>
             <FormError
                 {...getFormFeedbackForField('general', formErrors.general)}
             />
             <form className="flex flex-col gap-6 lg:flex-row" ref={formRef}>
-                <div className="box shrink">
+                <div className="box shrink bg-white">
                     <Heading3 margin="bottom">Tavlevisning </Heading3>
                     <div className="flex flex-col gap-4">
                         <ViewType
@@ -83,7 +83,7 @@ function Settings({ board }: { board: BoardDB }) {
                         <HiddenInput id="bid" value={board.id} />
                     </div>
                 </div>
-                <div className="box md:min-w-[480px]">
+                <div className="box bg-white md:min-w-[480px]">
                     <Heading3 margin="none"> Tilleggsinformasjon </Heading3>
                     <SubParagraph className="mt-0">
                         Felter markert med * er påkrevd.

tavla/app/(admin)/tavler/[id]/rediger/components/TileCard/PlatformAndLines.tsx

@@ -0,0 +1,133 @@
+'use client'
+import { Checkbox } from '@entur/form'
+import { TransportIcon } from 'app/(admin)/tavler/[id]/rediger/components/Settings/components/TransportIcon'
+import { EventProps } from 'app/posthog/events'
+import { usePosthogTracking } from 'app/posthog/usePosthogTracking'
+import { BoardTileDB } from 'src/types/db-types/boards'
+import { TTransportMode } from 'src/types/graphql-schema'
+import { TLineFragment } from './types'
+
+function PlatformAndLines({
+    tile,
+    quayId,
+    groupKey,
+    title,
+    description,
+    lines,
+    trackingLocation,
+    transportModes,
+    selectedLineIds,
+    onToggleLine,
+    onToggleGroup,
+}: {
+    tile: BoardTileDB
+    quayId: string
+    groupKey: string
+    title: string
+    description: string | null
+    lines: TLineFragment[]
+    trackingLocation: EventProps<'stop_place_edit_interaction'>['location']
+    transportModes: TTransportMode[]
+    selectedLineIds: Set<string>
+    onToggleLine: (compositeKey: string) => void
+    onToggleGroup: (compositeKeys: string[], checked: boolean) => void
+}) {
+    const posthog = usePosthogTracking()
+
+    const selectedLinesInGroup = lines.filter((l) =>
+        selectedLineIds.has(`${quayId}||${l.id}`),
+    )
+    const isAllSelected =
+        lines.length > 0 && selectedLinesInGroup.length === lines.length
+    const isNoneSelected = selectedLinesInGroup.length === 0
+    const isIndeterminate = !isAllSelected && !isNoneSelected
+    const showLines = !isNoneSelected
+
+    return (
+        <div className="rounded-lg border-2 p-4">
+            <div className="flex flex-row justify-between">
+                <div className="flex flex-row items-center justify-start gap-2 pr-3 font-semibold">
+                    <div className="flex flex-row gap-1 self-center">
+                        {transportModes.map((mode) => (
+                            <TransportIcon
+                                key={mode}
+                                transportMode={mode}
+                                className={`h-7 w-7 rounded-md bg-${mode} p-1 text-white`}
+                            />
+                        ))}
+                    </div>
+                    <div className="flex flex-row flex-wrap items-baseline gap-x-2">
+                        {title}
+                        {description && (
+                            <span className="text-sm font-normal text-[#626493]">
+                                {description}
+                            </span>
+                        )}
+                    </div>
+                </div>
+                <Checkbox
+                    id={`select-all-${tile.uuid}-${groupKey}`}
+                    checked={isIndeterminate ? 'indeterminate' : isAllSelected}
+                    onChange={(e) => {
+                        const checked = e.target.checked
+                        posthog.capture('stop_place_edit_interaction', {
+                            location: trackingLocation,
+                            field: 'lines',
+                            column_value: 'none',
+                            action: checked ? 'select_all' : 'cleared',
+                        })
+                        onToggleGroup(
+                            lines.map((l) => `${quayId}||${l.id}`),
+                            checked,
+                        )
+                    }}
+                />
+            </div>
+            {[...lines]
+                .sort((a, b) => {
+                    const modeA = a.transportMode || ''
+                    const modeB = b.transportMode || ''
+                    if (modeA !== modeB) {
+                        return modeA.localeCompare(modeB)
+                    }
+                    const codeA = a.publicCode || ''
+                    const codeB = b.publicCode || ''
+                    return codeA.localeCompare(codeB, undefined, {
+                        numeric: true,
+                    })
+                })
+                .map((line) => (
+                    <Checkbox
+                        key={line.id}
+                        value={`${quayId}||${line.id}`}
+                        checked={selectedLineIds.has(`${quayId}||${line.id}`)}
+                        className={`pl-3 ${showLines ? '' : 'hidden'}`}
+                        name={`${tile.uuid}-lines`}
+                        data-transport-mode={line.transportMode}
+                        onChange={() => {
+                            posthog.capture('stop_place_edit_interaction', {
+                                location: trackingLocation,
+                                field: 'lines',
+                                column_value: 'none',
+                                action: 'changed',
+                            })
+                            onToggleLine(`${quayId}||${line.id}`)
+                        }}
+                    >
+                        <div className="flex flex-row items-center gap-2">
+                            {line.publicCode && (
+                                <div
+                                    className={`publicCode bg-${line.transportMode} text-white`}
+                                >
+                                    {line.publicCode}
+                                </div>
+                            )}
+                            {line.name}
+                        </div>
+                    </Checkbox>
+                ))}
+        </div>
+    )
+}
+
+export { PlatformAndLines }

tavla/app/(admin)/tavler/[id]/rediger/components/TileCard/components/DeleteTileButton.tsx

@@ -1,46 +1,35 @@
 import { NegativeButton } from '@entur/button'
 import { DeleteIcon } from '@entur/icons'
 import { Tooltip } from '@entur/tooltip'
-import { BoardDB, BoardTileDB } from 'src/types/db-types/boards'
 
 function DeleteTileButton({
-    isWideScreen,
     deleteTile,
 }: {
     isWideScreen: boolean
-    deleteTile: (
-        boardId: string,
-        tile: BoardTileDB,
-        demoBoard?: BoardDB,
-    ) => void
+    deleteTile: () => void
 }) {
     const StyledNegativeButton = (
         <NegativeButton
             onClick={deleteTile}
             aria-label="Fjern stoppested"
             type="button"
-            width="fluid"
-            className={isWideScreen ? '!min-w-0' : ''}
+            size="medium"
+            className="!min-w-0"
         >
             <DeleteIcon />
-            {!isWideScreen && <>Fjern stoppested</>}
         </NegativeButton>
     )
 
     return (
         <>
-            <div className={isWideScreen ? 'hidden sm:block' : 'sm:hidden'}>
-                {isWideScreen ? (
-                    <Tooltip
-                        placement="bottom"
-                        content="Fjern stoppested"
-                        id="tooltip-remove-tile"
-                    >
-                        {StyledNegativeButton}
-                    </Tooltip>
-                ) : (
-                    StyledNegativeButton
-                )}
+            <div>
+                <Tooltip
+                    placement="bottom"
+                    content="Fjern stoppested"
+                    id="tooltip-remove-tile"
+                >
+                    {StyledNegativeButton}
+                </Tooltip>
             </div>
         </>
     )

tavla/app/(admin)/tavler/[id]/rediger/components/TileCard/components/EditRemoveTileButtonGroup.tsx

@@ -3,7 +3,6 @@ import { CloseIcon, EditIcon } from '@entur/icons'
 import { Tooltip } from '@entur/tooltip'
 import { EventProps } from 'app/posthog/events'
 import { usePosthogTracking } from 'app/posthog/usePosthogTracking'
-import { BoardDB, BoardTileDB } from 'src/types/db-types/boards'
 import { DeleteTileButton } from './DeleteTileButton'
 
 function EditRemoveTileButtonGroup({
@@ -18,23 +17,20 @@ function EditRemoveTileButtonGroup({
     hasTileChanged: boolean
     setIsTileOpen: (isOpen: boolean) => void
     setConfirmOpen: (isOpen: boolean) => void
-    deleteTile: (
-        boardId: string,
-        tile: BoardTileDB,
-        demoBoard?: BoardDB,
-    ) => void
+    deleteTile: () => void
     trackingLocation: EventProps<'stop_place_edit_cancelled'>['location']
 }) {
     const posthog = usePosthogTracking()
 
     return (
-        <div className="flex gap-md">
+        <div className="flex gap-4">
             <Tooltip
                 placement="bottom"
                 content={isTileOpen ? 'Lukk' : 'Rediger stoppested'}
                 id="tooltip-edit-tile"
             >
                 <SecondarySquareButton
+                    size="small"
                     onClick={() => {
                         if (!isTileOpen) {
                             posthog.capture('stop_place_edit_started', {

tavla/app/(admin)/tavler/[id]/rediger/components/TileCard/components/SaveCancelDeleteTileButtonGroup.tsx

@@ -11,16 +11,13 @@ import { usePosthogTracking } from 'app/posthog/usePosthogTracking'
 import Goat from 'assets/illustrations/Goat.png'
 import Image from 'next/image'
 import { useNonNullContext } from 'src/hooks/useNonNullContext'
-import { BoardDB, BoardTileDB } from 'src/types/db-types/boards'
-import { DeleteTileButton } from './DeleteTileButton'
 
 function SaveCancelDeleteTileButtonGroup({
     confirmOpen,
     hasTileChanged,
     resetTile,
     setIsTileOpen,
     setConfirmOpen,
-    deleteTile,
     validation,
     trackingLocation,
 }: {
@@ -29,11 +26,7 @@ function SaveCancelDeleteTileButtonGroup({
     resetTile: () => void
     setIsTileOpen: (isOpen: boolean) => void
     setConfirmOpen: (confirmOpen: boolean) => void
-    deleteTile: (
-        boardId: string,
-        tile: BoardTileDB,
-        demoBoard?: BoardDB,
-    ) => void
+    deleteTile: () => void
     validation?: TFormFeedback
     trackingLocation: EventProps<'stop_place_edit_interaction'>['location']
 }) {
@@ -75,10 +68,6 @@ function SaveCancelDeleteTileButtonGroup({
                 >
                     Avbryt
                 </Button>
-                <DeleteTileButton
-                    isWideScreen={false}
-                    deleteTile={deleteTile}
-                />
             </div>
 
             <Modal