admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IO-1533 Kanban Customizations

Browse Source
This commit is contained in:
Patrick Fic
2021-11-17 21:47:05 -08:00
parent 5540872f62
commit 696781c857
3 changed files with 177 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

89
client/src/components/production-board-kanban/production-board-kanban.card-settings.component.jsx
View File

@@ -63,85 +63,74 @@ export default function ProductionBoardKanbanCardSettings({
> >
<Switch /> <Switch />
</Form.Item> </Form.Item>
<Form.Item label={t("production.labels.clm_no")} name="clm_no"> <Form.Item
<Radio.Group> valuePropName="checked"
<Radio value="front">Front</Radio> label={t("production.labels.ownr_nm")}
<Radio value="back">Back</Radio> name="ownr_nm"
<Radio value="off">Off</Radio> >
</Radio.Group> <Switch />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
valuePropName="checked"
label={t("production.labels.clm_no")}
name="clm_no"
>
<Switch />
</Form.Item>
<Form.Item
valuePropName="checked"
label={t("production.labels.ins_co_nm")} label={t("production.labels.ins_co_nm")}
name="ins_co_nm" name="ins_co_nm"
> >
<Radio.Group> <Switch />
<Radio value="front">Front</Radio>
<Radio value="back">Back</Radio>
<Radio value="off">Off</Radio>
</Radio.Group>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
valuePropName="checked"
label={t("production.labels.laborhrs")} label={t("production.labels.laborhrs")}
name="laborhrs" name="laborhrs"
> >
<Radio.Group> <Switch />
<Radio value="front">Front</Radio>
<Radio value="back">Back</Radio>
<Radio value="off">Off</Radio>
</Radio.Group>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
valuePropName="checked"
label={t("production.labels.employeeassignments")} label={t("production.labels.employeeassignments")}
name="employeeassignments" name="employeeassignments"
> >
<Radio.Group> <Switch />
<Radio value="front">Front</Radio>
<Radio value="back">Back</Radio>
<Radio value="off">Off</Radio>
</Radio.Group>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
valuePropName="checked"
label={t("production.labels.scheduled_completion")} label={t("production.labels.scheduled_completion")}
name="scheduled_completion" name="scheduled_completion"
> >
<Radio.Group> <Switch />
<Radio value="front">Front</Radio>
<Radio value="back">Back</Radio>
<Radio value="off">Off</Radio>
</Radio.Group>
</Form.Item>{" "} </Form.Item>{" "}
</Col> </Col>
<Col span={12}> <Col span={12}>
<Form.Item label={t("production.labels.ats")} name="ats"> <Form.Item
<Radio.Group> valuePropName="checked"
<Radio value="front">Front</Radio> label={t("production.labels.ats")}
<Radio value="back">Back</Radio> name="ats"
<Radio value="off">Off</Radio> >
</Radio.Group> <Switch />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
valuePropName="checked"
label={t("production.labels.production_note")} label={t("production.labels.production_note")}
name="production_note" name="production_note"
> >
<Radio.Group> <Switch />
<Radio value="front">Front</Radio>
<Radio value="back">Back</Radio>
<Radio value="off">Off</Radio>
</Radio.Group>
</Form.Item> </Form.Item>
<Form.Item label={t("production.labels.alert")} name="alert"> {/* <Form.Item
<Radio.Group> valuePropName='checked' label={t("production.labels.alert")} name="alert">
<Radio value="front">Front</Radio> <Switch/>
<Radio value="back">Back</Radio> </Form.Item> */}
<Radio value="off">Off</Radio> <Form.Item
</Radio.Group> valuePropName="checked"
</Form.Item> label={t("production.labels.sublets")}
<Form.Item label={t("production.labels.sublets")} name="sublets"> name="sublets"
<Radio.Group> >
<Radio value="front">Front</Radio> <Switch />
<Radio value="back">Back</Radio>
<Radio value="off">Off</Radio>
</Radio.Group>
</Form.Item> </Form.Item>
</Col> </Col>
</Row> </Row>

42
client/src/components/production-board-kanban/production-board-kanban.component.jsx
View File

@@ -2,7 +2,7 @@ import { useApolloClient } from "@apollo/client";
import Board, { moveCard } from "@asseinfo/react-kanban"; import Board, { moveCard } from "@asseinfo/react-kanban";
//import "@asseinfo/react-kanban/dist/styles.css"; //import "@asseinfo/react-kanban/dist/styles.css";
import "./production-board-kanban.styles.scss"; import "./production-board-kanban.styles.scss";
import { notification, PageHeader, Space, Statistic } from "antd"; import { Grid, notification, PageHeader, Space, Statistic } from "antd";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
@@ -145,22 +145,42 @@ export function ProductionBoardKanbanComponent({
0 0
) )
.toFixed(1); .toFixed(1);
const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
.filter((screen) => !!screen[1])
.slice(-1)[0];
const standardSizes = {
xs: "250",
sm: "250",
md: "250",
lg: "250",
xl: "250",
xxl: "250",
};
const compactSizes = {
xs: "150",
sm: "150",
md: "150",
lg: "150",
xl: "155",
xxl: "155",
};
const width = selectedBreakpoint
? associationSettings &&
associationSettings.kanban_settings &&
associationSettings.kanban_settings.compact
? compactSizes[selectedBreakpoint[0]]
: standardSizes[selectedBreakpoint[0]]
: "250";
const Container = styled.div` const Container = styled.div`
.react-kanban-card-skeleton, .react-kanban-card-skeleton,
.react-kanban-card, .react-kanban-card,
.react-kanban-card-adder-form { .react-kanban-card-adder-form {
box-sizing: border-box; box-sizing: border-box;
max-width: ${associationSettings && max-width: ${width}px;
associationSettings.kanban_settings && min-width: ${width}px;
associationSettings.kanban_settings.compact
? "145"
: "250"}px;
min-width: ${associationSettings &&
associationSettings.kanban_settings &&
associationSettings.kanban_settings.compact
? "145"
: "250"}px;
} }
`; `;