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

import { useMutation } from "@apollo/client";
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();

  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: { ...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 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={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>
  );
}