tonym/spoolman2
1
0
Fork 0
Code Issues 19 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Client: Full localization, dynamic title

Browse Source
This commit is contained in:
Donkie
2023-07-13 22:20:54 +02:00
parent e5ef306aa2
commit f21834ce2d
22 changed files with 546 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/package-lock.json generated
View File

@@ -16,6 +16,7 @@
"@refinedev/simple-rest": "^4.5.0",
"@tanstack/react-query": "^4.29.19",
"antd": "^5.6.4",
"flag-icons": "^6.7.0",
"i18next": "^23.2.8",
"i18next-browser-languagedetector": "^7.1.0",
"i18next-xhr-backend": "^3.2.2",
@@ -4837,6 +4838,11 @@
"node": ">=8"
}
},
"node_modules/flag-icons": {
"version": "6.7.0",
"resolved": "https://registry.npmjs.org/flag-icons/-/flag-icons-6.7.0.tgz",
"integrity": "sha512-+KXrrrXN2jiETFxisFl+3f83Bq7tj5nuIWnbv9fX59k05lvldEXRCOffybb5hAIjMWt4nmG0E8OfKt7Flm99Eg=="
},
"node_modules/flat-cache": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",

1
client/package.json
View File

@@ -15,6 +15,7 @@
"@refinedev/simple-rest": "^4.5.0",
"@tanstack/react-query": "^4.29.19",
"antd": "^5.6.4",
"flag-icons": "^6.7.0",
"i18next": "^23.2.8",
"i18next-browser-languagedetector": "^7.1.0",
"i18next-xhr-backend": "^3.2.2",

1
client/public/images/flags/en.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480" viewBox="0 0 640 480"><defs><clipPath id="a"><path fill-opacity=".67" d="M-85.333 0h682.67v512h-682.67z"/></clipPath></defs><g clip-path="url(#a)" transform="translate(80) scale(.94)"><g stroke-width="1pt"><path fill="#006" d="M-256 0H768.02v512.01H-256z"/><path fill="#fff" d="M-256 0v57.244l909.535 454.768H768.02V454.77L-141.515 0H-256zM768.02 0v57.243L-141.515 512.01H-256v-57.243L653.535 0H768.02z"/><path fill="#fff" d="M170.675 0v512.01h170.67V0h-170.67zM-256 170.67v170.67H768.02V170.67H-256z"/><path fill="#c00" d="M-256 204.804v102.402H768.02V204.804H-256zM204.81 0v512.01h102.4V0h-102.4zM-256 512.01L85.34 341.34h76.324l-341.34 170.67H-256zM-256 0L85.34 170.67H9.016L-256 38.164V0zm606.356 170.67L691.696 0h76.324L426.68 170.67h-76.324zM768.02 512.01L426.68 341.34h76.324L768.02 473.848v38.162z"/></g></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 888 B

48
client/public/locales/de/common.json Normal file
View File

@@ -0,0 +1,48 @@
{
"actions": {
"list": "Aufführen",
"create": "Erstellen",
"edit": "Bearbeiten",
"show": "Zeigen"
},
"buttons": {
"create": "Erstellen",
"save": "Speichern",
"logout": "Abmelden",
"delete": "Löschen",
"edit": "Bearbeiten",
"cancel": "Abbrechen",
"confirm": "Sicher?",
"filter": "Filter",
"clear": "Löschen",
"refresh": "Erneuern",
"show": "Zeigen",
"undo": "Undo",
"import": "Importieren",
"clone": "Klon",
"notAccessTitle": "Sie haben keine zugriffsberechtigung"
},
"warnWhenUnsavedChanges": "Nicht gespeicherte Änderungen werden nicht übernommen.",
"notifications": {
"success": "Erfolg",
"error": "Fehler (status code: {{statusCode}})",
"undoable": "Sie haben {{seconds}} Sekunden Zeit für Undo.",
"createSuccess": "{{resource}} erfolgreich erstellt.",
"createError": "Fehler beim Erstellen {{resource}} (status code: {{statusCode}})",
"deleteSuccess": "{{resource}} erfolgreich gelöscht.",
"deleteError": "Fehler beim Löschen {{resource}} (status code: {{statusCode}})",
"editSuccess": "{{resource}} erfolgreich bearbeitet.",
"editError": "Fehler beim Bearbeiten {{resource}} (status code: {{statusCode}})",
"importProgress": "{{processed}}/{{total}} importiert"
},
"loading": "Wird geladen",
"tags": {
"clone": "Klon"
},
"dashboard": {
"title": "Dashboard"
},
"table": {
"actions": "Aktionen"
}
}

128
client/public/locales/en/common.json
View File

@@ -1,70 +1,4 @@
{
"pages": {
"login": {
"title": "Sign in to your account",
"signin": "Sign in",
"signup": "Sign up",
"divider": "or",
"fields": {
"email": "Email",
"password": "Password"
},
"errors": {
"validEmail": "Invalid email address"
},
"buttons": {
"submit": "Login",
"forgotPassword": "Forgot password?",
"noAccount": "Don’t have an account?",
"rememberMe": "Remember me"
}
},
"forgotPassword": {
"title": "Forgot your password?",
"fields": {
"email": "Email"
},
"errors": {
"validEmail": "Invalid email address"
},
"buttons": {
"submit": "Send reset instructions"
}
},
"register": {
"title": "Sign up for your account",
"fields": {
"email": "Email",
"password": "Password"
},
"errors": {
"validEmail": "Invalid email address"
},
"buttons": {
"submit": "Register",
"haveAccount": "Have an account?"
}
},
"updatePassword": {
"title": "Update password",
"fields": {
"password": "New Password",
"confirmPassword": "Confirm new password"
},
"errors": {
"confirmPasswordNotMatch": "Passwords do not match"
},
"buttons": {
"submit": "Update"
}
},
"error": {
"info": "You may have forgotten to add the {{action}} component to {{resource}} resource.",
"404": "Sorry, the page you visited does not exist.",
"resource404": "Are you sure you have created the {{resource}} resource.",
"backHome": "Back Home"
}
},
"actions": {
"list": "List",
"create": "Create",
@@ -87,7 +21,9 @@
"undo": "Undo",
"import": "Import",
"clone": "Clone",
"notAccessTitle": "You don't have permission to access"
"notAccessTitle": "You don't have permission to access",
"hideColumns": "Hide Columns",
"clearFilters": "Clear Filters"
},
"warnWhenUnsavedChanges": "Are you sure you want to leave? You have unsaved changes.",
"notifications": {
@@ -103,25 +39,33 @@
"importProgress": "Importing: {{processed}}/{{total}}"
},
"loading": "Loading",
"version": "Version",
"tags": {
"clone": "Clone"
},
"dashboard": {
"title": "Dashboard"
},
"spools": {
"spools": "Spools",
"spool": {
"spool": "Spools",
"fields": {
"id": "Id",
"filament_name": "Filament Name",
"filament_name": "Filament",
"filament": "Filament",
"used_weight": "Used Weight",
"remaining_weight": "Remaining Weight",
"location": "Location",
"lot_nr": "Lot Nr",
"first_used": "First Used",
"last_used": "Last Used",
"registered": "Registered",
"comment": "Comment"
},
"fields_help": {
"used_weight": "How much filament has been used from the spool. A new spool should have 0g used.",
"location": "Where the spool is located if you have multiple locations where you store your spools.",
"lot_nr": "Manufacturer's lot number. Can be used to ensure a print has consistent color if multiple spools are used."
},
"titles": {
"create": "Create Spool",
"clone": "Clone Spool",
@@ -130,11 +74,12 @@
"show": "Show Spool"
}
},
"filaments": {
"filaments": "Filaments",
"filament": {
"filament": "Filaments",
"fields": {
"id": "Id",
"vendor_name": "Vendor Name",
"vendor_name": "Vendor",
"vendor": "Vendor",
"name": "Name",
"material": "Material",
"price": "Price",
@@ -149,6 +94,14 @@
"settings_bed_temp": "Bed Temp",
"color_hex": "Color"
},
"fields_help": {
"name": "Filament name, to distinguish this filament type among others from the same vendor. Should contain the color for example.",
"material": "E.g. PLA, ABS, PETG, etc.",
"price": "Price of a full spool in the system configured currency.",
"weight": "The filament weight of a full spool (net weight). This should not include the weight of the spool itself, only the filament. It is what is usually written on the packaging.",
"spool_weight": "The weight of an empty spool. Currently not used for anything, but could be used by thirdparty apps to e.g. calculate the filament weight from a weight measurement.",
"article_number": "E.g. EAN, UPC, etc."
},
"titles": {
"create": "Create Filament",
"clone": "Clone Filament",
@@ -157,8 +110,8 @@
"show": "Show Filament"
}
},
"vendors": {
"vendors": "Vendors",
"vendor": {
"vendor": "Vendors",
"fields": {
"id": "Id",
"name": "Name",
@@ -175,5 +128,30 @@
},
"table": {
"actions": "Actions"
},
"documentTitle": {
"default": "Spoolman",
"suffix": " | Spoolman",
"filament": {
"list": "Filaments | Spoolman",
"show": "#{{id}} Show Filament | Spoolman",
"edit": "#{{id}} Edit Filament | Spoolman",
"create": "Create Filament | Spoolman",
"clone": "#{{id}} Clone Filament | Spoolman"
},
"spool": {
"list": "Spools | Spoolman",
"show": "#{{id}} Show Spool | Spoolman",
"edit": "#{{id}} Edit Spool | Spoolman",
"create": "Create Spool | Spoolman",
"clone": "#{{id}} Clone Spool | Spoolman"
},
"vendor": {
"list": "Vendors | Spoolman",
"show": "#{{id}} Show Vendor | Spoolman",
"edit": "#{{id}} Edit Vendor | Spoolman",
"create": "Create Vendor | Spoolman",
"clone": "#{{id}} Clone Vendor | Spoolman"
}
}
}

157
client/public/locales/sv/common.json Normal file
View File

@@ -0,0 +1,157 @@
{
"actions": {
"list": "Lista",
"create": "Skapa",
"edit": "Ändra",
"show": "Visa",
"clone": "Klona"
},
"buttons": {
"create": "Skapa",
"save": "Spara",
"logout": "Logga ut",
"delete": "Ta bort",
"edit": "Ändra",
"cancel": "Avbryt",
"confirm": "Är du säker?",
"filter": "Filtrera",
"clear": "Rensa",
"refresh": "Uppdatera",
"show": "Visa",
"undo": "Ångra",
"import": "Importera",
"clone": "Klona",
"notAccessTitle": "Du har inte tillgång till denna sida",
"hideColumns": "Dölj kolumner",
"clearFilters": "Rensa filter"
},
"warnWhenUnsavedChanges": "Du har osparade ändringar. Är du säker på att du vill lämna sidan?",
"notifications": {
"success": "Lyckades!",
"error": "Fel (statuskod: {{statusCode}})",
"undoable": "Du har {{seconds}} sekunder på dig att ångra",
"createSuccess": "Lyckades skapa {{resource}}",
"createError": "Det gick inte att skapa {{resource}} (statuskod: {{statusCode}})",
"deleteSuccess": "Lyckades ta bort {{resource}}",
"deleteError": "Det gick inte att ta bort {{resource}} (statuskod: {{statusCode}})",
"editSuccess": "Lyckades ändra {{resource}}",
"editError": "Det gick inte att ändra {{resource}} (statuskod: {{statusCode}})",
"importProgress": "Importerar: {{processed}}/{{total}}"
},
"loading": "Laddar...",
"version": "Version",
"tags": {
"clone": "Klona"
},
"dashboard": {
"title": "Hem"
},
"spool": {
"spool": "Spolar",
"fields": {
"id": "Id",
"filament_name": "Filament",
"filament": "Filament",
"used_weight": "Använd vikt",
"remaining_weight": "Återstående vikt",
"location": "Plats",
"lot_nr": "Batchnummer",
"first_used": "Användes först",
"last_used": "Användes senast",
"registered": "Registrerad",
"comment": "Kommentar"
},
"fields_help": {
"used_weight": "Hur mycket filament som använts på spolen. En ny spole har värdet 0g.",
"location": "Vart spolen finns om du har flera platser att förvara spolar på.",
"lot_nr": "Tillverkarens batchnummer. Kan användas för att se till att en utskrift har jämn färg ifall flera spolar används."
},
"titles": {
"create": "Skapa spole",
"clone": "Klona spole",
"edit": "Ändra spole",
"list": "Spolar",
"show": "Visa spole"
}
},
"filament": {
"filament": "Filament",
"fields": {
"id": "Id",
"vendor_name": "Leverantör",
"vendor": "Leverantör",
"name": "Namn",
"material": "Material",
"price": "Pris",
"density": "Densitet",
"diameter": "Diameter",
"weight": "Vikt",
"spool_weight": "Spolvikt",
"article_number": "Artikelnummer",
"registered": "Registrerad",
"comment": "Kommentar",
"settings_extruder_temp": "Extrudertemp",
"settings_bed_temp": "Bäddtemp",
"color_hex": "Färg"
},
"fields_help": {
"name": "Filamentets namn, för att skilja detta filament från andra från samma leverantör. Bör innehålla färgen till exempel.",
"material": "T.ex. PLA, ABS, PETG, etc.",
"price": "Pris för en full spole i systemets valuta.",
"weight": "Vikten på en full spole (nettovikt). Detta ska inte inkludera vikten på spolen själv, bara filamentet. Det är vad som vanligtvis står på förpackningen.",
"spool_weight": "Vikten på en tom spole. Detta används inte till något i dagsläget, men skulle kunna användas av tredjepartsappar för att t.ex. beräkna filamentvikten från en viktmätning.",
"article_number": "T.ex. EAN, UPC, etc."
},
"titles": {
"create": "Skapa filament",
"clone": "Klona filament",
"edit": "Ändra filament",
"list": "Filament",
"show": "Visa filament"
}
},
"vendor": {
"vendor": "Leverantörer",
"fields": {
"id": "Id",
"name": "Namn",
"registered": "Registrerad",
"comment": "Kommentar"
},
"titles": {
"create": "Skapa leverantör",
"clone": "Klona leverantör",
"edit": "Ändra leverantör",
"list": "Leverantörer",
"show": "Visa leverantör"
}
},
"table": {
"actions": "Åtgärder"
},
"documentTitle": {
"default": "Spoolman",
"suffix": " | Spoolman",
"filament": {
"list": "Filament | Spoolman",
"show": "#{{id}} Visa filament | Spoolman",
"edit": "#{{id}} Redigera filament | Spoolman",
"create": "Skapa filament | Spoolman",
"clone": "#{{id}} Klona filament | Spoolman"
},
"spool": {
"list": "Spolar | Spoolman",
"show": "#{{id}} Visa spole | Spoolman",
"edit": "#{{id}} Redigera spole | Spoolman",
"create": "Skapa spole | Spoolman",
"clone": "#{{id}} Klona spole | Spoolman"
},
"vendor": {
"list": "Leverantörer | Spoolman",
"show": "#{{id}} Visa leverantör | Spoolman",
"edit": "#{{id}} Redigera leverantör | Spoolman",
"create": "Skapa leverantör | Spoolman",
"clone": "#{{id}} Klona leverantör | Spoolman"
}
}
}

22
client/src/App.tsx
View File

@@ -11,6 +11,7 @@ import {
import "@refinedev/antd/dist/reset.css";
import routerBindings, {
DocumentTitleHandler,
NavigateToResource,
UnsavedChangesNotifier,
} from "@refinedev/react-router-v6";
@@ -41,6 +42,9 @@ import {
import { ConfigProvider } from "antd";
import { Footer } from "antd/es/layout/layout";
import { Version } from "./components/version";
import React from "react";
import { Locale } from "antd/es/locale";
import { languages } from "./i18n";
function App() {
const { t, i18n } = useTranslation();
@@ -51,6 +55,20 @@ function App() {
getLocale: () => i18n.language,
};
// Fetch the antd locale using dynamic imports
const [antdLocale, setAntdLocale] = React.useState<Locale | undefined>();
React.useEffect(() => {
const fetchLocale = async () => {
const locale = await import(
`./../node_modules/antd/es/locale/${languages[
i18n.language
].fullCode.replace("-", "_")}.js`
);
setAntdLocale(locale.default);
};
fetchLocale().catch(console.error);
}, [i18n.language]);
if (!import.meta.env.VITE_APIURL) {
return (
<>
@@ -68,6 +86,7 @@ function App() {
<RefineKbarProvider>
<ColorModeContextProvider>
<ConfigProvider
locale={antdLocale}
theme={{
token: {
colorPrimary: "#dc7734",
@@ -142,7 +161,7 @@ function App() {
)}
Footer={() => (
<Footer style={{ textAlign: "center" }}>
Spoolman - Version <Version />
Spoolman - {t("version")} <Version />
</Footer>
)}
>
@@ -199,6 +218,7 @@ function App() {
<RefineKbar />
<UnsavedChangesNotifier />
<DocumentTitleHandler />
</Refine>
</ConfigProvider>
</ColorModeContextProvider>

6
client/src/components/column.tsx
View File

@@ -14,12 +14,13 @@ import utc from "dayjs/plugin/utc";
import { DateField, TextField } from "@refinedev/antd";
import Icon from "@ant-design/icons";
import { ReactComponent as SpoolIcon } from "../icon_spool.svg";
import { useTranslate } from "@refinedev/core";
dayjs.extend(utc);
interface BaseColumnProps<Obj> {
id: keyof Obj & string;
title: string;
i18ncat: string;
dataSource: Obj[];
tableState: TableState;
}
@@ -42,6 +43,7 @@ interface CustomColumnProps<Obj> {
function Column<Obj>(
props: BaseColumnProps<Obj> & FilteredColumnProps & CustomColumnProps<Obj>
) {
const t = useTranslate();
if (
props.tableState.showColumns &&
!props.tableState.showColumns.includes(props.id)
@@ -51,7 +53,7 @@ function Column<Obj>(
const typedSorters = typeSorters<Obj>(props.tableState.sorters);
const columnProps: AntdColumnProps<Obj> = {
dataIndex: props.id,
title: props.title,
title: t(`${props.i18ncat}.fields.${props.id}`),
sorter: true,
sortOrder: getSortOrderForField(typedSorters, props.id),
};

36
client/src/components/header/index.tsx
View File

@@ -1,8 +1,7 @@
import { DownOutlined } from "@ant-design/icons";
import type { RefineThemedLayoutV2HeaderProps } from "@refinedev/antd";
import { useGetIdentity, useGetLocale, useSetLocale } from "@refinedev/core";
import { useGetLocale, useSetLocale } from "@refinedev/core";
import {
Avatar,
Button,
Dropdown,
Layout as AntdLayout,
@@ -10,20 +9,15 @@ import {
Space,
Switch,
theme,
Typography,
} from "antd";
import React, { useContext } from "react";
import { useTranslation } from "react-i18next";
import { ColorModeContext } from "../../contexts/color-mode";
const { Text } = Typography;
const { useToken } = theme;
import "/node_modules/flag-icons/css/flag-icons.min.css";
import { languages } from "../../i18n";
type IUser = {
id: number;
name: string;
avatar: string;
};
const { useToken } = theme;
export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
sticky,
@@ -32,7 +26,6 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
const { i18n } = useTranslation();
const locale = useGetLocale();
const changeLanguage = useSetLocale();
const { data: user } = useGetIdentity<IUser>();
const { mode, setMode } = useContext(ColorModeContext);
const currentLocale = locale();
@@ -43,11 +36,12 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
key: lang,
onClick: () => changeLanguage(lang),
icon: (
<span style={{ marginRight: 8 }}>
<Avatar size={16} src={`/images/flags/${lang}.svg`} />
</span>
<span
className={"fi fi-" + languages[lang].countryCode}
style={{ marginRight: 8 }}
/>
),
label: lang === "en" ? "English" : "German",
label: languages[lang].name,
}));
const headerStyles: React.CSSProperties = {
@@ -76,8 +70,12 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
>
<Button type="text">
<Space>
<Avatar size={16} src={`/images/flags/${currentLocale}.svg`} />
{currentLocale === "en" ? "English" : "German"}
<span
className={
"fi fi-" + languages[currentLocale ?? "en"].countryCode
}
/>
{languages[currentLocale ?? "en"].name}
<DownOutlined />
</Space>
</Button>
@@ -88,10 +86,6 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
onChange={() => setMode(mode === "light" ? "dark" : "light")}
defaultChecked={mode === "dark"}
/>
<Space style={{ marginLeft: "8px" }} size="middle">
{user?.name && <Text strong>{user.name}</Text>}
{user?.avatar && <Avatar src={user?.avatar} alt={user?.name} />}
</Space>
</Space>
</AntdLayout.Header>
);

28
client/src/i18n.ts
View File

@@ -3,17 +3,41 @@ import detector from "i18next-browser-languagedetector";
import Backend from "i18next-xhr-backend";
import { initReactI18next } from "react-i18next";
interface Language {
name: string;
countryCode: string;
fullCode: string;
}
export const languages: { [key: string]: Language } = {
["en"]: {
name: "English",
countryCode: "gb",
fullCode: "en-GB",
},
["sv"]: {
name: "Svenska",
countryCode: "se",
fullCode: "sv-SE",
},
["de"]: {
name: "Deutsch",
countryCode: "de",
fullCode: "de-DE",
},
}
i18n
.use(Backend)
.use(detector)
.use(initReactI18next)
.init({
supportedLngs: ["en"],
supportedLngs: Object.keys(languages),
backend: {
loadPath: "/locales/{{lng}}/{{ns}}.json",
},
defaultNS: "common",
fallbackLng: ["en"],
fallbackLng: Object.keys(languages),
});
export default i18n;

44
client/src/pages/filaments/create.tsx
View File

@@ -1,5 +1,5 @@
import React from "react";
import { IResourceComponentsProps } from "@refinedev/core";
import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
import { Create, useForm, useSelect } from "@refinedev/antd";
import { Form, Input, Select, InputNumber, ColorPicker } from "antd";
import TextArea from "antd/es/input/TextArea";
@@ -14,6 +14,8 @@ interface CreateOrCloneProps {
export const FilamentCreate: React.FC<
IResourceComponentsProps & CreateOrCloneProps
> = (props) => {
const t = useTranslate();
const { formProps, saveButtonProps, formLoading } = useForm<IFilament>();
if (props.mode === "clone" && formProps.initialValues) {
@@ -36,8 +38,8 @@ export const FilamentCreate: React.FC<
>
<Form {...formProps} layout="vertical">
<Form.Item
label="Name"
help="Filament name, to distinguish this filament type among others from the same vendor. Should contain the color for example."
label={t("filament.fields.name")}
help={t("filament.fields_help.name")}
name={["name"]}
rules={[
{
@@ -48,7 +50,7 @@ export const FilamentCreate: React.FC<
<Input maxLength={64} />
</Form.Item>
<Form.Item
label="Vendor"
label={t("filament.fields.vendor")}
name={["vendor_id"]}
rules={[
{
@@ -59,7 +61,7 @@ export const FilamentCreate: React.FC<
<Select {...selectProps} allowClear />
</Form.Item>
<Form.Item
label="Color"
label={t("filament.fields.color_hex")}
name={["color_hex"]}
rules={[
{
@@ -73,8 +75,8 @@ export const FilamentCreate: React.FC<
<ColorPicker format="hex" />
</Form.Item>
<Form.Item
label="Material"
help="E.g. PLA, ABS, PETG, etc."
label={t("filament.fields.material")}
help={t("filament.fields_help.material")}
name={["material"]}
rules={[
{
@@ -85,8 +87,8 @@ export const FilamentCreate: React.FC<
<Input maxLength={64} />
</Form.Item>
<Form.Item
label="Price"
help="Price of a full spool in the system configured currency."
label={t("filament.fields.price")}
help={t("filament.fields_help.price")}
name={["price"]}
rules={[
{
@@ -102,7 +104,7 @@ export const FilamentCreate: React.FC<
/>
</Form.Item>
<Form.Item
label="Density"
label={t("filament.fields.density")}
name={["density"]}
rules={[
{
@@ -119,7 +121,7 @@ export const FilamentCreate: React.FC<
/>
</Form.Item>
<Form.Item
label="Diameter"
label={t("filament.fields.diameter")}
name={["diameter"]}
rules={[
{
@@ -136,8 +138,8 @@ export const FilamentCreate: React.FC<
/>
</Form.Item>
<Form.Item
label="Weight"
help="The filament weight of a full spool (net weight). This should not include the weight of the spool itself, only the filament. It is what is usually written on the packaging."
label={t("filament.fields.weight")}
help={t("filament.fields_help.weight")}
name={["weight"]}
rules={[
{
@@ -148,8 +150,8 @@ export const FilamentCreate: React.FC<
<InputNumber min={0} addonAfter="g" precision={0} />
</Form.Item>
<Form.Item
label="Spool Weight"
help="The weight of an empty spool. Currently not used for anything, but could be used by thirdparty apps to e.g. calculate the filament weight from a weight measurement."
label={t("filament.fields.spool_weight")}
help={t("filament.fields_help.spool_weight")}
name={["spool_weight"]}
rules={[
{
@@ -160,8 +162,7 @@ export const FilamentCreate: React.FC<
<InputNumber min={0} addonAfter="g" precision={0} />
</Form.Item>
<Form.Item
label="Override Extruder Temperature"
help="Override the extruder temperature for this filament type."
label={t("filament.fields.settings_extruder_temp")}
name={["settings_extruder_temp"]}
rules={[
{
@@ -172,8 +173,7 @@ export const FilamentCreate: React.FC<
<InputNumber min={0} addonAfter="°C" precision={0} />
</Form.Item>
<Form.Item
label="Override Bed Temperature"
help="Override the bed temperature for this filament type."
label={t("filament.fields.settings_bed_temp")}
name={["settings_bed_temp"]}
rules={[
{
@@ -184,9 +184,9 @@ export const FilamentCreate: React.FC<
<InputNumber min={0} addonAfter="°C" precision={0} />
</Form.Item>
<Form.Item
label="Article Number"
label={t("filament.fields.article_number")}
help={t("filament.fields_help.article_number")}
name={["article_number"]}
help="E.g. EAN, UPC, etc."
rules={[
{
required: false,
@@ -196,7 +196,7 @@ export const FilamentCreate: React.FC<
<Input maxLength={64} />
</Form.Item>
<Form.Item
label="Comment"
label={t("filament.fields.comment")}
name={["comment"]}
rules={[
{

48
client/src/pages/filaments/edit.tsx
View File

@@ -1,5 +1,5 @@
import React from "react";
import { IResourceComponentsProps } from "@refinedev/core";
import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
import { Edit, useForm, useSelect } from "@refinedev/antd";
import {
Form,
@@ -16,6 +16,8 @@ import { IVendor } from "../vendors/model";
import { IFilament } from "./model";
export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
const t = useTranslate();
const { formProps, saveButtonProps } = useForm<IFilament>();
const { selectProps } = useSelect<IVendor>({
@@ -32,7 +34,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
<Edit saveButtonProps={saveButtonProps}>
<Form {...formProps} layout="vertical">
<Form.Item
label="Id"
label={t("filament.fields.id")}
name={["id"]}
rules={[
{
@@ -43,7 +45,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
<Input readOnly disabled />
</Form.Item>
<Form.Item
label="Registered"
label={t("filament.fields.registered")}
name={["registered"]}
rules={[
{
@@ -57,8 +59,8 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
<DatePicker disabled showTime format="YYYY-MM-DD HH:mm:ss" />
</Form.Item>
<Form.Item
label="Name"
help="Filament name, to distinguish this filament type among others from the same vendor. Should contain the color for example."
label={t("filament.fields.name")}
help={t("filament.fields_help.name")}
name={["name"]}
rules={[
{
@@ -69,7 +71,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
<Input maxLength={64} />
</Form.Item>
<Form.Item
label="Vendor"
label={t("filament.fields.vendor")}
name={["vendor_id"]}
rules={[
{
@@ -87,7 +89,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
<Select {...selectProps} allowClear />
</Form.Item>
<Form.Item
label="Color"
label={t("filament.fields.color_hex")}
name={["color_hex"]}
rules={[
{
@@ -101,8 +103,8 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
<ColorPicker format="hex" />
</Form.Item>
<Form.Item
label="Material"
help="E.g. PLA, ABS, PETG, etc."
label={t("filament.fields.material")}
help={t("filament.fields_help.material")}
name={["material"]}
rules={[
{
@@ -113,8 +115,8 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
<Input maxLength={64} />
</Form.Item>
<Form.Item
label="Price"
help="Price of a full spool in the system configured currency."
label={t("filament.fields.price")}
help={t("filament.fields_help.price")}
name={["price"]}
rules={[
{
@@ -130,7 +132,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
/>
</Form.Item>
<Form.Item
label="Density"
label={t("filament.fields.density")}
name={["density"]}
rules={[
{
@@ -147,7 +149,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
/>
</Form.Item>
<Form.Item
label="Diameter"
label={t("filament.fields.diameter")}
name={["diameter"]}
rules={[
{
@@ -164,8 +166,8 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
/>
</Form.Item>
<Form.Item
label="Weight"
help="The filament weight of a full spool (net weight). This should not include the weight of the spool itself, only the filament. It is what is usually written on the packaging."
label={t("filament.fields.weight")}
help={t("filament.fields_help.weight")}
name={["weight"]}
rules={[
{
@@ -176,8 +178,8 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
<InputNumber min={0} addonAfter="g" precision={0} />
</Form.Item>
<Form.Item
label="Spool Weight"
help="The weight of an empty spool. Currently not used for anything, but could be used by thirdparty apps to e.g. calculate the filament weight from a weight measurement."
label={t("filament.fields.spool_weight")}
help={t("filament.fields_help.spool_weight")}
name={["spool_weight"]}
rules={[
{
@@ -188,8 +190,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
<InputNumber min={0} addonAfter="g" precision={0} />
</Form.Item>
<Form.Item
label="Override Extruder Temperature"
help="Override the extruder temperature for this filament type."
label={t("filament.fields.settings_extruder_temp")}
name={["settings_extruder_temp"]}
rules={[
{
@@ -200,8 +201,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
<InputNumber min={0} addonAfter="°C" precision={0} />
</Form.Item>
<Form.Item
label="Override Bed Temperature"
help="Override the bed temperature for this filament type."
label={t("filament.fields.settings_bed_temp")}
name={["settings_bed_temp"]}
rules={[
{
@@ -212,9 +212,9 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
<InputNumber min={0} addonAfter="°C" precision={0} />
</Form.Item>
<Form.Item
label="Article Number"
label={t("filament.fields.article_number")}
help={t("filament.fields_help.article_number")}
name={["article_number"]}
help="E.g. EAN, UPC, etc."
rules={[
{
required: false,
@@ -224,7 +224,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
<Input maxLength={64} />
</Form.Item>
<Form.Item
label="Comment"
label={t("filament.fields.comment")}
name={["comment"]}
rules={[
{

48
client/src/pages/filaments/list.tsx
View File

@@ -1,5 +1,9 @@
import React from "react";
import { IResourceComponentsProps, BaseRecord } from "@refinedev/core";
import {
IResourceComponentsProps,
BaseRecord,
useTranslate,
} from "@refinedev/core";
import {
useTable,
List,
@@ -26,7 +30,6 @@ import {
SortedColumn,
SpoolIconColumn,
} from "../../components/column";
import i18n from "../../i18n";
dayjs.extend(utc);
@@ -35,6 +38,8 @@ interface IFilamentCollapsed extends Omit<IFilament, "vendor"> {
}
export const FilamentList: React.FC<IResourceComponentsProps> = () => {
const t = useTranslate();
// Load initial state
const initialState = useInitialTableState("filamentList");
@@ -133,14 +138,14 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
setCurrent(1);
}}
>
Clear Filters
{t("buttons.clearFilters")}
</Button>
<Dropdown
trigger={["click"]}
menu={{
items: allColumns.map((column_id) => ({
key: column_id,
label: i18n.t(`filaments.fields.${column_id}`),
label: t(`filament.fields.${column_id}`),
})),
selectedKeys: showColumns,
selectable: true,
@@ -154,7 +159,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
}}
>
<Button type="primary" icon={<EditOutlined />}>
Hide Columns
{t("buttons.hideColumns")}
</Button>
</Dropdown>
{defaultButtons}
@@ -177,38 +182,38 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
>
{SortedColumn({
id: "id",
title: "Id",
i18ncat: "filament",
dataSource,
tableState,
})}
{FilteredColumn({
id: "vendor_name",
title: "Vendor",
i18ncat: "filament",
dataSource,
tableState,
})}
{SpoolIconColumn({
id: "name",
title: "Name",
i18ncat: "filament",
color: (record: IFilamentCollapsed) => record.color_hex,
dataSource,
tableState,
})}
{FilteredColumn({
id: "material",
title: "Material",
i18ncat: "filament",
dataSource,
tableState,
})}
{SortedColumn({
id: "price",
title: "Price",
i18ncat: "filament",
dataSource,
tableState,
})}
{NumberColumn({
id: "density",
title: "Density",
i18ncat: "filament",
unit: "g/cm³",
decimals: 2,
dataSource,
@@ -216,7 +221,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
})}
{NumberColumn({
id: "diameter",
title: "Diameter",
i18ncat: "filament",
unit: "mm",
decimals: 2,
dataSource,
@@ -224,7 +229,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
})}
{NumberColumn({
id: "weight",
title: "Weight",
i18ncat: "filament",
unit: "g",
decimals: 1,
dataSource,
@@ -232,7 +237,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
})}
{NumberColumn({
id: "spool_weight",
title: "Spool Weight",
i18ncat: "filament",
unit: "g",
decimals: 1,
dataSource,
@@ -240,42 +245,41 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
})}
{FilteredColumn({
id: "article_number",
title: "Article Number",
i18ncat: "filament",
dataSource,
tableState,
})}
{DateColumn({
id: "registered",
title: "Registered",
i18ncat: "filament",
dataSource,
tableState,
})}
{SortedColumn({
id: "comment",
title: "Comment",
i18ncat: "filament",
dataSource,
tableState,
})}
<Table.Column
title="Actions"
dataIndex="actions"
title={t("table.actions")}
render={(_, record: BaseRecord) => (
<Space>
<EditButton
hideText
title="Edit"
title={t("buttons.edit")}
size="small"
recordItemId={record.id}
/>
<ShowButton
hideText
title="Show"
title={t("buttons.show")}
size="small"
recordItemId={record.id}
/>
<CloneButton
hideText
title="Clone"
title={t("buttons.clone")}
size="small"
recordItemId={record.id}
/>

40
client/src/pages/filaments/show.tsx
View File

@@ -1,5 +1,9 @@
import React from "react";
import { IResourceComponentsProps, useShow } from "@refinedev/core";
import {
IResourceComponentsProps,
useShow,
useTranslate,
} from "@refinedev/core";
import { Show, NumberField, DateField, TextField } from "@refinedev/antd";
import { Typography } from "antd";
import { NumberFieldUnit } from "../../components/numberField";
@@ -12,6 +16,8 @@ dayjs.extend(utc);
const { Title } = Typography;
export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
const t = useTranslate();
const { queryResult } = useShow<IFilament>();
const { data, isLoading } = queryResult;
@@ -19,25 +25,25 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
return (
<Show isLoading={isLoading}>
<Title level={5}>Id</Title>
<Title level={5}>{t("filament.fields.id")}</Title>
<NumberField value={record?.id ?? ""} />
<Title level={5}>Registered</Title>
<Title level={5}>{t("filament.fields.registered")}</Title>
<DateField
value={dayjs.utc(record?.registered).local()}
title={dayjs.utc(record?.registered).local().format()}
format="YYYY-MM-DD HH:mm:ss"
/>
<Title level={5}>Name</Title>
<Title level={5}>{t("filament.fields.name")}</Title>
<TextField value={record?.name} />
<Title level={5}>Vendor</Title>
{/* {vendorIsLoading ? <>Loading...</> : <>{vendorData?.data?.id}</>} */}
<Title level={5}>Color</Title>
{/* <Title level={5}>{t("filament.fields.id")}</Title>
{vendorIsLoading ? <>Loading...</> : <>{vendorData?.data?.id}</>} */}
<Title level={5}>{t("filament.fields.color_hex")}</Title>
<TextField value={record?.color_hex} />
<Title level={5}>Material</Title>
<Title level={5}>{t("filament.fields.material")}</Title>
<TextField value={record?.material} />
<Title level={5}>Price</Title>
<Title level={5}>{t("filament.fields.price")}</Title>
<NumberField value={record?.price ?? ""} />
<Title level={5}>Density</Title>
<Title level={5}>{t("filament.fields.density")}</Title>
<NumberFieldUnit
value={record?.density ?? ""}
unit="g/cm³"
@@ -45,7 +51,7 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
maximumFractionDigits: 2,
}}
/>
<Title level={5}>Diameter</Title>
<Title level={5}>{t("filament.fields.diameter")}</Title>
<NumberFieldUnit
value={record?.diameter ?? ""}
unit="mm"
@@ -53,7 +59,7 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
maximumFractionDigits: 2,
}}
/>
<Title level={5}>Weight</Title>
<Title level={5}>{t("filament.fields.weight")}</Title>
<NumberFieldUnit
value={record?.weight ?? ""}
unit="g"
@@ -61,7 +67,7 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
maximumFractionDigits: 1,
}}
/>
<Title level={5}>Spool Weight</Title>
<Title level={5}>{t("filament.fields.spool_weight")}</Title>
<NumberFieldUnit
value={record?.spool_weight ?? ""}
unit="g"
@@ -69,7 +75,7 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
maximumFractionDigits: 1,
}}
/>
<Title level={5}>Overridden Extruder Temperature</Title>
<Title level={5}>{t("filament.fields.settings_extruder_temp")}</Title>
{!record?.settings_extruder_temp ? (
<TextField value="Not Set" />
) : (
@@ -78,15 +84,15 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
unit="°C"
/>
)}
<Title level={5}>Overridden Bed Temperature</Title>
<Title level={5}>{t("filament.fields.settings_bed_temp")}</Title>
{!record?.settings_bed_temp ? (
<TextField value="Not Set" />
) : (
<NumberFieldUnit value={record?.settings_bed_temp ?? ""} unit="°C" />
)}
<Title level={5}>Article Number</Title>
<Title level={5}>{t("filament.fields.article_number")}</Title>
<TextField value={record?.article_number} />
<Title level={5}>Comment</Title>
<Title level={5}>{t("filament.fields.comment")}</Title>
<TextField value={record?.comment} />
</Show>
);

27
client/src/pages/spools/create.tsx
View File

@@ -1,5 +1,5 @@
import React from "react";
import { IResourceComponentsProps } from "@refinedev/core";
import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
import { Create, useForm, useSelect } from "@refinedev/antd";
import { Form, Input, DatePicker, Select, InputNumber } from "antd";
import dayjs from "dayjs";
@@ -14,6 +14,8 @@ interface CreateOrCloneProps {
export const SpoolCreate: React.FC<
IResourceComponentsProps & CreateOrCloneProps
> = (props) => {
const t = useTranslate();
const { formProps, saveButtonProps, formLoading } = useForm<ISpool>();
if (props.mode === "clone" && formProps.initialValues) {
@@ -49,13 +51,17 @@ export const SpoolCreate: React.FC<
return (
<Create
title={props.mode === "create" ? "Create Spool" : "Clone Spool"}
title={
props.mode === "create"
? t("spool.titles.create")
: t("spool.titles.clone")
}
saveButtonProps={saveButtonProps}
isLoading={formLoading}
>
<Form {...formProps} layout="vertical">
<Form.Item
label="First Used"
label={t("spool.fields.first_used")}
name={["first_used"]}
rules={[
{
@@ -69,7 +75,7 @@ export const SpoolCreate: React.FC<
<DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
</Form.Item>
<Form.Item
label="Last Used"
label={t("spool.fields.last_used")}
name={["last_used"]}
rules={[
{
@@ -83,7 +89,7 @@ export const SpoolCreate: React.FC<
<DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
</Form.Item>
<Form.Item
label="Filament"
label={t("spool.fields.filament")}
name={["filament_id"]}
rules={[
{
@@ -94,7 +100,8 @@ export const SpoolCreate: React.FC<
<Select options={filamentOptions} />
</Form.Item>
<Form.Item
label="Used Weight"
label={t("spool.fields.used_weight")}
help={t("spool.fields_help.used_weight")}
name={["used_weight"]}
rules={[
{
@@ -105,7 +112,8 @@ export const SpoolCreate: React.FC<
<InputNumber min={0} addonAfter="g" precision={0} />
</Form.Item>
<Form.Item
label="Location"
label={t("spool.fields.location")}
help={t("spool.fields_help.location")}
name={["location"]}
rules={[
{
@@ -116,7 +124,8 @@ export const SpoolCreate: React.FC<
<Input maxLength={64} />
</Form.Item>
<Form.Item
label="Lot Nr"
label={t("spool.fields.lot_nr")}
help={t("spool.fields_help.lot_nr")}
name={["lot_nr"]}
rules={[
{
@@ -127,7 +136,7 @@ export const SpoolCreate: React.FC<
<Input maxLength={64} />
</Form.Item>
<Form.Item
label="Comment"
label={t("spool.fields.comment")}
name={["comment"]}
rules={[
{

25
client/src/pages/spools/edit.tsx
View File

@@ -1,5 +1,5 @@
import React from "react";
import { IResourceComponentsProps } from "@refinedev/core";
import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
import { Edit, useForm, useSelect } from "@refinedev/antd";
import { Form, Input, DatePicker, Select, InputNumber } from "antd";
import dayjs from "dayjs";
@@ -8,6 +8,8 @@ import { IFilament } from "../filaments/model";
import { ISpool } from "./model";
export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
const t = useTranslate();
const { formProps, saveButtonProps } = useForm<ISpool>();
const { queryResult } = useSelect<IFilament>({
@@ -40,7 +42,7 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
<Edit saveButtonProps={saveButtonProps}>
<Form {...formProps} layout="vertical">
<Form.Item
label="Id"
label={t("spool.fields.id")}
name={["id"]}
rules={[
{
@@ -51,7 +53,7 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
<Input readOnly disabled />
</Form.Item>
<Form.Item
label="Registered"
label={t("spool.fields.registered")}
name={["registered"]}
rules={[
{
@@ -65,7 +67,7 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
<DatePicker disabled showTime format="YYYY-MM-DD HH:mm:ss" />
</Form.Item>
<Form.Item
label="First Used"
label={t("spool.fields.first_used")}
name={["first_used"]}
rules={[
{
@@ -79,7 +81,7 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
<DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
</Form.Item>
<Form.Item
label="Last Used"
label={t("spool.fields.last_used")}
name={["last_used"]}
rules={[
{
@@ -93,7 +95,7 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
<DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
</Form.Item>
<Form.Item
label="Filament"
label={t("spool.fields.filament")}
name={["filament_id"]}
rules={[
{
@@ -104,7 +106,8 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
<Select options={filamentOptions} />
</Form.Item>
<Form.Item
label="Used Weight"
label={t("spool.fields.used_weight")}
help={t("spool.fields_help.used_weight")}
name={["used_weight"]}
rules={[
{
@@ -118,7 +121,8 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
more elegantly for locales which use , as a thousands separator. */}
</Form.Item>
<Form.Item
label="Location"
label={t("spool.fields.location")}
help={t("spool.fields_help.location")}
name={["location"]}
rules={[
{
@@ -129,7 +133,8 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
<Input maxLength={64} />
</Form.Item>
<Form.Item
label="Lot Nr"
label={t("spool.fields.lot_nr")}
help={t("spool.fields_help.lot_nr")}
name={["lot_nr"]}
rules={[
{
@@ -140,7 +145,7 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
<Input maxLength={64} />
</Form.Item>
<Form.Item
label="Comment"
label={t("spool.fields.comment")}
name={["comment"]}
rules={[
{

41
client/src/pages/spools/list.tsx
View File

@@ -1,5 +1,9 @@
import React from "react";
import { IResourceComponentsProps, BaseRecord } from "@refinedev/core";
import {
IResourceComponentsProps,
BaseRecord,
useTranslate,
} from "@refinedev/core";
import {
useTable,
List,
@@ -26,7 +30,6 @@ import {
SortedColumn,
SpoolIconColumn,
} from "../../components/column";
import i18n from "../../i18n";
dayjs.extend(utc);
@@ -35,6 +38,8 @@ interface ISpoolCollapsed extends ISpool {
}
export const SpoolList: React.FC<IResourceComponentsProps> = () => {
const t = useTranslate();
// Load initial state
const initialState = useInitialTableState("spoolList");
@@ -131,14 +136,14 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
setCurrent(1);
}}
>
Clear Filters
{t("buttons.clearFilters")}
</Button>
<Dropdown
trigger={["click"]}
menu={{
items: allColumns.map((column) => ({
key: column,
label: i18n.t(`spools.fields.${column}`),
label: t(`spool.fields.${column}`),
})),
selectedKeys: showColumns,
selectable: true,
@@ -152,7 +157,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
}}
>
<Button type="primary" icon={<EditOutlined />}>
Hide Columns
{t("buttons.hideColumns")}
</Button>
</Dropdown>
{defaultButtons}
@@ -175,20 +180,20 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
>
{SortedColumn({
id: "id",
title: "Id",
i18ncat: "spool",
dataSource,
tableState,
})}
{SpoolIconColumn({
id: "filament_name",
title: "Filament",
i18ncat: "spool",
color: (record: ISpoolCollapsed) => record.filament.color_hex,
dataSource,
tableState,
})}
{NumberColumn({
id: "used_weight",
title: "Used Weight",
i18ncat: "spool",
unit: "g",
decimals: 1,
dataSource,
@@ -196,7 +201,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
})}
{NumberColumn({
id: "remaining_weight",
title: "Estimated Remaining Weight",
i18ncat: "spool",
unit: "g",
decimals: 1,
dataSource,
@@ -204,53 +209,53 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
})}
{FilteredColumn({
id: "location",
title: "Location",
i18ncat: "spool",
dataSource,
tableState,
})}
{FilteredColumn({
id: "lot_nr",
title: "Lot Nr",
i18ncat: "spool",
dataSource,
tableState,
})}
{DateColumn({
id: "first_used",
title: "First Used",
i18ncat: "spool",
dataSource,
tableState,
})}
{DateColumn({
id: "last_used",
title: "Last Used",
i18ncat: "spool",
dataSource,
tableState,
})}
{SortedColumn({
id: "comment",
title: "Comment",
i18ncat: "spool",
dataSource,
tableState,
})}
<Table.Column
title="Actions"
title={t("table.actions")}
render={(_, record: BaseRecord) => (
<Space>
<EditButton
hideText
title="Edit"
title={t("buttons.edit")}
size="small"
recordItemId={record.id}
/>
<ShowButton
hideText
title="Show"
title={t("buttons.show")}
size="small"
recordItemId={record.id}
/>
<CloneButton
hideText
title="Clone"
title={t("buttons.clone")}
size="small"
recordItemId={record.id}
/>

30
client/src/pages/spools/show.tsx
View File

@@ -1,5 +1,9 @@
import React from "react";
import { IResourceComponentsProps, useShow } from "@refinedev/core";
import {
IResourceComponentsProps,
useShow,
useTranslate,
} from "@refinedev/core";
import { Show, NumberField, DateField, TextField } from "@refinedev/antd";
import { Typography } from "antd";
import { NumberFieldUnit } from "../../components/numberField";
@@ -12,6 +16,8 @@ dayjs.extend(utc);
const { Title } = Typography;
export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
const t = useTranslate();
const { queryResult } = useShow<ISpool>();
const { data, isLoading } = queryResult;
@@ -19,35 +25,35 @@ export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
return (
<Show isLoading={isLoading}>
<Title level={5}>Id</Title>
<Title level={5}>{t("spool.fields.id")}</Title>
<NumberField value={record?.id ?? ""} />
<Title level={5}>Registered</Title>
<Title level={5}>{t("spool.fields.registered")}</Title>
<DateField
value={dayjs.utc(record?.registered).local()}
title={dayjs.utc(record?.registered).local().format()}
format="YYYY-MM-DD HH:mm:ss"
/>
<Title level={5}>First Used</Title>
<Title level={5}>{t("spool.fields.first_used")}</Title>
<DateField
hidden={!record?.first_used}
value={dayjs.utc(record?.first_used).local()}
title={dayjs.utc(record?.first_used).local().format()}
format="YYYY-MM-DD HH:mm:ss"
/>
<Title level={5}>Last Used</Title>
<Title level={5}>{t("spool.fields.last_used")}</Title>
<DateField
hidden={!record?.last_used}
value={dayjs.utc(record?.last_used).local()}
title={dayjs.utc(record?.last_used).local().format()}
format="YYYY-MM-DD HH:mm:ss"
/>
<Title level={5}>Filament</Title>
{/* {filamentIsLoading ? (
{/* <Title level={5}>{t("spool.fields.filament_id")}</Title>
{filamentIsLoading ? (
<>Loading...</>
) : (
<>{filamentData?.data?.id}</>
)} */}
<Title level={5}>Remaining Weight</Title>
<Title level={5}>{t("spool.fields.remaining_weight")}</Title>
<NumberFieldUnit
value={record?.remaining_weight ?? ""}
unit="g"
@@ -55,7 +61,7 @@ export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
maximumFractionDigits: 1,
}}
/>
<Title level={5}>Used Weight</Title>
<Title level={5}>{t("spool.fields.used_weight")}</Title>
<NumberFieldUnit
value={record?.used_weight ?? ""}
unit="g"
@@ -63,11 +69,11 @@ export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
maximumFractionDigits: 1,
}}
/>
<Title level={5}>Location</Title>
<Title level={5}>{t("spool.fields.location")}</Title>
<TextField value={record?.location} />
<Title level={5}>Lot Nr</Title>
<Title level={5}>{t("spool.fields.lot_nr")}</Title>
<TextField value={record?.lot_nr} />
<Title level={5}>Comment</Title>
<Title level={5}>{t("spool.fields.comment")}</Title>
<TextField value={record?.comment} />
</Show>
);

14
client/src/pages/vendors/create.tsx vendored
View File

@@ -1,5 +1,5 @@
import React from "react";
import { IResourceComponentsProps } from "@refinedev/core";
import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
import { Create, useForm } from "@refinedev/antd";
import { Form, Input } from "antd";
import TextArea from "antd/es/input/TextArea";
@@ -12,17 +12,23 @@ interface CreateOrCloneProps {
export const VendorCreate: React.FC<
IResourceComponentsProps & CreateOrCloneProps
> = (props) => {
const t = useTranslate();
const { formProps, saveButtonProps, formLoading } = useForm<IVendor>();
return (
<Create
title={props.mode === "create" ? "Create Vendor" : "Clone Vendor"}
title={
props.mode === "create"
? t("vendor.titles.create")
: t("vendor.titles.clone")
}
isLoading={formLoading}
saveButtonProps={saveButtonProps}
>
<Form {...formProps} layout="vertical">
<Form.Item
label="Name"
label={t("vendor.fields.name")}
name={["name"]}
rules={[
{
@@ -33,7 +39,7 @@ export const VendorCreate: React.FC<
<Input maxLength={64} />
</Form.Item>
<Form.Item
label="Comment"
label={t("vendor.fields.comment")}
name={["comment"]}
rules={[
{

12
client/src/pages/vendors/edit.tsx vendored
View File

@@ -1,5 +1,5 @@
import React from "react";
import { IResourceComponentsProps } from "@refinedev/core";
import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
import { Edit, useForm } from "@refinedev/antd";
import { Form, Input, DatePicker } from "antd";
import dayjs from "dayjs";
@@ -7,13 +7,15 @@ import TextArea from "antd/es/input/TextArea";
import { IVendor } from "./model";
export const VendorEdit: React.FC<IResourceComponentsProps> = () => {
const t = useTranslate();
const { formProps, saveButtonProps } = useForm<IVendor>();
return (
<Edit saveButtonProps={saveButtonProps}>
<Form {...formProps} layout="vertical">
<Form.Item
label="Id"
label={t("vendor.fields.id")}
name={["id"]}
rules={[
{
@@ -24,7 +26,7 @@ export const VendorEdit: React.FC<IResourceComponentsProps> = () => {
<Input readOnly disabled />
</Form.Item>
<Form.Item
label="Registered"
label={t("vendor.fields.registered")}
name={["registered"]}
rules={[
{
@@ -38,7 +40,7 @@ export const VendorEdit: React.FC<IResourceComponentsProps> = () => {
<DatePicker disabled showTime format="YYYY-MM-DD HH:mm:ss" />
</Form.Item>
<Form.Item
label="Name"
label={t("vendor.fields.name")}
name={["name"]}
rules={[
{
@@ -49,7 +51,7 @@ export const VendorEdit: React.FC<IResourceComponentsProps> = () => {
<Input maxLength={64} />
</Form.Item>
<Form.Item
label="Comment"
label={t("vendor.fields.comment")}
name={["comment"]}
rules={[
{

32
client/src/pages/vendors/list.tsx vendored
View File

@@ -1,5 +1,9 @@
import React from "react";
import { IResourceComponentsProps, BaseRecord } from "@refinedev/core";
import {
IResourceComponentsProps,
BaseRecord,
useTranslate,
} from "@refinedev/core";
import {
useTable,
List,
@@ -19,12 +23,13 @@ import {
useStoreInitialState,
} from "../../utils/saveload";
import { EditOutlined, FilterOutlined } from "@ant-design/icons";
import i18n from "../../i18n";
import { DateColumn, SortedColumn } from "../../components/column";
dayjs.extend(utc);
export const VendorList: React.FC<IResourceComponentsProps> = () => {
const t = useTranslate();
// Load initial state
const initialState = useInitialTableState("vendorList");
@@ -106,14 +111,14 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
setCurrent(1);
}}
>
Clear Filters
{t("buttons.clearFilters")}
</Button>
<Dropdown
trigger={["click"]}
menu={{
items: allColumns.map((column) => ({
key: column,
label: i18n.t(`vendors.fields.${column}`),
label: t(`vendor.fields.${column}`),
})),
selectedKeys: showColumns,
selectable: true,
@@ -127,7 +132,7 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
}}
>
<Button type="primary" icon={<EditOutlined />}>
Hide Columns
{t("buttons.hideColumns")}
</Button>
</Dropdown>
{defaultButtons}
@@ -150,48 +155,47 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
>
{SortedColumn({
id: "id",
title: "Id",
i18ncat: "vendor",
dataSource,
tableState,
})}
{SortedColumn({
id: "name",
title: "Name",
i18ncat: "vendor",
dataSource,
tableState,
})}
{DateColumn({
id: "registered",
title: "Registered",
i18ncat: "vendor",
dataSource,
tableState,
})}
{SortedColumn({
id: "comment",
title: "Comment",
i18ncat: "vendor",
dataSource,
tableState,
})}
<Table.Column
title="Actions"
dataIndex="actions"
title={t("table.actions")}
render={(_, record: BaseRecord) => (
<Space>
<EditButton
hideText
title="Edit"
title={t("buttons.edit")}
size="small"
recordItemId={record.id}
/>
<ShowButton
hideText
title="Show"
title={t("buttons.show")}
size="small"
recordItemId={record.id}
/>
<CloneButton
hideText
title="Clone"
title={t("buttons.clone")}
size="small"
recordItemId={record.id}
/>

16
client/src/pages/vendors/show.tsx vendored
View File

@@ -1,5 +1,9 @@
import React from "react";
import { IResourceComponentsProps, useShow } from "@refinedev/core";
import {
IResourceComponentsProps,
useShow,
useTranslate,
} from "@refinedev/core";
import { Show, NumberField, DateField, TextField } from "@refinedev/antd";
import { Typography } from "antd";
import dayjs from "dayjs";
@@ -11,6 +15,8 @@ dayjs.extend(utc);
const { Title } = Typography;
export const VendorShow: React.FC<IResourceComponentsProps> = () => {
const t = useTranslate();
const { queryResult } = useShow<IVendor>();
const { data, isLoading } = queryResult;
@@ -18,17 +24,17 @@ export const VendorShow: React.FC<IResourceComponentsProps> = () => {
return (
<Show isLoading={isLoading}>
<Title level={5}>Id</Title>
<Title level={5}>{t("vendor.fields.id")}</Title>
<NumberField value={record?.id ?? ""} />
<Title level={5}>Registered</Title>
<Title level={5}>{t("vendor.fields.registered")}</Title>
<DateField
value={dayjs.utc(record?.registered).local()}
title={dayjs.utc(record?.registered).local().format()}
format="YYYY-MM-DD HH:mm:ss"
/>
<Title level={5}>Name</Title>
<Title level={5}>{t("vendor.fields.name")}</Title>
<TextField value={record?.name} />
<Title level={5}>Comment</Title>
<Title level={5}>{t("vendor.fields.comment")}</Title>
<TextField value={record?.comment} />
</Show>
);