Client: Full localization, dynamic title

client/src/pages/vendors/create.tsx

@@ -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={[
             {

client/src/pages/vendors/edit.tsx

@@ -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={[
             {

client/src/pages/vendors/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,
@@ -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}
               />

client/src/pages/vendors/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 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>
   );