From 1e2d661ef4f4f97f861a62dc51966bb4b2b2a55e Mon Sep 17 00:00:00 2001
From: Jim Laney <jlaney@uw.edu>
Date: Thu, 22 Aug 2024 16:10:33 -0700
Subject: [PATCH] refactor graderoster component

---
 course_grader_vue/components/graderoster.vue  | 213 ------------------
 .../graderoster/header/confirmation.vue       |   5 +
 course_grader_vue/pages/section.vue           | 204 +++++++++++++++--
 3 files changed, 194 insertions(+), 228 deletions(-)
 delete mode 100644 course_grader_vue/components/graderoster.vue

diff --git a/course_grader_vue/components/graderoster.vue b/course_grader_vue/components/graderoster.vue
deleted file mode 100644
index 0233695..0000000
--- a/course_grader_vue/components/graderoster.vue
+++ /dev/null
@@ -1,213 +0,0 @@
-<template>
-  <BCard class="shadow-sm rounded-3 my-4" header-class="p-3" header="Default">
-    <template #header>
-      <div class="">
-        <div v-if="studentsLoaded" class="fs-5 text-muted fw-light">
-          {{ graderosterTitle }}
-        </div>
-        <div v-else class="fs-5 text-muted fw-light">Loading...</div>
-        <span class="fs-2 m-0 me-3">
-          <BPlaceholder
-            v-if="!section.section_name"
-            class="bg-light-gray"
-            width="15"
-            animation="glow"
-          />{{ section.section_name }}
-        </span>
-        <span class="small"
-          >{{ gettext("sln") }}
-          <BPlaceholder
-            v-if="!section.section_sln"
-            class="bg-light-gray"
-            width="5"
-            animation="glow"
-          />{{ section.section_sln }}</span
-        >
-        <div style="float: right">
-          <BLink
-            href="https://itconnect.uw.edu/learn/tools/gradepage/assign-submit-grades/"
-            target="_blank"
-            title="Information on assigning and submitting grades"
-            >Info
-          </BLink>
-        </div>
-      </div>
-    </template>
-
-    <!-- Row zero contains information -->
-    <div v-if="reviewing">
-      {{ gettext("please_review_grades") }}
-    </div>
-    <div v-else-if="editing">
-      <span
-        v-if="graderoster.is_writing_section"
-        v-html="gettext('writing_course_note')"
-      />
-    </div>
-    <div v-else-if="studentsLoaded">
-      <ConfirmationHeader :section="section" :graderoster="graderoster" />
-    </div>
-
-    <div class="d-flex justify-content-between">
-      <div>
-        <template
-          v-if="graderoster.has_duplicate_codes"
-          class="mb-2 small text-muted"
-        >
-          {{ gettext("duplicate_code") }}
-          <i class="bi bi-circle-fill text-secondary"></i>
-        </template>
-      </div>
-      <div>
-        <GradeImport />
-      </div>
-    </div>
-
-    <!-- Student roster -->
-    <ul v-if="!graderoster.students" class="list-unstyled m-0">
-      <li v-for="index in 10" class="border-top pt-2 mt-2">
-        <BPlaceholder
-          class="d-block bg-light-gray"
-          style="height: 60px"
-          animation="glow"
-        />
-      </li>
-    </ul>
-    <ul v-else class="list-unstyled m-0">
-      <li
-        v-for="(student, index) in graderoster.students"
-        :key="student.item_id"
-        class="border-top pt-2 mt-2"
-      >
-        <Student
-          :student="student"
-          :gradeChoices="graderoster.grade_choices[student.grade_choices_index]"
-          :reviewing="reviewing"
-          :last="index === graderoster.students.length - 1"
-          v-model:studentsLoaded="studentsLoaded"
-        />
-      </li>
-    </ul>
-
-    <template #footer>
-      <div v-if="reviewing">
-        <span>{{ gettext("review_warning") }}</span>
-        <button>{{ gettext("btn_review_back") }}</button>
-        <button>{{ gettext("btn_submit_grades") }}</button>
-      </div>
-      <div v-else-if="editing">
-        <span v-if="gradesRemainingText">{{ gradesRemainingText }}</span>
-        <span v-else class="visually-hidden">
-          All grades entered. Click Review button to continue.
-        </span>
-        <button
-          :disabled="reviewDisabled"
-          @click="reviewGrades"
-        >{{ gettext("btn_review_submit") }}</button>
-      </div>
-    </template>
-  </BCard>
-</template>
-
-<script>
-import ConfirmationHeader from "@/components/graderoster/header/confirmation.vue";
-import Student from "@/components/graderoster/student.vue";
-import GradeImport from "@/components/gradeimport/import.vue";
-import { useGradeStore } from "@/stores/grade";
-import { updateGraderoster, submitGraderoster } from "@/utils/data";
-import { BButton, BCard, BLink, BPlaceholder } from "bootstrap-vue-next";
-
-export default {
-  components: {
-    ConfirmationHeader,
-    Student,
-    GradeImport,
-    BButton,
-    BCard,
-    BLink,
-    BPlaceholder,
-  },
-  setup() {
-    const gradeStore = useGradeStore();
-    return {
-      gradeStore,
-      updateGraderoster,
-      submitGraderoster,
-    };
-  },
-  props: {
-    section: {
-      type: Object,
-      required: true,
-    },
-    graderoster: {
-      type: Object,
-      required: true,
-    },
-    unsubmitted: {
-      type: Number,
-      required: true,
-      default: null,
-    },
-  },
-  data() {
-    return {
-      reviewing: false,
-      studentsLoaded: false,
-    };
-  },
-  computed: {
-    editing() {
-      return this.unsubmitted > 0;
-    },
-    graderosterTitle() {
-      return this.reviewing
-        ? gettext("review_submit_grades")
-        : this.unsubmitted
-        ? gettext("enter_grades")
-        : gettext("submitted_grades_for");
-    },
-    gradesRemainingText() {
-      var s = [],
-        missing = this.gradeStore.missing,
-        invalid = this.gradeStore.invalid;
-
-      if (missing) {
-        s.push((missing > 1) ? `${missing} grades missing` : "1 grade missing");
-      }
-      if (invalid) {
-        s.push((invalid > 1) ? `${invalid} grades invalid` : "1 grade invalid");
-      }
-      return s.join(", ");
-    },
-    reviewDisabled() {
-      return this.gradeStore.missing || this.gradeStore.invalid;
-    },
-  },
-  methods: {
-    reviewGrades: function () {
-      if (this.reviewDisabled) {
-        return;
-      }
-
-      this.updateGraderoster(this.section.graderoster_url,
-                             this.gradeStore.grades)
-        .then((response) => {
-          return response.data;
-        })
-        .then((data) => {
-          this.reviewing = true;
-          this.graderoster = data;
-        })
-        .catch((error) => {
-          console.log(error.message);
-          this.gradeError = error.message;
-        });
-    },
-    submitGrades: function () {},
-  },
-  created() {
-    this.gradeStore.$reset();
-  },
-};
-</script>
diff --git a/course_grader_vue/components/graderoster/header/confirmation.vue b/course_grader_vue/components/graderoster/header/confirmation.vue
index fa2df2c..e743290 100644
--- a/course_grader_vue/components/graderoster/header/confirmation.vue
+++ b/course_grader_vue/components/graderoster/header/confirmation.vue
@@ -85,5 +85,10 @@ export default {
       required: true,
     },
   },
+  setup() {
+    return {
+      formatLongDateTime,
+    };
+  },
 };
 </script>
diff --git a/course_grader_vue/pages/section.vue b/course_grader_vue/pages/section.vue
index 658374d..04debd8 100644
--- a/course_grader_vue/pages/section.vue
+++ b/course_grader_vue/pages/section.vue
@@ -6,44 +6,187 @@
         Back To {{ section.section_year }} {{ section.section_quarter }}
       </BLink>
 
-      <GradeRoster
-        v-if="graderoster"
-        :section="section"
-        :graderoster="graderoster"
-        :unsubmitted="unsubmitted"
-      ></GradeRoster>
-      <div v-else>Graderoster errors go here</div>
+      <BCard class="shadow-sm rounded-3 my-4" header-class="p-3" header="Default">
+        <template #header>
+          <div class="">
+            <div v-if="studentsLoaded" class="fs-5 text-muted fw-light">
+              {{ graderosterTitle }}
+            </div>
+            <div v-else class="fs-5 text-muted fw-light">Loading...</div>
+            <span class="fs-2 m-0 me-3">
+              <BPlaceholder
+                v-if="!section.section_name"
+                class="bg-light-gray"
+                width="15"
+                animation="glow"
+              />{{ section.section_name }}
+            </span>
+            <span class="small"
+              >{{ gettext("sln") }}
+              <BPlaceholder
+                v-if="!section.section_sln"
+                class="bg-light-gray"
+                width="5"
+                animation="glow"
+              />{{ section.section_sln }}</span
+            >
+            <div style="float: right">
+              <BLink
+                href="https://itconnect.uw.edu/learn/tools/gradepage/assign-submit-grades/"
+                target="_blank"
+                title="Information on assigning and submitting grades"
+                >Info
+              </BLink>
+            </div>
+          </div>
+        </template>
+
+        <!-- Row zero contains information -->
+        <div v-if="reviewing">
+          {{ gettext("please_review_grades") }}
+        </div>
+        <div v-else-if="studentsLoaded && editing">
+          <span
+            v-if="graderoster.is_writing_section"
+            v-html="gettext('writing_course_note')"
+          />
+          <div>
+            <GradeImport />
+          </div>
+        </div>
+        <div v-else>
+          <ConfirmationHeader :section="section" :graderoster="graderoster" />
+        </div>
+
+        <div>
+          <template
+            v-if="graderoster.has_duplicate_codes"
+            class="mb-2 small text-muted"
+          >
+            {{ gettext("duplicate_code") }}
+            <i class="bi bi-circle-fill text-secondary"></i>
+          </template>
+        </div>
+
+        <!-- Student roster -->
+        <ul v-if="!graderoster.students" class="list-unstyled m-0">
+          <li v-for="index in 10" class="border-top pt-2 mt-2">
+            <BPlaceholder
+              class="d-block bg-light-gray"
+              style="height: 60px"
+              animation="glow"
+            />
+          </li>
+        </ul>
+        <ul v-else class="list-unstyled m-0">
+          <li
+            v-for="(student, index) in graderoster.students"
+            :key="student.item_id"
+            class="border-top pt-2 mt-2"
+          >
+            <Student
+              :student="student"
+              :gradeChoices="graderoster.grade_choices[student.grade_choices_index]"
+              :reviewing="reviewing"
+              :last="index === graderoster.students.length - 1"
+              v-model:studentsLoaded="studentsLoaded"
+            />
+          </li>
+        </ul>
+
+        <template #footer>
+          <div v-if="reviewing">
+            <div>{{ gettext("review_warning") }}</div>
+            <button
+              @click="loadGraderoster">{{ gettext("btn_review_back") }}</button>
+            <button
+              @click="submitGrades">{{ gettext("btn_submit_grades") }}</button>
+          </div>
+          <div v-else-if="studentsLoaded && editing">
+            <span v-if="gradesRemainingText">{{ gradesRemainingText }}</span>
+            <span v-else class="visually-hidden">
+              All grades entered. Click Review button to continue.
+            </span>
+            <button
+              :disabled="reviewDisabled"
+              @click="reviewGrades"
+            >{{ gettext("btn_review_submit") }}</button>
+          </div>
+        </template>
+      </BCard>
     </template>
   </Layout>
 </template>
 
 <script>
 import Layout from "@/layouts/default.vue";
-import GradeRoster from "@/components/graderoster.vue";
-import { getSection, getGraderoster } from "@/utils/data";
-import { BLink } from "bootstrap-vue-next";
+import Student from "@/components/graderoster/student.vue";
+import GradeImport from "@/components/gradeimport/import.vue";
+import ConfirmationHeader from "@/components/graderoster/header/confirmation.vue";
+import { useGradeStore } from "@/stores/grade";
+import { getSection, getGraderoster, updateGraderoster, submitGraderoster } from "@/utils/data";
+import { BButton, BCard, BLink, BPlaceholder } from "bootstrap-vue-next";
 
 export default {
   components: {
     Layout,
-    GradeRoster,
-    BLink
+    Student,
+    GradeImport,
+    ConfirmationHeader,
+    BButton,
+    BCard,
+    BLink,
+    BPlaceholder
   },
   setup() {
+    const gradeStore = useGradeStore();
     return {
+      gradeStore,
       getSection,
       getGraderoster,
+      updateGraderoster,
+      submitGraderoster,
     };
   },
   data() {
     return {
+      studentsLoaded: false,
       isLoading: true,
       section: {},
       graderoster: {},
-      unsubmitted: 0,
+      reviewing: false,
       pageTitle: "Course Section",
     };
   },
+  computed: {
+    editing() {
+      return this.graderoster.students.filter(
+        s => s.grade_url !== null).length > 0;
+    },
+    graderosterTitle() {
+      return this.reviewing
+        ? gettext("review_submit_grades")
+        : this.editing
+        ? gettext("enter_grades")
+        : gettext("submitted_grades_for");
+    },
+    gradesRemainingText() {
+      var s = [],
+        missing = this.gradeStore.missing,
+        invalid = this.gradeStore.invalid;
+
+      if (missing) {
+        s.push((missing > 1) ? `${missing} grades missing` : "1 grade missing");
+      }
+      if (invalid) {
+        s.push((invalid > 1) ? `${invalid} grades invalid` : "1 grade invalid");
+      }
+      return s.join(", ");
+    },
+    reviewDisabled() {
+      return this.gradeStore.missing || this.gradeStore.invalid;
+    },
+  },
   methods: {
     loadGraderoster: function () {
       if (this.section.graderoster_url) {
@@ -52,9 +195,9 @@ export default {
             return response.data;
           })
           .then((data) => {
+            this.reviewing = false;
+            this.gradeStore.$reset();
             this.graderoster = data.graderoster;
-            this.unsubmitted = this.graderoster.students.filter(
-              s => s.grade_url !== null).length;
           })
           .catch((error) => {
             console.log(error.message);
@@ -66,6 +209,37 @@ export default {
         this.isLoading = false;
       }
     },
+    reviewGrades: function () {
+      this.updateGraderoster(this.section.graderoster_url,
+                             this.gradeStore.grades)
+        .then((response) => {
+          return response.data;
+        })
+        .then((data) => {
+          this.reviewing = true;
+          this.graderoster = data.graderoster;
+        })
+        .catch((error) => {
+          console.log(error.message);
+          this.gradeError = error.message;
+        });
+    },
+    submitGrades: function () {
+      if (this.reviewing) {
+        this.submitGraderoster(this.section.graderoster_url, {})
+          .then((response) => {
+            return response.data;
+          })
+          .then((data) => {
+            this.reviewing = true;
+            this.graderoster = data.graderoster;
+          })
+          .catch((error) => {
+            console.log(error.message);
+            this.gradeError = error.message;
+          });
+      }
+    },
     loadSection: function () {
       let section_id = this.$route.params.id;
       this.getSection("/api/v1/section/" + section_id)