1  import { useTranslate } from "@refinedev/core";
  2  import { Col, Form, InputNumber, QRCode, Radio, RadioChangeEvent, Row, Slider, Switch, Typography } from "antd";
  3  import { ReactElement } from "react";
  4  import { getBasePath } from "../../utils/url";
  5  import { QRCodePrintSettings } from "./printing";
  6  import PrintingDialog from "./printingDialog";
  7  
  8  const { Text } = Typography;
  9  
 10  interface QRCodeData {
 11    value: string;
 12    label?: ReactElement;
 13    errorLevel?: "L" | "M" | "Q" | "H";
 14  }
 15  
 16  interface QRCodePrintingDialogProps {
 17    items: QRCodeData[];
 18    printSettings: QRCodePrintSettings;
 19    setPrintSettings: (setPrintSettings: QRCodePrintSettings) => void;
 20    extraSettings?: ReactElement;
 21    extraSettingsStart?: ReactElement;
 22    extraButtons?: ReactElement;
 23    baseUrlRoot: string;
 24    useHTTPUrl: boolean;
 25    setUseHTTPUrl: (value: boolean) => void;
 26  }
 27  
 28  const QRCodePrintingDialog = ({
 29    items,
 30    printSettings,
 31    setPrintSettings,
 32    extraSettings,
 33    extraSettingsStart,
 34    extraButtons,
 35    baseUrlRoot,
 36    useHTTPUrl,
 37    setUseHTTPUrl,
 38  }: QRCodePrintingDialogProps) => {
 39    const t = useTranslate();
 40  
 41    const showContent = printSettings?.showContent === undefined ? true : printSettings?.showContent;
 42    const showQRCodeMode = printSettings?.showQRCodeMode || "withIcon";
 43    const textSize = printSettings?.textSize || 3;
 44  
 45    const elements = items.map((item, idx) => {
 46      return (
 47        <div className="print-qrcode-item" key={idx}>
 48          {showQRCodeMode !== "no" && (
 49            <div className="print-qrcode-container">
 50              <QRCode
 51                className="print-qrcode"
 52                icon={showQRCodeMode === "withIcon" ? getBasePath() + "/favicon.svg" : undefined}
 53                value={item.value}
 54                errorLevel={item.errorLevel}
 55                type="svg"
 56                color="#000"
 57              />
 58            </div>
 59          )}
 60          {showContent && (
 61            <div className="print-qrcode-title" style={showQRCodeMode === "no" ? { paddingLeft: "1mm" } : {}}>
 62              {item.label ?? item.value}
 63            </div>
 64          )}
 65        </div>
 66      );
 67    });
 68  
 69    return (
 70      <PrintingDialog
 71        items={elements}
 72        printSettings={printSettings.printSettings}
 73        setPrintSettings={(newSettings) => {
 74          printSettings.printSettings = newSettings;
 75          setPrintSettings(printSettings);
 76        }}
 77        extraButtons={extraButtons}
 78        extraSettingsStart={extraSettingsStart}
 79        extraSettings={
 80          <>
 81            <Form.Item label={t("printing.qrcode.showQRCode")}>
 82              <Radio.Group
 83                options={[
 84                  { label: t("printing.qrcode.showQRCodeMode.no"), value: "no" },
 85                  {
 86                    label: t("printing.qrcode.showQRCodeMode.simple"),
 87                    value: "simple",
 88                  },
 89                  { label: t("printing.qrcode.showQRCodeMode.withIcon"), value: "withIcon" },
 90                ]}
 91                onChange={(e: RadioChangeEvent) => {
 92                  printSettings.showQRCodeMode = e.target.value;
 93                  setPrintSettings(printSettings);
 94                }}
 95                value={showQRCodeMode}
 96                optionType="button"
 97                buttonStyle="solid"
 98              />
 99            </Form.Item>
100            {showQRCodeMode !== "no" && (
101              <>
102                <Form.Item
103                  label={t("printing.qrcode.useHTTPUrl.label")}
104                  tooltip={t("printing.qrcode.useHTTPUrl.tooltip")}
105                  style={{ marginBottom: 0 }}
106                >
107                  <Radio.Group onChange={(e) => setUseHTTPUrl(e.target.value)} value={useHTTPUrl}>
108                    <Radio value={false}>{t("printing.qrcode.useHTTPUrl.options.default")}</Radio>
109                    <Radio value={true}>{t("printing.qrcode.useHTTPUrl.options.url")}</Radio>
110                  </Radio.Group>
111                </Form.Item>
112                <Form.Item label={t("printing.qrcode.useHTTPUrl.preview")}>
113                  <Text> {useHTTPUrl ? `${baseUrlRoot}/spool/show/{id}` : `WEB+SPOOLMAN:S-{id}`}</Text>
114                </Form.Item>
115              </>
116            )}
117            <Form.Item label={t("printing.qrcode.showContent")}>
118              <Switch
119                checked={showContent}
120                onChange={(checked) => {
121                  printSettings.showContent = checked;
122                  setPrintSettings(printSettings);
123                }}
124              />
125            </Form.Item>
126            <Form.Item label={t("printing.qrcode.textSize")}>
127              <Row>
128                <Col span={12}>
129                  <Slider
130                    disabled={!showContent}
131                    tooltip={{ formatter: (value) => `${value} mm` }}
132                    min={2}
133                    max={7}
134                    value={textSize}
135                    step={0.1}
136                    onChange={(value) => {
137                      printSettings.textSize = value;
138                      setPrintSettings(printSettings);
139                    }}
140                  />
141                </Col>
142                <Col span={12}>
143                  <InputNumber
144                    disabled={!showContent}
145                    min={0.01}
146                    step={0.1}
147                    style={{ margin: "0 16px" }}
148                    value={textSize}
149                    addonAfter="mm"
150                    onChange={(value) => {
151                      printSettings.textSize = value ?? 5;
152                      setPrintSettings(printSettings);
153                    }}
154                  />
155                </Col>
156              </Row>
157            </Form.Item>
158  
159            {extraSettings}
160          </>
161        }
162        style={`
163              .print-page .print-qrcode-item {
164                display: flex;
165                width: 100%;
166                height: 100%;
167                justify-content: center;
168              }
169  
170              .print-page .print-qrcode-container {
171                max-width: ${showContent ? "50%" : "100%"};
172                display: flex;
173              }
174  
175              .print-page .print-qrcode {
176                width: auto !important;
177                height: auto !important;
178                padding: 2mm;
179              }
180  
181              .print-page .print-qrcode-title {
182                flex: 1 1 auto;
183                font-size: ${textSize}mm;
184                color: #000;
185                overflow: hidden;
186              }
187  
188              .print-page canvas, .print-page svg {
189                /* display: block; */
190                object-fit: contain;
191                height: 100% !important;
192                width: 100% !important;
193                max-height: 100%;
194                max-width: 100%;
195              }
196              `}
197      />
198    );
199  };
200  
201  export default QRCodePrintingDialog;