optimize filemanager

dashboard/public/program-info.json

@@ -35,7 +35,8 @@
       "version": "2025.1.0-alpha.4",
       "date": "2025-09-01",
       "changes": [
-        "Grundstruktur für Deployment getestet und optimiert."
+        "Grundstruktur für Deployment getestet und optimiert.",
+        "FIX: Programmfehler beim Umschalten der Ansicht auf der Medien-Seite behoben."
       ]
     },
     {

dashboard/src/media.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import CustomMediaInfoPanel from './components/CustomMediaInfoPanel';
 import {
   FileManagerComponent,
@@ -10,7 +10,6 @@ import {
 
 const hostUrl = '/api/eventmedia/filemanager/'; // Dein Backend-Endpunkt für FileManager
 
-
 const Media: React.FC = () => {
   // State für die angezeigten Dateidetails
   const [fileDetails] = useState<null | {
@@ -22,6 +21,7 @@ const Media: React.FC = () => {
   }>(null);
   // Ansicht: 'LargeIcons', 'Details'
   const [viewMode, setViewMode] = useState<'LargeIcons' | 'Details'>('LargeIcons');
+  const fileManagerRef = useRef<FileManagerComponent | null>(null);
 
   // Hilfsfunktion für Datum in Browser-Zeitzone
   function formatLocalDate(timestamp: number) {
@@ -30,6 +30,19 @@ const Media: React.FC = () => {
     return date.toLocaleString('de-DE'); // Zeigt lokale Zeit des Browsers
   }
 
+  // Ansicht umschalten, ohne Remount
+  React.useEffect(() => {
+    if (fileManagerRef.current) {
+      const element = fileManagerRef.current.element as HTMLElement & { ej2_instances?: unknown[] };
+      if (element && element.ej2_instances && element.ej2_instances[0]) {
+        // Typisiere Instanz als unknown, da kein offizieller Typ vorhanden
+        const instanz = element.ej2_instances[0] as { view: string; dataBind: () => void };
+        instanz.view = viewMode;
+        instanz.dataBind();
+      }
+    }
+  }, [viewMode]);
+
   return (
     <div>
       <h2 className="text-xl font-bold mb-4">Medien</h2>
@@ -49,7 +62,9 @@ const Media: React.FC = () => {
           Details
         </button>
       </div>
+      {/* Debug-Ausgabe entfernt, da ReactNode erwartet wird */}
       <FileManagerComponent
+        ref={fileManagerRef}
         ajaxSettings={{
           url: hostUrl + 'operations',
           getImageUrl: hostUrl + 'get-image',
@@ -89,9 +104,7 @@ const Media: React.FC = () => {
             { field: 'type', headerText: 'Typ', minWidth: '80', width: '100' },
           ],
         }}
-        menuClick={(args: any) => {
-          console.log('FileManager popupOpen:', args);
-        }}
+        menuClick={() => {}}
       >
         <Inject services={[NavigationPane, DetailsView, Toolbar]} />
       </FileManagerComponent>