From 1437f60801ceea365a3b92da3880dc97f6919278 Mon Sep 17 00:00:00 2001 From: Stian Sulebak <69514522+stianjsu@users.noreply.github.com> Date: Fri, 14 Jul 2023 10:13:03 +0200 Subject: [PATCH] feat(edit): select tile component for editing tile (#1124) * chore(admin): folder structure change for editing tiles * style(edit): fits delete button to design * feat(edit): adds tile selector for TileOverview * feat(gql): adds queries for fetching name of stopplace and quay * feat(edit): select tiles queries name of location in own component * feat(edit): styling of radio options to match design * feat(edit): adds grid layout for tiles overview and implementation of SelectTile * chore(edit): rename css class * feat(edit): adds message if tiles-list is empty * refactor(edit): moves select tile to own scenario * feat(edit): implement SelectTile and TileSettings into overview * fix(edit): hover style on delete tile button * fix(edit): platform code no longer displayed in select tile list * fix(test): updates AddTile test for new stopplace list * chore(edit tile): removed unused styles and renamed vars for consistency --------- Co-authored-by: asemwilhelmsen --- .../Admin/scenarios/AddTile/AddTile.cy.tsx | 4 +- .../components/DeleteButton/index.tsx | 8 +- .../components/DeleteButton/styles.module.css | 9 ++ .../components/RadioOption/index.tsx | 37 ++++++++ .../components/RadioOption/styles.module.css | 13 +++ .../src/Admin/scenarios/SelectTile/index.tsx | 86 +++++++++++++++++++ .../scenarios/SelectTile/styles.module.css | 13 +++ .../TileSettingsWrapper/styles.module.css | 4 +- .../Admin/scenarios/TileSettings/index.tsx | 34 ++++---- .../scenarios/TileSettings/styles.module.css | 8 ++ .../Admin/scenarios/TilesOverview/index.tsx | 22 ++++- .../scenarios/TilesOverview/styles.module.css | 15 +--- next-tavla/src/Shared/graphql/index.ts | 48 +++++++++++ .../Shared/graphql/queries/quayName.graphql | 8 ++ .../graphql/queries/stopPlaceName.graphql | 6 ++ 15 files changed, 276 insertions(+), 39 deletions(-) rename next-tavla/src/Admin/scenarios/{TilesOverview => SelectTile}/components/DeleteButton/index.tsx (87%) create mode 100644 next-tavla/src/Admin/scenarios/SelectTile/components/DeleteButton/styles.module.css create mode 100644 next-tavla/src/Admin/scenarios/SelectTile/components/RadioOption/index.tsx create mode 100644 next-tavla/src/Admin/scenarios/SelectTile/components/RadioOption/styles.module.css create mode 100644 next-tavla/src/Admin/scenarios/SelectTile/index.tsx create mode 100644 next-tavla/src/Admin/scenarios/SelectTile/styles.module.css create mode 100644 next-tavla/src/Shared/graphql/queries/quayName.graphql create mode 100644 next-tavla/src/Shared/graphql/queries/stopPlaceName.graphql diff --git a/next-tavla/src/Admin/scenarios/AddTile/AddTile.cy.tsx b/next-tavla/src/Admin/scenarios/AddTile/AddTile.cy.tsx index 294730877..f408858fd 100644 --- a/next-tavla/src/Admin/scenarios/AddTile/AddTile.cy.tsx +++ b/next-tavla/src/Admin/scenarios/AddTile/AddTile.cy.tsx @@ -34,6 +34,8 @@ describe('', () => { cy.findByRole('textbox').type('Jernbanetorget') cy.findByRole('listbox').children().first().click() cy.findByRole('button', { name: /legg til/i }).click() - /* cy.get('[data-cy="tiles"]').children().should('have.length', 1) */ + cy.get('[data-cy="tiles"]') + .children() + .should('contain.text', 'Jernbanetorget') }) }) diff --git a/next-tavla/src/Admin/scenarios/TilesOverview/components/DeleteButton/index.tsx b/next-tavla/src/Admin/scenarios/SelectTile/components/DeleteButton/index.tsx similarity index 87% rename from next-tavla/src/Admin/scenarios/TilesOverview/components/DeleteButton/index.tsx rename to next-tavla/src/Admin/scenarios/SelectTile/components/DeleteButton/index.tsx index 38bafdef6..c671778d8 100644 --- a/next-tavla/src/Admin/scenarios/TilesOverview/components/DeleteButton/index.tsx +++ b/next-tavla/src/Admin/scenarios/SelectTile/components/DeleteButton/index.tsx @@ -5,6 +5,7 @@ import { Paragraph } from '@entur/typography' import { PrimaryButton, TertiaryButton } from '@entur/button' import { DeleteIcon } from '@entur/icons' import { useSettingsDispatch } from 'Admin/utils/contexts' +import classes from './styles.module.css' function DeleteButton({ uuid }: { uuid: string }) { const dispatch = useSettingsDispatch() @@ -39,8 +40,11 @@ function DeleteButton({ uuid }: { uuid: string }) { - setOpen(true)}> - + setOpen(true)} + className={classes.deleteButton} + > + {'Slett'} diff --git a/next-tavla/src/Admin/scenarios/SelectTile/components/DeleteButton/styles.module.css b/next-tavla/src/Admin/scenarios/SelectTile/components/DeleteButton/styles.module.css new file mode 100644 index 000000000..d965dcc34 --- /dev/null +++ b/next-tavla/src/Admin/scenarios/SelectTile/components/DeleteButton/styles.module.css @@ -0,0 +1,9 @@ +.deleteButton { + border: none; + font-size: 0.75em; +} + +.deleteButton:hover { + background-color: var(--colors-blues-blue30); + border: solid 1px var(--colors-brand-lavender); +} diff --git a/next-tavla/src/Admin/scenarios/SelectTile/components/RadioOption/index.tsx b/next-tavla/src/Admin/scenarios/SelectTile/components/RadioOption/index.tsx new file mode 100644 index 000000000..c4597edc7 --- /dev/null +++ b/next-tavla/src/Admin/scenarios/SelectTile/components/RadioOption/index.tsx @@ -0,0 +1,37 @@ +import { RadioPanel } from '@entur/form' +import { Loader } from '@entur/loader' +import { DeleteButton } from '../DeleteButton' +import classes from './styles.module.css' + +function RadioOption({ + isLoading, + name, + uuid, +}: { + isLoading: boolean + name: string + uuid: string +}) { + return ( + +
+ {isLoading ? ( + + ) : ( + <> + {name} + + + )} +
+ + ) +} + +export { RadioOption } diff --git a/next-tavla/src/Admin/scenarios/SelectTile/components/RadioOption/styles.module.css b/next-tavla/src/Admin/scenarios/SelectTile/components/RadioOption/styles.module.css new file mode 100644 index 000000000..a1ea68cb1 --- /dev/null +++ b/next-tavla/src/Admin/scenarios/SelectTile/components/RadioOption/styles.module.css @@ -0,0 +1,13 @@ +.radioOption { + width: 100%; + border-radius: 1em; + margin-bottom: 1em; +} + +.radioOptionContent { + display: flex; + align-items: center; + justify-content: space-between; + min-height: 2.1em; + font-size: 1.25em; +} diff --git a/next-tavla/src/Admin/scenarios/SelectTile/index.tsx b/next-tavla/src/Admin/scenarios/SelectTile/index.tsx new file mode 100644 index 000000000..0b7bd2d12 --- /dev/null +++ b/next-tavla/src/Admin/scenarios/SelectTile/index.tsx @@ -0,0 +1,86 @@ +import { TQuayTile, TStopPlaceTile, TTile } from 'types/tile' +import { Heading2, Paragraph } from '@entur/typography' +import classes from './styles.module.css' +import { RadioGroup } from '@entur/form' +import { ChangeEvent } from 'react' +import { useQuery } from 'graphql/utils' +import { QuayNameQuery, StopPlaceNameQuery } from 'graphql/index' +import { RadioOption } from './components/RadioOption' + +function StopPlaceRadioOption({ tile }: { tile: TStopPlaceTile }) { + const { data, isLoading } = useQuery(StopPlaceNameQuery, { + id: tile.placeId, + }) + + const name = data?.stopPlace?.name ?? tile.placeId + + return +} + +function QuayRadioOption({ tile }: { tile: TQuayTile }) { + const { data, isLoading } = useQuery(QuayNameQuery, { + id: tile.placeId, + }) + + const name = data?.quay?.name ?? tile.placeId + + return +} + +function SelectTile({ + tiles, + selectedTileId, + selectTile, +}: { + tiles: TTile[] + selectedTileId?: string + selectTile: (uuid: string) => void +}) { + function handleTileSelected(e: ChangeEvent) { + const tileuuId = e.target.value + selectTile(tileuuId) + } + + return ( +
+ + Holdeplasser i avgangstavlen + +
+ {!tiles.length ? ( + + Du må legge til en holdeplass for at den skal vises her. + Bruk søkefeltet og trykk “legg til”. + + ) : ( + + {tiles.map((tile) => { + switch (tile.type) { + case 'stop_place': + return ( + + ) + case 'quay': + return ( + + ) + } + })} + + )} +
+
+ ) +} + +export { SelectTile } diff --git a/next-tavla/src/Admin/scenarios/SelectTile/styles.module.css b/next-tavla/src/Admin/scenarios/SelectTile/styles.module.css new file mode 100644 index 000000000..5d2f3dba2 --- /dev/null +++ b/next-tavla/src/Admin/scenarios/SelectTile/styles.module.css @@ -0,0 +1,13 @@ +.selectTileSection { + width: 30%; + min-width: fit-content; +} + +.heading { + font-size: 1.5em; +} + +.emptyTilesMessage { + text-align: center; + width: 20em; +} diff --git a/next-tavla/src/Admin/scenarios/TileSettings/components/TileSettingsWrapper/styles.module.css b/next-tavla/src/Admin/scenarios/TileSettings/components/TileSettingsWrapper/styles.module.css index cc4683740..0a14f5fb8 100644 --- a/next-tavla/src/Admin/scenarios/TileSettings/components/TileSettingsWrapper/styles.module.css +++ b/next-tavla/src/Admin/scenarios/TileSettings/components/TileSettingsWrapper/styles.module.css @@ -4,8 +4,8 @@ background-color: var(--tertiary-background-color); border-radius: 0.5em; padding: 1em; - width: 50em; - height: 25em; + width: 100%; + height: 30em; } .heading { diff --git a/next-tavla/src/Admin/scenarios/TileSettings/index.tsx b/next-tavla/src/Admin/scenarios/TileSettings/index.tsx index a54485312..dcef3ed80 100644 --- a/next-tavla/src/Admin/scenarios/TileSettings/index.tsx +++ b/next-tavla/src/Admin/scenarios/TileSettings/index.tsx @@ -1,29 +1,27 @@ import { TTile } from 'types/tile' import { TileSettingsWrapper } from './components/TileSettingsWrapper' -import { Heading3, Paragraph } from '@entur/typography' +import { Heading2, Paragraph } from '@entur/typography' import classes from './styles.module.css' import { StopPlaceSettings } from './components/StopPlaceSettings' import { QuaySettings } from './components/QuaySettings' function TileSettings({ tile }: { tile?: TTile; name?: string }) { - if (!tile) { - return ( - - - Wops! Du har ikke markert en holdeplass enda. Legg til en - holdeplass eller trykk på en som allerede ligger i lista til - venstre for å kunne bestemme plattformer og linjer som skal - vises på avgangstavla. - - - ) - } - return ( -
- Rediger holdeplass - {tile.type === 'stop_place' && } - {tile.type === 'quay' && } +
+ Rediger holdeplass + + {!tile && ( + + + Wops! Du har ikke markert en holdeplass enda. Legg til + en holdeplass eller trykk på en som allerede ligger i + lista til venstre for å kunne bestemme plattformer og + linjer som skal vises på avgangstavla. + + + )} + {tile?.type === 'stop_place' && } + {tile?.type === 'quay' && }
) } diff --git a/next-tavla/src/Admin/scenarios/TileSettings/styles.module.css b/next-tavla/src/Admin/scenarios/TileSettings/styles.module.css index 2b891f4c3..daf4a5fdb 100644 --- a/next-tavla/src/Admin/scenarios/TileSettings/styles.module.css +++ b/next-tavla/src/Admin/scenarios/TileSettings/styles.module.css @@ -1,3 +1,11 @@ +.tileSettingsSection { + width: 100%; +} + +.heading { + font-size: 1.5em; +} + .emptyTileWrapper { display: flex; justify-content: center; diff --git a/next-tavla/src/Admin/scenarios/TilesOverview/index.tsx b/next-tavla/src/Admin/scenarios/TilesOverview/index.tsx index 0f6a80e28..213236e1e 100644 --- a/next-tavla/src/Admin/scenarios/TilesOverview/index.tsx +++ b/next-tavla/src/Admin/scenarios/TilesOverview/index.tsx @@ -1,9 +1,25 @@ import { TTile } from 'types/tile' -import React from 'react' -import { TileSettings } from '../TileSettings' +import React, { useState } from 'react' +import { TileSettings } from 'Admin/scenarios/TileSettings' +import { SelectTile } from 'Admin/scenarios/SelectTile' +import classes from './styles.module.css' function TilesOverview({ tiles }: { tiles: TTile[] }) { - return + const [selectedTileId, setSelectedTileId] = useState() + + const selectedTile = tiles.find((tile) => tile.uuid === selectedTileId) + + return ( +
+ + + +
+ ) } export { TilesOverview } diff --git a/next-tavla/src/Admin/scenarios/TilesOverview/styles.module.css b/next-tavla/src/Admin/scenarios/TilesOverview/styles.module.css index 5f4ffa593..9befba81d 100644 --- a/next-tavla/src/Admin/scenarios/TilesOverview/styles.module.css +++ b/next-tavla/src/Admin/scenarios/TilesOverview/styles.module.css @@ -1,15 +1,4 @@ -.tableTile { - height: 100%; - width: 100%; - padding: 1em; - border-radius: 0.5em; - background-color: var(--secondary-background-color); - color: white; -} - -.tileHeader { +.overviewWrapper { display: flex; - justify-content: space-between; - align-items: center; - padding-bottom: 0.5em; + gap: 2em; } diff --git a/next-tavla/src/Shared/graphql/index.ts b/next-tavla/src/Shared/graphql/index.ts index 7e2dad7b5..a223c869f 100644 --- a/next-tavla/src/Shared/graphql/index.ts +++ b/next-tavla/src/Shared/graphql/index.ts @@ -141,6 +141,21 @@ export type TGetQuayQuery = { } | null } +export type TQuayNameQueryVariables = Types.Exact<{ + id: Types.Scalars['String'] +}> + +export type TQuayNameQuery = { + __typename?: 'QueryType' + quay: { + __typename?: 'Quay' + name: string + description: string | null + publicCode: string | null + id: string + } | null +} + export type TQuaysSearchQueryVariables = Types.Exact<{ stopPlaceId: Types.Scalars['String'] }> @@ -220,6 +235,15 @@ export type TStopPlaceQuery = { } | null } +export type TStopPlaceNameQueryVariables = Types.Exact<{ + id: Types.Scalars['String'] +}> + +export type TStopPlaceNameQuery = { + __typename?: 'QueryType' + stopPlace: { __typename?: 'StopPlace'; name: string; id: string } | null +} + export type TStopPlaceSettingsQueryVariables = Types.Exact<{ id: Types.Scalars['String'] }> @@ -391,6 +415,19 @@ fragment situation on PtSituationElement { language } }`) as unknown as TypedDocumentString +export const QuayNameQuery = new TypedDocumentString(` + query QuayName($id: String!) { + quay(id: $id) { + name + description + publicCode + id + } +} + `) as unknown as TypedDocumentString< + TQuayNameQuery, + TQuayNameQueryVariables +> export const QuaysSearchQuery = new TypedDocumentString(` query quaysSearch($stopPlaceId: String!) { stopPlace(id: $stopPlaceId) { @@ -458,6 +495,17 @@ fragment situation on PtSituationElement { language } }`) as unknown as TypedDocumentString +export const StopPlaceNameQuery = new TypedDocumentString(` + query StopPlaceName($id: String!) { + stopPlace(id: $id) { + name + id + } +} + `) as unknown as TypedDocumentString< + TStopPlaceNameQuery, + TStopPlaceNameQueryVariables +> export const StopPlaceSettingsQuery = new TypedDocumentString(` query StopPlaceSettings($id: String!) { stopPlace(id: $id) { diff --git a/next-tavla/src/Shared/graphql/queries/quayName.graphql b/next-tavla/src/Shared/graphql/queries/quayName.graphql new file mode 100644 index 000000000..ae5d17a5f --- /dev/null +++ b/next-tavla/src/Shared/graphql/queries/quayName.graphql @@ -0,0 +1,8 @@ +query QuayName($id: String!) { + quay(id: $id) { + name + description + publicCode + id + } +} diff --git a/next-tavla/src/Shared/graphql/queries/stopPlaceName.graphql b/next-tavla/src/Shared/graphql/queries/stopPlaceName.graphql new file mode 100644 index 000000000..2afb3766c --- /dev/null +++ b/next-tavla/src/Shared/graphql/queries/stopPlaceName.graphql @@ -0,0 +1,6 @@ +query StopPlaceName($id: String!) { + stopPlace(id: $id) { + name + id + } +}