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 <[email protected]>
entur · Jul 14, 2023 · 1437f60 · 1437f60
1 parent a6713f9
commit 1437f60
Show file tree

Hide file tree

Showing 15 changed files with 276 additions and 39 deletions.
diff --git 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('<AddTile />', () => {
         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/...verview/components/DeleteButton/index.tsx → ...ectTile/components/DeleteButton/index.tsx b/...verview/components/DeleteButton/index.tsx → ...ectTile/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 }) {
                 </ButtonGroup>
             </Modal>
 
-            <TertiaryButton onClick={() => setOpen(true)}>
-                <DeleteIcon />
+            <TertiaryButton
+                onClick={() => setOpen(true)}
+                className={classes.deleteButton}
+            >
+                <DeleteIcon size={16} />
                 {'Slett'}
             </TertiaryButton>
         </>

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
@@ -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
@@ -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 (
+        <RadioPanel
+            hideRadioButton
+            disabled={isLoading}
+            title=""
+            value={uuid}
+            className={classes.radioOption}
+        >
+            <div className={classes.radioOptionContent}>
+                {isLoading ? (
+                    <Loader />
+                ) : (
+                    <>
+                        {name}
+                        <DeleteButton uuid={uuid} />
+                    </>
+                )}
+            </div>
+        </RadioPanel>
+    )
+}
+
+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
@@ -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
@@ -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 <RadioOption isLoading={isLoading} name={name} uuid={tile.uuid} />
+}
+
+function QuayRadioOption({ tile }: { tile: TQuayTile }) {
+    const { data, isLoading } = useQuery(QuayNameQuery, {
+        id: tile.placeId,
+    })
+
+    const name = data?.quay?.name ?? tile.placeId
+
+    return <RadioOption isLoading={isLoading} name={name} uuid={tile.uuid} />
+}
+
+function SelectTile({
+    tiles,
+    selectedTileId,
+    selectTile,
+}: {
+    tiles: TTile[]
+    selectedTileId?: string
+    selectTile: (uuid: string) => void
+}) {
+    function handleTileSelected(e: ChangeEvent<HTMLInputElement>) {
+        const tileuuId = e.target.value
+        selectTile(tileuuId)
+    }
+
+    return (
+        <div className={classes.selectTileSection}>
+            <Heading2 className={classes.heading}>
+                Holdeplasser i avgangstavlen
+            </Heading2>
+            <div data-cy="tiles">
+                {!tiles.length ? (
+                    <Paragraph className={classes.emptyTilesMessage}>
+                        Du må legge til en holdeplass for at den skal vises her.
+                        Bruk søkefeltet og trykk “legg til”.
+                    </Paragraph>
+                ) : (
+                    <RadioGroup
+                        name="select-tile"
+                        value={selectedTileId || null}
+                        onChange={handleTileSelected}
+                    >
+                        {tiles.map((tile) => {
+                            switch (tile.type) {
+                                case 'stop_place':
+                                    return (
+                                        <StopPlaceRadioOption
+                                            tile={tile}
+                                            key={tile.uuid}
+                                        />
+                                    )
+                                case 'quay':
+                                    return (
+                                        <QuayRadioOption
+                                            tile={tile}
+                                            key={tile.uuid}
+                                        />
+                                    )
+                            }
+                        })}
+                    </RadioGroup>
+                )}
+            </div>
+        </div>
+    )
+}
+
+export { SelectTile }
diff --git a/next-tavla/src/Admin/scenarios/SelectTile/styles.module.css 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
@@ -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
@@ -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 (
-            <TileSettingsWrapper className={classes.emptyTileWrapper}>
-                <Paragraph>
-                    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.
-                </Paragraph>
-            </TileSettingsWrapper>
-        )
-    }
-
     return (
-        <div>
-            <Heading3>Rediger holdeplass</Heading3>
-            {tile.type === 'stop_place' && <StopPlaceSettings tile={tile} />}
-            {tile.type === 'quay' && <QuaySettings tile={tile} />}
+        <div className={classes.tileSettingsSection}>
+            <Heading2 className={classes.heading}>Rediger holdeplass</Heading2>
+
+            {!tile && (
+                <TileSettingsWrapper className={classes.emptyTileWrapper}>
+                    <Paragraph>
+                        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.
+                    </Paragraph>
+                </TileSettingsWrapper>
+            )}
+            {tile?.type === 'stop_place' && <StopPlaceSettings tile={tile} />}
+            {tile?.type === 'quay' && <QuaySettings tile={tile} />}
         </div>
     )
 }

diff --git 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
@@ -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 <TileSettings tile={tiles[0]} />
+    const [selectedTileId, setSelectedTileId] = useState<string>()
+
+    const selectedTile = tiles.find((tile) => tile.uuid === selectedTileId)
+
+    return (
+        <div className={classes.overviewWrapper}>
+            <SelectTile
+                tiles={tiles}
+                selectTile={setSelectedTileId}
+                selectedTileId={selectedTileId}
+            />
+
+            <TileSettings tile={selectedTile} />
+        </div>
+    )
 }
 
 export { TilesOverview }
diff --git 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
@@ -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<TGetQuayQuery, TGetQuayQueryVariables>
+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<TStopPlaceQuery, TStopPlaceQueryVariables>
+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
@@ -0,0 +1,8 @@
+query QuayName($id: String!) {
+    quay(id: $id) {
+        name
+        description
+        publicCode
+        id
+    }
+}