feat(260929-dzu): Einstellungen > Eigene Module fuer jeden Benutzer, Verwaltung nur gemeinsam
- gemeinsame Oberflaeche (CustomModuleManager, Formular, Loeschdialog) fuer Verwaltung und Einstellungen - Einstellungen: persoenliche Eintraege, Verwaltung sendet shared: true und zeigt nur gemeinsame - Navigation, Texte de/en, Komponententests Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,174 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { MODULE_CATEGORIES } from '@tessera/shared';
|
||||
import {
|
||||
type CustomModule,
|
||||
checkCustomModuleUrl,
|
||||
createCustomModule,
|
||||
updateCustomModule,
|
||||
} from '@/lib/custom-modules-api';
|
||||
import { useCategoryLabel } from '@/lib/use-category-label';
|
||||
|
||||
interface CustomModuleFormModalProps {
|
||||
/** `null` = neues Modul anlegen, sonst bearbeiten. */
|
||||
mod: CustomModule | null;
|
||||
/**
|
||||
* Beim Anlegen: `true` = gemeinsamer Eintrag fuer alle Benutzer (Verwaltung),
|
||||
* sonst persoenlicher Eintrag (Einstellungen). Beim Bearbeiten ohne Wirkung —
|
||||
* ob ein Eintrag gemeinsam ist, aendert sich nie.
|
||||
*/
|
||||
shared?: boolean;
|
||||
onClose: () => void;
|
||||
onSaved: () => void;
|
||||
}
|
||||
|
||||
const NAME_MAX = 100;
|
||||
const URL_MAX = 2048;
|
||||
|
||||
/**
|
||||
* Formular „Eigenes Modul“ (quick-260929-9wc, Vorbild `GroupFormModal`;
|
||||
* quick-260929-dzu: ein Formular, zwei Aufrufer — Verwaltung legt gemeinsame,
|
||||
* Einstellungen persoenliche Eintraege an).
|
||||
* Die Adresse wird VOR dem Senden geprueft (`checkCustomModuleUrl`, dieselbe
|
||||
* Regel wie die API): nur https, keine Zugangsdaten. `noValidate`, damit die
|
||||
* eigenen, uebersetzten Meldungen erscheinen statt der des Browsers.
|
||||
*/
|
||||
export function CustomModuleFormModal({
|
||||
mod,
|
||||
shared = false,
|
||||
onClose,
|
||||
onSaved,
|
||||
}: CustomModuleFormModalProps) {
|
||||
const t = useTranslations('customModules.form');
|
||||
const tCommon = useTranslations('common');
|
||||
const categoryLabel = useCategoryLabel();
|
||||
|
||||
const [name, setName] = useState(mod?.name ?? '');
|
||||
const [url, setUrl] = useState(mod?.url ?? '');
|
||||
const [category, setCategory] = useState<string>(mod?.category ?? 'infrastructure');
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
|
||||
const trimmedName = name.trim();
|
||||
if (trimmedName === '') {
|
||||
setError(t('nameRequired'));
|
||||
return;
|
||||
}
|
||||
const trimmedUrl = url.trim();
|
||||
const check = checkCustomModuleUrl(trimmedUrl);
|
||||
if (check === 'notHttps') {
|
||||
setError(t('urlNotHttps'));
|
||||
return;
|
||||
}
|
||||
if (check === 'credentials') {
|
||||
setError(t('urlCredentials'));
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
try {
|
||||
const input = { name: trimmedName, url: trimmedUrl, category };
|
||||
if (mod) {
|
||||
await updateCustomModule(mod.id, input);
|
||||
} else {
|
||||
await createCustomModule(shared ? { ...input, shared: true } : input);
|
||||
}
|
||||
onSaved();
|
||||
onClose();
|
||||
} catch {
|
||||
setError(t('saveError'));
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="custom-module-form-title"
|
||||
className="w-full max-w-md rounded-lg bg-card p-6 shadow-lg dark:border dark:border-border"
|
||||
>
|
||||
<h2 id="custom-module-form-title" className="mb-4 text-lg font-semibold text-foreground">
|
||||
{mod ? t('edit') : t('create')}
|
||||
</h2>
|
||||
<form onSubmit={handleSubmit} noValidate className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="custom-module-name" className="text-sm font-medium text-foreground">
|
||||
{t('name')}
|
||||
</label>
|
||||
<input
|
||||
id="custom-module-name"
|
||||
type="text"
|
||||
required
|
||||
maxLength={NAME_MAX}
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="custom-module-url" className="text-sm font-medium text-foreground">
|
||||
{t('url')}
|
||||
</label>
|
||||
<input
|
||||
id="custom-module-url"
|
||||
type="url"
|
||||
required
|
||||
maxLength={URL_MAX}
|
||||
placeholder="https://…"
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">{t('urlHint')}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="custom-module-category" className="text-sm font-medium text-foreground">
|
||||
{t('category')}
|
||||
</label>
|
||||
<select
|
||||
id="custom-module-category"
|
||||
value={category}
|
||||
onChange={(e) => setCategory(e.target.value)}
|
||||
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
|
||||
>
|
||||
{MODULE_CATEGORIES.map((c) => (
|
||||
<option key={c} value={c}>
|
||||
{categoryLabel(c)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div
|
||||
role="alert"
|
||||
className="rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive"
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-3 pt-2">
|
||||
<button type="button" onClick={onClose} className="btn btn-secondary">
|
||||
{tCommon('cancel')}
|
||||
</button>
|
||||
<button type="submit" disabled={saving} className="btn btn-primary">
|
||||
{saving ? tCommon('loading') : tCommon('save')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,188 @@
|
||||
'use client';
|
||||
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { type CustomModule, listCustomModules } from '@/lib/custom-modules-api';
|
||||
import { useMarketplaceStore } from '@/lib/stores/marketplace-store';
|
||||
import { useCategoryLabel } from '@/lib/use-category-label';
|
||||
import { CustomModuleFormModal } from './custom-module-form-modal';
|
||||
import { DeleteCustomModuleDialog } from './delete-custom-module-dialog';
|
||||
|
||||
/** Seitenspezifische, bereits uebersetzte Texte der beiden Aufrufer. */
|
||||
export interface CustomModuleManagerTexts {
|
||||
title: string;
|
||||
description: string;
|
||||
create: string;
|
||||
noModules: string;
|
||||
noModulesBody: string;
|
||||
}
|
||||
|
||||
interface CustomModuleManagerProps {
|
||||
/**
|
||||
* `shared`: Verwaltung — zeigt und pflegt nur die gemeinsamen Eintraege (fuer
|
||||
* alle Benutzer sichtbar). `personal`: Einstellungen — zeigt und pflegt nur
|
||||
* die eigenen persoenlichen Eintraege des angemeldeten Benutzers.
|
||||
*/
|
||||
scope: 'shared' | 'personal';
|
||||
texts: CustomModuleManagerTexts;
|
||||
}
|
||||
|
||||
/**
|
||||
* Liste mit Anlegen, Bearbeiten und Loeschen eigener Module (quick-260929-dzu).
|
||||
* Eine Oberflaeche fuer zwei Aufrufer: `admin/custom-modules` (`scope="shared"`)
|
||||
* und `settings/custom-modules` (`scope="personal"`). Die API liefert gemeinsame
|
||||
* PLUS eigene Eintraege; die Seite filtert ueber `personal` auf ihren Bereich.
|
||||
* Nach jedem erfolgreichen Anlegen, Aendern oder Loeschen zieht die Seitenleiste
|
||||
* ueber `bumpSidebarRefresh` ohne Neuladen nach.
|
||||
*/
|
||||
export function CustomModuleManager({ scope, texts }: CustomModuleManagerProps) {
|
||||
const t = useTranslations('customModules.form');
|
||||
const tManage = useTranslations('customModules.manage');
|
||||
const tCommon = useTranslations('common');
|
||||
const categoryLabel = useCategoryLabel();
|
||||
const bumpSidebarRefresh = useMarketplaceStore((s) => s.bumpSidebarRefresh);
|
||||
const shared = scope === 'shared';
|
||||
|
||||
const [modules, setModules] = useState<CustomModule[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [loadFailed, setLoadFailed] = useState(false);
|
||||
|
||||
const [showFormModal, setShowFormModal] = useState(false);
|
||||
const [editing, setEditing] = useState<CustomModule | null>(null);
|
||||
const [deleteTarget, setDeleteTarget] = useState<CustomModule | null>(null);
|
||||
|
||||
const fetchModules = useCallback(async () => {
|
||||
try {
|
||||
const all = await listCustomModules();
|
||||
setModules(all.filter((m) => m.personal !== shared));
|
||||
setLoadFailed(false);
|
||||
} catch {
|
||||
setLoadFailed(true);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [shared]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchModules();
|
||||
}, [fetchModules]);
|
||||
|
||||
const handleChanged = () => {
|
||||
fetchModules();
|
||||
bumpSidebarRefresh();
|
||||
};
|
||||
|
||||
const openCreate = () => {
|
||||
setEditing(null);
|
||||
setShowFormModal(true);
|
||||
};
|
||||
|
||||
const openEdit = (mod: CustomModule) => {
|
||||
setEditing(mod);
|
||||
setShowFormModal(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1
|
||||
className={`${shared ? 'text-2xl' : 'text-lg'} font-semibold text-foreground`}
|
||||
>
|
||||
{texts.title}
|
||||
</h1>
|
||||
<button type="button" onClick={openCreate} className="btn btn-primary">
|
||||
{texts.create}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-muted-foreground">{texts.description}</p>
|
||||
|
||||
{loadFailed && (
|
||||
<div className="rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
|
||||
{tManage('loadError')}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<p className="text-muted-foreground">{tCommon('loading')}</p>
|
||||
) : modules.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-center">
|
||||
<h2 className="mb-2 text-lg font-semibold text-foreground">{texts.noModules}</h2>
|
||||
<p className="mb-6 text-sm text-muted-foreground">{texts.noModulesBody}</p>
|
||||
<button type="button" onClick={openCreate} className="btn btn-primary">
|
||||
{texts.create}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto rounded-md border border-border">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-muted/50">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left font-medium text-muted-foreground">{t('name')}</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-muted-foreground">{t('url')}</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-muted-foreground">{t('category')}</th>
|
||||
<th className="px-4 py-3 text-right font-medium text-muted-foreground">
|
||||
{tManage('actions')}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border">
|
||||
{modules.map((mod) => (
|
||||
<tr key={mod.id} className="transition-colors hover:bg-muted/30">
|
||||
<td className="px-4 py-3 font-medium text-foreground">
|
||||
<Link href={`/modules/custom/${mod.id}`} className="link">
|
||||
{mod.name}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="max-w-[24rem] px-4 py-3 text-muted-foreground">
|
||||
<span className="block truncate" title={mod.url}>
|
||||
{mod.url}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-muted-foreground">{categoryLabel(mod.category)}</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openEdit(mod)}
|
||||
className="rounded px-2 py-1 text-xs text-foreground transition-colors hover:bg-muted"
|
||||
>
|
||||
{tCommon('edit')}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setDeleteTarget(mod)}
|
||||
className="rounded px-2 py-1 text-xs text-destructive transition-colors hover:bg-destructive/10"
|
||||
>
|
||||
{tCommon('delete')}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showFormModal && (
|
||||
<CustomModuleFormModal
|
||||
mod={editing}
|
||||
shared={shared}
|
||||
onClose={() => setShowFormModal(false)}
|
||||
onSaved={handleChanged}
|
||||
/>
|
||||
)}
|
||||
|
||||
{deleteTarget && (
|
||||
<DeleteCustomModuleDialog
|
||||
mod={deleteTarget}
|
||||
shared={shared}
|
||||
onClose={() => setDeleteTarget(null)}
|
||||
onDeleted={handleChanged}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { type CustomModule, deleteCustomModule } from '@/lib/custom-modules-api';
|
||||
|
||||
interface DeleteCustomModuleDialogProps {
|
||||
mod: CustomModule;
|
||||
/** Gemeinsamer Eintrag (verschwindet fuer alle) oder persoenlicher (nur fuer den Besitzer). */
|
||||
shared?: boolean;
|
||||
onClose: () => void;
|
||||
onDeleted: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Rueckfrage vor dem Loeschen eines eigenen Moduls (quick-260929-9wc,
|
||||
* Vorbild `DeleteGroupDialog`). Bleibt bei einem Fehler offen und zeigt ihn —
|
||||
* ein stilles Scheitern wuerde ein Loeschen vortaeuschen. Der Text nennt, fuer
|
||||
* wen der Eintrag verschwindet (quick-260929-dzu: gemeinsam = alle, persoenlich
|
||||
* = nur der Besitzer).
|
||||
*/
|
||||
export function DeleteCustomModuleDialog({
|
||||
mod,
|
||||
shared = false,
|
||||
onClose,
|
||||
onDeleted,
|
||||
}: DeleteCustomModuleDialogProps) {
|
||||
const t = useTranslations('customModules.form');
|
||||
const tCommon = useTranslations('common');
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleDelete = async () => {
|
||||
setDeleting(true);
|
||||
setError(null);
|
||||
try {
|
||||
await deleteCustomModule(mod.id);
|
||||
onDeleted();
|
||||
onClose();
|
||||
} catch {
|
||||
setError(t('deleteError'));
|
||||
} finally {
|
||||
setDeleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="delete-custom-module-title"
|
||||
className="w-full max-w-sm rounded-lg bg-card p-6 shadow-lg dark:border dark:border-border"
|
||||
>
|
||||
<h2 id="delete-custom-module-title" className="mb-4 text-lg font-semibold text-foreground">
|
||||
{t('deleteConfirm.title')}
|
||||
</h2>
|
||||
<p className="mb-4 text-sm text-foreground">{t(shared ? 'deleteConfirm.bodyShared' : 'deleteConfirm.bodyPersonal', { name: mod.name })}</p>
|
||||
|
||||
{error && (
|
||||
<div
|
||||
role="alert"
|
||||
className="mb-4 rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive"
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<button type="button" onClick={onClose} className="btn btn-secondary">
|
||||
{tCommon('cancel')}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDelete}
|
||||
disabled={deleting}
|
||||
className="rounded-md bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground transition-opacity hover:opacity-90 disabled:opacity-50"
|
||||
>
|
||||
{deleting ? tCommon('loading') : tCommon('delete')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -71,6 +71,19 @@ export function SettingsSidebar() {
|
||||
>
|
||||
{t('categoryDesktopApp')}
|
||||
</Link>
|
||||
<Link
|
||||
href="/settings/custom-modules"
|
||||
className={`nav-item flex h-9 items-center rounded-lg px-2.5 text-sm transition-colors ${
|
||||
isActive('/settings/custom-modules')
|
||||
? 'bg-sidebar-accent text-sidebar-accent-foreground font-semibold'
|
||||
: 'text-sidebar-foreground hover:bg-sidebar-hover'
|
||||
}`}
|
||||
aria-current={
|
||||
isActive('/settings/custom-modules') ? 'page' : undefined
|
||||
}
|
||||
>
|
||||
{t('categoryCustomModules')}
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
{/* Dashboard category — existing items unchanged */}
|
||||
|
||||
Reference in New Issue
Block a user