1  import { DateField, NumberField, Show, TextField } from "@refinedev/antd";
  2  import { useShow, useTranslate } from "@refinedev/core";
  3  import { Button, Typography } from "antd";
  4  import dayjs from "dayjs";
  5  import utc from "dayjs/plugin/utc";
  6  import { useNavigate } from "react-router";
  7  import { ExtraFieldDisplay } from "../../components/extraFields";
  8  import { NumberFieldUnit } from "../../components/numberField";
  9  import SpoolIcon from "../../components/spoolIcon";
 10  import { enrichText } from "../../utils/parsing";
 11  import { EntityType, useGetFields } from "../../utils/queryFields";
 12  import { useCurrencyFormatter } from "../../utils/settings";
 13  import { IFilament } from "./model";
 14  dayjs.extend(utc);
 15  
 16  const { Title } = Typography;
 17  
 18  export const FilamentShow = () => {
 19    const t = useTranslate();
 20    const navigate = useNavigate();
 21    const extraFields = useGetFields(EntityType.filament);
 22    const currencyFormatter = useCurrencyFormatter();
 23    const { query } = useShow<IFilament>({
 24      liveMode: "auto",
 25    });
 26    const { data, isLoading } = query;
 27  
 28    const record = data?.data;
 29  
 30    const formatTitle = (item: IFilament) => {
 31      let vendorPrefix = "";
 32      if (item.vendor) {
 33        vendorPrefix = `${item.vendor.name} - `;
 34      }
 35      return t("filament.titles.show_title", {
 36        id: item.id,
 37        name: vendorPrefix + item.name,
 38        interpolation: { escapeValue: false },
 39      });
 40    };
 41  
 42    const gotoVendor = (): undefined => {
 43      const URL = `/vendor/show/${record?.vendor?.id}`;
 44      navigate(URL);
 45    };
 46  
 47    const gotoSpools = (): undefined => {
 48      const URL = `/spool#filters=[{"field":"filament.id","operator":"in","value":[${record?.id}]}]`;
 49      navigate(URL);
 50    };
 51  
 52    const colorObj = record?.multi_color_hexes
 53      ? {
 54          colors: record.multi_color_hexes.split(","),
 55          vertical: record.multi_color_direction === "longitudinal",
 56        }
 57      : record?.color_hex;
 58  
 59    return (
 60      <Show
 61        isLoading={isLoading}
 62        title={record ? formatTitle(record) : ""}
 63        headerButtons={({ defaultButtons }) => (
 64          <>
 65            <Button type="primary" onClick={gotoSpools}>
 66              {t("filament.fields.spools")}
 67            </Button>
 68            {defaultButtons}
 69          </>
 70        )}
 71      >
 72        <Title level={5}>{t("filament.fields.id")}</Title>
 73        <NumberField value={record?.id ?? ""} />
 74        <Title level={5}>{t("filament.fields.vendor")}</Title>
 75        <button
 76          onClick={gotoVendor}
 77          style={{ background: "none", border: "none", color: "blue", cursor: "pointer", paddingLeft: 0 }}
 78        >
 79          {record ? record.vendor?.name : ""}
 80        </button>
 81        <Title level={5}>{t("filament.fields.registered")}</Title>
 82        <DateField
 83          value={dayjs.utc(record?.registered).local()}
 84          title={dayjs.utc(record?.registered).local().format()}
 85          format="YYYY-MM-DD HH:mm:ss"
 86        />
 87        <Title level={5}>{t("filament.fields.name")}</Title>
 88        <TextField value={record?.name} />
 89        <Title level={5}>{t("filament.fields.color_hex")}</Title>
 90        {colorObj && <SpoolIcon color={colorObj} size="large" no_margin />}
 91        {record?.color_hex && <TextField value={`#${record?.color_hex}`} />}
 92        <Title level={5}>{t("filament.fields.material")}</Title>
 93        <TextField value={record?.material} />
 94        <Title level={5}>{t("filament.fields.price")}</Title>
 95        <TextField value={record?.price ? currencyFormatter.format(record.price) : ""} />
 96        <Title level={5}>{t("filament.fields.density")}</Title>
 97        <NumberFieldUnit
 98          value={record?.density ?? ""}
 99          unit="g/cm³"
100          options={{
101            maximumFractionDigits: 2,
102            minimumFractionDigits: 2,
103          }}
104        />
105        <Title level={5}>{t("filament.fields.diameter")}</Title>
106        <NumberFieldUnit
107          value={record?.diameter ?? ""}
108          unit="mm"
109          options={{
110            maximumFractionDigits: 2,
111            minimumFractionDigits: 2,
112          }}
113        />
114        <Title level={5}>{t("filament.fields.weight")}</Title>
115        <NumberFieldUnit
116          value={record?.weight ?? ""}
117          unit="g"
118          options={{
119            maximumFractionDigits: 1,
120            minimumFractionDigits: 1,
121          }}
122        />
123        <Title level={5}>{t("filament.fields.spool_weight")}</Title>
124        <NumberFieldUnit
125          value={record?.spool_weight ?? ""}
126          unit="g"
127          options={{
128            maximumFractionDigits: 1,
129            minimumFractionDigits: 1,
130          }}
131        />
132        <Title level={5}>{t("filament.fields.settings_extruder_temp")}</Title>
133        {!record?.settings_extruder_temp ? (
134          <TextField value="Not Set" />
135        ) : (
136          <NumberFieldUnit value={record?.settings_extruder_temp ?? ""} unit="°C" />
137        )}
138        <Title level={5}>{t("filament.fields.settings_bed_temp")}</Title>
139        {!record?.settings_bed_temp ? (
140          <TextField value="Not Set" />
141        ) : (
142          <NumberFieldUnit value={record?.settings_bed_temp ?? ""} unit="°C" />
143        )}
144        <Title level={5}>{t("filament.fields.article_number")}</Title>
145        <TextField value={record?.article_number} />
146        <Title level={5}>{t("filament.fields.external_id")}</Title>
147        <TextField value={record?.external_id} />
148        <Title level={5}>{t("filament.fields.comment")}</Title>
149        <TextField value={enrichText(record?.comment)} />
150        <Title level={4}>{t("settings.extra_fields.tab")}</Title>
151        {extraFields?.data?.map((field, index) => (
152          <ExtraFieldDisplay key={index} field={field} value={record?.extra[field.key]} />
153        ))}
154      </Show>
155    );
156  };
157  
158  export default FilamentShow;