Add QR Code base URL setting

This commit is contained in:
Michal Kunc
2024-03-04 00:43:20 +01:00
parent 30ee5b7cae
commit 8c19efa2c4
5 changed files with 46 additions and 5 deletions

View File

@@ -327,6 +327,10 @@
"tab": "Obecné",
"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."
}
}
}

View File

@@ -107,7 +107,10 @@
"showSpoolComment": "Spool Comment",
"showFilamentComment": "Filament Comment",
"showVendorComment": "Vendor Comment",
"useHTTPUrl": "Use HTTP(S) link in QR code"
"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."
}
},
"spoolSelect": {
"title": "Select Spools",
@@ -265,6 +268,10 @@
"tab": "General",
"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."
}
},
"extra_fields": {

View File

@@ -3,6 +3,7 @@ import { IFilament } from "../../pages/filaments/model";
import { ISpool } from "../../pages/spools/model";
import QRCodePrintingDialog from "./qrCodePrintingDialog";
import { useSavedState } from "../../utils/saveload";
import { useGetSetting } from "../../utils/querySettings";
import { useTranslate } from "@refinedev/core";
interface SpoolQRCodePrintingDialog {
@@ -13,6 +14,8 @@ interface SpoolQRCodePrintingDialog {
const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ visible, items, onCancel }) => {
const t = useTranslate();
const baseUrlSetting = useGetSetting("qr_code_url");
const baseUrlRoot = baseUrlSetting.data?.value !== undefined && JSON.parse(baseUrlSetting.data?.value) !== "" ? JSON.parse(baseUrlSetting.data?.value) : window.location.origin;
const [showVendor, setShowVendor] = useSavedState("print-showVendor", true);
const [showLotNr, setShowLotNr] = useSavedState("print-showLotNr", true);
@@ -21,7 +24,7 @@ const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ visibl
const [showSpoolComment, setShowSpoolComment] = useSavedState("print-showSpoolComment", false);
const [showFilamentComment, setShowFilamentComment] = useSavedState("print-showFilamentComment", false);
const [showVendorComment, setShowVendorComment] = useSavedState("print-showVendorComment", false);
const [useHTTPUrl, setUseHTTPUrl] = useSavedState("print-useHTTPUrl", false);
const [useHTTPUrl, setUseHTTPUrl] = useSavedState("print-useHTTPUrl", baseUrlSetting.data?.value !== "");
const formatFilament = (filament: IFilament) => {
let vendorPrefix = "";
@@ -50,7 +53,7 @@ const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ visibl
const tempLine = temps.join(" - ");
return {
value: useHTTPUrl ? `${window.location.origin}/spool/show/${spool.id}` : `web+spoolman:s-${spool.id}`,
value: useHTTPUrl ? `${baseUrlRoot}/spool/show/${spool.id}` : `web+spoolman:s-${spool.id}`,
label: (
<p
style={{
@@ -127,7 +130,7 @@ const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ visibl
<Form.Item label={t("printing.qrcode.showVendorComment")}>
<Switch checked={showVendorComment} onChange={(checked) => setShowVendorComment(checked)} />
</Form.Item>
<Form.Item label={t("printing.qrcode.useHTTPUrl")}>
<Form.Item label={t("printing.qrcode.useHTTPUrl.label")} tooltip={t("printing.qrcode.useHTTPUrl.tooltip")}>
<Switch checked={useHTTPUrl} onChange={(checked) => setUseHTTPUrl(checked)} />
</Form.Item>
</>

View File

@@ -15,6 +15,7 @@ export function GeneralSettings() {
if (settings.data) {
form.setFieldsValue({
currency: JSON.parse(settings.data.currency.value),
qr_code_url: JSON.parse(settings.data.qr_code_url.value),
});
}
}, [settings.data, form]);
@@ -27,7 +28,7 @@ export function GeneralSettings() {
}, [setSetting.isSuccess, messageApi, t]);
// Handle form submit
const onFinish = (values: { currency: string }) => {
const onFinish = (values: { currency: string, qr_code_url: string }) => {
// Check if the currency has changed
if (settings.data?.currency.value !== JSON.stringify(values.currency)) {
setSetting.mutate({
@@ -35,6 +36,13 @@ export function GeneralSettings() {
value: JSON.stringify(values.currency),
});
}
// Check if the QR code URL has changed
if (settings.data?.qr_code_url.value !== JSON.stringify(values.qr_code_url)) {
setSetting.mutate({
key: "qr_code_url",
value: JSON.stringify(values.qr_code_url),
});
}
};
return (
@@ -67,6 +75,24 @@ export function GeneralSettings() {
<Input />
</Form.Item>
<Form.Item
label={t("settings.general.qr_code_url.label")}
tooltip={t("settings.general.qr_code_url.tooltip")}
name="qr_code_url"
rules={[
{
required: false,
},
{
pattern: /^https?:\/\/.*/,
},
]}
>
<Input
placeholder="https://example.com:8000/"
/>
</Form.Item>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button type="primary" htmlType="submit" loading={settings.isFetching || setSetting.isLoading}>
{t("buttons.save")}