Merge pull request #11 from Since-3/feature/delete-course

added delete function for course

src/app/(main)/courses/myCourses/page.tsx

@@ -0,0 +1,5 @@
+const MyCourses = () => {
+  return <div>myCourses</div>;
+};
+
+export default MyCourses;

src/modules/courses/ui/components/CourseListItem.tsx

@@ -6,7 +6,7 @@
  * inklusive Teilnehmerzahl, Status und Bearbeitungsoption.
  */
 
-import { Pen } from "lucide-react";
+import { Pen, Trash2 } from "lucide-react";
 
 /**
  * Props für die CourseListItem Komponente
@@ -19,8 +19,10 @@ interface CourseListItemProps {
   maxParticipants: number; // Maximale Anzahl der Teilnehmer
   trainerName: string; // Name(n) des/der Trainer
   onEdit?: () => void; // Callback-Funktion beim Klick auf Bearbeiten-Button
+  onDelete?: () => void; // Callback-Funktion beim Klick auf Löschen-Button
   status?: string; // Status des Kurses ("draft" oder "published")
   isPast?: boolean; // Ob der Kurs in der Vergangenheit liegt
+  showDeleteIcon?: boolean; // Ob das Löschen-Icon angezeigt werden soll
 }
 
 /**
@@ -35,8 +37,10 @@ const CourseListItem: React.FC<CourseListItemProps> = ({
   maxParticipants,
   trainerName,
   onEdit,
+  onDelete,
   status,
   isPast,
+  showDeleteIcon,
 }) => {
   // Prüfen, ob der Kurs voll belegt ist (für visuelle Hervorhebung)
   const isFull = currentParticipants >= maxParticipants;
@@ -78,11 +82,18 @@ const CourseListItem: React.FC<CourseListItemProps> = ({
       </div>
       <div className="flex justify-between items-center pt-3 border-t border-gray-200">
         <p className="text-gray-700">{trainerName}</p>
-        {onEdit && (
-          <button onClick={onEdit} className="p-2 rounded-md hover:bg-gray-100 transition">
-            <Pen size={20} className="text-gray-700" />
-          </button>
-        )}
+        <div className="flex gap-2">
+          {showDeleteIcon && onDelete && (
+            <button onClick={onDelete} className="p-2 rounded-md hover:bg-red-100 transition">
+              <Trash2 size={20} className="text-red-600" />
+            </button>
+          )}
+          {onEdit && (
+            <button onClick={onEdit} className="p-2 rounded-md hover:bg-gray-100 transition">
+              <Pen size={20} className="text-gray-700" />
+            </button>
+          )}
+        </div>
       </div>
     </div>
   );

src/modules/courses/ui/views/course-list-view.tsx

@@ -36,6 +36,7 @@ const CourseListView = () => {
   const [showPastCourses, setShowPastCourses] = useState(false);
   const [dateFrom, setDateFrom] = useState("");
   const [dateTo, setDateTo] = useState("");
+  const [deleteMode, setDeleteMode] = useState(false);
 
   const loadCourses = async () => {
     const result = await getMyCourses();
@@ -161,7 +162,7 @@ const CourseListView = () => {
   return (
     <div>
       <div className="flex justify-between items-center mb-6">
-        <div className="flex w-full justify-end mr-2">
+        <div className="flex w-full justify-end mr-2 gap-2">
           <Button
             variant="outline"
             onClick={() => setShowFilters(!showFilters)}
@@ -170,6 +171,13 @@ const CourseListView = () => {
             <Filter size={18} />
             Filter
           </Button>
+          <Button
+            variant={deleteMode ? "destructive" : "outline"}
+            onClick={() => setDeleteMode(!deleteMode)}
+            className="flex items-center gap-2"
+          >
+            {deleteMode ? "Abbrechen" : "Kurs löschen"}
+          </Button>
         </div>
       </div>
 
@@ -314,6 +322,8 @@ const CourseListView = () => {
                       trainerName={getTrainerName(course.trainers)}
                       status={course.status}
                       isPast={isPastCourse(course.date)}
+                      showDeleteIcon={deleteMode}
+                      onDelete={() => handleDelete(course.id, course.name)}
                       onEdit={() => router.push(`/courses/edit/${course.id}`)}
                     />
                   ))}

src/modules/courses/ui/views/course-view.tsx

@@ -18,9 +18,6 @@ const CourseView = () => {
           >
             Kurs anlegen
           </Button>
-          <Button variant="outline" className="text-sm tracking-wide font-normal">
-            Kurs löschen
-          </Button>
         </div>
       </div>
       <CourseListView />

src/modules/dashboard/ui/components/DashboardSidebar.tsx

@@ -36,11 +36,17 @@ const allMenuItems = [
     href: "/dashboard",
     roles: ["manager", "user"],
   },
+  {
+    icon: Dumbbell,
+    label: "Meine Kurse",
+    href: "/courses/myCourses",
+    roles: ["user"],
+  },
   {
     icon: Dumbbell,
     label: "Kurse",
     href: "/courses",
-    roles: ["manager", "user"],
+    roles: ["manager"],
   },
   {
     icon: IdCardLanyard,