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

- So so many things

Browse Source 
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-07-05 21:23:28 -04:00
parent 7d72d66a97
commit 8e50d0ba53
11 changed files with 283 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,7 +28,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, clone }) {
export default function ProductionBoardCard({ technician, card, bodyshop, cardSettings, clone, style }) {
const { t } = useTranslation();
const { metadata } = card;
@@ -72,7 +72,8 @@ 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
color: cardSettings?.cardcolor && contrastYIQ,
...style
}}
title={
<Space>
@@ -103,10 +104,10 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe
</Link>
}
>
{!clone && (
<Row>
{cardSettings?.ownr_nm && (
<Col span={24}>
<Row>
{cardSettings?.ownr_nm && (
<Col span={24}>
<Tooltip title={`${metadata.ownr_ln || ""} ${metadata.ownr_co_nm || ""}`}>
{cardSettings.compact ? (
<div className="ellipses">{`${metadata.ownr_ln || ""} ${metadata.ownr_co_nm || ""}`}</div>
) : (
@@ -114,87 +115,113 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe
<OwnerNameDisplay ownerObject={card} />
</div>
)}
</Col>
)}
{cardSettings?.model_info && (
<Col span={24}>
</Tooltip>
</Col>
)}
{cardSettings?.model_info && (
<Col span={24}>
<Tooltip
title={`${metadata.v_model_yr || ""} ${metadata.v_make_desc || ""} ${metadata.v_model_desc || ""}`}
>
<div className="ellipses">{`${metadata.v_model_yr || ""} ${metadata.v_make_desc || ""} ${metadata.v_model_desc || ""}`}</div>
</Col>
)}
{cardSettings?.ins_co_nm && metadata.ins_co_nm && (
<Col span={cardSettings.compact ? 24 : 12}>
</Tooltip>
</Col>
)}
{cardSettings?.ins_co_nm && metadata.ins_co_nm && (
<Col span={cardSettings.compact ? 24 : 12}>
<Tooltip title={metadata.ins_co_nm || ""}>
<div className="ellipses">{metadata.ins_co_nm || ""}</div>
</Col>
)}
{cardSettings?.clm_no && metadata.clm_no && (
<Col span={cardSettings.compact ? 24 : 12}>
</Tooltip>
</Col>
)}
{cardSettings?.clm_no && metadata.clm_no && (
<Col span={cardSettings.compact ? 24 : 12}>
<Tooltip title={metadata.clm_no || ""}>
<div className="ellipses">{metadata.clm_no || ""}</div>
</Col>
)}
{cardSettings?.employeeassignments && (
<Col span={24}>
<Row>
<Col span={cardSettings.compact ? 24 : 12}>{`B: ${
employee_body ? `${employee_body.first_name.substr(0, 3)} ${employee_body.last_name.charAt(0)}` : ""
} ${metadata.labhrs.aggregate.sum.mod_lb_hrs || "?"}h`}</Col>
<Col span={cardSettings.compact ? 24 : 12}>{`P: ${
employee_prep ? `${employee_prep.first_name.substr(0, 3)} ${employee_prep.last_name.charAt(0)}` : ""
}`}</Col>
<Col span={cardSettings.compact ? 24 : 12}>{`R: ${
employee_refinish
? `${employee_refinish.first_name.substr(0, 3)} ${employee_refinish.last_name.charAt(0)}`
: ""
} ${metadata.larhrs.aggregate.sum.mod_lb_hrs || "?"}h`}</Col>
<Col span={cardSettings.compact ? 24 : 12}>{`C: ${
employee_csr ? `${employee_csr.first_name} ${employee_csr.last_name}` : ""
}`}</Col>
</Row>
</Col>
)}
{cardSettings?.actual_in && metadata.actual_in && (
<Col span={cardSettings.compact ? 24 : 12}>
</Tooltip>
</Col>
)}
{cardSettings?.employeeassignments && (
<Col span={24}>
<Row>
<Col span={cardSettings.compact ? 24 : 12}>
<Tooltip
title={`B: ${employee_body ? `${employee_body.first_name.substr(0, 3)} ${employee_body.last_name.charAt(0)}` : ""} ${metadata.labhrs.aggregate.sum.mod_lb_hrs || "?"}h`}
>
<div className="ellipses">{`B: ${employee_body ? `${employee_body.first_name.substr(0, 3)} ${employee_body.last_name.charAt(0)}` : ""} ${metadata.labhrs.aggregate.sum.mod_lb_hrs || "?"}h`}</div>
</Tooltip>
</Col>
<Col span={cardSettings.compact ? 24 : 12}>
<Tooltip
title={`P: ${employee_prep ? `${employee_prep.first_name.substr(0, 3)} ${employee_prep.last_name.charAt(0)}` : ""}`}
>
<div className="ellipses">{`P: ${employee_prep ? `${employee_prep.first_name.substring(0, 3)} ${employee_prep.last_name.charAt(0)}` : ""}`}</div>
</Tooltip>
</Col>
<Col span={cardSettings.compact ? 24 : 12}>
<Tooltip
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`}
>
<div className="ellipses">{`R: ${employee_refinish ? `${employee_refinish.first_name.substring(0, 3)} ${employee_refinish.last_name.charAt(0)}` : ""} ${metadata.larhrs.aggregate.sum.mod_lb_hrs || "?"}h`}</div>
</Tooltip>
</Col>
<Col span={cardSettings.compact ? 24 : 12}>
<Tooltip title={`C: ${employee_csr ? `${employee_csr.first_name} ${employee_csr.last_name}` : ""}`}>
<div className="ellipses">{`C: ${employee_csr ? `${employee_csr.first_name} ${employee_csr.last_name}` : ""}`}</div>
</Tooltip>
</Col>
</Row>
</Col>
)}
{cardSettings?.actual_in && metadata.actual_in && (
<Col span={cardSettings.compact ? 24 : 12}>
<Tooltip title={metadata.actual_in}>
<Space>
<DownloadOutlined />
<DateTimeFormatter format="MM/DD">{metadata.actual_in}</DateTimeFormatter>
</Space>
</Col>
)}
{cardSettings?.scheduled_completion && metadata.scheduled_completion && (
<Col span={cardSettings.compact ? 24 : 12}>
</Tooltip>
</Col>
)}
{cardSettings?.scheduled_completion && metadata.scheduled_completion && (
<Col span={cardSettings.compact ? 24 : 12}>
<Tooltip title={metadata.scheduled_completion}>
<Space className={pastDueAlert}>
<CalendarOutlined />
<DateTimeFormatter format="MM/DD">{metadata.scheduled_completion}</DateTimeFormatter>
</Space>
</Col>
)}
{cardSettings?.ats && metadata.alt_transport && (
<Col span={12}>
<div>{metadata.alt_transport || ""}</div>
</Col>
)}
{cardSettings?.sublets && (
<Col span={12}>
<ProductionSubletsManageComponent subletJobLines={metadata.subletLines} />
</Col>
)}
{cardSettings?.production_note && (
<Col span={24}>
<ProductionListColumnProductionNote
record={{
production_vars: card?.metadata.production_vars,
id: card?.id,
refetch: card?.refetch
}}
/>
</Col>
)}
{cardSettings?.partsstatus && (
<Col span={24}>
<JobPartsQueueCount parts={metadata.joblines_status} />
</Col>
)}
</Row>
)}
</Tooltip>
</Col>
)}
{cardSettings?.ats && metadata.alt_transport && (
<Col span={12}>
<Tooltip title={metadata.alt_transport}>
<div className="ellipses">{metadata.alt_transport || ""}</div>
</Tooltip>
</Col>
)}
{cardSettings?.sublets && (
<Col span={12}>
<ProductionSubletsManageComponent subletJobLines={metadata.subletLines} />
</Col>
)}
{cardSettings?.production_note && (
<Col span={24}>
<ProductionListColumnProductionNote
record={{
production_vars: card?.metadata.production_vars,
id: card?.id,
refetch: card?.refetch
}}
/>
</Col>
)}
{cardSettings?.partsstatus && (
<Col span={24}>
<JobPartsQueueCount parts={metadata.joblines_status} />
</Col>
)}
</Row>
</Card>
);
}

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

@@ -4,8 +4,6 @@ import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { UPDATE_KANBAN_SETTINGS } from "../../graphql/user.queries";
const { TabPane } = Tabs;
export default function ProductionBoardKanbanSettings({ associationSettings, parentLoading }) {
const [form] = Form.useForm();
const [open, setOpen] = useState(false);
@@ -14,7 +12,7 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
const [updateKbSettings] = useMutation(UPDATE_KANBAN_SETTINGS);
useEffect(() => {
form.setFieldsValue(associationSettings && associationSettings.kanban_settings);
form.setFieldsValue(associationSettings?.kanban_settings);
}, [form, associationSettings, open]);
const { t } = useTranslation();
@@ -25,7 +23,7 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
const result = await updateKbSettings({
variables: {
id: associationSettings && associationSettings.id,
id: associationSettings?.id,
ks: values
}
});
@@ -43,7 +41,7 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
setHasChanges(false);
};
const handleValuesChange = (changedValues, allValues) => {
const handleValuesChange = () => {
setHasChanges(true);
};
@@ -139,80 +137,39 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
</Col>
</Row>
</Card>
{/*<Card title={t("settings.sections.information")} style={cardStyle}>*/}
{/* <Row gutter={[16, 16]}>*/}
{/* <Col span={4}>*/}
{/* <Form.Item name="board_setting_3" valuePropName="checked">*/}
{/* <Checkbox>{t("board.labels.some_setting_3")}</Checkbox>*/}
{/* </Form.Item>*/}
{/* </Col>*/}
{/* <Col span={4}>*/}
{/* <Form.Item name="board_setting_4" valuePropName="checked">*/}
{/* <Checkbox>{t("board.labels.some_setting_4")}</Checkbox>*/}
{/* </Form.Item>*/}
{/* </Col>*/}
{/* </Row>*/}
{/*</Card>*/}
{/*<Card title={t("settings.sections.beta")} style={cardStyle}>*/}
{/* <Row gutter={[16, 16]}>*/}
{/* <Col span={4}>/!* Add beta settings here if any *!/</Col>*/}
{/* </Row>*/}
{/*</Card>*/}
</>
);
const renderLaneSettings = () => (
<>
<Card title={t("production.settings.layout")} style={cardStyle}>
<Row gutter={[16, 16]}>
{/*<Col span={4}>*/}
{/* <Form.Item name="lane_setting_1" valuePropName="checked">*/}
{/* <Checkbox>{t("lane.labels.some_setting_1")}</Checkbox>*/}
{/* </Form.Item>*/}
{/*</Col>*/}
{/*<Col span={4}>*/}
{/* <Form.Item name="lane_setting_2" valuePropName="checked">*/}
{/* <Checkbox>{t("lane.labels.some_setting_2")}</Checkbox>*/}
{/* </Form.Item>*/}
{/*</Col>*/}
</Row>
<Row gutter={[16, 16]}></Row>
</Card>
{/*<Card title={t("settings.sections.information")} style={cardStyle}>*/}
{/* <Row gutter={[16, 16]}>*/}
{/* <Col span={4}>*/}
{/* <Form.Item name="lane_setting_3" valuePropName="checked">*/}
{/* <Checkbox>{t("lane.labels.some_setting_3")}</Checkbox>*/}
{/* </Form.Item>*/}
{/* </Col>*/}
{/* <Col span={4}>*/}
{/* <Form.Item name="lane_setting_4" valuePropName="checked">*/}
{/* <Checkbox>{t("lane.labels.some_setting_4")}</Checkbox>*/}
{/* </Form.Item>*/}
{/* </Col>*/}
{/* </Row>*/}
{/*</Card>*/}
{/*<Card title={t("settings.sections.beta")} style={cardStyle}>*/}
{/* <Row gutter={[16, 16]}>*/}
{/* <Col span={4}>/!* Add beta settings here if any *!/</Col>*/}
{/* </Row>*/}
{/*</Card>*/}
</>
);
const items = [
{
key: "1",
label: t("production.settings.tabs.card"),
children: renderCardSettings()
},
{
key: "2",
label: t("production.settings.tabs.board"),
children: renderBoardSettings()
},
{
key: "3",
label: t("production.settings.tabs.lane"),
children: renderLaneSettings()
}
];
const overlay = (
<Card>
<Form form={form} onFinish={handleFinish} layout="vertical" onValuesChange={handleValuesChange}>
<Tabs defaultActiveKey="1">
<TabPane tab={t("production.settings.tabs.card")} key="1">
{renderCardSettings()}
</TabPane>
<TabPane tab={t("production.settings.tabs.board")} key="2">
{renderBoardSettings()}
</TabPane>
<TabPane tab={t("production.settings.tabs.lane")} key="3">
{renderLaneSettings()}
</TabPane>
</Tabs>
<Tabs defaultActiveKey="1" items={items} />
<Row justify="center" style={{ marginTop: 15 }} gutter={16}>
<Col span={8}>
<Button block onClick={() => setOpen(false)}>

2
client/src/components/production-board-kanban/production-board-kanban.styles.scss
View File

@@ -23,5 +23,3 @@
background: transparent;
border: none;
}

2
client/src/components/production-board-kanban/production-board-kanban.utils.js
View File

@@ -1,5 +1,5 @@
import { groupBy } from "lodash";
import fakeData from "./testData/board1200.json";
import fakeData from "./testData/board300.json";
const sortByParentId = (arr) => {
// return arr.reduce((accumulator, currentValue) => {

52
client/src/components/trello-board/components/Lane/SizeMemoryWrapper.jsx Normal file
View File

@@ -0,0 +1,52 @@
import React, { useEffect, useRef } from "react";
import PropTypes from "prop-types";
const SizeMemoryWrapper = ({ children, maxHeight, setMaxHeight, maxWidth, setMaxWidth }) => {
const ref = useRef(null);
useEffect(() => {
const currentRef = ref.current; // Capture the current ref value
const updateSize = () => {
// Check if the zoom level is less than 100%
if (window.devicePixelRatio < 1) {
return; // Do not update width and height
}
const currentHeight = currentRef?.firstChild?.clientHeight || 0;
const currentWidth = currentRef?.firstChild?.clientWidth || 0;
// Update height as before
setMaxHeight((prevHeight) => Math.max(prevHeight, currentHeight));
// Update width to decrease when zooming back in
setMaxWidth((prevWidth) => Math.max(prevWidth, currentWidth)); // Increase width if current is greater than previous
};
const resizeObserver = new ResizeObserver(updateSize);
if (currentRef?.firstChild) {
resizeObserver.observe(currentRef.firstChild);
}
return () => {
if (currentRef?.firstChild) {
resizeObserver.unobserve(currentRef.firstChild);
}
};
}, [setMaxHeight, setMaxWidth]);
return (
<div ref={ref} className="size-memory-wrapper" style={{ minHeight: maxHeight, minWidth: maxWidth }}>
{children}
</div>
);
};
SizeMemoryWrapper.propTypes = {
children: PropTypes.node.isRequired,
maxHeight: PropTypes.number.isRequired,
setMaxHeight: PropTypes.func.isRequired,
maxWidth: PropTypes.number.isRequired,
setMaxWidth: PropTypes.func.isRequired
};
export default SizeMemoryWrapper;

6
client/src/components/trello-board/controllers/BoardContainer.jsx
View File

@@ -37,6 +37,8 @@ const BoardContainer = ({
const [isDragging, setIsDragging] = useState(false);
const [isProcessing, setIsProcessing] = useState(false);
const [maxLaneHeight, setMaxLaneHeight] = useState(0);
const [maxCardHeight, setMaxCardHeight] = useState(0);
const [maxCardWidth, setMaxCardWidth] = useState(0);
const dispatch = useDispatch();
const currentReducerData = useSelector((state) => (state.trello.lanes ? state.trello : {}));
@@ -151,6 +153,10 @@ const BoardContainer = ({
cardSettings={cardSettings}
maxLaneHeight={maxLaneHeight}
setMaxLaneHeight={setMaxLaneHeight}
maxCardHeight={maxCardHeight}
setMaxCardHeight={setMaxCardHeight}
maxCardWidth={maxCardWidth}
setMaxCardWidth={setMaxCardWidth}
/>
);
})}

90
client/src/components/trello-board/controllers/Lane.jsx
View File

@@ -14,6 +14,7 @@ import { selectBodyshop } from "../../../redux/user/user.selectors.js";
import { selectTechnician } from "../../../redux/tech/tech.selectors.js";
import ProductionBoardCard from "../../production-board-kanban-card/production-board-kanban-card.component.jsx";
import HeightMemoryWrapper from "../components/Lane/HeightMemoryWrapper.jsx";
import SizeMemoryWrapper from "../components/Lane/SizeMemoryWrapper.jsx";
/**
* Lane is a React component that represents a lane in a Trello-like board.
@@ -27,6 +28,10 @@ import HeightMemoryWrapper from "../components/Lane/HeightMemoryWrapper.jsx";
* @param orientation
* @param maxLaneHeight
* @param setMaxLaneHeight
* @param maxCardHeight
* @param setMaxCardHeight
* @param maxCardWidth
* @param setMaxCardWidth
* @param technician -- connected to redux
* @param bodyshop -- connected to redux
* @returns {Element}
@@ -43,6 +48,10 @@ const Lane = ({
orientation = "vertical",
maxLaneHeight,
setMaxLaneHeight,
maxCardHeight,
setMaxCardHeight,
maxCardWidth,
setMaxCardWidth,
technician,
bodyshop
}) => {
@@ -82,21 +91,28 @@ const Lane = ({
className={`item ${snapshot.isDragging ? "is-dragging" : ""}`}
key={card.id}
>
<ProductionBoardCard
technician={technician}
bodyshop={bodyshop}
cardSettings={cardSettings}
key={card.id}
style={card.style}
card={card}
className="react-trello-card"
/>
<SizeMemoryWrapper
maxHeight={maxCardHeight}
setMaxHeight={setMaxCardHeight}
maxWidth={maxCardWidth}
setMaxWidth={setMaxCardWidth}
>
<ProductionBoardCard
technician={technician}
bodyshop={bodyshop}
cardSettings={cardSettings}
key={card.id}
card={card}
style={{ minHeight: maxCardHeight, minWidth: maxCardWidth }}
className="react-trello-card"
/>
</SizeMemoryWrapper>
</div>
)}
</Draggable>
);
},
[isProcessing, technician, bodyshop, cardSettings]
[isProcessing, technician, bodyshop, cardSettings, maxCardHeight, setMaxCardHeight, maxCardWidth, setMaxCardWidth]
);
const ItemWrapper = useCallback(
@@ -127,7 +143,11 @@ const Lane = ({
{children}
</div>
)),
Item: ({ children, ...props }) => <div {...props}>{children}</div>
Item: ({ children, ...props }) => (
<div style={{ minWidth: maxCardWidth, minHeight: maxCardHeight }} {...props}>
{children}
</div>
)
},
itemContent: (index, item) => <ItemWrapper>{renderDraggable(index, item)}</ItemWrapper>,
overscan: { main: 10, reverse: 10 }
@@ -140,16 +160,18 @@ const Lane = ({
itemContent: (index, item) => renderDraggable(index, item),
scrollerRef: provided.innerRef,
style: {
minWidth: maxCardWidth,
minHeight: maxLaneHeight
}
};
const componentProps = orientation === "vertical" ? verticalProps : horizontalProps;
const finalComponentProps = collapsed
? orientation === "horizontal"
? {
style: {
height: orientation === "vertical" ? 10 : maxLaneHeight
height: maxLaneHeight
}
}
: {}
@@ -174,11 +196,11 @@ const Lane = ({
style={{ ...provided.droppableProps.style }}
>
{isVisible && <FinalComponent {...finalComponentProps} />}
{provided.placeholder}
{(collapsed || renderedCards.length === 0) && provided.placeholder}
</div>
);
},
[orientation, collapsed, isVisible, renderDraggable, maxLaneHeight, setMaxLaneHeight]
[orientation, collapsed, isVisible, renderDraggable, maxLaneHeight, setMaxLaneHeight, maxCardHeight, maxCardWidth]
);
const renderDragContainer = useCallback(
@@ -196,20 +218,35 @@ const Lane = ({
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
style={provided.draggableProps.style}
className={`item ${snapshot.isDragging ? "is-dragging" : ""}`}
style={{
...provided.draggableProps.style,
minHeight: maxCardHeight,
minWidth: maxCardWidth
}}
className={`clone ${snapshot.isDragging ? "is-dragging" : ""}`}
key={card.id}
>
{/*<SizeMemoryWrapper*/}
{/* maxHeight={maxCardHeight}*/}
{/* setMaxHeight={setMaxCardHeight}*/}
{/* maxWidth={maxCardWidth}*/}
{/* setMaxWidth={setMaxCardWidth}*/}
{/*>*/}
<ProductionBoardCard
technician={technician}
bodyshop={bodyshop}
cardSettings={cardSettings}
key={card.id}
style={card.style}
className="react-trello-card"
style={{
minHeight: maxCardHeight,
minWidth: maxCardWidth,
background_color: "red !important"
}}
card={card}
clone={false}
/>
{/*</SizeMemoryWrapper>*/}
</div>
);
}}
@@ -217,7 +254,18 @@ const Lane = ({
{(provided) => renderDroppable(provided, sortedCards)}
</Droppable>
),
[id, index, orientation, renderDroppable, sortedCards, technician, bodyshop, cardSettings]
[
id,
index,
orientation,
renderDroppable,
sortedCards,
technician,
bodyshop,
cardSettings,
maxCardHeight,
maxCardWidth
]
);
return (
@@ -241,7 +289,11 @@ Lane.propTypes = {
isProcessing: PropTypes.bool.isRequired,
cardSettings: PropTypes.object.isRequired,
maxLaneHeight: PropTypes.number.isRequired,
setMaxLaneHeight: PropTypes.func.isRequired
setMaxLaneHeight: PropTypes.func.isRequired,
maxCardHeight: PropTypes.number.isRequired,
setMaxCardHeight: PropTypes.func.isRequired,
maxCardWidth: PropTypes.number.isRequired,
setMaxCardWidth: PropTypes.func.isRequired
};
const mapDispatchToProps = (dispatch) => ({

33
client/src/components/trello-board/styles/Base.js
View File

@@ -20,7 +20,7 @@ const getSectionStyles = (props) => {
display: inline-flex;
flex-direction: column;
// overflow-y: none;
min-width: 8.5%;
min-width: 8%;
`;
}
return `
@@ -61,7 +61,6 @@ export const StyleHorizontal = styled.div`
display: flex;
flex: 1 1 auto;
white-space: nowrap;
min-width: 4%;
}
.react-trello-column-header {
@@ -77,6 +76,16 @@ export const StyleHorizontal = styled.div`
height: auto;
margin: 2px;
}
.size-memory-wrapper {
display: flex; /* This makes it a flex container */
flex-direction: column; /* Aligns children vertically */
}
.size-memory-wrapper .ant-card {
flex-grow: 1; /* Allows the card to expand to fill the available space */
width: 100%; /* Ensures the card stretches to fill the width of its parent */
}
`;
export const StyleVertical = styled.div`
@@ -112,19 +121,13 @@ export const StyleVertical = styled.div`
.grid-item {
display: flex;
width: 250px; // TODO: (Note) This is where we will set the width of the cards in the vertical orientation
width: 150px; // TODO: (Note) This is where we will set the width of the cards in the vertical orientation
align-content: stretch;
box-sizing: border-box;
}
.item {
height: 100%;
width: 250px; // TODO: (Note) This is where we will set the width of the cards in the vertical orientation
}
.item-wrapper {
width: 100%;
height: 100%;
}
.react-trello-board {
@@ -133,9 +136,17 @@ export const StyleVertical = styled.div`
.ant-card-body {
}
.size-memory-wrapper {
display: flex; /* This makes it a flex container */
flex-direction: column; /* Aligns children vertically */
}
.ant-card {
height: 100%;
.size-memory-wrapper .ant-card {
flex-grow: 1; /* Allows the card to expand to fill the available space */
width: 100%; /* Ensures the card stretches to fill the width of its parent */
}
.react-trello-lane .lane-collapsed {
min-height: 5px;
}
`;

1
client/src/translations/en_us/common.json
View File

@@ -2749,6 +2749,7 @@
"settings": "Error saving board settings: {{error}}"
},
"labels": {
"model_info": "Model Info",
"actual_in": "Actual In",
"alert": "Alert",
"alertoff": "Remove alert from Job",

3
client/src/translations/es/common.json
View File

@@ -2739,7 +2739,8 @@
"settings": ""
},
"labels": {
"actual_in": "",
"model_info": "",
"actual_in": "",
"alert": "",
"alertoff": "",
"alerton": "",

3
client/src/translations/fr/common.json
View File

@@ -2739,7 +2739,8 @@
"settings": ""
},
"labels": {
"actual_in": "",
"model_info": "",
"actual_in": "",
"alert": "",
"alertoff": "",
"alerton": "",