Merge pull request #477 from uw-it-aca/task/review-grades

refactor grade store

course_grader_vue/components/graderoster.vue

@@ -100,7 +100,10 @@
         <span v-else class="visually-hidden">
           All grades entered. Click Review button to continue.
         </span>
-        <button disabled="disabled">{{ gettext("btn_review_submit") }}</button>
+        <button
+          :disabled="reviewDisabled"
+          @click="reviewGrades"
+        >{{ gettext("btn_review_submit") }}</button>
       </div>
     </template>
   </BCard>
@@ -110,7 +113,7 @@
 import ConfirmationHeader from "@/components/graderoster/header/confirmation.vue";
 import Student from "@/components/graderoster/student.vue";
 import GradeImport from "@/components/gradeimport/import.vue";
-import { useGradeStatusStore } from "@/stores/grade";
+import { useGradeStore } from "@/stores/grade";
 import { updateGraderoster, submitGraderoster } from "@/utils/data";
 import { BButton, BCard, BLink, BPlaceholder } from "bootstrap-vue-next";
 
@@ -125,9 +128,9 @@ export default {
     BPlaceholder,
   },
   setup() {
-    const gradeStatusStore = useGradeStatusStore();
+    const gradeStore = useGradeStore();
     return {
-      gradeStatusStore,
+      gradeStore,
       updateGraderoster,
       submitGraderoster,
     };
@@ -166,8 +169,8 @@ export default {
     },
     gradesRemainingText() {
       var s = [],
-        missing = this.gradeStatusStore.missing,
-        invalid = this.gradeStatusStore.invalid;
+        missing = this.gradeStore.missing,
+        invalid = this.gradeStore.invalid;
 
       if (missing) {
         s.push((missing > 1) ? `${missing} grades missing` : "1 grade missing");
@@ -177,13 +180,34 @@ export default {
       }
       return s.join(", ");
     },
+    reviewDisabled() {
+      return this.gradeStore.missing || this.gradeStore.invalid;
+    },
   },
   methods: {
-    reviewGrades: function () {},
+    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.gradeStatusStore.$reset();
+    this.gradeStore.$reset();
   },
 };
 </script>

course_grader_vue/components/graderoster/grade/input.vue

@@ -112,7 +112,7 @@
 </template>
 
 <script>
-import { useGradeStatusStore } from "@/stores/grade";
+import { useGradeStore } from "@/stores/grade";
 import { updateGrade } from "@/utils/data";
 import { incompleteBlocklist, normalizeGrade } from "@/utils/grade";
 
@@ -128,9 +128,9 @@ export default {
     },
   },
   setup() {
-    const gradeStatusStore = useGradeStatusStore();
+    const gradeStore = useGradeStore();
     return {
-      gradeStatusStore,
+      gradeStore,
       updateGrade,
     };
   },
@@ -191,7 +191,6 @@ export default {
     incompleteChanged: function (checked) {
       this.incomplete = checked;
       this.updateGradeChoices();
-      this.updateGradeStatus();
       this.saveGrade();
     },
     writingChanged: function (checked) {
@@ -200,7 +199,6 @@ export default {
     },
     gradeChanged: function (value) {
       this.grade = normalizeGrade(value);
-      this.updateGradeStatus();
       this.saveGrade();
       this.menuOpen = false;
     },
@@ -226,19 +224,14 @@ export default {
       this.updateGradeStatus();
     },
     saveGrade: function () {
-      var put_data = {
-        student_id: this.student.student_id,
-        is_incomplete: this.incomplete,
-        is_writing: this.writing,
-        grade: this.grade,
-        no_grade_now: this.grade === gettext("x_no_grade_now"),
-      };
+      this.updateGradeStatus();
 
       // Prevent duplicate PATCH requests
       if (!this.inprogress_save) {
         this.inprogress_save = true;
 
-        this.updateGrade(this.student.grade_url, put_data)
+        this.updateGrade(this.student.grade_url,
+                         this.gradeStore.gradeData[this.student.student_id])
           .then((response) => {
             return response.data;
           })
@@ -258,10 +251,11 @@ export default {
       }
     },
     updateGradeStatus: function () {
-      this.gradeError = this.gradeStatusStore.validate(
+      this.gradeError = this.gradeStore.validate(
         this.student.student_id,
         this.grade,
         this.incomplete,
+        this.writing,
         this.actualChoices
       );
     },

course_grader_vue/stores/grade.js

@@ -1,15 +1,13 @@
 import { defineStore } from "pinia";
 import { validateGrade } from "@/utils/grade";
 
-export const useGradeStatusStore = defineStore({
-  id: "grade-status",
+export const useGradeStore = defineStore({
+  id: "grade",
   state: () => {
     return {
-      name: "GradeStatus",
-      gradeStatus: {
-        "missing": new Set(),
-        "invalid": new Set(),
-      },
+      name: "Grade",
+      gradeStatus: { "missing": new Set(), "invalid": new Set() },
+      gradeData: {},
     };
   },
   getters: {
@@ -19,19 +17,37 @@ export const useGradeStatusStore = defineStore({
     invalid (state) {
       return  this.gradeStatus.invalid.size;
     },
+    grades (state) {
+      var key, arr = [];
+      for (key in this.gradeData) {
+        if (this.gradeData.hasOwnProperty(key)) {
+          arr.push(this.gradeData[key]);
+        }
+      }
+      return arr;
+    },
   },
   actions: {
-    validate (id, grade, incomplete, choices) {
+    validate (studentId, grade, incomplete, writing, choices) {
       let error = validateGrade(grade, incomplete, choices);
 
-      this.gradeStatus.missing.delete(id);
-      this.gradeStatus.invalid.delete(id);
+      this.gradeStatus.missing.delete(studentId);
+      this.gradeStatus.invalid.delete(studentId);
 
       if (grade === "") {
-        this.gradeStatus.missing.add(id);
+        this.gradeStatus.missing.add(studentId);
       } else if (error !== "") {
-        this.gradeStatus.invalid.add(id);
+        this.gradeStatus.invalid.add(studentId);
       }
+
+      this.gradeData[studentId] = {
+        "student_id": studentId,
+        "grade": grade,
+        "is_incomplete": incomplete,
+        "is_writing": writing,
+        "no_grade_now": grade === gettext("x_no_grade_now"),
+      };
+
       return error;
     },
   },