add support for multiple spool adds

client/public/locales/en/common.json

@@ -9,6 +9,7 @@
   "buttons": {
     "create": "Create",
     "save": "Save",
+    "saveAndAdd": "Save and Add",
     "logout": "Log out",
     "delete": "Delete",
     "edit": "Edit",

client/src/pages/spools/create.tsx

@@ -1,13 +1,15 @@
 import React, { useState } from "react";
 import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
 import { Create, useForm, useSelect } from "@refinedev/antd";
-import { Form, Input, DatePicker, Select, InputNumber, Radio, Divider } from "antd";
+import { Form, Input, DatePicker, Select, InputNumber, Radio, Divider, Button } from "antd";
 import dayjs from "dayjs";
 import TextArea from "antd/es/input/TextArea";
 import { IFilament } from "../filaments/model";
 import { ISpool } from "./model";
 import { numberFormatter, numberParser } from "../../utils/parsing";
 import { useSpoolmanLocations } from "../../components/otherModels";
+import { MinusOutlined, PlusOutlined } from "@ant-design/icons";
+import '../../utils/overrides.css'
 
 interface CreateOrCloneProps {
   mode: "create" | "clone";
@@ -16,8 +18,9 @@ interface CreateOrCloneProps {
 export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps> = (props) => {
   const t = useTranslate();
 
-  const { form, formProps, saveButtonProps, formLoading } = useForm<ISpool>();
-
+  const { form, formProps, formLoading, onFinish, redirect } = useForm<ISpool>({
+    redirect: false
+  });
   if (props.mode === "clone" && formProps.initialValues) {
     // Clear out the values that we don't want to clone
     formProps.initialValues.first_used = null;
@@ -28,6 +31,19 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
     formProps.initialValues.filament_id = formProps.initialValues.filament.id;
   }
 
+  const handleSubmit = async (redirectTo: "list" | "edit" | "create") => {
+    let values = await form.validateFields();
+    if (quantity > 1) {
+      let 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
+      submit.forEach(async r => await onFinish(r));
+      redirect(redirectTo, (values as ISpool).id);
+    } else {
+      await onFinish(values);
+      redirect(redirectTo, (values as ISpool).id);
+    }
+  }
+
   const { queryResult } = useSelect<IFilament>({
     resource: "filament",
   });
@@ -100,11 +116,43 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
     allLocations.push(newLocation.trim());
   }
 
+  const [quantity, setQuantity] = useState(1);
+  const incrementQty = () => {
+    setQuantity(quantity + 1);
+  }
+
+  const decrementQty = () => {
+    setQuantity(quantity - 1);
+  }
+
   return (
     <Create
       title={props.mode === "create" ? t("spool.titles.create") : t("spool.titles.clone")}
-      saveButtonProps={saveButtonProps}
       isLoading={formLoading}
+      footerButtons={() => (
+        <>
+          <InputNumber
+            name="Quantity"
+            min={1}
+            style={{ width: '50%', float: 'right', textAlign: 'center' }}
+            controls={false}
+            value={quantity}
+            addonBefore={
+              <Button type="text" style={{ padding: 0, width: 32, height: 32 }} onClick={decrementQty}>
+                <MinusOutlined />
+              </Button>
+            }
+            addonAfter={
+              <Button type="text" style={{ padding: 0, width: 32, height: 32 }} onClick={incrementQty}>
+                <PlusOutlined />
+              </Button>
+            }
+          >
+          </InputNumber>
+          <Button type="primary" onClick={() => handleSubmit("list")}>{t("buttons.save")}</Button>
+          <Button type="primary" onClick={() => handleSubmit("create")}>{t("buttons.saveAndAdd")}</Button>
+        </>
+      )}
     >
       <Form {...formProps} layout="vertical">
         <Form.Item

client/src/utils/overrides.css

@@ -0,0 +1,7 @@
+.ant-input-number-group-addon {
+    padding: 0 !important;
+}
+
+.ant-input-number-input {
+    text-align: center !important;
+}