51 lines
1.3 KiB
JavaScript
51 lines
1.3 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import Board from "react-trello";
|
|
import { Card } from "antd";
|
|
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
|
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
const mapStateToProps = createStructuredSelector({
|
|
bodyshop: selectBodyshop,
|
|
});
|
|
|
|
export function ProductionBoardKanbanComponent({
|
|
loading,
|
|
data,
|
|
columnState,
|
|
bodyshop,
|
|
}) {
|
|
console.log("data", data);
|
|
|
|
const [cards, setCards] = useState([]);
|
|
|
|
useEffect(() => {
|
|
const cols = bodyshop.md_ro_statuses.open_statuses.map((s) => {
|
|
return {
|
|
id: s,
|
|
title: s,
|
|
cards: [],
|
|
};
|
|
});
|
|
if (data)
|
|
data.forEach((d) =>
|
|
cols
|
|
.find((c) => c.id === d.status)
|
|
.cards.push({ id: d.id, title: d.est_number, description: d.ownr_fn })
|
|
);
|
|
|
|
setCards(cols);
|
|
}, [data, bodyshop.md_ro_statuses.open_statuses, setCards]);
|
|
|
|
const kanbanCard = (card) => <Card>{card.title}</Card>;
|
|
|
|
if (loading) return <LoadingSpinner />;
|
|
|
|
return (
|
|
<div>
|
|
<Board data={{ lanes: cards }} components={{ Card: kanbanCard }} />
|
|
</div>
|
|
);
|
|
}
|
|
export default connect(mapStateToProps, null)(ProductionBoardKanbanComponent);
|