From 3862f7f11fdc304c0c97421b71510a16ebbde2f5 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Mon, 10 Aug 2020 09:09:53 -0700
Subject: [PATCH] Added form list moving to all lists. BOD-242

---
 .../invoice-form.lines.component.jsx          |  9 +++-
 .../parts-order-modal.component.jsx           |  8 ++-
 .../shop-info/shop-info.component.jsx         | 14 ++++-
 .../shop-info.orderstatus.component.jsx       | 34 ++++++++----
 .../shop-info.rostatus.component.jsx          | 54 ++++++++++++-------
 .../shop-info.scheduling.component.jsx        |  8 ++-
 6 files changed, 93 insertions(+), 34 deletions(-)

diff --git a/client/src/components/invoice-form/invoice-form.lines.component.jsx b/client/src/components/invoice-form/invoice-form.lines.component.jsx
index ba9e906d0..015b8768e 100644
--- a/client/src/components/invoice-form/invoice-form.lines.component.jsx
+++ b/client/src/components/invoice-form/invoice-form.lines.component.jsx
@@ -4,7 +4,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import InvoiceLineSearchSelect from "../invoice-line-search-select/invoice-line-search-select.component";
-
+import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
 export default function InvoiceEnterModalLinesComponent({
   lineData,
   discount,
@@ -16,7 +16,7 @@ export default function InvoiceEnterModalLinesComponent({
 
   return (
     <Form.List name="invoicelines">
-      {(fields, { add, remove }) => {
+      {(fields, { add, remove, move }) => {
         return (
           <div className="invoice-form-lines-wrapper">
             {fields.map((field, index) => (
@@ -197,6 +197,11 @@ export default function InvoiceEnterModalLinesComponent({
                       remove(field.name);
                     }}
                   />
+                  <FormListMoveArrows
+                    move={move}
+                    index={index}
+                    total={fields.length}
+                  />
                 </div>
               </Form.Item>
             ))}
diff --git a/client/src/components/parts-order-modal/parts-order-modal.component.jsx b/client/src/components/parts-order-modal/parts-order-modal.component.jsx
index a1ddd036d..a2a87d24d 100644
--- a/client/src/components/parts-order-modal/parts-order-modal.component.jsx
+++ b/client/src/components/parts-order-modal/parts-order-modal.component.jsx
@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
+import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
 
 export default function PartsOrderModalComponent({
   vendorList,
@@ -49,7 +50,7 @@ export default function PartsOrderModalComponent({
       {t("parts_orders.labels.inthisorder")}
 
       <Form.List name={["parts_order_lines", "data"]}>
-        {(fields, { add, remove }) => {
+        {(fields, { add, remove, move }) => {
           return (
             <div>
               {fields.map((field, index) => (
@@ -101,6 +102,11 @@ export default function PartsOrderModalComponent({
                         remove(field.name);
                       }}
                     />
+                    <FormListMoveArrows
+                      move={move}
+                      index={index}
+                      total={fields.length}
+                    />
                   </div>
                 </Form.Item>
               ))}
diff --git a/client/src/components/shop-info/shop-info.component.jsx b/client/src/components/shop-info/shop-info.component.jsx
index fa48a3c00..a5e0116ff 100644
--- a/client/src/components/shop-info/shop-info.component.jsx
+++ b/client/src/components/shop-info/shop-info.component.jsx
@@ -214,7 +214,7 @@ export default function ShopInfoComponent({ form, saveLoading }) {
             </Form.Item>
           </LayoutFormRow>
           <Form.List name={["md_messaging_presets"]}>
-            {(fields, { add, remove }) => {
+            {(fields, { add, remove, move }) => {
               return (
                 <div>
                   {fields.map((field, index) => (
@@ -256,6 +256,11 @@ export default function ShopInfoComponent({ form, saveLoading }) {
                             remove(field.name);
                           }}
                         />
+                        <FormListMoveArrows
+                          move={move}
+                          index={index}
+                          total={fields.length}
+                        />
                       </div>
                     </Form.Item>
                   ))}
@@ -276,7 +281,7 @@ export default function ShopInfoComponent({ form, saveLoading }) {
           </Form.List>
 
           <Form.List name={["md_notes_presets"]}>
-            {(fields, { add, remove }) => {
+            {(fields, { add, remove, move }) => {
               return (
                 <div>
                   {fields.map((field, index) => (
@@ -318,6 +323,11 @@ export default function ShopInfoComponent({ form, saveLoading }) {
                             remove(field.name);
                           }}
                         />
+                        <FormListMoveArrows
+                          move={move}
+                          index={index}
+                          total={fields.length}
+                        />
                       </div>
                     </Form.Item>
                   ))}
diff --git a/client/src/components/shop-info/shop-info.orderstatus.component.jsx b/client/src/components/shop-info/shop-info.orderstatus.component.jsx
index 0e55aca8b..81a6b66e3 100644
--- a/client/src/components/shop-info/shop-info.orderstatus.component.jsx
+++ b/client/src/components/shop-info/shop-info.orderstatus.component.jsx
@@ -2,6 +2,7 @@ import { DeleteFilled } from "@ant-design/icons";
 import { Button, Form, Input, Select, Row, Col } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
+import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
 //TODO Fix up styles.
 export default function ShopInfoOrderStatusComponent({ form }) {
   const { t } = useTranslation();
@@ -20,13 +21,14 @@ export default function ShopInfoOrderStatusComponent({ form }) {
       <Row>
         <Col span={12}>
           <Form.List name={["md_order_statuses", "statuses"]}>
-            {(fields, { add, remove }) => {
+            {(fields, { add, remove, move }) => {
               return (
                 <div>
                   {fields.map((field, index) => (
                     <Form.Item
                       key={field.key}
-                      style={{ padding: 0, margin: 2 }}>
+                      style={{ padding: 0, margin: 2 }}
+                    >
                       <div style={{ display: "flex" }}>
                         <Form.Item
                           style={{ padding: 0, margin: 2 }}
@@ -38,7 +40,8 @@ export default function ShopInfoOrderStatusComponent({ form }) {
                               required: true,
                               message: t("general.validation.required"),
                             },
-                          ]}>
+                          ]}
+                        >
                           <Input onBlur={handleBlur} />
                         </Form.Item>
                         <DeleteFilled
@@ -46,16 +49,22 @@ export default function ShopInfoOrderStatusComponent({ form }) {
                             remove(field.name);
                           }}
                         />
+                        <FormListMoveArrows
+                          move={move}
+                          index={index}
+                          total={fields.length}
+                        />
                       </div>
                     </Form.Item>
                   ))}
                   <Form.Item>
                     <Button
-                      type='dashed'
+                      type="dashed"
                       onClick={() => {
                         add();
                       }}
-                      style={{ width: "100%" }}>
+                      style={{ width: "100%" }}
+                    >
                       {t("bodyshop.actions.newstatus")}
                     </Button>
                   </Form.Item>
@@ -73,7 +82,8 @@ export default function ShopInfoOrderStatusComponent({ form }) {
                 message: t("general.validation.required"),
               },
             ]}
-            name={["md_order_statuses", "default_bo"]}>
+            name={["md_order_statuses", "default_bo"]}
+          >
             <Select>
               {options.map((item, idx) => (
                 <Select.Option key={idx}>{item}</Select.Option>
@@ -88,7 +98,8 @@ export default function ShopInfoOrderStatusComponent({ form }) {
                 message: t("general.validation.required"),
               },
             ]}
-            name={["md_order_statuses", "default_ordered"]}>
+            name={["md_order_statuses", "default_ordered"]}
+          >
             <Select>
               {options.map((item, idx) => (
                 <Select.Option key={idx}>{item}</Select.Option>
@@ -103,7 +114,8 @@ export default function ShopInfoOrderStatusComponent({ form }) {
                 message: t("general.validation.required"),
               },
             ]}
-            name={["md_order_statuses", "default_canceled"]}>
+            name={["md_order_statuses", "default_canceled"]}
+          >
             <Select>
               {options.map((item, idx) => (
                 <Select.Option key={idx}>{item}</Select.Option>
@@ -118,7 +130,8 @@ export default function ShopInfoOrderStatusComponent({ form }) {
                 message: t("general.validation.required"),
               },
             ]}
-            name={["md_order_statuses", "default_received"]}>
+            name={["md_order_statuses", "default_received"]}
+          >
             <Select>
               {options.map((item, idx) => (
                 <Select.Option key={idx}>{item}</Select.Option>
@@ -133,7 +146,8 @@ export default function ShopInfoOrderStatusComponent({ form }) {
                 message: t("general.validation.required"),
               },
             ]}
-            name={["md_order_statuses", "default_returned"]}>
+            name={["md_order_statuses", "default_returned"]}
+          >
             <Select>
               {options.map((item, idx) => (
                 <Select.Option key={idx}>{item}</Select.Option>
diff --git a/client/src/components/shop-info/shop-info.rostatus.component.jsx b/client/src/components/shop-info/shop-info.rostatus.component.jsx
index 57c076294..cbc5c9d99 100644
--- a/client/src/components/shop-info/shop-info.rostatus.component.jsx
+++ b/client/src/components/shop-info/shop-info.rostatus.component.jsx
@@ -3,7 +3,7 @@ import { Button, Form, Input, Select, Row, Col } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-
+import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
 const SelectorDiv = styled.div`
   .ant-form-item .ant-select {
     width: 200px;
@@ -27,13 +27,14 @@ export default function ShopInfoROStatusComponent({ form }) {
         <Col span={8}>
           {t("bodyshop.labels.alljobstatuses")}
           <Form.List name={["md_ro_statuses", "statuses"]}>
-            {(fields, { add, remove }) => {
+            {(fields, { add, remove, move }) => {
               return (
                 <div>
                   {fields.map((field, index) => (
                     <Form.Item
                       key={field.key}
-                      style={{ padding: 0, margin: 2 }}>
+                      style={{ padding: 0, margin: 2 }}
+                    >
                       <div style={{ display: "flex" }}>
                         <Form.Item
                           style={{ padding: 0, margin: 2 }}
@@ -45,7 +46,8 @@ export default function ShopInfoROStatusComponent({ form }) {
                               required: true,
                               message: t("general.validation.required"),
                             },
-                          ]}>
+                          ]}
+                        >
                           <Input onBlur={handleBlur} />
                         </Form.Item>
                         <DeleteFilled
@@ -53,16 +55,22 @@ export default function ShopInfoROStatusComponent({ form }) {
                             remove(field.name);
                           }}
                         />
+                        <FormListMoveArrows
+                          move={move}
+                          index={index}
+                          total={fields.length}
+                        />
                       </div>
                     </Form.Item>
                   ))}
                   <Form.Item>
                     <Button
-                      type='dashed'
+                      type="dashed"
                       onClick={() => {
                         add();
                       }}
-                      style={{ width: "100%" }}>
+                      style={{ width: "100%" }}
+                    >
                       {t("bodyshop.actions.newstatus")}
                     </Button>
                   </Form.Item>
@@ -82,8 +90,9 @@ export default function ShopInfoROStatusComponent({ form }) {
                   message: t("general.validation.required"),
                   type: "array",
                 },
-              ]}>
-              <Select mode='multiple'>
+              ]}
+            >
+              <Select mode="multiple">
                 {options.map((item, idx) => (
                   <Select.Option key={idx} value={item}>
                     {item}
@@ -100,8 +109,9 @@ export default function ShopInfoROStatusComponent({ form }) {
                   message: t("general.validation.required"),
                   type: "array",
                 },
-              ]}>
-              <Select mode='multiple'>
+              ]}
+            >
+              <Select mode="multiple">
                 {options.map((item, idx) => (
                   <Select.Option key={idx} value={item}>
                     {item}
@@ -117,7 +127,8 @@ export default function ShopInfoROStatusComponent({ form }) {
                   message: t("general.validation.required"),
                 },
               ]}
-              name={["md_ro_statuses", "default_scheduled"]}>
+              name={["md_ro_statuses", "default_scheduled"]}
+            >
               <Select>
                 {options.map((item, idx) => (
                   <Select.Option key={idx}>{item}</Select.Option>
@@ -132,7 +143,8 @@ export default function ShopInfoROStatusComponent({ form }) {
                   message: t("general.validation.required"),
                 },
               ]}
-              name={["md_ro_statuses", "default_arrived"]}>
+              name={["md_ro_statuses", "default_arrived"]}
+            >
               <Select>
                 {options.map((item, idx) => (
                   <Select.Option key={idx}>{item}</Select.Option>
@@ -147,7 +159,8 @@ export default function ShopInfoROStatusComponent({ form }) {
                   message: t("general.validation.required"),
                 },
               ]}
-              name={["md_ro_statuses", "default_exported"]}>
+              name={["md_ro_statuses", "default_exported"]}
+            >
               <Select>
                 {options.map((item, idx) => (
                   <Select.Option key={idx}>{item}</Select.Option>
@@ -162,7 +175,8 @@ export default function ShopInfoROStatusComponent({ form }) {
                   message: t("general.validation.required"),
                 },
               ]}
-              name={["md_ro_statuses", "default_imported"]}>
+              name={["md_ro_statuses", "default_imported"]}
+            >
               <Select>
                 {options.map((item, idx) => (
                   <Select.Option key={idx}>{item}</Select.Option>
@@ -177,7 +191,8 @@ export default function ShopInfoROStatusComponent({ form }) {
                   message: t("general.validation.required"),
                 },
               ]}
-              name={["md_ro_statuses", "default_invoiced"]}>
+              name={["md_ro_statuses", "default_invoiced"]}
+            >
               <Select>
                 {options.map((item, idx) => (
                   <Select.Option key={idx}>{item}</Select.Option>
@@ -192,7 +207,8 @@ export default function ShopInfoROStatusComponent({ form }) {
                   message: t("general.validation.required"),
                 },
               ]}
-              name={["md_ro_statuses", "default_completed"]}>
+              name={["md_ro_statuses", "default_completed"]}
+            >
               <Select>
                 {options.map((item, idx) => (
                   <Select.Option key={idx}>{item}</Select.Option>
@@ -207,7 +223,8 @@ export default function ShopInfoROStatusComponent({ form }) {
                   message: t("general.validation.required"),
                 },
               ]}
-              name={["md_ro_statuses", "default_delivered"]}>
+              name={["md_ro_statuses", "default_delivered"]}
+            >
               <Select>
                 {options.map((item, idx) => (
                   <Select.Option key={idx}>{item}</Select.Option>
@@ -222,7 +239,8 @@ export default function ShopInfoROStatusComponent({ form }) {
                   message: t("general.validation.required"),
                 },
               ]}
-              name={["md_ro_statuses", "default_void"]}>
+              name={["md_ro_statuses", "default_void"]}
+            >
               <Select>
                 {options.map((item, idx) => (
                   <Select.Option key={idx}>{item}</Select.Option>
diff --git a/client/src/components/shop-info/shop-info.scheduling.component.jsx b/client/src/components/shop-info/shop-info.scheduling.component.jsx
index bc57ef454..b6084ff3e 100644
--- a/client/src/components/shop-info/shop-info.scheduling.component.jsx
+++ b/client/src/components/shop-info/shop-info.scheduling.component.jsx
@@ -3,6 +3,7 @@ import { Button, Col, Form, Input, InputNumber, Row } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 //TODO Fix up styles.
+import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
 export default function ShopInfoSchedulingComponent({ form }) {
   const { t } = useTranslation();
 
@@ -12,7 +13,7 @@ export default function ShopInfoSchedulingComponent({ form }) {
       <Row>
         <Col span={24}>
           <Form.List name={["ssbuckets"]}>
-            {(fields, { add, remove }) => {
+            {(fields, { add, remove, move }) => {
               return (
                 <div>
                   {fields.map((field, index) => (
@@ -88,6 +89,11 @@ export default function ShopInfoSchedulingComponent({ form }) {
                             remove(field.name);
                           }}
                         />
+                        <FormListMoveArrows
+                          move={move}
+                          index={index}
+                          total={fields.length}
+                        />
                       </div>
                     </Form.Item>
                   ))}