bjoernpoettker/paperlessmanager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: simplify LabelElementRow rendering by replacing Form.Item shouldUpdate with Form.useWatch
Build and Push Multi-Platform Images / build-and-push (push) Successful in 17s
Details

Browse Source
This commit is contained in:
Björn Pöttker
2026-05-08 12:29:27 +02:00
parent 2fbbe1142b
commit e4d5e3457b
1 changed files with 42 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
paperless-frontend/src/pages/SettingsPage.tsx
+42 -42
View File
@@ -11,6 +11,7 @@ import {
QrcodeOutlined, UnorderedListOutlined, PrinterOutlined, QrcodeOutlined, UnorderedListOutlined, PrinterOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table'; import type { ColumnsType } from 'antd/es/table';
import type { FormInstance } from 'antd';
import { import {
settingsApi, settingsApi,
type SettingDocType, type SettingPostprocessing, type SettingUserClient, type SettingDocType, type SettingPostprocessing, type SettingUserClient,
@@ -1781,7 +1782,9 @@ function InboxActionsForTemplateEditor({ templateId }: { templateId: number }) {
// Eingangsdokumentarten Tab (ehemals Barcode-Vorlagen) // 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 ( return (
<Card <Card
size="small" size="small"
@@ -1795,46 +1798,43 @@ function LabelElementRow({ listName, remove }: { listName: number; remove: (n: n
{ value: 'line', label: 'Linie' }, { value: 'line', label: 'Linie' },
]} /> ]} />
</Form.Item> </Form.Item>
<Form.Item noStyle shouldUpdate>
{({ getFieldValue }) => { {type === 'text' && (
const type = getFieldValue(['LabelLayout', listName, 'type']); <Row gutter={8}>
if (type === 'text') return ( <Col span={4}><Form.Item name={[listName, 'x']} label="X (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col>
<Row gutter={8}> <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, 'x']} label="X (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, 'y']} label="Y (mm)"><InputNumber 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, 'fontSize']} label="Schrift (mm)"><InputNumber min={0.5} step={0.5} 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, 'maxWidth']} label="Max. B. (mm)"><InputNumber style={{ width: '100%' }} /></Form.Item></Col> <Col span={4}><Form.Item name={[listName, 'align']} label="Ausrichtung">
<Col span={4}><Form.Item name={[listName, 'bold']} label="Fett" valuePropName="checked"><Checkbox /></Form.Item></Col> <Select allowClear style={{ width: '100%' }} options={[
<Col span={4}><Form.Item name={[listName, 'align']} label="Ausrichtung"> { value: 'left', label: 'Links' },
<Select allowClear style={{ width: '100%' }} options={[ { value: 'center', label: 'Mitte' },
{ value: 'left', label: 'Links' }, { value: 'right', label: 'Rechts' },
{ 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>
</Form.Item></Col> </Row>
<Col span={24}><Form.Item name={[listName, 'content']} label="Inhalt"><Input placeholder="{nummer} oder {datum}" /></Form.Item></Col> )}
</Row>
); {type === 'qr' && (
if (type === 'qr') return ( <Row gutter={8}>
<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, '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, '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={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>
<Col span={12}><Form.Item name={[listName, 'content']} label="Inhalt"><Input placeholder="{number}" /></Form.Item></Col> </Row>
</Row> )}
);
if (type === 'line') return ( {type === 'line' && (
<Row gutter={8}> <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, '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, '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, '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, '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> <Col span={4}><Form.Item name={[listName, 'lineWidth']} label="Stärke (mm)"><InputNumber step={0.1} style={{ width: '100%' }} /></Form.Item></Col>
</Row> </Row>
); )}
return null;
}}
</Form.Item>
</Card> </Card>
); );
} }
@@ -2161,7 +2161,7 @@ function BarcodeTemplatesTab() {
{(layoutFields, { add: addEl, remove: removeEl }) => ( {(layoutFields, { add: addEl, remove: removeEl }) => (
<> <>
{layoutFields.map(({ key, name: elName }) => ( {layoutFields.map(({ key, name: elName }) => (
<LabelElementRow key={key} listName={elName} remove={removeEl} /> <LabelElementRow key={key} form={form} listName={elName} remove={removeEl} />
))} ))}
<Space> <Space>
<Button size="small" type="dashed" icon={<PlusOutlined />} <Button size="small" type="dashed" icon={<PlusOutlined />}