feat: add possibility to delete courses

apps/frontend-manage/src/components/courses/CourseListButton.tsx

@@ -7,7 +7,6 @@ import { useTranslations } from 'next-intl'
 import { twMerge } from 'tailwind-merge'
 
 interface CourseListButtonProps {
-  key?: string
   onClick: () => void
   icon: IconDefinition
   label: string
@@ -22,7 +21,6 @@ interface CourseListButtonProps {
 }
 
 function CourseListButton({
-  key,
   onClick,
   icon,
   label,
@@ -36,7 +34,6 @@ function CourseListButton({
 
   return (
     <Button
-      key={key}
       className={{
         root: twMerge(
           'border-uzh-grey-100 flex w-full flex-row justify-between rounded-md border border-solid p-2',

apps/frontend-manage/src/components/courses/modals/CourseArchiveModal.tsx

@@ -10,13 +10,15 @@ interface CourseArchiveModalProps {
   open: boolean
   setOpen: (open: boolean) => void
   courseId: string | null
+  setSelectedCourseId: (courseId: string | null) => void
   isArchived: boolean
 }
 
 function CourseArchiveModal({
   open,
   setOpen,
   courseId,
+  setSelectedCourseId,
   isArchived,
 }: CourseArchiveModalProps) {
   const t = useTranslations()
@@ -32,7 +34,10 @@ function CourseArchiveModal({
   return (
     <Modal
       open={open}
-      onClose={() => setOpen(false)}
+      onClose={() => {
+        setOpen(false)
+        setSelectedCourseId(null)
+      }}
       className={{ content: 'h-max min-h-max max-w-[30rem]' }}
       title={
         isArchived
@@ -55,6 +60,7 @@ function CourseArchiveModal({
               },
             })
             setOpen(false)
+            setSelectedCourseId(null)
           }}
           className={{ root: 'bg-primary-100 text-white' }}
           data={{ cy: 'course-archive-modal-confirm' }}
@@ -64,7 +70,10 @@ function CourseArchiveModal({
       }
       onSecondaryAction={
         <Button
-          onClick={() => setOpen(false)}
+          onClick={() => {
+            setOpen(false)
+            setSelectedCourseId(null)
+          }}
           data={{ cy: 'course-archive-modal-cancel' }}
         >
           {t('shared.generic.close')}

apps/frontend-manage/src/components/courses/modals/CourseDeletionConfirmations.tsx

@@ -0,0 +1,140 @@
+import { UserNotification } from '@uzh-bf/design-system'
+import { useTranslations } from 'next-intl'
+import { Dispatch, SetStateAction } from 'react'
+import CourseDeletionItem from './CourseDeletionItem'
+import { CourseDeletionConfirmationType } from './CourseDeletionModal'
+
+interface CourseDeletionConfirmationsProps {
+  summary: {
+    numOfLiveQuizzes: number
+    numOfPracticeQuizzes: number
+    numOfMicroLearnings: number
+    numOfGroupActivities: number
+    numOfParticipantGroups: number
+    numOfLeaderboardEntries: number
+  }
+  confirmations: CourseDeletionConfirmationType
+  setConfirmations: Dispatch<SetStateAction<CourseDeletionConfirmationType>>
+}
+
+function CourseDeletionConfirmations({
+  summary,
+  confirmations,
+  setConfirmations,
+}: CourseDeletionConfirmationsProps) {
+  const t = useTranslations()
+
+  return (
+    <div className="flex flex-col gap-2">
+      <UserNotification
+        type="warning"
+        message={t('manage.courseList.courseDeletionMessage')}
+        className={{ root: 'mb-1 text-base' }}
+      />
+      <CourseDeletionItem
+        label={
+          summary.numOfLiveQuizzes === 0
+            ? t('manage.courseList.noLiveQuizzesDisconnected')
+            : t('manage.courseList.disconnectLiveQuizzes', {
+                number: summary.numOfLiveQuizzes,
+              })
+        }
+        onClick={() => {
+          setConfirmations((prev) => ({
+            ...prev,
+            disconnectLiveQuizzes: true,
+          }))
+        }}
+        confirmed={confirmations.disconnectLiveQuizzes}
+        data={{ cy: 'course-deletion-live-quiz-confirm' }}
+      />
+      <CourseDeletionItem
+        label={
+          summary.numOfPracticeQuizzes === 0
+            ? t('manage.courseList.noPracticeQuizzesToDelete')
+            : t('manage.courseList.deletePracticeQuizzes', {
+                number: summary.numOfPracticeQuizzes,
+              })
+        }
+        onClick={() => {
+          setConfirmations((prev) => ({
+            ...prev,
+            deletePracticeQuizzes: true,
+          }))
+        }}
+        confirmed={confirmations.deletePracticeQuizzes}
+        data={{ cy: 'course-deletion-practice-quiz-confirm' }}
+      />
+      <CourseDeletionItem
+        label={
+          summary.numOfMicroLearnings === 0
+            ? t('manage.courseList.noMicroLearningsToDelete')
+            : t('manage.courseList.deleteMicroLearnings', {
+                number: summary.numOfMicroLearnings,
+              })
+        }
+        onClick={() => {
+          setConfirmations((prev) => ({
+            ...prev,
+            deleteMicroLearnings: true,
+          }))
+        }}
+        confirmed={confirmations.deleteMicroLearnings}
+        data={{ cy: 'course-deletion-micro-learning-confirm' }}
+      />
+      <CourseDeletionItem
+        label={
+          summary.numOfGroupActivities === 0
+            ? t('manage.courseList.noGroupActivitiesToDelete')
+            : t('manage.courseList.deleteGroupActivities', {
+                number: summary.numOfGroupActivities,
+              })
+        }
+        onClick={() => {
+          setConfirmations((prev) => ({
+            ...prev,
+            deleteGroupActivities: true,
+          }))
+        }}
+        confirmed={confirmations.deleteGroupActivities}
+        data={{ cy: 'course-deletion-group-activity-confirm' }}
+      />
+      <CourseDeletionItem
+        label={
+          summary.numOfParticipantGroups === 0
+            ? t('manage.courseList.noParticipantGroupsToDelete')
+            : t('manage.courseList.deleteParticipantGroups', {
+                number: summary.numOfParticipantGroups,
+              })
+        }
+        onClick={() => {
+          setConfirmations((prev) => ({
+            ...prev,
+            deleteParticipantGroups: true,
+          }))
+        }}
+        confirmed={confirmations.deleteParticipantGroups}
+        data={{ cy: 'course-deletion-participant-group-confirm' }}
+      />
+      <CourseDeletionItem
+        label={
+          summary.numOfLeaderboardEntries === 0
+            ? t('manage.courseList.noLeaderboardEntriesToDelete')
+            : t('manage.courseList.deleteLeaderboardEntries', {
+                number: summary.numOfLeaderboardEntries,
+              })
+        }
+        onClick={() => {
+          setConfirmations((prev) => ({
+            ...prev,
+            deleteLeaderboardEntries: true,
+          }))
+        }}
+        confirmed={confirmations.deleteLeaderboardEntries}
+        data={{ cy: 'course-deletion-leaderboard-entry-confirm' }}
+      />
+    </div>
+  )
+}
+
+export default CourseDeletionConfirmations

apps/frontend-manage/src/components/courses/modals/CourseDeletionItem.tsx

@@ -0,0 +1,40 @@
+import { faCheck, faExclamationCircle } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { Button } from '@uzh-bf/design-system'
+import { useTranslations } from 'next-intl'
+
+function CourseDeletionItem({
+  label,
+  confirmed,
+  onClick,
+  data,
+}: {
+  label: string
+  confirmed: boolean
+  onClick: () => void
+  data?: { cy?: string; test?: string }
+}) {
+  const t = useTranslations()
+
+  return (
+    <div className="flex h-10 flex-row items-center justify-between border-b pb-2">
+      <div className="flex flex-row items-center gap-4">
+        <FontAwesomeIcon icon={faExclamationCircle} className="text-red-600" />
+        <div className="mr-4">{label}</div>
+      </div>
+      {confirmed ? (
+        <FontAwesomeIcon icon={faCheck} className="text-green-700" />
+      ) : (
+        <Button
+          onClick={onClick}
+          className={{ root: 'h-7 border-red-600' }}
+          data={data}
+        >
+          {t('shared.generic.confirm')}
+        </Button>
+      )}
+    </div>
+  )
+}
+
+export default CourseDeletionItem