Merge pull request #459 from uw-it-aca/task/graderoster-loading

add loading indicator for graderoster students

course_grader_vue/components/graderoster.vue

@@ -7,7 +7,8 @@
   >
     <template #header>
       <div class="">
-        <div class="fs-5 text-muted fw-light">{{ graderosterTitle }}</div>
+        <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"
@@ -25,19 +26,27 @@
             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">
+            <span>Info</span>
+          </BLink>
+        </div>
       </div>
     </template>
 
     <div v-if="reviewing">
       {{ gettext("please_review_grades") }}
     </div>
     <div v-else-if="editing">
-      <span v-if="graderoster.is_writing_section">
-        {{ gettext("writing_course_note") }}
-      </span>
+      <span
+        v-if="graderoster.is_writing_section"
+        v-html="gettext('writing_course_note')" />
     </div>
     <div v-else>
-      <Confirmation :graderoster="graderoster"></Confirmation>
+      <ConfirmationHeader :section="section" :graderoster="graderoster"></ConfirmationHeader>
     </div>
 
     <div v-if="graderoster.has_duplicate_codes" class="mb-2 small text-muted">
@@ -55,11 +64,15 @@
     </ul>
     <ul v-else class="list-unstyled m-0">
       <li
-        v-for="student in graderoster.students"
+        v-for="(student, index) in graderoster.students"
         :key="student.item_id"
         class="border-top pt-2 mt-2"
       >
-        <Student :student="student" :reviewing="reviewing"></Student>
+        <Student
+          :student="student"
+          :reviewing="reviewing"
+          :last="index === graderoster.students.length - 1"
+          v-model:studentsLoaded="studentsLoaded"></Student>
       </li>
     </ul>
 
@@ -81,14 +94,14 @@
 </template>
 
 <script>
-import Confirmation from "@/components/graderoster/confirmation.vue";
+import ConfirmationHeader from "@/components/graderoster/header/confirmation.vue";
 import Student from "@/components/graderoster/student.vue";
 import { updateGraderoster, submitGraderoster } from "@/utils/data";
 import { BCard, BPlaceholder } from "bootstrap-vue-next";
 
 export default {
   components: {
-    Confirmation,
+    ConfirmationHeader,
     Student,
     BCard,
     BPlaceholder
@@ -111,36 +124,37 @@ export default {
     unsubmitted: {
       type: Number,
       required: true,
-      default: 0,
+      default: null,
     },
   },
   data() {
     return {
-      incomplete_blocklist: [gettext("x_no_grade_now"), "N", "CR"],
-      missing_grades: 0,
-      invalid_grades: 0,
+      incompleteBlocklist: [gettext("x_no_grade_now"), "N", "CR"],
+      missingGrades: 0,
+      invalidGrades: 0,
       reviewing: false,
+      studentsLoaded: false,
     };
   },
   computed: {
     editing() {
       return this.unsubmitted > 0;
     },
     graderosterTitle() {
-      return (this.unsubmitted)
+      return (this.reviewing) ? gettext("review_submit_grades") : (this.unsubmitted)
         ? gettext("enter_grades") : gettext("submitted_grades_for");
     },
     gradesRemainingText() {
       var s = [];
-      if (this.missing_grades) {
+      if (this.missingGrades) {
         s.push(ngettext("%(missing_grades)s grade missing",
                         "%(missing_grades)s grades missing",
-                        missing_grades));
+                        {missing_grades: this.missingGrades}));
       }
-      if (this.invalid_grades) {
+      if (this.invalidGrades) {
         s.push(ngettext("%(invalid_grades)s grade invalid",
                         "%(invalid_grades)s grades invalid",
-                        invalid_grades));
+                        {invalid_grades: this.invalidGrades}));
       }
       return s.join(", ");
     },

course_grader_vue/components/graderoster/grade/input.vue

@@ -158,6 +158,24 @@ export default {
     },
   },
   methods: {
+    normalizeGrade: function (grade) {
+      grade = grade.trim();
+      if (grade.match(/^(?:n|nc|p|h|hw|f|hp|i|cr)$/i)) {
+        grade = grade.toUpperCase();
+      } else if (grade.match(/^x/i)) {
+        grade = gettext("x_no_grade_now");
+      } else {
+        grade = grade.replace(/^([0-4])?\.([0-9])0+$/, "$1.$2");
+        grade = grade.replace(/^\.([0-9])$/, "0.$1");
+        grade = grade.replace(/^([0-4])\.?$/, "$1.0");
+      }
+      return grade;
+    },
+    validateGrade: function () {
+      var is_incomplete, is_valid, is_hypenated, is_cnc, is_hhppf,
+            is_undergrad_numeric, is_grad_numeric, text;
+
+    },
     saveGrade: function () {
     },
   },

course_grader_vue/components/graderoster/confirmation.vue → course_grader_vue/components/graderoster/header/confirmation.vue

@@ -28,12 +28,13 @@
     <span><i class="fas fa-refresh"></i>
       {{ gettext("grade_submission_inprogress") }}</span>
       <p>{{ gettext("in_progress_submission_email") }}</p>
+      <p>{{ gettext("more_grades_to_submit") }}
+        <BLink :href="section.term_url">
+          {{ gettext("return_classes_to_grade") }}
+        </BLink>
+      </p>
   </div>
 
-  <p>{{ gettext("more_grades_to_submit") }}
-    <a href="/">{{ gettext("return_classes_to_grade") }}</a>
-  </p>
-
   <div v-for="submission in graderoster.submissions" role="status">
     <span>
       <i class="fas fa-check-circle" style="color:#63AD45;"></i>
@@ -45,7 +46,12 @@
       <strong>{{ submission.submitted_by}}</strong>
       on {{ formatLongDateTime(submission.submitted_date) }}.
     </span>
-    <a title="Change submitted grades" target="_blank" href="https://itconnect.uw.edu/learn/tools/gradepage/change-submitted-grades/">Change submitted grades?</a>
+
+    <BLink
+      href="https://itconnect.uw.edu/learn/tools/gradepage/change-submitted-grades/"
+      target="_blank"
+      title="Change submitted grades">Change submitted grades?
+    </BLink>
   </div>
 
   <div v-if="graderoster.is_writing_section">
@@ -57,7 +63,11 @@
   <div v-if="!graderoster.is_submission_confirmation">
     <i class="fas fa-exclamation-circle" style="color:#EBDD5A;"></i>
     {{ gettext("confirmation_alert_warning") }}
-    <a href="https://registrar.washington.edu/staffandfaculty/grading-resources/#faqs" target="_blank" class="hidden-print">More info.</a>
+    <BLink
+      href="https://registrar.washington.edu/staffandfaculty/grading-resources/#faqs"
+      target="_blank"
+      class="hidden-print">More info.
+    </BLink>
   </div>
 </template>
 
@@ -66,6 +76,10 @@ import { formatLongDateTime } from "@/utils/dates";
 
 export default {
   props: {
+    section: {
+      type: Object,
+      required: true,
+    },
     graderoster: {
       type: Object,
       required: true,

course_grader_vue/components/graderoster/student.vue

@@ -45,6 +45,21 @@ export default {
       required: true,
       default: false,
     },
+    last: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      studentsLoaded: false,
+    };
+  },
+  mounted() {
+    if (this.last) {
+      // Let the parent know we are loaded
+      this.$emit('update:studentsLoaded', true);
+    }
   },
 };
 </script>