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

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