tonym/spoolman2
1
0
Fork 0
Code Issues 19 Pull Requests Actions 1 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": {
"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": "Spools",
"fields": {

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

@@ -53,6 +53,37 @@
"dashboard": {
"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": "Spolar",
"fields": {

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

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

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

@@ -1,6 +1,7 @@
import { Form, QRCode, Slider, Switch } from "antd";
import { useSavedState } from "../../utils/saveload";
import PrintingDialog from "./printingDialog";
import { useTranslate } from "@refinedev/core";
interface QRCodeData {
value: string;
@@ -19,6 +20,8 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
items,
onCancel,
}) => {
const t = useTranslate();
const [showContent, setShowContent] = useSavedState(
"print-showContent",
true
@@ -55,17 +58,17 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
return (
<PrintingDialog
visible={visible}
title="QR Code Printing"
title={t("printing.qrcode.title")}
items={elements}
extraSettings={
<>
<Form.Item label="Show QR Code Content">
<Form.Item label={t("printing.qrcode.showContent")}>
<Switch
checked={showContent}
onChange={(checked) => setShowContent(checked)}
/>
</Form.Item>
<Form.Item label="Content Text Size">
<Form.Item label={t("printing.qrcode.textSize")}>
<Slider
disabled={!showContent}
tooltip={{ formatter: (value) => `${value} mm` }}
@@ -78,7 +81,7 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
}}
/>
</Form.Item>
<Form.Item label="Show Spoolman Icon">
<Form.Item label={t("printing.qrcode.showSpoolmanIcon")}>
<Switch
checked={showSpoolmanIcon}
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 { ISpool } from "../pages/spools/model";
import { PrinterOutlined } from "@ant-design/icons";
import { useTranslate } from "@refinedev/core";
const SelectAndPrint: React.FC = () => {
const t = useTranslate();
const [step, setStep] = React.useState(0);
const [selectedSpools, setSelectedSpools] = React.useState<ISpool[]>([]);
return (
@@ -19,11 +22,11 @@ const SelectAndPrint: React.FC = () => {
setStep(1);
}}
>
Print QR Codes
{t("printing.qrcode.button")}
</Button>
<SpoolSelectModal
visible={step === 1}
description="Select spools to print QR codes for."
description={t("printing.spoolSelect.description")}
onCancel={() => {
setStep(0);
}}

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

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