mirror of
https://github.com/hexastack/hexabot
synced 2025-06-26 18:27:28 +00:00
feat(frontend): add router query for settings groups
This commit is contained in:
parent
94e3a4b647
commit
db710365d3
@ -16,6 +16,7 @@ import {
|
|||||||
Tab,
|
Tab,
|
||||||
Tabs,
|
Tabs,
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
|
import { useRouter } from "next/router";
|
||||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
import { Controller, useForm } from "react-hook-form";
|
import { Controller, useForm } from "react-hook-form";
|
||||||
|
|
||||||
@ -25,7 +26,7 @@ import { useUpdate } from "@/hooks/crud/useUpdate";
|
|||||||
import { useToast } from "@/hooks/useToast";
|
import { useToast } from "@/hooks/useToast";
|
||||||
import { useTranslate } from "@/hooks/useTranslate";
|
import { useTranslate } from "@/hooks/useTranslate";
|
||||||
import { PageHeader } from "@/layout/content/PageHeader";
|
import { PageHeader } from "@/layout/content/PageHeader";
|
||||||
import { EntityType } from "@/services/types";
|
import { EntityType, RouterType } from "@/services/types";
|
||||||
import { ISetting } from "@/types/setting.types";
|
import { ISetting } from "@/types/setting.types";
|
||||||
import { SXStyleOptions } from "@/utils/SXStyleOptions";
|
import { SXStyleOptions } from "@/utils/SXStyleOptions";
|
||||||
|
|
||||||
@ -66,10 +67,16 @@ function groupBy(array: ISetting[]) {
|
|||||||
}, {} as Record<string, ISetting[]>);
|
}, {} as Record<string, ISetting[]>);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const DEFAULT_SETTINGS_GROUP = "chatbot_settings" as const;
|
||||||
|
|
||||||
export const Settings = () => {
|
export const Settings = () => {
|
||||||
const { t } = useTranslate();
|
const { t } = useTranslate();
|
||||||
|
const router = useRouter();
|
||||||
|
const group = router.query.group?.toString();
|
||||||
const { toast } = useToast();
|
const { toast } = useToast();
|
||||||
const [selectedTab, setSelectedTab] = useState("chatbot_settings");
|
const [selectedTab, setSelectedTab] = useState(
|
||||||
|
group || DEFAULT_SETTINGS_GROUP,
|
||||||
|
);
|
||||||
const { control, watch } = useForm();
|
const { control, watch } = useForm();
|
||||||
const { data: settings } = useFind(
|
const { data: settings } = useFind(
|
||||||
{ entity: EntityType.SETTING },
|
{ entity: EntityType.SETTING },
|
||||||
@ -94,6 +101,7 @@ export const Settings = () => {
|
|||||||
};
|
};
|
||||||
const handleChange = (_event: React.SyntheticEvent, newValue: string) => {
|
const handleChange = (_event: React.SyntheticEvent, newValue: string) => {
|
||||||
setSelectedTab(newValue);
|
setSelectedTab(newValue);
|
||||||
|
router.push(`/${RouterType.SETTINGS}/groups/${newValue}`);
|
||||||
};
|
};
|
||||||
const isDisabled = (setting: ISetting) => {
|
const isDisabled = (setting: ISetting) => {
|
||||||
return (
|
return (
|
||||||
@ -135,6 +143,12 @@ export const Settings = () => {
|
|||||||
};
|
};
|
||||||
}, [watch, debouncedUpdate]);
|
}, [watch, debouncedUpdate]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setSelectedTab(group || DEFAULT_SETTINGS_GROUP);
|
||||||
|
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [group]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Grid container gap={3} flexDirection="column">
|
<Grid container gap={3} flexDirection="column">
|
||||||
<PageHeader icon={faCogs} title={t("title.settings")} />
|
<PageHeader icon={faCogs} title={t("title.settings")} />
|
||||||
|
11
frontend/src/pages/settings/groups/[group]/index.tsx
Normal file
11
frontend/src/pages/settings/groups/[group]/index.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
/*
|
||||||
|
* Copyright © 2024 Hexastack. All rights reserved.
|
||||||
|
*
|
||||||
|
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
|
||||||
|
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
|
||||||
|
* 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
|
||||||
|
*/
|
||||||
|
|
||||||
|
import SettingsPage from "../..";
|
||||||
|
|
||||||
|
export default SettingsPage;
|
11
frontend/src/pages/settings/groups/index.tsx
Normal file
11
frontend/src/pages/settings/groups/index.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
/*
|
||||||
|
* Copyright © 2024 Hexastack. All rights reserved.
|
||||||
|
*
|
||||||
|
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
|
||||||
|
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
|
||||||
|
* 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
|
||||||
|
*/
|
||||||
|
|
||||||
|
import SettingsPage from "..";
|
||||||
|
|
||||||
|
export default SettingsPage;
|
@ -65,6 +65,7 @@ export enum RouterType {
|
|||||||
RESET = "reset",
|
RESET = "reset",
|
||||||
VISUAL_EDITOR = "visual-editor",
|
VISUAL_EDITOR = "visual-editor",
|
||||||
INBOX = "inbox",
|
INBOX = "inbox",
|
||||||
|
SETTINGS = "settings",
|
||||||
}
|
}
|
||||||
|
|
||||||
export const FULL_WIDTH_PATHNAMES: TRouterValues[] = [
|
export const FULL_WIDTH_PATHNAMES: TRouterValues[] = [
|
||||||
|
Loading…
Reference in New Issue
Block a user