feat(frontend): add router query for settings groups

This commit is contained in:
yassinedorbozgithub 2024-12-10 10:29:41 +01:00
parent 94e3a4b647
commit db710365d3
5 changed files with 39 additions and 2 deletions

View File

@ -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")} />

View 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;

View 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;

View File

@ -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[] = [