Client: Full localization, dynamic title

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

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