55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import { theme } from "antd";
|
|
import { ISpool } from "../../spools/model";
|
|
import { SpoolCard } from "./spoolCard";
|
|
|
|
const { useToken } = theme;
|
|
|
|
export function SpoolList({
|
|
spools,
|
|
spoolOrder,
|
|
setSpoolOrder,
|
|
}: {
|
|
spools: ISpool[];
|
|
spoolOrder: number[];
|
|
setSpoolOrder: (spoolOrder: number[]) => void;
|
|
}) {
|
|
const { token } = useToken();
|
|
|
|
// Make sure all spools are in the spoolOrders array
|
|
const finalSpoolOrder = [...spoolOrder].filter((id) => spools.find((spool) => spool.id === id)); // Remove any spools that are not in the spools array
|
|
spools.forEach((spool) => {
|
|
if (!finalSpoolOrder.includes(spool.id)) finalSpoolOrder.push(spool.id);
|
|
});
|
|
|
|
const moveSpoolOrder = (spool_id: number, hoverIndex: number) => {
|
|
// Move spool spool_id to position hoverIndex
|
|
let curIdx = finalSpoolOrder.indexOf(spool_id);
|
|
if (curIdx === -1) {
|
|
// Spool is missing from spool order array, add it to the end of the array
|
|
finalSpoolOrder.push(spool_id);
|
|
curIdx = finalSpoolOrder.length - 1;
|
|
} else if (curIdx === hoverIndex) {
|
|
// Spool is already in the right position
|
|
return;
|
|
}
|
|
|
|
const newSpoolOrder = [...finalSpoolOrder];
|
|
newSpoolOrder.splice(curIdx, 1);
|
|
newSpoolOrder.splice(hoverIndex, 0, finalSpoolOrder[curIdx]);
|
|
setSpoolOrder(newSpoolOrder);
|
|
};
|
|
|
|
const style = {
|
|
backgroundColor: token.colorBgContainer,
|
|
borderRadius: token.borderRadiusLG,
|
|
};
|
|
|
|
return (
|
|
<div className="loc-spools" style={style}>
|
|
{spools.map((spool, idx) => (
|
|
<SpoolCard key={spool.id} index={idx} spool={spool} moveSpoolOrder={moveSpoolOrder} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|