- Clean up Card Settings

- Code refactor for maintainability
- Allow users to adjust the order of the statistics via drag and drop

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/production-board-kanban/production-board-kanban.settings.component.jsx

@@ -1,15 +1,132 @@
-// ProductionBoardKanbanSettings.jsx
 import { useMutation } from "@apollo/client";
-import { Button, Card, Checkbox, Col, Form, notification, Popover, Radio, Row } from "antd";
+import { Button, Card, Checkbox, Col, Form, notification, Popover, Radio, Row, Tabs } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_KANBAN_SETTINGS } from "../../graphql/user.queries";
+import { DragDropContext, Draggable, Droppable } from "./trello-board/dnd/lib";
+import { statisticsItems } from "./defaultKanbanSettings.js";
+
+const LayoutSettings = ({ t }) => (
+  <Card title={t("production.settings.layout")} style={{ minWidth: "50vw", marginTop: 10 }}>
+    <Row gutter={[16, 16]}>
+      {[
+        {
+          name: "orientation",
+          label: t("production.labels.orientation"),
+          options: [t("production.labels.vertical"), t("production.labels.horizontal")]
+        },
+        {
+          name: "cardSize",
+          label: t("production.labels.card_size"),
+          options: [t("production.options.small"), t("production.options.medium"), t("production.options.large")]
+        },
+        {
+          name: "compact",
+          label: t("production.labels.compact"),
+          options: [t("production.labels.tall"), t("production.labels.wide")]
+        },
+        {
+          name: "cardcolor",
+          label: t("production.labels.cardcolor"),
+          options: [t("production.labels.on"), t("production.labels.off")]
+        },
+        {
+          name: "kiosk",
+          label: t("production.labels.kiosk_mode"),
+          options: [t("production.labels.on"), t("production.labels.off")]
+        }
+      ].map(({ name, label, options }) => (
+        <Col span={4} key={name}>
+          <Form.Item name={name} label={label}>
+            <Radio.Group>
+              {options.map((option, idx) => (
+                <Radio.Button key={idx} value={idx === 0}>
+                  {option}
+                </Radio.Button>
+              ))}
+            </Radio.Group>
+          </Form.Item>
+        </Col>
+      ))}
+    </Row>
+  </Card>
+);
+
+const InformationSettings = ({ t }) => (
+  <Card title={t("production.settings.information")} style={{ minWidth: "50vw", marginTop: 10 }}>
+    <Row gutter={[16, 16]}>
+      {[
+        "model_info",
+        "ownr_nm",
+        "clm_no",
+        "ins_co_nm",
+        "employeeassignments",
+        "actual_in",
+        "scheduled_completion",
+        "ats",
+        "production_note",
+        "sublets",
+        "partsstatus"
+      ].map((item) => (
+        <Col span={4} key={item}>
+          <Form.Item name={item} valuePropName="checked">
+            <Checkbox>{t(`production.labels.${item}`)}</Checkbox>
+          </Form.Item>
+        </Col>
+      ))}
+    </Row>
+  </Card>
+);
+
+const StatisticsSettings = ({ t, statisticsOrder, setStatisticsOrder, setHasChanges }) => {
+  const onDragEnd = (result) => {
+    if (!result.destination) return;
+    const newOrder = Array.from(statisticsOrder);
+    const [movedItem] = newOrder.splice(result.source.index, 1);
+    newOrder.splice(result.destination.index, 0, movedItem);
+    setStatisticsOrder(newOrder);
+    setHasChanges(true);
+  };
+
+  return (
+    <DragDropContext onDragEnd={onDragEnd}>
+      <Droppable direction="horizontal" droppableId="statistics">
+        {(provided) => (
+          <div
+            {...provided.droppableProps}
+            ref={provided.innerRef}
+            style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}
+          >
+            {statisticsOrder.map((itemId, index) => {
+              const item = statisticsItems.find((stat) => stat.id === itemId);
+              return (
+                <Draggable key={itemId} draggableId={itemId.toString()} index={index}>
+                  {(provided) => (
+                    <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+                      <Card styles={{ body: { padding: "5px" } }} style={{ marginBottom: 8, flex: "0 1 auto" }}>
+                        <Form.Item style={{ marginBottom: 0 }} name={item.name} valuePropName="checked">
+                          <Checkbox>{t(`production.settings.statistics.${item.label}`)}</Checkbox>
+                        </Form.Item>
+                      </Card>
+                    </div>
+                  )}
+                </Draggable>
+              );
+            })}
+            {provided.placeholder}
+          </div>
+        )}
+      </Droppable>
+    </DragDropContext>
+  );
+};
 
 export default function ProductionBoardKanbanSettings({ associationSettings, parentLoading }) {
   const [form] = Form.useForm();
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
   const [hasChanges, setHasChanges] = useState(false);
+  const [statisticsOrder, setStatisticsOrder] = useState([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
 
   const [updateKbSettings] = useMutation(UPDATE_KANBAN_SETTINGS);
   const { t } = useTranslation();
@@ -17,6 +134,9 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
   useEffect(() => {
     if (associationSettings?.kanban_settings) {
       form.setFieldsValue(associationSettings.kanban_settings);
+      if (associationSettings.kanban_settings.statisticsOrder) {
+        setStatisticsOrder(associationSettings.kanban_settings.statisticsOrder);
+      }
     }
   }, [form, associationSettings]);
 
@@ -27,7 +147,7 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
     const result = await updateKbSettings({
       variables: {
         id: associationSettings?.id,
-        ks: { ...values }
+        ks: { ...values, statisticsOrder }
       }
     });
 
@@ -48,103 +168,36 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
 
   const handleValuesChange = () => setHasChanges(true);
 
-  const cardStyle = { minWidth: "50vw", marginTop: 10 };
-
-  const renderCheckboxItem = (name, labelKey) => (
-    <Col span={4} key={name}>
-      <Form.Item name={name} valuePropName="checked">
-        <Checkbox>{t(labelKey)}</Checkbox>
-      </Form.Item>
-    </Col>
-  );
-
-  const renderCardSettings = () => (
-    <>
-      <Card title={t("production.settings.layout")} style={cardStyle}>
-        <Row gutter={[16, 16]}>
-          <Col span={4}>
-            <Form.Item name="orientation" label={t("production.labels.orientation")}>
-              <Radio.Group>
-                <Radio.Button value={true}>{t("production.labels.vertical")}</Radio.Button>
-                <Radio.Button value={false}>{t("production.labels.horizontal")}</Radio.Button>
-              </Radio.Group>
-            </Form.Item>
-          </Col>
-          <Col span={4}>
-            <Form.Item name="cardSize" label={t("production.labels.card_size")}>
-              <Radio.Group>
-                <Radio.Button value="small">{t("production.options.small")}</Radio.Button>
-                <Radio.Button value="medium">{t("production.options.medium")}</Radio.Button>
-                <Radio.Button value="large">{t("production.options.large")}</Radio.Button>
-              </Radio.Group>
-            </Form.Item>
-          </Col>
-          <Col span={4}>
-            <Form.Item name="compact" label={t("production.labels.compact")}>
-              <Radio.Group>
-                <Radio.Button value={true}>{t("production.labels.tall")}</Radio.Button>
-                <Radio.Button value={false}>{t("production.labels.wide")}</Radio.Button>
-              </Radio.Group>
-            </Form.Item>
-          </Col>
-          <Col span={4}>
-            <Form.Item name="cardcolor" label={t("production.labels.cardcolor")}>
-              <Radio.Group>
-                <Radio.Button value={true}>{t("production.labels.on")}</Radio.Button>
-                <Radio.Button value={false}>{t("production.labels.off")}</Radio.Button>
-              </Radio.Group>
-            </Form.Item>
-          </Col>
-          <Col span={4}>
-            <Form.Item name="kiosk" label={t("production.labels.kiosk_mode")}>
-              <Radio.Group>
-                <Radio.Button value={true}>{t("production.labels.on")}</Radio.Button>
-                <Radio.Button value={false}>{t("production.labels.off")}</Radio.Button>
-              </Radio.Group>
-            </Form.Item>
-          </Col>
-        </Row>
-      </Card>
-      <Card title={t("production.settings.information")} style={cardStyle}>
-        <Row gutter={[16, 16]}>
-          {[
-            "model_info",
-            "ownr_nm",
-            "clm_no",
-            "ins_co_nm",
-            "employeeassignments",
-            "actual_in",
-            "scheduled_completion",
-            "ats",
-            "production_note",
-            "sublets",
-            "partsstatus"
-          ].map((item) => renderCheckboxItem(item, `production.labels.${item}`))}
-        </Row>
-      </Card>
-      <Card title={t("production.settings.statistics_title")} style={cardStyle}>
-        <Row gutter={[16, 16]}>
-          {[
-            { name: "totalHrs", label: "total_hours_in_production" },
-            { name: "totalLAB", label: "total_lab_in_production" },
-            { name: "totalLAR", label: "total_lar_in_production" },
-            { name: "totalAmountInProduction", label: "total_amount_in_production" },
-            { name: "jobsInProduction", label: "jobs_in_production" },
-            { name: "totalHrsOnBoard", label: "total_hours_on_board" },
-            { name: "totalLABOnBoard", label: "total_lab_on_board" },
-            { name: "totalLAROnBoard", label: "total_lar_on_board" },
-            { name: "jobsOnBoard", label: "total_jobs_on_board" },
-            { name: "totalAmountOnBoard", label: "total_amount_on_board" }
-          ].map((item) => renderCheckboxItem(item.name, `production.settings.statistics.${item.label}`))}
-        </Row>
-      </Card>
-    </>
-  );
-
   const overlay = (
     <Card>
       <Form form={form} onFinish={handleFinish} layout="vertical" onValuesChange={handleValuesChange}>
-        {renderCardSettings()}
+        <Tabs
+          defaultActiveKey="1"
+          items={[
+            {
+              key: "1",
+              label: t("production.settings.layout"),
+              children: <LayoutSettings t={t} />
+            },
+            {
+              key: "2",
+              label: t("production.settings.information"),
+              children: <InformationSettings t={t} />
+            },
+            {
+              key: "3",
+              label: t("production.settings.statistics_title"),
+              children: (
+                <StatisticsSettings
+                  t={t}
+                  statisticsOrder={statisticsOrder}
+                  setStatisticsOrder={setStatisticsOrder}
+                  setHasChanges={setHasChanges}
+                />
+              )
+            }
+          ]}
+        />
         <Row justify="center" style={{ marginTop: 15 }} gutter={16}>
           <Col span={8}>
             <Button block onClick={() => setOpen(false)}>