diff --git a/client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx b/client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx index 99fbc4f99..4ca080981 100644 --- a/client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx +++ b/client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx @@ -29,7 +29,7 @@ const cardColor = (ssbuckets, totalHrs) => { const getContrastYIQ = (bgColor) => (bgColor.r * 299 + bgColor.g * 587 + bgColor.b * 114) / 1000 >= 128 ? "black" : "white"; -export default function ProductionBoardCard({ technician, card, bodyshop, cardSettings }) { +export default function ProductionBoardCard({ technician, card, bodyshop, cardSettings, clone }) { const { t } = useTranslation(); const { metadata } = card; @@ -73,9 +73,7 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe size="small" style={{ backgroundColor: cardSettings?.cardcolor && `rgba(${bgColor.r},${bgColor.g},${bgColor.b},${bgColor.a})`, - color: cardSettings?.cardcolor && contrastYIQ, - maxWidth: "250px", - margin: "5px" + color: cardSettings?.cardcolor && contrastYIQ }} title={ @@ -99,96 +97,98 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe } > - - {cardSettings?.ownr_nm && ( - - {cardSettings.compact ? ( -
{`${metadata.ownr_ln || ""} ${metadata.ownr_co_nm || ""}`}
- ) : ( -
- -
- )} - - )} - {cardSettings?.model_info && ( - -
{`${metadata.v_model_yr || ""} ${metadata.v_make_desc || ""} ${metadata.v_model_desc || ""}`}
- - )} - {cardSettings?.ins_co_nm && metadata.ins_co_nm && ( - -
{metadata.ins_co_nm || ""}
- - )} - {cardSettings?.clm_no && metadata.clm_no && ( - -
{metadata.clm_no || ""}
- - )} - {cardSettings?.employeeassignments && ( - - - {`B: ${ - employee_body ? `${employee_body.first_name.substr(0, 3)} ${employee_body.last_name.charAt(0)}` : "" - } ${metadata.labhrs.aggregate.sum.mod_lb_hrs || "?"}h`} - {`P: ${ - employee_prep ? `${employee_prep.first_name.substr(0, 3)} ${employee_prep.last_name.charAt(0)}` : "" - }`} - {`R: ${ - employee_refinish - ? `${employee_refinish.first_name.substr(0, 3)} ${employee_refinish.last_name.charAt(0)}` - : "" - } ${metadata.larhrs.aggregate.sum.mod_lb_hrs || "?"}h`} - {`C: ${ - employee_csr ? `${employee_csr.first_name} ${employee_csr.last_name}` : "" - }`} - - - )} - {cardSettings?.actual_in && metadata.actual_in && ( - - - - {metadata.actual_in} - - - )} - {cardSettings?.scheduled_completion && metadata.scheduled_completion && ( - - - - {metadata.scheduled_completion} - - - )} - {cardSettings?.ats && metadata.alt_transport && ( - -
{metadata.alt_transport || ""}
- - )} - {cardSettings?.sublets && ( - - - - )} - {cardSettings?.production_note && ( - - - - )} - {cardSettings?.partsstatus && ( - - - - )} -
+ {!clone && ( + + {cardSettings?.ownr_nm && ( + + {cardSettings.compact ? ( +
{`${metadata.ownr_ln || ""} ${metadata.ownr_co_nm || ""}`}
+ ) : ( +
+ +
+ )} + + )} + {cardSettings?.model_info && ( + +
{`${metadata.v_model_yr || ""} ${metadata.v_make_desc || ""} ${metadata.v_model_desc || ""}`}
+ + )} + {cardSettings?.ins_co_nm && metadata.ins_co_nm && ( + +
{metadata.ins_co_nm || ""}
+ + )} + {cardSettings?.clm_no && metadata.clm_no && ( + +
{metadata.clm_no || ""}
+ + )} + {cardSettings?.employeeassignments && ( + + + {`B: ${ + employee_body ? `${employee_body.first_name.substr(0, 3)} ${employee_body.last_name.charAt(0)}` : "" + } ${metadata.labhrs.aggregate.sum.mod_lb_hrs || "?"}h`} + {`P: ${ + employee_prep ? `${employee_prep.first_name.substr(0, 3)} ${employee_prep.last_name.charAt(0)}` : "" + }`} + {`R: ${ + employee_refinish + ? `${employee_refinish.first_name.substr(0, 3)} ${employee_refinish.last_name.charAt(0)}` + : "" + } ${metadata.larhrs.aggregate.sum.mod_lb_hrs || "?"}h`} + {`C: ${ + employee_csr ? `${employee_csr.first_name} ${employee_csr.last_name}` : "" + }`} + + + )} + {cardSettings?.actual_in && metadata.actual_in && ( + + + + {metadata.actual_in} + + + )} + {cardSettings?.scheduled_completion && metadata.scheduled_completion && ( + + + + {metadata.scheduled_completion} + + + )} + {cardSettings?.ats && metadata.alt_transport && ( + +
{metadata.alt_transport || ""}
+ + )} + {cardSettings?.sublets && ( + + + + )} + {cardSettings?.production_note && ( + + + + )} + {cardSettings?.partsstatus && ( + + + + )} +
+ )} ); } diff --git a/client/src/components/production-board-kanban/production-board-kanban.component.jsx b/client/src/components/production-board-kanban/production-board-kanban.component.jsx index 0d8172585..799e9ba60 100644 --- a/client/src/components/production-board-kanban/production-board-kanban.component.jsx +++ b/client/src/components/production-board-kanban/production-board-kanban.component.jsx @@ -63,7 +63,7 @@ export function ProductionBoardKanbanComponent({ }, [associationSettings]); useEffect(() => { - const newBoardData = createBoardData( + const newBoardData = createFakeBoardData( [...bodyshop.md_ro_statuses.production_statuses, ...(bodyshop.md_ro_statuses.additional_board_statuses || [])], data, filter @@ -205,7 +205,7 @@ export function ProductionBoardKanbanComponent({ const Header = useCallback( ({ title }) => (
- {title} + {title.substring(0, 10)}
), [] diff --git a/client/src/components/production-board-kanban/production-board-kanban.utils.js b/client/src/components/production-board-kanban/production-board-kanban.utils.js index a10446928..61519d007 100644 --- a/client/src/components/production-board-kanban/production-board-kanban.utils.js +++ b/client/src/components/production-board-kanban/production-board-kanban.utils.js @@ -1,5 +1,5 @@ import { groupBy } from "lodash"; -import fakeData from "./testData/board600.json"; +import fakeData from "./testData/board1200.json"; const sortByParentId = (arr) => { // return arr.reduce((accumulator, currentValue) => { diff --git a/client/src/components/trello-board/controllers/BoardContainer.jsx b/client/src/components/trello-board/controllers/BoardContainer.jsx index 849932b82..4cb642a05 100644 --- a/client/src/components/trello-board/controllers/BoardContainer.jsx +++ b/client/src/components/trello-board/controllers/BoardContainer.jsx @@ -1,6 +1,6 @@ import React, { useCallback, useEffect, useState, useMemo } from "react"; import { useDispatch, useSelector } from "react-redux"; -import { DragDropContext, Droppable } from "../dnd/lib"; +import { DragDropContext } from "../dnd/lib"; import PropTypes from "prop-types"; import pick from "lodash/pick"; import isEqual from "lodash/isEqual"; @@ -20,16 +20,6 @@ import * as actions from "../../../redux/trello/trello.actions.js"; * @param {boolean} props.draggable - Whether the board is draggable * @param {Object} props.style - The CSS styles to apply to the board * @param {Function} props.onDataChange - Callback function when the board data changes - * @param {Function} props.onCardAdd - Callback function when a card is added - * @param {Function} props.onCardUpdate - Callback function when a card is updated - * @param {Function} props.onCardClick - Callback function when a card is clicked - * @param {Function} props.onBeforeCardDelete - Callback function before a card is deleted - * @param {Function} props.onCardDelete - Callback function when a card is deleted - * @param {Function} props.onLaneScroll - Callback function when a lane is scrolled - * @param {Function} props.onLaneClick - Callback function when a lane is clicked - * @param {Function} props.onLaneAdd - Callback function when a lane is added - * @param {Function} props.onLaneDelete - Callback function when a lane is deleted - * @param {Function} props.onLaneUpdate - Callback function when a lane is updated * @param {Function} props.onDragEnd - Callback function when a drag ends * @param {boolean} props.editable - Whether the board is editable * @param {boolean} props.canAddLanes - Whether lanes can be added to the board @@ -48,16 +38,6 @@ const BoardContainer = ({ draggable = false, style, onDataChange = () => {}, - onCardAdd = () => {}, - onCardUpdate = () => {}, - onCardClick = () => {}, - onBeforeCardDelete = () => {}, - onCardDelete = () => {}, - onLaneScroll = () => {}, - onLaneClick = () => {}, - onLaneAdd = () => {}, - onLaneDelete = () => {}, - onLaneUpdate = () => {}, onDragEnd = () => {}, editable = false, canAddLanes = false, @@ -68,7 +48,6 @@ const BoardContainer = ({ cardStyle, ...otherProps }) => { - const [addLaneMode, setAddLaneMode] = useState(false); const [isDragging, setIsDragging] = useState(false); const [isProcessing, setIsProcessing] = useState(false); @@ -126,15 +105,9 @@ const BoardContainer = ({ } }, [currentReducerData, reducerData, onDataChange]); - const onDragUpdate = () => {}; - const onDragStart = useCallback(() => { setIsDragging(true); - }, []); - - const onBeforeDragStart = () => {}; - - const onBeforeCapture = () => {}; + }, [setIsDragging]); const getCardDetails = useCallback( (laneId, cardIndex) => { @@ -143,23 +116,6 @@ const BoardContainer = ({ [currentReducerData] ); - const hideEditableLane = useCallback(() => { - setAddLaneMode(false); - }, []); - - const showEditableLane = useCallback(() => { - setAddLaneMode(true); - }, []); - - const addNewLane = useCallback( - (params) => { - hideEditableLane(); - dispatch(actions.addLane(params)); - onLaneAdd(params); - }, - [dispatch, hideEditableLane, onLaneAdd] - ); - const passThroughProps = useMemo( () => pick( @@ -170,16 +126,6 @@ const BoardContainer = ({ draggable, style, onDataChange, - onCardAdd, - onCardUpdate, - onCardClick, - onBeforeCardDelete, - onCardDelete, - onLaneScroll, - onLaneClick, - onLaneAdd, - onLaneDelete, - onLaneUpdate, editable, canAddLanes, laneStyle, @@ -220,16 +166,7 @@ const BoardContainer = ({ draggable, style, onDataChange, - onCardAdd, - onCardUpdate, - onCardClick, - onBeforeCardDelete, - onCardDelete, - onLaneScroll, - onLaneClick, - onLaneAdd, - onLaneDelete, - onLaneUpdate, + editable, canAddLanes, laneStyle, @@ -272,14 +209,7 @@ const BoardContainer = ({ return ( - + {currentReducerData.lanes.map((lane, index) => { const { id, droppable, ...laneOtherProps } = lane; return ( @@ -303,15 +233,6 @@ const BoardContainer = ({ /> ); })} - {canAddLanes && ( - - {editable && !addLaneMode ? ( - - ) : ( - addLaneMode && - )} - - )} diff --git a/client/src/components/trello-board/controllers/Lane.jsx b/client/src/components/trello-board/controllers/Lane.jsx index becb4a1cb..5e26d60ea 100644 --- a/client/src/components/trello-board/controllers/Lane.jsx +++ b/client/src/components/trello-board/controllers/Lane.jsx @@ -44,9 +44,6 @@ const Lane = ({ canAddLanes = false, hideCardDeleteIcon = false, components = {}, - getCardDetails, - handleDragStart = () => {}, - handleDragEnd = () => {}, orientation = "vertical", className, currentPage, @@ -93,11 +90,11 @@ const Lane = ({ const showEditableCard = useCallback(() => { setAddCardMode(true); - }, []); + }, [setAddCardMode]); const hideEditableCard = useCallback(() => { setAddCardMode(false); - }, []); + }, [setAddCardMode]); const addNewCard = useCallback( (params) => { @@ -188,14 +185,7 @@ const Lane = ({ ); const ItemWrapper = ({ children, ...props }) => ( -
+
{children}
); @@ -206,7 +196,11 @@ const Lane = ({ const commonProps = { useWindowScroll: true, - data: renderedCards + data: renderedCards, + overscan: { + main: 22, + reverse: 22 + } }; const componentProps = @@ -222,36 +216,21 @@ const Lane = ({ ref={ref} {...props} style={{ - display: "flex", - flexWrap: "wrap", ...style }} > {children}
)), - Item: ({ children, ...props }) => ( -
- {children} -
- ) + Item: ({ children, ...props }) =>
{children}
}, itemContent: (index, item) => {renderDraggable(index, item)} } : { ...commonProps, - overscan: { - main: 22, - reverse: 22 - }, components: { Item: HeightPreservingItem }, - itemContent: (index, item) => renderDraggable(index, item) + itemContent: (index, item) => renderDraggable(index, item), + scrollerRef: provided.innerRef }; const finalComponentProps = collapsed ? {} : componentProps; return ( @@ -282,7 +261,12 @@ const Lane = ({ direction={orientation === "horizontal" ? "vertical" : "grid"} mode="virtual" renderClone={(provided, snapshot, rubric) => ( - + )} > {(provided) => renderDroppable(provided, renderedCards)} @@ -327,9 +311,6 @@ const Lane = ({ canAddLanes, hideCardDeleteIcon, components, - getCardDetails, - handleDragStart, - handleDragEnd, orientation, className, currentPage, @@ -363,19 +344,9 @@ Lane.propTypes = { labelStyle: PropTypes.object, cards: PropTypes.array, label: PropTypes.string, - currentPage: PropTypes.number, draggable: PropTypes.bool, collapsibleLanes: PropTypes.bool, droppable: PropTypes.bool, - onCardClick: PropTypes.func, - onBeforeCardDelete: PropTypes.func, - onCardDelete: PropTypes.func, - onCardAdd: PropTypes.func, - onCardUpdate: PropTypes.func, - onLaneDelete: PropTypes.func, - onLaneUpdate: PropTypes.func, - onLaneClick: PropTypes.func, - onLaneScroll: PropTypes.func, editable: PropTypes.bool, cardDraggable: PropTypes.bool, cardDragClass: PropTypes.string, @@ -383,9 +354,6 @@ Lane.propTypes = { canAddLanes: PropTypes.bool, hideCardDeleteIcon: PropTypes.bool, components: PropTypes.object, - getCardDetails: PropTypes.func, - handleDragStart: PropTypes.func, - handleDragEnd: PropTypes.func, orientation: PropTypes.string }; diff --git a/client/src/components/trello-board/styles/Base.js b/client/src/components/trello-board/styles/Base.js index 4cb18b3e3..4d2166a97 100644 --- a/client/src/components/trello-board/styles/Base.js +++ b/client/src/components/trello-board/styles/Base.js @@ -16,12 +16,14 @@ const getBoardWrapperStyles = (props) => { }; const getSectionStyles = (props) => { + // TODO The min width here is where we will set the size settings for horizontal lanes (card visibility) if (props.orientation === "horizontal") { return ` display: inline-flex; flex-direction: column; white-space: nowrap; // overflow-y: none; + min-width: 8.5%; `; } return ` @@ -73,8 +75,10 @@ export const GlobalStyle = createGlobalStyle` export const StyleHorizontal = styled.div` .react-trello-lane { - min-width: 250px; - min-height: 25px; + width: 100%; + height: 100%; + overflow-y: visible; + overflow-x: visible; // change this line } .react-trello-lane.lane-collapsed { @@ -83,8 +87,15 @@ export const StyleHorizontal = styled.div` .ant-card-body { padding: 4px; } + .item-wrapper { + display: flex; + flex: 1 1 auto; + white-space: nowrap; + min-width: 4%; + } .react-trello-card { height: auto; + margin: 2px; } `; @@ -95,6 +106,7 @@ export const StyleVertical = styled.div` .react-trello-lane { min-height: 5px; + height: 100%; } .react-trello-lane.lane-collapsed { @@ -103,22 +115,39 @@ export const StyleVertical = styled.div` .react-trello-card { flex: 0 1 auto; - width: 150px; - height: auto; + width: 100%; + height: 100%; + } + .grid-container { + display: flex; + flex-wrap: wrap; + } + .grid-item { + width: 8%; // TODO: THIS IS WHERE WE GET VERTICAL CARD CUSTOMIZATION + display: flex; + align-content: stretch; + box-sizing: border-box; + } + + .item { + height: 100%; + width: 100%; + } + .item-wrapper { + width: 100%; + height: 100%; } .react-trello-board { display: flex; } - .grid-container { - } - - .grid-item { - } - .ant-card-body { } + + .ant-card { + height: 100%; + } `; export const CustomPopoverContainer = styled(PopoverContainer)` @@ -236,15 +265,14 @@ export const RightContent = styled.span` padding-right: 10px; font-size: 13px; `; + export const CardWrapper = styled.article` border-radius: 3px; border-bottom: 1px solid #ccc; background-color: #fff; - position: relative; - padding: 10px; cursor: pointer; - max-width: 250px; margin-bottom: 7px; + max-width: 250px; min-width: 230px; `;