-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
TELESTION-460 Dashboard layout editor
A layout editor for dashboards to make them configurable by users. Interaction can be performed using both the mouse and the keyboard. Changes are handled completely independently from the UI, allowing for both an easier way to ensure invalid states cannot occur as well as testability. During the user interaction, no actual state changes are performed. Once the interaction finishes, the changes get interpreted to the closest possible state change and "committed" to the state, where (in compliance with any business logic) the changes are applied and, thus, updates in the UI. This also allows us to implement any interactions without absolute positioning and resize observers. Instead, the native CSS grid can be used. Due to the relative complexity and clear boundaries of this subsystem, a separate folder structure which also includes a `README.md` was created.
- Loading branch information
Showing
27 changed files
with
1,959 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -109,5 +109,4 @@ jobs: | |
run: pnpm install | ||
- name: Run unit tests 🛃 | ||
run: | | ||
pnpm run build | ||
pnpm run ci:test |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import { | ||
LayoutEditor, | ||
LayoutEditorState | ||
} from '../lib/application/routes/dashboard-editor/layout-editor'; | ||
import { StrictMode, useState } from 'react'; | ||
|
||
let prevId = 0; | ||
const idGenerator = () => `a${++prevId}`; | ||
|
||
export function App() { | ||
const [state, setState] = useState({ | ||
selection: { | ||
x: 0, | ||
y: 0 | ||
}, | ||
layout: [ | ||
['.', '.', '.', '.', '.'], | ||
['.', '.', '.', '.', '.'], | ||
['.', '.', '.', '.', '.'] | ||
] | ||
} satisfies LayoutEditorState); | ||
|
||
return ( | ||
<StrictMode> | ||
<div> | ||
<LayoutEditor | ||
value={state} | ||
onChange={setState} | ||
onCreateWidgetInstance={idGenerator} | ||
/> | ||
<p>We have the state outside, as well:</p> | ||
<pre>{JSON.stringify(state, null, 2)}</pre> | ||
</div> | ||
</StrictMode> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
46 changes: 46 additions & 0 deletions
46
frontend-react/src/lib/application/routes/dashboard-editor/dashboard-editor.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
@import 'bootstrap/scss/functions'; | ||
@import 'bootstrap/scss/variables'; | ||
@import 'bootstrap/scss/mixins'; | ||
|
||
.dashboardEditor { | ||
display: grid; | ||
grid-template-areas: 'dashboard layout widget-instance'; | ||
grid-auto-columns: 1fr; | ||
grid-gap: var(--gutter); | ||
height: calc(100vh - var(--navbar-height) - var(--gutter)); | ||
|
||
> * { | ||
background: var(--bs-body-bg); | ||
color: var(--bs-body-color); | ||
border-radius: var(--bs-border-radius); | ||
|
||
overflow-y: auto; | ||
overflow-x: hidden; | ||
} | ||
|
||
.dashboard { | ||
grid-area: dashboard; | ||
} | ||
|
||
.layout { | ||
grid-area: layout; | ||
} | ||
|
||
.widgetInstance { | ||
grid-area: widget-instance; | ||
} | ||
|
||
@include media-breakpoint-down(xl) { | ||
grid-template-areas: 'dashboard layout' 'widget-instance widget-instance'; | ||
height: auto; | ||
|
||
> * { | ||
/*height: auto;*/ | ||
overflow-y: visible; | ||
} | ||
} | ||
|
||
@include media-breakpoint-down(md) { | ||
grid-template-areas: 'dashboard' 'layout' 'widget-instance'; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.