feat(edit): adds default board layout (#1099)

* feat(settings): adds default column settings

* chore(map tile): removes all map tile definitions and usage

* fix(ts): ts error when assigning const

* feat(settings): refactor to implicit default columns implementation

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

@@ -7,15 +7,13 @@ import { AddStopPlaceTile } from './components/AddStopPlaceTile'
 import { AddQuayTile } from './components/AddQuayTile'
 import { TAnonTiles } from 'Admin/types'
 import { useSettingsDispatch } from 'Admin/utils/contexts'
-import { AddMapTile } from './components/AddMapTile'
 
 const components: Record<
     TTileType,
     (props: { setTile: (tile: TAnonTiles) => void }) => JSX.Element
 > = {
     stop_place: AddStopPlaceTile,
     quay: AddQuayTile,
-    map: AddMapTile,
 }
 
 function AddTile() {

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

@@ -3,7 +3,13 @@ import { TAnonTiles } from 'Admin/types'
 import { clone, xor } from 'lodash'
 import { nanoid } from 'nanoid'
 import { TSettings, TTheme } from 'types/settings'
-import { TColumn, TQuayTile, TStopPlaceTile, TTile } from 'types/tile'
+import {
+    DefaultColumns,
+    TColumn,
+    TQuayTile,
+    TStopPlaceTile,
+    TTile,
+} from 'types/tile'
 import { TColumnSetting } from 'types/tile'
 
 export type Action =
@@ -82,7 +88,7 @@ export function settingsReducer(
             return {
                 ...settings,
                 tiles: arrayMove(
-                    settings.tiles,
+                    settings.tiles ?? [...DefaultColumns],
                     action.oldIndex,
                     action.newIndex,
                 ),
@@ -96,7 +102,7 @@ export function settingsReducer(
                     return {
                         ...tile,
                         columns: [
-                            ...(tile.columns || []),
+                            ...(tile.columns || [...DefaultColumns]),
                             { type: action.column },
                         ],
                     }
@@ -107,9 +113,10 @@ export function settingsReducer(
             return changeTile<TStopPlaceTile | TQuayTile>(
                 action.tileId,
                 (tile) => {
+                    const cols = tile.columns ?? [...DefaultColumns]
                     return {
                         ...tile,
-                        columns: tile.columns?.filter(
+                        columns: cols.filter(
                             (col) => col.type !== action.column,
                         ),
                     }
@@ -120,9 +127,10 @@ export function settingsReducer(
             return changeTile<TStopPlaceTile | TQuayTile>(
                 action.tileId,
                 (tile) => {
+                    const cols = tile.columns ?? [...DefaultColumns]
                     return {
                         ...tile,
-                        columns: tile.columns?.map((col) =>
+                        columns: cols.map((col) =>
                             col.type === action.columnSetting.type
                                 ? action.columnSetting
                                 : col,
@@ -138,7 +146,7 @@ export function settingsReducer(
                     return {
                         ...tile,
                         columns: arrayMove(
-                            tile.columns || [],
+                            tile.columns || [...DefaultColumns],
                             action.oldIndex,
                             action.newIndex,
                         ),

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

@@ -17,6 +17,7 @@ import {
 } from '@dnd-kit/sortable'
 import {
     Columns,
+    DefaultColumns,
     TColumn,
     TColumnSetting,
     TQuayTile,
@@ -35,7 +36,7 @@ function SortableColumns<T extends TStopPlaceTile | TQuayTile>({
     tile: T
     defaultOpen?: boolean
 }) {
-    const columns: TColumnSetting[] = tile.columns ?? []
+    const columns: TColumnSetting[] = tile.columns ?? [...DefaultColumns]
 
     const sensors = useSensors(
         useSensor(PointerSensor),

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

@@ -59,8 +59,6 @@ function TilesSettings({ tiles }: { tiles: TTile[] }) {
                                 return (
                                     <QuaySettings key={tile.uuid} tile={tile} />
                                 )
-                            case 'map':
-                                return null
                         }
                     })}
                 </div>

next-tavla/src/Admin/types/index.tsx

@@ -1,8 +1,5 @@
-import { TMapTile, TQuayTile, TStopPlaceTile, TTile } from 'types/tile'
+import { TQuayTile, TStopPlaceTile, TTile } from 'types/tile'
 
 export type TAnon<T extends TTile> = Omit<T, 'uuid'>
 
-export type TAnonTiles =
-    | TAnon<TQuayTile>
-    | TAnon<TStopPlaceTile>
-    | TAnon<TMapTile>
+export type TAnonTiles = TAnon<TQuayTile> | TAnon<TStopPlaceTile>

next-tavla/src/Board/scenarios/Board/index.tsx

@@ -1,7 +1,6 @@
 import { TSettings } from 'types/settings'
 import { TTile } from 'types/tile'
 import { StopPlaceTile } from '../StopPlaceTile'
-import { MapTile } from '../MapTile'
 import { QuayTile } from '../QuayTile'
 import classes from './styles.module.css'
 
@@ -11,8 +10,6 @@ function Tile({ tileSpec }: { tileSpec: TTile }) {
             return <StopPlaceTile {...tileSpec} />
         case 'quay':
             return <QuayTile {...tileSpec} />
-        case 'map':
-            return <MapTile {...tileSpec} />
     }
 }
 

next-tavla/src/Board/scenarios/Table/index.tsx

@@ -1,5 +1,5 @@
 import { TDepartureFragment } from 'graphql/index'
-import { Columns, TColumn, TColumnSetting } from 'types/tile'
+import { Columns, DefaultColumns, TColumn, TColumnSetting } from 'types/tile'
 import React from 'react'
 import classes from './styles.module.css'
 import { DepartureContext } from './contexts'
@@ -34,7 +34,7 @@ function flexToPercentage(columnSettings: TColumnSetting[]) {
 }
 
 function Table({
-    columns = [],
+    columns = [...DefaultColumns],
     departures,
 }: {
     columns?: TColumnSetting[]

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

@@ -12,6 +12,13 @@ export const Columns = {
 export type TColumn = keyof typeof Columns
 export type TColumnSetting = { type: TColumn; size?: number }
 
+export const DefaultColumns: readonly TColumnSetting[] = [
+    { type: 'line' },
+    { type: 'destination', size: 2 },
+    { type: 'situations', size: 2 },
+    { type: 'time' },
+] as const
+
 export type TTileType = TTile['type']
 
 type TBaseTile = {
@@ -34,8 +41,4 @@ export type TStopPlaceTile = {
     whitelistedTransportModes?: TTransportMode[]
 } & TBaseTile
 
-export type TMapTile = {
-    type: 'map'
-} & TBaseTile
-
-export type TTile = TStopPlaceTile | TMapTile | TQuayTile
+export type TTile = TStopPlaceTile | TQuayTile

next-tavla/src/Shared/utils/converters.ts

@@ -104,11 +104,7 @@ type TBaseStopPlaceTile = {
     whitelistedTransportModes?: TBaseTransportMode[]
 } & TBaseTile
 
-type TBaseMapTile = {
-    type: 'map'
-} & TBaseTile
-
-type TBaseBaseTile = TBaseStopPlaceTile | TBaseMapTile | TBaseQuayTile
+type TBaseBaseTile = TBaseStopPlaceTile | TBaseQuayTile
 
 type TBaseSetting = {
     tiles: TBaseBaseTile[]