feat(edit): toggle optional columns (#1127)

* feat(edit): reducer for optional columns

* feat(edit): toggle for optional column platform in edit

* feat(edit): created toggelcompoent to add additional information for a certain tile

* chore(toggelcolumns): removed unused imports

* feat(toggelcolumn): not fixed controlled compoenent

* fix(togglecolumn): fixed uncontrolled error component

* chore(edit): renamed togglecolumns component

* chore(reducer): changed name of togglecolumn to setcolumn in reducer

next-tavla/src/Admin/scenarios/Edit/index.tsx

@@ -11,6 +11,7 @@ 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,
@@ -21,16 +22,14 @@ function Edit({
 }) {
     const [settings, dispatch] = useReducer(settingsReducer, initialSettings)
     const linkUrl = window.location.host + '/' + documentId
-
     return (
         <SettingsDispatchContext.Provider value={dispatch}>
             <ToastProvider>
                 <div className={classes.settings}>
                     <AddTile />
                     <TilesOverview tiles={settings.tiles} />
-
                     <ShareTable text={linkUrl} />
-
+                    <ToggleColumns tile={settings.tiles[0]} />
                     <div className={classes.floatingButtonWrapper}>
                         <FloatingButton
                             className={classes.saveButton}

next-tavla/src/Admin/scenarios/Edit/reducer.tsx

@@ -2,6 +2,7 @@ import { arrayMove } from '@dnd-kit/sortable'
 import { TAnonTiles } from 'Admin/types'
 import { clone, xor } from 'lodash'
 import { nanoid } from 'nanoid'
+import { TColumn } from 'types/column'
 import { TSettings, TTheme } from 'types/settings'
 import { TQuayTile, TStopPlaceTile, TTile } from 'types/tile'
 
@@ -12,6 +13,7 @@ export type Action =
     | { type: 'updateTile'; tileIndex: number; tile: TTile }
     | { type: 'swapTiles'; oldIndex: number; newIndex: number }
     | { type: 'toggleLine'; tileId: string; lineId: string }
+    | { type: 'setColumn'; tileId: string; column: TColumn; value: boolean }
 
 export function settingsReducer(
     settings: TSettings,
@@ -91,5 +93,19 @@ export function settingsReducer(
                 },
             )
         }
+        case 'setColumn': {
+            return changeTile<TStopPlaceTile | TQuayTile>(
+                action.tileId,
+                (tile) => {
+                    return {
+                        ...tile,
+                        columns: {
+                            ...tile.columns,
+                            ...{ [action.column]: action.value },
+                        },
+                    }
+                },
+            )
+        }
     }
 }

next-tavla/src/Admin/scenarios/ToggleColumns/index.tsx

@@ -0,0 +1,40 @@
+import { Heading3 } from '@entur/typography'
+import { useSettingsDispatch } from 'Admin/utils/contexts'
+import { DefaultColumns, TColumn } from 'types/column'
+import { TTile } from 'types/tile'
+import { Switch } from '@entur/form'
+
+function ToggleColumns({ tile }: { tile: TTile }) {
+    const dispatch = useSettingsDispatch()
+
+    const optionalColumns: TColumn[] = ['platform', 'via']
+
+    function handleSwitch(column: TColumn, value: boolean) {
+        dispatch({
+            type: 'setColumn',
+            column: column,
+            value: value,
+            tileId: tile.uuid,
+        })
+    }
+    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>
+                )
+            })}
+        </div>
+    )
+}
+
+export { ToggleColumns }

next-tavla/src/Shared/types/column.ts

@@ -16,7 +16,7 @@ export const DefaultColumns: TColumnSettings = {
     platform: false,
     situations: true,
     time: true,
-    via: true,
+    via: false,
 } as const
 
 export type TColumnSize = { type: TColumn; size: number }