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>
2026-09-29 10:17:22 +02:00
parent bc4c0119de
commit ee97b4ed9f
11 changed files with 636 additions and 222 deletions
@@ -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>
+  );
+}