From 0bdaf86153eb52b3077c63b4999b13baa1df0538 Mon Sep 17 00:00:00 2001 From: ValueOn AG Date: Tue, 21 Apr 2026 18:14:26 +0200 Subject: [PATCH 1/4] redmine integration --- src/api.ts | 14 + src/api/redmineApi.ts | 387 ++++++++++++++++++ src/config/pageRegistry.tsx | 6 + src/pages/FeatureView.tsx | 8 + .../views/redmine/RedmineBrowserView.tsx | 101 +++++ .../views/redmine/RedmineSettingsView.tsx | 349 ++++++++++++++++ src/pages/views/redmine/RedmineStatsView.tsx | 93 +++++ .../views/redmine/RedmineViews.module.css | 180 ++++++++ src/pages/views/redmine/index.ts | 3 + 9 files changed, 1141 insertions(+) create mode 100644 src/api/redmineApi.ts create mode 100644 src/pages/views/redmine/RedmineBrowserView.tsx create mode 100644 src/pages/views/redmine/RedmineSettingsView.tsx create mode 100644 src/pages/views/redmine/RedmineStatsView.tsx create mode 100644 src/pages/views/redmine/RedmineViews.module.css create mode 100644 src/pages/views/redmine/index.ts diff --git a/src/api.ts b/src/api.ts index 69ac956..8771019 100644 --- a/src/api.ts +++ b/src/api.ts @@ -92,6 +92,20 @@ api.interceptors.request.use( config.headers['Accept-Language'] = appLanguage; } + // Send browser IANA timezone (e.g. "Europe/Zurich") so the gateway can + // resolve "now" for AI agents and user-visible time strings without + // hardcoding a server-side default. Mirrors the Accept-Language pattern. + if (config.headers) { + try { + const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone; + if (browserTimezone) { + config.headers['X-User-Timezone'] = browserTimezone; + } + } catch { + // Older browsers without Intl.DateTimeFormat: backend falls back to UTC + } + } + // Add multi-tenant context headers from URL (if not already set) // This ensures Feature-Instance roles are loaded for permission checks const context = getContextFromUrl(); diff --git a/src/api/redmineApi.ts b/src/api/redmineApi.ts new file mode 100644 index 0000000..c89664a --- /dev/null +++ b/src/api/redmineApi.ts @@ -0,0 +1,387 @@ +/** + * Redmine API + * + * Frontend client for the Redmine feature backend. + * URL pattern: /api/redmine/{instanceId}/... + */ + +import { ApiRequestOptions } from '../hooks/useApi'; + +// ============================================================================ +// Types -- mirror gateway/modules/features/redmine/datamodelRedmine.py +// ============================================================================ + +export interface RedmineConfigDto { + id?: string; + featureInstanceId: string; + mandateId?: string | null; + baseUrl: string; + projectId: string; + hasApiKey: boolean; + rootTrackerName: string; + defaultPeriodValue?: Record | null; + schemaCacheTtlSeconds: number; + schemaCachedAt?: number | null; + isActive: boolean; + lastConnectedAt?: number | null; + lastSyncAt?: number | null; + lastFullSyncAt?: number | null; + lastSyncTicketCount?: number | null; + lastSyncErrorMessage?: string | null; +} + +export interface RedmineConfigUpdateRequest { + baseUrl?: string; + projectId?: string; + apiKey?: string; + rootTrackerName?: string; + defaultPeriodValue?: Record | null; + schemaCacheTtlSeconds?: number; + isActive?: boolean; +} + +export interface RedmineFieldChoice { + id: number; + name: string; + isClosed?: boolean | null; +} + +export interface RedmineCustomFieldSchema { + id: number; + name: string; + fieldFormat: string; + isRequired: boolean; + possibleValues: string[]; + multiple: boolean; + defaultValue?: string | null; +} + +export interface RedmineFieldSchema { + projectId: string; + projectName: string; + trackers: RedmineFieldChoice[]; + statuses: RedmineFieldChoice[]; + priorities: RedmineFieldChoice[]; + users: RedmineFieldChoice[]; + customFields: RedmineCustomFieldSchema[]; + rootTrackerName: string; + rootTrackerId: number | null; +} + +export interface RedmineRelation { + id: number; + issueId: number; + issueToId: number; + relationType: string; + delay?: number | null; +} + +export interface RedmineCustomFieldValue { + id: number; + name: string; + value: any; +} + +export interface RedmineTicket { + id: number; + subject: string; + description: string; + trackerId?: number | null; + trackerName?: string | null; + statusId?: number | null; + statusName?: string | null; + isClosed: boolean; + priorityId?: number | null; + priorityName?: string | null; + assignedToId?: number | null; + assignedToName?: string | null; + authorId?: number | null; + authorName?: string | null; + parentId?: number | null; + fixedVersionId?: number | null; + fixedVersionName?: string | null; + createdOn?: string | null; + updatedOn?: string | null; + customFields: RedmineCustomFieldValue[]; + relations: RedmineRelation[]; +} + +export interface RedmineSyncResult { + instanceId: string; + full: boolean; + ticketsUpserted: number; + relationsUpserted: number; + durationMs: number; + lastSyncAt: number; + error?: string | null; +} + +export interface RedmineSyncStatus { + instanceId: string; + lastSyncAt?: number | null; + lastFullSyncAt?: number | null; + lastSyncDurationMs?: number | null; + lastSyncTicketCount?: number | null; + lastSyncErrorAt?: number | null; + lastSyncErrorMessage?: string | null; + mirroredTicketCount: number; + mirroredRelationCount: number; +} + +export interface RedmineConnectionTestResult { + ok: boolean; + reason?: string; + message?: string; + status?: number; + user?: { id: number; name: string }; + project?: { id: number; name: string }; +} + +export interface RedmineStats { + instanceId: string; + dateFrom?: string | null; + dateTo?: string | null; + bucket: string; + trackerIds: number[]; + kpis: { + total: number; + open: number; + closed: number; + closedInPeriod: number; + createdInPeriod: number; + orphans: number; + }; + statusByTracker: Array<{ + trackerId?: number | null; + trackerName: string; + countsByStatus: Record; + total: number; + }>; + throughput: Array<{ + bucketKey: string; + label: string; + created: number; + closed: number; + }>; + topAssignees: Array<{ + assignedToId?: number | null; + name: string; + open: number; + }>; + relationDistribution: Array<{ relationType: string; count: number }>; + backlogAging: Array<{ + bucketKey: string; + label: string; + minDays: number; + maxDays?: number | null; + count: number; + }>; +} + +export type ApiRequestFunction = (options: ApiRequestOptions) => Promise; + +const _baseUrl = (instanceId: string): string => `/api/redmine/${instanceId}`; + +// ============================================================================ +// Config +// ============================================================================ + +export async function getRedmineConfigApi( + request: ApiRequestFunction, + instanceId: string, +): Promise { + return await request({ url: `${_baseUrl(instanceId)}/config`, method: 'get' }); +} + +export async function updateRedmineConfigApi( + request: ApiRequestFunction, + instanceId: string, + body: RedmineConfigUpdateRequest, +): Promise { + return await request({ url: `${_baseUrl(instanceId)}/config`, method: 'put', data: body }); +} + +export async function deleteRedmineConfigApi( + request: ApiRequestFunction, + instanceId: string, +): Promise<{ deleted: boolean }> { + return await request({ url: `${_baseUrl(instanceId)}/config`, method: 'delete' }); +} + +export async function testRedmineConnectionApi( + request: ApiRequestFunction, + instanceId: string, +): Promise { + return await request({ url: `${_baseUrl(instanceId)}/config/test`, method: 'post' }); +} + +// ============================================================================ +// Schema +// ============================================================================ + +export async function getRedmineSchemaApi( + request: ApiRequestFunction, + instanceId: string, + forceRefresh = false, +): Promise { + return await request({ + url: `${_baseUrl(instanceId)}/schema`, + method: 'get', + params: forceRefresh ? { forceRefresh: true } : undefined, + }); +} + +// ============================================================================ +// Sync +// ============================================================================ + +export async function runRedmineSyncApi( + request: ApiRequestFunction, + instanceId: string, + force = false, +): Promise { + return await request({ + url: `${_baseUrl(instanceId)}/sync`, + method: 'post', + params: force ? { force: true } : undefined, + }); +} + +export async function getRedmineSyncStatusApi( + request: ApiRequestFunction, + instanceId: string, +): Promise { + return await request({ url: `${_baseUrl(instanceId)}/sync/status`, method: 'get' }); +} + +// ============================================================================ +// Tickets +// ============================================================================ + +export interface ListTicketsParams { + trackerIds?: number[]; + status?: 'open' | 'closed' | '*'; + dateFrom?: string; + dateTo?: string; + assignedToId?: number; +} + +export async function listRedmineTicketsApi( + request: ApiRequestFunction, + instanceId: string, + params: ListTicketsParams = {}, +): Promise { + const queryParams: Record = {}; + if (params.status) queryParams.status = params.status; + if (params.dateFrom) queryParams.dateFrom = params.dateFrom; + if (params.dateTo) queryParams.dateTo = params.dateTo; + if (params.assignedToId !== undefined) queryParams.assignedToId = params.assignedToId; + if (params.trackerIds && params.trackerIds.length > 0) queryParams.trackerIds = params.trackerIds; + return await request({ + url: `${_baseUrl(instanceId)}/tickets`, + method: 'get', + params: queryParams, + }); +} + +export async function getRedmineTicketApi( + request: ApiRequestFunction, + instanceId: string, + issueId: number, +): Promise { + return await request({ + url: `${_baseUrl(instanceId)}/tickets/${issueId}`, + method: 'get', + }); +} + +export interface RedmineTicketUpdateBody { + subject?: string; + description?: string; + trackerId?: number; + statusId?: number; + priorityId?: number; + assignedToId?: number; + parentIssueId?: number; + fixedVersionId?: number; + notes?: string; + customFields?: Record; +} + +export async function updateRedmineTicketApi( + request: ApiRequestFunction, + instanceId: string, + issueId: number, + body: RedmineTicketUpdateBody, +): Promise { + return await request({ + url: `${_baseUrl(instanceId)}/tickets/${issueId}`, + method: 'put', + data: body, + }); +} + +export interface RedmineTicketCreateBody { + subject: string; + trackerId: number; + description?: string; + statusId?: number; + priorityId?: number; + assignedToId?: number; + parentIssueId?: number; + fixedVersionId?: number; + customFields?: Record; +} + +export async function createRedmineTicketApi( + request: ApiRequestFunction, + instanceId: string, + body: RedmineTicketCreateBody, +): Promise { + return await request({ + url: `${_baseUrl(instanceId)}/tickets`, + method: 'post', + data: body, + }); +} + +export async function deleteRedmineTicketApi( + request: ApiRequestFunction, + instanceId: string, + issueId: number, + fallbackStatusId?: number, +): Promise<{ deleted: boolean; archived: boolean; statusId: number | null }> { + return await request({ + url: `${_baseUrl(instanceId)}/tickets/${issueId}`, + method: 'delete', + params: fallbackStatusId !== undefined ? { fallbackStatusId } : undefined, + }); +} + +// ============================================================================ +// Stats +// ============================================================================ + +export interface RedmineStatsParams { + dateFrom?: string; + dateTo?: string; + bucket?: 'day' | 'week' | 'month'; + trackerIds?: number[]; +} + +export async function getRedmineStatsApi( + request: ApiRequestFunction, + instanceId: string, + params: RedmineStatsParams = {}, +): Promise { + const queryParams: Record = {}; + if (params.dateFrom) queryParams.dateFrom = params.dateFrom; + if (params.dateTo) queryParams.dateTo = params.dateTo; + if (params.bucket) queryParams.bucket = params.bucket; + if (params.trackerIds && params.trackerIds.length > 0) queryParams.trackerIds = params.trackerIds; + return await request({ + url: `${_baseUrl(instanceId)}/stats`, + method: 'get', + params: queryParams, + }); +} diff --git a/src/config/pageRegistry.tsx b/src/config/pageRegistry.tsx index eca461c..f3c18d8 100644 --- a/src/config/pageRegistry.tsx +++ b/src/config/pageRegistry.tsx @@ -142,6 +142,12 @@ export const PAGE_ICONS: Record = { 'page.feature.workspace.dashboard': , 'page.feature.workspace.editor': , 'feature.workspace': , + + // Feature pages - Redmine + 'feature.redmine': , + 'page.feature.redmine.stats': , + 'page.feature.redmine.browser': , + 'page.feature.redmine.settings': , }; // ============================================================================= diff --git a/src/pages/FeatureView.tsx b/src/pages/FeatureView.tsx index 03c4b45..7fb75e3 100644 --- a/src/pages/FeatureView.tsx +++ b/src/pages/FeatureView.tsx @@ -48,6 +48,9 @@ import { NeutralizationView } from './views/neutralization'; // CommCoach Views import { CommcoachDashboardView, CommcoachDossierView, CommcoachSettingsView } from './views/commcoach'; +// Redmine Views +import { RedmineSettingsView, RedmineStatsView, RedmineBrowserView } from './views/redmine'; + import styles from './FeatureView.module.css'; import { useLanguage } from '../providers/language/LanguageContext'; @@ -168,6 +171,11 @@ const VIEW_COMPONENTS: Record> = { dossier: CommcoachDossierView, settings: CommcoachSettingsView, }, + redmine: { + stats: RedmineStatsView, + browser: RedmineBrowserView, + settings: RedmineSettingsView, + }, }; // ============================================================================= diff --git a/src/pages/views/redmine/RedmineBrowserView.tsx b/src/pages/views/redmine/RedmineBrowserView.tsx new file mode 100644 index 0000000..f85a836 --- /dev/null +++ b/src/pages/views/redmine/RedmineBrowserView.tsx @@ -0,0 +1,101 @@ +/** + * Redmine Ticket Browser (Phase 2 placeholder). + * + * Will render the tree-as-table layout from the HTML pilot, with + * filters and a right-side editor pane. For now: simple flat list from + * the local mirror so the wiring can be verified. + */ + +import React, { useCallback, useEffect, useState } from 'react'; + +import { useApiRequest } from '../../../hooks/useApi'; +import { useInstanceId } from '../../../hooks/useCurrentInstance'; +import { useLanguage } from '../../../providers/language/LanguageContext'; +import { + RedmineTicket, + listRedmineTicketsApi, +} from '../../../api/redmineApi'; + +import styles from './RedmineViews.module.css'; + +export const RedmineBrowserView: React.FC = () => { + const { t } = useLanguage(); + const { request } = useApiRequest(); + const instanceId = useInstanceId(); + + const [tickets, setTickets] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + const _load = useCallback(async () => { + if (!instanceId) return; + setLoading(true); + setError(null); + try { + const result = await listRedmineTicketsApi(request, instanceId, { status: '*' }); + setTickets(result); + } catch (e: any) { + setError(e?.message || t('Fehler beim Laden')); + } finally { + setLoading(false); + } + }, [request, instanceId, t]); + + useEffect(() => { _load(); }, [_load]); + + if (loading) return
{t('Tickets werden geladen ...')}
; + + return ( +
+

{t('Redmine -- Ticket-Browser')}

+

+ {t('Liest aus dem lokalen Mirror. Tree-Layout und Editor-Pane folgen im naechsten Schritt.')} +

+ + {error &&
{error}
} + + {tickets.length === 0 ? ( +
+ {t('Keine Tickets im Mirror. Bitte zuerst in den Einstellungen "Sync starten".')} +
+ ) : ( +
+

+ {tickets.length} {t('Tickets')} +

+ + + + + + + + + + + + + {tickets.slice(0, 200).map(ticket => ( + + + + + + + + + ))} + +
ID{t('Tracker')}{t('Titel')}Status{t('Zuweisung')}{t('Geaendert')}
#{ticket.id}{ticket.trackerName || '-'}{ticket.subject}{ticket.statusName || '-'}{ticket.assignedToName || '-'}{ticket.updatedOn?.slice(0, 10) || '-'}
+ {tickets.length > 200 && ( +

+ {t('(Anzeige auf 200 begrenzt -- Tree-Layout folgt.)')} +

+ )} +
+ )} +
+ ); +}; + +export default RedmineBrowserView; diff --git a/src/pages/views/redmine/RedmineSettingsView.tsx b/src/pages/views/redmine/RedmineSettingsView.tsx new file mode 100644 index 0000000..d0ad5e0 --- /dev/null +++ b/src/pages/views/redmine/RedmineSettingsView.tsx @@ -0,0 +1,349 @@ +/** + * Redmine Settings View + * + * Configure the Redmine connection for this feature instance: + * - Base URL, Project ID, API Key, Root Tracker name + * - "Verbindung testen" -- calls whoAmI + getProject and reports the result + * - "Sync starten" -- pulls all (or only changed) tickets into the local mirror + * + * The user tests the feature directly here in Porta -- no pytest sandbox. + */ + +import React, { useCallback, useEffect, useState } from 'react'; + +import { useApiRequest } from '../../../hooks/useApi'; +import { useInstanceId } from '../../../hooks/useCurrentInstance'; +import { useLanguage } from '../../../providers/language/LanguageContext'; +import { + RedmineConfigDto, + RedmineConnectionTestResult, + RedmineSyncResult, + RedmineSyncStatus, + deleteRedmineConfigApi, + getRedmineConfigApi, + getRedmineSyncStatusApi, + runRedmineSyncApi, + testRedmineConnectionApi, + updateRedmineConfigApi, +} from '../../../api/redmineApi'; + +import styles from './RedmineViews.module.css'; + +const _formatTs = (ts?: number | null): string => { + if (!ts) return '-'; + try { + return new Date(ts * 1000).toLocaleString(); + } catch { + return String(ts); + } +}; + +const _formatDuration = (ms?: number | null): string => { + if (ms == null) return '-'; + if (ms < 1000) return `${ms} ms`; + const s = ms / 1000; + if (s < 60) return `${s.toFixed(1)} s`; + const m = s / 60; + return `${m.toFixed(1)} min`; +}; + +export const RedmineSettingsView: React.FC = () => { + const { t } = useLanguage(); + const { request } = useApiRequest(); + const instanceId = useInstanceId(); + + const [config, setConfig] = useState(null); + const [loading, setLoading] = useState(true); + const [saving, setSaving] = useState(false); + const [testing, setTesting] = useState(false); + const [syncing, setSyncing] = useState(false); + const [error, setError] = useState(null); + const [success, setSuccess] = useState(null); + const [testResult, setTestResult] = useState(null); + const [syncResult, setSyncResult] = useState(null); + const [syncStatus, setSyncStatus] = useState(null); + + const [baseUrl, setBaseUrl] = useState(''); + const [projectId, setProjectId] = useState(''); + const [rootTrackerName, setRootTrackerName] = useState('Userstory'); + const [apiKey, setApiKey] = useState(''); + + const _hydrate = useCallback((c: RedmineConfigDto) => { + setConfig(c); + setBaseUrl(c.baseUrl || ''); + setProjectId(c.projectId || ''); + setRootTrackerName(c.rootTrackerName || 'Userstory'); + }, []); + + const _loadStatus = useCallback(async () => { + if (!instanceId) return; + try { + const status = await getRedmineSyncStatusApi(request, instanceId); + setSyncStatus(status); + } catch { + // status is optional; don't block the page on failure + } + }, [request, instanceId]); + + useEffect(() => { + if (!instanceId) return; + let cancelled = false; + (async () => { + setLoading(true); + try { + const cfg = await getRedmineConfigApi(request, instanceId); + if (!cancelled) _hydrate(cfg); + await _loadStatus(); + } catch (e: any) { + if (!cancelled) setError(e?.message || t('Fehler beim Laden')); + } finally { + if (!cancelled) setLoading(false); + } + })(); + return () => { cancelled = true; }; + }, [request, instanceId, _hydrate, _loadStatus, t]); + + const _save = useCallback(async () => { + if (!instanceId) return; + setSaving(true); + setError(null); + setSuccess(null); + try { + const body: Record = { + baseUrl: baseUrl.trim(), + projectId: projectId.trim(), + rootTrackerName: rootTrackerName.trim() || 'Userstory', + isActive: true, + }; + if (apiKey.trim() !== '') body.apiKey = apiKey.trim(); + const updated = await updateRedmineConfigApi(request, instanceId, body); + _hydrate(updated); + setApiKey(''); + setSuccess(t('Einstellungen gespeichert.')); + setTimeout(() => setSuccess(null), 3000); + } catch (e: any) { + setError(e?.message || t('Fehler beim Speichern.')); + } finally { + setSaving(false); + } + }, [request, instanceId, baseUrl, projectId, rootTrackerName, apiKey, _hydrate, t]); + + const _test = useCallback(async () => { + if (!instanceId) return; + setTesting(true); + setError(null); + setTestResult(null); + try { + const result = await testRedmineConnectionApi(request, instanceId); + setTestResult(result); + } catch (e: any) { + setError(e?.message || t('Verbindungstest fehlgeschlagen.')); + } finally { + setTesting(false); + } + }, [request, instanceId, t]); + + const _runSync = useCallback(async (force: boolean) => { + if (!instanceId) return; + setSyncing(true); + setError(null); + setSuccess(null); + setSyncResult(null); + try { + const result = await runRedmineSyncApi(request, instanceId, force); + setSyncResult(result); + await _loadStatus(); + const cfg = await getRedmineConfigApi(request, instanceId); + _hydrate(cfg); + setSuccess( + t('Sync erfolgreich.') + + ` ${result.ticketsUpserted} ${t('Tickets')}, ${result.relationsUpserted} ${t('Beziehungen')}, ${_formatDuration(result.durationMs)}.`, + ); + } catch (e: any) { + setError(e?.message || t('Sync fehlgeschlagen.')); + } finally { + setSyncing(false); + } + }, [request, instanceId, _loadStatus, _hydrate, t]); + + const _delete = useCallback(async () => { + if (!instanceId) return; + if (!window.confirm(t('Konfiguration wirklich loeschen? Der lokale Mirror bleibt erhalten.'))) return; + setError(null); + setSuccess(null); + try { + await deleteRedmineConfigApi(request, instanceId); + setBaseUrl(''); + setProjectId(''); + setRootTrackerName('Userstory'); + setApiKey(''); + setConfig(null); + setSuccess(t('Konfiguration geloescht.')); + } catch (e: any) { + setError(e?.message || t('Loeschen fehlgeschlagen.')); + } + }, [request, instanceId, t]); + + if (loading) { + return
{t('Einstellungen werden geladen ...')}
; + } + + const canTest = !!config?.hasApiKey && !!baseUrl && !!projectId; + const canSync = canTest; + + return ( +
+

{t('Redmine -- Einstellungen')}

+

+ {t('Verbindung dieser Feature-Instanz zu einem Redmine-Projekt. Speichern, testen, dann initialen Sync starten.')} +

+ + {error &&
{error}
} + {success &&
{success}
} + +
+

{t('Verbindung')}

+ +
+ + setBaseUrl(e.target.value)} + placeholder="https://redmine.example.com" + spellCheck={false} + /> +
{t('Ohne abschliessenden Slash, z.B. https://redmine.logobject.ch')}
+
+ +
+ + setProjectId(e.target.value)} + placeholder="logobject-mars" + spellCheck={false} + /> +
+ +
+ + setRootTrackerName(e.target.value)} + placeholder="Userstory" + spellCheck={false} + /> +
+ {t('Tracker, der die Wurzel der Ticket-Hierarchie bildet. Wird beim Sync gegen die Tracker-Liste aufgeloest.')} +
+
+ +
+ + setApiKey(e.target.value)} + placeholder={config?.hasApiKey ? t('(gesetzt -- leer lassen, um nicht zu aendern)') : t('Redmine API Access Key')} + spellCheck={false} + autoComplete="new-password" + /> +
+ {t('Wird verschluesselt gespeichert. Status: ')} + {config?.hasApiKey ? {t('gesetzt')} : {t('nicht gesetzt')}} +
+
+ +
+ + + {config?.id && ( + + )} +
+ + {testResult && ( +
+ {testResult.ok ? ( +
+ {t('Verbindung OK')}.{' '} + {testResult.user?.name && <>{t('Angemeldet als')} {testResult.user.name}. } + {testResult.project?.name && <>{t('Projekt')}: {testResult.project.name}.} +
+ ) : ( +
+ {t('Verbindung fehlgeschlagen')}.{' '} + {testResult.message || testResult.reason || ''} + {testResult.status ? ` (HTTP ${testResult.status})` : ''} +
+ )} +
+ )} +
+ +
+

{t('Mirror-Sync')}

+

+ {t('Tickets werden in die lokale Datenbank gespiegelt, damit Statistik und Browser auch bei 20\u2019000+ Tickets schnell sind. Nach Aenderungen wird das Mirror-Bild automatisch nachgezogen.')} +

+ +
+
{t('Letzter Sync')}:
+
{_formatTs(config?.lastSyncAt)}
+
{t('Letzter Full-Sync')}:
+
{_formatTs(config?.lastFullSyncAt)}
+
{t('Letzte Sync-Dauer')}:
+
{_formatDuration(syncStatus?.lastSyncDurationMs)}
+
{t('Tickets im Mirror')}:
+
{syncStatus?.mirroredTicketCount ?? '-'}
+
{t('Beziehungen im Mirror')}:
+
{syncStatus?.mirroredRelationCount ?? '-'}
+ {config?.lastSyncErrorMessage && ( + <> +
{t('Letzter Fehler')}:
+
{config.lastSyncErrorMessage}
+ + )} +
+ +
+ + +
+ + {syncResult && ( +
+ {syncResult.full ? t('Full-Sync') : t('Inkrementeller Sync')}:{' '} + {syncResult.ticketsUpserted} {t('Tickets')}, {syncResult.relationsUpserted}{' '} + {t('Beziehungen')} in {_formatDuration(syncResult.durationMs)}. +
+ )} + + {!canSync && ( +
+ {t('Bitte zuerst Basis-URL, Projekt-ID und API-Key speichern.')} +
+ )} +
+
+ ); +}; + +export default RedmineSettingsView; diff --git a/src/pages/views/redmine/RedmineStatsView.tsx b/src/pages/views/redmine/RedmineStatsView.tsx new file mode 100644 index 0000000..1f423ce --- /dev/null +++ b/src/pages/views/redmine/RedmineStatsView.tsx @@ -0,0 +1,93 @@ +/** + * Redmine Statistics View (Phase 2 placeholder). + * + * Will render a ``FormGeneratorReport`` driven by ``getRedmineStatsApi`` + * with a ``PeriodPicker`` and tracker-filter. For now: shows the raw + * KPIs so the wiring can be verified against the local mirror. + */ + +import React, { useCallback, useEffect, useState } from 'react'; + +import { useApiRequest } from '../../../hooks/useApi'; +import { useInstanceId } from '../../../hooks/useCurrentInstance'; +import { useLanguage } from '../../../providers/language/LanguageContext'; +import { RedmineStats, getRedmineStatsApi } from '../../../api/redmineApi'; + +import styles from './RedmineViews.module.css'; + +export const RedmineStatsView: React.FC = () => { + const { t } = useLanguage(); + const { request } = useApiRequest(); + const instanceId = useInstanceId(); + + const [stats, setStats] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + const _load = useCallback(async () => { + if (!instanceId) return; + setLoading(true); + setError(null); + try { + const result = await getRedmineStatsApi(request, instanceId, { bucket: 'week' }); + setStats(result); + } catch (e: any) { + setError(e?.message || t('Fehler beim Laden')); + } finally { + setLoading(false); + } + }, [request, instanceId, t]); + + useEffect(() => { _load(); }, [_load]); + + if (loading) return
{t('Statistik wird geladen ...')}
; + + return ( +
+

{t('Redmine -- Statistik')}

+

+ {t('Aggregiert aus dem lokalen Mirror. PeriodPicker und FormGeneratorReport folgen im naechsten Schritt.')} +

+ + {error &&
{error}
} + + {stats && ( +
+

{t('KPIs (gesamter Mirror)')}

+
+
{t('Tickets gesamt')}:
+
{stats.kpis.total}
+
{t('Offen')}:
+
{stats.kpis.open}
+
{t('Geschlossen')}:
+
{stats.kpis.closed}
+
{t('Im Zeitraum erstellt')}:
+
{stats.kpis.createdInPeriod}
+
{t('Im Zeitraum geschlossen')}:
+
{stats.kpis.closedInPeriod}
+
{t('Orphans (ohne Userstory)')}:
+
{stats.kpis.orphans}
+
+
+ )} + + {stats && stats.statusByTracker.length > 0 && ( +
+

{t('Status pro Tracker')}

+
    + {stats.statusByTracker.map(entry => ( +
  • + {entry.trackerName} ({entry.total}):{' '} + {Object.entries(entry.countsByStatus) + .map(([s, n]) => `${s}: ${n}`) + .join(', ')} +
    • + ))} +
+
+ )} +
+ ); +}; + +export default RedmineStatsView; diff --git a/src/pages/views/redmine/RedmineViews.module.css b/src/pages/views/redmine/RedmineViews.module.css new file mode 100644 index 0000000..aa00c95 --- /dev/null +++ b/src/pages/views/redmine/RedmineViews.module.css @@ -0,0 +1,180 @@ +.page { + padding: 1.25rem; + max-width: 960px; + margin: 0 auto; + font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; +} + +.heading { + font-size: 1.35rem; + font-weight: 600; + margin: 0 0 1.25rem; + color: var(--text-primary, #1a202c); +} + +.subheading { + font-size: 0.95rem; + color: var(--text-secondary, #4a5568); + margin: -0.75rem 0 1.25rem; +} + +.section { + margin-bottom: 1.75rem; + padding: 1rem 1.25rem; + background: var(--bg-card, #fff); + border: 1px solid var(--border-color, #e2e8f0); + border-radius: 8px; +} + +.sectionTitle { + font-size: 1rem; + font-weight: 600; + margin: 0 0 0.85rem; + color: var(--text-primary, #1a202c); +} + +.field { + margin-bottom: 0.85rem; +} + +.label { + display: block; + font-size: 0.82rem; + font-weight: 500; + margin-bottom: 0.3rem; + color: var(--text-primary, #1a202c); +} + +.hint { + font-size: 0.78rem; + color: var(--text-secondary, #718096); + margin-top: 0.25rem; +} + +.input { + width: 100%; + padding: 0.5rem 0.75rem; + border: 1px solid var(--border-color, #e2e8f0); + border-radius: 6px; + font-size: 0.9rem; + background: #fff; + color: var(--text-primary, #1a202c); + font-family: inherit; + box-sizing: border-box; +} + +.input:focus { + outline: none; + border-color: var(--primary-color, #4A6FA5); + box-shadow: 0 0 0 2px rgba(74, 111, 165, 0.18); +} + +.row { + display: flex; + gap: 0.75rem; + flex-wrap: wrap; + align-items: flex-end; +} + +.btn { + padding: 0.55rem 1.1rem; + background: var(--primary-color, #4A6FA5); + color: #fff; + border: none; + border-radius: 6px; + cursor: pointer; + font-size: 0.88rem; + font-weight: 500; + font-family: inherit; + transition: filter 0.15s; +} + +.btn:hover:not(:disabled) { filter: brightness(1.08); } + +.btn:disabled { + background: var(--color-medium-gray, #cbd5e0); + color: var(--text-secondary, #718096); + cursor: not-allowed; +} + +.btnSecondary { + composes: btn; + background: #fff; + color: var(--primary-color, #4A6FA5); + border: 1px solid var(--primary-color, #4A6FA5); +} + +.btnSecondary:hover:not(:disabled) { + background: rgba(74, 111, 165, 0.06); + filter: none; +} + +.btnDanger { + composes: btn; + background: #C53030; +} + +.btnDanger:hover:not(:disabled) { filter: brightness(1.08); } + +.alertOk { + padding: 0.55rem 0.85rem; + background: #e6fffa; + color: #2c7a7b; + border: 1px solid #b2f5ea; + border-radius: 6px; + margin-bottom: 0.85rem; + font-size: 0.85rem; +} + +.alertErr { + padding: 0.55rem 0.85rem; + background: #fff5f5; + color: #c53030; + border: 1px solid #fed7d7; + border-radius: 6px; + margin-bottom: 0.85rem; + font-size: 0.85rem; +} + +.alertInfo { + padding: 0.55rem 0.85rem; + background: #ebf8ff; + color: #2c5282; + border: 1px solid #bee3f8; + border-radius: 6px; + margin-bottom: 0.85rem; + font-size: 0.85rem; +} + +.kvGrid { + display: grid; + grid-template-columns: max-content 1fr; + gap: 0.4rem 1rem; + font-size: 0.85rem; + color: var(--text-secondary, #4a5568); +} + +.kvLabel { + font-weight: 500; + color: var(--text-secondary, #4a5568); +} + +.kvValue { + color: var(--text-primary, #1a202c); + font-variant-numeric: tabular-nums; +} + +.loading { + padding: 2rem; + text-align: center; + color: var(--text-secondary, #718096); +} + +.placeholder { + padding: 2rem; + text-align: center; + color: var(--text-secondary, #718096); + background: var(--bg-card, #fff); + border: 1px dashed var(--border-color, #e2e8f0); + border-radius: 8px; +} diff --git a/src/pages/views/redmine/index.ts b/src/pages/views/redmine/index.ts new file mode 100644 index 0000000..7bcad9a --- /dev/null +++ b/src/pages/views/redmine/index.ts @@ -0,0 +1,3 @@ +export { RedmineSettingsView } from './RedmineSettingsView'; +export { RedmineStatsView } from './RedmineStatsView'; +export { RedmineBrowserView } from './RedmineBrowserView'; From c70274071467e30815da8bfcc7b56eecc4a80fd2 Mon Sep 17 00:00:00 2001 From: ValueOn AG Date: Tue, 21 Apr 2026 21:30:15 +0200 Subject: [PATCH 2/4] redmine integrated and fixed --- src/App.tsx | 4 + src/api/redmineApi.ts | 11 + .../views/redmine/RedmineBrowserView.tsx | 733 ++++++++++++++++-- src/pages/views/redmine/RedmineStatsView.tsx | 402 ++++++++-- .../views/redmine/RedmineTicketEditor.tsx | 296 +++++++ .../views/redmine/RedmineViews.module.css | 334 ++++++++ .../views/redmine/redmineTrackerColor.ts | 144 ++++ src/pages/views/redmine/redmineTreeLogic.ts | 262 +++++++ 8 files changed, 2084 insertions(+), 102 deletions(-) create mode 100644 src/pages/views/redmine/RedmineTicketEditor.tsx create mode 100644 src/pages/views/redmine/redmineTrackerColor.ts create mode 100644 src/pages/views/redmine/redmineTreeLogic.ts diff --git a/src/App.tsx b/src/App.tsx index a677a0d..aac8210 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -186,6 +186,10 @@ function App() { } /> } /> + {/* Redmine Feature Views */} + } /> + } /> + {/* Catch-all für unbekannte Sub-Pfade */} } /> diff --git a/src/api/redmineApi.ts b/src/api/redmineApi.ts index c89664a..39bc545 100644 --- a/src/api/redmineApi.ts +++ b/src/api/redmineApi.ts @@ -63,6 +63,7 @@ export interface RedmineFieldSchema { statuses: RedmineFieldChoice[]; priorities: RedmineFieldChoice[]; users: RedmineFieldChoice[]; + categories: RedmineFieldChoice[]; customFields: RedmineCustomFieldSchema[]; rootTrackerName: string; rootTrackerId: number | null; @@ -100,6 +101,8 @@ export interface RedmineTicket { parentId?: number | null; fixedVersionId?: number | null; fixedVersionName?: string | null; + categoryId?: number | null; + categoryName?: string | null; createdOn?: string | null; updatedOn?: string | null; customFields: RedmineCustomFieldValue[]; @@ -143,6 +146,8 @@ export interface RedmineStats { dateTo?: string | null; bucket: string; trackerIds: number[]; + categoryIds: number[]; + statusFilter: string; kpis: { total: number; open: number; @@ -162,6 +167,8 @@ export interface RedmineStats { label: string; created: number; closed: number; + cumTotal: number; + cumOpen: number; }>; topAssignees: Array<{ assignedToId?: number | null; @@ -367,6 +374,8 @@ export interface RedmineStatsParams { dateTo?: string; bucket?: 'day' | 'week' | 'month'; trackerIds?: number[]; + categoryIds?: number[]; + statusFilter?: '*' | 'open' | 'closed'; } export async function getRedmineStatsApi( @@ -379,6 +388,8 @@ export async function getRedmineStatsApi( if (params.dateTo) queryParams.dateTo = params.dateTo; if (params.bucket) queryParams.bucket = params.bucket; if (params.trackerIds && params.trackerIds.length > 0) queryParams.trackerIds = params.trackerIds; + if (params.categoryIds && params.categoryIds.length > 0) queryParams.categoryIds = params.categoryIds; + if (params.statusFilter && params.statusFilter !== '*') queryParams.statusFilter = params.statusFilter; return await request({ url: `${_baseUrl(instanceId)}/stats`, method: 'get', diff --git a/src/pages/views/redmine/RedmineBrowserView.tsx b/src/pages/views/redmine/RedmineBrowserView.tsx index f85a836..de00d61 100644 --- a/src/pages/views/redmine/RedmineBrowserView.tsx +++ b/src/pages/views/redmine/RedmineBrowserView.tsx @@ -1,101 +1,730 @@ /** - * Redmine Ticket Browser (Phase 2 placeholder). + * Redmine Ticket Browser * - * Will render the tree-as-table layout from the HTML pilot, with - * filters and a right-side editor pane. For now: simple flat list from - * the local mirror so the wiring can be verified. + * Split view: tree-as-table on the left (roots = configured root + * tracker + virtual "Orphan" root), editor pane on the right. All reads + * hit the local mirror; saves go through ``updateRedmineTicketApi`` + * which updates Redmine and then refreshes the mirror. + * + * Filters are applied client-side because the mirror already fits in + * memory (2-20k tickets is fine for a sub-200ms filter pass). */ -import React, { useCallback, useEffect, useState } from 'react'; +import React, { + useCallback, + useDeferredValue, + useEffect, + useMemo, + useRef, + useState, +} from 'react'; import { useApiRequest } from '../../../hooks/useApi'; import { useInstanceId } from '../../../hooks/useCurrentInstance'; import { useLanguage } from '../../../providers/language/LanguageContext'; import { + RedmineConfigDto, + RedmineFieldSchema, RedmineTicket, + getRedmineConfigApi, + getRedmineSchemaApi, listRedmineTicketsApi, } from '../../../api/redmineApi'; +import { PeriodPicker, PeriodValue } from '../../../components/PeriodPicker'; + +import { + Forest, + FlatRow, + ORPHAN_ROOT_ID, + TreeNode, + buildForest, + collectAllIds, + flattenForest, +} from './redmineTreeLogic'; +import { getTrackerStyle, sortByTrackerOrder } from './redmineTrackerColor'; +import RedmineTicketEditor from './RedmineTicketEditor'; import styles from './RedmineViews.module.css'; +// ============================================================================ +// Relation type options -- Redmine's fixed vocabulary plus our synthetic +// "parent" edge (inherited from ``parent_id``). +// ============================================================================ +const RELATION_TYPE_OPTIONS: Array<{ value: string; label: string }> = [ + { value: 'parent', label: 'parent_id' }, + { value: 'relates', label: 'relates' }, + { value: 'duplicates', label: 'duplicates' }, + { value: 'duplicated', label: 'duplicated' }, + { value: 'blocks', label: 'blocks' }, + { value: 'blocked', label: 'blocked' }, + { value: 'precedes', label: 'precedes' }, + { value: 'follows', label: 'follows' }, + { value: 'copied_to', label: 'copied_to' }, + { value: 'copied_from', label: 'copied_from' }, +]; + +// ============================================================================ +// Closed-state lookup -- the mirror's ``isClosed`` field can be stale or +// missing when the schema cache wasn't yet hydrated at sync time. We trust +// the live schema (``schema.statuses[*].isClosed``) as the source of truth +// and fall back to the ticket's own flag. +// ============================================================================ +const _isTicketClosed = ( + ticket: RedmineTicket, + schemaStatusClosedById: Map, +): boolean => { + if (ticket.statusId != null && schemaStatusClosedById.has(ticket.statusId)) { + return schemaStatusClosedById.get(ticket.statusId) === true; + } + return !!ticket.isClosed; +}; + export const RedmineBrowserView: React.FC = () => { const { t } = useLanguage(); const { request } = useApiRequest(); const instanceId = useInstanceId(); + const [config, setConfig] = useState(null); + const [schema, setSchema] = useState(null); const [tickets, setTickets] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); - const _load = useCallback(async () => { + // Filters + const [period, setPeriod] = useState(null); + // Tracker filter is *subtractive*: the set holds tracker ids that are + // currently SHOWN. ``null`` means "uninitialised" -- once the schema is + // loaded we seed the set with all tracker ids so every chip starts active. + // Clicking a chip removes it from the set -> tickets of that tracker + // disappear from the list. + const [selectedTrackerIds, setSelectedTrackerIds] = useState | null>(null); + const [selectedAssigneeIds, setSelectedAssigneeIds] = useState>(new Set()); + const [selectedRelTypes, setSelectedRelTypes] = useState>( + new Set(RELATION_TYPE_OPTIONS.map(r => r.value)), + ); + const [statusFilter, setStatusFilter] = useState<'*' | 'open' | 'closed'>('*'); + // Sprint = Redmine "fixed_version". Empty set => no filter; the synthetic + // value ``__none__`` matches tickets with no sprint assigned. + const [selectedSprints, setSelectedSprints] = useState>(new Set()); + + // UI state + const [expanded, setExpanded] = useState>(new Set()); + const [selectedId, setSelectedId] = useState(null); + + const rootTrackerId = schema?.rootTrackerId ?? null; + + // Seed the tracker filter once the schema is available: every tracker + // starts SELECTED so the user sees everything by default; clicking a chip + // removes that tracker from the visible set. + useEffect(() => { + if (selectedTrackerIds == null && schema) { + setSelectedTrackerIds(new Set(schema.trackers.map(tr => tr.id))); + } + }, [schema, selectedTrackerIds]); + + // Map statusId -> isClosed, taken from the live schema. Used by the status + // filter so it works even if the mirror's per-ticket ``isClosed`` is stale. + const schemaStatusClosedById = useMemo(() => { + const m = new Map(); + if (schema) { + for (const s of schema.statuses) { + if (typeof s.isClosed === 'boolean') m.set(s.id, s.isClosed); + } + } + return m; + }, [schema]); + + // Distinct sprints (fixed_version) seen across all loaded tickets. Drives + // the sprint filter dropdown. Sorted alphabetically for stable UI. + const sprintOptions = useMemo(() => { + const m = new Map(); + let hasNone = false; + for (const tk of tickets) { + const name = tk.fixedVersionName?.trim(); + if (name) { + m.set(name, name); + } else { + hasNone = true; + } + } + const opts = Array.from(m.entries()) + .map(([value, label]) => ({ value, label })) + .sort((a, b) => a.label.localeCompare(b.label)); + if (hasNone) opts.unshift({ value: '__none__', label: t('(ohne Sprint)') }); + return opts; + }, [tickets, t]); + + // Load config + schema once. + const _loadMeta = useCallback(async () => { + if (!instanceId) return; + try { + const [c, s] = await Promise.all([ + getRedmineConfigApi(request, instanceId), + getRedmineSchemaApi(request, instanceId), + ]); + setConfig(c); + setSchema(s); + } catch (e: any) { + setError(e?.response?.data?.detail || e?.message || t('Konfiguration laden fehlgeschlagen')); + } + }, [request, instanceId, t]); + + // Load tickets from mirror whenever the period window changes (backend can + // pre-filter by updatedOn to shrink the payload). + const _loadTickets = useCallback(async () => { if (!instanceId) return; setLoading(true); setError(null); try { - const result = await listRedmineTicketsApi(request, instanceId, { status: '*' }); + const result = await listRedmineTicketsApi(request, instanceId, { + status: '*', + dateFrom: period?.fromDate, + dateTo: period?.toDate, + }); setTickets(result); } catch (e: any) { - setError(e?.message || t('Fehler beim Laden')); + setError(e?.response?.data?.detail || e?.message || t('Tickets laden fehlgeschlagen')); + setTickets([]); } finally { setLoading(false); } - }, [request, instanceId, t]); + }, [request, instanceId, period, t]); - useEffect(() => { _load(); }, [_load]); + useEffect(() => { _loadMeta(); }, [_loadMeta]); + useEffect(() => { _loadTickets(); }, [_loadTickets]); - if (loading) return
{t('Tickets werden geladen ...')}
; + // Client-side filter pass (tracker / assignee / status). Root-tracker + // tickets are always kept so the tree has roots even if their own tracker + // is deselected -- otherwise the whole forest collapses. + // ``deferredFilters`` lets React keep the filter chips snappy while the + // potentially expensive tree rebuild happens in the background. The + // chips update immediately (urgent state) but the tree picks up the new + // values one tick later, which removes the "click feels frozen" lag. + const deferredSelectedTrackerIds = useDeferredValue(selectedTrackerIds); + const deferredSelectedAssigneeIds = useDeferredValue(selectedAssigneeIds); + const deferredSelectedRelTypes = useDeferredValue(selectedRelTypes); + const deferredStatusFilter = useDeferredValue(statusFilter); + const deferredSelectedSprints = useDeferredValue(selectedSprints); + + const filteredTickets = useMemo(() => { + const trackerSet = deferredSelectedTrackerIds; + const assigneeSet = deferredSelectedAssigneeIds; + const sprintSet = deferredSelectedSprints; + const status = deferredStatusFilter; + return tickets.filter(ticket => { + const isRoot = rootTrackerId != null && ticket.trackerId === rootTrackerId; + if (!isRoot && trackerSet != null && ticket.trackerId != null) { + if (!trackerSet.has(ticket.trackerId)) return false; + } + if (assigneeSet.size > 0) { + if (ticket.assignedToId == null || !assigneeSet.has(ticket.assignedToId)) return false; + } + if (status !== '*') { + const closed = _isTicketClosed(ticket, schemaStatusClosedById); + if (status === 'open' && closed) return false; + if (status === 'closed' && !closed) return false; + } + if (sprintSet.size > 0) { + const sprintKey = ticket.fixedVersionName?.trim() || '__none__'; + if (!sprintSet.has(sprintKey)) return false; + } + return true; + }); + }, [tickets, rootTrackerId, deferredSelectedTrackerIds, deferredSelectedAssigneeIds, deferredStatusFilter, deferredSelectedSprints, schemaStatusClosedById]); + + // Convert the rel-type set to an array once per change instead of on every + // ``buildForest`` call (Array.from() in the deps would re-run the memo + // every render because the array identity is fresh each time). + const allowedRelTypesArr = useMemo( + () => Array.from(deferredSelectedRelTypes), + [deferredSelectedRelTypes], + ); + + const forest: Forest = useMemo(() => { + return buildForest(filteredTickets, { + rootTrackerId, + allowedRelTypes: allowedRelTypesArr, + }); + }, [filteredTickets, rootTrackerId, allowedRelTypesArr]); + + const flatRows: FlatRow[] = useMemo( + () => flattenForest(forest.trees, expanded), + [forest.trees, expanded], + ); + + const ticketsById = useMemo(() => { + const m = new Map(); + for (const ticket of tickets) m.set(ticket.id, ticket); + return m; + }, [tickets]); + + // One-shot initial expansion: the very first time we render a non-empty + // forest, expand the root nodes so the user sees the overview. After that + // the user owns the expand state -- collapsing all must STAY collapsed. + const _didInitExpand = useRef(false); + useEffect(() => { + if (!_didInitExpand.current && forest.trees.length > 0) { + _didInitExpand.current = true; + setExpanded(new Set(forest.trees.map(tr => tr.id))); + } + }, [forest.trees]); + + const _toggleExpand = useCallback((id: number) => { + setExpanded(prev => { + const next = new Set(prev); + if (next.has(id)) next.delete(id); else next.add(id); + return next; + }); + }, []); + + const _expandAll = useCallback(() => { + setExpanded(new Set(collectAllIds(forest.trees))); + }, [forest.trees]); + + const _collapseAll = useCallback(() => { + setExpanded(new Set()); + }, []); + + const _resetFilters = useCallback(() => { + setPeriod(null); + // "Alle Tracker sichtbar" entspricht dem initialen, voll bestueckten Set. + setSelectedTrackerIds(schema ? new Set(schema.trackers.map(tr => tr.id)) : null); + setSelectedAssigneeIds(new Set()); + setSelectedRelTypes(new Set(RELATION_TYPE_OPTIONS.map(r => r.value))); + setStatusFilter('*'); + setSelectedSprints(new Set()); + }, [schema]); + + const _toggleSprint = useCallback((value: string) => { + setSelectedSprints(prev => { + const next = new Set(prev); + if (next.has(value)) next.delete(value); else next.add(value); + return next; + }); + }, []); + + const _toggleTracker = useCallback((id: number) => { + setSelectedTrackerIds(prev => { + // ``prev`` is null only before schema loads -- the chip wouldn't be + // clickable in that state, but stay defensive. + const next = new Set(prev ?? []); + if (next.has(id)) next.delete(id); else next.add(id); + return next; + }); + }, []); + + const _toggleAssignee = useCallback((id: number) => { + setSelectedAssigneeIds(prev => { + const next = new Set(prev); + if (next.has(id)) next.delete(id); else next.add(id); + return next; + }); + }, []); + + const _toggleRelType = useCallback((rt: string) => { + setSelectedRelTypes(prev => { + const next = new Set(prev); + if (next.has(rt)) next.delete(rt); else next.add(rt); + return next; + }); + }, []); + + const _handleTicketSaved = useCallback((updated: RedmineTicket) => { + setTickets(prev => prev.map(x => (x.id === updated.id ? updated : x))); + }, []); + + if (!instanceId) { + return
{t('Keine Feature-Instanz ausgewaehlt')}
; + } return ( -
-

{t('Redmine -- Ticket-Browser')}

-

- {t('Liest aus dem lokalen Mirror. Tree-Layout und Editor-Pane folgen im naechsten Schritt.')} -

+
+
+
+

{t('Redmine -- Ticket-Browser')}

+

+ {t('Baum aus dem lokalen Mirror. Roots: {name}. Tickets ohne Verbindung landen unter "Orphan User Story".', { + name: schema?.rootTrackerName || config?.rootTrackerName || '—', + })} +

+
+
+ {t('{count} von {total} Tickets sichtbar', { + count: filteredTickets.length, + total: tickets.length, + })} +
+
{error &&
{error}
} - {tickets.length === 0 ? ( -
- {t('Keine Tickets im Mirror. Bitte zuerst in den Einstellungen "Sync starten".')} +
+
+ + setPeriod(next)} + direction="past" + defaultPreset={{ kind: 'lastQuarter' }} + enabledPresets={[ + 'thisMonth', 'lastMonth', 'thisQuarter', 'lastQuarter', + 'ytd', 'lastYear', 'last12Months', 'lastN', 'custom', + ]} + placeholder={t('Alle Zeiten')} + />
- ) : ( -
-

- {tickets.length} {t('Tickets')} -

- - - - - - - - - - - - - {tickets.slice(0, 200).map(ticket => ( - - - - - - - - + +
+ + +
+ + {schema && schema.trackers.length > 0 && ( +
+ +
+ {sortByTrackerOrder(schema.trackers, tr => tr.name).map(tr => { + const isRoot = tr.id === rootTrackerId; + // Active iff in the visible set (or root). selectedTrackerIds + // is null only during the brief window before the schema seed + // effect runs -- treat as "all visible". + const active = isRoot || selectedTrackerIds == null || selectedTrackerIds.has(tr.id); + const sty = getTrackerStyle(tr.name); + return ( + + ); + })} +
+
+ )} + + {schema && schema.users.length > 0 && ( +
+ +
-
ID{t('Tracker')}{t('Titel')}Status{t('Zuweisung')}{t('Geaendert')}
#{ticket.id}{ticket.trackerName || '-'}{ticket.subject}{ticket.statusName || '-'}{ticket.assignedToName || '-'}{ticket.updatedOn?.slice(0, 10) || '-'}
- {tickets.length > 200 && ( -

- {t('(Anzeige auf 200 begrenzt -- Tree-Layout folgt.)')} -

+ +
+ )} + + {sprintOptions.length > 0 && ( +
+ +
+ {sprintOptions.map(sp => { + const active = selectedSprints.has(sp.value); + return ( + + ); + })} +
+ {selectedSprints.size === 0 && ( + + {t('keine Auswahl = alle Sprints')} + + )} +
+ )} + +
+ +
+ {RELATION_TYPE_OPTIONS.map(rt => { + const active = selectedRelTypes.has(rt.value); + return ( + + ); + })} +
+
+ +
+ + +
+ +
+ {/* Left: tree */} +
+
+ + {t('{rows} Zeilen sichtbar -- {orphans} Orphan-Tickets', { + rows: flatRows.length, + orphans: forest.orphanCount, + })} + +
+ + +
+
+
+ {loading ? ( +
{t('Baum wird aufgebaut ...')}
+ ) : flatRows.length === 0 ? ( +
+ {t('Keine Tickets sichtbar. Pruefe Filter oder fuehre einen Sync auf der Einstellungen-Seite aus.')} +
+ ) : ( +
+
+
{t('Ticket')}
+
Status
+
{t('Prio')}
+
{t('Zuweisung')}
+
{t('Geaendert')}
+
{t('Beziehung')}
+
+ {flatRows.map(row => ( + + ))} +
+ )} +
+
+ + {/* Right: editor */} +
+ {selectedId == null ? ( +
{t('Ticket links auswaehlen')}
+ ) : selectedId === ORPHAN_ROOT_ID ? ( +
+ {t('Virtueller "Orphan User Story"-Knoten -- enthaelt {count} Tickets ohne Verbindung.', { + count: forest.orphanCount, + })} +
+ ) : ( + )}
- )} +
); }; +// ============================================================================ +// TreeRow -- a single grid row, handling its own indent painting. +// ============================================================================ + +interface TreeRowProps { + row: FlatRow; + ticket: RedmineTicket | null; + selected: boolean; + expanded: boolean; + onToggle: (id: number) => void; + onSelect: (id: number) => void; + rootTrackerId: number | null; + schemaStatusClosedById: Map; +} + +const _TreeRowImpl: React.FC = ({ + row, ticket, selected, expanded, onToggle, onSelect, rootTrackerId, schemaStatusClosedById, +}) => { + const { node, depth, indentLines, hasChildren } = row; + const isOrphanRoot = node.id === ORPHAN_ROOT_ID; + const isRootTracker = !isOrphanRoot && ticket?.trackerId === rootTrackerId; + const isClosed = ticket ? _isTicketClosed(ticket, schemaStatusClosedById) : false; + + const rowClass = [ + styles.treeRow, + selected ? styles.selected : '', + isOrphanRoot ? styles.orphan : '', + ].filter(Boolean).join(' '); + + const _handleToggle = (e: React.MouseEvent) => { + e.stopPropagation(); + onToggle(node.id); + }; + + const _handleSelect = () => onSelect(node.id); + + return ( +
+
+ {Array.from({ length: Math.max(0, depth - 1) }).map((_, i) => ( + + ))} + {depth > 0 && ( + + + + )} + {hasChildren ? ( + + ) : ( + + )} + { + const sty = getTrackerStyle(ticket.trackerName); + return { + background: sty.bg, + color: sty.fg, + border: `1px solid ${sty.border}`, + }; + })() + : undefined + } + > + {isOrphanRoot ? 'Orphan' : (ticket?.trackerName || '—')} + + + {isOrphanRoot ? '—' : `#${ticket?.id}`} + + + {isOrphanRoot + ? `Tickets ohne Verbindung zu einer User Story (${node.children.length})` + : (ticket?.subject || '(ohne Titel)')} + +
+
+ {isOrphanRoot ? — + : ticket?.statusName + ? {ticket.statusName} + : —} +
+
{isOrphanRoot ? — : (ticket?.priorityName || '—')}
+
{isOrphanRoot ? — : (ticket?.assignedToName || —)}
+
+ {isOrphanRoot ? '' : (ticket?.updatedOn ? ticket.updatedOn.slice(0, 10) : '')} +
+
+ {isOrphanRoot + ? virtuell + : isRootTracker && depth === 0 + ? Root + : node.relType + ? {node.dir === 'in' ? '←' : '→'} {node.relType} + : —} +
+
+ ); +}; + +// Custom equality: skip re-rendering rows whose visible inputs are identical. +// ``row`` and ``ticket`` references are stable across re-renders unless the +// underlying tree was rebuilt or the ticket itself changed -- much cheaper +// than re-painting 2k DOM nodes on every filter chip click. +const TreeRow = React.memo(_TreeRowImpl, (prev, next) => { + return ( + prev.row === next.row + && prev.ticket === next.ticket + && prev.selected === next.selected + && prev.expanded === next.expanded + && prev.onToggle === next.onToggle + && prev.onSelect === next.onSelect + && prev.rootTrackerId === next.rootTrackerId + && prev.schemaStatusClosedById === next.schemaStatusClosedById + ); +}); + export default RedmineBrowserView; diff --git a/src/pages/views/redmine/RedmineStatsView.tsx b/src/pages/views/redmine/RedmineStatsView.tsx index 1f423ce..e8cbfb7 100644 --- a/src/pages/views/redmine/RedmineStatsView.tsx +++ b/src/pages/views/redmine/RedmineStatsView.tsx @@ -1,91 +1,393 @@ /** - * Redmine Statistics View (Phase 2 placeholder). + * Redmine Statistics View * - * Will render a ``FormGeneratorReport`` driven by ``getRedmineStatsApi`` - * with a ``PeriodPicker`` and tracker-filter. For now: shows the raw - * KPIs so the wiring can be verified against the local mirror. + * Default landing view for a Redmine feature instance. Reads aggregated + * stats from the local mirror (fast, even at 20k+ tickets) and renders + * KPIs + charts via ``FormGeneratorReport``. The built-in + * ``dateRangeSelector`` mounts the shared ``PeriodPicker`` -- no extra + * wiring needed. + * + * Buckets returned by the backend are mapped to ``ReportSection``s here + * (frontend does the UI shape; backend stays storage-oriented). */ -import React, { useCallback, useEffect, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { useApiRequest } from '../../../hooks/useApi'; import { useInstanceId } from '../../../hooks/useCurrentInstance'; import { useLanguage } from '../../../providers/language/LanguageContext'; -import { RedmineStats, getRedmineStatsApi } from '../../../api/redmineApi'; +import { + RedmineFieldSchema, + RedmineStats, + getRedmineSchemaApi, + getRedmineStatsApi, +} from '../../../api/redmineApi'; + +import { FormGeneratorReport } from '../../../components/FormGenerator/FormGeneratorReport'; +import type { + ReportSection, + ReportFilterState, + ReportDateRangeSelectorConfig, + ReportFilterConfig, +} from '../../../components/FormGenerator/FormGeneratorReport'; +import { toIsoDate } from '../../../components/PeriodPicker'; import styles from './RedmineViews.module.css'; +// ============================================================================ +// Helpers -- map raw backend buckets to ReportSection[] +// ============================================================================ + +// Format counts as integers ("Einheiten") -- prevents the chart components +// from falling back to their default currency formatter (CHF). +const _fmtUnits = (v: number): string => { + if (!Number.isFinite(v)) return '0'; + return Math.round(v).toLocaleString('de-CH'); +}; + +const _buildSections = ( + stats: RedmineStats, + t: (key: string, vars?: Record) => string, +): ReportSection[] => { + const sections: ReportSection[] = []; + + // ---- KPI tiles -------------------------------------------------------- + sections.push({ + type: 'kpiGrid', + span: 'full', + items: [ + { label: t('Tickets gesamt'), value: stats.kpis.total }, + { label: t('Offen'), value: stats.kpis.open, color: '#4A6FA5' }, + { label: t('Geschlossen'), value: stats.kpis.closed, color: '#38A169' }, + { label: t('Im Zeitraum erstellt'), value: stats.kpis.createdInPeriod }, + { label: t('Im Zeitraum geschlossen'), value: stats.kpis.closedInPeriod }, + { + label: t('Ohne Userstory (Orphans)'), + value: stats.kpis.orphans, + color: stats.kpis.orphans > 0 ? '#C53030' : undefined, + }, + ], + }); + + // ---- Snapshot chart: total tickets vs. open per bucket end ---------- + // ``cumTotal`` and ``cumOpen`` are computed server-side and are SNAPSHOT + // values (state at the end of each bucket), not flow numbers. The + // difference between the two lines is the cumulative number of closed + // tickets up to that point in time. + if (stats.throughput.length > 0) { + const snapshotData = stats.throughput.map(b => ({ + date: b.label, + total: b.cumTotal, + open: b.cumOpen, + })); + sections.push({ + type: 'lineChart', + span: 'full', + title: t('Bestand pro {bucket}: Total vs. Offen', { bucket: stats.bucket }), + description: t('Snapshot am Ende jeder Periode: wie viele Tickets es zu diesem Zeitpunkt gibt (Total) und wie viele davon noch offen sind. Die Luecke zwischen den Linien sind die bis dahin geschlossenen Tickets.'), + data: snapshotData, + series: [ + { key: 'total', label: t('Total'), color: '#4A6FA5' }, + { key: 'open', label: t('Offen'), color: '#DD6B20' }, + ], + formatValue: _fmtUnits, + }); + } + + // ---- Status per tracker (stacked-like via horizontal bar per tracker) + if (stats.statusByTracker.length > 0) { + const statusKeys = new Set(); + stats.statusByTracker.forEach(row => { + Object.keys(row.countsByStatus).forEach(k => statusKeys.add(k)); + }); + const totals: Record = {}; + stats.statusByTracker.forEach(row => { + Object.entries(row.countsByStatus).forEach(([s, n]) => { + totals[s] = (totals[s] || 0) + n; + }); + }); + sections.push({ + type: 'pieChart', + span: 'half', + title: t('Status-Verteilung (gesamt)'), + donut: true, + data: Object.entries(totals) + .sort(([, a], [, b]) => b - a) + .map(([status, count]) => ({ key: status, value: count })), + formatValue: _fmtUnits, + }); + + sections.push({ + type: 'horizontalBar', + span: 'half', + title: t('Tickets pro Tracker'), + data: stats.statusByTracker + .slice() + .sort((a, b) => b.total - a.total) + .map(row => ({ + key: row.trackerName, + value: row.total, + })), + formatValue: _fmtUnits, + }); + } + + // ---- Top assignees --------------------------------------------------- + if (stats.topAssignees.length > 0) { + sections.push({ + type: 'horizontalBar', + span: 'half', + title: t('Top 10 Zugewiesene (offene Tickets)'), + description: t('Offene Tickets nach zugewiesener Person -- zeigt Auslastung.'), + data: stats.topAssignees.map(a => ({ + key: a.name, + value: a.open, + })), + formatValue: _fmtUnits, + }); + } + + // ---- Relation distribution ------------------------------------------ + if (stats.relationDistribution.length > 0) { + sections.push({ + type: 'pieChart', + span: 'half', + title: t('Beziehungsarten'), + donut: true, + data: stats.relationDistribution.map(r => ({ + key: r.relationType, + value: r.count, + })), + formatValue: _fmtUnits, + }); + } + + // ---- Backlog aging -------------------------------------------------- + if (stats.backlogAging.length > 0) { + sections.push({ + type: 'barChart', + span: 'full', + title: t('Backlog-Alter (offene Tickets)'), + description: t('Verteilung offener Tickets nach Alter -- hilft alte Leichen zu finden.'), + data: stats.backlogAging.map(b => ({ + key: b.label, + value: b.count, + })), + color: '#DD6B20', + formatValue: _fmtUnits, + }); + } + + return sections; +}; + +// ============================================================================ +// Main view +// ============================================================================ + +type BucketSize = 'day' | 'week' | 'month'; + +// Translate the polymorphic ``ReportFilterState.filters`` value for one +// multiselect key into a clean number[] and only call ``setter`` if the +// list actually changed (prevents an infinite render loop when the +// FormGenerator re-emits the same state). +const _applyMultiselectFilter = ( + raw: any, + current: number[], + setter: (next: number[]) => void, +): void => { + let next: number[] | null = null; + if (Array.isArray(raw)) { + next = raw.map(v => Number(v)).filter(n => !Number.isNaN(n)); + } else if (typeof raw === 'string' && raw !== '') { + const n = Number(raw); + if (!Number.isNaN(n)) next = [n]; + } else if (!raw) { + next = []; + } + if (next == null) return; + if (next.length === current.length && next.every((v, i) => v === current[i])) return; + setter(next); +}; + export const RedmineStatsView: React.FC = () => { const { t } = useLanguage(); const { request } = useApiRequest(); const instanceId = useInstanceId(); + const [schema, setSchema] = useState(null); + const [schemaError, setSchemaError] = useState(null); + const [stats, setStats] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); - const _load = useCallback(async () => { + const [dateFrom, setDateFrom] = useState(undefined); + const [dateTo, setDateTo] = useState(undefined); + const [bucket, setBucket] = useState('week'); + const [trackerIds, setTrackerIds] = useState([]); + const [categoryIds, setCategoryIds] = useState([]); + const [statusFilter, setStatusFilter] = useState<'*' | 'open' | 'closed'>('*'); + + // Load schema once -- we need trackers for the filter dropdown. + const _loadSchema = useCallback(async () => { + if (!instanceId) return; + try { + const res = await getRedmineSchemaApi(request, instanceId); + setSchema(res); + } catch (e: any) { + setSchemaError(e?.response?.data?.detail || e?.message || t('Schema-Laden fehlgeschlagen')); + } + }, [request, instanceId, t]); + + useEffect(() => { _loadSchema(); }, [_loadSchema]); + + // Load stats whenever the filters change. + const _loadStats = useCallback(async () => { if (!instanceId) return; setLoading(true); setError(null); try { - const result = await getRedmineStatsApi(request, instanceId, { bucket: 'week' }); - setStats(result); + const res = await getRedmineStatsApi(request, instanceId, { + dateFrom, + dateTo, + bucket, + trackerIds: trackerIds.length > 0 ? trackerIds : undefined, + categoryIds: categoryIds.length > 0 ? categoryIds : undefined, + statusFilter, + }); + setStats(res); } catch (e: any) { - setError(e?.message || t('Fehler beim Laden')); + setError(e?.response?.data?.detail || e?.message || t('Statistik-Laden fehlgeschlagen')); + setStats(null); } finally { setLoading(false); } - }, [request, instanceId, t]); + }, [request, instanceId, dateFrom, dateTo, bucket, trackerIds, categoryIds, statusFilter, t]); - useEffect(() => { _load(); }, [_load]); + useEffect(() => { _loadStats(); }, [_loadStats]); - if (loading) return
{t('Statistik wird geladen ...')}
; + // ---- FormGeneratorReport filter configuration ----------------------- + const dateRangeSelector = useMemo(() => ({ + enabled: true, + direction: 'past', + defaultPresetKind: 'thisQuarter', + enabledPresets: [ + 'thisMonth', 'lastMonth', 'thisQuarter', 'lastQuarter', + 'ytd', 'lastYear', 'last12Months', 'lastN', 'custom', + ], + }), []); + + const filterConfigs = useMemo(() => { + const configs: ReportFilterConfig[] = [ + { + key: 'bucket', + label: t('Gruppierung'), + type: 'select', + defaultValue: bucket, + options: [ + { value: 'day', label: t('Tag') }, + { value: 'week', label: t('Woche') }, + { value: 'month', label: t('Monat') }, + ], + }, + { + key: 'statusFilter', + label: t('Status'), + type: 'select', + defaultValue: statusFilter, + options: [ + { value: '*', label: t('Alle') }, + { value: 'open', label: t('Nur offen') }, + { value: 'closed', label: t('Nur geschlossen') }, + ], + }, + ]; + if (schema && schema.trackers.length > 0) { + configs.push({ + key: 'trackerIds', + label: t('Tracker'), + type: 'multiselect', + options: schema.trackers.map(tr => ({ + value: String(tr.id), + label: tr.name, + })), + placeholder: t('Alle Tracker'), + }); + } + if (schema && schema.categories.length > 0) { + configs.push({ + key: 'categoryIds', + label: t('Kategorie'), + type: 'multiselect', + options: schema.categories.map(cat => ({ + value: String(cat.id), + label: cat.name, + })), + placeholder: t('Alle Kategorien'), + }); + } + return configs; + }, [t, bucket, statusFilter, schema]); + + const _handleFilterChange = useCallback((filterState: ReportFilterState) => { + if (filterState.periodValue) { + setDateFrom(filterState.periodValue.fromDate); + setDateTo(filterState.periodValue.toDate); + } else if (filterState.dateRange) { + setDateFrom(toIsoDate(filterState.dateRange.from)); + setDateTo(toIsoDate(filterState.dateRange.to)); + } + + const f = filterState.filters || {}; + if (typeof f.bucket === 'string' && f.bucket !== bucket) { + setBucket(f.bucket as BucketSize); + } + if (typeof f.statusFilter === 'string' && f.statusFilter !== statusFilter) { + const next = f.statusFilter as '*' | 'open' | 'closed'; + if (next === '*' || next === 'open' || next === 'closed') { + setStatusFilter(next); + } + } + _applyMultiselectFilter(f.trackerIds, trackerIds, setTrackerIds); + _applyMultiselectFilter(f.categoryIds, categoryIds, setCategoryIds); + }, [bucket, statusFilter, trackerIds, categoryIds]); + + // ---- Derived report sections ---------------------------------------- + const sections = useMemo(() => { + if (!stats) return []; + return _buildSections(stats, t); + }, [stats, t]); + + if (!instanceId) { + return
{t('Keine Feature-Instanz ausgewaehlt')}
; + } return ( -
+

{t('Redmine -- Statistik')}

- {t('Aggregiert aus dem lokalen Mirror. PeriodPicker und FormGeneratorReport folgen im naechsten Schritt.')} + {t('Aggregiert aus dem lokalen Mirror. Filter werden serverseitig angewendet; Zeitraum steuert auch die "im Zeitraum"-KPIs.')}

+ {schemaError &&
{schemaError}
} {error &&
{error}
} - {stats && ( -
-

{t('KPIs (gesamter Mirror)')}

-
-
{t('Tickets gesamt')}:
-
{stats.kpis.total}
-
{t('Offen')}:
-
{stats.kpis.open}
-
{t('Geschlossen')}:
-
{stats.kpis.closed}
-
{t('Im Zeitraum erstellt')}:
-
{stats.kpis.createdInPeriod}
-
{t('Im Zeitraum geschlossen')}:
-
{stats.kpis.closedInPeriod}
-
{t('Orphans (ohne Userstory)')}:
-
{stats.kpis.orphans}
-
-
- )} - - {stats && stats.statusByTracker.length > 0 && ( -
-

{t('Status pro Tracker')}

-
    - {stats.statusByTracker.map(entry => ( -
  • - {entry.trackerName} ({entry.total}):{' '} - {Object.entries(entry.countsByStatus) - .map(([s, n]) => `${s}: ${n}`) - .join(', ')} -
    • - ))} -
-
- )} +
); }; diff --git a/src/pages/views/redmine/RedmineTicketEditor.tsx b/src/pages/views/redmine/RedmineTicketEditor.tsx new file mode 100644 index 0000000..4ef3245 --- /dev/null +++ b/src/pages/views/redmine/RedmineTicketEditor.tsx @@ -0,0 +1,296 @@ +/** + * Right-pane editor for a single Redmine ticket. + * + * Pulls the selected ticket fresh from the backend (mirror) to get + * custom fields + relations, lets the user edit the primary fields and + * adds a "notes" comment. On save, delegates to ``updateRedmineTicketApi`` + * and calls ``onSaved`` so the parent can refresh its mirror list. + */ + +import React, { useCallback, useEffect, useMemo, useState } from 'react'; + +import { useApiRequest } from '../../../hooks/useApi'; +import { useLanguage } from '../../../providers/language/LanguageContext'; +import { + RedmineFieldSchema, + RedmineTicket, + RedmineTicketUpdateBody, + getRedmineTicketApi, + updateRedmineTicketApi, +} from '../../../api/redmineApi'; +import { getTrackerStyle } from './redmineTrackerColor'; + +import styles from './RedmineViews.module.css'; + +interface Props { + instanceId: string; + ticketId: number; + schema: RedmineFieldSchema | null; + baseUrl: string; + onSaved: (updated: RedmineTicket) => void; +} + +export const RedmineTicketEditor: React.FC = ({ + instanceId, + ticketId, + schema, + baseUrl, + onSaved, +}) => { + const { t } = useLanguage(); + const { request } = useApiRequest(); + + const [ticket, setTicket] = useState(null); + const [loading, setLoading] = useState(true); + const [saving, setSaving] = useState(false); + const [error, setError] = useState(null); + const [successMsg, setSuccessMsg] = useState(null); + + // Local edit state -- keys mirror the update body. + const [subject, setSubject] = useState(''); + const [description, setDescription] = useState(''); + const [trackerId, setTrackerId] = useState(''); + const [statusId, setStatusId] = useState(''); + const [priorityId, setPriorityId] = useState(''); + const [assignedToId, setAssignedToId] = useState(''); + const [parentIssueId, setParentIssueId] = useState(''); + const [notes, setNotes] = useState(''); + const [customFieldValues, setCustomFieldValues] = useState>({}); + + const _load = useCallback(async () => { + setLoading(true); + setError(null); + setSuccessMsg(null); + try { + const t = await getRedmineTicketApi(request, instanceId, ticketId); + setTicket(t); + setSubject(t.subject || ''); + setDescription(t.description || ''); + setTrackerId(t.trackerId ?? ''); + setStatusId(t.statusId ?? ''); + setPriorityId(t.priorityId ?? ''); + setAssignedToId(t.assignedToId ?? ''); + setParentIssueId(t.parentId ? String(t.parentId) : ''); + setNotes(''); + const cfMap: Record = {}; + for (const cf of t.customFields || []) { + cfMap[cf.id] = cf.value == null ? '' : String(cf.value); + } + setCustomFieldValues(cfMap); + } catch (e: any) { + setError(e?.response?.data?.detail || e?.message || t('Ticket laden fehlgeschlagen')); + setTicket(null); + } finally { + setLoading(false); + } + }, [request, instanceId, ticketId, t]); + + useEffect(() => { _load(); }, [_load]); + + const tracker = useMemo(() => { + if (!schema || trackerId === '') return null; + return schema.trackers.find(x => x.id === trackerId) || null; + }, [schema, trackerId]); + + const _handleSave = useCallback(async () => { + if (!ticket) return; + setSaving(true); + setError(null); + setSuccessMsg(null); + const body: RedmineTicketUpdateBody = {}; + if (subject !== ticket.subject) body.subject = subject; + if (description !== (ticket.description || '')) body.description = description; + if (trackerId !== '' && trackerId !== ticket.trackerId) body.trackerId = Number(trackerId); + if (statusId !== '' && statusId !== ticket.statusId) body.statusId = Number(statusId); + if (priorityId !== '' && priorityId !== ticket.priorityId) body.priorityId = Number(priorityId); + if (assignedToId !== '' && assignedToId !== ticket.assignedToId) body.assignedToId = Number(assignedToId); + const parentNum = parentIssueId.trim() === '' ? null : Number(parentIssueId); + if (parentNum !== null && !Number.isNaN(parentNum) && parentNum !== ticket.parentId) { + body.parentIssueId = parentNum; + } + if (notes.trim() !== '') body.notes = notes.trim(); + const cfDiff: Record = {}; + for (const cf of ticket.customFields || []) { + const current = cf.value == null ? '' : String(cf.value); + const next = customFieldValues[cf.id] ?? ''; + if (next !== current) cfDiff[cf.id] = next; + } + if (Object.keys(cfDiff).length > 0) body.customFields = cfDiff; + + if (Object.keys(body).length === 0) { + setSaving(false); + setSuccessMsg(t('Keine Aenderungen.')); + return; + } + try { + const updated = await updateRedmineTicketApi(request, instanceId, ticketId, body); + setTicket(updated); + setSuccessMsg(t('Ticket gespeichert.')); + setNotes(''); + onSaved(updated); + } catch (e: any) { + setError(e?.response?.data?.detail || e?.message || t('Speichern fehlgeschlagen')); + } finally { + setSaving(false); + } + }, [ + ticket, subject, description, trackerId, statusId, priorityId, assignedToId, + parentIssueId, notes, customFieldValues, request, instanceId, ticketId, onSaved, t, + ]); + + const redmineUrl = baseUrl && ticket ? `${baseUrl.replace(/\/$/, '')}/issues/${ticket.id}` : null; + + if (loading) { + return
{t('Ticket wird geladen ...')}
; + } + + if (!ticket) { + return ( +
+ {error &&
{error}
} +
{t('Ticket nicht gefunden.')}
+
+ ); + } + + return ( +
+
+ {tracker && (() => { + const sty = getTrackerStyle(tracker.name); + return ( + + {tracker.name} + + ); + })()} + #{ticket.id} +

{subject || t('(ohne Titel)')}

+ {redmineUrl && ( + + {t('In Redmine oeffnen')} + + )} +
+ + {error &&
{error}
} + {successMsg &&
{successMsg}
} + +
+ + setSubject(e.target.value)} /> + + + + + + + + + + + + + + + setParentIssueId(e.target.value)} + /> + + +