Merged in feature/IO-2743-Production-Board-GridDND (pull request #1535)

Production Board Update 1

Approved-by: Allan Carr

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

@@ -30,11 +30,205 @@ const getContrastYIQ = (bgColor) =>
 
 const findEmployeeById = (employees, id) => employees.find((e) => e.id === id);
 
-const EllipsesToolTip = React.memo(({ title, children }) => (
+const EllipsesToolTip = React.memo(({ title, children, kiosk }) => {
-  <Tooltip title={title}>
+  if (kiosk) {
-    <div className="ellipses">{children}</div>
+    return <div className="ellipses no-select">{children}</div>;
-  </Tooltip>
+  }
-));
+  return (
+    <Tooltip title={title}>
+      <div className="ellipses">{children}</div>
+    </Tooltip>
+  );
+});
+
+const OwnerNameToolTip = ({ metadata, cardSettings }) =>
+  cardSettings?.ownr_nm && (
+    <Col span={24}>
+      <EllipsesToolTip title={<OwnerNameDisplay ownerObject={metadata} />} kiosk={cardSettings.kiosk}>
+        {metadata.ownr_ln || metadata.ownr_co_nm ? (
+          cardSettings.compact ? (
+            `${metadata.ownr_ln || ""} ${metadata.ownr_co_nm || ""}`
+          ) : (
+            <OwnerNameDisplay ownerObject={metadata} />
+          )
+        ) : (
+          <span>&nbsp;</span>
+        )}
+      </EllipsesToolTip>
+    </Col>
+  );
+
+const ModelInfoToolTip = ({ metadata, cardSettings }) =>
+  cardSettings?.model_info && (
+    <Col span={24}>
+      <EllipsesToolTip
+        title={`${metadata.v_model_yr || ""} ${metadata.v_make_desc || ""} ${metadata.v_model_desc || ""}`}
+        kiosk={cardSettings.kiosk}
+      >
+        {metadata.v_model_yr || metadata.v_make_desc || metadata.v_model_desc ? (
+          `${metadata.v_model_yr || ""} ${metadata.v_make_desc || ""} ${metadata.v_model_desc || ""}`
+        ) : (
+          <span>&nbsp;</span>
+        )}
+      </EllipsesToolTip>
+    </Col>
+  );
+
+const InsuranceCompanyToolTip = ({ metadata, cardSettings }) =>
+  cardSettings?.ins_co_nm && (
+    <Col span={cardSettings.compact ? 24 : 12}>
+      <EllipsesToolTip title={metadata.ins_co_nm || ""} kiosk={cardSettings.kiosk}>
+        {metadata.ins_co_nm ? metadata.ins_co_nm : <span>&nbsp;</span>}
+      </EllipsesToolTip>
+    </Col>
+  );
+
+const ClaimNumberToolTip = ({ metadata, cardSettings }) =>
+  cardSettings?.clm_no && (
+    <Col span={cardSettings.compact ? 24 : 12}>
+      <EllipsesToolTip title={metadata.clm_no || ""} kiosk={cardSettings.kiosk}>
+        {metadata.clm_no ? metadata.clm_no : <span>&nbsp;</span>}
+      </EllipsesToolTip>
+    </Col>
+  );
+
+const EmployeeAssignmentsToolTip = ({
+  metadata,
+  cardSettings,
+  employee_body,
+  employee_prep,
+  employee_refinish,
+  employee_csr
+}) =>
+  cardSettings?.employeeassignments && (
+    <Col span={24}>
+      <Row>
+        <Col span={cardSettings.compact ? 24 : 12}>
+          <EllipsesToolTip
+            title={`B: ${employee_body ? `${employee_body.first_name.substring(0, 3)} ${employee_body.last_name.charAt(0)}` : ""} ${metadata.labhrs.aggregate.sum.mod_lb_hrs || "?"}h`}
+            kiosk={cardSettings.kiosk}
+          >
+            {employee_body || metadata.labhrs.aggregate.sum.mod_lb_hrs ? (
+              `B: ${employee_body ? `${employee_body.first_name.substring(0, 3)} ${employee_body.last_name.charAt(0)}` : ""} ${metadata.labhrs.aggregate.sum.mod_lb_hrs || "?"}h`
+            ) : (
+              <span>&nbsp;</span>
+            )}
+          </EllipsesToolTip>
+        </Col>
+        <Col span={cardSettings.compact ? 24 : 12}>
+          <EllipsesToolTip
+            title={`P: ${employee_prep ? `${employee_prep.first_name.substring(0, 3)} ${employee_prep.last_name.charAt(0)}` : ""}`}
+            kiosk={cardSettings.kiosk}
+          >
+            {employee_prep ? (
+              `P: ${employee_prep ? `${employee_prep.first_name.substring(0, 3)} ${employee_prep.last_name.charAt(0)}` : ""}`
+            ) : (
+              <span>&nbsp;</span>
+            )}
+          </EllipsesToolTip>
+        </Col>
+        <Col span={cardSettings.compact ? 24 : 12}>
+          <EllipsesToolTip
+            title={`R: ${employee_refinish ? `${employee_refinish.first_name.substring(0, 3)} ${employee_refinish.last_name.charAt(0)}` : ""} ${metadata.larhrs.aggregate.sum.mod_lb_hrs || "?"}h`}
+            kiosk={cardSettings.kiosk}
+          >
+            {employee_refinish || metadata.larhrs.aggregate.sum.mod_lb_hrs ? (
+              `R: ${employee_refinish ? `${employee_refinish.first_name.substring(0, 3)} ${employee_refinish.last_name.charAt(0)}` : ""} ${metadata.larhrs.aggregate.sum.mod_lb_hrs || "?"}h`
+            ) : (
+              <span>&nbsp;</span>
+            )}
+          </EllipsesToolTip>
+        </Col>
+        <Col span={cardSettings.compact ? 24 : 12}>
+          <EllipsesToolTip
+            title={`C: ${employee_csr ? `${employee_csr.first_name} ${employee_csr.last_name}` : ""}`}
+            kiosk={cardSettings.kiosk}
+          >
+            {employee_csr ? (
+              `C: ${employee_csr ? `${employee_csr.first_name} ${employee_csr.last_name}` : ""}`
+            ) : (
+              <span>&nbsp;</span>
+            )}
+          </EllipsesToolTip>
+        </Col>
+      </Row>
+    </Col>
+  );
+
+const ActualInToolTip = ({ metadata, cardSettings }) =>
+  cardSettings?.actual_in && (
+    <Col span={cardSettings.compact ? 24 : 12}>
+      <EllipsesToolTip title={metadata.actual_in} kiosk={cardSettings.kiosk}>
+        {metadata.actual_in ? (
+          <Space>
+            <DownloadOutlined />
+            <DateTimeFormatter format="MM/DD">{metadata.actual_in}</DateTimeFormatter>
+          </Space>
+        ) : (
+          <span>&nbsp;</span>
+        )}
+      </EllipsesToolTip>
+    </Col>
+  );
+
+const ScheduledCompletionToolTip = ({ metadata, cardSettings, pastDueAlert }) =>
+  cardSettings?.scheduled_completion && (
+    <Col span={cardSettings.compact ? 24 : 12}>
+      <EllipsesToolTip title={metadata.scheduled_completion} kiosk={cardSettings.kiosk}>
+        {metadata.scheduled_completion ? (
+          <Space className={pastDueAlert}>
+            <CalendarOutlined />
+            <DateTimeFormatter format="MM/DD">{metadata.scheduled_completion}</DateTimeFormatter>
+          </Space>
+        ) : (
+          <span>&nbsp;</span>
+        )}
+      </EllipsesToolTip>
+    </Col>
+  );
+
+const AltTransportToolTip = ({ metadata, cardSettings }) =>
+  cardSettings?.ats && (
+    <Col span={12}>
+      <EllipsesToolTip title={metadata.alt_transport} kiosk={cardSettings.kiosk}>
+        {metadata.alt_transport ? metadata.alt_transport : <span>&nbsp;</span>}
+      </EllipsesToolTip>
+    </Col>
+  );
+
+const SubletsComponent = ({ metadata, cardSettings }) =>
+  cardSettings?.sublets && (
+    <Col span={12}>
+      {metadata.subletLines ? (
+        <ProductionSubletsManageComponent subletJobLines={metadata.subletLines} />
+      ) : (
+        <span>&nbsp;</span>
+      )}
+    </Col>
+  );
+
+const ProductionNoteComponent = ({ metadata, cardSettings, card }) =>
+  cardSettings?.production_note && (
+    <Col span={24} style={{ margin: "2px 0" }}>
+      {metadata?.production_vars ? (
+        <ProductionListColumnProductionNote
+          record={{
+            production_vars: metadata?.production_vars,
+            id: card?.id,
+            refetch: card?.refetch
+          }}
+        />
+      ) : (
+        <span>&nbsp;</span>
+      )}
+    </Col>
+  );
+const PartsStatusComponent = ({ metadata, cardSettings }) =>
+  cardSettings?.partsstatus && (
+    <Col span={24} style={{ textAlign: "center" }}>
+      {metadata.joblines_status ? <JobPartsQueueCount parts={metadata.joblines_status} /> : <span>&nbsp;</span>}
+    </Col>
+  );
 
 export default function ProductionBoardCard({ technician, card, bodyshop, cardSettings, clone }) {
   const { t } = useTranslation();
@@ -97,7 +291,12 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe
         />
         {metadata?.suspended && <PauseCircleOutlined className="circle-outline" key="suspended" />}
         {metadata?.iouparent && (
-          <EllipsesToolTip title={t("jobs.labels.iou")} key="iouparent" className="iouparent">
+          <EllipsesToolTip
+            title={t("jobs.labels.iou")}
+            key="iouparent"
+            className="iouparent"
+            kiosk={cardSettings.kiosk}
+          >
             <BranchesOutlined className="branches-outlined" />
           </EllipsesToolTip>
         )}
@@ -119,122 +318,30 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe
 
   const bodyContent = (
     <Row>
-      {cardSettings?.ownr_nm && (
+      <OwnerNameToolTip metadata={metadata} cardSettings={cardSettings} />
-        <Col span={24}>
+      <ModelInfoToolTip metadata={metadata} cardSettings={cardSettings} />
-          <EllipsesToolTip title={<OwnerNameDisplay ownerObject={metadata} />}>
+      <InsuranceCompanyToolTip metadata={metadata} cardSettings={cardSettings} />
-            {cardSettings.compact ? (
+      <ClaimNumberToolTip metadata={metadata} cardSettings={cardSettings} />
-              `${metadata.ownr_ln || ""} ${metadata.ownr_co_nm || ""}`
+      <EmployeeAssignmentsToolTip
-            ) : (
+        metadata={metadata}
-              <OwnerNameDisplay ownerObject={metadata} />
+        cardSettings={cardSettings}
-            )}
+        employee_body={employee_body}
-          </EllipsesToolTip>
+        employee_prep={employee_prep}
-        </Col>
+        employee_refinish={employee_refinish}
-      )}
+        employee_csr={employee_csr}
-      {cardSettings?.model_info && (
+      />
-        <Col span={24}>
+      <ActualInToolTip metadata={metadata} cardSettings={cardSettings} />
-          <EllipsesToolTip
+      <ScheduledCompletionToolTip metadata={metadata} cardSettings={cardSettings} pastDueAlert={pastDueAlert} />
-            title={`${metadata.v_model_yr || ""} ${metadata.v_make_desc || ""} ${metadata.v_model_desc || ""}`}
+      <AltTransportToolTip metadata={metadata} cardSettings={cardSettings} />
-          >
+      <SubletsComponent metadata={metadata} cardSettings={cardSettings} />
-            {`${metadata.v_model_yr || ""} ${metadata.v_make_desc || ""} ${metadata.v_model_desc || ""}`}
+      <ProductionNoteComponent metadata={metadata} cardSettings={cardSettings} card={card} />
-          </EllipsesToolTip>
+      <PartsStatusComponent metadata={metadata} cardSettings={cardSettings} />
-        </Col>
-      )}
-      {cardSettings?.ins_co_nm && metadata.ins_co_nm && (
-        <Col span={cardSettings.compact ? 24 : 12}>
-          <EllipsesToolTip title={metadata.ins_co_nm || ""}>{metadata.ins_co_nm || ""}</EllipsesToolTip>
-        </Col>
-      )}
-      {cardSettings?.clm_no && metadata.clm_no && (
-        <Col span={cardSettings.compact ? 24 : 12}>
-          <EllipsesToolTip title={metadata.clm_no || ""}>{metadata.clm_no || ""}</EllipsesToolTip>
-        </Col>
-      )}
-      {cardSettings?.employeeassignments && (
-        <Col span={24}>
-          <Row>
-            <Col span={cardSettings.compact ? 24 : 12}>
-              <EllipsesToolTip
-                title={`B: ${employee_body ? `${employee_body.first_name.substring(0, 3)} ${employee_body.last_name.charAt(0)}` : ""} ${metadata.labhrs.aggregate.sum.mod_lb_hrs || "?"}h`}
-              >
-                {`B: ${employee_body ? `${employee_body.first_name.substring(0, 3)} ${employee_body.last_name.charAt(0)}` : ""} ${metadata.labhrs.aggregate.sum.mod_lb_hrs || "?"}h`}
-              </EllipsesToolTip>
-            </Col>
-            <Col span={cardSettings.compact ? 24 : 12}>
-              <EllipsesToolTip
-                title={`P: ${employee_prep ? `${employee_prep.first_name.substring(0, 3)} ${employee_prep.last_name.charAt(0)}` : ""}`}
-              >
-                {`P: ${employee_prep ? `${employee_prep.first_name.substring(0, 3)} ${employee_prep.last_name.charAt(0)}` : ""}`}
-              </EllipsesToolTip>
-            </Col>
-            <Col span={cardSettings.compact ? 24 : 12}>
-              <EllipsesToolTip
-                title={`R: ${employee_refinish ? `${employee_refinish.first_name.substring(0, 3)} ${employee_refinish.last_name.charAt(0)}` : ""} ${metadata.larhrs.aggregate.sum.mod_lb_hrs || "?"}h`}
-              >
-                {`R: ${employee_refinish ? `${employee_refinish.first_name.substring(0, 3)} ${employee_refinish.last_name.charAt(0)}` : ""} ${metadata.larhrs.aggregate.sum.mod_lb_hrs || "?"}h`}
-              </EllipsesToolTip>
-            </Col>
-            <Col span={cardSettings.compact ? 24 : 12}>
-              <EllipsesToolTip
-                title={`C: ${employee_csr ? `${employee_csr.first_name} ${employee_csr.last_name}` : ""}`}
-              >
-                {`C: ${employee_csr ? `${employee_csr.first_name} ${employee_csr.last_name}` : ""}`}
-              </EllipsesToolTip>
-            </Col>
-          </Row>
-        </Col>
-      )}
-      {cardSettings?.actual_in && metadata.actual_in && (
-        <Col span={cardSettings.compact ? 24 : 12}>
-          <EllipsesToolTip title={metadata.actual_in}>
-            <Space>
-              <DownloadOutlined />
-              <DateTimeFormatter format="MM/DD">{metadata.actual_in}</DateTimeFormatter>
-            </Space>
-          </EllipsesToolTip>
-        </Col>
-      )}
-      {cardSettings?.scheduled_completion && metadata.scheduled_completion && (
-        <Col span={cardSettings.compact ? 24 : 12}>
-          <EllipsesToolTip title={metadata.scheduled_completion}>
-            <Space className={pastDueAlert}>
-              <CalendarOutlined />
-              <DateTimeFormatter format="MM/DD">{metadata.scheduled_completion}</DateTimeFormatter>
-            </Space>
-          </EllipsesToolTip>
-        </Col>
-      )}
-      {cardSettings?.ats && metadata.alt_transport && (
-        <Col span={12}>
-          <EllipsesToolTip title={metadata.alt_transport}>{metadata.alt_transport || ""}</EllipsesToolTip>
-        </Col>
-      )}
-      {cardSettings?.sublets && (
-        <Col span={12}>
-          <ProductionSubletsManageComponent subletJobLines={metadata.subletLines} />
-        </Col>
-      )}
-      {cardSettings?.production_note && (
-        <Col span={24}>
-          <ProductionListColumnProductionNote
-            record={{
-              production_vars: metadata?.production_vars,
-              id: card?.id,
-              refetch: card?.refetch
-            }}
-          />
-        </Col>
-      )}
-      {cardSettings?.partsstatus && (
-        <Col span={24}>
-          <JobPartsQueueCount parts={metadata.joblines_status} />
-        </Col>
-      )}
     </Row>
   );
 
   return (
     <Card
-      className="react-trello-card"
+      className={`react-trello-card ${cardSettings.kiosk ? "kiosk-mode" : ""}`}
       size="small"
       style={{
         backgroundColor: cardSettings?.cardcolor && `rgba(${bgColor.r},${bgColor.g},${bgColor.b},${bgColor.a})`,

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

@@ -72,7 +72,7 @@ function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insertAuditTr
       return prevBoardLanes;
     });
     setIsMoving(false);
-  }, [data, bodyshop.md_ro_statuses, filter]);
+  }, [data, bodyshop.md_ro_statuses, filter, statuses]);
 
   const getCardByID = useCallback((data, cardId) => {
     for (const lane of data.lanes) {
@@ -174,7 +174,7 @@ function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insertAuditTr
         setIsMoving(false);
       }
     },
-    [boardLanes, client, getCardByID, isMoving, t]
+    [boardLanes, client, getCardByID, isMoving, t, insertAuditTrail]
   );
 
   const totalHrs = useMemo(
@@ -216,7 +216,8 @@ function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insertAuditTr
             cardcolor: false,
             orientation: false,
             cardSize: "small",
-            model_info: true
+            model_info: true,
+            kiosk: false
           },
     [associationSettings]
   );

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

@@ -94,6 +94,14 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
               </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}>

client/src/translations/en_us/common.json

@@ -2759,6 +2759,7 @@
 				"settings": "Error saving board settings: {{error}}"
 			},
 			"labels": {
+        "kiosk_mode": "Kiosk Mode",
         "on": "On",
         "off": "Off",
         "wide": "Wide",
@@ -2767,7 +2768,7 @@
         "horizontal": "Horizontal",
         "orientation": "Board Orientation",
         "card_size": "Card Size",
-        "model_info": "Model Info",
+        "model_info": "Vehicle Info",
 				"actual_in": "Actual In",
 				"alert": "Alert",
 				"alertoff": "Remove alert from Job",
@@ -2794,7 +2795,7 @@
 				"laborhrs": "Labor Hours",
 				"legend": "Legend:",
 				"note": "Production Note",
-				"ownr_nm": "Owner Name",
+				"ownr_nm": "Customer Name",
 				"paintpriority": "P/P",
 				"partsstatus": "Parts Status",
 				"production_note": "Production Note",

client/src/translations/es/common.json

@@ -2742,6 +2742,7 @@
 				"settings": ""
 			},
 			"labels": {
+        "kiosk_mode": "",
         "on": "",
         "off": "",
         "wide": "",

client/src/translations/fr/common.json

@@ -2742,6 +2742,7 @@
 				"settings": ""
 			},
 			"labels": {
+        "kiosk_mode": "",
         "model_info": "",
         "actual_in": "",
 				"alert": "",