theis.gaedigk
2480bfab89
- Removed obsolete PDF file from the mock directory. - Updated index.html to change the favicon and title for the application. - Deleted unused vite.svg file and replaced it with shapes.svg. - Enhanced App component layout and styling. - Refined Form1 component with better spacing and updated styles. - Improved Form2 component to enhance item selection UI and responsiveness. - Updated Form4 component to improve loan display and interaction. - Enhanced Header component styling for better visibility. - Refined LoginForm component for a more modern look. - Updated Object component styles for better text visibility. - Improved Sidebar component layout and item display. - Updated global CSS for better touch target improvements. - Enhanced Layout component for better responsiveness and structure. - Updated main.tsx to change toast notification theme. - Updated tailwind.config.js to include index.html for Tailwind CSS processing.
221 lines
8.2 KiB
TypeScript
221 lines
8.2 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { handleDeleteLoan } from "../utils/userHandler";
|
|
|
|
type Loan = {
|
|
id: number;
|
|
username: string;
|
|
loan_code: number;
|
|
start_date: string;
|
|
end_date: string;
|
|
take_date: string | null;
|
|
returned_date: string | null;
|
|
created_at: string;
|
|
loaned_items_id: number[];
|
|
loaned_items_name: string[];
|
|
};
|
|
|
|
const formatDate = (iso: string | null) => {
|
|
if (!iso) return "-";
|
|
const d = new Date(iso);
|
|
if (Number.isNaN(d.getTime())) return iso;
|
|
return d.toLocaleString("de-DE", { dateStyle: "short", timeStyle: "short" });
|
|
};
|
|
|
|
const readUserLoansFromStorage = (): Loan[] => {
|
|
const raw = localStorage.getItem("userLoans");
|
|
if (!raw || raw === '"No loans found for this user"') return [];
|
|
try {
|
|
const parsed = JSON.parse(raw);
|
|
return Array.isArray(parsed) ? (parsed as Loan[]) : [];
|
|
} catch {
|
|
return [];
|
|
}
|
|
};
|
|
|
|
const TrashIcon = (props: React.SVGProps<SVGSVGElement>) => (
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
{...props}
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M6 7h12M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2m1 0v12a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V7m3 4v6m4-6v6"
|
|
/>
|
|
</svg>
|
|
);
|
|
|
|
const Form4: React.FC = () => {
|
|
const [userLoans, setUserLoans] = useState<Loan[]>(() =>
|
|
readUserLoansFromStorage()
|
|
);
|
|
|
|
useEffect(() => {
|
|
const onStorage = (e: StorageEvent) => {
|
|
if (e.key === "userLoans") {
|
|
setUserLoans(readUserLoansFromStorage());
|
|
}
|
|
};
|
|
window.addEventListener("storage", onStorage);
|
|
return () => window.removeEventListener("storage", onStorage);
|
|
}, []);
|
|
|
|
const onDelete = async (loanID: number) => {
|
|
const ok = await handleDeleteLoan(loanID);
|
|
if (ok) {
|
|
setUserLoans((prev) =>
|
|
prev.filter((l) => Number(l.id) !== Number(loanID))
|
|
);
|
|
}
|
|
};
|
|
|
|
if (userLoans.length === 0) {
|
|
return (
|
|
<div className="rounded-xl border border-slate-200 bg-white p-6 text-center text-slate-600 shadow-sm">
|
|
<p>Keine Ausleihen gefunden.</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
<p className="text-lg font-semibold tracking-tight text-slate-900">
|
|
Meine Ausleihen
|
|
</p>
|
|
<p className="text-sm text-slate-600">
|
|
Tippe auf das Papierkorb-Symbol, um eine Ausleihe zu löschen.
|
|
</p>
|
|
|
|
{/* Mobile: cards */}
|
|
<div className="space-y-2 sm:hidden">
|
|
{userLoans.map((loan) => (
|
|
<div
|
|
key={loan.id}
|
|
className="rounded-xl border border-slate-200 bg-white p-3 shadow-sm"
|
|
>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<div className="text-sm font-semibold text-slate-900">
|
|
Leihcode: <span className="font-mono">{loan.loan_code}</span>
|
|
</div>
|
|
<div className="mt-1 grid grid-cols-2 gap-x-4 gap-y-1 text-xs text-slate-700">
|
|
<div>
|
|
<span className="text-slate-500">Start:</span>{" "}
|
|
{formatDate(loan.start_date)}
|
|
</div>
|
|
<div>
|
|
<span className="text-slate-500">Ende:</span>{" "}
|
|
{formatDate(loan.end_date)}
|
|
</div>
|
|
<div>
|
|
<span className="text-slate-500">Abgeholt:</span>{" "}
|
|
{formatDate(loan.take_date)}
|
|
</div>
|
|
<div>
|
|
<span className="text-slate-500">Zurück:</span>{" "}
|
|
{formatDate(loan.returned_date)}
|
|
</div>
|
|
</div>
|
|
<div className="mt-2 text-xs text-slate-700">
|
|
<span className="text-slate-500">Gegenstände:</span>{" "}
|
|
{Array.isArray(loan.loaned_items_name)
|
|
? loan.loaned_items_name.join(", ")
|
|
: "-"}
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => onDelete(loan.id)}
|
|
aria-label="Ausleihe löschen"
|
|
className="flex items-center justify-center rounded-md p-2 text-slate-600 hover:bg-red-50 hover:text-red-600 focus:outline-none focus:ring-2 focus:ring-red-500/30"
|
|
>
|
|
<TrashIcon className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Desktop: table */}
|
|
<div className="hidden sm:block rounded-xl border border-slate-200 bg-white shadow-sm">
|
|
<div className="overflow-x-auto">
|
|
<table className="table-auto min-w-full text-sm text-slate-700">
|
|
<thead className="sticky top-0 z-10 bg-slate-50">
|
|
<tr className="border-b border-slate-200">
|
|
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
|
|
Leihcode
|
|
</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
|
|
Start
|
|
</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
|
|
Ende
|
|
</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
|
|
Abgeholt
|
|
</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
|
|
Zurückgegeben
|
|
</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
|
|
Erstellt
|
|
</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
|
|
Gegenstände
|
|
</th>
|
|
<th className="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-600">
|
|
Aktionen
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100">
|
|
{userLoans.map((loan) => (
|
|
<tr key={loan.id} className="odd:bg-white even:bg-slate-50">
|
|
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-slate-900">
|
|
{loan.loan_code}
|
|
</td>
|
|
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-slate-900">
|
|
{formatDate(loan.start_date)}
|
|
</td>
|
|
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-slate-900">
|
|
{formatDate(loan.end_date)}
|
|
</td>
|
|
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-slate-900">
|
|
{formatDate(loan.take_date)}
|
|
</td>
|
|
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-slate-900">
|
|
{formatDate(loan.returned_date)}
|
|
</td>
|
|
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-slate-900">
|
|
{formatDate(loan.created_at)}
|
|
</td>
|
|
<td className="px-4 py-3 whitespace-nowrap">
|
|
<div className="text-slate-900">
|
|
{Array.isArray(loan.loaned_items_name)
|
|
? loan.loaned_items_name.join(", ")
|
|
: "-"}
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-3 text-right">
|
|
<button
|
|
onClick={() => onDelete(loan.id)}
|
|
aria-label="Ausleihe löschen"
|
|
className="inline-flex items-center rounded-md p-2 text-slate-600 hover:bg-red-50 hover:text-red-600 focus:outline-none focus:ring-2 focus:ring-red-500/30"
|
|
>
|
|
<TrashIcon className="h-4 w-4" />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Form4;
|