tonym/spoolman2
1
0
Fork 0
Code Issues 19 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Client: Merged clone spool into create spool page

Browse Source
This commit is contained in:
Donkie
2023-06-25 18:00:15 +02:00
parent 3aec319b6a
commit b665a1ebe8
4 changed files with 32 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
client/src/App.tsx
View File

@@ -19,13 +19,7 @@ import { useTranslation } from "react-i18next";
import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
import { Header } from "./components/header";
import { ColorModeContextProvider } from "./contexts/color-mode";
import {
SpoolClone,
SpoolCreate,
SpoolEdit,
SpoolList,
SpoolShow,
} from "./pages/spools";
import { SpoolCreate, SpoolEdit, SpoolList, SpoolShow } from "./pages/spools";
import {
FilamentCreate,
FilamentEdit,
@@ -152,8 +146,14 @@ function App() {
/>
<Route path="/spool">
<Route index element={<SpoolList />} />
<Route path="create" element={<SpoolCreate />} />
<Route path="clone/:id" element={<SpoolClone />} />
<Route
path="create"
element={<SpoolCreate mode="create" />}
/>
<Route
path="clone/:id"
element={<SpoolCreate mode="clone" />}
/>
<Route path="edit/:id" element={<SpoolEdit />} />
<Route path="show/:id" element={<SpoolShow />} />
</Route>

130
client/src/pages/spools/clone.tsx
View File

@@ -1,130 +0,0 @@
import React from "react";
import { IResourceComponentsProps } from "@refinedev/core";
import { Create, useForm, useSelect } from "@refinedev/antd";
import { Form, Input, DatePicker, Select, InputNumber } from "antd";
import dayjs from "dayjs";
import TextArea from "antd/es/input/TextArea";
import { IFilament } from "../filaments/model";
export const SpoolClone: React.FC<IResourceComponentsProps> = () => {
const { formProps, saveButtonProps, formLoading } = useForm();
if (formProps.initialValues) {
formProps.initialValues.first_used = null;
formProps.initialValues.last_used = null;
formProps.initialValues.used_weight = 0;
formProps.initialValues.filament_id = formProps.initialValues.filament.id;
}
const { queryResult } = useSelect<IFilament>({
resource: "filament",
});
const filamentOptions = queryResult.data?.data.map((item) => {
let label;
if (item.vendor) {
label = `${item.vendor.name} - ${item.name}`;
} else {
label = item.name;
}
return {
label: label,
value: item.id,
};
});
return (
<Create
title="Clone Spool"
isLoading={formLoading}
saveButtonProps={saveButtonProps}
>
<Form {...formProps} layout="vertical">
<Form.Item
label="First Used"
name={["first_used"]}
rules={[
{
required: false,
},
]}
getValueProps={(value) => ({
value: value ? dayjs(value) : undefined,
})}
>
<DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
</Form.Item>
<Form.Item
label="Last Used"
name={["last_used"]}
rules={[
{
required: false,
},
]}
getValueProps={(value) => ({
value: value ? dayjs(value) : undefined,
})}
>
<DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
</Form.Item>
<Form.Item
label="Filament"
name={["filament_id"]}
rules={[
{
required: true,
},
]}
>
<Select options={filamentOptions} />
</Form.Item>
<Form.Item
label="Used Weight"
name={["used_weight"]}
rules={[
{
required: true,
},
]}
>
<InputNumber min={0} addonAfter="g" />
</Form.Item>
<Form.Item
label="Location"
name={["location"]}
rules={[
{
required: false,
},
]}
>
<Input maxLength={64} />
</Form.Item>
<Form.Item
label="Lot Nr"
name={["lot_nr"]}
rules={[
{
required: false,
},
]}
>
<Input maxLength={64} />
</Form.Item>
<Form.Item
label="Comment"
name={["comment"]}
rules={[
{
required: false,
},
]}
>
<TextArea maxLength={1024} />
</Form.Item>
</Form>
</Create>
);
};

26
client/src/pages/spools/create.tsx
View File

@@ -6,8 +6,24 @@ import dayjs from "dayjs";
import TextArea from "antd/es/input/TextArea";
import { IFilament } from "../filaments/model";
export const SpoolCreate: React.FC<IResourceComponentsProps> = () => {
const { formProps, saveButtonProps } = useForm();
interface CreateOrCloneProps {
mode: "create" | "clone";
}
export const SpoolCreate: React.FC<
IResourceComponentsProps & CreateOrCloneProps
> = (props: IResourceComponentsProps & CreateOrCloneProps) => {
const { formProps, saveButtonProps, formLoading } = useForm();
if (props.mode === "clone" && formProps.initialValues) {
// Clear out the values that we don't want to clone
formProps.initialValues.first_used = null;
formProps.initialValues.last_used = null;
formProps.initialValues.used_weight = 0;
// Fix the filament_id
formProps.initialValues.filament_id = formProps.initialValues.filament.id;
}
const { queryResult } = useSelect<IFilament>({
resource: "filament",
@@ -28,7 +44,11 @@ export const SpoolCreate: React.FC<IResourceComponentsProps> = () => {
});
return (
<Create saveButtonProps={saveButtonProps}>
<Create
title={props.mode === "create" ? "Create Spool" : "Clone Spool"}
saveButtonProps={saveButtonProps}
isLoading={formLoading}
>
<Form {...formProps} layout="vertical">
<Form.Item
label="First Used"

1
client/src/pages/spools/index.ts
View File

@@ -1,4 +1,3 @@
export { SpoolClone } from "./clone";
export { SpoolCreate } from "./create";
export { SpoolEdit } from "./edit";
export { SpoolList } from "./list";