Erledigte Termine ans Ende + blasser, neuer Tab 'Liste'
- Erledigte Einträge werden nicht mehr durchgestrichen, nur die Textfarbe wird blasser dargestellt - Erledigte Termine werden in der Liste hinter die offenen sortiert - Neuer Tab 'Liste' (Route /liste) mit einer read-only Übersicht aller Termine; TabLayout auf echte Tabs (Link/usePathname) umgestellt - AppointmentList: Handler optional, damit die Liste read-only nutzbar ist Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,45 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import TabLayout from '@/components/TabLayout';
|
||||
import AppointmentList from '@/components/AppointmentList';
|
||||
import { Appointment } from '@/types/appointment';
|
||||
|
||||
export default function ListePage() {
|
||||
const [appointments, setAppointments] = useState<Appointment[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
const fetchAppointments = async () => {
|
||||
try {
|
||||
const res = await fetch('/api/appointments', { cache: 'no-store' });
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
const data = await res.json();
|
||||
if (data.success) {
|
||||
setAppointments(data.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden der Termine:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Termine einmalig beim Mount laden.
|
||||
useEffect(() => {
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||
fetchAppointments();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<TabLayout>
|
||||
<div className="bg-white border border-black rounded-lg shadow-md p-6">
|
||||
<h2 className="text-xl font-semibold mb-4">Alle Termine</h2>
|
||||
{isLoading ? (
|
||||
<div className="text-center py-4">Lade Daten...</div>
|
||||
) : (
|
||||
<AppointmentList appointments={appointments} />
|
||||
)}
|
||||
</div>
|
||||
</TabLayout>
|
||||
);
|
||||
}
|
||||
@@ -4,9 +4,9 @@ import { Appointment } from '@/types/appointment';
|
||||
|
||||
interface AppointmentListProps {
|
||||
appointments: Appointment[];
|
||||
onToggleDone: (id: string) => void;
|
||||
onEdit: (appointment: Appointment) => void;
|
||||
onDelete: (id: string) => void;
|
||||
onToggleDone?: (id: string) => void;
|
||||
onEdit?: (appointment: Appointment) => void;
|
||||
onDelete?: (id: string) => void;
|
||||
}
|
||||
|
||||
const weekdays = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
|
||||
@@ -33,17 +33,22 @@ export default function AppointmentList({
|
||||
onEdit,
|
||||
onDelete,
|
||||
}: AppointmentListProps) {
|
||||
const hasActions = Boolean(onEdit || onDelete);
|
||||
|
||||
if (appointments.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
Keine Termine vorhanden. Fügen Sie oben einen neuen Termin hinzu!
|
||||
Keine Termine vorhanden.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const sorted = [...appointments].sort(
|
||||
(a, b) => new Date(a.termin).getTime() - new Date(b.termin).getTime()
|
||||
);
|
||||
// Erledigte Einträge hinter die offenen schieben; innerhalb der Gruppen
|
||||
// aufsteigend nach Termin sortieren.
|
||||
const sorted = [...appointments].sort((a, b) => {
|
||||
if (a.erledigt !== b.erledigt) return a.erledigt ? 1 : -1;
|
||||
return new Date(a.termin).getTime() - new Date(b.termin).getTime();
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto">
|
||||
@@ -57,17 +62,19 @@ export default function AppointmentList({
|
||||
<th className="p-2 text-center">Tag</th>
|
||||
<th className="p-2 text-center">Zeit</th>
|
||||
<th className="p-2 text-center">Bemerkungen</th>
|
||||
<th className="p-2 text-center">Aktion</th>
|
||||
{hasActions && <th className="p-2 text-center">Aktion</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{sorted.map((app, index) => (
|
||||
<tr
|
||||
key={app.id}
|
||||
onClick={() => onEdit(app)}
|
||||
className={`border-b border-gray-300 hover:bg-gray-100 cursor-pointer ${
|
||||
onClick={onEdit ? () => onEdit(app) : undefined}
|
||||
className={`border-b border-gray-300 hover:bg-gray-100 ${
|
||||
onEdit ? 'cursor-pointer' : ''
|
||||
} ${
|
||||
app.erledigt
|
||||
? 'bg-green-50 text-gray-400 line-through'
|
||||
? 'bg-green-50 text-gray-400'
|
||||
: index % 2 === 0
|
||||
? 'bg-white'
|
||||
: 'bg-gray-50'
|
||||
@@ -79,9 +86,12 @@ export default function AppointmentList({
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="w-4 h-4 cursor-pointer"
|
||||
className={`w-4 h-4 ${onToggleDone ? 'cursor-pointer' : ''}`}
|
||||
checked={app.erledigt}
|
||||
onChange={() => onToggleDone(app.id)}
|
||||
disabled={!onToggleDone}
|
||||
onChange={
|
||||
onToggleDone ? () => onToggleDone(app.id) : undefined
|
||||
}
|
||||
/>
|
||||
</td>
|
||||
<td className="p-2 text-center font-medium">{app.arztName}</td>
|
||||
@@ -90,25 +100,31 @@ export default function AppointmentList({
|
||||
<td className="p-2 text-center">{getWeekday(app.termin)}</td>
|
||||
<td className="p-2 text-center">{formatTime(app.termin)}</td>
|
||||
<td className="p-2 text-center">{app.bemerkungen || '-'}</td>
|
||||
<td
|
||||
className="p-2 text-center"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex gap-2 justify-center no-underline">
|
||||
<button
|
||||
onClick={() => onEdit(app)}
|
||||
className="text-blue-600 hover:text-blue-800 text-sm no-underline"
|
||||
>
|
||||
Editieren
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onDelete(app.id)}
|
||||
className="text-red-600 hover:text-red-800 text-sm no-underline"
|
||||
>
|
||||
Löschen
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
{hasActions && (
|
||||
<td
|
||||
className="p-2 text-center"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex gap-2 justify-center">
|
||||
{onEdit && (
|
||||
<button
|
||||
onClick={() => onEdit(app)}
|
||||
className="text-blue-600 hover:text-blue-800 text-sm"
|
||||
>
|
||||
Editieren
|
||||
</button>
|
||||
)}
|
||||
{onDelete && (
|
||||
<button
|
||||
onClick={() => onDelete(app.id)}
|
||||
className="text-red-600 hover:text-red-800 text-sm"
|
||||
>
|
||||
Löschen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
|
||||
+47
-22
@@ -1,5 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import packageJson from '@/package.json';
|
||||
|
||||
interface TabLayoutProps {
|
||||
@@ -7,7 +9,13 @@ interface TabLayoutProps {
|
||||
onPrint?: () => void;
|
||||
}
|
||||
|
||||
const TABS = [
|
||||
{ href: '/', label: 'Termine' },
|
||||
{ href: '/liste', label: 'Liste' },
|
||||
];
|
||||
|
||||
export default function TabLayout({ children, onPrint }: TabLayoutProps) {
|
||||
const pathname = usePathname();
|
||||
const version = packageJson.version;
|
||||
const buildDate =
|
||||
process.env.NEXT_PUBLIC_BUILD_DATE ||
|
||||
@@ -31,29 +39,46 @@ export default function TabLayout({ children, onPrint }: TabLayoutProps) {
|
||||
{/* Tab-Leiste */}
|
||||
<div className="flex justify-between items-end">
|
||||
<div className="flex">
|
||||
<span
|
||||
className="px-6 py-2 text-sm font-semibold border-t-2 border-l-2 border-r-2 rounded-tl-lg rounded-tr-lg mr-1"
|
||||
style={{
|
||||
backgroundColor: '#FFFFDD',
|
||||
color: '#000000',
|
||||
borderColor: '#000000',
|
||||
borderBottom: '2px solid #FFFFDD',
|
||||
marginBottom: '-2px',
|
||||
position: 'relative',
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
Termine
|
||||
</span>
|
||||
</div>
|
||||
<div className="pb-1">
|
||||
<button
|
||||
onClick={onPrint}
|
||||
className="px-4 py-2 bg-[#85B7D7] hover:bg-[#6a9fc5] text-black text-sm rounded-lg shadow-md transition-colors"
|
||||
>
|
||||
🖨️ Aktuelle Termine drucken
|
||||
</button>
|
||||
{TABS.map((tab) => {
|
||||
const isActive = pathname === tab.href;
|
||||
return (
|
||||
<Link
|
||||
key={tab.href}
|
||||
href={tab.href}
|
||||
className="px-6 py-2 text-sm font-semibold border-t-2 border-l-2 border-r-2 rounded-tl-lg rounded-tr-lg mr-1 transition-colors"
|
||||
style={
|
||||
isActive
|
||||
? {
|
||||
backgroundColor: '#FFFFDD',
|
||||
color: '#000000',
|
||||
borderColor: '#000000',
|
||||
borderBottom: '2px solid #FFFFDD',
|
||||
marginBottom: '-2px',
|
||||
position: 'relative',
|
||||
zIndex: 10,
|
||||
}
|
||||
: {
|
||||
backgroundColor: '#85B7D7',
|
||||
color: '#374151',
|
||||
borderColor: '#000000',
|
||||
}
|
||||
}
|
||||
>
|
||||
{tab.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{onPrint && (
|
||||
<div className="pb-1">
|
||||
<button
|
||||
onClick={onPrint}
|
||||
className="px-4 py-2 bg-[#85B7D7] hover:bg-[#6a9fc5] text-black text-sm rounded-lg shadow-md transition-colors"
|
||||
>
|
||||
🖨️ Aktuelle Termine drucken
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Inhaltsbereich */}
|
||||
|
||||
@@ -40,7 +40,7 @@ echo ""
|
||||
# 3. Docker Image bauen und pushen
|
||||
echo ">>> Baue Multiplatform Docker Image und pushe zu Registry..."
|
||||
docker buildx build \
|
||||
--platform linux/amd64,linux/arm64 \
|
||||
--platform linux/amd64 \
|
||||
--build-arg BUILD_DATE="${BUILD_DATE}" \
|
||||
-t "${FULL_IMAGE}" \
|
||||
--push \
|
||||
|
||||
Reference in New Issue
Block a user