theis.gaedigk/mcs-lose
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add entry removal and row saving functionality, enhance admin components with localization

Browse Source
This commit is contained in:
Theis Gaedigk
2025-08-13 21:48:19 +02:00
parent 5792ce154f
commit 3096e4ab83
8 changed files with 254 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/Admin.tsx
View File

@@ -22,7 +22,7 @@ const Admin: React.FC = () => {
{token ? (
<Table />
) : (
<div className="p-4">Please log in as an admin.</div>
<div className="p-4">Bitte als Admin einloggen. Oder gehe <a className="text-blue-500 hover:underline" href="/">zurück</a>.</div>
)}
</>
);

2
frontend/src/components/MainForm.tsx
View File

@@ -125,7 +125,7 @@ const MainForm: React.FC = () => {
Los registrieren
</button>
<p className="mt-1 text-xs text-zinc-500">
Wenn Sie die Daten eines Loses bearbeiten möchten,{" "}
Wenn Sie die Daten eines bereits registrierten Loses bearbeiten möchten,{" "}
<a
className="text-blue-600 underline"
href="mailto:example@example.com"

4
frontend/src/components/SubHeaderAdmin.tsx
View File

@@ -2,6 +2,7 @@ import React from "react";
import { Sheet, WholeWord } from "lucide-react";
import { useState } from "react";
import ImportGUI from "./ImportGUI";
import { removeSelection } from "../utils/tableActions";
type SubHeaderAdminProps = {
setFiles: (files: File[]) => void;
@@ -41,6 +42,9 @@ const SubHeaderAdmin: React.FC<SubHeaderAdminProps> = ({ setFiles, files }) => {
<span className="whitespace-nowrap">Losnummern importieren</span>
</button>
<button
onClick={() => {
removeSelection();
}}
type="button"
className="group inline-flex items-center gap-2 rounded-md bg-rose-600 px-3.5 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-rose-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-500/60 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60"
>

154
frontend/src/components/Table.tsx
View File

@@ -2,8 +2,9 @@ import React, { useEffect, useState } from "react";
import Cookies from "js-cookie";
import { useQuery } from "@tanstack/react-query";
import { getTableData, readCachedTableData } from "../utils/userHandler";
import { EllipsisVertical } from "lucide-react";
import { Save } from "lucide-react";
import SubHeaderAdmin from "./SubHeaderAdmin";
import { addToRemove, rmFromRemove, saveRow } from "../utils/tableActions";
interface DataPackage {
losnummer: string;
@@ -17,9 +18,12 @@ interface DataPackage {
const Table: React.FC = () => {
const [rows, setRows] = useState<DataPackage[]>([]); // holds normalized cache view
const [error, setError] = useState<string | null>(null);
const [files, setFiles] = useState<File[]>([]);
// Einheitliche Input-Styles (nur Tailwind)
const inputClasses =
"w-full h-10 px-3 rounded-md border border-gray-300 bg-white text-sm text-gray-900 placeholder-gray-400 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
// Hilfsfunktion zum Einlesen & Normalisieren der LocalStorage-Daten
const loadFromCache = () => {
const cached = readCachedTableData<any>();
@@ -48,15 +52,10 @@ const Table: React.FC = () => {
// Sync normalized cached data into local state whenever query succeeds or cache changes
useEffect(() => {
loadFromCache();
Cookies.remove("removeArr");
}, [tableQuery.data]);
useEffect(() => {
if (tableQuery.isError) {
setError((tableQuery.error as Error).message);
} else {
setError(null);
}
}, [tableQuery.isError, tableQuery.error]);
// Fehleranzeige ist aktuell nicht sichtbar (auskommentierte UI).
// Reagieren auf LocalStorage-Änderungen (z.B. in anderen Tabs)
useEffect(() => {
@@ -69,13 +68,24 @@ const Table: React.FC = () => {
return () => window.removeEventListener("storage", handler);
}, []);
const formatValue = (v: any) =>
v === null || v === undefined || v === "" ? "-" : String(v);
// Handles input changes for table rows
const handleInputChange = (
losnummer: string,
field: keyof DataPackage,
value: string
) => {
setRows((prevRows) =>
prevRows.map((row) =>
row.losnummer === losnummer ? { ...row, [field]: value } : row
)
);
};
return (
<>
<SubHeaderAdmin setFiles={setFiles} files={files} />
<div className="w-full">
{/*
<div className="mb-4 flex items-center gap-3">
{(tableQuery.isLoading || tableQuery.isFetching) && (
<span className="text-xs text-blue-600 animate-pulse">
@@ -83,6 +93,7 @@ const Table: React.FC = () => {
</span>
)}
{error && <span className="text-xs text-red-600">{error}</span>}
<button
type="button"
onClick={() => tableQuery.refetch()}
@@ -91,55 +102,56 @@ const Table: React.FC = () => {
Refresh
</button>
</div>
<div className="overflow-x-auto rounded-lg shadow ring-1 ring-black/5">
*/}
<div className="overflow-auto rounded-lg shadow ring-1 ring-black/5">
<table className="min-w-full divide-y divide-gray-200 text-sm">
<thead className="bg-gray-50">
<thead className="bg-gray-50 sticky top-0">
<tr>
<th
scope="col"
className="px-4 py-2 text-left font-medium uppercase tracking-wide text-gray-600"
className="px-4 py-2 text-left invisible font-medium uppercase tracking-wide text-gray-600 w-10 min-w-[2.5rem]"
>
<input type="checkbox" name="" id="" />
</th>
<th
scope="col"
className="px-4 py-2 text-left font-medium uppercase tracking-wide text-gray-600"
className="px-4 py-2 text-left font-medium uppercase tracking-wide text-gray-600 w-[10rem] min-w-[10rem]"
>
Losnummer
</th>
<th
scope="col"
className="px-4 py-2 text-left font-medium uppercase tracking-wide text-gray-600"
className="px-4 py-2 text-left font-medium uppercase tracking-wide text-gray-600 w-[14rem] min-w-[14rem]"
>
Vorname
</th>
<th
scope="col"
className="px-4 py-2 text-left font-medium uppercase tracking-wide text-gray-600"
className="px-4 py-2 text-left font-medium uppercase tracking-wide text-gray-600 w-[14rem] min-w-[14rem]"
>
Nachname
</th>
<th
scope="col"
className="px-4 py-2 text-left font-medium uppercase tracking-wide text-gray-600"
className="px-4 py-2 text-left font-medium uppercase tracking-wide text-gray-600 w-[14rem] min-w-[14rem]"
>
Adresse
</th>
<th
scope="col"
className="px-4 py-2 text-left font-medium uppercase tracking-wide text-gray-600"
className="px-4 py-2 text-left font-medium uppercase tracking-wide text-gray-600 w-[14rem] min-w-[14rem]"
>
PLZ
</th>
<th
scope="col"
className="px-4 py-2 text-left font-medium uppercase tracking-wide text-gray-600"
className="px-4 py-2 text-left font-medium uppercase tracking-wide text-gray-600 w-[14rem] min-w-[14rem]"
>
Email
</th>
<th
scope="col"
className="px-4 py-2 text-left font-medium uppercase tracking-wide text-gray-600"
className="px-4 py-2 text-left font-medium uppercase tracking-wide text-gray-600 w-12 min-w-[3rem]"
></th>
</tr>
</thead>
@@ -147,7 +159,7 @@ const Table: React.FC = () => {
{rows.length === 0 && !tableQuery.isLoading && (
<tr>
<td
colSpan={6}
colSpan={8}
className="px-4 py-6 text-center text-gray-500"
>
Keine Daten vorhanden.
@@ -159,33 +171,95 @@ const Table: React.FC = () => {
key={row.losnummer ?? idx}
className="hover:bg-gray-50 transition-colors"
>
<td className="px-4 py-2 font-mono text-xs text-gray-900">
<input type="checkbox" name="" id={row.losnummer} />
<td className="px-4 py-2 font-mono text-xs text-gray-900 w-10 min-w-[2.5rem]">
<input
type="checkbox"
name=""
onChange={(e) => {
if (e.target.checked) {
addToRemove(row.losnummer);
} else {
rmFromRemove(row.losnummer);
}
}}
id={row.losnummer}
/>
</td>
<td className="px-4 py-2 font-mono text-xs text-gray-900">
{formatValue(row.losnummer)}
<td className="px-4 py-2 font-mono text-xs text-gray-900 w-[10rem] min-w-[10rem]">
{row.losnummer}
</td>
<td className="px-4 py-2">
<input type="text" value={formatValue(row.vorname)} />
<td className="px-4 py-2 w-[14rem] min-w-[14rem]">
<input
type="text"
className={inputClasses}
onChange={(e) => {
handleInputChange(
row.losnummer,
"vorname",
e.target.value
);
}}
value={row.vorname ?? ""}
/>
</td>
<td className="px-4 py-2">
<input type="text" value={formatValue(row.nachname)} />
<td className="px-4 py-2 w-[14rem] min-w-[14rem]">
<input
type="text"
className={inputClasses}
onChange={(e) => {
handleInputChange(
row.losnummer,
"nachname",
e.target.value
);
}}
value={row.nachname ?? ""}
/>
</td>
<td
className="px-4 py-2 max-w-[16rem] truncate"
title={formatValue(row.adresse)}
className="px-4 py-2 w-[14rem] min-w-[14rem]"
title={row.adresse ?? ""}
>
<input type="text" value={formatValue(row.adresse)} />
<input
type="text"
className={inputClasses}
onChange={(e) => {
handleInputChange(
row.losnummer,
"adresse",
e.target.value
);
}}
value={row.adresse ?? ""}
/>
</td>
<td className="px-4 py-2">
<input type="text" value={formatValue(row.plz)} />
<td className="px-4 py-2 w-[14rem] min-w-[14rem]">
<input
type="text"
className={inputClasses}
onChange={(e) => {
handleInputChange(row.losnummer, "plz", e.target.value);
}}
value={row.plz ?? ""}
/>
</td>
<td className="px-4 py-2">
<input type="text" value={formatValue(row.email)} />
<td className="px-4 py-2 w-[14rem] min-w-[14rem]">
<input
type="text"
className={inputClasses}
onChange={(e) => {
handleInputChange(
row.losnummer,
"email",
e.target.value
);
}}
value={row.email ?? ""}
/>
</td>
<td className="px-4 py-2">
<button>
<EllipsisVertical />
<td className="px-4 py-2 w-12 min-w-[3rem]">
<button onClick={() => saveRow(row)}>
<Save />
</button>
</td>
</tr>

58
frontend/src/utils/tableActions.ts Normal file
View File

@@ -0,0 +1,58 @@
import Cookies from "js-cookie";
import { myToast } from "./toastify";
import { queryClient } from "../queryClient";
let removeArr: string[] = [];
export const addToRemove = (losnummer: string) => {
removeArr.push(losnummer);
const rawCookies = Cookies.withConverter({
write: (value: string, _name: string) => value,
});
rawCookies.set("removeArr", JSON.stringify(removeArr));
};
export const rmFromRemove = (losnummer: string) => {
removeArr = removeArr.filter((item) => item !== losnummer);
const rawCookies = Cookies.withConverter({
write: (value: string, _name: string) => value,
});
rawCookies.set("removeArr", JSON.stringify(removeArr));
};
const token = Cookies.get("token");
const headers = {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
};
export const removeSelection = () => {
const selection = Cookies.get("removeArr");
if (selection && selection !== "[]") {
fetch("http://localhost:8002/remove-entries", {
method: "DELETE",
headers: headers,
body: `{
"losnummern": ${selection}
}`,
}).then((response) => {
if (response.ok) {
myToast("Einträge erfolgreich entfernt.", "success");
queryClient.invalidateQueries({ queryKey: ["table-data"] });
} else {
myToast("Fehler beim Entfernen der Einträge.", "error");
}
});
} else {
myToast("Keine Einträge zum Entfernen ausgewählt.", "info");
}
};
export const saveRow = (data: any) => {
fetch("http://localhost:8002/save-row", {
method: "PUT",
headers: headers,
body: JSON.stringify(data),
});
};

2
frontend/src/utils/userHandler.ts
View File

@@ -7,6 +7,7 @@ export const logoutAdmin = () => {
myToast("Logged out successfully!", "success");
};
// Fetch table data and store it in localStorage. Returns the parsed data or null on failure.
export const getTableData = async (token: string) => {
try {
@@ -32,7 +33,6 @@ export const getTableData = async (token: string) => {
// Ensure we parse JSON
const data = await response.json();
localStorage.setItem("tableData", JSON.stringify(data));
myToast("Table data fetched successfully!", "success");
return data;
} catch (error: any) {
myToast(`Error fetching table data! ${error?.message || error}`, "error");