From b2b1a83e3ef83dd8cd0bcade00154577e07a0377 Mon Sep 17 00:00:00 2001 From: Piotr Rogowski Date: Tue, 1 Nov 2022 19:17:36 +0100 Subject: [PATCH] Handle GroupMenu better --- src/components/CommandPalette.tsx | 21 ++++++++--- src/components/Tune/SideBar.tsx | 59 +++++++++++++++++++++++++------ src/pages/Tune.tsx | 16 +++++---- src/routes.ts | 1 + 4 files changed, 74 insertions(+), 23 deletions(-) diff --git a/src/components/CommandPalette.tsx b/src/components/CommandPalette.tsx index 0e6e3c9d..10b609f7 100644 --- a/src/components/CommandPalette.tsx +++ b/src/components/CommandPalette.tsx @@ -54,7 +54,8 @@ import { NavigationState, } from '../types/state'; import { - buildUrl, + buildDialogUrl, + buildGroupMenuDialogUrl, SKIP_MENUS, SKIP_SUB_MENUS, } from './Tune/SideBar'; @@ -261,7 +262,12 @@ const ActionsProvider = (props: CommandPaletteProps) => { }, ]; - const mapSubMenuItems = (rootMenuName: string, rootMenu: MenuType, subMenus: { [name: string]: SubMenuType | GroupMenuType | GroupChildMenuType }) => { + const mapSubMenuItems = ( + rootMenuName: string, + rootMenu: MenuType, + subMenus: { [name: string]: SubMenuType | GroupMenuType | GroupChildMenuType }, + groupMenuName: string | null = null, + ) => { Object .keys(subMenus) .forEach((subMenuName: string) => { @@ -276,17 +282,22 @@ const ActionsProvider = (props: CommandPaletteProps) => { const subMenu = subMenus[subMenuName]; if ((subMenu as GroupMenuType).type === 'groupMenu') { - mapSubMenuItems(rootMenuName, rootMenu, (subMenu as GroupMenuType).groupChildMenus); + // recurrence + mapSubMenuItems(rootMenuName, rootMenu, (subMenu as GroupMenuType).groupChildMenus, (subMenu as GroupMenuType).title); return; } + const url = groupMenuName ? + buildGroupMenuDialogUrl(navigation.tuneId!, rootMenuName, groupMenuName, subMenuName) : + buildDialogUrl(navigation.tuneId!, rootMenuName, subMenuName); + newActions.push({ - id: buildUrl(navigation.tuneId!, rootMenuName, subMenuName), + id: url, section: rootMenu.title, name: subMenu.title, icon: , - perform: () => navigate(buildUrl(navigation.tuneId!, rootMenuName, subMenuName)), + perform: () => navigate(url), }); }); }; diff --git a/src/components/Tune/SideBar.tsx b/src/components/Tune/SideBar.tsx index f66530c9..ba359a02 100644 --- a/src/components/Tune/SideBar.tsx +++ b/src/components/Tune/SideBar.tsx @@ -48,10 +48,17 @@ export const SKIP_SUB_MENUS = [ 'tuning/std_realtime', ]; -export const buildUrl = (tuneId: string, main: string, sub: string) => generatePath(Routes.TUNE_DIALOG, { +export const buildDialogUrl = (tuneId: string, main: string, dialog: string) => generatePath(Routes.TUNE_DIALOG, { tuneId, category: main, - dialog: sub, + dialog: dialog.replaceAll(' ', '-'), +}); + +export const buildGroupMenuDialogUrl = (tuneId: string, main: string, groupMenu: string, dialog: string) => generatePath(Routes.TUNE_GROUP_MENU_DIALOG, { + tuneId, + category: main, + groupMenu: groupMenu.replaceAll(' ', '-'), + dialog, }); const mapStateToProps = (state: AppState) => ({ @@ -66,13 +73,14 @@ interface SideBarProps { tune: TuneType | null; ui: UIState; navigation: NavigationState; - matchedPath: PathMatch<'dialog' | 'tuneId' | 'category'>; + matchedPath: PathMatch<'dialog' | 'tuneId' | 'category'> | null; + matchedGroupMenuDialogPath: PathMatch<'dialog' | 'groupMenu' | 'tuneId' | 'category'> | null; }; export const sidebarWidth = 250; export const collapsedSidebarWidth = 50; -const SideBar = ({ config, tune, ui, navigation, matchedPath }: SideBarProps) => { +const SideBar = ({ config, tune, ui, navigation, matchedPath, matchedGroupMenuDialogPath }: SideBarProps) => { const siderProps = { width: sidebarWidth, collapsedWidth: collapsedSidebarWidth, @@ -84,7 +92,11 @@ const SideBar = ({ config, tune, ui, navigation, matchedPath }: SideBarProps) => const [menus, setMenus] = useState([]); const navigate = useNavigate(); - const mapSubMenuItems = useCallback((rootMenuName: string, subMenus: { [name: string]: SubMenuType | GroupMenuType | GroupChildMenuType }): ItemType[] => { + const mapSubMenuItems = useCallback(( + rootMenuName: string, + subMenus: { [name: string]: SubMenuType | GroupMenuType | GroupChildMenuType }, + groupMenuName: string | null = null, + ): ItemType[] => { const items: ItemType[] = []; Object @@ -105,16 +117,26 @@ const SideBar = ({ config, tune, ui, navigation, matchedPath }: SideBarProps) => const subMenu = subMenus[subMenuName]; if ((subMenu as GroupMenuType).type === 'groupMenu') { - items.push(...mapSubMenuItems(rootMenuName, (subMenu as GroupMenuType).groupChildMenus)); + // recurrence + items.push({ + key: buildDialogUrl(navigation.tuneId!, rootMenuName, (subMenu as GroupMenuType).title), + icon: , + label: (subMenu as GroupMenuType).title, + children: mapSubMenuItems(rootMenuName, (subMenu as GroupMenuType).groupChildMenus, (subMenu as GroupMenuType).title), + }); return; } + const url = groupMenuName ? + buildGroupMenuDialogUrl(navigation.tuneId!, rootMenuName, groupMenuName, subMenuName) : + buildDialogUrl(navigation.tuneId!, rootMenuName, subMenuName); + items.push({ - key: buildUrl(navigation.tuneId!, rootMenuName, subMenuName), + key: url, icon: , label: subMenu.title, - onClick: () => navigate(buildUrl(navigation.tuneId!, rootMenuName, subMenuName)), + onClick: () => navigate(url), }); }); @@ -144,15 +166,30 @@ const SideBar = ({ config, tune, ui, navigation, matchedPath }: SideBarProps) => } }, [config, config?.menus, menusList, tune, tune?.constants]); + const defaultOpenSubmenus = () => { + if (matchedGroupMenuDialogPath) { + return [ + `/${matchedGroupMenuDialogPath.params.category}`, + buildDialogUrl( + navigation.tuneId!, + matchedGroupMenuDialogPath.params.category!, + matchedGroupMenuDialogPath.params.groupMenu!, + ), + ]; + } + + return [`/${matchedPath!.params.category}`]; + }; + return ( diff --git a/src/pages/Tune.tsx b/src/pages/Tune.tsx index 6ee54e36..3226f988 100644 --- a/src/pages/Tune.tsx +++ b/src/pages/Tune.tsx @@ -26,8 +26,7 @@ const mapStateToProps = (state: AppState) => ({ const Tune = ({ config, tune }: { config: ConfigType | null, tune: TuneState }) => { const dialogMatch = useMatch(Routes.TUNE_DIALOG); const tuneRootMatch = useMatch(Routes.TUNE_TUNE); - // const { storageGetSync } = useBrowserStorage(); - // const lastDialogPath = storageGetSync('lastDialog'); + const groupMenuDialogMatch = useMatch(Routes.TUNE_GROUP_MENU_DIALOG); const { isConfigReady } = useConfig(config); const navigate = useNavigate(); @@ -47,18 +46,21 @@ const Tune = ({ config, tune }: { config: ConfigType | null, tune: TuneState }) navigate(firstDialogPath, { replace: true }); } - }, [navigate, tuneRootMatch, isConfigReady, config?.menus, tuneId, config, tune, dialogMatch]); + }, [navigate, tuneRootMatch, isConfigReady, config?.menus, tuneId, config, tune, dialogMatch, groupMenuDialogMatch]); - if (!tune || !config || !dialogMatch) { + if (!tune || !config || (!dialogMatch && !groupMenuDialogMatch)) { return ; } return ( <> - + ); diff --git a/src/routes.ts b/src/routes.ts index 5705c858..7382f068 100644 --- a/src/routes.ts +++ b/src/routes.ts @@ -7,6 +7,7 @@ export enum Routes { TUNE_TAB = '/t/:tuneId/:tab', TUNE_TUNE = '/t/:tuneId/tune', TUNE_DIALOG = '/t/:tuneId/tune/:category/:dialog', + TUNE_GROUP_MENU_DIALOG = '/t/:tuneId/tune/:category/:groupMenu/:dialog', TUNE_LOGS = '/t/:tuneId/logs', TUNE_LOGS_FILE = '/t/:tuneId/logs/:fileName', TUNE_DIAGNOSE = '/t/:tuneId/diagnose',