IO-1533 Kanban Customizations
This commit is contained in:
Patrick Fic
@@ -1,4 +1,4 @@
|
||||
import { EyeFilled, CalendarOutlined } from "@ant-design/icons";
|
||||
import { EyeFilled, CalendarOutlined, ToolFilled } from "@ant-design/icons";
|
||||
import { Card, Col, Row, Space, Typography } from "antd";
|
||||
import React, { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
@@ -16,7 +16,7 @@ export default function ProductionBoardCard(
|
||||
cardSettings
|
||||
) {
|
||||
const { t } = useTranslation();
|
||||
const [flipped, setFlipped] = useState(false);
|
||||
|
||||
let employee_body, employee_prep, employee_refinish, employee_csr;
|
||||
if (card.employee_body) {
|
||||
employee_body = bodyshop.employees.find((e) => e.id === card.employee_body);
|
||||
@@ -35,16 +35,24 @@ export default function ProductionBoardCard(
|
||||
|
||||
return (
|
||||
<Card
|
||||
className="react-kanban-card imex-kanban-card tight-antd-rows"
|
||||
onDoubleClick={() => setFlipped(!flipped)}
|
||||
>
|
||||
<div style={{ display: "flex" }}>
|
||||
<span style={{ fontWeight: "bold", flex: 1 }}>
|
||||
{card.ro_number || t("general.labels.na")}
|
||||
</span>
|
||||
<Space size="small" align="start">
|
||||
{cardSettings && cardSettings.alert && (
|
||||
<ProductionAlert record={card} key="alert" />
|
||||
className="react-kanban-card imex-kanban-card"
|
||||
size="small"
|
||||
title={
|
||||
<Space>
|
||||
<ProductionAlert record={card} key="alert" />
|
||||
<span style={{ fontWeight: "bolder" }}>
|
||||
{card.ro_number || t("general.labels.na")}
|
||||
</span>
|
||||
</Space>
|
||||
}
|
||||
extra={
|
||||
<Space>
|
||||
{cardSettings && cardSettings.sublets && (
|
||||
<Col span={12}>
|
||||
<ProductionSubletsManageComponent
|
||||
subletJobLines={card.subletLines}
|
||||
/>
|
||||
</Col>
|
||||
)}
|
||||
{technician ? (
|
||||
<Link to={`/tech/joblookup?selected=${card.id}`}>
|
||||
@@ -56,98 +64,10 @@ export default function ProductionBoardCard(
|
||||
</Link>
|
||||
)}
|
||||
</Space>
|
||||
</div>
|
||||
{flipped ? (
|
||||
<Row>
|
||||
{cardSettings && cardSettings.clm_no === "back" && (
|
||||
<Col span={cardSettings && cardSettings.compact ? 24 : 12}>
|
||||
<div className="ellipses">{card.clm_no || ""}</div>
|
||||
</Col>
|
||||
)}
|
||||
{cardSettings && cardSettings.ins_co_nm === "back" && (
|
||||
<Col span={cardSettings && cardSettings.compact ? 24 : 12}>
|
||||
<div className="ellipses">{card.ins_co_nm || ""}</div>
|
||||
</Col>
|
||||
)}
|
||||
{cardSettings && cardSettings.laborhrs === "back" && (
|
||||
<Col span={cardSettings && cardSettings.compact ? 24 : 12}>
|
||||
<Space
|
||||
size="small"
|
||||
direction={
|
||||
cardSettings && cardSettings.compact
|
||||
? "horizontal"
|
||||
: "vertical"
|
||||
}
|
||||
>
|
||||
<div>{`B: ${card.labhrs.aggregate.sum.mod_lb_hrs || "?"}`}</div>
|
||||
<div>{`R: ${card.larhrs.aggregate.sum.mod_lb_hrs || "?"}`}</div>
|
||||
</Space>
|
||||
</Col>
|
||||
)}
|
||||
{cardSettings && cardSettings.employeeassignments === "back" && (
|
||||
<Col span={12}>
|
||||
<Space
|
||||
direction="vertical"
|
||||
wrap={cardSettings && cardSettings.compact}
|
||||
>
|
||||
<div>{`B: ${
|
||||
employee_body
|
||||
? `${employee_body.first_name} ${employee_body.last_name}`
|
||||
: ""
|
||||
}`}</div>
|
||||
<div>{`P: ${
|
||||
employee_prep
|
||||
? `${employee_prep.first_name} ${employee_prep.last_name}`
|
||||
: ""
|
||||
}`}</div>
|
||||
<div>{`R: ${
|
||||
employee_refinish
|
||||
? `${employee_refinish.first_name} ${employee_refinish.last_name}`
|
||||
: ""
|
||||
}`}</div>
|
||||
<div>{`CSR: ${
|
||||
employee_csr
|
||||
? `${employee_csr.first_name} ${employee_csr.last_name}`
|
||||
: ""
|
||||
}`}</div>
|
||||
</Space>
|
||||
</Col>
|
||||
)}
|
||||
{cardSettings && cardSettings.scheduled_completion === "back" && (
|
||||
<Col span={12}>
|
||||
<Space>
|
||||
<CalendarOutlined />
|
||||
<DateTimeFormatter format="MM/DD">
|
||||
{card.scheduled_completion}
|
||||
</DateTimeFormatter>
|
||||
</Space>
|
||||
</Col>
|
||||
)}
|
||||
{cardSettings && cardSettings.ats === "back" && (
|
||||
<Col span={12}>
|
||||
<Col span={cardSettings && cardSettings.compact ? 24 : 6}>
|
||||
<div>{card.alt_transport || ""}</div>
|
||||
</Col>
|
||||
</Col>
|
||||
)}
|
||||
|
||||
{cardSettings && cardSettings.sublets === "back" && (
|
||||
<Col span={12}>
|
||||
<ProductionSubletsManageComponent
|
||||
subletJobLines={card.subletLines}
|
||||
/>
|
||||
</Col>
|
||||
)}
|
||||
{cardSettings && cardSettings.production_note === "back" && (
|
||||
<Col span={24}>
|
||||
{cardSettings && cardSettings.production_note === "back" && (
|
||||
<ProductionListColumnProductionNote record={card} />
|
||||
)}
|
||||
</Col>
|
||||
)}
|
||||
</Row>
|
||||
) : (
|
||||
<Row>
|
||||
}
|
||||
>
|
||||
<Row>
|
||||
{cardSettings && cardSettings.ownr_nm && (
|
||||
<Col span={24}>
|
||||
{cardSettings && cardSettings.compact ? (
|
||||
<div className="ellipses">{`${card.ownr_ln || ""} ${
|
||||
@@ -159,97 +79,91 @@ export default function ProductionBoardCard(
|
||||
} ${card.ownr_co_nm || ""}`}</div>
|
||||
)}
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<div className="ellipses">{`${card.v_model_yr || ""} ${
|
||||
card.v_make_desc || ""
|
||||
} ${card.v_model_desc || ""}`}</div>
|
||||
)}
|
||||
<Col span={24}>
|
||||
<div className="ellipses">{`${card.v_model_yr || ""} ${
|
||||
card.v_make_desc || ""
|
||||
} ${card.v_model_desc || ""}`}</div>
|
||||
</Col>
|
||||
{cardSettings && cardSettings.ins_co_nm && (
|
||||
<Col span={cardSettings && cardSettings.compact ? 24 : 12}>
|
||||
<div className="ellipses">{card.ins_co_nm || ""}</div>
|
||||
</Col>
|
||||
)}
|
||||
{cardSettings && cardSettings.clm_no && (
|
||||
<Col span={cardSettings && cardSettings.compact ? 24 : 12}>
|
||||
<div className="ellipses">{card.clm_no || ""}</div>
|
||||
</Col>
|
||||
)}
|
||||
|
||||
{cardSettings && cardSettings.clm_no === "front" && (
|
||||
<Col span={cardSettings && cardSettings.compact ? 24 : 12}>
|
||||
<div className="ellipses">{card.clm_no || ""}</div>
|
||||
</Col>
|
||||
)}
|
||||
{cardSettings && cardSettings.ins_co_nm === "front" && (
|
||||
<Col span={cardSettings && cardSettings.compact ? 24 : 12}>
|
||||
<div className="ellipses">{card.ins_co_nm || ""}</div>
|
||||
</Col>
|
||||
)}
|
||||
{cardSettings && cardSettings.laborhrs === "front" && (
|
||||
<Col span={cardSettings && cardSettings.compact ? 24 : 12}>
|
||||
<Space
|
||||
size="small"
|
||||
direction={
|
||||
cardSettings && cardSettings.compact
|
||||
? "horizontal"
|
||||
: "vertical"
|
||||
}
|
||||
>
|
||||
<div>{`B: ${card.labhrs.aggregate.sum.mod_lb_hrs || "?"}`}</div>
|
||||
<div>{`R: ${card.larhrs.aggregate.sum.mod_lb_hrs || "?"}`}</div>
|
||||
</Space>
|
||||
</Col>
|
||||
)}
|
||||
{cardSettings && cardSettings.employeeassignments === "front" && (
|
||||
<Col span={24}>
|
||||
<Space
|
||||
direction="vertical"
|
||||
wrap={cardSettings && cardSettings.compact}
|
||||
>
|
||||
<div>{`B: ${
|
||||
employee_body
|
||||
? `${employee_body.first_name} ${employee_body.last_name}`
|
||||
: ""
|
||||
}`}</div>
|
||||
<div>{`P: ${
|
||||
employee_prep
|
||||
? `${employee_prep.first_name} ${employee_prep.last_name}`
|
||||
: ""
|
||||
}`}</div>
|
||||
<div>{`R: ${
|
||||
employee_refinish
|
||||
? `${employee_refinish.first_name} ${employee_refinish.last_name}`
|
||||
: ""
|
||||
}`}</div>
|
||||
<div>{`CSR: ${
|
||||
employee_csr
|
||||
? `${employee_csr.first_name} ${employee_csr.last_name}`
|
||||
: ""
|
||||
}`}</div>
|
||||
</Space>
|
||||
</Col>
|
||||
)}
|
||||
{cardSettings && cardSettings.scheduled_completion === "front" && (
|
||||
<Col span={12}>
|
||||
<Space>
|
||||
<CalendarOutlined />
|
||||
<DateTimeFormatter format="MM/DD">
|
||||
{card.scheduled_completion}
|
||||
</DateTimeFormatter>
|
||||
</Space>
|
||||
</Col>
|
||||
)}
|
||||
{cardSettings && cardSettings.ats === "front" && (
|
||||
<Col span={12}>
|
||||
<div>{card.alt_transport || ""}</div>
|
||||
</Col>
|
||||
)}
|
||||
{cardSettings && cardSettings.sublets === "front" && (
|
||||
<Col span={12}>
|
||||
<ProductionSubletsManageComponent
|
||||
subletJobLines={card.subletLines}
|
||||
/>
|
||||
</Col>
|
||||
)}
|
||||
{cardSettings && cardSettings.production_note === "front" && (
|
||||
<Col span={24}>
|
||||
{cardSettings && cardSettings.production_note === "front" && (
|
||||
<ProductionListColumnProductionNote record={card} />
|
||||
)}
|
||||
</Col>
|
||||
)}
|
||||
</Row>
|
||||
)}
|
||||
{cardSettings && cardSettings.employeeassignments && (
|
||||
<Col span={24}>
|
||||
<Row>
|
||||
<Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`B: ${
|
||||
employee_body
|
||||
? `${employee_body.first_name} ${employee_body.last_name}`
|
||||
: ""
|
||||
}`}</Col>
|
||||
<Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`P: ${
|
||||
employee_prep
|
||||
? `${employee_prep.first_name} ${employee_prep.last_name}`
|
||||
: ""
|
||||
}`}</Col>
|
||||
<Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`R: ${
|
||||
employee_refinish
|
||||
? `${employee_refinish.first_name} ${employee_refinish.last_name}`
|
||||
: ""
|
||||
}`}</Col>
|
||||
{/* <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`C: ${
|
||||
employee_csr
|
||||
? `${employee_csr.first_name} ${employee_csr.last_name}`
|
||||
: ""
|
||||
}`}</Col> */}
|
||||
</Row>
|
||||
</Col>
|
||||
)}
|
||||
{cardSettings && cardSettings.laborhrs && (
|
||||
<Col span={24}>
|
||||
<Row>
|
||||
<Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`B: ${
|
||||
card.labhrs.aggregate.sum.mod_lb_hrs || "?"
|
||||
} hrs`}</Col>
|
||||
<Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`R: ${
|
||||
card.larhrs.aggregate.sum.mod_lb_hrs || "?"
|
||||
} hrs`}</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
)}
|
||||
{cardSettings && cardSettings.scheduled_completion && (
|
||||
<Col span={cardSettings && cardSettings.compact ? 24 : 12}>
|
||||
<Space>
|
||||
<CalendarOutlined />
|
||||
<DateTimeFormatter format="MM/DD">
|
||||
{card.scheduled_completion}
|
||||
</DateTimeFormatter>
|
||||
</Space>
|
||||
</Col>
|
||||
)}
|
||||
{cardSettings && cardSettings.ats && (
|
||||
<Col span={cardSettings && cardSettings.compact ? 24 : 12}>
|
||||
<div>{card.alt_transport || ""}</div>
|
||||
</Col>
|
||||
)}
|
||||
{cardSettings && cardSettings.sublets && (
|
||||
<Col span={12}>
|
||||
<ProductionSubletsManageComponent
|
||||
subletJobLines={card.subletLines}
|
||||
/>
|
||||
</Col>
|
||||
)}
|
||||
{cardSettings && cardSettings.production_note && (
|
||||
<Col span={24}>
|
||||
{cardSettings && cardSettings.production_note && (
|
||||
<ProductionListColumnProductionNote record={card} />
|
||||
)}
|
||||
</Col>
|
||||
)}
|
||||
</Row>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user