Complete Redesign of Backend Handling for Client Group Assignments

dashboard/public/program-info.json

@@ -1,21 +1,20 @@
 {
   "appName": "Infoscreen-Management",
-  "version": "2025.1.0-alpha.4",
+  "version": "2025.1.0-alpha.5",
   "copyright": "© 2025 Third-Age-Applications",
   "supportContact": "support@third-age-applications.com",
   "description": "Eine zentrale Verwaltungsoberfläche für digitale Informationsbildschirme.",
   "techStack": {
-    "frontend": "React, Vite, TypeScript, Tailwind CSS",
-    "backend": "Python (Flask), SQLAlchemy",
-    "database": "MariaDB",
-    "realtime": "Mosquitto (MQTT)",
-    "containerization": "Docker"
+    "Frontend": "React, Vite, TypeScript",
+    "Backend": "Python (Flask), SQLAlchemy",
+    "Database": "MariaDB",
+    "Realtime": "Mosquitto (MQTT)",
+    "Containerization": "Docker"
   },
   "openSourceComponents": {
     "frontend": [
       { "name": "React", "license": "MIT" },
       { "name": "Vite", "license": "MIT" },
-      { "name": "Tailwind CSS", "license": "MIT" },
       { "name": "Lucide Icons", "license": "ISC" },
       { "name": "Syncfusion UI Components", "license": "Kommerziell / Community" }
     ],
@@ -31,6 +30,13 @@
     "commitId": "a1b2c3d4e5f6"
   },
   "changelog": [
+    {
+      "version": "2025.1.0-alpha.5",
+      "date": "2025-09-14",
+      "changes": [
+        "Komplettes Redesign des Backend-Handlings der Gruppenzuordnungen von neuen Clients und der Schritte bei Änderung der Gruppenzuordnung."
+      ]
+    },
     {
       "version": "2025.1.0-alpha.4",
       "date": "2025-09-01",

dashboard/src/apiClients.ts

@@ -59,11 +59,11 @@ export async function setClientDescription(uuid: string, description: string) {
   return await res.json();
 }
 
-export async function updateClientGroup(clientIds: string[], groupName: string) {
+export async function updateClientGroup(clientIds: string[], groupId: number) {
   const res = await fetch('/api/clients/group', {
     method: 'PUT',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ client_ids: clientIds, group_name: groupName }),
+    body: JSON.stringify({ client_ids: clientIds, group_id: groupId }),
   });
   if (!res.ok) throw new Error('Fehler beim Aktualisieren der Clients');
   return await res.json();

dashboard/src/infoscreen_groups.tsx

@@ -72,7 +72,7 @@ L10n.load({
 const Infoscreen_groups: React.FC = () => {
   const toast = useToast();
   const [clients, setClients] = useState<KanbanClient[]>([]);
-  const [groups, setGroups] = useState<{ keyField: string; headerText: string }[]>([]);
+  const [groups, setGroups] = useState<{ keyField: string; headerText: string; id?: number }[]>([]);
   const [showDialog, setShowDialog] = useState(false);
   const [newGroupName, setNewGroupName] = useState('');
   const [draggedCard, setDraggedCard] = useState<{ id: string; fromColumn: string } | null>(null);
@@ -130,7 +130,10 @@ const Infoscreen_groups: React.FC = () => {
         timeOut: 5000,
         showCloseButton: false,
       });
-      setGroups([...groups, { keyField: newGroup.name, headerText: newGroup.name }]);
+      setGroups([
+        ...groups,
+        { keyField: newGroup.name, headerText: newGroup.name, id: newGroup.id },
+      ]);
       setNewGroupName('');
       setShowDialog(false);
     } catch (err) {
@@ -149,9 +152,12 @@ const Infoscreen_groups: React.FC = () => {
       // Clients der Gruppe in "Nicht zugeordnet" verschieben
       const groupClients = clients.filter(c => c.Status === groupName);
       if (groupClients.length > 0) {
+        // Ermittle die ID der Zielgruppe "Nicht zugeordnet"
+        const target = groups.find(g => g.headerText === 'Nicht zugeordnet');
+        if (!target || !target.id) throw new Error('Zielgruppe "Nicht zugeordnet" nicht gefunden');
         await updateClientGroup(
           groupClients.map(c => c.Id),
-          'Nicht zugeordnet'
+          target.id
         );
       }
       await deleteGroup(groupName);
@@ -271,7 +277,10 @@ const Infoscreen_groups: React.FC = () => {
     const clientIds = dropped.map((card: KanbanClient) => card.Id);
 
     try {
-      await updateClientGroup(clientIds, targetGroupName);
+      // Ermittle Zielgruppen-ID anhand des Namens
+      const target = groups.find(g => g.headerText === targetGroupName);
+      if (!target || !target.id) throw new Error('Zielgruppe nicht gefunden');
+      await updateClientGroup(clientIds, target.id);
       fetchGroups().then((groupData: Group[]) => {
         const groupMap = Object.fromEntries(groupData.map(g => [g.id, g.name]));
         setGroups(

dashboard/src/types/json.d.ts

@@ -1,4 +1,4 @@
-declare module "*.json" {
-  const value: any;
+declare module '*.json' {
+  const value: unknown;
   export default value;
 }