From 346d32a2bb49401b24e6dc5fa4ec3be6c8a7ad3f Mon Sep 17 00:00:00 2001
From: Patrick Fic <patrick@thinkimex.com>
Date: Wed, 13 Mar 2024 08:02:20 -0400
Subject: [PATCH] IO-2674 Add reordering arrows for responsibility centers in
 IO.

---
 ...p-info.responsibilitycenters.component.jsx | 41 +++++++++++++------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx b/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx
index 75e85e88d..ef757225f 100644
--- a/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx
+++ b/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx
@@ -5,6 +5,7 @@ import {
   Input,
   InputNumber,
   Select,
+  Space,
   Switch,
   Typography,
 } from "antd";
@@ -17,6 +18,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { useTreatments } from "@splitsoftware/splitio-react";
+import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
 
 const SelectorDiv = styled.div`
   .ant-form-item .ant-select {
@@ -345,7 +347,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
         id="costs"
       >
         <Form.List name={["md_responsibility_centers", "costs"]}>
-          {(fields, { add, remove }) => {
+          {(fields, { add, remove, move }) => {
             return (
               <div>
                 {fields.map((field, index) => (
@@ -462,12 +464,18 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                           <Input onBlur={handleBlur} />
                         </Form.Item>
                       )}
-
-                      <DeleteFilled
-                        onClick={() => {
-                          remove(field.name);
-                        }}
-                      />
+                      <Space align="center">
+                        <DeleteFilled
+                          onClick={() => {
+                            remove(field.name);
+                          }}
+                        />
+                        <FormListMoveArrows
+                          move={move}
+                          index={index}
+                          total={fields.length}
+                        />
+                      </Space>
                     </LayoutFormRow>
                   </Form.Item>
                 ))}
@@ -493,7 +501,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
         id="profits"
       >
         <Form.List name={["md_responsibility_centers", "profits"]}>
-          {(fields, { add, remove }) => {
+          {(fields, { add, remove, move }) => {
             return (
               <div>
                 {fields.map((field, index) => (
@@ -595,11 +603,18 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                           <Input onBlur={handleBlur} />
                         </Form.Item>
                       )}
-                      <DeleteFilled
-                        onClick={() => {
-                          remove(field.name);
-                        }}
-                      />
+                      <Space align="center">
+                        <DeleteFilled
+                          onClick={() => {
+                            remove(field.name);
+                          }}
+                        />
+                        <FormListMoveArrows
+                          move={move}
+                          index={index}
+                          total={fields.length}
+                        />
+                      </Space>
                     </LayoutFormRow>
                   </Form.Item>
                 ))}