bjoernpoettker
61d97464c3
Build and Push Multi-Platform Images / build-and-push (push) Successful in 33s
2039 lines
75 KiB
TypeScript
2039 lines
75 KiB
TypeScript
import { useEffect, useState, useCallback } from 'react';
|
|
import dayjs from 'dayjs';
|
|
import {
|
|
Tabs, Typography, Table, Button, Modal, Form, Input, Select,
|
|
Switch, Checkbox, Popconfirm, message, Card, Tag, Space, Divider, InputNumber, Badge,
|
|
} from 'antd';
|
|
import {
|
|
UserOutlined, FileTextOutlined, ThunderboltOutlined,
|
|
PlusOutlined, DeleteOutlined, EditOutlined, CloudUploadOutlined,
|
|
HistoryOutlined, MinusCircleOutlined, CopyOutlined, KeyOutlined,
|
|
QrcodeOutlined, UnorderedListOutlined,
|
|
} from '@ant-design/icons';
|
|
import type { ColumnsType } from 'antd/es/table';
|
|
import {
|
|
settingsApi,
|
|
type SettingDocType, type SettingPostprocessing, type SettingUserClient,
|
|
type SettingDocField, type SettingPostprocessingAction, type SettingExportTarget,
|
|
type SettingPostprocessingLog, type FilterGroup, type FilterCondition,
|
|
INBOX_ACTION_LABELS,
|
|
type InboxAction, type InboxActionType,
|
|
} from '../api/settings';
|
|
import { clientsApi, type Client } from '../api/inbox';
|
|
import { apiKeysApi, type ApiKey } from '../api/api-keys';
|
|
import {
|
|
barcodeTemplatesApi,
|
|
type BarcodeTemplate,
|
|
} from '../api/barcode-templates';
|
|
import {
|
|
paperlessApi, type PaperlessTag, type PaperlessDocType,
|
|
type PaperlessCustomField, type PaperlessCorrespondent,
|
|
} from '../api/paperless';
|
|
import TaskLogPage from './TaskLogPage';
|
|
|
|
const { Title } = Typography;
|
|
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
// Filter Builder Component
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
|
|
const FIELD_OPTIONS = [
|
|
{ value: 'document_type', label: 'Dokumenttyp' },
|
|
{ value: 'correspondent', label: 'Absender' },
|
|
{ value: 'owner', label: 'Eigentümer' },
|
|
{ value: 'tag', label: 'Tag' },
|
|
{ value: 'title', label: 'Titel' },
|
|
{ value: 'archive_serial_number', label: 'Ablagenummer' },
|
|
];
|
|
|
|
const OPERATOR_OPTIONS = [
|
|
{ value: 'equals', label: '=' },
|
|
{ value: 'not_equals', label: '≠' },
|
|
{ value: 'contains', label: 'enthält' },
|
|
{ value: 'not_contains', label: 'enthält nicht' },
|
|
{ value: 'is_set', label: 'ist gesetzt' },
|
|
{ value: 'is_not_set', label: 'ist nicht gesetzt' },
|
|
{ value: 'gt', label: '>' },
|
|
{ value: 'lt', label: '<' },
|
|
];
|
|
|
|
function isFilterGroup(rule: FilterCondition | FilterGroup): rule is FilterGroup {
|
|
return 'combinator' in rule;
|
|
}
|
|
|
|
interface FilterBuilderProps {
|
|
value: FilterGroup;
|
|
onChange: (val: FilterGroup) => void;
|
|
tags: PaperlessTag[];
|
|
docTypes: PaperlessDocType[];
|
|
correspondents: PaperlessCorrespondent[];
|
|
customFields: PaperlessCustomField[];
|
|
}
|
|
|
|
function FilterBuilder({ value, onChange, tags, docTypes, correspondents, customFields }: FilterBuilderProps) {
|
|
const allFieldOptions = [
|
|
...FIELD_OPTIONS,
|
|
...customFields.map(cf => ({ value: `custom_field_${cf.id}`, label: `CF: ${cf.name}` })),
|
|
];
|
|
|
|
const updateRule = (index: number, updated: FilterCondition | FilterGroup) => {
|
|
const newRules = [...value.rules];
|
|
newRules[index] = updated;
|
|
onChange({ ...value, rules: newRules });
|
|
};
|
|
|
|
const removeRule = (index: number) => {
|
|
const newRules = value.rules.filter((_, i) => i !== index);
|
|
onChange({ ...value, rules: newRules });
|
|
};
|
|
|
|
const addCondition = () => {
|
|
onChange({
|
|
...value,
|
|
rules: [...value.rules, { field: 'document_type', operator: 'equals', value: null }],
|
|
});
|
|
};
|
|
|
|
const addGroup = () => {
|
|
onChange({
|
|
...value,
|
|
rules: [...value.rules, { combinator: 'AND', rules: [] }],
|
|
});
|
|
};
|
|
|
|
const renderValueInput = (cond: FilterCondition, onUpdate: (val: any) => void) => {
|
|
if (cond.operator === 'is_set' || cond.operator === 'is_not_set') return null;
|
|
|
|
if (cond.field === 'document_type') {
|
|
return (
|
|
<Select value={cond.value ?? undefined} onChange={onUpdate} style={{ minWidth: 160 }} showSearch optionFilterProp="children" allowClear>
|
|
{(docTypes || []).map(d => <Select.Option key={d.id} value={d.id}>{d.name}</Select.Option>)}
|
|
</Select>
|
|
);
|
|
}
|
|
if (cond.field === 'correspondent') {
|
|
return (
|
|
<Select value={cond.value ?? undefined} onChange={onUpdate} style={{ minWidth: 160 }} showSearch optionFilterProp="children" allowClear>
|
|
{(correspondents || []).map(c => <Select.Option key={c.id} value={c.id}>{c.name}</Select.Option>)}
|
|
</Select>
|
|
);
|
|
}
|
|
if (cond.field === 'tag') {
|
|
return (
|
|
<Select value={cond.value ?? undefined} onChange={onUpdate} style={{ minWidth: 160 }} showSearch optionFilterProp="children" allowClear>
|
|
{(tags || []).map(t => <Select.Option key={t.id} value={t.id}>{t.name}</Select.Option>)}
|
|
</Select>
|
|
);
|
|
}
|
|
if (cond.field.startsWith('custom_field_')) {
|
|
const cfId = parseInt(cond.field.replace('custom_field_', ''), 10);
|
|
const cf = (customFields || []).find(c => c.id === cfId);
|
|
const selectOptions = cf?.extra_data?.select_options;
|
|
if (Array.isArray(selectOptions)) {
|
|
return (
|
|
<Select value={cond.value ?? undefined} onChange={onUpdate} style={{ minWidth: 160 }} showSearch optionFilterProp="children" allowClear>
|
|
{selectOptions.filter(opt => opt && (opt.id || opt.label)).map((opt: any) => (
|
|
<Select.Option key={opt.id ?? opt.label} value={opt.label}>{opt.label}</Select.Option>
|
|
))}
|
|
</Select>
|
|
);
|
|
}
|
|
}
|
|
|
|
return <Input value={cond.value ?? ''} onChange={e => onUpdate(e.target.value)} style={{ minWidth: 160 }} placeholder="Wert" />;
|
|
};
|
|
|
|
return (
|
|
<div style={{ border: '1px solid #d9d9d9', borderRadius: 8, padding: 12, background: '#fafafa' }}>
|
|
<Space style={{ marginBottom: 8 }}>
|
|
<Select
|
|
value={value.combinator}
|
|
onChange={c => onChange({ ...value, combinator: c })}
|
|
style={{ width: 80 }}
|
|
>
|
|
<Select.Option value="AND">UND</Select.Option>
|
|
<Select.Option value="OR">ODER</Select.Option>
|
|
</Select>
|
|
<span style={{ color: '#888', fontSize: 12 }}>Alle Bedingungen dieser Gruppe müssen zutreffen</span>
|
|
</Space>
|
|
|
|
{value.rules.map((rule, idx) => (
|
|
<div key={idx} style={{ marginBottom: 8 }}>
|
|
{isFilterGroup(rule) ? (
|
|
<div style={{ marginLeft: 16 }}>
|
|
<FilterBuilder
|
|
value={rule}
|
|
onChange={updated => updateRule(idx, updated)}
|
|
tags={tags} docTypes={docTypes} correspondents={correspondents} customFields={customFields}
|
|
/>
|
|
<Button type="link" danger icon={<MinusCircleOutlined />} onClick={() => removeRule(idx)} size="small">
|
|
Gruppe entfernen
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<Space wrap>
|
|
<Select
|
|
value={rule.field}
|
|
onChange={f => updateRule(idx, { ...rule, field: f, value: null })}
|
|
style={{ minWidth: 160 }}
|
|
showSearch optionFilterProp="children"
|
|
>
|
|
{allFieldOptions.map(o => <Select.Option key={o.value} value={o.value}>{o.label}</Select.Option>)}
|
|
</Select>
|
|
<Select
|
|
value={rule.operator}
|
|
onChange={op => updateRule(idx, { ...rule, operator: op })}
|
|
style={{ width: 140 }}
|
|
>
|
|
{OPERATOR_OPTIONS.map(o => <Select.Option key={o.value} value={o.value}>{o.label}</Select.Option>)}
|
|
</Select>
|
|
{renderValueInput(rule, val => updateRule(idx, { ...rule, value: val }))}
|
|
<Button type="text" danger icon={<MinusCircleOutlined />} onClick={() => removeRule(idx)} />
|
|
</Space>
|
|
)}
|
|
</div>
|
|
))}
|
|
|
|
<Space style={{ marginTop: 4 }}>
|
|
<Button type="dashed" size="small" icon={<PlusOutlined />} onClick={addCondition}>Bedingung</Button>
|
|
<Button type="dashed" size="small" icon={<PlusOutlined />} onClick={addGroup}>Gruppe</Button>
|
|
</Space>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
// Benutzer & Betriebe Tab
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
|
|
function UserClientsTab() {
|
|
const [data, setData] = useState<SettingUserClient[]>([]);
|
|
const [clients, setClients] = useState<Client[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [modalOpen, setModalOpen] = useState(false);
|
|
const [form] = Form.useForm();
|
|
|
|
const load = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const [ucs, cls] = await Promise.all([
|
|
settingsApi.getUserClients(),
|
|
clientsApi.getMyClients(),
|
|
]);
|
|
setData(ucs);
|
|
setClients(cls);
|
|
} finally { setLoading(false); }
|
|
}, []);
|
|
|
|
useEffect(() => { load(); }, [load]);
|
|
|
|
const handleAdd = async () => {
|
|
const values = await form.validateFields();
|
|
await settingsApi.createUserClient(values);
|
|
message.success('Zuordnung erstellt');
|
|
setModalOpen(false);
|
|
form.resetFields();
|
|
load();
|
|
};
|
|
|
|
const handleDelete = async (id: number) => {
|
|
await settingsApi.deleteUserClient(id);
|
|
message.success('Gelöscht');
|
|
load();
|
|
};
|
|
|
|
const columns: ColumnsType<SettingUserClient> = [
|
|
{ title: 'User ID', dataIndex: 'UserId', key: 'userId' },
|
|
{
|
|
title: 'Betrieb',
|
|
key: 'client',
|
|
render: (_, r) => clients.find(c => c.Id === r.ClientId)?.Name ?? r.ClientId,
|
|
},
|
|
{
|
|
title: 'Rolle',
|
|
dataIndex: 'Role',
|
|
key: 'role',
|
|
render: (r: string) => <Tag color={r === 'admin' ? 'red' : r === 'editor' ? 'blue' : 'default'}>{r}</Tag>,
|
|
},
|
|
{
|
|
title: '',
|
|
key: 'actions',
|
|
width: 80,
|
|
render: (_, record) => (
|
|
<Popconfirm title="Wirklich löschen?" onConfirm={() => handleDelete(record.Id)}>
|
|
<Button danger icon={<DeleteOutlined />} size="small" />
|
|
</Popconfirm>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<Button type="primary" icon={<PlusOutlined />} onClick={() => setModalOpen(true)} style={{ marginBottom: 16 }}>
|
|
Zuordnung hinzufügen
|
|
</Button>
|
|
<Table dataSource={data} columns={columns} loading={loading} rowKey="Id" size="small" pagination={false} />
|
|
<Modal title="Neue Zuordnung" open={modalOpen} onOk={handleAdd} onCancel={() => setModalOpen(false)}>
|
|
<Form form={form} layout="vertical">
|
|
<Form.Item name="UserId" label="User ID (Authentik)" rules={[{ required: true }]}>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item name="ClientId" label="Betrieb" rules={[{ required: true }]}>
|
|
<Select>
|
|
{clients.map(c => <Select.Option key={c.Id} value={c.Id}>{c.Name}</Select.Option>)}
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item name="Role" label="Rolle" initialValue="editor">
|
|
<Select>
|
|
<Select.Option value="viewer">Viewer</Select.Option>
|
|
<Select.Option value="editor">Editor</Select.Option>
|
|
<Select.Option value="admin">Admin</Select.Option>
|
|
</Select>
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
// Document Fields Tab
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
|
|
const FIELD_TYPE_OPTIONS = [
|
|
{ value: 1, label: 'Absender' },
|
|
{ value: 2, label: 'Belegdatum' },
|
|
{ value: 3, label: 'Ablagenummer' },
|
|
{ value: 4, label: 'Custom Field' },
|
|
{ value: 5, label: 'Titel' },
|
|
];
|
|
|
|
function DocTypeFieldsTable({ docTypeId }: { docTypeId: number }) {
|
|
const [fields, setFields] = useState<SettingDocField[]>([]);
|
|
const [customFields, setCustomFields] = useState<PaperlessCustomField[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [editField, setEditField] = useState<SettingDocField | null>(null);
|
|
const [isNew, setIsNew] = useState(false);
|
|
const [form] = Form.useForm();
|
|
const [fieldType, setFieldType] = useState(4);
|
|
|
|
const load = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const [f, cf] = await Promise.all([
|
|
settingsApi.getDocFields(docTypeId),
|
|
paperlessApi.getCustomFields(),
|
|
]);
|
|
setFields(f);
|
|
setCustomFields(cf);
|
|
} finally { setLoading(false); }
|
|
}, [docTypeId]);
|
|
|
|
useEffect(() => { load(); }, [load]);
|
|
|
|
const openNew = () => {
|
|
setIsNew(true);
|
|
setFieldType(4);
|
|
form.resetFields();
|
|
form.setFieldsValue({ Type: 4, TypeIndex: null, IsRequired: false, IsRequiredPosteingang: false, VisiblePosteingang: true, Hinweis: '' });
|
|
setEditField({} as any);
|
|
};
|
|
|
|
const openEdit = (f: SettingDocField) => {
|
|
setIsNew(false);
|
|
setFieldType(f.Type);
|
|
form.setFieldsValue(f);
|
|
setEditField(f);
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
const values = await form.validateFields();
|
|
// For non-custom-field types, TypeIndex is not relevant
|
|
if (values.Type !== 4) values.TypeIndex = null;
|
|
|
|
if (isNew) {
|
|
await settingsApi.createDocField(docTypeId, values);
|
|
message.success('Feld erstellt');
|
|
} else if (editField) {
|
|
await settingsApi.updateDocField(editField.Id, values);
|
|
message.success('Feld gespeichert');
|
|
}
|
|
setEditField(null);
|
|
load();
|
|
};
|
|
|
|
const handleDelete = async (id: number) => {
|
|
await settingsApi.deleteDocField(id);
|
|
message.success('Feld gelöscht');
|
|
load();
|
|
};
|
|
|
|
const handleToggle = async (id: number, key: string, val: boolean) => {
|
|
await settingsApi.updateDocField(id, { [key]: val } as any);
|
|
load();
|
|
};
|
|
|
|
const getFieldLabel = (record: SettingDocField) => {
|
|
switch (record.Type) {
|
|
case 1: return <Tag>Absender</Tag>;
|
|
case 2: return <Tag>Belegdatum</Tag>;
|
|
case 3: return <Tag>Ablagenummer</Tag>;
|
|
case 4:
|
|
const cf = customFields.find(c => c.id === record.TypeIndex);
|
|
return <Tag color="blue">{cf ? cf.name : `CF #${record.TypeIndex}`}</Tag>;
|
|
case 5: return <Tag>Titel</Tag>;
|
|
default: return <Tag>Unbekannt ({record.Type})</Tag>;
|
|
}
|
|
};
|
|
|
|
const columns: ColumnsType<SettingDocField> = [
|
|
{ title: 'Feldtyp', key: 'type', render: (_, record) => getFieldLabel(record) },
|
|
{
|
|
title: 'Pflichtfeld', dataIndex: 'IsRequired', key: 'req', width: 100,
|
|
render: (v, r) => <Switch checked={v} size="small" onChange={val => handleToggle(r.Id, 'IsRequired', val)} />,
|
|
},
|
|
{
|
|
title: 'Pflicht (Posteingang)', dataIndex: 'IsRequiredPosteingang', key: 'reqPE', width: 140,
|
|
render: (v, r) => <Switch checked={v} size="small" onChange={val => handleToggle(r.Id, 'IsRequiredPosteingang', val)} />,
|
|
},
|
|
{
|
|
title: 'Sichtbar (Posteingang)', dataIndex: 'VisiblePosteingang', key: 'visPE', width: 150,
|
|
render: (v, r) => <Switch checked={v} size="small" onChange={val => handleToggle(r.Id, 'VisiblePosteingang', val)} />,
|
|
},
|
|
{ title: 'Hinweis', dataIndex: 'Hinweis', key: 'hinweis', ellipsis: true },
|
|
{
|
|
title: '', key: 'actions', width: 100,
|
|
render: (_, rec) => (
|
|
<Space>
|
|
<Button icon={<EditOutlined />} size="small" onClick={() => openEdit(rec)} />
|
|
<Popconfirm title="Feld wirklich löschen?" onConfirm={() => handleDelete(rec.Id)}>
|
|
<Button danger icon={<DeleteOutlined />} size="small" />
|
|
</Popconfirm>
|
|
</Space>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<Button type="dashed" size="small" icon={<PlusOutlined />} onClick={openNew} style={{ marginBottom: 8 }}>
|
|
Feld hinzufügen
|
|
</Button>
|
|
<Table dataSource={fields} columns={columns} pagination={false} size="small" loading={loading} rowKey="Id" scroll={{ x: 'max-content' }} />
|
|
|
|
<Modal
|
|
title={isNew ? 'Neues Feld' : 'Feld bearbeiten'}
|
|
open={!!editField}
|
|
onOk={handleSave}
|
|
onCancel={() => setEditField(null)}
|
|
width={500}
|
|
>
|
|
<Form form={form} layout="vertical">
|
|
<Form.Item name="Type" label="Feldtyp" rules={[{ required: true }]}>
|
|
<Select onChange={(v: number) => setFieldType(v)}>
|
|
{FIELD_TYPE_OPTIONS.map(o => (
|
|
<Select.Option key={o.value} value={o.value}>{o.label}</Select.Option>
|
|
))}
|
|
</Select>
|
|
</Form.Item>
|
|
{fieldType === 4 && (
|
|
<Form.Item name="TypeIndex" label="Custom Field" rules={[{ required: true, message: 'Bitte Custom Field auswählen' }]}>
|
|
<Select showSearch optionFilterProp="children" placeholder="Custom Field wählen...">
|
|
{customFields.map(cf => (
|
|
<Select.Option key={cf.id} value={cf.id}>{cf.name}</Select.Option>
|
|
))}
|
|
</Select>
|
|
</Form.Item>
|
|
)}
|
|
<Form.Item name="IsRequired" label="Pflichtfeld" valuePropName="checked">
|
|
<Switch />
|
|
</Form.Item>
|
|
<Form.Item name="IsRequiredPosteingang" label="Pflichtfeld (Posteingang)" valuePropName="checked">
|
|
<Switch />
|
|
</Form.Item>
|
|
<Form.Item name="VisiblePosteingang" label="Sichtbar im Posteingang" valuePropName="checked">
|
|
<Switch />
|
|
</Form.Item>
|
|
<Form.Item name="Hinweis" label="Hinweis">
|
|
<Input placeholder="Optionaler Hinweistext für Benutzer" />
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
// Dokumenttypen Tab
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
|
|
function DocTypesTab() {
|
|
const [data, setData] = useState<SettingDocType[]>([]);
|
|
const [tags, setTags] = useState<PaperlessTag[]>([]);
|
|
const [docTypes, setDocTypes] = useState<PaperlessDocType[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [editing, setEditing] = useState<SettingDocType | null>(null);
|
|
const [form] = Form.useForm();
|
|
|
|
const load = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const [docs, fetchedTags, fetchedDocTypes] = await Promise.all([
|
|
settingsApi.getDocTypes(),
|
|
paperlessApi.getTags(),
|
|
paperlessApi.getDocumentTypes()
|
|
]);
|
|
setData(docs);
|
|
setTags(fetchedTags);
|
|
setDocTypes(fetchedDocTypes);
|
|
}
|
|
finally { setLoading(false); }
|
|
}, []);
|
|
|
|
useEffect(() => { load(); }, [load]);
|
|
|
|
const handleSave = async () => {
|
|
if (!editing) return;
|
|
const values = await form.validateFields();
|
|
await settingsApi.updateDocType(editing.Id, values);
|
|
message.success('Gespeichert');
|
|
setEditing(null);
|
|
load();
|
|
};
|
|
|
|
const getTagName = (id: number | null) => {
|
|
if (!id) return '—';
|
|
const tag = tags.find(t => t.id === id);
|
|
return tag ? <Tag color={tag.color}>{tag.name}</Tag> : id;
|
|
};
|
|
|
|
const getDocTypeName = (id: number) => {
|
|
const dt = docTypes.find(d => d.id === id);
|
|
return dt ? dt.name : id;
|
|
};
|
|
|
|
const columns: ColumnsType<SettingDocType> = [
|
|
{ title: 'Dokumenttyp', dataIndex: 'DocumentTypeId', key: 'id', render: getDocTypeName },
|
|
{ title: 'Titel-Template', dataIndex: 'TitelTemplate', key: 'template', ellipsis: true },
|
|
{ title: 'Tag (nicht bereit)', dataIndex: 'TagNotReady', key: 'tagNR', render: getTagName },
|
|
{ title: 'Tag (bereit)', dataIndex: 'TagReady', key: 'tagR', render: getTagName },
|
|
{
|
|
title: '',
|
|
key: 'actions',
|
|
width: 60,
|
|
render: (_, rec) => (
|
|
<Button icon={<EditOutlined />} size="small" onClick={() => { setEditing(rec); form.setFieldsValue(rec); }} />
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<Table
|
|
dataSource={data}
|
|
columns={columns}
|
|
loading={loading}
|
|
rowKey="Id"
|
|
size="small"
|
|
pagination={false}
|
|
/>
|
|
<Modal
|
|
title="Dokumenttyp bearbeiten"
|
|
open={!!editing}
|
|
onOk={handleSave}
|
|
onCancel={() => setEditing(null)}
|
|
width={900}
|
|
>
|
|
<Form form={form} layout="vertical">
|
|
<Form.Item
|
|
name="TitelTemplate"
|
|
label="Titel-Template"
|
|
tooltip="Verfügbare Platzhalter: {{CUSTOM[ID]}} (Wert eines Custom Fields), {{DATE}} (Datum im Format DD.MM.YYYY), {{ZEITSTEMPEL}} (aktueller Zeitstempel)"
|
|
>
|
|
<Input placeholder="z.B. Rechnung_{{CUSTOM[5]}}_{{DATE}}" />
|
|
</Form.Item>
|
|
<Form.Item name="TagNotReady" label="Tag (nicht bereit)">
|
|
<Select allowClear showSearch optionFilterProp="children">
|
|
{tags.map(t => <Select.Option key={t.id} value={t.id}>{t.name}</Select.Option>)}
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item name="TagReady" label="Tag (bereit)">
|
|
<Select allowClear showSearch optionFilterProp="children">
|
|
{tags.map(t => <Select.Option key={t.id} value={t.id}>{t.name}</Select.Option>)}
|
|
</Select>
|
|
</Form.Item>
|
|
</Form>
|
|
|
|
{editing && (
|
|
<div style={{ marginTop: 24 }}>
|
|
<h4>Dokumentenfelder</h4>
|
|
<DocTypeFieldsTable key={editing.DocumentTypeId} docTypeId={editing.DocumentTypeId} />
|
|
</div>
|
|
)}
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
// Action Editor (Sub-component for Postprocessing)
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
|
|
const ACTION_TYPE_LABELS: Record<number, string> = {
|
|
1: 'Export (FTP/WebDAV)',
|
|
2: 'Mail versenden',
|
|
3: 'Tags setzen/entfernen',
|
|
4: 'Custom Field setzen',
|
|
5: 'Webhook',
|
|
6: 'Notiz hinzufügen',
|
|
};
|
|
|
|
function ActionEditor({
|
|
ppId,
|
|
tags,
|
|
customFields,
|
|
exportTargets,
|
|
}: {
|
|
ppId: number;
|
|
tags: PaperlessTag[];
|
|
customFields: PaperlessCustomField[];
|
|
exportTargets: SettingExportTarget[];
|
|
}) {
|
|
const [actions, setActions] = useState<SettingPostprocessingAction[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [editAction, setEditAction] = useState<SettingPostprocessingAction | null>(null);
|
|
const [isNew, setIsNew] = useState(false);
|
|
const [form] = Form.useForm();
|
|
const [actionType, setActionType] = useState(1);
|
|
|
|
const load = useCallback(async () => {
|
|
setLoading(true);
|
|
try { setActions(await settingsApi.getActions(ppId)); }
|
|
finally { setLoading(false); }
|
|
}, [ppId]);
|
|
|
|
useEffect(() => { load(); }, [load]);
|
|
|
|
const openNew = () => {
|
|
setIsNew(true);
|
|
setActionType(1);
|
|
form.resetFields();
|
|
form.setFieldsValue({ ActionType: 1, IsActive: true, Order: actions.length + 1, Content: {} });
|
|
setEditAction({} as any);
|
|
};
|
|
|
|
const openEdit = (a: SettingPostprocessingAction) => {
|
|
setIsNew(false);
|
|
setActionType(a.ActionType);
|
|
form.setFieldsValue({ ActionType: a.ActionType, IsActive: a.IsActive, Order: a.Order, ...a.Content });
|
|
setEditAction(a);
|
|
};
|
|
|
|
const buildContent = (values: any): Record<string, any> => {
|
|
const { ActionType: _, IsActive: __, Order: ___, ...rest } = values;
|
|
return rest;
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
const values = await form.validateFields();
|
|
const content = buildContent(values);
|
|
if (isNew) {
|
|
await settingsApi.createAction(ppId, {
|
|
ActionType: values.ActionType,
|
|
Content: content,
|
|
Order: values.Order,
|
|
IsActive: values.IsActive,
|
|
});
|
|
message.success('Aktion erstellt');
|
|
} else if (editAction) {
|
|
await settingsApi.updateAction(editAction.Id, {
|
|
ActionType: values.ActionType,
|
|
Content: content,
|
|
Order: values.Order,
|
|
IsActive: values.IsActive,
|
|
});
|
|
message.success('Aktion gespeichert');
|
|
}
|
|
setEditAction(null);
|
|
load();
|
|
};
|
|
|
|
const handleDelete = async (id: number) => {
|
|
await settingsApi.deleteAction(id);
|
|
message.success('Gelöscht');
|
|
load();
|
|
};
|
|
|
|
const columns: ColumnsType<SettingPostprocessingAction> = [
|
|
{ title: '#', dataIndex: 'Order', key: 'order', width: 50 },
|
|
{ title: 'Typ', key: 'type', render: (_, r) => <Tag>{ACTION_TYPE_LABELS[r.ActionType] || r.ActionType}</Tag> },
|
|
{ title: 'Aktiv', key: 'active', width: 60, render: (_, r) => <Switch size="small" checked={r.IsActive} disabled /> },
|
|
{
|
|
title: '', key: 'actions', width: 100,
|
|
render: (_, r) => (
|
|
<Space>
|
|
<Button icon={<EditOutlined />} size="small" onClick={() => openEdit(r)} />
|
|
<Popconfirm title="Löschen?" onConfirm={() => handleDelete(r.Id)}>
|
|
<Button danger icon={<DeleteOutlined />} size="small" />
|
|
</Popconfirm>
|
|
</Space>
|
|
),
|
|
},
|
|
];
|
|
|
|
const renderContentFields = () => {
|
|
switch (actionType) {
|
|
case 1: // Export
|
|
return (
|
|
<>
|
|
<Form.Item name="exportTargetId" label="Export-Ziel" rules={[{ required: true }]}>
|
|
<Select>
|
|
{exportTargets.filter(t => t.IsActive).map(t => (
|
|
<Select.Option key={t.Id} value={t.Id}>{t.Name} ({t.Protocol})</Select.Option>
|
|
))}
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item name="fileType" label="Datei-Typ" initialValue="archive">
|
|
<Select>
|
|
<Select.Option value="archive">Archiv (OCR)</Select.Option>
|
|
<Select.Option value="original">Original</Select.Option>
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="filenameTemplate"
|
|
label="Dateiname"
|
|
tooltip="Platzhalter: {titel}, {absender_name}, {dokumenttyp_name}, {datum}, {jahr}, {monat}, {tag}, {id}, {ablagenummer}, {besitzer}, {custom_field_<ID>}, {zeitstempel}"
|
|
>
|
|
<Input placeholder="z.B. {datum}_{absender_name}_{titel}" />
|
|
</Form.Item>
|
|
<div style={{ marginTop: -16, marginBottom: 16, fontSize: 12, color: '#888' }}>
|
|
Verfügbare Platzhalter: <code>{'{titel}'}</code> <code>{'{absender_name}'}</code> <code>{'{dokumenttyp_name}'}</code> <code>{'{datum}'}</code> <code>{'{jahr}'}</code> <code>{'{monat}'}</code> <code>{'{tag}'}</code> <code>{'{id}'}</code> <code>{'{ablagenummer}'}</code> <code>{'{besitzer}'}</code> <code>{'{custom_field_<ID>}'}</code>
|
|
</div>
|
|
</>
|
|
);
|
|
case 2: // Mail
|
|
return (
|
|
<>
|
|
<Form.Item name="to" label="Empfänger" rules={[{ required: true, type: 'email' }]}>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="subject"
|
|
label="Betreff"
|
|
tooltip="Platzhalter: {titel}, {absender_name}, {dokumenttyp_name}, {datum}, {jahr}, {monat}, {tag}, {id}, {ablagenummer}, {besitzer}, {custom_field_<ID>}, {zeitstempel}"
|
|
>
|
|
<Input placeholder="z.B. Rechnung {absender_name} vom {datum}" />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="body"
|
|
label="Text"
|
|
tooltip="Platzhalter: {titel}, {absender_name}, {dokumenttyp_name}, {datum}, {jahr}, {monat}, {tag}, {id}, {ablagenummer}, {besitzer}, {custom_field_<ID>}, {zeitstempel}"
|
|
>
|
|
<Input.TextArea rows={3} placeholder="z.B. Anbei die Rechnung {titel} von {absender_name}." />
|
|
</Form.Item>
|
|
<Form.Item name="fileType" label="Anhang-Typ" initialValue="archive">
|
|
<Select>
|
|
<Select.Option value="archive">Archiv (OCR)</Select.Option>
|
|
<Select.Option value="original">Original</Select.Option>
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="filenameTemplate"
|
|
label="Dateiname (Anhang)"
|
|
tooltip="Platzhalter: {titel}, {absender_name}, {dokumenttyp_name}, {datum}, {jahr}, {monat}, {tag}, {id}, {ablagenummer}, {besitzer}, {custom_field_<ID>}, {zeitstempel}"
|
|
>
|
|
<Input placeholder="z.B. {datum}_{absender_name}_{titel}" />
|
|
</Form.Item>
|
|
</>
|
|
);
|
|
case 3: // Tags
|
|
return (
|
|
<>
|
|
<Form.Item name="addTags" label="Tags hinzufügen">
|
|
<Select mode="multiple" allowClear showSearch optionFilterProp="children">
|
|
{tags.map(t => <Select.Option key={t.id} value={t.id}>{t.name}</Select.Option>)}
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item name="removeTags" label="Tags entfernen">
|
|
<Select mode="multiple" allowClear showSearch optionFilterProp="children">
|
|
{tags.map(t => <Select.Option key={t.id} value={t.id}>{t.name}</Select.Option>)}
|
|
</Select>
|
|
</Form.Item>
|
|
</>
|
|
);
|
|
case 4: // Custom Field
|
|
return (
|
|
<>
|
|
<Form.Item name="fieldId" label="Custom Field" rules={[{ required: true }]}>
|
|
<Select showSearch optionFilterProp="children">
|
|
{customFields.map(cf => <Select.Option key={cf.id} value={cf.id}>{cf.name}</Select.Option>)}
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item name="value" label="Wert"><Input /></Form.Item>
|
|
</>
|
|
);
|
|
case 5: // Webhook
|
|
return (
|
|
<>
|
|
<Form.Item name="url" label="URL" rules={[{ required: true, type: 'url' }]}><Input /></Form.Item>
|
|
<Form.Item name="method" label="HTTP Methode" initialValue="POST">
|
|
<Select>
|
|
<Select.Option value="GET">GET</Select.Option>
|
|
<Select.Option value="POST">POST</Select.Option>
|
|
<Select.Option value="PUT">PUT</Select.Option>
|
|
</Select>
|
|
</Form.Item>
|
|
</>
|
|
);
|
|
case 6: // Note
|
|
return (
|
|
<>
|
|
<Form.Item
|
|
name="note"
|
|
label="Notiz"
|
|
rules={[{ required: true }]}
|
|
tooltip="Platzhalter: {titel}, {absender_name}, {dokumenttyp_name}, {datum}, {jahr}, {monat}, {tag}, {id}, {ablagenummer}, {besitzer}, {custom_field_<ID>}"
|
|
>
|
|
<Input.TextArea rows={3} placeholder="z.B. Dokument wurde automatisch exportiert am {datum}." />
|
|
</Form.Item>
|
|
</>
|
|
);
|
|
default: return null;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div style={{ marginTop: 16 }}>
|
|
<Space style={{ marginBottom: 8 }}>
|
|
<h4 style={{ margin: 0 }}>Aktionen</h4>
|
|
<Button type="dashed" size="small" icon={<PlusOutlined />} onClick={openNew}>Aktion hinzufügen</Button>
|
|
</Space>
|
|
<Table dataSource={actions} columns={columns} loading={loading} rowKey="Id" size="small" pagination={false} />
|
|
|
|
<Modal
|
|
title={isNew ? 'Neue Aktion' : 'Aktion bearbeiten'}
|
|
open={!!editAction}
|
|
onOk={handleSave}
|
|
onCancel={() => setEditAction(null)}
|
|
width={600}
|
|
>
|
|
<Form form={form} layout="vertical">
|
|
<Space style={{ width: '100%' }}>
|
|
<Form.Item name="ActionType" label="Aktionstyp" rules={[{ required: true }]}>
|
|
<Select style={{ width: 200 }} onChange={v => setActionType(v)}>
|
|
{Object.entries(ACTION_TYPE_LABELS).map(([k, l]) => (
|
|
<Select.Option key={k} value={Number(k)}>{l}</Select.Option>
|
|
))}
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item name="Order" label="Reihenfolge"><InputNumber min={1} /></Form.Item>
|
|
<Form.Item name="IsActive" label="Aktiv" valuePropName="checked"><Switch /></Form.Item>
|
|
</Space>
|
|
<Divider />
|
|
{renderContentFields()}
|
|
</Form>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
// Postprocessing Tab
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
|
|
function PostprocessingTab() {
|
|
const [data, setData] = useState<SettingPostprocessing[]>([]);
|
|
const [tags, setTags] = useState<PaperlessTag[]>([]);
|
|
const [docTypes, setDocTypes] = useState<PaperlessDocType[]>([]);
|
|
const [correspondents, setCorrespondents] = useState<PaperlessCorrespondent[]>([]);
|
|
const [customFields, setCustomFields] = useState<PaperlessCustomField[]>([]);
|
|
const [exportTargets, setExportTargets] = useState<SettingExportTarget[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [editing, setEditing] = useState<SettingPostprocessing | null>(null);
|
|
const [isNew, setIsNew] = useState(false);
|
|
const [form] = Form.useForm();
|
|
const [filterJson, setFilterJson] = useState<FilterGroup>({ combinator: 'AND', rules: [] });
|
|
|
|
const load = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const [pp, t, dt, c, cf, et] = await Promise.all([
|
|
settingsApi.getPostprocessing(),
|
|
paperlessApi.getTags(),
|
|
paperlessApi.getDocumentTypes(),
|
|
paperlessApi.getCorrespondents(),
|
|
paperlessApi.getCustomFields(),
|
|
settingsApi.getExportTargets(),
|
|
]);
|
|
setData(pp);
|
|
setTags(t);
|
|
setDocTypes(dt);
|
|
setCorrespondents(c);
|
|
setCustomFields(cf);
|
|
setExportTargets(et);
|
|
} finally { setLoading(false); }
|
|
}, []);
|
|
|
|
useEffect(() => { load(); }, [load]);
|
|
|
|
const openNew = () => {
|
|
setIsNew(true);
|
|
const emptyFilter: FilterGroup = { combinator: 'AND', rules: [] };
|
|
setFilterJson(emptyFilter);
|
|
form.resetFields();
|
|
form.setFieldsValue({ Name: '', IsActive: true, NoFurther: false, Order: data.length + 1 });
|
|
setEditing({} as any);
|
|
};
|
|
|
|
const openEdit = (pp: SettingPostprocessing) => {
|
|
setIsNew(false);
|
|
setFilterJson(pp.FilterJson || { combinator: 'AND', rules: [] });
|
|
form.setFieldsValue({ Name: pp.Name, IsActive: pp.IsActive, NoFurther: pp.NoFurther, Order: pp.Order });
|
|
setEditing(pp);
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
const values = await form.validateFields();
|
|
const payload = { ...values, FilterJson: filterJson };
|
|
|
|
if (isNew) {
|
|
await settingsApi.createPostprocessing(payload);
|
|
message.success('Regel erstellt');
|
|
} else if (editing) {
|
|
await settingsApi.updatePostprocessing(editing.Id, payload);
|
|
message.success('Gespeichert');
|
|
}
|
|
setEditing(null);
|
|
load();
|
|
};
|
|
|
|
const handleToggle = async (id: number, active: boolean) => {
|
|
await settingsApi.updatePostprocessing(id, { IsActive: active });
|
|
load();
|
|
};
|
|
|
|
const handleDelete = async (id: number) => {
|
|
await settingsApi.deletePostprocessing(id);
|
|
message.success('Gelöscht');
|
|
load();
|
|
};
|
|
|
|
const handleDuplicate = async (id: number) => {
|
|
await settingsApi.duplicatePostprocessing(id);
|
|
message.success('Regel dupliziert');
|
|
load();
|
|
};
|
|
|
|
const columns: ColumnsType<SettingPostprocessing> = [
|
|
{ title: '#', dataIndex: 'Order', key: 'order', width: 50 },
|
|
{ title: 'Name', dataIndex: 'Name', key: 'name' },
|
|
{
|
|
title: 'Bedingungen',
|
|
key: 'conditions',
|
|
render: (_, r) => <Tag>{r.FilterJson?.rules?.length || 0}</Tag>,
|
|
},
|
|
{
|
|
title: 'Aktiv',
|
|
key: 'active',
|
|
width: 70,
|
|
render: (_, r) => <Switch size="small" checked={r.IsActive} onChange={v => handleToggle(r.Id, v)} />,
|
|
},
|
|
{
|
|
title: 'Stop',
|
|
dataIndex: 'NoFurther',
|
|
key: 'stop',
|
|
width: 50,
|
|
render: (v: boolean) => v ? <Tag color="red">Stop</Tag> : null,
|
|
},
|
|
{
|
|
title: '',
|
|
key: 'actions',
|
|
width: 130,
|
|
render: (_, rec) => (
|
|
<Space>
|
|
<Button icon={<EditOutlined />} size="small" onClick={() => openEdit(rec)} />
|
|
<Button icon={<CopyOutlined />} size="small" onClick={() => handleDuplicate(rec.Id)} />
|
|
<Popconfirm title="Wirklich löschen?" onConfirm={() => handleDelete(rec.Id)}>
|
|
<Button danger icon={<DeleteOutlined />} size="small" />
|
|
</Popconfirm>
|
|
</Space>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<Button type="primary" icon={<PlusOutlined />} onClick={openNew} style={{ marginBottom: 16 }}>
|
|
Regel hinzufügen
|
|
</Button>
|
|
<Table dataSource={data} columns={columns} loading={loading} rowKey="Id" size="small" pagination={false} />
|
|
|
|
<Modal
|
|
title={isNew ? 'Neue Postprocessing-Regel' : 'Regel bearbeiten'}
|
|
open={!!editing}
|
|
onOk={handleSave}
|
|
onCancel={() => setEditing(null)}
|
|
width={900}
|
|
styles={{ body: { maxHeight: '70vh', overflowY: 'auto' } }}
|
|
>
|
|
<Form form={form} layout="vertical">
|
|
<Space style={{ width: '100%' }}>
|
|
<Form.Item name="Name" label="Name" rules={[{ required: true }]} style={{ minWidth: 300 }}>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item name="Order" label="Reihenfolge"><InputNumber min={1} /></Form.Item>
|
|
<Form.Item name="IsActive" label="Aktiv" valuePropName="checked"><Switch /></Form.Item>
|
|
<Form.Item name="NoFurther" label="Stop nach Treffer" valuePropName="checked"><Switch /></Form.Item>
|
|
</Space>
|
|
</Form>
|
|
|
|
<Divider>Filter</Divider>
|
|
<FilterBuilder
|
|
value={filterJson}
|
|
onChange={setFilterJson}
|
|
tags={tags}
|
|
docTypes={docTypes}
|
|
correspondents={correspondents}
|
|
customFields={customFields}
|
|
/>
|
|
|
|
{editing && !isNew && (
|
|
<>
|
|
<Divider />
|
|
<ActionEditor
|
|
ppId={editing.Id}
|
|
tags={tags}
|
|
customFields={customFields}
|
|
exportTargets={exportTargets}
|
|
/>
|
|
</>
|
|
)}
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
// Export-Ziele Tab
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
|
|
function ExportTargetsTab() {
|
|
const [data, setData] = useState<SettingExportTarget[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [editing, setEditing] = useState<SettingExportTarget | null>(null);
|
|
const [isNew, setIsNew] = useState(false);
|
|
const [form] = Form.useForm();
|
|
const [testing, setTesting] = useState<number | null>(null);
|
|
|
|
const load = useCallback(async () => {
|
|
setLoading(true);
|
|
try { setData(await settingsApi.getExportTargets()); }
|
|
finally { setLoading(false); }
|
|
}, []);
|
|
|
|
useEffect(() => { load(); }, [load]);
|
|
|
|
const openNew = () => {
|
|
setIsNew(true);
|
|
form.resetFields();
|
|
form.setFieldsValue({ Protocol: 'ftp', IsActive: true });
|
|
setEditing({} as any);
|
|
};
|
|
|
|
const openEdit = (t: SettingExportTarget) => {
|
|
setIsNew(false);
|
|
form.setFieldsValue(t);
|
|
setEditing(t);
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
const values = await form.validateFields();
|
|
if (isNew) {
|
|
await settingsApi.createExportTarget(values);
|
|
message.success('Export-Ziel erstellt');
|
|
} else if (editing) {
|
|
await settingsApi.updateExportTarget(editing.Id, values);
|
|
message.success('Gespeichert');
|
|
}
|
|
setEditing(null);
|
|
load();
|
|
};
|
|
|
|
const handleDelete = async (id: number) => {
|
|
await settingsApi.deleteExportTarget(id);
|
|
message.success('Gelöscht');
|
|
load();
|
|
};
|
|
|
|
const handleTest = async (id: number) => {
|
|
setTesting(id);
|
|
try {
|
|
const result = await settingsApi.testExportTarget(id);
|
|
if (result.success) {
|
|
message.success(result.message);
|
|
} else {
|
|
message.error(result.message);
|
|
}
|
|
} catch {
|
|
message.error('Verbindungstest fehlgeschlagen');
|
|
} finally {
|
|
setTesting(null);
|
|
}
|
|
};
|
|
|
|
const columns: ColumnsType<SettingExportTarget> = [
|
|
{ title: 'Name', dataIndex: 'Name', key: 'name' },
|
|
{ title: 'Protokoll', dataIndex: 'Protocol', key: 'protocol', render: v => <Tag>{v.toUpperCase()}</Tag> },
|
|
{ title: 'Host', dataIndex: 'Host', key: 'host' },
|
|
{ title: 'Pfad', dataIndex: 'RemotePath', key: 'path', ellipsis: true },
|
|
{ title: 'Aktiv', key: 'active', width: 60, render: (_, r) => <Switch size="small" checked={r.IsActive} disabled /> },
|
|
{
|
|
title: '', key: 'actions', width: 160,
|
|
render: (_, rec) => (
|
|
<Space>
|
|
<Button size="small" loading={testing === rec.Id} onClick={() => handleTest(rec.Id)}>
|
|
Test
|
|
</Button>
|
|
<Button icon={<EditOutlined />} size="small" onClick={() => openEdit(rec)} />
|
|
<Popconfirm title="Löschen?" onConfirm={() => handleDelete(rec.Id)}>
|
|
<Button danger icon={<DeleteOutlined />} size="small" />
|
|
</Popconfirm>
|
|
</Space>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<Button type="primary" icon={<PlusOutlined />} onClick={openNew} style={{ marginBottom: 16 }}>
|
|
Export-Ziel hinzufügen
|
|
</Button>
|
|
<Table dataSource={data} columns={columns} loading={loading} rowKey="Id" size="small" pagination={false} />
|
|
|
|
<Modal title={isNew ? 'Neues Export-Ziel' : 'Export-Ziel bearbeiten'} open={!!editing} onOk={handleSave} onCancel={() => setEditing(null)}>
|
|
<Form form={form} layout="vertical">
|
|
<Form.Item name="Name" label="Name" rules={[{ required: true }]}><Input /></Form.Item>
|
|
<Form.Item name="Protocol" label="Protokoll" rules={[{ required: true }]}>
|
|
<Select>
|
|
<Select.Option value="ftp">FTP</Select.Option>
|
|
<Select.Option value="webdav">WebDAV</Select.Option>
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item name="Host" label="Host" rules={[{ required: true }]}><Input /></Form.Item>
|
|
<Form.Item name="Port" label="Port"><InputNumber style={{ width: '100%' }} /></Form.Item>
|
|
<Form.Item name="Username" label="Benutzername"><Input /></Form.Item>
|
|
<Form.Item name="Password" label="Passwort"><Input.Password /></Form.Item>
|
|
<Form.Item name="RemotePath" label="Remote-Pfad"><Input /></Form.Item>
|
|
<Form.Item name="IsActive" label="Aktiv" valuePropName="checked"><Switch /></Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
// Postprocessing Logs Tab
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
|
|
function PostprocessingLogsTab() {
|
|
const [data, setData] = useState<SettingPostprocessingLog[]>([]);
|
|
const [total, setTotal] = useState(0);
|
|
const [loading, setLoading] = useState(true);
|
|
const [page, setPage] = useState(1);
|
|
const pageSize = 50;
|
|
|
|
const load = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const result = await settingsApi.getPostprocessingLogs(pageSize, (page - 1) * pageSize);
|
|
setData(result.data);
|
|
setTotal(result.total);
|
|
} finally { setLoading(false); }
|
|
}, [page]);
|
|
|
|
useEffect(() => { load(); }, [load]);
|
|
|
|
const columns: ColumnsType<SettingPostprocessingLog> = [
|
|
{ title: 'Zeitpunkt', dataIndex: 'CreatedAt', key: 'time', width: 180, render: v => new Date(v).toLocaleString('de-DE') },
|
|
{ title: 'Dokument', dataIndex: 'DocumentId', key: 'doc', width: 100 },
|
|
{ title: 'Regel', dataIndex: 'PostprocessingId', key: 'rule', width: 80 },
|
|
{ title: 'Aktion', dataIndex: 'ActionId', key: 'action', width: 80, render: v => v || '—' },
|
|
{
|
|
title: 'Status', dataIndex: 'Status', key: 'status', width: 100,
|
|
render: (v: string) => (
|
|
<Badge status={v === 'success' ? 'success' : v === 'error' ? 'error' : 'default'} text={v} />
|
|
),
|
|
},
|
|
{ title: 'Nachricht', dataIndex: 'Message', key: 'msg', ellipsis: true },
|
|
];
|
|
|
|
return (
|
|
<Table
|
|
dataSource={data}
|
|
columns={columns}
|
|
loading={loading}
|
|
rowKey="Id"
|
|
size="small"
|
|
pagination={{
|
|
current: page,
|
|
total,
|
|
pageSize,
|
|
onChange: setPage,
|
|
showTotal: t => `${t} Einträge`,
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
// API Keys Tab
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
|
|
function ApiKeysTab() {
|
|
const [data, setData] = useState<ApiKey[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [createModalOpen, setCreateModalOpen] = useState(false);
|
|
const [successModalOpen, setSuccessModalOpen] = useState(false);
|
|
const [newKey, setNewKey] = useState<string | null>(null);
|
|
const [form] = Form.useForm();
|
|
|
|
const load = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const keys = await apiKeysApi.getApiKeys();
|
|
setData(keys);
|
|
} catch (err) {
|
|
console.error('Error loading API keys:', err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => { load(); }, [load]);
|
|
|
|
const handleCreate = async () => {
|
|
const values = await form.validateFields();
|
|
try {
|
|
const result = await apiKeysApi.createApiKey(values.name);
|
|
setNewKey(result.plainKey);
|
|
setCreateModalOpen(false);
|
|
setSuccessModalOpen(true);
|
|
form.resetFields();
|
|
load();
|
|
} catch (err) {
|
|
message.error('Fehler beim Erstellen des API-Keys');
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (id: string) => {
|
|
try {
|
|
await apiKeysApi.deleteApiKey(id);
|
|
message.success('API-Key gelöscht');
|
|
load();
|
|
} catch (err) {
|
|
message.error('Fehler beim Löschen des API-Keys');
|
|
}
|
|
};
|
|
|
|
const copyToClipboard = (text: string) => {
|
|
navigator.clipboard.writeText(text);
|
|
message.success('In die Zwischenablage kopiert');
|
|
};
|
|
|
|
const columns: ColumnsType<ApiKey> = [
|
|
{ title: 'Name', dataIndex: 'name', key: 'name' },
|
|
{ title: 'Präfix', dataIndex: 'keyPrefix', key: 'prefix', render: (v) => <Tag>{v}</Tag> },
|
|
{
|
|
title: 'Erstellt am',
|
|
dataIndex: 'createdAt',
|
|
key: 'createdAt',
|
|
render: (v) => dayjs(v).format('DD.MM.YYYY HH:mm')
|
|
},
|
|
{
|
|
title: 'Zuletzt genutzt',
|
|
dataIndex: 'lastUsedAt',
|
|
key: 'lastUsedAt',
|
|
render: (v) => v ? dayjs(v).format('DD.MM.YYYY HH:mm') : 'Nie'
|
|
},
|
|
{
|
|
title: '',
|
|
key: 'actions',
|
|
width: 80,
|
|
render: (_, record) => (
|
|
<Popconfirm title="API-Key wirklich löschen? Er wird sofort ungültig." onConfirm={() => handleDelete(record.id)}>
|
|
<Button danger icon={<DeleteOutlined />} size="small" />
|
|
</Popconfirm>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<div style={{ marginBottom: 16 }}>
|
|
<Title level={4}>API Keys</Title>
|
|
<Typography.Paragraph type="secondary">
|
|
Hier kannst du API-Keys verwalten, um externe Dienste anzubinden oder Funktionen über spezialisierte URLs aufzurufen.
|
|
</Typography.Paragraph>
|
|
<Button type="primary" icon={<PlusOutlined />} onClick={() => setCreateModalOpen(true)}>
|
|
Neuen API-Key erstellen
|
|
</Button>
|
|
</div>
|
|
|
|
<Table dataSource={data} columns={columns} loading={loading} rowKey="id" size="small" pagination={false} />
|
|
|
|
<Modal
|
|
title="Neuen API-Key erstellen"
|
|
open={createModalOpen}
|
|
onOk={handleCreate}
|
|
onCancel={() => setCreateModalOpen(false)}
|
|
>
|
|
<Form form={form} layout="vertical">
|
|
<Form.Item
|
|
name="name"
|
|
label="Anzeigename (z.B. Scanner-Dienst)"
|
|
rules={[{ required: true, message: 'Bitte gib einen Namen an' }]}
|
|
>
|
|
<Input placeholder="Welchen Zweck hat dieser Key?" />
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
|
|
<Modal
|
|
title="API-Key erfolgreich erstellt"
|
|
open={successModalOpen}
|
|
footer={[
|
|
<Button key="close" type="primary" onClick={() => setSuccessModalOpen(false)}>
|
|
Ich habe den Key kopiert
|
|
</Button>
|
|
]}
|
|
closable={false}
|
|
maskClosable={false}
|
|
>
|
|
<Typography.Paragraph type="danger">
|
|
<strong>Wichtig:</strong> Kopiere den API-Key jetzt. Er wird aus Sicherheitsgründen **nie wieder** im Klartext angezeigt!
|
|
</Typography.Paragraph>
|
|
<div style={{
|
|
background: '#f5f5f5',
|
|
padding: '12px',
|
|
borderRadius: '4px',
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
fontFamily: 'monospace',
|
|
border: '1px solid #d9d9d9'
|
|
}}>
|
|
<span>{newKey}</span>
|
|
<Button
|
|
icon={<CopyOutlined />}
|
|
onClick={() => newKey && copyToClipboard(newKey)}
|
|
>
|
|
Kopieren
|
|
</Button>
|
|
</div>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
// Correspondents Tab
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
|
|
function CorrespondentsTab() {
|
|
const [data, setData] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [total, setTotal] = useState(0);
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [pageSize, setPageSize] = useState(50);
|
|
const [searchText, setSearchText] = useState('');
|
|
const [createModalOpen, setCreateModalOpen] = useState(false);
|
|
const [form] = Form.useForm();
|
|
|
|
const load = useCallback(async (page: number, size: number, search?: string) => {
|
|
setLoading(true);
|
|
try {
|
|
const result = await settingsApi.getCorrespondents(page, size, search);
|
|
setData(result.data);
|
|
setTotal(result.total);
|
|
} catch (err) {
|
|
message.error('Fehler beim Laden der Korrespondenten');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
load(currentPage, pageSize, searchText);
|
|
}, [currentPage, pageSize, searchText, load]);
|
|
|
|
const handleCreate = async () => {
|
|
const values = await form.validateFields();
|
|
try {
|
|
await settingsApi.createCorrespondent({ name: values.name });
|
|
message.success('Korrespondent erstellt');
|
|
setCreateModalOpen(false);
|
|
form.resetFields();
|
|
load(currentPage, pageSize, searchText);
|
|
} catch (err) {
|
|
message.error('Fehler beim Erstellen des Korrespondenten');
|
|
}
|
|
};
|
|
|
|
const updateAgrarmonitorId = async (id: number, val: number | null) => {
|
|
try {
|
|
await settingsApi.updateCorrespondentSetting(id, val);
|
|
message.success('ID aktualisiert');
|
|
// No full reload needed to keep focus, but sync might be better.
|
|
// We update local state to reflect change immediately without glitchy reload
|
|
setData(prev => prev.map(item => item.id === id ? { ...item, agrarmonitorId: val } : item));
|
|
} catch (err) {
|
|
message.error('Fehler beim Aktualisieren der ID');
|
|
}
|
|
};
|
|
|
|
const columns: ColumnsType<any> = [
|
|
{ title: 'Name', dataIndex: 'name', key: 'name', sorter: false }, // Sorting is tricky with server-side pagination unless implemented in backend
|
|
{ title: 'Paperless ID', dataIndex: 'id', key: 'id', width: 120 },
|
|
{
|
|
title: 'Agrarmonitor ID',
|
|
dataIndex: 'agrarmonitorId',
|
|
key: 'agrarmonitorId',
|
|
width: 200,
|
|
render: (val, record) => (
|
|
<InputNumber
|
|
value={val}
|
|
placeholder="AM ID"
|
|
style={{ width: '100%' }}
|
|
onBlur={(e) => {
|
|
const v = e.target.value ? parseInt(e.target.value.replace(/\D/g, ''), 10) : null;
|
|
if (v !== val) updateAgrarmonitorId(record.id, v);
|
|
}}
|
|
controls={false}
|
|
/>
|
|
)
|
|
},
|
|
{
|
|
title: 'Dokumente',
|
|
dataIndex: 'document_count',
|
|
key: 'docCount',
|
|
width: 100,
|
|
render: (v) => <Badge count={v} showZero color="#108ee9" />
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<div style={{ marginBottom: 16 }}>
|
|
<Title level={4}>Korrespondenten</Title>
|
|
<Typography.Paragraph type="secondary">
|
|
Hier kannst du Korrespondenten verwalten und deren Agrarmonitor-ID hinterlegen.
|
|
Neue Korrespondenten werden direkt in Paperless erstellt.
|
|
</Typography.Paragraph>
|
|
<Space style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between' }}>
|
|
<Input.Search
|
|
placeholder="Suchen..."
|
|
allowClear
|
|
onSearch={(v) => { setSearchText(v); setCurrentPage(1); }}
|
|
style={{ width: 300 }}
|
|
/>
|
|
<Button type="primary" icon={<PlusOutlined />} onClick={() => setCreateModalOpen(true)}>
|
|
Neuen Korrespondenten anlegen
|
|
</Button>
|
|
</Space>
|
|
</div>
|
|
|
|
<Table
|
|
dataSource={data}
|
|
columns={columns}
|
|
loading={loading}
|
|
rowKey="id"
|
|
size="small"
|
|
pagination={{
|
|
current: currentPage,
|
|
pageSize: pageSize,
|
|
total: total,
|
|
showSizeChanger: true,
|
|
onChange: (page, size) => {
|
|
setCurrentPage(page);
|
|
setPageSize(size);
|
|
}
|
|
}}
|
|
/>
|
|
|
|
<Modal
|
|
title="Neuen Korrespondenten anlegen"
|
|
open={createModalOpen}
|
|
onOk={handleCreate}
|
|
onCancel={() => setCreateModalOpen(false)}
|
|
>
|
|
<Form form={form} layout="vertical">
|
|
<Form.Item
|
|
name="name"
|
|
label="Name des Korrespondenten"
|
|
rules={[{ required: true, message: 'Bitte gib einen Namen an' }]}
|
|
>
|
|
<Input placeholder="Vollständiger Name" />
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
// Inbox-Aktionen pro Barcode-Vorlage (Sub-Editor)
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
|
|
const VARIABLE_HINT =
|
|
'Platzhalter: {datum} {jahr} {monat} {tag} {zeitstempel}, {barcode} (gesamter Barcode-Wert), {barcode.<Gruppe>} für Named Capture Groups der Regex (z.B. (?<Gruppe>\\d+))';
|
|
|
|
function InboxActionsForTemplateEditor({ templateId }: { templateId: number }) {
|
|
const [actions, setActions] = useState<InboxAction[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [editing, setEditing] = useState<InboxAction | null>(null);
|
|
const [isNew, setIsNew] = useState(false);
|
|
const [actionType, setActionType] = useState<InboxActionType>('MAIL');
|
|
const [tags, setTags] = useState<PaperlessTag[]>([]);
|
|
const [docTypes, setDocTypes] = useState<PaperlessDocType[]>([]);
|
|
const [correspondents, setCorrespondents] = useState<PaperlessCorrespondent[]>([]);
|
|
const [customFields, setCustomFields] = useState<PaperlessCustomField[]>([]);
|
|
const [users, setUsers] = useState<{ id: number; username: string }[]>([]);
|
|
const [exportTargets, setExportTargets] = useState<SettingExportTarget[]>([]);
|
|
const [form] = Form.useForm();
|
|
|
|
const load = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
setActions(await settingsApi.listInboxActionsForTemplate(templateId));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [templateId]);
|
|
|
|
useEffect(() => { load(); }, [load]);
|
|
|
|
useEffect(() => {
|
|
Promise.all([
|
|
paperlessApi.getTags().catch(() => []),
|
|
paperlessApi.getDocumentTypes().catch(() => []),
|
|
paperlessApi.getCorrespondents().catch(() => []),
|
|
paperlessApi.getCustomFields().catch(() => []),
|
|
paperlessApi.getUsers().catch(() => []),
|
|
settingsApi.getExportTargets().catch(() => []),
|
|
]).then(([t, dt, c, cf, u, et]) => {
|
|
setTags(t);
|
|
setDocTypes(dt);
|
|
setCorrespondents(c);
|
|
setCustomFields(cf);
|
|
setUsers(u as { id: number; username: string }[]);
|
|
setExportTargets(et);
|
|
});
|
|
}, []);
|
|
|
|
const openNew = () => {
|
|
setIsNew(true);
|
|
setEditing({} as InboxAction);
|
|
setActionType('MAIL');
|
|
form.resetFields();
|
|
form.setFieldsValue({ ActionType: 'MAIL', IsActive: true, Order: actions.length + 1 });
|
|
};
|
|
|
|
const openEdit = (a: InboxAction) => {
|
|
setIsNew(false);
|
|
setEditing(a);
|
|
setActionType(a.ActionType);
|
|
form.setFieldsValue({ ActionType: a.ActionType, IsActive: a.IsActive, Order: a.Order, ...a.Content });
|
|
};
|
|
|
|
const buildContent = (values: any): Record<string, any> => {
|
|
const { ActionType: _, IsActive: __, Order: ___, ...rest } = values;
|
|
return rest;
|
|
};
|
|
|
|
const handleDelete = async (id: number) => {
|
|
await settingsApi.deleteInboxAction(id);
|
|
message.success('Gelöscht');
|
|
load();
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!editing) return;
|
|
if (isNew) { form.setFieldsValue({ customFieldsList: [] }); return; }
|
|
const cf = (editing.Content?.customFields ?? {}) as Record<string, string>;
|
|
form.setFieldsValue({
|
|
customFieldsList: Object.entries(cf).map(([fieldId, value]) => ({ fieldId: Number(fieldId), value })),
|
|
});
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [editing, isNew]);
|
|
|
|
const handleSaveWrapped = async () => {
|
|
const values = await form.validateFields();
|
|
if (values.ActionType === 'PAPERLESS' && Array.isArray(values.customFieldsList)) {
|
|
const obj: Record<string, string> = {};
|
|
for (const row of values.customFieldsList) {
|
|
if (row?.fieldId !== undefined && row?.fieldId !== null) obj[String(row.fieldId)] = row.value ?? '';
|
|
}
|
|
values.customFields = obj;
|
|
delete values.customFieldsList;
|
|
}
|
|
const payload = {
|
|
ActionType: values.ActionType as InboxActionType,
|
|
Content: buildContent(values),
|
|
Order: values.Order,
|
|
IsActive: values.IsActive,
|
|
};
|
|
try {
|
|
if (isNew) {
|
|
await settingsApi.createInboxActionForTemplate(templateId, payload);
|
|
message.success('Aktion erstellt');
|
|
} else if (editing) {
|
|
await settingsApi.updateInboxAction(editing.Id, payload);
|
|
message.success('Aktion gespeichert');
|
|
}
|
|
setEditing(null);
|
|
load();
|
|
} catch (err: any) {
|
|
message.error(err?.response?.data?.message ?? 'Speichern fehlgeschlagen');
|
|
}
|
|
};
|
|
|
|
const renderContentFields = () => {
|
|
switch (actionType) {
|
|
case 'MAIL':
|
|
return (
|
|
<>
|
|
<Form.Item name="to" label="Empfänger" rules={[{ required: true }]}>
|
|
<Input placeholder="empfaenger@example.com" />
|
|
</Form.Item>
|
|
<Form.Item name="subject" label="Betreff" tooltip={VARIABLE_HINT}>
|
|
<Input placeholder="z.B. Beleg {Beleg}" />
|
|
</Form.Item>
|
|
<Form.Item name="body" label="Text" tooltip={VARIABLE_HINT}>
|
|
<Input.TextArea rows={3} />
|
|
</Form.Item>
|
|
<Form.Item name="filenameTemplate" label="Dateiname (Anhang)" tooltip={VARIABLE_HINT}>
|
|
<Input placeholder="z.B. {datum}_{Beleg}" />
|
|
</Form.Item>
|
|
</>
|
|
);
|
|
case 'EXPORT':
|
|
return (
|
|
<>
|
|
<Form.Item name="exportTargetId" label="Export-Ziel" rules={[{ required: true }]}>
|
|
<Select>
|
|
{exportTargets.filter((t) => t.IsActive).map((t) => (
|
|
<Select.Option key={t.Id} value={t.Id}>{t.Name} ({t.Protocol})</Select.Option>
|
|
))}
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item name="filenameTemplate" label="Dateiname" tooltip={VARIABLE_HINT}>
|
|
<Input placeholder="z.B. {datum}_{Beleg}" />
|
|
</Form.Item>
|
|
</>
|
|
);
|
|
case 'PAPERLESS':
|
|
return (
|
|
<>
|
|
<Form.Item
|
|
name="interneBelegnummer"
|
|
label="Interne Belegnummer"
|
|
required
|
|
tooltip={VARIABLE_HINT}
|
|
extra="Pflichtfeld. Wird zur Duplikatprüfung verwendet."
|
|
>
|
|
<Input placeholder="{barcode} oder {barcode.nr}" />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="asn"
|
|
label="ASN"
|
|
tooltip={VARIABLE_HINT}
|
|
extra="Optional. Archivnummer (archive_serial_number) des Dokuments. Überschreibt die aus der Internen Belegnummer abgeleitete ASN."
|
|
>
|
|
<Input placeholder="{barcode.asn} oder feste Zahl" />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="eingangsdatum"
|
|
label="Eingangsdatum"
|
|
tooltip={VARIABLE_HINT}
|
|
extra="Optional. Datum des Dokumenteneingangs (YYYY-MM-DD oder TT.MM.JJJJ). Leer = heutiges Datum."
|
|
>
|
|
<Input placeholder="{barcode.datum} oder 23.04.2026" />
|
|
</Form.Item>
|
|
<Form.Item name="title" label="Titel" tooltip={VARIABLE_HINT}>
|
|
<Input placeholder="z.B. Beleg {barcode} vom {datum}" />
|
|
</Form.Item>
|
|
<Form.Item name="documentType" label="Dokumenttyp">
|
|
<Select allowClear showSearch optionFilterProp="children">
|
|
{docTypes.map((dt) => (
|
|
<Select.Option key={dt.id} value={dt.id}>{dt.name}</Select.Option>
|
|
))}
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item name="correspondent" label="Korrespondent">
|
|
<Select allowClear showSearch optionFilterProp="children">
|
|
{correspondents.map((c) => (
|
|
<Select.Option key={c.id} value={c.id}>{c.name}</Select.Option>
|
|
))}
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item name="owner" label="Besitzer">
|
|
<Select allowClear showSearch optionFilterProp="children">
|
|
{users.map((u) => (
|
|
<Select.Option key={u.id} value={u.id}>{u.username}</Select.Option>
|
|
))}
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item name="tags" label="Tags">
|
|
<Select mode="multiple" allowClear showSearch optionFilterProp="children">
|
|
{tags.map((t) => (
|
|
<Select.Option key={t.id} value={t.id}>{t.name}</Select.Option>
|
|
))}
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item label="Custom Fields" tooltip={VARIABLE_HINT}>
|
|
<Form.List name="customFieldsList">
|
|
{(fields, { add, remove }) => (
|
|
<>
|
|
{fields.map(({ key, name, ...rest }) => (
|
|
<Space key={key} align="baseline" style={{ display: 'flex', marginBottom: 4 }}>
|
|
<Form.Item {...rest} name={[name, 'fieldId']} rules={[{ required: true }]} noStyle>
|
|
<Select style={{ width: 200 }} placeholder="Feld" showSearch optionFilterProp="children">
|
|
{customFields.map((cf) => (
|
|
<Select.Option key={cf.id} value={cf.id}>{cf.name}</Select.Option>
|
|
))}
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item {...rest} name={[name, 'value']} noStyle>
|
|
<Input placeholder="Wert / Template" style={{ width: 260 }} />
|
|
</Form.Item>
|
|
<Button icon={<MinusCircleOutlined />} onClick={() => remove(name)} />
|
|
</Space>
|
|
))}
|
|
<Button type="dashed" onClick={() => add()} icon={<PlusOutlined />}>Custom Field</Button>
|
|
</>
|
|
)}
|
|
</Form.List>
|
|
</Form.Item>
|
|
</>
|
|
);
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const columns: ColumnsType<InboxAction> = [
|
|
{ title: '#', dataIndex: 'Order', key: 'order', width: 60 },
|
|
{ title: 'Typ', key: 'type', render: (_, r) => <Tag color="blue">{INBOX_ACTION_LABELS[r.ActionType]}</Tag> },
|
|
{ title: 'Aktiv', key: 'active', width: 70, render: (_, r) => <Switch size="small" checked={r.IsActive} disabled /> },
|
|
{
|
|
title: '', key: 'edit', width: 110,
|
|
render: (_, r) => (
|
|
<Space>
|
|
<Button size="small" icon={<EditOutlined />} onClick={() => openEdit(r)} />
|
|
<Popconfirm title="Löschen?" onConfirm={() => handleDelete(r.Id)}>
|
|
<Button danger size="small" icon={<DeleteOutlined />} />
|
|
</Popconfirm>
|
|
</Space>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div style={{ marginTop: 16 }}>
|
|
<Space style={{ marginBottom: 8 }}>
|
|
<h4 style={{ margin: 0 }}>Weiterverarbeitungs-Aktionen</h4>
|
|
<Button type="dashed" size="small" icon={<PlusOutlined />} onClick={openNew}>Aktion hinzufügen</Button>
|
|
</Space>
|
|
<Table<InboxAction> rowKey="Id" columns={columns} dataSource={actions} loading={loading} pagination={false} size="small" />
|
|
|
|
<Modal
|
|
title={isNew ? 'Neue Aktion' : 'Aktion bearbeiten'}
|
|
open={!!editing}
|
|
onOk={handleSaveWrapped}
|
|
onCancel={() => setEditing(null)}
|
|
okText="Speichern"
|
|
cancelText="Abbrechen"
|
|
width={680}
|
|
>
|
|
<Form form={form} layout="vertical">
|
|
<Space style={{ width: '100%' }}>
|
|
<Form.Item name="ActionType" label="Aktionstyp" rules={[{ required: true }]}>
|
|
<Select style={{ width: 220 }} onChange={(v) => setActionType(v)}>
|
|
{(Object.keys(INBOX_ACTION_LABELS) as InboxActionType[]).map((k) => (
|
|
<Select.Option key={k} value={k}>{INBOX_ACTION_LABELS[k]}</Select.Option>
|
|
))}
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item name="Order" label="Reihenfolge"><InputNumber min={1} /></Form.Item>
|
|
<Form.Item name="IsActive" label="Aktiv" valuePropName="checked"><Switch /></Form.Item>
|
|
</Space>
|
|
<Divider />
|
|
{renderContentFields()}
|
|
</Form>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
// Eingangsdokumentarten Tab (ehemals Barcode-Vorlagen)
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
|
|
function BarcodeTemplatesTab() {
|
|
const [data, setData] = useState<BarcodeTemplate[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [modalOpen, setModalOpen] = useState(false);
|
|
const [editing, setEditing] = useState<BarcodeTemplate | null>(null);
|
|
const [isNew, setIsNew] = useState(false);
|
|
const [testValue, setTestValue] = useState('');
|
|
const [form] = Form.useForm();
|
|
|
|
const load = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
setData(await barcodeTemplatesApi.list());
|
|
} catch {
|
|
message.error('Vorlagen konnten nicht geladen werden');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => { load(); }, [load]);
|
|
|
|
const openCreate = () => {
|
|
setIsNew(true);
|
|
setEditing(null);
|
|
setTestValue('');
|
|
form.resetFields();
|
|
form.setFieldsValue({ SplitBefore: false, DateinameTemplate: '' });
|
|
setModalOpen(true);
|
|
};
|
|
|
|
const openEdit = (row: BarcodeTemplate) => {
|
|
setIsNew(false);
|
|
setEditing(row);
|
|
setTestValue('');
|
|
form.setFieldsValue({ Name: row.Name, Regex: row.Regex, SplitBefore: row.SplitBefore, DateinameTemplate: row.DateinameTemplate ?? '' });
|
|
setModalOpen(true);
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
const values = await form.validateFields();
|
|
try {
|
|
if (editing) {
|
|
await barcodeTemplatesApi.update(editing.Id, values);
|
|
message.success('Eingangsdokumentart aktualisiert');
|
|
} else {
|
|
await barcodeTemplatesApi.create({ ...values, Actions: [] });
|
|
message.success('Eingangsdokumentart angelegt');
|
|
}
|
|
if (isNew) setModalOpen(false);
|
|
load();
|
|
} catch (err: any) {
|
|
message.error(err?.response?.data?.message ?? 'Speichern fehlgeschlagen');
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (id: number) => {
|
|
await barcodeTemplatesApi.remove(id);
|
|
message.success('Vorlage gelöscht');
|
|
load();
|
|
};
|
|
|
|
const columns: ColumnsType<BarcodeTemplate> = [
|
|
{ title: 'Name', dataIndex: 'Name', key: 'name' },
|
|
{
|
|
title: 'Regex',
|
|
dataIndex: 'Regex',
|
|
key: 'regex',
|
|
render: (v: string) => <code style={{ fontSize: 12 }}>{v}</code>,
|
|
},
|
|
{
|
|
title: 'Trennen',
|
|
dataIndex: 'SplitBefore',
|
|
key: 'splitBefore',
|
|
width: 100,
|
|
render: (v: boolean) =>
|
|
v ? <Tag color="orange">vor Barcode</Tag> : <Typography.Text type="secondary">—</Typography.Text>,
|
|
},
|
|
{
|
|
title: '',
|
|
key: 'edit',
|
|
width: 140,
|
|
render: (_, row) => (
|
|
<Space>
|
|
<Button size="small" icon={<EditOutlined />} onClick={() => openEdit(row)} />
|
|
<Popconfirm title="Vorlage löschen?" onConfirm={() => handleDelete(row.Id)}>
|
|
<Button danger size="small" icon={<DeleteOutlined />} />
|
|
</Popconfirm>
|
|
</Space>
|
|
),
|
|
},
|
|
];
|
|
|
|
const currentRegex = Form.useWatch('Regex', form);
|
|
let testResult: { valid: boolean; matches: boolean } | null = null;
|
|
if (currentRegex && testValue) {
|
|
try {
|
|
testResult = { valid: true, matches: new RegExp(currentRegex).test(testValue) };
|
|
} catch {
|
|
testResult = { valid: false, matches: false };
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Space style={{ marginBottom: 16 }}>
|
|
<Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
|
|
Neue Eingangsdokumentart
|
|
</Button>
|
|
</Space>
|
|
|
|
<Table<BarcodeTemplate>
|
|
rowKey="Id"
|
|
columns={columns}
|
|
dataSource={data}
|
|
loading={loading}
|
|
pagination={false}
|
|
/>
|
|
|
|
<Modal
|
|
title={editing ? 'Eingangsdokumentart bearbeiten' : 'Neue Eingangsdokumentart'}
|
|
open={modalOpen}
|
|
onOk={handleSave}
|
|
onCancel={() => { setModalOpen(false); setEditing(null); }}
|
|
okText="Speichern"
|
|
cancelText="Abbrechen"
|
|
width={720}
|
|
>
|
|
<Form form={form} layout="vertical">
|
|
<Form.Item name="Name" label="Name" rules={[{ required: true, message: 'Name ist erforderlich' }]}>
|
|
<Input placeholder="z. B. Lager-Etikett" />
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
name="Regex"
|
|
label="Regex"
|
|
rules={[
|
|
{ required: true, message: 'Regex ist erforderlich' },
|
|
{
|
|
validator: (_, value) => {
|
|
if (!value) return Promise.resolve();
|
|
try { new RegExp(value); return Promise.resolve(); }
|
|
catch { return Promise.reject(new Error('Ungültige Regex')); }
|
|
},
|
|
},
|
|
]}
|
|
extra="JavaScript-Syntax, z. B. ^\d{4}-\d{6}-\d{8}$ oder ^AM-\d{8}$"
|
|
>
|
|
<Input placeholder="^\d{4}-\d{6}-\d{8}$" />
|
|
</Form.Item>
|
|
|
|
<Form.Item label="Regex testen">
|
|
<Input
|
|
placeholder="Beispiel-Barcode-Inhalt eingeben"
|
|
value={testValue}
|
|
onChange={(e) => setTestValue(e.target.value)}
|
|
/>
|
|
{testResult && (
|
|
<div style={{ marginTop: 4, fontSize: 12 }}>
|
|
{!testResult.valid ? (
|
|
<Tag color="red">Regex ungültig</Tag>
|
|
) : testResult.matches ? (
|
|
<Tag color="green">Treffer</Tag>
|
|
) : (
|
|
<Tag>Kein Treffer</Tag>
|
|
)}
|
|
</div>
|
|
)}
|
|
</Form.Item>
|
|
|
|
<Form.Item name="SplitBefore" valuePropName="checked">
|
|
<Checkbox>Vor diesem Barcode ein neues Dokument starten</Checkbox>
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
name="DateinameTemplate"
|
|
label="Belegname"
|
|
extra="Platzhalter z. B. {barcode}, {datum}, {barcode.gruppe}. Wird als Standard-Belegname bei Export und E-Mail verwendet."
|
|
>
|
|
<Input placeholder="{barcode}_{datum}" />
|
|
</Form.Item>
|
|
</Form>
|
|
|
|
{editing && !isNew && (
|
|
<>
|
|
<Divider />
|
|
<InboxActionsForTemplateEditor templateId={editing.Id} />
|
|
</>
|
|
)}
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|
|
|
|
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
// Settings Page
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
|
|
export default function SettingsPage() {
|
|
return (
|
|
<div>
|
|
<Title level={3}>Einstellungen</Title>
|
|
<Card>
|
|
<Tabs
|
|
items={[
|
|
{
|
|
key: 'users',
|
|
label: <span><UserOutlined /> Benutzer & Betriebe</span>,
|
|
children: <UserClientsTab />,
|
|
},
|
|
{
|
|
key: 'doctypes',
|
|
label: <span><FileTextOutlined /> Dokumenttypen</span>,
|
|
children: <DocTypesTab />,
|
|
},
|
|
{
|
|
key: 'postprocessing',
|
|
label: <span><ThunderboltOutlined /> Postprocessing</span>,
|
|
children: <PostprocessingTab />,
|
|
},
|
|
{
|
|
key: 'barcode-templates',
|
|
label: <span><QrcodeOutlined /> Eingangsdokumentarten</span>,
|
|
children: <BarcodeTemplatesTab />,
|
|
},
|
|
{
|
|
key: 'correspondents',
|
|
label: <span><UserOutlined /> Korrespondenten</span>,
|
|
children: <CorrespondentsTab />,
|
|
},
|
|
{
|
|
key: 'export-targets',
|
|
label: <span><CloudUploadOutlined /> Export-Ziele</span>,
|
|
children: <ExportTargetsTab />,
|
|
},
|
|
{
|
|
key: 'logs',
|
|
label: <span><HistoryOutlined /> Logs</span>,
|
|
children: <PostprocessingLogsTab />,
|
|
},
|
|
{
|
|
key: 'task-log',
|
|
label: <span><UnorderedListOutlined /> Task-Log</span>,
|
|
children: <TaskLogPage />,
|
|
},
|
|
{
|
|
key: 'api-keys',
|
|
label: <span><KeyOutlined /> API-Keys</span>,
|
|
children: <ApiKeysTab />,
|
|
},
|
|
]}
|
|
/>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|