use i18n strings for text

course_grader/templates/index.html

@@ -20,6 +20,7 @@
       window.gradepage.messages = {{ messages|safe }};
       window.gradepage.message_level = "{{ message_level }}";
     </script>
+    <script type="text/javascript" src="{% url "javascript-catalog" %}"></script>
 
     <!-- vite css bundle -->
     {% vite_styles 'course_grader_vue/main.js' %}

course_grader_vue/components/graderoster.vue

@@ -29,18 +29,19 @@
     </template>
 
     <div v-if="reviewing">
-      Please review grades and submit below.
+      {{ gettext("please_review_grades") }}
     </div>
-    <div v-if="graderoster.is_writing_section">
-      <span v-if="editing">
-        <strong>Note:</strong> Writing credit automatically given to all students with a passing grade in this course.
-      </span>
-      <span v-else>
-        Writing credit automatically given to all students with a passing grade in this course.
+    <div v-else-if="editing">
+      <span v-if="graderoster.is_writing_section">
+        {{ gettext("writing_course_note") }}
       </span>
     </div>
+    <div v-else>
+      <Confirmation :graderoster="graderoster"></Confirmation>
+    </div>
+
     <div v-if="graderoster.has_duplicate_codes" class="mb-2 small text-muted">
-      Duplicate Code <i class="bi bi-circle-fill text-secondary"></i>
+      {{ gettext("duplicate_code") }} <i class="bi bi-circle-fill text-secondary"></i>
     </div>
 
     <ul v-if="!graderoster.students" class="list-unstyled m-0">
@@ -63,15 +64,15 @@
     </ul>
 
     <template v-if="reviewing">
-      <div>
-        All grades will be submitted to the Registrar as displayed above.
-        No further online changes will be possible after submission.
-      </div>
+      <div>{{ gettext("review_warning") }}</div>
       <button>Back</button> <button>Review</button>
     </template>
     <template v-else-if="editing">
       <div class="border-top pt-2 mt-2">
-        <span>{{ gradesRemaining }} grades remaining</span>
+        <span v-if="gradesRemainingText">{{ gradesRemainingText }}</span>
+        <span v-else class="visually-hidden">
+          All grades entered. Click Review button to continue.
+        </span>
         <button disabled="disabled">Submit grades</button>
       </div>
     </template>
@@ -80,12 +81,14 @@
 </template>
 
 <script>
+import Confirmation from "@/components/graderoster/confirmation.vue";
 import Student from "@/components/graderoster/student.vue";
 import { BPlaceholder } from "bootstrap-vue-next";
 import { updateGraderoster, submitGraderoster } from "@/utils/data";
 
 export default {
   components: {
+    Confirmation,
     Student,
   },
   setup() {
@@ -111,6 +114,9 @@ export default {
   },
   data() {
     return {
+      incomplete_blocklist: [gettext("x_no_grade_now"), "N", "CR"],
+      missing_grades: 0,
+      invalid_grades: 0,
       reviewing: false,
     };
   },
@@ -119,10 +125,22 @@ export default {
       return this.unsubmitted > 0;
     },
     graderosterTitle() {
-      return (this.unsubmitted) ? "Enter grades for" : "Grade Receipt for";
+      return (this.unsubmitted)
+        ? gettext("enter_grades") : gettext("submitted_grades_for");
     },
-    gradesRemaining() {
-      return this.unsubmitted;  // TODO: calculate empty inputs
+    gradesRemainingText() {
+      var s = [];
+      if (this.missing_grades) {
+        s.push(ngettext("%(missing_grades)s grade missing",
+                        "%(missing_grades)s grades missing",
+                        missing_grades));
+      }
+      if (this.invalid_grades) {
+        s.push(ngettext("%(invalid_grades)s grade invalid",
+                        "%(invalid_grades)s grades invalid",
+                        invalid_grades));
+      }
+      return s.join(", ");
     },
   },
   methods: {

course_grader_vue/components/graderoster/confirmation.vue

@@ -0,0 +1,75 @@
+<template>
+  <div v-if="graderoster.is_submission_confirmation">
+    <div v-if="graderoster.has_failed_submissions">
+      <div v-if="graderoster.has_successful_submissions"
+        class="alert alert-warning" role="status">
+        <span class=""><i class="fas fa-exclamation-circle"></i>
+          {{ ngettext("Grades submitted, but one grade had an error.",
+                      "Grades submitted, but %(failed_submission_count)s grades had errors.",
+                      graderoster.failed_submission_count) }}
+        </span>
+      </div>
+      <div v-else class="alert alert-danger" role="status">
+        <span class=""><i class="fas fa-times-circle"></i>
+          {{ ngettext("Grade submitted with error.",
+                      "Grades submitted with errors.",
+                      graderoster.failed_submission_count) }}
+        </span>
+      </div>
+    </div>
+    <div v-else class="alert alert-success" role="status">
+      <span class=""><i class="fas fa-check-circle"></i>
+        {{ gettext("grade_submission_successful") }}
+      </span>
+    </div>
+  </div>
+  <div v-else-if="graderoster.has_inprogress_submissions"
+    class="alert alert-info" role="status">
+    <span><i class="fas fa-refresh"></i>
+      {{ gettext("grade_submission_inprogress") }}</span>
+      <p>{{ gettext("in_progress_submission_email") }}</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>
+      <span v-if="submission.section_id">
+        {{ gettext("section") }} {{ submission.section_id }}:
+      </span>
+      <strong>{{ submission.submitted_count }}</strong>
+      {{ gettext("grades_submitted_to_registrar_by") }}
+      <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>
+  </div>
+
+  <div v-if="graderoster.is_writing_section">
+    <span><i class="fas fa-check-circle" style="color:#63AD45;"></i>
+      {{ gettext("writing_course_note_receipt") }}
+    </span>
+  </div>
+
+  <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>
+  </div>
+</template>
+
+<script>
+import { formatLongDateTime } from "@/utils/dates";
+
+export default {
+  props: {
+    graderoster: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>

course_grader_vue/components/graderoster/grade/input.vue

@@ -115,7 +115,7 @@
   </div>
 
   <div :id="`status-${student.item_id}`">
-    <span v-if="import_source" class="imported-grade">{{ student.import_source }} grade: {{ student.import_grade }}
+    <span v-if="student.import_source" class="imported-grade">{{ student.import_source }} grade: {{ student.import_grade }}
       <span v-if="is_override_grade" class="override-icon" title="Override grade imported from Canvas Gradebook"><i class="fas fa-circle fa-stack-2x" title="Override grade imported from Canvas Gradebook" aria-hidden="true"></i>
       </span>
     </span>

course_grader_vue/components/graderoster/grade/static.vue

@@ -1,34 +1,36 @@
 <template>
   <template v-if="student.is_auditor">
-    <span class="text-uppercase fs-5 fw-bold">Auditor</span>
+    <span class="text-uppercase fs-5 fw-bold">{{ gettext("auditor") }}</span>
   </template>
   <template v-else-if="student.is_withdrawn">
-    <div class="text-uppercase fs-5 fw-bold">Withdrawn</div>
-    <div v-if="student.withdrawn_week"> Week {{ student.withdrawn_week }}</div>
+    <div class="text-uppercase fs-5 fw-bold">
+      <span v-if="student.withdrawn_week">{{ interpolate(gettext("withdrawn_week %(withdrawn_week)s"), student, true) }}</span>
+      <span v-else>{{ gettext("withdrawn") }}</span>
+    </div>
   </template>
   <template v-else>
     <span v-if="student.has_writing_credit" class="me-2"><abbr title="Writing credit">W</abbr></span>
     <template v-if="student.has_incomplete">
-      <span class="visually-hidden">Submitted grade:</span>
+      <span class="visually-hidden">{{ gettext("submitted_grade") }}:</span>
       <span class="fs-2 fw-bold">I</span>
       <div class="small text-muted">(Incomplete) Default: {{ student.grade }}</div>
     </template>
     <template v-else>
       <template v-if="student.no_grade_now">
-        <span class="visually-hidden">Submitted grade:</span>
+        <span class="visually-hidden">{{ gettext("submitted_grade") }}:</span>
         <span class="fs-2 fw-bold">X</span>
-        <div class="small text-muted">(No grade now)</div>
+        <div class="small text-muted">{{ gettext("no_grade_now") }}</div>
       </template>
       <template v-else>
-        <span class="visually-hidden">Submitted grade:</span>
+        <span class="visually-hidden">{{ gettext("submitted_grade") }}:</span>
         <span class="fs-2 fw-bold">{{ student.grade }}</span>
       </template>
     </template>
     <div v-if="student.date_graded" class="small text-muted">
-      Submitted {{ student.date_graded }}
+      {{ interpolate(gettext("grade_submitted %(date_graded)s"), student, true) }}
     </div>
     <div v-if="student.grade_status" class="small text-muted">
-      Submitted with error: {{ student.grade_status }}
+      {{ interpolate(gettext("grade_submitted_status %(grade_status)s"), student, true) }}
     </div>
   </template>
 </template>

course_grader_vue/main.js

@@ -21,6 +21,9 @@ import "solstice-vue/dist/solstice.scss";
 const app = createApp(App);
 app.config.productionTip = false;
 app.config.globalProperties.window = window
+app.config.globalProperties.gettext = window.gettext;
+app.config.globalProperties.ngettext = window.ngettext;
+app.config.globalProperties.interpolate = window.interpolate;
 
 // vue-gtag-next
 const gaCode = document.body.getAttribute("data-google-analytics");

course_grader_vue/utils/grading-status.js

@@ -11,36 +11,41 @@ function formatLinkTitle(data) {
 }
 
 function formatGradingStatus(data) {
+  var base;
   if (data.grading_status) {
     return data.grading_status;
   } else if (data.unsubmitted_count && data.grading_period_open) {
-    return (data.unsubmitted_count > 1)
-      ? data.unsubmitted_count + " grades to submit"
-      : "1 grade to submit";
+      base = ngettext("%(unsubmitted_count)s grade to submit",
+                      "%(unsubmitted_count)s grades to submit",
+                      data.unsubmitted_count);
   } else {
     if (data.submitted_count) {
       if (data.submitted_date) {
         if (data.accepted_date) {
           let submitted_date_str = formatLongDateTime(data.submitted_date);
-          return (data.submitted_count > 1)
-            ? data.submitted_count + " grades submitted on " + submitted_date_str
-            : "1 grade submitted on " + submitted_date_str;
+          base = ngettext("%(submitted_count)s grade submitted on ",
+                          "%(submitted_count)s grades submitted on ",
+                          data.submitted_count) + submitted_date_str;
         } else {
-          return (data.submitted_count > 1)
-            ? data.submitted_count + " grade submissions in progress"
-            : "1 grade submission in progress";
+          base = ngettext("%(submitted_count)s grade submission in progress",
+                          "%(submitted_count)s grade submissions in progress",
+                          data.submitted_count);
         }
       } else {
-        return (data.submitted_count > 1)
-          ? data.submitted_count + " grades submitted"
-          : "1 grade submitted";
+        base = ngettext("%(submitted_count)s grade submitted",
+                        "%(submitted_count)s grades submitted",
+                        data.submitted_count);
       }
     } else {
       if (!data.grading_period_open) {
-        return "No submission information";
+        return gettext("no_submission_information");
       }
     }
   }
+
+  if (base !== undefined) {
+    return interpolate(base, data, true);
+  }
 }
 
 export {