124 lines
4.0 KiB
TypeScript
124 lines
4.0 KiB
TypeScript
import React from "react";
|
|
import { IResourceComponentsProps, useShow, useTranslate } from "@refinedev/core";
|
|
import { Show, NumberField, DateField, TextField } from "@refinedev/antd";
|
|
import { Typography } from "antd";
|
|
import { NumberFieldUnit } from "../../components/numberField";
|
|
import dayjs from "dayjs";
|
|
import utc from "dayjs/plugin/utc";
|
|
import { ISpool } from "./model";
|
|
import { enrichText } from "../../utils/parsing";
|
|
import { IFilament } from "../filaments/model";
|
|
|
|
dayjs.extend(utc);
|
|
|
|
const { Title } = Typography;
|
|
|
|
export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
|
|
const t = useTranslate();
|
|
|
|
const { queryResult } = useShow<ISpool>();
|
|
const { data, isLoading } = queryResult;
|
|
|
|
const record = data?.data;
|
|
|
|
const formatFilament = (item: IFilament) => {
|
|
let vendorPrefix = "";
|
|
if (item.vendor) {
|
|
vendorPrefix = `${item.vendor.name} - `;
|
|
}
|
|
let name = item.name;
|
|
if (!name) {
|
|
name = `ID: ${item.id}`;
|
|
}
|
|
let material = "";
|
|
if (item.material) {
|
|
material = ` - ${item.material}`;
|
|
}
|
|
return `${vendorPrefix}${name}${material}`;
|
|
};
|
|
|
|
const filamentURL = (item: IFilament) => {
|
|
const URL = `/filament/show/${item.id}`;
|
|
return <a href={URL}>{formatFilament(item)}</a>;
|
|
};
|
|
|
|
const formatTitle = (item: ISpool) => {
|
|
return t("spool.titles.show_title", { id: item.id, name: formatFilament(item.filament) });
|
|
};
|
|
|
|
return (
|
|
<Show isLoading={isLoading} title={record ? formatTitle(record) : ""}>
|
|
<Title level={5}>{t("spool.fields.id")}</Title>
|
|
<NumberField value={record?.id ?? ""} />
|
|
<Title level={5}>{t("spool.fields.filament")}</Title>
|
|
<TextField value={record ? filamentURL(record?.filament) : ""} />
|
|
<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}>{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}>{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}>{t("spool.fields.remaining_length")}</Title>
|
|
<NumberFieldUnit
|
|
value={record?.remaining_length ?? ""}
|
|
unit="mm"
|
|
options={{
|
|
maximumFractionDigits: 1,
|
|
minimumFractionDigits: 1,
|
|
}}
|
|
/>
|
|
<Title level={5}>{t("spool.fields.used_length")}</Title>
|
|
<NumberFieldUnit
|
|
value={record?.used_length ?? ""}
|
|
unit="mm"
|
|
options={{
|
|
maximumFractionDigits: 1,
|
|
minimumFractionDigits: 1,
|
|
}}
|
|
/>
|
|
<Title level={5}>{t("spool.fields.remaining_weight")}</Title>
|
|
<NumberFieldUnit
|
|
value={record?.remaining_weight ?? ""}
|
|
unit="g"
|
|
options={{
|
|
maximumFractionDigits: 1,
|
|
minimumFractionDigits: 1,
|
|
}}
|
|
/>
|
|
<Title level={5}>{t("spool.fields.used_weight")}</Title>
|
|
<NumberFieldUnit
|
|
value={record?.used_weight ?? ""}
|
|
unit="g"
|
|
options={{
|
|
maximumFractionDigits: 1,
|
|
minimumFractionDigits: 1,
|
|
}}
|
|
/>
|
|
<Title level={5}>{t("spool.fields.location")}</Title>
|
|
<TextField value={record?.location} />
|
|
<Title level={5}>{t("spool.fields.lot_nr")}</Title>
|
|
<TextField value={record?.lot_nr} />
|
|
<Title level={5}>{t("spool.fields.comment")}</Title>
|
|
<TextField value={enrichText(record?.comment)} />
|
|
<Title level={5}>{t("spool.fields.archived")}</Title>
|
|
<TextField value={record?.archived ? t("yes") : t("no")} />
|
|
</Show>
|
|
);
|
|
};
|
|
|
|
export default SpoolShow;
|