From 0043f536eea01e4a6b8f050064d39073362f4bb2 Mon Sep 17 00:00:00 2001
From: Donkie <daniel.cf.hultgren@gmail.com>
Date: Sun, 30 Jul 2023 10:20:46 +0200
Subject: [PATCH] Client: Translations for qr code stuff

Also added error if no spools were selected
---
 client/public/locales/en/common.json          | 31 +++++++++++++++++++
 client/public/locales/sv/common.json          | 31 +++++++++++++++++++
 .../components/printing/printingDialog.tsx    | 27 +++++++++-------
 .../printing/qrCodePrintingDialog.tsx         | 11 ++++---
 .../src/components/selectAndPrintDialog.tsx   |  7 +++--
 client/src/components/spoolSelectModal.tsx    | 23 ++++++++++----
 6 files changed, 107 insertions(+), 23 deletions(-)

diff --git a/client/public/locales/en/common.json b/client/public/locales/en/common.json
index 549f7ea..21abefa 100644
--- a/client/public/locales/en/common.json
+++ b/client/public/locales/en/common.json
@@ -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": {
diff --git a/client/public/locales/sv/common.json b/client/public/locales/sv/common.json
index fc5d19e..37a25fb 100644
--- a/client/public/locales/sv/common.json
+++ b/client/public/locales/sv/common.json
@@ -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": {
diff --git a/client/src/components/printing/printingDialog.tsx b/client/src/components/printing/printingDialog.tsx
index a0df3af..2778d34 100644
--- a/client/src/components/printing/printingDialog.tsx
+++ b/client/src/components/printing/printingDialog.tsx
@@ -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}
diff --git a/client/src/components/printing/qrCodePrintingDialog.tsx b/client/src/components/printing/qrCodePrintingDialog.tsx
index fbc886e..6e0dc2f 100644
--- a/client/src/components/printing/qrCodePrintingDialog.tsx
+++ b/client/src/components/printing/qrCodePrintingDialog.tsx
@@ -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)}
diff --git a/client/src/components/selectAndPrintDialog.tsx b/client/src/components/selectAndPrintDialog.tsx
index 6a812e0..455e915 100644
--- a/client/src/components/selectAndPrintDialog.tsx
+++ b/client/src/components/selectAndPrintDialog.tsx
@@ -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);
         }}
diff --git a/client/src/components/spoolSelectModal.tsx b/client/src/components/spoolSelectModal.tsx
index 8d158a5..71faed9 100644
--- a/client/src/components/spoolSelectModal.tsx
+++ b/client/src/components/spoolSelectModal.tsx
@@ -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>