From e4d5e3457bc6750f1dfc2585ed67f4ffa4ff8c99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20P=C3=B6ttker?= <bjoern@poettker-holtrup.de>
Date: Fri, 8 May 2026 12:29:27 +0200
Subject: [PATCH] refactor: simplify LabelElementRow rendering by replacing
 Form.Item shouldUpdate with Form.useWatch

---
 paperless-frontend/src/pages/SettingsPage.tsx | 84 +++++++++----------
 1 file changed, 42 insertions(+), 42 deletions(-)

diff --git a/paperless-frontend/src/pages/SettingsPage.tsx b/paperless-frontend/src/pages/SettingsPage.tsx
index be81853..eaf93aa 100644
--- a/paperless-frontend/src/pages/SettingsPage.tsx
+++ b/paperless-frontend/src/pages/SettingsPage.tsx
@@ -11,6 +11,7 @@ import {
   QrcodeOutlined, UnorderedListOutlined, PrinterOutlined,
 } from '@ant-design/icons';
 import type { ColumnsType } from 'antd/es/table';
+import type { FormInstance } from 'antd';
 import {
   settingsApi,
   type SettingDocType, type SettingPostprocessing, type SettingUserClient,
@@ -1781,7 +1782,9 @@ function InboxActionsForTemplateEditor({ templateId }: { templateId: number }) {
 // Eingangsdokumentarten Tab (ehemals Barcode-Vorlagen)
 // ═══════════════════════════════════════════════════════════════════
 
-function LabelElementRow({ listName, remove }: { listName: number; remove: (n: number) => void }) {
+function LabelElementRow({ form, listName, remove }: { form: FormInstance; listName: number; remove: (n: number) => void }) {
+  const type = Form.useWatch(['LabelLayout', listName, 'type'], form);
+
   return (
     <Card
       size="small"
@@ -1795,46 +1798,43 @@ function LabelElementRow({ listName, remove }: { listName: number; remove: (n: n
           { value: 'line', label: 'Linie' },
         ]} />
       </Form.Item>
-      <Form.Item noStyle shouldUpdate>
-        {({ getFieldValue }) => {
-          const type = getFieldValue(['LabelLayout', listName, 'type']);
-          if (type === 'text') return (
-            <Row gutter={8}>
-              <Col span={4}><Form.Item name={[listName, 'x']} label="X (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col>
-              <Col span={4}><Form.Item name={[listName, 'y']} label="Y (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col>
-              <Col span={4}><Form.Item name={[listName, 'fontSize']} label="Schrift (mm)"><InputNumber min={0.5} step={0.5} style={{ width: '100%' }} /></Form.Item></Col>
-              <Col span={4}><Form.Item name={[listName, 'maxWidth']} label="Max. B. (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col>
-              <Col span={4}><Form.Item name={[listName, 'bold']} label="Fett" valuePropName="checked"><Checkbox /></Form.Item></Col>
-              <Col span={4}><Form.Item name={[listName, 'align']} label="Ausrichtung">
-                <Select allowClear style={{ width: '100%' }} options={[
-                  { value: 'left', label: 'Links' },
-                  { value: 'center', label: 'Mitte' },
-                  { value: 'right', label: 'Rechts' },
-                ]} />
-              </Form.Item></Col>
-              <Col span={24}><Form.Item name={[listName, 'content']} label="Inhalt"><Input placeholder="{nummer} oder {datum}" /></Form.Item></Col>
-            </Row>
-          );
-          if (type === 'qr') return (
-            <Row gutter={8}>
-              <Col span={4}><Form.Item name={[listName, 'x']} label="X (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col>
-              <Col span={4}><Form.Item name={[listName, 'y']} label="Y (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col>
-              <Col span={4}><Form.Item name={[listName, 'sizeMm']} label="Größe (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col>
-              <Col span={12}><Form.Item name={[listName, 'content']} label="Inhalt"><Input placeholder="{number}" /></Form.Item></Col>
-            </Row>
-          );
-          if (type === 'line') return (
-            <Row gutter={8}>
-              <Col span={4}><Form.Item name={[listName, 'x1']} label="X1 (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col>
-              <Col span={4}><Form.Item name={[listName, 'y1']} label="Y1 (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col>
-              <Col span={4}><Form.Item name={[listName, 'x2']} label="X2 (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col>
-              <Col span={4}><Form.Item name={[listName, 'y2']} label="Y2 (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col>
-              <Col span={4}><Form.Item name={[listName, 'lineWidth']} label="Stärke (mm)"><InputNumber step={0.1} style={{ width: '100%' }} /></Form.Item></Col>
-            </Row>
-          );
-          return null;
-        }}
-      </Form.Item>
+
+      {type === 'text' && (
+        <Row gutter={8}>
+          <Col span={4}><Form.Item name={[listName, 'x']} label="X (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col>
+          <Col span={4}><Form.Item name={[listName, 'y']} label="Y (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col>
+          <Col span={4}><Form.Item name={[listName, 'fontSize']} label="Schrift (mm)"><InputNumber min={0.5} step={0.5} style={{ width: '100%' }} /></Form.Item></Col>
+          <Col span={4}><Form.Item name={[listName, 'maxWidth']} label="Max. B. (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col>
+          <Col span={4}><Form.Item name={[listName, 'bold']} label="Fett" valuePropName="checked"><Checkbox /></Form.Item></Col>
+          <Col span={4}><Form.Item name={[listName, 'align']} label="Ausrichtung">
+            <Select allowClear style={{ width: '100%' }} options={[
+              { value: 'left', label: 'Links' },
+              { value: 'center', label: 'Mitte' },
+              { value: 'right', label: 'Rechts' },
+            ]} />
+          </Form.Item></Col>
+          <Col span={24}><Form.Item name={[listName, 'content']} label="Inhalt"><Input placeholder="{nummer} oder {datum}" /></Form.Item></Col>
+        </Row>
+      )}
+
+      {type === 'qr' && (
+        <Row gutter={8}>
+          <Col span={4}><Form.Item name={[listName, 'x']} label="X (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col>
+          <Col span={4}><Form.Item name={[listName, 'y']} label="Y (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col>
+          <Col span={4}><Form.Item name={[listName, 'sizeMm']} label="Größe (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col>
+          <Col span={12}><Form.Item name={[listName, 'content']} label="Inhalt"><Input placeholder="{number}" /></Form.Item></Col>
+        </Row>
+      )}
+
+      {type === 'line' && (
+        <Row gutter={8}>
+          <Col span={4}><Form.Item name={[listName, 'x1']} label="X1 (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col>
+          <Col span={4}><Form.Item name={[listName, 'y1']} label="Y1 (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col>
+          <Col span={4}><Form.Item name={[listName, 'x2']} label="X2 (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col>
+          <Col span={4}><Form.Item name={[listName, 'y2']} label="Y2 (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col>
+          <Col span={4}><Form.Item name={[listName, 'lineWidth']} label="Stärke (mm)"><InputNumber step={0.1} style={{ width: '100%' }} /></Form.Item></Col>
+        </Row>
+      )}
     </Card>
   );
 }
@@ -2161,7 +2161,7 @@ function BarcodeTemplatesTab() {
                               {(layoutFields, { add: addEl, remove: removeEl }) => (
                                 <>
                                   {layoutFields.map(({ key, name: elName }) => (
-                                    <LabelElementRow key={key} listName={elName} remove={removeEl} />
+                                    <LabelElementRow key={key} form={form} listName={elName} remove={removeEl} />
                                   ))}
                                   <Space>
                                     <Button size="small" type="dashed" icon={<PlusOutlined />}