tonym/spoolman2
1
0
Fork 0
Code Issues 19 Pull Requests Actions Packages Projects Releases Wiki Activity

Client: Translations for qr code stuff

Browse Source 
Also added error if no spools were selected
This commit is contained in:
Donkie
2023-07-30 10:20:46 +02:00
parent 475e64ff48
commit 0043f536ee
6 changed files with 107 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
client/public/locales/en/common.json
View File

@@ -53,6 +53,37 @@
"dashboard": { "dashboard": {
"title": "Dashboard" "title": "Dashboard"
}, },
"printing": {
"generic": {
"title": "Printing",
"print": "Print",
"columns": "Columns",
"paperSize": "Paper Size",
"rowHeight": "Row Height",
"showBorder": "Show Border",
"previewScale": "Preview Scale",
"marginLeft": "Left Margin",
"marginRight": "Right Margin",
"marginTop": "Top Margin",
"marginBottom": "Bottom Margin"
},
"qrcode": {
"button": "Print QR Codes",
"title": "QR Code Printing",
"textSize": "Content Text Size",
"showSpoolmanIcon": "Show Spoolman Icon",
"showContent": "Show QR Code Content"
},
"spoolSelect": {
"title": "Select Spools",
"description": "Select spools to print QR codes for.",
"showArchived": "Show Archived",
"noSpoolsSelected": "You have not selected any spools.",
"selectAll": "Select/Unselect All",
"selectedTotal_one": "{{count}} spool selected",
"selectedTotal_other": "{{count}} spools selected"
}
},
"spool": { "spool": {
"spool": "Spools", "spool": "Spools",
"fields": { "fields": {

31
client/public/locales/sv/common.json
View File

@@ -53,6 +53,37 @@
"dashboard": { "dashboard": {
"title": "Hem" "title": "Hem"
}, },
"printing": {
"generic": {
"title": "Utskrift",
"print": "Skriv ut",
"columns": "Kolumner",
"paperSize": "Papperstyp",
"rowHeight": "Radhöjd",
"showBorder": "Visa ram",
"previewScale": "Skala förhandsgranskning",
"marginLeft": "Marginal - vänster",
"marginRight": "Marginal - höger",
"marginTop": "Marginal - topp",
"marginBottom": "Marginal - botten"
},
"qrcode": {
"button": "Skriv ut QR-koder",
"title": "QR-kod utskrift",
"textSize": "Textstorlek",
"showSpoolmanIcon": "Visa Spoolman-ikon",
"showContent": "Visa QR-kodsinnehåll"
},
"spoolSelect": {
"title": "Välj spolar",
"description": "Välj spolar att skriva ut QR-koder för.",
"showArchived": "Tillåt arkiverade",
"noSpoolsSelected": "Du har inte valt några spolar.",
"selectAll": "Markera/avmarkera alla",
"selectedTotal_one": "{{count}} spole vald",
"selectedTotal_other": "{{count}} spolar valda"
}
},
"spool": { "spool": {
"spool": "Spolar", "spool": "Spolar",
"fields": { "fields": {

27
client/src/components/printing/printingDialog.tsx
View File

@@ -12,6 +12,7 @@ import {
} from "antd"; } from "antd";
import ReactToPrint from "react-to-print"; import ReactToPrint from "react-to-print";
import { useSavedState } from "../../utils/saveload"; import { useSavedState } from "../../utils/saveload";
import { useTranslate } from "@refinedev/core";
interface PrintingDialogProps { interface PrintingDialogProps {
items: JSX.Element[]; items: JSX.Element[];
@@ -62,6 +63,8 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
onCancel, onCancel,
title, title,
}) => { }) => {
const t = useTranslate();
const [marginLeft, setMarginLeft] = useSavedState("print-marginLeft", 10); const [marginLeft, setMarginLeft] = useSavedState("print-marginLeft", 10);
const [marginTop, setMarginTop] = useSavedState("print-marginTop", 10); const [marginTop, setMarginTop] = useSavedState("print-marginTop", 10);
const [marginRight, setMarginRight] = useSavedState("print-marginRight", 10); const [marginRight, setMarginRight] = useSavedState("print-marginRight", 10);
@@ -140,12 +143,14 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
return ( return (
<Modal <Modal
open={visible} open={visible}
title={title ?? "Printing Dialog"} title={title ?? t("printing.generic.title")}
onCancel={onCancel} onCancel={onCancel}
footer={[ footer={[
<ReactToPrint <ReactToPrint
key="print-button" key="print-button"
trigger={() => <Button type="primary">Print</Button>} trigger={() => (
<Button type="primary">{t("printing.generic.print")}</Button>
)}
content={() => printRef.current} content={() => printRef.current}
/>, />,
]} ]}
@@ -203,7 +208,7 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
labelCol={{ span: 14 }} labelCol={{ span: 14 }}
wrapperCol={{ span: 10 }} wrapperCol={{ span: 10 }}
> >
<Form.Item label="Left Margin"> <Form.Item label={t("printing.generic.marginLeft")}>
<Slider <Slider
min={0} min={0}
max={50} max={50}
@@ -214,7 +219,7 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
}} }}
/> />
</Form.Item> </Form.Item>
<Form.Item label="Top Margin"> <Form.Item label={t("printing.generic.marginTop")}>
<Slider <Slider
min={0} min={0}
max={50} max={50}
@@ -225,7 +230,7 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
}} }}
/> />
</Form.Item> </Form.Item>
<Form.Item label="Right Margin"> <Form.Item label={t("printing.generic.marginRight")}>
<Slider <Slider
min={0} min={0}
max={50} max={50}
@@ -236,7 +241,7 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
}} }}
/> />
</Form.Item> </Form.Item>
<Form.Item label="Bottom Margin"> <Form.Item label={t("printing.generic.marginBottom")}>
<Slider <Slider
min={0} min={0}
max={50} max={50}
@@ -247,7 +252,7 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
}} }}
/> />
</Form.Item> </Form.Item>
<Form.Item label="Columns"> <Form.Item label={t("printing.generic.columns")}>
<Slider <Slider
min={1} min={1}
max={5} max={5}
@@ -257,7 +262,7 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
}} }}
/> />
</Form.Item> </Form.Item>
<Form.Item label="Paper Size"> <Form.Item label={t("printing.generic.paperSize")}>
<Select <Select
value={paperSize} value={paperSize}
onChange={(value) => setPaperSize(value)} onChange={(value) => setPaperSize(value)}
@@ -269,7 +274,7 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
))} ))}
</Select> </Select>
</Form.Item> </Form.Item>
<Form.Item label="Row Height"> <Form.Item label={t("printing.generic.rowHeight")}>
<Slider <Slider
min={30} min={30}
max={200} max={200}
@@ -280,7 +285,7 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
}} }}
/> />
</Form.Item> </Form.Item>
<Form.Item label="Show Border"> <Form.Item label={t("printing.generic.showBorder")}>
<Switch <Switch
checked={showBorder} checked={showBorder}
onChange={(checked) => setShowBorder(checked)} onChange={(checked) => setShowBorder(checked)}
@@ -289,7 +294,7 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
{extraSettings && <Divider />} {extraSettings && <Divider />}
{extraSettings} {extraSettings}
<Divider /> <Divider />
<Form.Item label="Preview Scale"> <Form.Item label={t("printing.generic.previewScale")}>
<Slider <Slider
min={0.1} min={0.1}
max={1} max={1}

11
client/src/components/printing/qrCodePrintingDialog.tsx
View File

@@ -1,6 +1,7 @@
import { Form, QRCode, Slider, Switch } from "antd"; import { Form, QRCode, Slider, Switch } from "antd";
import { useSavedState } from "../../utils/saveload"; import { useSavedState } from "../../utils/saveload";
import PrintingDialog from "./printingDialog"; import PrintingDialog from "./printingDialog";
import { useTranslate } from "@refinedev/core";
interface QRCodeData { interface QRCodeData {
value: string; value: string;
@@ -19,6 +20,8 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
items, items,
onCancel, onCancel,
}) => { }) => {
const t = useTranslate();
const [showContent, setShowContent] = useSavedState( const [showContent, setShowContent] = useSavedState(
"print-showContent", "print-showContent",
true true
@@ -55,17 +58,17 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
return ( return (
<PrintingDialog <PrintingDialog
visible={visible} visible={visible}
title="QR Code Printing" title={t("printing.qrcode.title")}
items={elements} items={elements}
extraSettings={ extraSettings={
<> <>
<Form.Item label="Show QR Code Content"> <Form.Item label={t("printing.qrcode.showContent")}>
<Switch <Switch
checked={showContent} checked={showContent}
onChange={(checked) => setShowContent(checked)} onChange={(checked) => setShowContent(checked)}
/> />
</Form.Item> </Form.Item>
<Form.Item label="Content Text Size"> <Form.Item label={t("printing.qrcode.textSize")}>
<Slider <Slider
disabled={!showContent} disabled={!showContent}
tooltip={{ formatter: (value) => `${value} mm` }} tooltip={{ formatter: (value) => `${value} mm` }}
@@ -78,7 +81,7 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
}} }}
/> />
</Form.Item> </Form.Item>
<Form.Item label="Show Spoolman Icon"> <Form.Item label={t("printing.qrcode.showSpoolmanIcon")}>
<Switch <Switch
checked={showSpoolmanIcon} checked={showSpoolmanIcon}
onChange={(checked) => setShowSpoolmanIcon(checked)} onChange={(checked) => setShowSpoolmanIcon(checked)}

7
client/src/components/selectAndPrintDialog.tsx
View File

@@ -6,8 +6,11 @@ import QRCodePrintingDialog from "./printing/qrCodePrintingDialog";
import { Button } from "antd"; import { Button } from "antd";
import { ISpool } from "../pages/spools/model"; import { ISpool } from "../pages/spools/model";
import { PrinterOutlined } from "@ant-design/icons"; import { PrinterOutlined } from "@ant-design/icons";
import { useTranslate } from "@refinedev/core";
const SelectAndPrint: React.FC = () => { const SelectAndPrint: React.FC = () => {
const t = useTranslate();
const [step, setStep] = React.useState(0); const [step, setStep] = React.useState(0);
const [selectedSpools, setSelectedSpools] = React.useState<ISpool[]>([]); const [selectedSpools, setSelectedSpools] = React.useState<ISpool[]>([]);
return ( return (
@@ -19,11 +22,11 @@ const SelectAndPrint: React.FC = () => {
setStep(1); setStep(1);
}} }}
> >
Print QR Codes {t("printing.qrcode.button")}
</Button> </Button>
<SpoolSelectModal <SpoolSelectModal
visible={step === 1} visible={step === 1}
description="Select spools to print QR codes for." description={t("printing.spoolSelect.description")}
onCancel={() => { onCancel={() => {
setStep(0); setStep(0);
}} }}

23
client/src/components/spoolSelectModal.tsx
View File

@@ -1,11 +1,12 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { Modal, Table, Checkbox, Space, Row, Col } from "antd"; import { Modal, Table, Checkbox, Space, Row, Col, message } from "antd";
import { ISpool } from "../pages/spools/model"; import { ISpool } from "../pages/spools/model";
import { FilteredColumn, SortedColumn, SpoolIconColumn } from "./column"; import { FilteredColumn, SortedColumn, SpoolIconColumn } from "./column";
import { TableState } from "../utils/saveload"; import { TableState } from "../utils/saveload";
import { useTable } from "@refinedev/antd"; import { useTable } from "@refinedev/antd";
import { genericSorter, typeSorters } from "../utils/sorting"; import { genericSorter, typeSorters } from "../utils/sorting";
import { genericFilterer, typeFilters } from "../utils/filtering"; import { genericFilterer, typeFilters } from "../utils/filtering";
import { t } from "i18next";
interface Props { interface Props {
visible: boolean; visible: boolean;
@@ -27,6 +28,7 @@ const SpoolSelectModal: React.FC<Props> = ({
}) => { }) => {
const [selectedItems, setSelectedItems] = useState<number[]>([]); const [selectedItems, setSelectedItems] = useState<number[]>([]);
const [showArchived, setShowArchived] = useState(false); const [showArchived, setShowArchived] = useState(false);
const [messageApi, contextHolder] = message.useMessage();
const { tableProps, sorters, filters, current, pageSize } = useTable<ISpool>({ const { tableProps, sorters, filters, current, pageSize } = useTable<ISpool>({
meta: { meta: {
@@ -112,16 +114,24 @@ const SpoolSelectModal: React.FC<Props> = ({
return ( return (
<Modal <Modal
title="Select Spools" title={t("printing.spoolSelect.title")}
open={visible} open={visible}
onCancel={onCancel} onCancel={onCancel}
onOk={() => { onOk={() => {
if (selectedItems.length === 0) {
messageApi.open({
type: "error",
content: t("printing.spoolSelect.noSpoolsSelected"),
});
return;
}
onContinue( onContinue(
dataSource.filter((spool) => selectedItems.includes(spool.id)) dataSource.filter((spool) => selectedItems.includes(spool.id))
); );
}} }}
width={600} width={600}
> >
{contextHolder}
<Space direction="vertical" style={{ width: "100%" }}> <Space direction="vertical" style={{ width: "100%" }}>
{description && <div>{description}</div>} {description && <div>{description}</div>}
<Table <Table
@@ -168,13 +178,14 @@ const SpoolSelectModal: React.FC<Props> = ({
selectUnselectFiltered(e.target.checked); selectUnselectFiltered(e.target.checked);
}} }}
> >
Select/Unselect All {t("printing.spoolSelect.selectAll")}
</Checkbox> </Checkbox>
</Col> </Col>
<Col span={12}> <Col span={12}>
<div style={{ float: "right" }}> <div style={{ float: "right" }}>
{selectedItems.length} spool {t("printing.spoolSelect.selectedTotal", {
{selectedItems.length === 1 ? "" : "s"} selected count: selectedItems.length,
})}
</div> </div>
</Col> </Col>
<Col span={12}> <Col span={12}>
@@ -194,7 +205,7 @@ const SpoolSelectModal: React.FC<Props> = ({
} }
}} }}
> >
Show Archived {t("printing.spoolSelect.showArchived")}
</Checkbox> </Checkbox>
</Col> </Col>
</Row> </Row>