From 091b9ffd8f8329a0559a770455c2464b106ed5a9 Mon Sep 17 00:00:00 2001
From: vildeopp <64434819+vildeopp@users.noreply.github.com>
Date: Fri, 14 Jul 2023 13:14:20 +0200
Subject: [PATCH] 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
---
 next-tavla/src/Admin/scenarios/Edit/index.tsx |  2 -
 .../TileSettings/components/QuaySettings.tsx  |  2 +
 .../components/StopPlaceSettings.tsx          |  2 +
 .../TileSettingsWrapper/styles.module.css     |  1 +
 .../Admin/scenarios/ToggleColumns/index.tsx   | 38 +++++++++++--------
 .../scenarios/ToggleColumns/styles.module.css |  5 +++
 6 files changed, 33 insertions(+), 17 deletions(-)
 create mode 100644 next-tavla/src/Admin/scenarios/ToggleColumns/styles.module.css

diff --git a/next-tavla/src/Admin/scenarios/Edit/index.tsx b/next-tavla/src/Admin/scenarios/Edit/index.tsx
index 77348f2e7..92c0488b8 100644
--- 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
index e790a527f..6f6ae84c2 100644
--- 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
index 4824765cc..de7d0c51b 100644
--- 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
index 0a14f5fb8..7479b05b6 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
@@ -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
index ee54bdee3..038bb682f 100644
--- 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
new file mode 100644
index 000000000..8d79dc6c3
--- /dev/null
+++ b/next-tavla/src/Admin/scenarios/ToggleColumns/styles.module.css
@@ -0,0 +1,5 @@
+.columnToggleWrapper {
+    display: flex;
+    gap: 1em;
+    margin: 1em;
+}