UI: switch to Syncfusion M3, remove Tailwind;

paginate changelog; docs updated; bump to 2025.1.0-alpha.8

dashboard/src/infoscreen_groups.tsx

@@ -5,6 +5,11 @@ import { fetchGroups, createGroup, deleteGroup, renameGroup } from './apiGroups'
 import type { Client } from './apiClients';
 import type { KanbanComponent as KanbanComponentType } from '@syncfusion/ej2-react-kanban';
 import { DialogComponent } from '@syncfusion/ej2-react-popups';
+import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
+import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
+import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
+import type { ChangedEventArgs as TextBoxChangedArgs } from '@syncfusion/ej2-react-inputs';
+import type { ChangeEventArgs as DropDownChangeArgs } from '@syncfusion/ej2-react-dropdowns';
 import { useToast } from './components/ToastProvider';
 import { L10n } from '@syncfusion/ej2-base';
 
@@ -41,10 +46,10 @@ const de = {
   rename: 'Umbenennen',
   confirmDelete: 'Löschbestätigung',
   reallyDelete: (name: string) => `Möchten Sie die Gruppe <b>${name}</b> wirklich löschen?`,
-  clientsMoved: 'Alle Clients werden in "Nicht zugeordnet" verschoben.',
+  clientsMoved: 'Alle Clients werden nach "Nicht zugeordnet" verschoben.',
   groupCreated: 'Gruppe angelegt',
-  groupDeleted: 'Gruppe gelöscht. Clients in "Nicht zugeordnet" verschoben',
-  groupRenamed: 'Gruppenname geändert',
+  groupDeleted: 'Gruppe gelöscht. Alle Clients wurden nach "Nicht zugeordnet" verschoben.',
+  groupRenamed: 'Gruppe umbenannt',
   selectGroup: 'Gruppe wählen',
   newName: 'Neuer Name',
   warning: 'Achtung:',
@@ -312,7 +317,12 @@ const Infoscreen_groups: React.FC = () => {
         });
       });
     } catch {
-      alert('Fehler beim Aktualisieren der Clients');
+      toast.show({
+        content: 'Fehler beim Aktualisieren der Clients',
+        cssClass: 'e-toast-danger',
+        timeOut: 0,
+        showCloseButton: true,
+      });
     }
     setDraggedCard(null);
   };
@@ -326,25 +336,23 @@ const Infoscreen_groups: React.FC = () => {
   return (
     <div id="dialog-target">
       <h2 className="text-xl font-bold mb-4">{de.title}</h2>
-      <div className="flex gap-2 mb-4">
-        <button
-          className="px-4 py-2 bg-blue-500 text-white rounded"
-          onClick={() => setShowDialog(true)}
-        >
+      <div
+        style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: '12px',
+          marginBottom: '16px',
+        }}
+      >
+        <ButtonComponent cssClass="e-primary" onClick={() => setShowDialog(true)}>
           {de.newGroup}
-        </button>
-        <button
-          className="px-4 py-2 bg-yellow-500 text-white rounded"
-          onClick={() => setRenameDialog({ open: true, oldName: '', newName: '' })}
-        >
+        </ButtonComponent>
+        <ButtonComponent cssClass="e-warning" onClick={() => setRenameDialog({ open: true, oldName: '', newName: '' })}>
           {de.renameGroup}
-        </button>
-        <button
-          className="px-4 py-2 bg-red-500 text-white rounded"
-          onClick={() => setDeleteDialog({ open: true, groupName: '' })}
-        >
+        </ButtonComponent>
+        <ButtonComponent cssClass="e-danger" onClick={() => setDeleteDialog({ open: true, groupName: '' })}>
           {de.deleteGroup}
-        </button>
+        </ButtonComponent>
       </div>
       <KanbanComponent
         locale="de"
@@ -362,155 +370,155 @@ const Infoscreen_groups: React.FC = () => {
         columns={kanbanColumns}
       />
       {showDialog && (
-        <div className="fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center">
-          <div className="bg-white p-6 rounded shadow">
-            <h3 className="mb-2 font-bold">{de.newGroup}</h3>
-            <input
-              className="border p-2 mb-2 w-full"
-              value={newGroupName}
-              onChange={e => setNewGroupName(e.target.value)}
-              placeholder="Raumname"
-            />
-            <div className="flex gap-2">
-              <button className="bg-blue-500 text-white px-4 py-2 rounded" onClick={handleAddGroup}>
+        <DialogComponent
+          visible={showDialog}
+          header={de.newGroup}
+          close={() => setShowDialog(false)}
+          target="#dialog-target"
+          width="420px"
+          footerTemplate={() => (
+            <div className="flex gap-2 justify-end">
+              <ButtonComponent cssClass="e-primary" onClick={handleAddGroup} disabled={!newGroupName.trim()}>
                 {de.add}
-              </button>
-              <button
-                className="bg-gray-300 px-4 py-2 rounded"
-                onClick={() => setShowDialog(false)}
-              >
-                {de.cancel}
-              </button>
+              </ButtonComponent>
+              <ButtonComponent onClick={() => setShowDialog(false)}>{de.cancel}</ButtonComponent>
             </div>
+          )}
+        >
+          <div className="mt-2">
+            <TextBoxComponent
+              value={newGroupName}
+              placeholder="Raumname"
+              floatLabelType="Auto"
+              change={(args: TextBoxChangedArgs) => setNewGroupName(String(args.value ?? ''))}
+            />
           </div>
-        </div>
+        </DialogComponent>
       )}
       {renameDialog.open && (
-        <div className="fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center">
-          <div className="bg-white p-6 rounded shadow">
-            <h3 className="mb-2 font-bold">{de.renameGroup}</h3>
-            <select
-              className="border p-2 mb-2 w-full"
-              value={renameDialog.oldName}
-              onChange={e =>
-                setRenameDialog({
-                  ...renameDialog,
-                  oldName: e.target.value,
-                  newName: e.target.value,
-                })
-              }
-            >
-              <option value="">{de.selectGroup}</option>
-              {groups
-                .filter(g => g.headerText !== 'Nicht zugeordnet')
-                .map(g => (
-                  <option key={g.keyField} value={g.headerText}>
-                    {g.headerText}
-                  </option>
-                ))}
-            </select>
-            <input
-              className="border p-2 mb-2 w-full"
-              value={renameDialog.newName}
-              onChange={e => setRenameDialog({ ...renameDialog, newName: e.target.value })}
-              placeholder={de.newName}
-            />
-            <div className="flex gap-2">
-              <button
-                className="bg-blue-500 text-white px-4 py-2 rounded"
+        <DialogComponent
+          visible={renameDialog.open}
+          header={de.renameGroup}
+          showCloseIcon={true}
+          close={() => setRenameDialog({ open: false, oldName: '', newName: '' })}
+          target="#dialog-target"
+          width="480px"
+          footerTemplate={() => (
+            <div className="flex gap-2 justify-end">
+              <ButtonComponent
+                cssClass="e-primary"
                 onClick={handleRenameGroup}
                 disabled={!renameDialog.oldName || !renameDialog.newName}
               >
                 {de.rename}
-              </button>
-              <button
-                className="bg-gray-300 px-4 py-2 rounded"
-                onClick={() => setRenameDialog({ open: false, oldName: '', newName: '' })}
-              >
+              </ButtonComponent>
+              <ButtonComponent onClick={() => setRenameDialog({ open: false, oldName: '', newName: '' })}>
                 {de.cancel}
-              </button>
+              </ButtonComponent>
             </div>
+          )}
+        >
+          <div className="flex flex-col gap-3 mt-2">
+            <DropDownListComponent
+              placeholder={de.selectGroup}
+              dataSource={groups.filter(g => g.headerText !== 'Nicht zugeordnet').map(g => g.headerText)}
+              value={renameDialog.oldName}
+              change={(e: DropDownChangeArgs) =>
+                setRenameDialog({
+                  ...renameDialog,
+                  oldName: String(e.value ?? ''),
+                  newName: String(e.value ?? ''),
+                })
+              }
+            />
+            <TextBoxComponent
+              placeholder={de.newName}
+              value={renameDialog.newName}
+              floatLabelType="Auto"
+              change={(args: TextBoxChangedArgs) =>
+                setRenameDialog({ ...renameDialog, newName: String(args.value ?? '') })
+              }
+            />
           </div>
-        </div>
+        </DialogComponent>
       )}
       {deleteDialog.open && (
-        <div className="fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center">
-          <div className="bg-white p-6 rounded shadow">
-            <h3 className="mb-2 font-bold">{de.deleteGroup}</h3>
-            <select
-              className="border p-2 mb-2 w-full"
-              value={deleteDialog.groupName}
-              onChange={e => setDeleteDialog({ ...deleteDialog, groupName: e.target.value })}
-            >
-              <option value="">{de.selectGroup}</option>
-              {groups
-                .filter(g => g.headerText !== 'Nicht zugeordnet')
-                .map(g => (
-                  <option key={g.keyField} value={g.headerText}>
-                    {g.headerText}
-                  </option>
-                ))}
-            </select>
-            <p>{de.clientsMoved}</p>
-            {deleteDialog.groupName && (
-              <div className="bg-yellow-100 text-yellow-800 p-2 rounded mb-2 text-sm">
-                <strong>{de.warning}</strong> Möchten Sie die Gruppe <b>{deleteDialog.groupName}</b>{' '}
-                wirklich löschen?
-              </div>
-            )}
-            <div className="flex gap-2 mt-2">
-              <button
-                className="bg-red-500 text-white px-4 py-2 rounded"
+        <DialogComponent
+          visible={deleteDialog.open}
+          header={de.deleteGroup}
+          showCloseIcon={true}
+          close={() => setDeleteDialog({ open: false, groupName: '' })}
+          target="#dialog-target"
+          width="520px"
+          footerTemplate={() => (
+            <div className="flex gap-2 justify-end">
+              <ButtonComponent
+                cssClass="e-danger"
                 onClick={() => setShowDeleteConfirm(true)}
                 disabled={!deleteDialog.groupName}
               >
                 {de.deleteGroup}
-              </button>
-              <button
-                className="bg-gray-300 px-4 py-2 rounded"
-                onClick={() => setDeleteDialog({ open: false, groupName: '' })}
+              </ButtonComponent>
+              <ButtonComponent onClick={() => setDeleteDialog({ open: false, groupName: '' })}>
+                {de.cancel}
+              </ButtonComponent>
+            </div>
+          )}
+        >
+          <div className="flex flex-col gap-3 mt-2">
+            <DropDownListComponent
+              placeholder={de.selectGroup}
+              dataSource={groups.filter(g => g.headerText !== 'Nicht zugeordnet').map(g => g.headerText)}
+              value={deleteDialog.groupName}
+              change={(e: DropDownChangeArgs) =>
+                setDeleteDialog({ ...deleteDialog, groupName: String(e.value ?? '') })
+              }
+            />
+            <p className="text-sm text-gray-600">{de.clientsMoved}</p>
+            {deleteDialog.groupName && (
+              <div className="bg-yellow-100 text-yellow-800 p-2 rounded text-sm">
+                <strong>{de.warning}</strong> Möchten Sie die Gruppe <b>{deleteDialog.groupName}</b> wirklich löschen?
+              </div>
+            )}
+          </div>
+        </DialogComponent>
+      )}
+      {showDeleteConfirm && deleteDialog.groupName && (
+        <DialogComponent
+          width="380px"
+          header={de.confirmDelete}
+          visible={showDeleteConfirm}
+          showCloseIcon={true}
+          close={() => setShowDeleteConfirm(false)}
+          target="#dialog-target"
+          footerTemplate={() => (
+            <div className="flex gap-2 justify-end">
+              <ButtonComponent
+                cssClass="e-danger"
+                onClick={() => {
+                  handleDeleteGroup(deleteDialog.groupName!);
+                  setShowDeleteConfirm(false);
+                }}
+              >
+                {de.yesDelete}
+              </ButtonComponent>
+              <ButtonComponent
+                onClick={() => {
+                  setShowDeleteConfirm(false);
+                  setDeleteDialog({ open: false, groupName: '' });
+                }}
               >
                 {de.cancel}
-              </button>
+              </ButtonComponent>
             </div>
-          </div>
-          {showDeleteConfirm && deleteDialog.groupName && (
-            <DialogComponent
-              width="350px"
-              header={de.confirmDelete}
-              visible={showDeleteConfirm}
-              close={() => setShowDeleteConfirm(false)}
-              footerTemplate={() => (
-                <div className="flex gap-2 justify-end">
-                  <button
-                    className="bg-red-500 text-white px-4 py-2 rounded"
-                    onClick={() => {
-                      handleDeleteGroup(deleteDialog.groupName);
-                      setShowDeleteConfirm(false);
-                    }}
-                  >
-                    {de.yesDelete}
-                  </button>
-                  <button
-                    className="bg-gray-300 px-4 py-2 rounded"
-                    onClick={() => {
-                      setShowDeleteConfirm(false);
-                      setDeleteDialog({ open: false, groupName: '' });
-                    }}
-                  >
-                    {de.cancel}
-                  </button>
-                </div>
-              )}
-            >
-              <div>
-                Möchten Sie die Gruppe <b>{deleteDialog.groupName}</b> wirklich löschen?
-                <br />
-                <span className="text-sm text-gray-500">{de.clientsMoved}</span>
-              </div>
-            </DialogComponent>
           )}
-        </div>
+        >
+          <div>
+            Möchten Sie die Gruppe <b>{deleteDialog.groupName}</b> wirklich löschen?
+            <br />
+            <span className="text-sm text-gray-500">{de.clientsMoved}</span>
+          </div>
+        </DialogComponent>
       )}
     </div>
   );