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

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