GovOPlaN/govoplan-dashboard
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Migrate Dashboard interface patterns

Browse Source
This commit is contained in:
zemion
2026-08-03 14:25:02 +02:00
parent 4280e42110
commit da3947f417
9 changed files with 405 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/features/dashboard/DashboardPage.tsx
+24 -5
View File
@@ -13,6 +13,7 @@ import {
import {
Button,
DismissibleAlert,
DocumentationHelpLink,
LoadingFrame,
MetricCard,
PageScrollViewport,
@@ -36,6 +37,10 @@ import {
import DashboardGrid from "./DashboardGrid";
import WidgetConfigurationDialog from "./WidgetConfigurationDialog";
import WidgetLibrary from "./WidgetLibrary";
import {
DASHBOARD_DOCUMENTATION,
DASHBOARD_I18N
} from "./interfacePatterns";
import {
appendPlacement,
DASHBOARD_COLUMN_COUNT,
@@ -184,8 +189,8 @@ export default function DashboardPage({
dirty,
onSave: persistLayout,
onDiscard: discardChanges,
title: "Unsaved Dashboard layout",
message: "Save or discard the Dashboard arrangement before leaving this page."
title: "i18n:govoplan-dashboard.unsaved_layout_title",
message: "i18n:govoplan-dashboard.unsaved_layout_message"
});
const activeLayout = configuring ? draftLayout : savedLayout;
@@ -446,25 +451,39 @@ export default function DashboardPage({
<p>Personal workspace assembled from installed module widgets.</p>
</div>
<div className="button-row compact-actions">
<DocumentationHelpLink reference={DASHBOARD_DOCUMENTATION} />
{!configuring && (
<>
<Button onClick={() => setRefreshKey((value) => value + 1)}>
<Button
onClick={() => setRefreshKey((value) => value + 1)}
disabled={loading}
disabledReason={loading ? DASHBOARD_I18N.loading : undefined}
>
<RefreshCw size={16} /> Refresh
</Button>
<Button onClick={beginConfiguration}>
<Button
onClick={beginConfiguration}
disabled={loading}
disabledReason={loading ? DASHBOARD_I18N.loading : undefined}
>
<SlidersHorizontal size={16} /> Configure
</Button>
</>
)}
{configuring && (
<>
<Button onClick={discardChanges} disabled={saving}>
<Button
onClick={discardChanges}
disabled={saving}
disabledReason={saving ? DASHBOARD_I18N.saving : undefined}
>
<X size={16} /> Cancel
</Button>
<Button
variant="primary"
onClick={() => void persistLayout()}
disabled={saving || !dirty}
disabledReason={saving ? DASHBOARD_I18N.saving : !dirty ? DASHBOARD_I18N.noChanges : undefined}
>
<Save size={16} /> {saving ? "Saving..." : "Save layout"}
</Button>
webui/src/features/dashboard/WidgetConfigurationDialog.tsx
+61 -7
View File
@@ -2,9 +2,12 @@ import { useEffect, useMemo, useState } from "react";
import {
Button,
Dialog,
DocumentationHelpLink,
FormField,
SegmentedControl,
ToggleSwitch,
useUnsavedChanges,
useUnsavedDraftGuard,
type DashboardWidgetConfiguration,
type DashboardWidgetConfigurationField,
type DashboardWidgetConfigurationValue,
@@ -16,6 +19,10 @@ import {
supportedWidgetSizes,
type DashboardWidgetPlacement
} from "./dashboardLayout";
import {
DASHBOARD_I18N,
DASHBOARD_LAYOUT_DOCUMENTATION
} from "./interfacePatterns";
type WidgetConfigurationDialogProps = {
open: boolean;
@@ -32,8 +39,25 @@ export default function WidgetConfigurationDialog({
onClose,
onSave
}: WidgetConfigurationDialogProps) {
const { requestDiscard } = useUnsavedChanges();
const [size, setSize] = useState<DashboardWidgetSize>("medium");
const [configuration, setConfiguration] = useState<DashboardWidgetConfiguration>({});
const savedConfiguration = useMemo(
() => ({
...(widget?.defaultConfiguration ?? {}),
...(placement?.configuration ?? {})
}),
[placement, widget]
);
const dirty = Boolean(
open
&& widget
&& placement
&& (
size !== placement.size
|| JSON.stringify(configuration) !== JSON.stringify(savedConfiguration)
)
);
useEffect(() => {
if (!open || !widget || !placement) return;
@@ -58,6 +82,34 @@ export default function WidgetConfigurationDialog({
[configuration, widget]
);
function discardDraft() {
if (!widget || !placement) return;
setSize(placement.size);
setConfiguration({
...(widget.defaultConfiguration ?? {}),
...placement.configuration
});
}
function applyDraft(): boolean {
if (!placement || invalidConfiguration) return false;
onSave({ ...placement, size, configuration });
return true;
}
useUnsavedDraftGuard({
dirty,
title: "i18n:govoplan-dashboard.unsaved_widget_title",
message: "i18n:govoplan-dashboard.unsaved_widget_message",
onSave: applyDraft,
onDiscard: discardDraft
});
function close() {
if (dirty) requestDiscard(onClose);
else onClose();
}
if (!widget || !placement) return null;
const supportedSizes = supportedWidgetSizes(widget);
@@ -74,26 +126,28 @@ export default function WidgetConfigurationDialog({
<Dialog
open={open}
title={`Configure ${widget.title}`}
onClose={onClose}
onClose={close}
className="dashboard-widget-config-dialog"
footer={
<>
<Button type="button" variant="ghost" onClick={reset}>Reset</Button>
<span className="dialog-footer-spacer" />
<Button type="button" onClick={onClose}>Cancel</Button>
<Button type="button" onClick={close}>Cancel</Button>
<Button
type="button"
variant="primary"
disabled={invalidConfiguration}
onClick={() => onSave({ ...placement, size, configuration })}
disabledReason={invalidConfiguration ? DASHBOARD_I18N.invalidWidget : undefined}
onClick={applyDraft}
>
Apply
</Button>
</>
}
>
<DocumentationHelpLink reference={DASHBOARD_LAYOUT_DOCUMENTATION} />
{supportedSizes.length > 1 && (
<FormField label="Widget size">
<FormField label="Widget size" documentation={DASHBOARD_LAYOUT_DOCUMENTATION}>
<SegmentedControl
options={supportedSizes.map((candidate) => ({
id: candidate,
@@ -142,7 +196,7 @@ function ConfigurationField({
if (field.kind === "select") {
return (
<FormField label={field.label} help={field.description}>
<FormField label={field.label} help={field.description} documentation={DASHBOARD_LAYOUT_DOCUMENTATION}>
<select
value={typeof value === "string" ? value : ""}
required={field.required}
@@ -161,7 +215,7 @@ function ConfigurationField({
if (field.kind === "number") {
return (
<FormField label={field.label} help={field.description}>
<FormField label={field.label} help={field.description} documentation={DASHBOARD_LAYOUT_DOCUMENTATION}>
<input
type="number"
value={typeof value === "number" ? value : ""}
@@ -180,7 +234,7 @@ function ConfigurationField({
}
return (
<FormField label={field.label} help={field.description}>
<FormField label={field.label} help={field.description} documentation={DASHBOARD_LAYOUT_DOCUMENTATION}>
<input
type="text"
value={typeof value === "string" ? value : ""}
webui/src/features/dashboard/WidgetLibrary.tsx
+1
View File
@@ -66,6 +66,7 @@ export default function WidgetLibrary({
label={`Add ${widget.title}`}
icon={<Plus size={16} />}
variant="ghost"
disabled={atCapacity}
disabledReason={
atCapacity
? "A Dashboard can contain at most 100 widgets."
webui/src/features/dashboard/interfacePatterns.ts
+18
View File
@@ -0,0 +1,18 @@
import type { DocumentationHelpReference } from "@govoplan/core-webui";
export const DASHBOARD_DOCUMENTATION = {
topicId: "dashboard.configurable-home",
documentationType: "user"
} satisfies DocumentationHelpReference;
export const DASHBOARD_LAYOUT_DOCUMENTATION = {
topicId: "dashboard.reference.layout-and-widgets",
documentationType: "user"
} satisfies DocumentationHelpReference;
export const DASHBOARD_I18N = {
loading: "i18n:govoplan-dashboard.loading_reason",
saving: "i18n:govoplan-dashboard.saving_reason",
noChanges: "i18n:govoplan-dashboard.no_changes_reason",
invalidWidget: "i18n:govoplan-dashboard.invalid_widget_reason"
} as const;
webui/src/i18n/generatedTranslations.ts
+71 -7
View File
@@ -1,9 +1,73 @@
export const generatedTranslations = {
en: {
"i18n:govoplan-dashboard.dashboard.3f8b4df2": "Dashboard"
},
de: {
"i18n:govoplan-dashboard.dashboard.3f8b4df2": "Dashboard"
}
import type { PlatformTranslations } from "@govoplan/core-webui";
const en = {
"i18n:govoplan-dashboard.dashboard.3f8b4df2": "Dashboard",
"i18n:govoplan-dashboard.summary": "Dashboard summary",
"i18n:govoplan-dashboard.library": "Widget library",
"i18n:govoplan-dashboard.grid": "Dashboard grid",
"i18n:govoplan-dashboard.widget_settings": "Widget settings",
"i18n:govoplan-dashboard.installed_modules_widget": "Installed modules widget",
"i18n:govoplan-dashboard.loading_reason": "The saved Dashboard layout is still loading.",
"i18n:govoplan-dashboard.saving_reason": "The Dashboard layout is still being saved.",
"i18n:govoplan-dashboard.no_changes_reason": "There are no unsaved Dashboard changes.",
"i18n:govoplan-dashboard.invalid_widget_reason": "Complete the required widget settings with values inside their allowed ranges.",
"i18n:govoplan-dashboard.unsaved_layout_title": "Unsaved Dashboard layout",
"i18n:govoplan-dashboard.unsaved_layout_message": "Save or discard the Dashboard arrangement before leaving this page.",
"i18n:govoplan-dashboard.unsaved_widget_title": "Unapplied widget settings",
"i18n:govoplan-dashboard.unsaved_widget_message": "Apply or discard the widget settings before leaving this dialog.",
"Personal workspace assembled from installed module widgets.": "Personal workspace assembled from installed module widgets.",
"Refresh": "Refresh",
"Configure": "Configure",
"Cancel": "Cancel",
"Save layout": "Save layout",
"Saving...": "Saving...",
"Installed modules": "Installed modules",
"Available widgets": "Available widgets",
"On dashboard": "On dashboard",
"Layout": "Layout",
"Widget library": "Widget library",
"Search widgets": "Search widgets",
"Reset to module defaults": "Reset to module defaults",
"Widget size": "Widget size",
"Reset": "Reset",
"Apply": "Apply",
"Select an option": "Select an option",
"None": "None"
} as const;
const de: Record<keyof typeof en, string> = {
"i18n:govoplan-dashboard.dashboard.3f8b4df2": "Übersicht",
"i18n:govoplan-dashboard.summary": "Übersichtszusammenfassung",
"i18n:govoplan-dashboard.library": "Widget-Bibliothek",
"i18n:govoplan-dashboard.grid": "Übersichtsraster",
"i18n:govoplan-dashboard.widget_settings": "Widget-Einstellungen",
"i18n:govoplan-dashboard.installed_modules_widget": "Widget für installierte Module",
"i18n:govoplan-dashboard.loading_reason": "Die gespeicherte Übersichtsanordnung wird noch geladen.",
"i18n:govoplan-dashboard.saving_reason": "Die Übersichtsanordnung wird noch gespeichert.",
"i18n:govoplan-dashboard.no_changes_reason": "Es gibt keine ungespeicherten Änderungen an der Übersicht.",
"i18n:govoplan-dashboard.invalid_widget_reason": "Füllen Sie die erforderlichen Widget-Einstellungen mit Werten innerhalb der erlaubten Bereiche aus.",
"i18n:govoplan-dashboard.unsaved_layout_title": "Ungespeicherte Übersichtsanordnung",
"i18n:govoplan-dashboard.unsaved_layout_message": "Speichern oder verwerfen Sie die Übersichtsanordnung, bevor Sie diese Seite verlassen.",
"i18n:govoplan-dashboard.unsaved_widget_title": "Nicht angewendete Widget-Einstellungen",
"i18n:govoplan-dashboard.unsaved_widget_message": "Wenden Sie die Widget-Einstellungen an oder verwerfen Sie sie, bevor Sie den Dialog verlassen.",
"Personal workspace assembled from installed module widgets.": "Persönlicher Arbeitsbereich aus Widgets der installierten Module.",
"Refresh": "Aktualisieren",
"Configure": "Konfigurieren",
"Cancel": "Abbrechen",
"Save layout": "Anordnung speichern",
"Saving...": "Speichert...",
"Installed modules": "Installierte Module",
"Available widgets": "Verfügbare Widgets",
"On dashboard": "Auf der Übersicht",
"Layout": "Anordnung",
"Widget library": "Widget-Bibliothek",
"Search widgets": "Widgets suchen",
"Reset to module defaults": "Auf Modulvorgaben zurücksetzen",
"Widget size": "Widget-Größe",
"Reset": "Zurücksetzen",
"Apply": "Anwenden",
"Select an option": "Option auswählen",
"None": "Keine"
};
export const generatedTranslations: PlatformTranslations = { en, de };
webui/src/module.ts
+47 -2
View File
@@ -69,17 +69,62 @@ export const dashboardModule: PlatformWebModule = {
optionalDependencies: ["ops", "campaigns", "files", "mail", "tasks", "notifications", "reporting"],
translations,
viewSurfaces: [
{
id: "dashboard.page",
moduleId: "dashboard",
kind: "route",
label: "i18n:govoplan-dashboard.dashboard.3f8b4df2",
order: 10
},
{
id: "dashboard.summary",
moduleId: "dashboard",
kind: "section",
label: "i18n:govoplan-dashboard.summary",
parentId: "dashboard.page",
order: 10
},
{
id: "dashboard.library",
moduleId: "dashboard",
kind: "section",
label: "i18n:govoplan-dashboard.library",
parentId: "dashboard.page",
order: 20
},
{
id: "dashboard.grid",
moduleId: "dashboard",
kind: "section",
label: "i18n:govoplan-dashboard.grid",
parentId: "dashboard.page",
order: 30
},
{
id: "dashboard.widget-settings",
moduleId: "dashboard",
kind: "action",
label: "i18n:govoplan-dashboard.widget_settings",
parentId: "dashboard.grid",
order: 40
},
{
id: "dashboard.widget.installed-modules",
moduleId: "dashboard",
kind: "section",
label: "Installed modules widget",
label: "i18n:govoplan-dashboard.installed_modules_widget",
parentId: "dashboard.grid",
order: 10
}
],
navItems: [{ to: "/dashboard", label: "i18n:govoplan-dashboard.dashboard.3f8b4df2", iconName: "dashboard", order: 10 }],
routes: [
{ path: "/dashboard", order: 10, render: ({ settings, auth }) => createElement(DashboardPage, { settings, auth }) }
{
path: "/dashboard",
order: 10,
surfaceId: "dashboard.page",
render: ({ settings, auth }) => createElement(DashboardPage, { settings, auth })
}
],
uiCapabilities: {
"dashboard.widgets": dashboardWidgets