Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(edit): adds toggle to tileoverview #1129

Merged
merged 8 commits into from
Jul 14, 2023
Merged

feat(edit): adds toggle to tileoverview #1129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9909c8c
feat(tileoverview): added functionality for toggle columns in each ti…
vildeopp Jul 14, 2023
f211220
fix(edit): removed whitespace at the bottom of the space when scrolling
vildeopp Jul 14, 2023
d9f6104
feat(edit): added text to the toggle component in the edit page
vildeopp Jul 14, 2023
9a35650
fix(togglecolumns): added styling
vildeopp Jul 14, 2023
a6c1810
fix(togglecolumns): changed sentence in heading
vildeopp Jul 14, 2023
abb7360
fix(toggle): changed lable to subparagraph
vildeopp Jul 14, 2023
647efdc
chore(toggle): removed unused import
vildeopp Jul 14, 2023
ef35951
fix(edit): changed wording in toggle lable
vildeopp Jul 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions next-tavla/src/Admin/scenarios/Edit/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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}
Expand Down
2 changes: 2 additions & 0 deletions next-tavla/src/Admin/scenarios/TileSettings/components/QuaySettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 })
Expand All @@ -19,6 +20,7 @@ function QuaySettings({ tile }: { tile: TQuayTile }) {
return (
<TileSettingsWrapper name={name}>
<SelectLines tile={tile} lines={lines} />
<ToggleColumns tile={tile} />
</TileSettingsWrapper>
)
}
Expand Down
2 changes: 2 additions & 0 deletions next-tavla/src/Admin/scenarios/TileSettings/components/StopPlaceSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 })
Expand All @@ -18,6 +19,7 @@ function StopPlaceSettings({ tile }: { tile: TStopPlaceTile }) {
return (
<TileSettingsWrapper name={name}>
<SelectLines tile={tile} lines={lines} />
<ToggleColumns tile={tile} />
</TileSettingsWrapper>
)
}
Expand Down
1 change: 1 addition & 0 deletions next-tavla/src/Admin/scenarios/TileSettings/components/TileSettingsWrapper/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,5 @@

.content {
overflow: auto;
position: relative;
}
38 changes: 23 additions & 15 deletions next-tavla/src/Admin/scenarios/ToggleColumns/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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()
Expand All @@ -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>
)
}
Expand Down
5 changes: 5 additions & 0 deletions next-tavla/src/Admin/scenarios/ToggleColumns/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.columnToggleWrapper {
display: flex;
gap: 1em;
margin: 1em;
}