- Patricks request for card settings to be buttons and not switches

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

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

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, Card, Col, Form, notification, Popover, Row, Checkbox, Radio, Input, Switch } from "antd";
+import { Button, Card, Checkbox, Col, Form, notification, Popover, Radio, Row } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_KANBAN_SETTINGS } from "../../graphql/user.queries";
@@ -9,19 +9,13 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
   const [hasChanges, setHasChanges] = useState(false);
-  const [orientation, setOrientation] = useState(true);
+
-  const [compact, setCompact] = useState(false);
-  const [colored, setColored] = useState(false);
   const [updateKbSettings] = useMutation(UPDATE_KANBAN_SETTINGS);
   const { t } = useTranslation();
 
   useEffect(() => {
     if (associationSettings?.kanban_settings) {
-      const { orientation = true, compact = true, cardcolor = true } = associationSettings.kanban_settings;
       form.setFieldsValue(associationSettings.kanban_settings);
-      setOrientation(orientation);
-      setCompact(compact);
-      setColored(cardcolor);
     }
   }, [form, associationSettings]);
 
@@ -32,7 +26,7 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
     const result = await updateKbSettings({
       variables: {
         id: associationSettings?.id,
-        ks: { ...values, orientation, compact, cardcolor: colored }
+        ks: { ...values }
       }
     });
 
@@ -53,26 +47,8 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
 
   const handleValuesChange = () => setHasChanges(true);
 
-  const handleCheckedChanges = (checked, callback) => {
-    callback(checked);
-    setHasChanges(true);
-  };
-
   const cardStyle = { minWidth: "50vw", marginTop: 10 };
 
-  const renderSwitchItem = (name, checked, callback, labelKey, checkedChildrenKey, unCheckedChildrenKey) => (
-    <Col span={4} key={name}>
-      <Form.Item name={name} valuePropName="checked" label={t(labelKey)}>
-        <Switch
-          checkedChildren={t(checkedChildrenKey)}
-          unCheckedChildren={t(unCheckedChildrenKey)}
-          checked={checked}
-          onChange={(checked) => handleCheckedChanges(checked, callback)}
-        />
-      </Form.Item>
-    </Col>
-  );
-
   const renderCheckboxItem = (name, labelKey) => (
     <Col span={4} key={name}>
       <Form.Item name={name} valuePropName="checked">
@@ -85,39 +61,39 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
     <>
       <Card title={t("production.settings.layout")} style={cardStyle}>
         <Row gutter={[16, 16]}>
-          {renderSwitchItem(
+          <Col span={4}>
-            "orientation",
+            <Form.Item name="orientation" label={t("production.labels.orientation")}>
-            orientation,
+              <Radio.Group>
-            setOrientation,
+                <Radio.Button value={true}>{t("production.labels.vertical")}</Radio.Button>
-            "production.labels.orientation",
+                <Radio.Button value={false}>{t("production.labels.horizontal")}</Radio.Button>
-            "production.labels.vertical",
+              </Radio.Group>
-            "production.labels.horizontal"
+            </Form.Item>
-          )}
+          </Col>
           <Col span={4}>
             <Form.Item name="cardSize" label={t("production.labels.card_size")}>
               <Radio.Group>
-                <Radio.Button value="compact">{t("production.options.small")}</Radio.Button>
+                <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>
-          {renderSwitchItem(
+          <Col span={4}>
-            "compact",
+            <Form.Item name="compact" label={t("production.labels.compact")}>
-            compact,
+              <Radio.Group>
-            setCompact,
+                <Radio.Button value={true}>{t("production.labels.tall")}</Radio.Button>
-            "production.labels.compact",
+                <Radio.Button value={false}>{t("production.labels.wide")}</Radio.Button>
-            "production.labels.tall",
+              </Radio.Group>
-            "production.labels.wide"
+            </Form.Item>
-          )}
+          </Col>
-          {renderSwitchItem(
+          <Col span={4}>
-            "cardcolor",
+            <Form.Item name="cardcolor" label={t("production.labels.cardcolor")}>
-            colored,
+              <Radio.Group>
-            setColored,
+                <Radio.Button value={true}>{t("production.labels.on")}</Radio.Button>
-            "production.labels.cardcolor",
+                <Radio.Button value={false}>{t("production.labels.off")}</Radio.Button>
-            "production.labels.on",
+              </Radio.Group>
-            "production.labels.off"
+            </Form.Item>
-          )}
+          </Col>
         </Row>
       </Card>
       <Card title={t("production.settings.information")} style={cardStyle}>
@@ -144,9 +120,6 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
     <Card>
       <Form form={form} onFinish={handleFinish} layout="vertical" onValuesChange={handleValuesChange}>
         {renderCardSettings()}
-        <Form.Item name="orientation" style={{ display: "none" }}>
-          <Input type="hidden" value={orientation} />
-        </Form.Item>
         <Row justify="center" style={{ marginTop: 15 }} gutter={16}>
           <Col span={8}>
             <Button block onClick={() => setOpen(false)}>