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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -63,85 +63,74 @@ export default function ProductionBoardKanbanCardSettings({
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("production.labels.clm_no")} name="clm_no">
|
||||
<Radio.Group>
|
||||
<Radio value="front">Front</Radio>
|
||||
<Radio value="back">Back</Radio>
|
||||
<Radio value="off">Off</Radio>
|
||||
</Radio.Group>
|
||||
<Form.Item
|
||||
valuePropName="checked"
|
||||
label={t("production.labels.ownr_nm")}
|
||||
name="ownr_nm"
|
||||
>
|
||||
<Switch />
|
||||
</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")}
|
||||
name="ins_co_nm"
|
||||
>
|
||||
<Radio.Group>
|
||||
<Radio value="front">Front</Radio>
|
||||
<Radio value="back">Back</Radio>
|
||||
<Radio value="off">Off</Radio>
|
||||
</Radio.Group>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
valuePropName="checked"
|
||||
label={t("production.labels.laborhrs")}
|
||||
name="laborhrs"
|
||||
>
|
||||
<Radio.Group>
|
||||
<Radio value="front">Front</Radio>
|
||||
<Radio value="back">Back</Radio>
|
||||
<Radio value="off">Off</Radio>
|
||||
</Radio.Group>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
valuePropName="checked"
|
||||
label={t("production.labels.employeeassignments")}
|
||||
name="employeeassignments"
|
||||
>
|
||||
<Radio.Group>
|
||||
<Radio value="front">Front</Radio>
|
||||
<Radio value="back">Back</Radio>
|
||||
<Radio value="off">Off</Radio>
|
||||
</Radio.Group>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
valuePropName="checked"
|
||||
label={t("production.labels.scheduled_completion")}
|
||||
name="scheduled_completion"
|
||||
>
|
||||
<Radio.Group>
|
||||
<Radio value="front">Front</Radio>
|
||||
<Radio value="back">Back</Radio>
|
||||
<Radio value="off">Off</Radio>
|
||||
</Radio.Group>
|
||||
<Switch />
|
||||
</Form.Item>{" "}
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item label={t("production.labels.ats")} name="ats">
|
||||
<Radio.Group>
|
||||
<Radio value="front">Front</Radio>
|
||||
<Radio value="back">Back</Radio>
|
||||
<Radio value="off">Off</Radio>
|
||||
</Radio.Group>
|
||||
<Form.Item
|
||||
valuePropName="checked"
|
||||
label={t("production.labels.ats")}
|
||||
name="ats"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
valuePropName="checked"
|
||||
label={t("production.labels.production_note")}
|
||||
name="production_note"
|
||||
>
|
||||
<Radio.Group>
|
||||
<Radio value="front">Front</Radio>
|
||||
<Radio value="back">Back</Radio>
|
||||
<Radio value="off">Off</Radio>
|
||||
</Radio.Group>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("production.labels.alert")} name="alert">
|
||||
<Radio.Group>
|
||||
<Radio value="front">Front</Radio>
|
||||
<Radio value="back">Back</Radio>
|
||||
<Radio value="off">Off</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<Form.Item label={t("production.labels.sublets")} name="sublets">
|
||||
<Radio.Group>
|
||||
<Radio value="front">Front</Radio>
|
||||
<Radio value="back">Back</Radio>
|
||||
<Radio value="off">Off</Radio>
|
||||
</Radio.Group>
|
||||
{/* <Form.Item
|
||||
valuePropName='checked' label={t("production.labels.alert")} name="alert">
|
||||
<Switch/>
|
||||
</Form.Item> */}
|
||||
<Form.Item
|
||||
valuePropName="checked"
|
||||
label={t("production.labels.sublets")}
|
||||
name="sublets"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
@@ -2,7 +2,7 @@ import { useApolloClient } from "@apollo/client";
|
||||
import Board, { moveCard } from "@asseinfo/react-kanban";
|
||||
//import "@asseinfo/react-kanban/dist/styles.css";
|
||||
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 { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
@@ -145,22 +145,42 @@ export function ProductionBoardKanbanComponent({
|
||||
0
|
||||
)
|
||||
.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`
|
||||
.react-kanban-card-skeleton,
|
||||
.react-kanban-card,
|
||||
.react-kanban-card-adder-form {
|
||||
box-sizing: border-box;
|
||||
max-width: ${associationSettings &&
|
||||
associationSettings.kanban_settings &&
|
||||
associationSettings.kanban_settings.compact
|
||||
? "145"
|
||||
: "250"}px;
|
||||
min-width: ${associationSettings &&
|
||||
associationSettings.kanban_settings &&
|
||||
associationSettings.kanban_settings.compact
|
||||
? "145"
|
||||
: "250"}px;
|
||||
max-width: ${width}px;
|
||||
min-width: ${width}px;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user