Labor allocation on job close BOD-131
This commit is contained in:
Patrick Fic
@@ -0,0 +1,32 @@
|
||||
import React from "react";
|
||||
import { Tag } from "antd";
|
||||
export default function JobsCloseLabMatAllocationTags({
|
||||
labmatAllocationKey,
|
||||
labmatAllocation,
|
||||
setLabmatAllocations,
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
{labmatAllocation.allocations.map((a, idx) => (
|
||||
<Tag
|
||||
closable
|
||||
visible
|
||||
onClose={() => {
|
||||
setLabmatAllocations((state) => {
|
||||
return {
|
||||
...state,
|
||||
[labmatAllocationKey]: {
|
||||
...labmatAllocation,
|
||||
allocations: labmatAllocation.allocations.filter(
|
||||
(val, index) => index !== idx
|
||||
),
|
||||
},
|
||||
};
|
||||
});
|
||||
}}
|
||||
key={idx}
|
||||
>{`${a.center} - ${a.amount.toFormat()}`}</Tag>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
import { PlusCircleFilled, CloseCircleFilled } from "@ant-design/icons";
|
||||
import { Button, InputNumber, Select } from "antd";
|
||||
import Dinero from "dinero.js";
|
||||
import React, { useState } from "react";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop,
|
||||
});
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
export function JobsCloseLabmatAllocationButton({
|
||||
labmatAllocationKey,
|
||||
labmatAllocation,
|
||||
setLabmatAllocations,
|
||||
bodyshop,
|
||||
}) {
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [state, setState] = useState({ center: "", amount: 0 });
|
||||
const { t } = useTranslation();
|
||||
const handleAllocate = () => {
|
||||
const existingIndex = labmatAllocation.allocations.findIndex(
|
||||
(e) => e.center === state.center
|
||||
);
|
||||
|
||||
const newAllocations = labmatAllocation.allocations.slice(0);
|
||||
if (existingIndex > -1) {
|
||||
newAllocations[existingIndex] = {
|
||||
center: state.center,
|
||||
amount: newAllocations[existingIndex].amount.add(
|
||||
Dinero({ amount: state.amount * 100 })
|
||||
),
|
||||
};
|
||||
} else {
|
||||
newAllocations.push({
|
||||
center: state.center,
|
||||
amount: Dinero({ amount: state.amount * 100 }),
|
||||
});
|
||||
}
|
||||
setLabmatAllocations((labMatState) => {
|
||||
return {
|
||||
...labMatState,
|
||||
[labmatAllocationKey]: {
|
||||
...labmatAllocation,
|
||||
allocations: newAllocations,
|
||||
},
|
||||
};
|
||||
});
|
||||
};
|
||||
const showAllocation = labmatAllocation.total.getAmount() > 0;
|
||||
|
||||
if (!showAllocation) return null;
|
||||
return (
|
||||
<div style={{ display: "flex", alignItems: "center" }}>
|
||||
<div style={{ display: visible ? "" : "none" }}>
|
||||
<Select
|
||||
style={{ width: "200px" }}
|
||||
value={state.center}
|
||||
onSelect={(val) => setState({ ...state, center: val })}
|
||||
>
|
||||
{bodyshop.md_responsibility_centers.profits.map((r, idx) => (
|
||||
<Option key={idx} value={r.name}>
|
||||
{r.name}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
<InputNumber
|
||||
precision={2}
|
||||
min={0}
|
||||
onChange={(val) => setState({ ...state, amount: val })}
|
||||
max={labmatAllocation.total.getAmount() / 100}
|
||||
/>
|
||||
<Button
|
||||
onClick={handleAllocate}
|
||||
disabled={state.amount === 0 || state.center === ""}
|
||||
>
|
||||
{t("jobs.actions.allocate")}
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
{visible ? (
|
||||
<CloseCircleFilled onClick={() => setVisible(false)} />
|
||||
) : (
|
||||
<PlusCircleFilled onClick={() => setVisible(true)} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default connect(mapStateToProps, null)(JobsCloseLabmatAllocationButton);
|
||||
@@ -1,35 +1,101 @@
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import AllocationButton from "./jobs-close-labmat-allocation.button.component";
|
||||
import Dinero from "dinero.js";
|
||||
import AllocationTags from "./jobs-close-labmat-allocation.allocation-tags.component";
|
||||
import { List } from "antd";
|
||||
|
||||
export default function JobCloseLabMatAllocation({
|
||||
labmatAllocations,
|
||||
setLabmatAllocations,
|
||||
}) {
|
||||
console.log(
|
||||
"JobCloseLabMatAllocation -> labmatAllocations",
|
||||
labmatAllocations
|
||||
);
|
||||
const { t } = useTranslation();
|
||||
|
||||
const allocatedTotalsArray = Object.keys(labmatAllocations)
|
||||
.filter((i) => !i.includes("subtotal"))
|
||||
.map((i) => labmatAllocations[i].allocations)
|
||||
.flat();
|
||||
|
||||
const allocatedTotal = Dinero({
|
||||
amount: allocatedTotalsArray.reduce((acc, val) => {
|
||||
console.log("acc", acc);
|
||||
return (acc = acc + val.amount.getAmount());
|
||||
}, 0),
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ display: "flex" }}>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rate</th>
|
||||
<th>Available</th>
|
||||
<th>{t("jobs.labels.laborallocations")}</th>
|
||||
<th>{t("jobs.labels.totals")}</th>
|
||||
<th>{t("jobs.labels.available")}</th>
|
||||
<th>{t("jobs.actions.allocate")}</th>
|
||||
<th>{t("jobs.labels.allocations")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{Object.keys(labmatAllocations).map((alloc) => (
|
||||
<tr>
|
||||
<td>{alloc}</td>
|
||||
<td>
|
||||
{
|
||||
//labmatAllocations[alloc].total.toFormat()
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{Object.keys(labmatAllocations).map((alloc, idx) => {
|
||||
if (!alloc.includes("subtotal"))
|
||||
return (
|
||||
<tr key={idx}>
|
||||
<td>{t(`jobs.fields.${alloc}`)}</td>
|
||||
<td>
|
||||
{labmatAllocations[alloc].total &&
|
||||
labmatAllocations[alloc].total.toFormat()}
|
||||
</td>
|
||||
<td>
|
||||
{labmatAllocations[alloc].total
|
||||
.subtract(
|
||||
Dinero({
|
||||
amount: labmatAllocations[alloc].allocations.reduce(
|
||||
(acc, val) => {
|
||||
return acc + val.amount.getAmount();
|
||||
},
|
||||
0
|
||||
),
|
||||
})
|
||||
)
|
||||
.toFormat()}
|
||||
</td>
|
||||
<td>
|
||||
<AllocationButton
|
||||
labmatAllocationKey={alloc}
|
||||
labmatAllocation={labmatAllocations[alloc]}
|
||||
setLabmatAllocations={setLabmatAllocations}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<AllocationTags
|
||||
labmatAllocationKey={alloc}
|
||||
labmatAllocation={labmatAllocations[alloc]}
|
||||
setLabmatAllocations={setLabmatAllocations}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
else return null;
|
||||
})}
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>{labmatAllocations.subtotal.toFormat()}</td>
|
||||
<td>{allocatedTotal.toFormat()}</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div>
|
||||
<List>
|
||||
{allocatedTotalsArray.map((i, idx) => (
|
||||
<List.Item key={idx}>{`${
|
||||
i.center
|
||||
} ${i.amount.toFormat()}`}</List.Item>
|
||||
))}
|
||||
</List>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -81,6 +81,15 @@ export function JobsDetailHeaderActions({
|
||||
>
|
||||
{t("jobs.actions.postInvoices")}
|
||||
</Menu.Item>
|
||||
<Menu.Item key="closejob">
|
||||
<Link
|
||||
to={{
|
||||
pathname: `/manage/jobs/${job.id}/close`,
|
||||
}}
|
||||
>
|
||||
{t("menus.jobsactions.closejob")}
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user