feat: implement Freigabesystem for payment approval workflow
Adds a dedicated approval view for PM_Freigabe users to release documents for payment by setting Paperless custom field 15 to a predefined value. - Backend: VIEW_FREIGABE permission mapped to PM_Freigabe OIDC group - Backend: FreigabeErforderlich flag on DocumentType entity (auto-migrated) - Backend: FreigabeModule with endpoints to list documents, fetch field options dynamically from Paperless, and set the approval custom field - Frontend: /freigabe route with filter (default: nicht freigegeben), paginated table, and modal to select approval value - Frontend: Settings checkbox to mark document types as requiring approval - Frontend: Freigabe menu item visible only to PM_Freigabe/PM_Admin users Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -20,6 +20,7 @@ const SettingsPage = lazy(() => import('./pages/SettingsPage'));
|
||||
const UserSettingsPage = lazy(() => import('./pages/UserSettingsPage'));
|
||||
const LoginPage = lazy(() => import('./pages/LoginPage'));
|
||||
const DashboardPage = lazy(() => import('./pages/DashboardPage'));
|
||||
const FreigabePage = lazy(() => import('./pages/FreigabePage'));
|
||||
import { Permission } from './auth/permissions';
|
||||
|
||||
function UnauthorizedPage() {
|
||||
@@ -131,6 +132,7 @@ function ThemedApp() {
|
||||
<Route path="/mailpostfach" element={<PermissionRoute permission={Permission.VIEW_MAIL}><MailpostfachPage /></PermissionRoute>} />
|
||||
<Route path="/mailpostfach/:id" element={<PermissionRoute permission={Permission.VIEW_MAIL}><MailDetailPage /></PermissionRoute>} />
|
||||
<Route path="/settings" element={<PermissionRoute permission={Permission.MANAGE_SETTINGS}><SettingsPage /></PermissionRoute>} />
|
||||
<Route path="/freigabe" element={<PermissionRoute permission={Permission.VIEW_FREIGABE}><FreigabePage /></PermissionRoute>} />
|
||||
<Route path="/user-settings" element={<UserSettingsPage />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
import api from './client';
|
||||
|
||||
export interface FreigabeDocument {
|
||||
id: number;
|
||||
title: string;
|
||||
created: string;
|
||||
created_date: string;
|
||||
correspondent: number | null;
|
||||
document_type: number | null;
|
||||
archive_serial_number: number | null;
|
||||
tags: number[];
|
||||
custom_fields: { field: number; value: any }[];
|
||||
}
|
||||
|
||||
export interface FreigabeOption {
|
||||
id: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export interface FreigabeResult {
|
||||
count: number;
|
||||
results: FreigabeDocument[];
|
||||
}
|
||||
|
||||
export const freigabeApi = {
|
||||
getDocuments: (page = 1, pageSize = 25, nurNichtFreigegeben = true) =>
|
||||
api
|
||||
.get<FreigabeResult>('/api/freigabe/documents', {
|
||||
params: { page, pageSize, nurNichtFreigegeben },
|
||||
})
|
||||
.then((r) => r.data),
|
||||
|
||||
setFreigabe: (docId: number, value: string | null) =>
|
||||
api
|
||||
.put<{ success: boolean }>(`/api/freigabe/documents/${docId}/freigabe`, { value })
|
||||
.then((r) => r.data),
|
||||
|
||||
getOptions: () =>
|
||||
api.get<FreigabeOption[]>('/api/freigabe/options').then((r) => r.data),
|
||||
};
|
||||
@@ -6,6 +6,7 @@ export interface SettingDocType {
|
||||
TitelTemplate: string;
|
||||
TagNotReady: number | null;
|
||||
TagReady: number | null;
|
||||
FreigabeErforderlich?: boolean | null;
|
||||
}
|
||||
|
||||
export interface SettingDocField {
|
||||
|
||||
@@ -5,6 +5,7 @@ export const Permission = {
|
||||
VIEW_INBOX: 'VIEW_INBOX',
|
||||
VIEW_SCANNER: 'VIEW_SCANNER',
|
||||
MANAGE_SETTINGS: 'MANAGE_SETTINGS',
|
||||
VIEW_FREIGABE: 'VIEW_FREIGABE',
|
||||
} as const;
|
||||
|
||||
export type Permission = typeof Permission[keyof typeof Permission];
|
||||
@@ -24,6 +25,7 @@ export function mapGroupsToPermissions(groups: string[] | undefined | null): Per
|
||||
permissions.add(Permission.VIEW_INBOX);
|
||||
permissions.add(Permission.VIEW_SCANNER);
|
||||
permissions.add(Permission.MANAGE_SETTINGS);
|
||||
permissions.add(Permission.VIEW_FREIGABE);
|
||||
return Array.from(permissions);
|
||||
}
|
||||
|
||||
@@ -39,6 +41,9 @@ export function mapGroupsToPermissions(groups: string[] | undefined | null): Per
|
||||
if (groups.includes('PM_Scanner')) {
|
||||
permissions.add(Permission.VIEW_SCANNER);
|
||||
}
|
||||
if (groups.includes('PM_Freigabe')) {
|
||||
permissions.add(Permission.VIEW_FREIGABE);
|
||||
}
|
||||
|
||||
return Array.from(permissions);
|
||||
}
|
||||
|
||||
@@ -13,6 +13,7 @@ import {
|
||||
MoonOutlined,
|
||||
AppstoreOutlined,
|
||||
GlobalOutlined,
|
||||
CheckCircleOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { useAuth } from '../auth/AuthContext';
|
||||
import { useTheme } from '../theme/ThemeContext';
|
||||
@@ -38,6 +39,7 @@ const allMenuItems: MenuItemDef[] = [
|
||||
{ key: '/manuell', icon: <EditOutlined />, label: 'Manuell bearbeiten', permission: Permission.PROCESS_MANUALLY, countKey: 'manuell' },
|
||||
{ key: '/mailpostfach', icon: <MailOutlined />, label: 'Mailpostfach', permission: Permission.VIEW_MAIL, countKey: 'mailpostfach' },
|
||||
{ key: 'agrarmonitor', icon: <GlobalOutlined />, label: 'In Agrarmonitor', permission: Permission.PROCESS_MANUALLY, countKey: 'agrarmonitor', externalUrl: 'https://admin7.agrarmonitor.de/dateien/eingang#dateien' },
|
||||
{ key: '/freigabe', icon: <CheckCircleOutlined />, label: 'Freigabe', permission: Permission.VIEW_FREIGABE },
|
||||
{ key: '/settings', icon: <SettingOutlined />, label: 'Einstellungen', permission: Permission.MANAGE_SETTINGS },
|
||||
];
|
||||
|
||||
|
||||
@@ -0,0 +1,213 @@
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import {
|
||||
Table, Typography, Tag, Button, Modal, Select, message, Space, Radio,
|
||||
} from 'antd';
|
||||
import { CheckCircleOutlined } from '@ant-design/icons';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import dayjs from 'dayjs';
|
||||
import { freigabeApi, type FreigabeDocument, type FreigabeOption } from '../api/freigabe';
|
||||
import { paperlessApi, type PaperlessDocType, type PaperlessCorrespondent } from '../api/paperless';
|
||||
|
||||
const { Title } = Typography;
|
||||
const FREIGABE_FIELD_ID = 15;
|
||||
|
||||
export default function FreigabePage() {
|
||||
const [data, setData] = useState<FreigabeDocument[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [page, setPage] = useState(1);
|
||||
const [pageSize, setPageSize] = useState(25);
|
||||
const [nurNichtFreigegeben, setNurNichtFreigegeben] = useState(true);
|
||||
|
||||
const [docTypes, setDocTypes] = useState<PaperlessDocType[]>([]);
|
||||
const [correspondents, setCorrespondents] = useState<PaperlessCorrespondent[]>([]);
|
||||
const [freigabeOptions, setFreigabeOptions] = useState<FreigabeOption[]>([]);
|
||||
|
||||
const [selectedDoc, setSelectedDoc] = useState<FreigabeDocument | null>(null);
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [selectedValue, setSelectedValue] = useState<string | null>(null);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
Promise.all([
|
||||
paperlessApi.getDocumentTypes(),
|
||||
paperlessApi.getCorrespondents(),
|
||||
freigabeApi.getOptions(),
|
||||
]).then(([dts, corrs, opts]) => {
|
||||
setDocTypes(dts);
|
||||
setCorrespondents(corrs);
|
||||
setFreigabeOptions(opts);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await freigabeApi.getDocuments(page, pageSize, nurNichtFreigegeben);
|
||||
setData(result.results ?? []);
|
||||
setTotal(result.count ?? 0);
|
||||
} catch {
|
||||
message.error('Fehler beim Laden der Belege');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [page, pageSize, nurNichtFreigegeben]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [fetchData]);
|
||||
|
||||
const getDocTypeName = (id: number | null) => {
|
||||
if (!id) return '—';
|
||||
return docTypes.find((d) => d.id === id)?.name ?? String(id);
|
||||
};
|
||||
|
||||
const getCorrespondentName = (id: number | null) => {
|
||||
if (!id) return '—';
|
||||
return correspondents.find((c) => c.id === id)?.name ?? String(id);
|
||||
};
|
||||
|
||||
const getFreigabeValue = (doc: FreigabeDocument) => {
|
||||
const cf = doc.custom_fields?.find((f) => f.field === FREIGABE_FIELD_ID);
|
||||
if (!cf || cf.value === null || cf.value === '' || cf.value === undefined) {
|
||||
return <Tag color="warning">Nicht gesetzt</Tag>;
|
||||
}
|
||||
const opt = freigabeOptions.find((o) => String(o.id) === String(cf.value));
|
||||
return <Tag color="success">{opt?.label ?? String(cf.value)}</Tag>;
|
||||
};
|
||||
|
||||
const openModal = (doc: FreigabeDocument) => {
|
||||
const cf = doc.custom_fields?.find((f) => f.field === FREIGABE_FIELD_ID);
|
||||
setSelectedDoc(doc);
|
||||
setSelectedValue(cf?.value ?? null);
|
||||
setModalOpen(true);
|
||||
};
|
||||
|
||||
const handleFreigabe = async () => {
|
||||
if (!selectedDoc) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
await freigabeApi.setFreigabe(selectedDoc.id, selectedValue);
|
||||
message.success('Freigabe gesetzt');
|
||||
setModalOpen(false);
|
||||
setSelectedDoc(null);
|
||||
fetchData();
|
||||
} catch {
|
||||
message.error('Fehler beim Speichern der Freigabe');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const columns: ColumnsType<FreigabeDocument> = [
|
||||
{
|
||||
title: 'Dokumenttyp',
|
||||
dataIndex: 'document_type',
|
||||
key: 'doctype',
|
||||
render: getDocTypeName,
|
||||
},
|
||||
{
|
||||
title: 'Titel',
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: 'Erstellt',
|
||||
dataIndex: 'created_date',
|
||||
key: 'created',
|
||||
width: 110,
|
||||
render: (v: string) => v ? dayjs(v).format('DD.MM.YYYY') : '—',
|
||||
},
|
||||
{
|
||||
title: 'Absender',
|
||||
dataIndex: 'correspondent',
|
||||
key: 'correspondent',
|
||||
render: getCorrespondentName,
|
||||
},
|
||||
{
|
||||
title: 'Freigabe',
|
||||
key: 'freigabe',
|
||||
width: 140,
|
||||
render: (_, doc) => getFreigabeValue(doc),
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
key: 'action',
|
||||
width: 130,
|
||||
render: (_, doc) => (
|
||||
<Button
|
||||
icon={<CheckCircleOutlined />}
|
||||
size="small"
|
||||
type="primary"
|
||||
onClick={() => openModal(doc)}
|
||||
>
|
||||
Freigabe setzen
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Title level={4} style={{ marginTop: 0, marginBottom: 16 }}>Freigabe</Title>
|
||||
|
||||
<Space style={{ marginBottom: 16 }}>
|
||||
<Radio.Group
|
||||
value={nurNichtFreigegeben}
|
||||
onChange={(e) => {
|
||||
setPage(1);
|
||||
setNurNichtFreigegeben(e.target.value);
|
||||
}}
|
||||
optionType="button"
|
||||
buttonStyle="solid"
|
||||
>
|
||||
<Radio.Button value={true}>Nicht freigegeben</Radio.Button>
|
||||
<Radio.Button value={false}>Alle</Radio.Button>
|
||||
</Radio.Group>
|
||||
</Space>
|
||||
|
||||
<Table<FreigabeDocument>
|
||||
dataSource={data}
|
||||
columns={columns}
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
size="small"
|
||||
pagination={{
|
||||
current: page,
|
||||
pageSize,
|
||||
total,
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['25', '50', '100'],
|
||||
onChange: (p, ps) => {
|
||||
setPage(p);
|
||||
setPageSize(ps);
|
||||
},
|
||||
showTotal: (t) => `${t} Belege`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
title="Freigabe setzen"
|
||||
open={modalOpen}
|
||||
onOk={handleFreigabe}
|
||||
onCancel={() => { setModalOpen(false); setSelectedDoc(null); }}
|
||||
okText="Speichern"
|
||||
cancelText="Abbrechen"
|
||||
confirmLoading={saving}
|
||||
>
|
||||
<p style={{ marginBottom: 12 }}>
|
||||
<strong>{selectedDoc?.title}</strong>
|
||||
</p>
|
||||
<Select
|
||||
style={{ width: '100%' }}
|
||||
placeholder="Freigabe-Status wählen"
|
||||
allowClear
|
||||
value={selectedValue ?? undefined}
|
||||
onChange={(v) => setSelectedValue(v ?? null)}
|
||||
options={freigabeOptions.map((o) => ({ value: o.id, label: o.label }))}
|
||||
/>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -579,6 +579,12 @@ function DocTypesTab() {
|
||||
{ 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: 'Freigabe erf.',
|
||||
dataIndex: 'FreigabeErforderlich',
|
||||
key: 'freigabe',
|
||||
render: (v: boolean | null) => v ? <Tag color="blue">Ja</Tag> : '—',
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
key: 'actions',
|
||||
@@ -624,6 +630,9 @@ function DocTypesTab() {
|
||||
{tags.map(t => <Select.Option key={t.id} value={t.id}>{t.name}</Select.Option>)}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item name="FreigabeErforderlich" valuePropName="checked" label="Freigabe erforderlich">
|
||||
<Checkbox />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
{editing && (
|
||||
|
||||
Reference in New Issue
Block a user