From e9c9b74719edfa20e17ea23156651e1d93117a6d Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Wed, 11 Dec 2024 15:54:00 +0100 Subject: [PATCH] feat: AddLayoutBlocks --- .../components/layout-configurator.tsx | 113 +++++++++++++----- app/locales/de/messages.po | 4 + app/locales/en/messages.po | 4 + app/locales/fr/messages.po | 4 + app/locales/it/messages.po | 4 + 5 files changed, 98 insertions(+), 31 deletions(-) diff --git a/app/configurator/components/layout-configurator.tsx b/app/configurator/components/layout-configurator.tsx index 316bdfdfd..c5ebc982e 100644 --- a/app/configurator/components/layout-configurator.tsx +++ b/app/configurator/components/layout-configurator.tsx @@ -1,16 +1,26 @@ import { t, Trans } from "@lingui/macro"; import { Box, + Menu, + MenuItem, IconButton as MUIIconButton, Stack, Switch, SwitchProps, Typography, - useEventCallback, } from "@mui/material"; +import { Theme } from "@mui/material/styles"; +import { makeStyles } from "@mui/styles"; import capitalize from "lodash/capitalize"; import omit from "lodash/omit"; -import { useCallback, useEffect, useMemo, useRef } from "react"; +import { + MouseEvent, + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from "react"; import { DataFilterGenericDimensionProps } from "@/charts/shared/chart-data-filters"; import { useCombinedTemporalDimension } from "@/charts/shared/use-combined-temporal-dimension"; @@ -60,6 +70,7 @@ import { useLocale } from "@/src"; import { useDashboardInteractiveFilters } from "@/stores/interactive-filters"; import { createId } from "@/utils/create-id"; import { getTimeFilterOptions } from "@/utils/time-filter-options"; +import useEvent from "@/utils/use-event"; export const LayoutConfigurator = () => { return ( @@ -133,7 +144,7 @@ const LayoutSharedFiltersConfigurator = () => { const combinedTemporalDimension = useCombinedTemporalDimension(); - const handleTimeRangeFilterToggle: SwitchProps["onChange"] = useEventCallback( + const handleTimeRangeFilterToggle: SwitchProps["onChange"] = useEvent( (_, checked) => { if (checked) { const options = getTimeFilterOptions({ @@ -170,7 +181,7 @@ const LayoutSharedFiltersConfigurator = () => { } ); - const handleDataFiltersToggle = useEventCallback( + const handleDataFiltersToggle = useEvent( (checked: boolean, componentId: string) => { if (checked) { dispatch({ @@ -546,26 +557,7 @@ const LayoutBlocksConfigurator = () => { const { layout } = state; const { blocks } = layout; - const handleAddTextBlock = useEventCallback(() => { - dispatch({ - type: "LAYOUT_CHANGED", - value: { - ...layout, - blocks: [ - ...layout.blocks, - { - type: "text", - key: createId(), - title: "Example title.", - description: "Example description.", - initialized: false, - }, - ], - }, - }); - }); - - const handleRemoveBlock = useEventCallback((key: string) => { + const handleRemoveBlock = useEvent((key: string) => { dispatch({ type: "LAYOUT_CHANGED", value: { @@ -581,7 +573,7 @@ const LayoutBlocksConfigurator = () => { Objects - + {blocks .filter((b) => b.type === "text") .map((block) => ( @@ -605,16 +597,75 @@ const LayoutBlocksConfigurator = () => { ))} - - - Add object - - + ) : null; }; +const AddLayoutBlocks = () => { + const [state, dispatch] = useConfiguratorState(isLayouting); + const { layout } = state; + const [anchorEl, setAnchorEl] = useState(null); + const handleOpen = useEvent((e: MouseEvent) => { + setAnchorEl(e.currentTarget); + }); + const handleClose = useEvent(() => { + setAnchorEl(null); + }); + const handleAddTextBlock = useEvent(() => { + dispatch({ + type: "LAYOUT_CHANGED", + value: { + ...layout, + blocks: [ + ...layout.blocks, + { + type: "text", + key: createId(), + title: "Example title.", + description: "Example description.", + initialized: false, + }, + ], + }, + }); + handleClose(); + }); + const classes = useAddTextBlocksStyles(); + + return ( + <> + + Add object + + + + + + + Add text + + + + + + ); +}; + +const useAddTextBlocksStyles = makeStyles((theme) => ({ + menuItem: { + minWidth: 200, + padding: theme.spacing(3), + }, + menuItemIcon: { + marginRight: "0.75rem", + }, + menuItemText: { + color: theme.palette.grey[700], + }, +})); + const migrateLayout = ( layout: LayoutDashboard, newLayoutType: LayoutDashboard["layout"], @@ -671,7 +722,7 @@ const DashboardLayoutButton = ({ ref.current = layout; } }, [layout, checked]); - const handleClick = useEventCallback(() => { + const handleClick = useEvent(() => { if (ref.current?.layout === type) { dispatch({ type: "LAYOUT_CHANGED", diff --git a/app/locales/de/messages.po b/app/locales/de/messages.po index 19e75443e..837907e15 100644 --- a/app/locales/de/messages.po +++ b/app/locales/de/messages.po @@ -820,6 +820,10 @@ msgstr "Objekte" msgid "controls.section.block-options.block-add" msgstr "Objekt hinzufügen" +#: app/configurator/components/layout-configurator.tsx +msgid "controls.section.block-options.block-add.text" +msgstr "Text" + #: app/configurator/components/chart-configurator.tsx msgid "controls.section.chart.options" msgstr "Diagramm-Einstellungen" diff --git a/app/locales/en/messages.po b/app/locales/en/messages.po index a4412c018..ddf0fe85a 100644 --- a/app/locales/en/messages.po +++ b/app/locales/en/messages.po @@ -820,6 +820,10 @@ msgstr "Objects" msgid "controls.section.block-options.block-add" msgstr "Add object" +#: app/configurator/components/layout-configurator.tsx +msgid "controls.section.block-options.block-add.text" +msgstr "Text" + #: app/configurator/components/chart-configurator.tsx msgid "controls.section.chart.options" msgstr "Chart Options" diff --git a/app/locales/fr/messages.po b/app/locales/fr/messages.po index 2a229f7ae..bba9744d0 100644 --- a/app/locales/fr/messages.po +++ b/app/locales/fr/messages.po @@ -820,6 +820,10 @@ msgstr "Objets" msgid "controls.section.block-options.block-add" msgstr "Ajouter un objet" +#: app/configurator/components/layout-configurator.tsx +msgid "controls.section.block-options.block-add.text" +msgstr "Texte" + #: app/configurator/components/chart-configurator.tsx msgid "controls.section.chart.options" msgstr "Paramètres graphiques" diff --git a/app/locales/it/messages.po b/app/locales/it/messages.po index a20ebec31..1efa4de74 100644 --- a/app/locales/it/messages.po +++ b/app/locales/it/messages.po @@ -820,6 +820,10 @@ msgstr "Oggetti" msgid "controls.section.block-options.block-add" msgstr "Aggiungi oggetto" +#: app/configurator/components/layout-configurator.tsx +msgid "controls.section.block-options.block-add.text" +msgstr "Testo" + #: app/configurator/components/chart-configurator.tsx msgid "controls.section.chart.options" msgstr "Opzioni del grafico"