Client: Full localization, dynamic title

2023-07-13 22:20:54 +02:00
parent e5ef306aa2
commit f21834ce2d
22 changed files with 546 additions and 264 deletions
--- a/client/src/pages/spools/create.tsx
+++ b/client/src/pages/spools/create.tsx
@@ -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={[
            {
--- a/client/src/pages/spools/edit.tsx
+++ b/client/src/pages/spools/edit.tsx
@@ -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={[
            {
--- a/client/src/pages/spools/list.tsx
+++ b/client/src/pages/spools/list.tsx
@@ -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}
              />
--- a/client/src/pages/spools/show.tsx
+++ b/client/src/pages/spools/show.tsx
@@ -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>
  );