100 lines
2.8 KiB
TypeScript
100 lines
2.8 KiB
TypeScript
import { FileOutlined, HighlightOutlined, SolutionOutlined, ToolOutlined, UserOutlined } from "@ant-design/icons";
|
|
import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
|
|
import { Menu, theme } from "antd";
|
|
import { Content } from "antd/es/layout/layout";
|
|
import dayjs from "dayjs";
|
|
import utc from "dayjs/plugin/utc";
|
|
import React from "react";
|
|
import { Route, Routes, useNavigate } from "react-router-dom";
|
|
import { ExtraFieldsSettings } from "./extraFieldsSettings";
|
|
import { GeneralSettings } from "./generalSettings";
|
|
|
|
dayjs.extend(utc);
|
|
|
|
const { useToken } = theme;
|
|
|
|
export const Settings: React.FC<IResourceComponentsProps> = () => {
|
|
const { token } = useToken();
|
|
const t = useTranslate();
|
|
const navigate = useNavigate();
|
|
|
|
const getCurrentKey = () => {
|
|
const path = window.location.pathname.replace("/settings", "");
|
|
// Remove starting slash and ending slash if exists and return
|
|
return path.replace(/^\/|\/$/g, "");
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<h1
|
|
style={{
|
|
color: token.colorText,
|
|
}}
|
|
>
|
|
{t("settings.header")}
|
|
</h1>
|
|
<Content
|
|
style={{
|
|
padding: "1em",
|
|
minHeight: 280,
|
|
margin: "0 auto",
|
|
backgroundColor: token.colorBgContainer,
|
|
borderRadius: token.borderRadiusLG,
|
|
color: token.colorText,
|
|
fontFamily: token.fontFamily,
|
|
fontSize: token.fontSizeLG,
|
|
lineHeight: 1.5,
|
|
}}
|
|
>
|
|
<Menu
|
|
mode="horizontal"
|
|
selectedKeys={[getCurrentKey()]}
|
|
onClick={(e) => {
|
|
if (e.key === "") {
|
|
return navigate("/settings");
|
|
} else {
|
|
return navigate(`/settings/${e.key}`);
|
|
}
|
|
}}
|
|
items={[
|
|
{ key: "", label: t("settings.general.tab"), icon: <ToolOutlined /> },
|
|
{
|
|
key: "extra",
|
|
label: t("settings.extra_fields.tab"),
|
|
icon: <SolutionOutlined />,
|
|
children: [
|
|
{
|
|
label: t("spool.spool"),
|
|
key: "extra/spool",
|
|
icon: <FileOutlined />,
|
|
},
|
|
{
|
|
label: t("filament.filament"),
|
|
key: "extra/filament",
|
|
icon: <HighlightOutlined />,
|
|
},
|
|
{
|
|
label: t("vendor.vendor"),
|
|
key: "extra/vendor",
|
|
icon: <UserOutlined />,
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
style={{
|
|
marginBottom: "1em",
|
|
}}
|
|
/>
|
|
<main>
|
|
<Routes>
|
|
<Route index element={<GeneralSettings />} />
|
|
<Route path="/extra/:entityType" element={<ExtraFieldsSettings />} />
|
|
</Routes>
|
|
</main>
|
|
</Content>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Settings;
|