- Check Point

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

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

@@ -0,0 +1,35 @@
+import { Card, Checkbox, Col, Form, Row } from "antd";
+import React from "react";
+import PropTypes from "prop-types";
+
+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>
+);
+
+InformationSettings.propTypes = {
+  t: PropTypes.func.isRequired
+};
+
+export default InformationSettings;

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

@@ -0,0 +1,71 @@
+import { Card, Col, Form, Radio, Row } from "antd";
+import React from "react";
+import PropTypes from "prop-types";
+
+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: [
+            { value: true, label: t("production.labels.vertical") },
+            { value: false, label: t("production.labels.horizontal") }
+          ]
+        },
+        {
+          name: "cardSize",
+          label: t("production.labels.card_size"),
+          options: [
+            { value: "small", label: t("production.options.small") },
+            { value: "medium", label: t("production.options.medium") },
+            { value: "large", label: t("production.options.large") }
+          ]
+        },
+        {
+          name: "compact",
+          label: t("production.labels.compact"),
+          options: [
+            { value: true, label: t("production.labels.tall") },
+            { value: false, label: t("production.labels.wide") }
+          ]
+        },
+        {
+          name: "cardcolor",
+          label: t("production.labels.cardcolor"),
+          options: [
+            { value: true, label: t("production.labels.on") },
+            { value: false, label: t("production.labels.off") }
+          ]
+        },
+        {
+          name: "kiosk",
+          label: t("production.labels.kiosk_mode"),
+          options: [
+            { value: true, label: t("production.labels.on") },
+            { value: false, label: t("production.labels.off") }
+          ]
+        }
+      ].map(({ name, label, options }) => (
+        <Col span={4} key={name}>
+          <Form.Item name={name} label={label}>
+            <Radio.Group>
+              {options.map((option) => (
+                <Radio.Button key={option.value.toString()} value={option.value}>
+                  {option.label}
+                </Radio.Button>
+              ))}
+            </Radio.Group>
+          </Form.Item>
+        </Col>
+      ))}
+    </Row>
+  </Card>
+);
+
+LayoutSettings.propTypes = {
+  t: PropTypes.func.isRequired
+};
+
+export default LayoutSettings;

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

@@ -0,0 +1,57 @@
+import { DragDropContext, Draggable, Droppable } from "../trello-board/dnd/lib/index.js";
+import { statisticsItems } from "./defaultKanbanSettings.js";
+import { Card, Checkbox, Form } from "antd";
+import React from "react";
+import PropTypes from "prop-types";
+
+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>
+  );
+};
+
+StatisticsSettings.propTypes = {
+  t: PropTypes.func.isRequired,
+  statisticsOrder: PropTypes.arrayOf(PropTypes.number).isRequired,
+  setStatisticsOrder: PropTypes.func.isRequired,
+  setHasChanges: PropTypes.func.isRequired
+};
+
+export default StatisticsSettings;

client/src/components/production-board-kanban/settings/defaultKanbanSettings.js

@@ -0,0 +1,42 @@
+const statisticsItems = [
+  { id: 0, name: "totalHrs", label: "total_hours_in_production" },
+  { id: 1, name: "totalAmountInProduction", label: "total_amount_in_production" },
+  { id: 2, name: "totalLAB", label: "total_lab_in_production" },
+  { id: 3, name: "totalLAR", label: "total_lar_in_production" },
+  { id: 4, name: "jobsInProduction", label: "jobs_in_production" },
+  { id: 5, name: "totalHrsOnBoard", label: "total_hours_on_board" },
+  { id: 6, name: "totalAmountOnBoard", label: "total_amount_on_board" },
+  { id: 7, name: "totalLABOnBoard", label: "total_lab_on_board" },
+  { id: 8, name: "totalLAROnBoard", label: "total_lar_on_board" },
+  { id: 9, name: "jobsOnBoard", label: "total_jobs_on_board" }
+];
+
+const defaultKanbanSettings = {
+  ats: true,
+  clm_no: true,
+  compact: false,
+  ownr_nm: true,
+  sublets: true,
+  ins_co_nm: true,
+  production_note: true,
+  employeeassignments: true,
+  scheduled_completion: true,
+  cardcolor: false,
+  orientation: false,
+  cardSize: "small",
+  model_info: true,
+  kiosk: false,
+  totalHrs: true,
+  totalAmountInProduction: false,
+  totalLAB: true,
+  totalLAR: true,
+  jobsInProduction: true,
+  totalHrsOnBoard: false,
+  totalLABOnBoard: false,
+  totalLAROnBoard: false,
+  jobsOnBoard: false,
+  totalAmountOnBoard: true,
+  statisticsOrder: statisticsItems.map((item) => item.id)
+};
+
+export { defaultKanbanSettings, statisticsItems };

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

@@ -0,0 +1,125 @@
+import { useMutation } from "@apollo/client";
+import { Button, Card, Col, Form, notification, Popover, Row, Tabs } from "antd";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { UPDATE_KANBAN_SETTINGS } from "../../../graphql/user.queries.js";
+import { defaultKanbanSettings } from "./defaultKanbanSettings.js";
+import LayoutSettings from "./LayoutSettings.jsx";
+import InformationSettings from "./InformationSettings.jsx";
+import StatisticsSettings from "./StatisticsSettings.jsx";
+
+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(defaultKanbanSettings.statisticsOrder);
+
+  const [updateKbSettings] = useMutation(UPDATE_KANBAN_SETTINGS);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (associationSettings?.kanban_settings) {
+      form.setFieldsValue(associationSettings.kanban_settings);
+      if (associationSettings.kanban_settings.statisticsOrder) {
+        setStatisticsOrder(associationSettings.kanban_settings.statisticsOrder);
+      }
+    }
+  }, [form, associationSettings]);
+
+  const handleFinish = async (values) => {
+    setLoading(true);
+    parentLoading(true);
+
+    const result = await updateKbSettings({
+      variables: {
+        id: associationSettings?.id,
+        ks: { ...associationSettings.kanban_settings, ...values, statisticsOrder }
+      }
+    });
+
+    if (result.errors) {
+      notification.open({
+        type: "error",
+        message: t("production.errors.settings", {
+          error: JSON.stringify(result.errors)
+        })
+      });
+    }
+
+    setOpen(false);
+    setLoading(false);
+    parentLoading(false);
+    setHasChanges(false);
+  };
+
+  const handleValuesChange = () => setHasChanges(true);
+
+  const handleRestoreDefaults = () => {
+    form.setFieldsValue({
+      ...defaultKanbanSettings,
+      statisticsOrder: defaultKanbanSettings.statisticsOrder
+    });
+    setStatisticsOrder(defaultKanbanSettings.statisticsOrder);
+    setHasChanges(true);
+  };
+
+  const overlay = (
+    <Card>
+      <Form form={form} onFinish={handleFinish} layout="vertical" onValuesChange={handleValuesChange}>
+        <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)}>
+              {t("general.actions.cancel")}
+            </Button>
+          </Col>
+          <Col span={8}>
+            <Button block onClick={handleRestoreDefaults}>
+              {t("general.actions.defaults")}
+            </Button>
+          </Col>
+          <Col span={8}>
+            <Button block onClick={form.submit} loading={loading} type="primary" disabled={!hasChanges}>
+              {t("general.actions.save")}
+            </Button>
+          </Col>
+        </Row>
+      </Form>
+    </Card>
+  );
+
+  return (
+    <Popover content={overlay} open={open} placement="topRight">
+      <Button loading={loading} onClick={() => setOpen(!open)}>
+        {t("production.settings.board_settings")}
+      </Button>
+    </Popover>
+  );
+}