61 lines
1.7 KiB
JavaScript
61 lines
1.7 KiB
JavaScript
import React from "react";
|
|
import PropTypes from "prop-types";
|
|
import { Typography, List, Button, Flex } from "antd";
|
|
import PrinterIcon from "../icons/PrinterIcon";
|
|
import InfoCircleIcon from "../icons/InfoCircleIcon";
|
|
import StateDisplay from "./StateDisplay";
|
|
import DocumentPrinterIcon from "../icons/DocumentPrinterIcon";
|
|
import MissingPlaceholder from "./MissingPlaceholder";
|
|
const { Text } = Typography;
|
|
|
|
const PrinterList = ({ printers, type = "printer" }) => {
|
|
if ((printers?.length || 0) <= 0) {
|
|
return (
|
|
<MissingPlaceholder
|
|
message={`No ${
|
|
type == "printer" ? "printers" : "document printers"
|
|
} added.`}
|
|
/>
|
|
);
|
|
}
|
|
return (
|
|
<List
|
|
dataSource={printers}
|
|
size="small"
|
|
bordered
|
|
renderItem={(printer) => (
|
|
<List.Item actions={[]}>
|
|
<List.Item.Meta
|
|
description={
|
|
<Flex gap={"middle"} justify="space-between" align="center">
|
|
<Flex gap={"small"}>
|
|
<Text>
|
|
{type == "printer" && <PrinterIcon />}
|
|
{type == "documentPrinter" && <DocumentPrinterIcon />}
|
|
</Text>
|
|
<Text>{printer.name || printer._id}</Text>
|
|
</Flex>
|
|
<Flex gap={"middle"} align="center">
|
|
<StateDisplay state={printer.state} />
|
|
<Button
|
|
key="info"
|
|
icon={<InfoCircleIcon />}
|
|
type="text"
|
|
size="small"
|
|
/>
|
|
</Flex>
|
|
</Flex>
|
|
}
|
|
/>
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
);
|
|
};
|
|
|
|
PrinterList.propTypes = {
|
|
printers: PropTypes.array.isRequired,
|
|
};
|
|
|
|
export default PrinterList;
|