Formatted some client files

This commit is contained in:
Donkie
2023-12-17 20:36:13 +01:00
parent 83081c3ade
commit b0fbe7dea7
6 changed files with 58 additions and 47 deletions

View File

@@ -14,7 +14,7 @@ interface CreateOrCloneProps {
export const FilamentCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps> = (props) => { export const FilamentCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps> = (props) => {
const t = useTranslate(); const t = useTranslate();
const { form, formProps, saveButtonProps, formLoading, onFinish, redirect } = useForm<IFilament>(); const { form, formProps, formLoading, onFinish, redirect } = useForm<IFilament>();
if (props.mode === "clone" && formProps.initialValues) { if (props.mode === "clone" && formProps.initialValues) {
// Fix the vendor_id // Fix the vendor_id
@@ -24,10 +24,10 @@ export const FilamentCreate: React.FC<IResourceComponentsProps & CreateOrClonePr
} }
const handleSubmit = async (redirectTo: "list" | "edit" | "create") => { const handleSubmit = async (redirectTo: "list" | "edit" | "create") => {
let values = await form.validateFields(); const values = await form.validateFields();
await onFinish(values); await onFinish(values);
redirect(redirectTo, (values as IFilament).id); redirect(redirectTo, (values as IFilament).id);
} };
const { selectProps } = useSelect<IVendor>({ const { selectProps } = useSelect<IVendor>({
resource: "vendor", resource: "vendor",
@@ -40,8 +40,12 @@ export const FilamentCreate: React.FC<IResourceComponentsProps & CreateOrClonePr
isLoading={formLoading} isLoading={formLoading}
footerButtons={() => ( footerButtons={() => (
<> <>
<Button type="primary" onClick={() => handleSubmit("list")}>{t("buttons.save")}</Button> <Button type="primary" onClick={() => handleSubmit("list")}>
<Button type="primary" onClick={() => handleSubmit("create")}>{t("buttons.saveAndAdd")}</Button> {t("buttons.save")}
</Button>
<Button type="primary" onClick={() => handleSubmit("create")}>
{t("buttons.saveAndAdd")}
</Button>
</> </>
)} )}
> >

View File

@@ -7,7 +7,6 @@ import dayjs from "dayjs";
import utc from "dayjs/plugin/utc"; import utc from "dayjs/plugin/utc";
import { IFilament } from "./model"; import { IFilament } from "./model";
import { enrichText } from "../../utils/parsing"; import { enrichText } from "../../utils/parsing";
import { IVendor } from "../vendors/model";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
dayjs.extend(utc); dayjs.extend(utc);
@@ -34,19 +33,22 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
const gotoVendor = (): undefined => { const gotoVendor = (): undefined => {
const URL = `/vendor/show/${record?.vendor?.id}`; const URL = `/vendor/show/${record?.vendor?.id}`;
navigate(URL); navigate(URL);
} };
const gotoSpools = (): undefined => { const gotoSpools = (): undefined => {
const URL = `/spool#filters=[{"field":"filament.id","operator":"in","value":[${record?.id}]}]` const URL = `/spool#filters=[{"field":"filament.id","operator":"in","value":[${record?.id}]}]`;
navigate(URL); navigate(URL);
} };
return ( return (
<Show isLoading={isLoading} title={record ? formatTitle(record) : ""}> <Show isLoading={isLoading} title={record ? formatTitle(record) : ""}>
<Title level={5}>{t("filament.fields.id")}</Title> <Title level={5}>{t("filament.fields.id")}</Title>
<NumberField value={record?.id ?? ""} /> <NumberField value={record?.id ?? ""} />
<Title level={5}>{t("filament.fields.vendor")}</Title> <Title level={5}>{t("filament.fields.vendor")}</Title>
<button onClick={gotoVendor} style={{ background: 'none', border: 'none', color: 'blue', cursor: 'pointer', paddingLeft: 0 }}> <button
onClick={gotoVendor}
style={{ background: "none", border: "none", color: "blue", cursor: "pointer", paddingLeft: 0 }}
>
{record ? record.vendor?.name : ""} {record ? record.vendor?.name : ""}
</button> </button>
<Title level={5}>{t("filament.fields.registered")}</Title> <Title level={5}>{t("filament.fields.registered")}</Title>
@@ -118,7 +120,10 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
<Title level={5}>{t("filament.fields.comment")}</Title> <Title level={5}>{t("filament.fields.comment")}</Title>
<TextField value={enrichText(record?.comment)} /> <TextField value={enrichText(record?.comment)} />
<Title level={5}>{t("filament.fields.spools")}</Title> <Title level={5}>{t("filament.fields.spools")}</Title>
<button onClick={gotoSpools} style={{ background: 'none', border: 'none', color: 'blue', cursor: 'pointer', paddingLeft: 0 }}> <button
onClick={gotoSpools}
style={{ background: "none", border: "none", color: "blue", cursor: "pointer", paddingLeft: 0 }}
>
{record ? formatTitle(record) : ""} {record ? formatTitle(record) : ""}
</button> </button>
</Show> </Show>

View File

@@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react"; import React, { useState } from "react";
import { IResourceComponentsProps, useTranslate } from "@refinedev/core"; import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
import { Create, useForm, useSelect } from "@refinedev/antd"; import { Create, useForm, useSelect } from "@refinedev/antd";
import { Form, Input, DatePicker, Select, InputNumber, Radio, Divider, Button } from "antd"; import { Form, Input, DatePicker, Select, InputNumber, Radio, Divider, Button } from "antd";
@@ -9,7 +9,7 @@ import { ISpool } from "./model";
import { numberFormatter, numberParser } from "../../utils/parsing"; import { numberFormatter, numberParser } from "../../utils/parsing";
import { useSpoolmanLocations } from "../../components/otherModels"; import { useSpoolmanLocations } from "../../components/otherModels";
import { MinusOutlined, PlusOutlined } from "@ant-design/icons"; import { MinusOutlined, PlusOutlined } from "@ant-design/icons";
import '../../utils/overrides.css' import "../../utils/overrides.css";
interface CreateOrCloneProps { interface CreateOrCloneProps {
mode: "create" | "clone"; mode: "create" | "clone";
@@ -20,7 +20,7 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
const { form, formProps, formLoading, onFinish, redirect } = useForm<ISpool>({ const { form, formProps, formLoading, onFinish, redirect } = useForm<ISpool>({
redirect: false, redirect: false,
warnWhenUnsavedChanges: false warnWhenUnsavedChanges: false,
}); });
if (props.mode === "clone" && formProps.initialValues) { if (props.mode === "clone" && formProps.initialValues) {
@@ -34,16 +34,16 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
} }
const handleSubmit = async (redirectTo: "list" | "edit" | "create") => { const handleSubmit = async (redirectTo: "list" | "edit" | "create") => {
let values = await form.validateFields(); const values = await form.validateFields();
if (quantity > 1) { if (quantity > 1) {
let submit = Array(quantity).fill(values); const submit = Array(quantity).fill(values);
// queue multiple creates this way for now Refine doesn't seem to map Arrays to createMany or multiple creates like it says it does // queue multiple creates this way for now Refine doesn't seem to map Arrays to createMany or multiple creates like it says it does
submit.forEach(async r => await onFinish(r)); submit.forEach(async (r) => await onFinish(r));
} else { } else {
await onFinish(values); await onFinish(values);
} }
redirect(redirectTo, (values as ISpool).id); redirect(redirectTo, (values as ISpool).id);
} };
const { queryResult } = useSelect<IFilament>({ const { queryResult } = useSelect<IFilament>({
resource: "filament", resource: "filament",
@@ -120,11 +120,11 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
const [quantity, setQuantity] = useState(1); const [quantity, setQuantity] = useState(1);
const incrementQty = () => { const incrementQty = () => {
setQuantity(quantity + 1); setQuantity(quantity + 1);
} };
const decrementQty = () => { const decrementQty = () => {
setQuantity(quantity - 1); setQuantity(quantity - 1);
} };
return ( return (
<Create <Create
@@ -132,27 +132,25 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
isLoading={formLoading} isLoading={formLoading}
footerButtons={() => ( footerButtons={() => (
<> <>
<div style={{ display: 'flex', backgroundColor: '#141414', border: '1px solid #424242', borderRadius: '6px' }}> <div
style={{ display: "flex", backgroundColor: "#141414", border: "1px solid #424242", borderRadius: "6px" }}
>
<Button type="text" style={{ padding: 0, width: 32, height: 32 }} onClick={decrementQty}> <Button type="text" style={{ padding: 0, width: 32, height: 32 }} onClick={decrementQty}>
<MinusOutlined /> <MinusOutlined />
</Button> </Button>
<InputNumber <InputNumber name="Quantity" min={1} id="qty-input" controls={false} value={quantity}></InputNumber>
name="Quantity"
min={1}
id="qty-input"
controls={false}
value={quantity}
>
</InputNumber>
<Button type="text" style={{ padding: 0, width: 32, height: 32 }} onClick={incrementQty}> <Button type="text" style={{ padding: 0, width: 32, height: 32 }} onClick={incrementQty}>
<PlusOutlined /> <PlusOutlined />
</Button> </Button>
</div> </div>
<Button type="primary" onClick={() => handleSubmit("list")}>{t("buttons.save")}</Button> <Button type="primary" onClick={() => handleSubmit("list")}>
<Button type="primary" onClick={() => handleSubmit("create")}>{t("buttons.saveAndAdd")}</Button> {t("buttons.save")}
</Button>
<Button type="primary" onClick={() => handleSubmit("create")}>
{t("buttons.saveAndAdd")}
</Button>
</> </>
) )}
}
> >
<Form {...formProps} layout="vertical"> <Form {...formProps} layout="vertical">
<Form.Item <Form.Item

View File

@@ -12,13 +12,13 @@ interface CreateOrCloneProps {
export const VendorCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps> = (props) => { export const VendorCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps> = (props) => {
const t = useTranslate(); const t = useTranslate();
const { form, formProps, saveButtonProps, formLoading, onFinish, redirect } = useForm<IVendor>(); const { form, formProps, formLoading, onFinish, redirect } = useForm<IVendor>();
const handleSubmit = async (redirectTo: "list" | "edit" | "create") => { const handleSubmit = async (redirectTo: "list" | "edit" | "create") => {
let values = await form.validateFields(); const values = await form.validateFields();
await onFinish(values); await onFinish(values);
redirect(redirectTo, (values as IVendor).id); redirect(redirectTo, (values as IVendor).id);
} };
return ( return (
<Create <Create
@@ -26,8 +26,12 @@ export const VendorCreate: React.FC<IResourceComponentsProps & CreateOrCloneProp
isLoading={formLoading} isLoading={formLoading}
footerButtons={() => ( footerButtons={() => (
<> <>
<Button type="primary" onClick={() => handleSubmit("list")}>{t("buttons.save")}</Button> <Button type="primary" onClick={() => handleSubmit("list")}>
<Button type="primary" onClick={() => handleSubmit("create")}>{t("buttons.saveAndAdd")}</Button> {t("buttons.save")}
</Button>
<Button type="primary" onClick={() => handleSubmit("create")}>
{t("buttons.saveAndAdd")}
</Button>
</> </>
)} )}
> >