Add backend logic auto fill fulfilments when new degree added

backend/degree/views.py

@@ -134,6 +134,42 @@ def degrees(self, request, pk=None):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        # Handle updating fulfillments when a new degree is added to the degree plan.
+        def update_fulfillments():
+            rules_per_degree, rule_to_degree = map_rules_and_degrees(degree_plan)
+            # Helper to track satisfaction
+            satisfied_lookup = defaultdict(int)
+            satisfied_rules = set()
+
+            def is_satisfied(rule):
+                f = satisfied_lookup[rule.id]
+                return (rule.num and f >= rule.num) or (rule.credits and f >= rule.credits)
+
+            fulfillments = Fulfillment.objects.filter(degree_plan=degree_plan).order_by(
+                "semester", "full_code"
+            )
+
+            for fulfillment in fulfillments:
+                selected_rules, unselected_rules, legal = allocate_rules(
+                    fulfillment.full_code,
+                    rules_per_degree,
+                    rule_to_degree,
+                    degree_plan=degree_plan,
+                    satisfied_rules=satisfied_rules,
+                )
+
+                fulfillment.rules.set(selected_rules)
+                fulfillment.unselected_rules.set(unselected_rules)
+                fulfillment.legal = legal
+                fulfillment.save()
+
+                for rule in selected_rules:
+                    satisfied_lookup[rule.id] += 1
+                    if is_satisfied(rule):
+                        satisfied_rules.add(rule)
+
+        update_fulfillments()
+
         serializer = self.get_serializer(degree_plan)
         return Response(serializer.data, status=status.HTTP_200_OK)
 

frontend/degree-plan/components/FourYearPlan/DegreeModal.tsx

@@ -79,6 +79,10 @@ const ModalButton = styled.button`
   padding: 0.25rem 0.5rem;
   color: white;
   border: none;
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
 `;
 
 const ButtonRow = styled.div<{ $center?: boolean }>`
@@ -205,14 +209,21 @@ const ModalInterior = ({
 
   if (!modalKey && !modalObject) return <div></div>;
 
+  const [isAddingDegree, setIsAddingDegree] = useState(false);
   const add_degree = async (degreeplanId: number, degreeId: number) => {
-    // const { mutate } = useSWR(`/api/degree/degreeplans/${degreeplanId}/degrees`, getFetcher);
-    const updated = await postFetcher(
-      `/api/degree/degreeplans/${degreeplanId}/degrees`,
-      { degree_ids: [degreeId] }
-    );
-    await mutate(`/api/degree/degreeplans/${degreeplanId}`); // use updated degree plan returned
-    await mutate(`/api/degree/degreeplans/${degreeplanId}/fulfillments`);
+    setIsAddingDegree(true);
+    try {
+      const updated = await postFetcher(
+        `/api/degree/degreeplans/${degreeplanId}/degrees`,
+        { degree_ids: [degreeId] }
+      );
+      await mutate(`/api/degree/degreeplans/${degreeplanId}`); // use updated degree plan returned
+      await mutate(`/api/degree/degreeplans/${degreeplanId}/fulfillments`);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsAddingDegree(false);
+    }
   };
 
   const remove_degree = async (degreeplanId: number, degreeId: number) => {
@@ -334,13 +345,14 @@ const ModalInterior = ({
             </SelectList>
             <ButtonRow $center={true}>
               <ModalButton
-                onClick={() => {
+                disabled={isAddingDegree}
+                onClick={async () => {
                   if (!major?.value.id) return;
-                  add_degree((modalObject as Degree).id, major?.value.id);
+                  await add_degree((modalObject as Degree).id, major?.value.id);
                   close();
                 }}
               >
-                Add
+                {isAddingDegree ? "Adding..." : "Add"}
               </ModalButton>
             </ButtonRow>
           </DegreeAddInterior>

frontend/degree-plan/components/Infobox/ReviewPanel.tsx

@@ -96,7 +96,7 @@ interface ReviewPanelProps extends ReviewPanelContextType {
 
 const ReviewPanelWrapper = styled.div<{ $left?: number, $right?: number, $top?: number, $bottom?: number }>`
     position: absolute;
-    z-index: 100;
+    z-index: 1001;
     height: 35vh;
     width: 20rem;
     overflow: hidden;

frontend/degree-plan/components/OnboardingPanels/CreateWithTranscriptPanel.tsx

@@ -230,14 +230,16 @@ export default function CreateWithTranscriptPanel({
                 onChange={(e) => setName(e.target.value)}
                 placeholder=""
               />
-              <ErrorText
-                style={{
-                  color: "red",
-                  visibility: nameAlreadyExists ? "visible" : "hidden",
-                }}
-              >
-                A degree plan with this name already exists. Please choose a different name.
-              </ErrorText>
+              {nameAlreadyExists && (
+                <ErrorText
+                  style={{
+                    color: "red",
+                    visibility: nameAlreadyExists ? "visible" : "hidden",
+                  }}
+                  >
+                    A degree plan with this name already exists. Please choose a different name.
+                  </ErrorText>
+              )}
             </FieldWrapper>
 
             <FieldWrapper>