From 6e6aa42f379442d093c1518522f4f7b4f54f6791 Mon Sep 17 00:00:00 2001 From: lindtvedtsebastian Date: Fri, 31 May 2024 10:49:57 +0200 Subject: [PATCH 1/4] feat(edit): fix transport mode and line select --- .../[id]/components/TileCard/LineCheckbox.tsx | 37 ------- .../TileCard/TransportModeAndLines.tsx | 103 ++++++++++++++++++ .../TileCard/TransportModeCheckbox.tsx | 46 -------- .../edit/[id]/components/TileCard/index.tsx | 23 ++-- 4 files changed, 110 insertions(+), 99 deletions(-) delete mode 100644 next-tavla/app/(admin)/edit/[id]/components/TileCard/LineCheckbox.tsx create mode 100644 next-tavla/app/(admin)/edit/[id]/components/TileCard/TransportModeAndLines.tsx delete mode 100644 next-tavla/app/(admin)/edit/[id]/components/TileCard/TransportModeCheckbox.tsx diff --git a/next-tavla/app/(admin)/edit/[id]/components/TileCard/LineCheckbox.tsx b/next-tavla/app/(admin)/edit/[id]/components/TileCard/LineCheckbox.tsx deleted file mode 100644 index 336d137f1..000000000 --- a/next-tavla/app/(admin)/edit/[id]/components/TileCard/LineCheckbox.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { Checkbox } from '@entur/form' -import { TTransportMode } from 'types/graphql-schema' -import { TTile } from 'types/tile' -import { TLineFragment } from './types' - -function LineCheckbox({ - tile, - line, - transportMode, -}: { - tile: TTile - line: TLineFragment - transportMode: TTransportMode | null -}) { - return ( - -
- {line.publicCode && } - {line.name} -
- - ) -} -function PublicCode({ publicCode }: { publicCode: string | null }) { - return
{publicCode}
-} -export { LineCheckbox } diff --git a/next-tavla/app/(admin)/edit/[id]/components/TileCard/TransportModeAndLines.tsx b/next-tavla/app/(admin)/edit/[id]/components/TileCard/TransportModeAndLines.tsx new file mode 100644 index 000000000..838187cc4 --- /dev/null +++ b/next-tavla/app/(admin)/edit/[id]/components/TileCard/TransportModeAndLines.tsx @@ -0,0 +1,103 @@ +'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( + defaultChecked(), + ) + + return ( +
+
+ + {transportModeNames(transportMode)} +
+
+
+ { + setChecked(e.currentTarget.checked) + lineElements.forEach((input) => { + if (input instanceof HTMLInputElement) + input.checked = e.currentTarget.checked + }) + }} + > + Velg alle + +
+ {lines.map((line) => ( + { + 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) + }} + > +
+ {line.publicCode && ( +
{line.publicCode}
+ )} + {line.name} +
+ + ))} +
+ ) +} + +export { TransportModeAndLines } diff --git a/next-tavla/app/(admin)/edit/[id]/components/TileCard/TransportModeCheckbox.tsx b/next-tavla/app/(admin)/edit/[id]/components/TileCard/TransportModeCheckbox.tsx deleted file mode 100644 index ac0303ed5..000000000 --- a/next-tavla/app/(admin)/edit/[id]/components/TileCard/TransportModeCheckbox.tsx +++ /dev/null @@ -1,46 +0,0 @@ -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' - -function TransportModeCheckbox({ - tile, - transportMode, -}: { - tile: TTile - transportMode: TTransportMode | null -}) { - return ( -
-
- - {transportModeNames(transportMode)} -
-
-
- { - document - .getElementsByName(`${tile.uuid}-${transportMode}`) - .forEach((input) => { - if (input instanceof HTMLInputElement) - input.checked = e.currentTarget.checked - }) - }} - > - Velg alle - -
-
- ) -} - -export { TransportModeCheckbox } diff --git a/next-tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx b/next-tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx index 8e65b609b..af8d58a70 100644 --- a/next-tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx +++ b/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 }) {
{linesByModeSorted.map( ({ transportMode, lines }) => ( -
- - {lines.map((line) => ( - - ))} -
+ ), )}
From d673fb3bc63e3157d8a394b540cce66fefb9ae82 Mon Sep 17 00:00:00 2001 From: lindtvedtsebastian Date: Wed, 5 Jun 2024 07:07:23 +0200 Subject: [PATCH 2/4] chore(edit): extract function and divider class --- .../TileCard/TransportModeAndLines.tsx | 27 ++++++++++--------- next-tavla/app/globals.css | 4 +++ 2 files changed, 18 insertions(+), 13 deletions(-) diff --git a/next-tavla/app/(admin)/edit/[id]/components/TileCard/TransportModeAndLines.tsx b/next-tavla/app/(admin)/edit/[id]/components/TileCard/TransportModeAndLines.tsx index 838187cc4..5ef76d4de 100644 --- a/next-tavla/app/(admin)/edit/[id]/components/TileCard/TransportModeAndLines.tsx +++ b/next-tavla/app/(admin)/edit/[id]/components/TileCard/TransportModeAndLines.tsx @@ -40,6 +40,18 @@ function TransportModeAndLines({ 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 (
@@ -49,7 +61,7 @@ function TransportModeAndLines({ /> {transportModeNames(transportMode)}
-
+
{ - 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) - }} + onChange={determineAllChecked} >
{line.publicCode && ( diff --git a/next-tavla/app/globals.css b/next-tavla/app/globals.css index 342bcd9c3..5687077c8 100644 --- a/next-tavla/app/globals.css +++ b/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; From d47b0f6b7dca6e2cc74c27d334531ca8cfc12f0f Mon Sep 17 00:00:00 2001 From: lindtvedtsebastian Date: Wed, 5 Jun 2024 11:03:14 +0200 Subject: [PATCH 3/4] feat(edit): toast on empty lines --- .../app/(admin)/edit/[id]/components/TileCard/index.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/next-tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx b/next-tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx index af8d58a70..0a1dfd523 100644 --- a/next-tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx +++ b/next-tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx @@ -28,9 +28,11 @@ import { deleteTile, getOrganizationForBoard, saveTile } from './actions' import { useLines } from './useLines' import { sortLineByPublicCode } from './utils' import { TransportModeAndLines } from './TransportModeAndLines' +import { useToast } from '@entur/alert' function TileCard({ bid, tile }: { bid: TBoardID; tile: TTile }) { const posthog = usePostHog() + const toast = useToast() const [isOpen, setIsOpen] = useState(false) const [changed, setChanged] = useState(false) const [confirmOpen, setConfirmOpen] = useState(false) @@ -153,6 +155,12 @@ function TileCard({ bid, tile }: { bid: TBoardID; tile: TTile }) { ), ) } + if (!lines || lines.length === 0) + toast.addToast({ + title: 'Ingen linjer valgt', + content: 'Du må velge minst én linje.', + variant: 'info', + }) saveTile(bid, newTile) }} onSubmit={reset} From 7e5aea09e280ebd6f7a5cc0a783ae73a2aab5378 Mon Sep 17 00:00:00 2001 From: lindtvedtsebastian Date: Mon, 10 Jun 2024 10:13:17 +0200 Subject: [PATCH 4/4] revert(#d47b0f6): toast on empty lines This reverts commit d47b0f6b7dca6e2cc74c27d334531ca8cfc12f0f. --- .../app/(admin)/edit/[id]/components/TileCard/index.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/next-tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx b/next-tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx index 0a1dfd523..af8d58a70 100644 --- a/next-tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx +++ b/next-tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx @@ -28,11 +28,9 @@ import { deleteTile, getOrganizationForBoard, saveTile } from './actions' import { useLines } from './useLines' import { sortLineByPublicCode } from './utils' import { TransportModeAndLines } from './TransportModeAndLines' -import { useToast } from '@entur/alert' function TileCard({ bid, tile }: { bid: TBoardID; tile: TTile }) { const posthog = usePostHog() - const toast = useToast() const [isOpen, setIsOpen] = useState(false) const [changed, setChanged] = useState(false) const [confirmOpen, setConfirmOpen] = useState(false) @@ -155,12 +153,6 @@ function TileCard({ bid, tile }: { bid: TBoardID; tile: TTile }) { ), ) } - if (!lines || lines.length === 0) - toast.addToast({ - title: 'Ingen linjer valgt', - content: 'Du må velge minst én linje.', - variant: 'info', - }) saveTile(bid, newTile) }} onSubmit={reset}