feat(edit): adds toggle to tileoverview (#1129)

* feat(tileoverview): added functionality for toggle columns in each tile in tileoverview * fix(edit): removed whitespace at the bottom of the space when scrolling * feat(edit): added text to the toggle component in the edit page * fix(togglecolumns): added styling * fix(togglecolumns): changed sentence in heading * fix(toggle): changed lable to subparagraph * chore(toggle): removed unused import * fix(edit): changed wording in toggle lable
entur · Jul 14, 2023 · 091b9ff · 091b9ff
1 parent 1437f60
commit 091b9ff
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 17 deletions.
diff --git a/next-tavla/src/Admin/scenarios/Edit/index.tsx b/next-tavla/src/Admin/scenarios/Edit/index.tsx
@@ -11,7 +11,6 @@ import { ToastProvider } from '@entur/alert'
 import { FloatingButton } from '@entur/button'
 import { StyledLink } from 'Admin/components/StyledLink'
 import { ShareTable } from '../ShareTable'
-import { ToggleColumns } from '../ToggleColumns'
 
 function Edit({
     initialSettings,
@@ -29,7 +28,6 @@ function Edit({
                     <AddTile />
                     <TilesOverview tiles={settings.tiles} />
                     <ShareTable text={linkUrl} />
-                    <ToggleColumns tile={settings.tiles[0]} />
                     <div className={classes.floatingButtonWrapper}>
                         <FloatingButton
                             className={classes.saveButton}

diff --git a/next-tavla/src/Admin/scenarios/TileSettings/components/QuaySettings.tsx b/next-tavla/src/Admin/scenarios/TileSettings/components/QuaySettings.tsx
@@ -4,6 +4,7 @@ import { useQuery } from 'graphql/utils'
 import { TQuayTile } from 'types/tile'
 import { fieldsNotNull } from 'utils/typeguards'
 import { TileSettingsWrapper } from './TileSettingsWrapper'
+import { ToggleColumns } from 'Admin/scenarios/ToggleColumns'
 
 function QuaySettings({ tile }: { tile: TQuayTile }) {
     const { data } = useQuery(GetQuayQuery, { quayId: tile.placeId })
@@ -19,6 +20,7 @@ function QuaySettings({ tile }: { tile: TQuayTile }) {
     return (
         <TileSettingsWrapper name={name}>
             <SelectLines tile={tile} lines={lines} />
+            <ToggleColumns tile={tile} />
         </TileSettingsWrapper>
     )
 }

diff --git a/next-tavla/src/Admin/scenarios/TileSettings/components/StopPlaceSettings.tsx b/next-tavla/src/Admin/scenarios/TileSettings/components/StopPlaceSettings.tsx
@@ -4,6 +4,7 @@ import { useQuery } from 'graphql/utils'
 import { TStopPlaceTile } from 'types/tile'
 import { fieldsNotNull } from 'utils/typeguards'
 import { TileSettingsWrapper } from './TileSettingsWrapper'
+import { ToggleColumns } from 'Admin/scenarios/ToggleColumns'
 
 function StopPlaceSettings({ tile }: { tile: TStopPlaceTile }) {
     const { data } = useQuery(StopPlaceSettingsQuery, { id: tile.placeId })
@@ -18,6 +19,7 @@ function StopPlaceSettings({ tile }: { tile: TStopPlaceTile }) {
     return (
         <TileSettingsWrapper name={name}>
             <SelectLines tile={tile} lines={lines} />
+            <ToggleColumns tile={tile} />
         </TileSettingsWrapper>
     )
 }

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
@@ -15,4 +15,5 @@
 
 .content {
     overflow: auto;
+    position: relative;
 }
diff --git a/next-tavla/src/Admin/scenarios/ToggleColumns/index.tsx b/next-tavla/src/Admin/scenarios/ToggleColumns/index.tsx
@@ -1,8 +1,9 @@
-import { Heading3 } from '@entur/typography'
+import { Heading4, SubParagraph } from '@entur/typography'
 import { useSettingsDispatch } from 'Admin/utils/contexts'
-import { DefaultColumns, TColumn } from 'types/column'
+import { Columns, DefaultColumns, TColumn } from 'types/column'
 import { TTile } from 'types/tile'
 import { Switch } from '@entur/form'
+import classes from './styles.module.css'
 
 function ToggleColumns({ tile }: { tile: TTile }) {
     const dispatch = useSettingsDispatch()
@@ -20,19 +21,26 @@ function ToggleColumns({ tile }: { tile: TTile }) {
     const columns = { ...DefaultColumns, ...tile.columns }
     return (
         <div>
-            <Heading3>Legg til informasjon</Heading3>
-
-            {optionalColumns.map((col) => {
-                return (
-                    <Switch
-                        key={col}
-                        checked={columns[col]}
-                        onChange={() => handleSwitch(col, !columns[col])}
-                    >
-                        {col}
-                    </Switch>
-                )
-            })}
+            <Heading4>Legg til ekstra detaljer i tabellen</Heading4>
+            <SubParagraph>
+                Linje, destinasjon, avvik og avgangstid vil alltid vises i
+                tabellen. <br />
+                Her kan du legge til ekstra detaljer i denne holdeplassen sin
+                tabell.
+            </SubParagraph>
+            <div className={classes.columnToggleWrapper}>
+                {optionalColumns.map((col) => {
+                    return (
+                        <Switch
+                            key={col}
+                            checked={columns[col]}
+                            onChange={() => handleSwitch(col, !columns[col])}
+                        >
+                            {Columns[col]}
+                        </Switch>
+                    )
+                })}
+            </div>
         </div>
     )
 }

diff --git a/next-tavla/src/Admin/scenarios/ToggleColumns/styles.module.css b/next-tavla/src/Admin/scenarios/ToggleColumns/styles.module.css
@@ -0,0 +1,5 @@
+.columnToggleWrapper {
+    display: flex;
+    gap: 1em;
+    margin: 1em;
+}