feat(edit): fix transport mode and line select

next-tavla/app/(admin)/edit/[id]/components/TileCard/TransportModeAndLines.tsx

@@ -0,0 +1,104 @@
+'use client'
+import { TTransportMode } from 'types/graphql-schema'
+import { TTile } from 'types/tile'
+import { TransportIcon } from 'components/TransportIcon'
+import { transportModeNames } from './utils'
+import { Checkbox } from '@entur/form'
+import { TLineFragment } from './types'
+import { useState } from 'react'
+
+function TransportModeAndLines({
+ tile,
+ transportMode,
+ lines,
+}: {
+ tile: TTile
+ transportMode: TTransportMode | null
+ lines: TLineFragment[]
+}) {
+ const lineElements = document.getElementsByName(
+ `${tile.uuid}-${transportMode}`,
+ )
+
+ const anyLineInWhitelist = lines.some((l) =>
+ tile.whitelistedLines?.includes(l.id),
+ )
+ const missingLinesInWhitelist = lines.some(
+ (l) => !tile.whitelistedLines?.includes(l.id),
+ )
+
+ const defaultChecked = () => {
+ if (missingLinesInWhitelist && anyLineInWhitelist)
+ return 'indeterminate'
+ return (
+ !tile.whitelistedLines ||
+ tile.whitelistedLines.length === 0 ||
+ !missingLinesInWhitelist
+ )
+ }
+ const [checked, setChecked] = useState<boolean | 'indeterminate'>(
+ defaultChecked(),
+ )
+
+ const determineAllChecked = () => {
+ let count = 0
+ for (const l of lineElements.values()) {
+ if (l instanceof HTMLInputElement) {
+ if (l.checked === true) count++
+ }
+ }
+ if (count === 0) setChecked(false)
+ else if (count < lineElements.length) setChecked('indeterminate')
+ else setChecked(true)
+ }
+
+ return (
+ <div>
+ <div className="flex flex-row gap-4 items-center justify-start font-semibold">
+ <TransportIcon
+ transportMode={transportMode}
+ className="w-8 h-8"
+ />
+ {transportModeNames(transportMode)}
+ </div>
+ <div className="divider" />
+ <div className="flex flex-row items-center">
+ <Checkbox
+ checked={checked}
+ onChange={(e) => {
+ setChecked(e.currentTarget.checked)
+ lineElements.forEach((input) => {
+ if (input instanceof HTMLInputElement)
+ input.checked = e.currentTarget.checked
+ })
+ }}
+ >
+ Velg alle
+ </Checkbox>
+ </div>
+ {lines.map((line) => (
+ <Checkbox
+ name={`${tile.uuid}-${transportMode}`}
+ defaultChecked={
+ !tile.whitelistedLines ||
+ tile.whitelistedLines.length === 0 ||
+ tile.whitelistedLines.includes(line.id)
+ }
+ key={line.id}
+ value={line.id}
+ className="pl-6"
+ onChange={determineAllChecked}
+ >
+ <div className="flex flex-row items-center gap-1">
+ {line.publicCode && (
+ <div className="publicCode">{line.publicCode}</div>
+ )}
+ {line.name}
+ </div>
+ </Checkbox>
+ ))}
+ </div>
+ )
+}
+
+export { TransportModeAndLines }

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

@@ -24,11 +24,10 @@ import { useState } from 'react'
 import { Columns, TColumn } from 'types/column'
 import { TBoardID } from 'types/settings'
 import { getBoard, getWalkingDistanceTile } from '../../actions'
-import { LineCheckbox } from './LineCheckbox'
-import { TransportModeCheckbox } from './TransportModeCheckbox'
 import { deleteTile, getOrganizationForBoard, saveTile } from './actions'
 import { useLines } from './useLines'
 import { sortLineByPublicCode } from './utils'
+import { TransportModeAndLines } from './TransportModeAndLines'
 
 function TileCard({ bid, tile }: { bid: TBoardID; tile: TTile }) {
  const posthog = usePostHog()
@@ -239,20 +238,12 @@ function TileCard({ bid, tile }: { bid: TBoardID; tile: TTile }) {
  <div className="flex flex-row gap-4">
  {linesByModeSorted.map(
  ({ transportMode, lines }) => (
- <div key={transportMode}>
- <TransportModeCheckbox
- tile={tile}
- transportMode={transportMode}
- />
- {lines.map((line) => (
- <LineCheckbox
- key={line.id}
- tile={tile}
- line={line}
- transportMode={transportMode}
- />
- ))}
- </div>
+ <TransportModeAndLines
+ key={transportMode}
+ tile={tile}
+ transportMode={transportMode}
+ lines={lines}
+ />
  ),
  )}
  </div>

next-tavla/app/globals.css

@@ -185,6 +185,10 @@
  background: var(--secondary-background-color);
  }
 
+ .divider {
+ @apply border-b-secondary border-b-2 my-2;
+ }
+
  .publicCode {
  background-color: var(--tertiary-background-color);
  padding: 0.35em 0.5em;