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

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