soft delete sections

csm_web/frontend/src/components/coord_interface/CoordSectionDelete.tsx

@@ -1,55 +1,50 @@
 import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
 
-import { useCoordDeleteSectionMutation } from "../../utils/queries/coord";
-// import Modal from "../Modal";
-import XIcon from "../../../static/frontend/img/x.svg";
+import { useDeleteSectionMutation } from "../../utils/queries/sections";
+import Modal from "../Modal";
+import TrashIcon from "../../../static/frontend/img/trash-alt.svg";
 
-// import "../../css/student_dropper.scss";
+import "../../css/section_delete.scss";
 
 interface CoordSectionDeleteProps {
   sectionId: number;
 }
 
 export default function CoordSectionDelete({ sectionId }: CoordSectionDeleteProps) {
-  const [showDropPrompt, setShowDropPrompt] = useState(false);
-  const [drop, setDrop] = useState(false);
-  const [ban, setBan] = useState(false);
-  const [blacklist, setBlacklist] = useState(false);
-
-  /**
-   * Mutation to drop a student from the section. (Inspiration taken from dropping students within sections)
-   */
-  const coordSectionDeleteMutation = useCoordDeleteSectionMutation(sectionId);
-
-  function handleClickDrop() {
-    coordSectionDeleteMutation.mutate({ banned: ban, blacklisted: blacklist });
-    setShowDropPrompt(false);
+  const [showDeletePrompt, setShowDeletePrompt] = useState(false);
+  const [confirmed, setConfirmed] = useState(false);
+  const deleteSectionMutation = useDeleteSectionMutation(sectionId);
+  const navigate = useNavigate();
+
+  function handleDelete() {
+    deleteSectionMutation.mutate(undefined, {
+      onSuccess: () => navigate(-1)
+    });
   }
 
-  const dropDiv = (
-    <div>
-      <h2 className="student-dropper-head-item">DROP Student</h2>
-      <div className="student-dropper-checkbox-container">
-        <input type="checkbox" id="drop" name="drop" onChange={e => setDrop(e.target.checked)} />
-        <label className="student-dropper-checkbox-label" htmlFor="drop">
-          I would like to DELETE the section: {sectionId}.
-        </label>
-        <br></br>
-      </div>
-    </div>
-  );
-
   return (
-    //   <span className={`student-dropper ${showDropPrompt ? "ban-prompt-visible" : ""}`}>
-    //     <XIcon
-    //       className="icon inline-plus-sign"
-    //       title="Drop student from section"
-    //       onClick={() => setShowDropPrompt(true)}
-    //     />
-    //     <div>dropDiv</div>
-    <button className="danger-btn" onClick={handleClickDrop} disabled={!drop}>
-      Submit
-    </button>
-    //   </span>
+    <div className="section-delete">
+      <button className="danger-btn" onClick={() => setShowDeletePrompt(true)}>
+        <TrashIcon className="icon" aria-hidden="true" /> Delete section
+      </button>
+      {showDeletePrompt && (
+        <Modal className="section-delete-modal" closeModal={() => setShowDeletePrompt(false)}>
+          <h2>Delete section</h2>
+          <p>This section will be hidden, but its enrollment and attendance history will be preserved.</p>
+          <label className="section-delete-confirmation">
+            <input type="checkbox" checked={confirmed} onChange={event => setConfirmed(event.target.checked)} />I
+            understand and want to delete this section.
+          </label>
+          <button
+            className="danger-btn"
+            onClick={handleDelete}
+            disabled={!confirmed || deleteSectionMutation.isLoading}
+          >
+            {deleteSectionMutation.isLoading ? "Deleting…" : "Delete"}
+          </button>
+        </Modal>
+      )}
+    </div>
   );
 }

csm_web/frontend/src/components/section/MentorSectionInfo.tsx

@@ -8,6 +8,7 @@ import {
 } from "../../utils/queries/sections";
 import { Mentor, Spacetime, Student } from "../../utils/types";
 import LoadingSpinner from "../LoadingSpinner";
+import CoordSectionDelete from "../coord_interface/CoordSectionDelete";
 import { CoordinatorAddStudentModal } from "./CoordinatorAddStudentModal";
 import MetaEditModal from "./MetaEditModal";
 import { InfoCard, SectionSpacetime } from "./Section";
@@ -16,7 +17,7 @@ import SpacetimeEditModal from "./SpacetimeEditModal";
 import StudentDropper from "./StudentDropper";
 
 import PencilIcon from "../../../static/frontend/img/pencil.svg";
-import XIcon from "../../../static/frontend/img/x.svg";
+import TrashIcon from "../../../static/frontend/img/trash-alt.svg";
 
 import "../../css/coordinator-add-student.scss";
 
@@ -162,6 +163,7 @@ export default function MentorSectionInfo({
       <h3 className="section-detail-page-title">{`${
         isCoordinator ? `${mentor.name || mentor.email}'s` : "My"
       } Section`}</h3>
+      {isCoordinator && <CoordSectionDelete sectionId={sectionId} />}
       <div className="section-info-cards-container">
         <SectionInfo
           title="Enrolled Students"
@@ -203,7 +205,7 @@ export default function MentorSectionInfo({
                         setDeleteType(false);
                       }}
                     >
-                      <XIcon className="icon" /> Delete
+                      <TrashIcon className="icon" aria-hidden="true" /> Delete
                     </button>
                   ) : (
                     <div>{/* empty div for positioning */}</div>
@@ -230,7 +232,7 @@ export default function MentorSectionInfo({
                       setDeleteType(true);
                     }}
                   >
-                    <XIcon className="icon" /> Delete
+                    <TrashIcon className="icon" aria-hidden="true" /> Delete
                   </button>
                   <button
                     className="secondary-link-btn info-card-edit-btn"

csm_web/frontend/src/css/section_delete.scss

@@ -0,0 +1,19 @@
+.section-delete {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 1rem;
+}
+
+.section-delete-modal {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  align-items: center;
+  justify-content: center;
+}
+
+.section-delete-confirmation {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}

csm_web/frontend/src/utils/queries/coord.tsx

@@ -1,4 +1,4 @@
-import { useMutation, UseMutationResult, useQuery, useQueryClient, UseQueryResult } from "@tanstack/react-query";
+import { useMutation, UseMutationResult, useQueryClient } from "@tanstack/react-query";
 import { fetchNormalized, fetchWithMethod, HTTP_METHODS } from "../api";
 import { handleError, handleRetry, handlePermissionsError, PermissionError, ServerError } from "./helpers";
 
@@ -77,39 +77,3 @@ export const useCoordDropStudentMutation = (
   handleError(mutationResult);
   return mutationResult;
 };
-
-/**
- * Hook to delete a section though the coord interface.
- * Invalidates all queries associated with the section.
- * (insprition from /queries/sections.tsx, but there wasn't a delete section sooo)
- */
-
-export const useCoordDeleteSectionMutation = (
-  sectionId: number
-): UseMutationResult<void, ServerError, StudentDropMutationBody> => {
-  const queryClient = useQueryClient();
-  const mutationResult = useMutation<void, Error, StudentDropMutationBody>(
-    async (body: StudentDropMutationBody) => {
-      if (isNaN(sectionId)) {
-        throw new PermissionError("Invalid section id");
-      }
-      const response = await fetchWithMethod(`coord/${sectionId}/section`, HTTP_METHODS.PATCH, body); // changed this to match the path within urls.py
-      if (response.ok) {
-        return;
-      } else {
-        handlePermissionsError(response.status);
-        throw new ServerError(`Failed to delete section ${sectionId}`);
-      }
-    },
-    {
-      onSuccess: () => {
-        // invalidate all queries for the section
-        queryClient.invalidateQueries(["sections", sectionId]); // might still need this?
-      },
-      retry: handleRetry
-    }
-  );
-
-  handleError(mutationResult);
-  return mutationResult;
-};

csm_web/frontend/src/utils/queries/sections.tsx

@@ -355,6 +355,37 @@ export const useDropStudentMutation = (
   return mutationResult;
 };
 
+/**
+ * Soft-delete (archive) a section as a coordinator.
+ */
+export const useDeleteSectionMutation = (sectionId: number): UseMutationResult<void, ServerError, void, unknown> => {
+  const queryClient = useQueryClient();
+  const mutationResult = useMutation<void, ServerError, void, unknown>(
+    async () => {
+      if (isNaN(sectionId)) {
+        throw new PermissionError("Invalid section id");
+      }
+
+      const response = await fetchWithMethod(`coord/${sectionId}/section`, HTTP_METHODS.DELETE);
+      if (!response.ok) {
+        handlePermissionsError(response.status);
+        throw new ServerError(`Failed to delete section ${sectionId}`);
+      }
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(["sections", sectionId]);
+        queryClient.invalidateQueries(["courses"]);
+        queryClient.invalidateQueries(["profiles"]);
+      },
+      retry: handleRetry
+    }
+  );
+
+  handleError(mutationResult);
+  return mutationResult;
+};
+
 /**
  * Hook to drop the current user from their section.
  *

csm_web/scheduler/admin.py

@@ -566,14 +566,15 @@ class SectionAdmin(BasePermissionModelAdmin):
     autocomplete_fields = ("mentor",)
 
     actions = ("swap_mentors",)
-    list_filter = ("mentor__course", "spacetimes__day_of_week")
+    list_filter = ("active", "mentor__course", "spacetimes__day_of_week")
     list_display = (
         "id",
         "get_mentor",
         "get_course",
         "get_spacetimes",
         "description",
         "get_capacity",
+        "active",
     )
     search_fields = (
         "id",

csm_web/scheduler/migrations/0036_section_active.py

@@ -0,0 +1,19 @@
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        (
+            "scheduler",
+            "0035_course_max_waitlist_enroll_section_waitlist_capacity_and_more",
+        ),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="section",
+            name="active",
+            field=models.BooleanField(db_index=True, default=True),
+        ),
+    ]

csm_web/scheduler/models.py

@@ -406,6 +406,7 @@ class Meta:
 
 class Section(ValidatingModel):
     # course = models.ForeignKey(Course, on_delete=models.CASCADE)
+    active = models.BooleanField(default=True, db_index=True)
     capacity = models.PositiveSmallIntegerField()
     waitlist_capacity = models.PositiveSmallIntegerField(default=DEFAULT_WAITLIST_CAP)
     mentor = OneToOneOrNoneField(

csm_web/scheduler/views/coord.py

@@ -26,9 +26,9 @@ def view_students(request, pk=None):
             "You do not have permission to view the coordinator view."
         )
 
-    students = Student.objects.filter(active=True, course=pk).order_by(
-        "user__first_name"
-    )
+    students = Student.objects.filter(
+        active=True, section__active=True, course=pk
+    ).order_by("user__first_name")
 
     return Response(CoordStudentSerializer(students, many=True).data)
 
@@ -52,7 +52,9 @@ def view_mentors(request, pk=None):
             "You do not have permission to view the coordinator view."
         )
 
-    mentors = Mentor.objects.filter(course=pk).order_by("user__first_name")
+    mentors = Mentor.objects.filter(course=pk, section__active=True).order_by(
+        "user__first_name"
+    )
     return Response(CoordMentorSerializer(mentors, many=True).data)
 
 
@@ -62,9 +64,9 @@ def delete_section(request, pk):
     Endpoint: /coord/<section id: int>/section
     pk = section id
 
-    Delete a section and all associated spacetimes and overrides.
+    Archive a section while preserving its enrollment and attendance history.
     """
-    section = get_object_or_error(Section.objects, pk=pk)
+    section = get_object_or_error(Section.objects, pk=pk, active=True)
     is_coord = bool(
         section.mentor.course.coordinator_set.filter(user=request.user).count()
     )
@@ -73,6 +75,6 @@ def delete_section(request, pk):
             "You do not have permission to view the coordinator view."
         )
 
-    # Delete the section itself, will cascade and delete everything else
-    section.delete()
+    section.active = False
+    section.save(update_fields=["active"])
     return Response(status=204)