🚧 Andreversjon av filter med lagring

Author: olahjacobsen

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

@@ -3,7 +3,6 @@ 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 { useState } from 'react'
 import { BoardTileDB } from 'src/types/db-types/boards'
 import { TTransportMode } from 'src/types/graphql-schema'
 import { TLineFragment } from './types'
@@ -14,104 +13,100 @@ function PlatformAndLines({
     title,
     lines,
     trackingLocation,
-    transportMode,
+    transportModes,
+    selectedLineIds,
+    onToggleLine,
+    onToggleGroup,
 }: {
     tile: BoardTileDB
     groupKey: string
     title: string
     lines: TLineFragment[]
     trackingLocation: EventProps<'stop_place_edit_interaction'>['location']
-    transportMode: TTransportMode | null
+    transportModes: TTransportMode[]
+    selectedLineIds: Set<string>
+    onToggleLine: (lineId: string) => void
+    onToggleGroup: (lineIds: string[], checked: boolean) => void
 }) {
     const posthog = usePosthogTracking()
 
-    const lineElements = document.getElementsByName(`${tile.uuid}-${groupKey}`)
-
-    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)
-    }
+    const selectedLinesInGroup = lines.filter((l) => selectedLineIds.has(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-4 font-semibold">
-                    <TransportIcon
-                        transportMode={transportMode}
-                        className={`h-7 w-7 text-white bg-${transportMode} rounded-md p-1`}
-                    />
+                    <div className="flex flex-row gap-1">
+                        {transportModes.map((mode) => (
+                            <TransportIcon
+                                key={mode}
+                                transportMode={mode}
+                                className={`h-7 w-7 rounded-md bg-${mode} p-1 text-white`}
+                            />
+                        ))}
+                    </div>
                     {title}
                 </div>
                 <Checkbox
-                    checked={checked}
+                    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: e.target.checked ? 'select_all' : 'cleared',
-                        })
-                        setChecked(e.currentTarget.checked)
-                        lineElements.forEach((input) => {
-                            if (input instanceof HTMLInputElement)
-                                input.checked = e.currentTarget.checked
+                            action: checked ? 'select_all' : 'cleared',
                         })
+                        onToggleGroup(
+                            lines.map((l) => l.id),
+                            checked,
+                        )
                     }}
                 />
             </div>
-            {checked &&
-                lines.map((line) => (
+            {[...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
-                        name={`${tile.uuid}-${groupKey}`}
-                        defaultChecked={
-                            !tile.whitelistedLines ||
-                            tile.whitelistedLines.length === 0 ||
-                            tile.whitelistedLines.includes(line.id)
-                        }
                         key={line.id}
                         value={line.id}
-                        className="pl-6"
+                        checked={selectedLineIds.has(line.id)}
+                        className={`pl-6 ${showLines ? 'inline' : 'hidden'}`}
+                        name={`${tile.uuid}-${line.id}`}
+                        data-transport-mode={line.transportMode}
                         onChange={() => {
+                            /* TODO: add when logic is confirmed correct
+                            
                             posthog.capture('stop_place_edit_interaction', {
                                 location: trackingLocation,
                                 field: 'lines',
                                 column_value: 'none',
                                 action: 'changed',
-                            })
-                            determineAllChecked()
+                            })*/
+                            onToggleLine(line.id)
                         }}
                     >
-                        <div className="flex flex-row items-center gap-1">
+                        <div className="flex flex-row items-center gap-2">
                             {line.publicCode && (
                                 <div
-                                    className={`publicCode bg-${transportMode} text-white`}
+                                    className={`publicCode bg-${line.transportMode} text-white`}
                                 >
                                     {line.publicCode}
                                 </div>