Added a basic web UI

2023-05-10 21:11:10 +02:00
parent 1c59e0efd5
commit 0269518175
39 changed files with 10950 additions and 1 deletions
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -0,0 +1,145 @@
+import { Refine } from "@refinedev/core";
+import { RefineKbar, RefineKbarProvider } from "@refinedev/kbar";
+
+import {
+  ErrorComponent,
+  notificationProvider,
+  ThemedLayoutV2,
+  ThemedSiderV2,
+  ThemedTitleV2,
+} from "@refinedev/antd";
+import "@refinedev/antd/dist/reset.css";
+
+import routerBindings, {
+  NavigateToResource,
+  UnsavedChangesNotifier,
+} from "@refinedev/react-router-v6";
+import dataProvider from "@refinedev/simple-rest";
+import { useTranslation } from "react-i18next";
+import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
+import { AppIcon } from "./components/app-icon";
+import { Header } from "./components/header";
+import { ColorModeContextProvider } from "./contexts/color-mode";
+import { SpoolCreate, SpoolEdit, SpoolList, SpoolShow } from "./pages/spools";
+import {
+  FilamentCreate,
+  FilamentEdit,
+  FilamentList,
+  FilamentShow,
+} from "./pages/filaments";
+import {
+  VendorCreate,
+  VendorEdit,
+  VendorList,
+  VendorShow,
+} from "./pages/vendors";
+
+function App() {
+  const { t, i18n } = useTranslation();
+
+  const i18nProvider = {
+    translate: (key: string, params: object) => t(key, params),
+    changeLocale: (lang: string) => i18n.changeLanguage(lang),
+    getLocale: () => i18n.language,
+  };
+
+  return (
+    <BrowserRouter>
+      <RefineKbarProvider>
+        <ColorModeContextProvider>
+          <Refine
+            dataProvider={dataProvider("/api/v1")}
+            notificationProvider={notificationProvider}
+            i18nProvider={i18nProvider}
+            routerProvider={routerBindings}
+            resources={[
+              {
+                name: "spool",
+                list: "/spool",
+                create: "/spool/create",
+                edit: "/spool/edit/:id",
+                show: "/spool/show/:id",
+                meta: {
+                  canDelete: true,
+                },
+              },
+              {
+                name: "filament",
+                list: "/filament",
+                create: "/filament/create",
+                edit: "/filament/edit/:id",
+                show: "/filament/show/:id",
+                meta: {
+                  canDelete: true,
+                },
+              },
+              {
+                name: "vendor",
+                list: "/vendor",
+                create: "/vendor/create",
+                edit: "/vendor/edit/:id",
+                show: "/vendor/show/:id",
+                meta: {
+                  canDelete: true,
+                },
+              },
+            ]}
+            options={{
+              syncWithLocation: true,
+              warnWhenUnsavedChanges: true,
+            }}
+          >
+            <Routes>
+              <Route
+                element={
+                  <ThemedLayoutV2
+                    Header={() => <Header sticky />}
+                    Sider={() => <ThemedSiderV2 fixed />}
+                    Title={({ collapsed }) => (
+                      <ThemedTitleV2
+                        collapsed={collapsed}
+                        text="Spoolman"
+                        icon={<AppIcon />}
+                      />
+                    )}
+                  >
+                    <Outlet />
+                  </ThemedLayoutV2>
+                }
+              >
+                <Route
+                  index
+                  element={<NavigateToResource resource="spool" />}
+                />
+                <Route path="/spool">
+                  <Route index element={<SpoolList />} />
+                  <Route path="create" element={<SpoolCreate />} />
+                  <Route path="edit/:id" element={<SpoolEdit />} />
+                  <Route path="show/:id" element={<SpoolShow />} />
+                </Route>
+                <Route path="/filament">
+                  <Route index element={<FilamentList />} />
+                  <Route path="create" element={<FilamentCreate />} />
+                  <Route path="edit/:id" element={<FilamentEdit />} />
+                  <Route path="show/:id" element={<FilamentShow />} />
+                </Route>
+                <Route path="/vendor">
+                  <Route index element={<VendorList />} />
+                  <Route path="create" element={<VendorCreate />} />
+                  <Route path="edit/:id" element={<VendorEdit />} />
+                  <Route path="show/:id" element={<VendorShow />} />
+                </Route>
+                <Route path="*" element={<ErrorComponent />} />
+              </Route>
+            </Routes>
+
+            <RefineKbar />
+            <UnsavedChangesNotifier />
+          </Refine>
+        </ColorModeContextProvider>
+      </RefineKbarProvider>
+    </BrowserRouter>
+  );
+}
+
+export default App;