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,
} 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 />}