tonym/spoolman2
1
0
Fork 0
Code Issues 19 Pull Requests Actions 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

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