feat: Add base_url and URB based QR code on labels

client/public/locales/cs/common.json

@@ -119,8 +119,13 @@
             "showFilamentComment": "Poznámka k filamentu",
             "showVendorComment": "Poznámka k výrobci",
             "useHTTPUrl": {
-                "label": "Použít HTTP(S) URL",
-                "tooltip": "Použít HTTP(S) odkaz v QR kódu. Pokud je vypnuto, použije se speciální kód, který půjde načíst pouze skrz skener v aplikaci Spoolman."
+                "label": "Odkaz na QR kód",
+                "tooltip": "Použije proprietární odkaz, který bude fungovat pouze v případě, že bude skenován pomocí funkce skenování Spoolman (výchozí). Adresa URL používá buď základní adresu URL zadanou v nastavení, nebo adresu URL aktuální stránky, pokud není nastavena.",
+                "options": {
+                    "default": "Výchozí",
+                    "url": "URL"
+                },
+                "preview": "Náhled:"
             },
             "template": "Šablona štítku",
             "templateHelp": "Pomocí {} vložíte hodnoty objektu cívky jako text. Například {id} bude nahrazeno ID cívky nebo {filament.material} bude nahrazeno materiálem cívky. Text uzavřete dvojitou hvězdičkou **, aby byl tučný. Kliknutím na tlačítko zobrazíte seznam všech dostupných značek.",
@@ -379,9 +384,9 @@
             "currency": {
                 "label": "Měna"
             },
-            "qr_code_url": {
-                "label": "URL pro QR kódy",
-                "tooltip": "Základ URL pro generování QR kódů. Pokud můžete přistupovat ke svému Spoolmanovi přes více URL, nastavte zde vaší 'kanonickou' URL instance Spoolmana."
+            "base_url": {
+                "label": "Základní URL",
+                "tooltip": "Základní adresa URL, která se má použít při generování funkcí, jako jsou QR kódy"
             }
         },
         "settings": "Nastavení"

client/public/locales/en/common.json

@@ -116,8 +116,13 @@
             "showFilamentComment": "Filament Comment",
             "showVendorComment": "Vendor Comment",
             "useHTTPUrl": {
-                "label": "Use HTTP(S) link in QR code",
-                "tooltip": "Uses either the base URL specified in settings, or the current page URL if not set. If disabled will use proprietary link that will work only if scanned from Spoolman's scanning feature."
+                "label": "QR code link",
+                "tooltip": "Will use proprietary link that will work only if scanned from Spoolman's scanning feature (default). URL uses either the base URL specified in settings, or the current page URL if not set.",
+                "options": {
+                    "default": "Default",
+                    "url": "URL"
+                },
+                "preview": "Preview:"
             },
             "showQRCode": "Print QR Code",
             "showQRCodeMode": {
@@ -311,9 +316,9 @@
             "currency": {
                 "label": "Currency"
             },
-            "qr_code_url": {
-                "label": "URL for QR codes",
-                "tooltip": "The base URL to use when generating QR codes. If you can access your Spoolman via multiple URLs, set this to the 'canonical' URL of your Spoolman instance."
+            "base_url": {
+                "label": "Base URL",
+                "tooltip": "The base URL to use when generating features such as QR codes."
             }
         },
         "extra_fields": {

client/src/pages/printing/qrCodePrintingDialog.tsx

@@ -1,8 +1,10 @@
 import { useTranslate } from "@refinedev/core";
-import { Col, Form, InputNumber, QRCode, Radio, RadioChangeEvent, Row, Slider, Switch } from "antd";
+import { Col, Form, InputNumber, QRCode, Radio, RadioChangeEvent, Row, Slider, Switch, Typography } from "antd";
 import { QRCodePrintSettings } from "./printing";
 import PrintingDialog from "./printingDialog";
 
+const { Text } = Typography;
+
 interface QRCodeData {
   value: string;
   label?: JSX.Element;
@@ -16,6 +18,9 @@ interface QRCodePrintingDialogProps {
   extraSettings?: JSX.Element;
   extraSettingsStart?: JSX.Element;
   extraButtons?: JSX.Element;
+  baseUrlRoot: string;
+  useHTTPUrl: boolean;
+  setUseHTTPUrl: (value: boolean) => void;
 }
 
 const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
@@ -25,6 +30,9 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
   extraSettings,
   extraSettingsStart,
   extraButtons,
+  baseUrlRoot,
+  useHTTPUrl,
+  setUseHTTPUrl,
 }) => {
   const t = useTranslate();
 
@@ -87,6 +95,23 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
               buttonStyle="solid"
             />
           </Form.Item>
+          {showQRCodeMode !== "no" && (
+            <>
+              <Form.Item
+                label={t("printing.qrcode.useHTTPUrl.label")}
+                tooltip={t("printing.qrcode.useHTTPUrl.tooltip")}
+                style={{ marginBottom: 0 }}
+              >
+                <Radio.Group onChange={(e) => setUseHTTPUrl(e.target.value)} value={useHTTPUrl}>
+                  <Radio value={false}>{t("printing.qrcode.useHTTPUrl.options.default")}</Radio>
+                  <Radio value={true}>{t("printing.qrcode.useHTTPUrl.options.url")}</Radio>
+                </Radio.Group>
+              </Form.Item>
+              <Form.Item label={t("printing.qrcode.useHTTPUrl.preview")}>
+                <Text> {useHTTPUrl ? `${baseUrlRoot}/spool/show/{id}` : `web+spoolman:s-{id}`}</Text>
+              </Form.Item>
+            </>
+          )}
           <Form.Item label={t("printing.qrcode.showContent")}>
             <Switch
               checked={showContent}
@@ -128,7 +153,6 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
               </Col>
             </Row>
           </Form.Item>
-
           {extraSettings}
         </>
       }

client/src/pages/printing/spoolQrCodePrintingDialog.tsx

@@ -1,7 +1,7 @@
 import { CopyOutlined, DeleteOutlined, PlusOutlined, SaveOutlined } from "@ant-design/icons";
 import { useGetSetting } from "../../utils/querySettings";
 import { useTranslate } from "@refinedev/core";
-import { Button, Flex, Form, Input, Modal, Popconfirm, Select, Table, Typography, message, Switch } from "antd";
+import { Button, Flex, Form, Input, Modal, Popconfirm, Select, Table, Typography, message } from "antd";
 import TextArea from "antd/es/input/TextArea";
 import { useState } from "react";
 import { v4 as uuidv4 } from "uuid";
@@ -238,6 +238,9 @@ Lot Nr: {lot_nr}
           curPreset.labelSettings = newSettings;
           updateCurrentPreset(curPreset);
         }}
+        baseUrlRoot={baseUrlRoot}
+        useHTTPUrl={useHTTPUrl}
+        setUseHTTPUrl={setUseHTTPUrl}
         extraSettingsStart={
           <>
             <Form.Item label={t("printing.generic.settings")}>
@@ -323,9 +326,6 @@ Lot Nr: {lot_nr}
                 }}
               />
             </Form.Item>
-            <Form.Item label={t("printing.qrcode.useHTTPUrl.label")} tooltip={t("printing.qrcode.useHTTPUrl.tooltip")}>
-              <Switch checked={useHTTPUrl} onChange={(checked) => setUseHTTPUrl(checked)} />
-            </Form.Item>
             <Modal open={templateHelpOpen} footer={null} onCancel={() => setTemplateHelpOpen(false)}>
               <Table
                 size="small"

client/src/pages/settings/generalSettings.tsx

@@ -71,19 +71,19 @@ export function GeneralSettings() {
         </Form.Item>
 
         <Form.Item
-          label={t("settings.general.qr_code_url.label")}
-          tooltip={t("settings.general.qr_code_url.tooltip")}
-          name="qr_code_url"
+          label={t("settings.general.base_url.label")}
+          tooltip={t("settings.general.base_url.tooltip")}
+          name="base_url"
           rules={[
             {
               required: false,
             },
             {
-              pattern: /^https?:\/\/.*/,
+              pattern: /^https?:\/\/.+(?<!\/)$/,
             },
           ]}
         >
-          <Input placeholder="https://example.com:8000/" />
+          <Input placeholder="https://example.com:8000" />
         </Form.Item>
 
         <Form.Item wrapperCol={{ offset: 8, span: 16 }}>