From 85919e238389a0995e10c5d9c95c52ce80eb811a Mon Sep 17 00:00:00 2001
From: Jim Laney <jlaney@uw.edu>
Date: Sat, 26 Oct 2024 11:57:42 -0700
Subject: [PATCH 1/3] fix lifecycle for import modal

---
 .../components/import/canvas.vue              | 44 ++++++++--------
 .../components/import/convert-options.vue     | 15 +++---
 .../components/import/source-options.vue      | 50 ++++++++++---------
 .../components/import/upload.vue              | 23 +++++----
 course_grader_vue/stores/state.js             |  3 ++
 5 files changed, 73 insertions(+), 62 deletions(-)

diff --git a/course_grader_vue/components/import/canvas.vue b/course_grader_vue/components/import/canvas.vue
index 7e57b02..a7e0fb5 100644
--- a/course_grader_vue/components/import/canvas.vue
+++ b/course_grader_vue/components/import/canvas.vue
@@ -6,32 +6,32 @@
     <i class="fas fa-exclamation-circle"></i>
     <strong>{{ errorResponse.data.error }}</strong>
   </div>
-  <div v-else>
-    <div v-if="gradeImport.status_code != 200">
-      There was an error importing grades from Canvas ({{ gradeImport.status_code }}).
+  <div v-else-if="appState.gradeImport">
+    <div v-if="appState.gradeImport.status_code != 200">
+      There was an error importing grades from Canvas ({{ appState.gradeImport.status_code }}).
     </div>
-    <div v-else="gradeImport.grade_count">
-      <p v-if="gradeImport.grade_count === 1">
+    <div v-else="appState.gradeImport.grade_count">
+      <p v-if="appState.gradeImport.grade_count === 1">
         One grade found for <strong>{{ section.section_name }}</strong> in
-        <strong>{{ gradeImport.source_name }}</strong>.
+        <strong>{{ appState.gradeImport.source_name }}</strong>.
       </p>
       <p v-else>
-        {{ gradeImport.grade_count }} total grades found for
+        {{ appState.gradeImport.grade_count }} total grades found for
         <strong>{{ section.section_name }}</strong> in
-        <strong>{{ gradeImport.source_name }}</strong>.
+        <strong>{{ appState.gradeImport.source_name }}</strong>.
       </p>
 
-      <div v-if="gradeImport.override_grade_count" role="alert" class="alert alert-warning">
+      <div v-if="appState.gradeImport.override_grade_count" role="alert" class="alert alert-warning">
         <span class="fa-stack">
           <i class="fas fa-circle fa-stack-2x" aria-hidden="true"></i>
           <i class="fas fa-marker fa-flip-horizontal fa-stack-1x fa-inverse" aria-hidden="true"></i>
         </span>
-        <p v-if="gradeImport.override_grade_count === 1">
+        <p v-if="appState.gradeImport.override_grade_count === 1">
           You have one final grade override in this Canvas Grade Import.
           This grade WILL BE included in the imported grades.
         </p>
         <p v-else>
-          You have <strong>{{ gradeImport.override_grade_count }} final grade overrides</strong>
+          You have <strong>{{ appState.gradeImport.override_grade_count }} final grade overrides</strong>
           in this Canvas Grade Import.
           These grades WILL BE included in the imported grades.
           <BLink
@@ -42,16 +42,16 @@
         </p>
       </div>
 
-      <div v-if="gradeImport.unposted_grade_count" role="alert" class="alert alert-danger">
+      <div v-if="appState.gradeImport.unposted_grade_count" role="alert" class="alert alert-danger">
         <span class="gp-unposted-grade-icon">
           <i class="fas fa-exclamation-circle fa-2x" aria-hidden="true"></i>
         </span>
-        <p v-if="gradeImport.unposted_grade_count === 1">
+        <p v-if="appState.gradeImport.unposted_grade_count === 1">
           You have <strong>one student with unposted grades</strong>
           in this Canvas Grade Import.
         </p>
         <p v-else>
-          You have <strong>{{ gradeImport.unposted_grade_count }} students
+          You have <strong>{{ appState.gradeImport.unposted_grade_count }} students
           with unposted grades</strong> in this Canvas Grade Import.
         </p>
         Unposted grades <strong>ARE NOT</strong> represented in the imported final grade.
@@ -62,17 +62,18 @@
         </BLink>.
       </div>
 
-      <ImportConvertSave :section="section" :grade-import="gradeImport" />
+      <ImportConvertSave :section="section" />
 
     </div>
   </div>
 </template>
 
 <script>
-import { useGradeStore } from "@/stores/grade";
-import { createImport } from "@/utils/data";
 import ImportConvertSave from "@/components/import/convert-options.vue";
 import { BLink } from "bootstrap-vue-next";
+import { useWorkflowStateStore } from "@/stores/state";
+import { useGradeStore } from "@/stores/grade";
+import { createImport } from "@/utils/data";
 import { watch } from "vue";
 
 export default {
@@ -96,8 +97,10 @@ export default {
     },
   },
   setup() {
+    const appState = useWorkflowStateStore();
     const gradeStore = useGradeStore();
     return {
+      appState,
       gradeStore,
       createImport,
     };
@@ -105,7 +108,6 @@ export default {
   data() {
     return {
       importSource: "canvas",
-      gradeImport: null,
       errorResponse: null,
       isLoading: true,
     };
@@ -118,11 +120,12 @@ export default {
         })
         .then((data) => {
           this.errorResponse = null;
-          this.gradeImport = this.gradeStore.processImport(data.grade_import);
+          let gradeImport = this.gradeStore.processImport(data.grade_import);
+          this.appState.setGradeImport(gradeImport);
         })
         .catch((error) => {
+          this.appState.resetGradeImport();
           this.errorResponse = error.response;
-          this.gradeImport = null;
         })
         .finally(() => {
           this.isLoading = false;
@@ -131,6 +134,7 @@ export default {
   },
   mounted() {
     watch(() => this.modalOpen, (newValue, oldValue) => {
+      this.errorResponse = null;
       if (this.modalOpen) {
         this.loadImportedGrades();
       }
diff --git a/course_grader_vue/components/import/convert-options.vue b/course_grader_vue/components/import/convert-options.vue
index 3d0cf0d..ca456ea 100644
--- a/course_grader_vue/components/import/convert-options.vue
+++ b/course_grader_vue/components/import/convert-options.vue
@@ -2,7 +2,7 @@
   <div v-if="errorResponse">
     {{ errorResponse }}
   </div>
-  <div v-else-if="gradeImport.has_valid_percentages" class="d-grid gap-2">
+  <div v-else-if="appState.gradeImport.has_valid_percentages" class="d-grid gap-2">
     <p>{{ gettext("import_conversion_required") }}</p>
     <p>{{ gettext("import_conversion_required_select") }}</p>
     <BButton v-for="scale in calculatorStore.availableScales"
@@ -40,10 +40,6 @@ export default {
       type: Object,
       required: true,
     },
-    gradeImport: {
-      type: Object,
-      required: true,
-    },
   },
   setup() {
     const appState = useWorkflowStateStore();
@@ -62,17 +58,18 @@ export default {
   methods: {
     convertGrades: function (scale) {
       this.calculatorStore.setScale(scale);
-      this.appState.setGradeImport(this.gradeImport);
       this.appState.convertImport();
     },
     saveGrades: function () {
-      let url = this.section.import_url + "/" + this.gradeImport.id;
-      this.saveImportedGrades(url, {})
+      let url = this.section.import_url + "/" + this.appState.gradeImport.id,
+          data = {conversion_scale: null, converted_grades: {}};
+
+      this.saveImportedGrades(url, JSON.stringify(data))
         .then((response) => {
           return response.data;
         })
         .then((data) => {
-          this.errorResponse = null;
+          this.appState.$reset();
         })
         .catch((error) => {
           this.errorResponse = error.response;
diff --git a/course_grader_vue/components/import/source-options.vue b/course_grader_vue/components/import/source-options.vue
index b4ea59d..94e3a2e 100644
--- a/course_grader_vue/components/import/source-options.vue
+++ b/course_grader_vue/components/import/source-options.vue
@@ -10,13 +10,14 @@
     <template #button-content>
       <i class="bi bi-arrow-return-right me-2 text-body-tertiary"></i>Import from...</template
     >
-    <BDropdownItemButton v-b-modal.modalImportCanvasGrades @click="showModal"
-      ><i class="bi bi-journal-check me-2 text-body-tertiary"></i>Canvas
-      Gradebook</BDropdownItemButton
-    >
+    <BDropdownItemButton v-b-modal.modalImportCanvasGrades
+      ><i class="bi bi-journal-check me-2 text-body-tertiary"></i>
+      Canvas Gradebook
+    </BDropdownItemButton>
     <BDropdownItemButton v-b-modal.modalImportCsvGrades
-      ><i class="bi bi-filetype-csv me-2 text-body-tertiary"></i>CSV File</BDropdownItemButton
-    >
+      ><i class="bi bi-filetype-csv me-2 text-body-tertiary"></i>
+      CSV File
+    </BDropdownItemButton>
     <BDropdownDivider />
     <BDropdownItem
       href="https://itconnect.uw.edu/learn/tools/gradepage/assign-submit-grades/"
@@ -29,40 +30,33 @@
   <BModal
     id="modalImportCanvasGrades"
     title="Import Canvas Gradebook"
+    ok-only
+    ok-variant="secondary"
+    ok-title="Cancel"
     no-close-on-backdrop
+    @show="showCanvasModal"
+    @hidden="hideCanvasModal"
   >
     <CanvasGrades
       :section="section"
       :expected-grade-count="expectedGradeCount"
       :modal-open="modalOpen"
     />
-
-    <template #modal-footer="{ cancel }">
-      <BLink
-        :title="gettext('cancel')"
-        @click="cancel()"
-      >
-      {{ gettext("cancel") }}</BLink>
-    </template>
   </BModal>
 
   <BModal
     id="modalImportCsvGrades"
     title="Import CSV File"
+    ok-only
+    ok-variant="secondary"
+    ok-title="Cancel"
     no-close-on-backdrop
+    @show="showUploadModal"
   >
     <UploadGrades
       :section="section"
       :expected-grade-count="expectedGradeCount"
     />
-
-    <template #modal-footer="{ cancel }">
-      <BLink
-        :title="gettext('cancel')"
-        @click="cancel()"
-      >
-      {{ gettext("cancel") }}</BLink>
-    </template>
   </BModal>
 </template>
 
@@ -76,6 +70,7 @@ import {
   BDropdownItemButton,
   BModal,
 } from "bootstrap-vue-next";
+import { useWorkflowStateStore } from "@/stores/state";
 import { ref } from "vue";
 
 export default {
@@ -100,8 +95,10 @@ export default {
   },
   setup() {
     const showImportOptions = ref(false);
+    const appState = useWorkflowStateStore();
     return {
       showImportOptions,
+      appState,
     };
   },
   data() {
@@ -110,9 +107,16 @@ export default {
     };
   },
   methods: {
-    showModal() {
+    showCanvasModal() {
+      this.appState.resetGradeImport();
       this.modalOpen = true;
     },
+    hideCanvasModal() {
+      this.modalOpen = false;
+    },
+    showUploadModal() {
+      this.appState.resetGradeImport();
+    },
   },
 };
 </script>
diff --git a/course_grader_vue/components/import/upload.vue b/course_grader_vue/components/import/upload.vue
index c6aec30..ab78c2f 100644
--- a/course_grader_vue/components/import/upload.vue
+++ b/course_grader_vue/components/import/upload.vue
@@ -4,23 +4,23 @@
     <strong>{{ section.section_name }}</strong>
   </p>
 
-  <div v-if="gradeImport">
-    <div v-if="gradeImport.grade_count">
+  <div v-if="appState.gradeImport">
+    <div v-if="appState.gradeImport.grade_count">
       <p>
         <i class="fa fa-check-circle text-success" aria-hidden="true"></i>
-        <strong>{{ gradeImport.grade_count }}</strong> of
+        <strong>{{ appState.gradeImport.grade_count }}</strong> of
         <strong>{{ expectedGradeCount }}</strong>
         {{ ngettext("grade", "grades", expectedGradeCount) }} found in the file
         <strong>{{ file.name }}</strong>
       </p>
 
-      <ImportConvertSave :section="section" :grade-import="gradeImport" />
+      <ImportConvertSave :section="section" />
 
     </div>
     <div v-else>
       No grades found for <strong>{{ section.section_name }}</strong>
-      in this <strong>{{ gradeImport.source_name }}</strong>. Select a
-      different source for import or enter grades manually.
+      in this <strong>{{ appState.gradeImport.source_name }}</strong>.
+      Select a different source for import or enter grades manually.
     </div>
   </div>
   <div v-else>
@@ -133,7 +133,7 @@
         >see other options for submitting grades.</BLink>
       </p>
     </div>
-    <div v-else-if="gradeImport && !gradeImport.grade_count">
+    <div v-else-if="appState.gradeImport && !appState.gradeImport.grade_count">
       <div class="alert alert-danger gp-upload-error" role="alert">
         <i class="fas fa-exclamation-circle"></i>
         <strong>No grades found for {{ section.section_name }}</strong><br>
@@ -171,6 +171,7 @@ import { useGradeStore } from "@/stores/grade";
 import { uploadGrades } from "@/utils/data";
 import ImportConvertSave from "@/components/import/convert-options.vue";
 import { BButton, BLink } from "bootstrap-vue-next";
+import { useWorkflowStateStore } from "@/stores/state";
 
 export default {
   components: {
@@ -189,8 +190,10 @@ export default {
     },
   },
   setup() {
+    const appState = useWorkflowStateStore();
     const gradeStore = useGradeStore();
     return {
+      appState,
       gradeStore,
       uploadGrades,
     };
@@ -199,7 +202,6 @@ export default {
     return {
       file: null,
       errorResponse: null,
-      gradeImport: null,
     };
   },
   computed: {
@@ -233,11 +235,12 @@ export default {
         })
         .then((data) => {
           this.errorResponse = null;
-          this.gradeImport = this.gradeStore.processImport(data.grade_import);
+          let gradeImport = this.gradeStore.processImport(data.grade_import);
+          this.appState.setGradeImport(gradeImport);
         })
         .catch((error) => {
+          this.appState.resetGradeImport();
           this.errorResponse = error.response;
-          this.gradeImport = null;
         });
     },
   },
diff --git a/course_grader_vue/stores/state.js b/course_grader_vue/stores/state.js
index fdc42d7..2162085 100644
--- a/course_grader_vue/stores/state.js
+++ b/course_grader_vue/stores/state.js
@@ -58,6 +58,9 @@ export const useWorkflowStateStore = defineStore({
     setGradeImport (gradeImport) {
       this.gradeImport = gradeImport;
     },
+    resetGradeImport () {
+      this.gradeImport = null;
+    },
     setGraderoster (graderoster) {
       this.graderoster = graderoster;
       this.unsubmitted = graderoster.students.filter(

From fbd4d43c6dc1bd27b846a03a8364b1b9623cd260 Mon Sep 17 00:00:00 2001
From: Jim Laney <jlaney@uw.edu>
Date: Sun, 27 Oct 2024 10:58:32 -0700
Subject: [PATCH 2/3] fix grade scale display

---
 .../components/convert/calculator.vue         | 21 ++---
 course_grader_vue/components/grade/input.vue  | 18 ++--
 course_grader_vue/components/grade/static.vue |  8 +-
 course_grader_vue/components/student.vue      |  6 +-
 .../components/workflow/confirm-grades.vue    | 90 +++++++++----------
 course_grader_vue/layouts/default.vue         |  2 +-
 course_grader_vue/stores/context.js           |  7 +-
 7 files changed, 66 insertions(+), 86 deletions(-)

diff --git a/course_grader_vue/components/convert/calculator.vue b/course_grader_vue/components/convert/calculator.vue
index fc7b9cb..cf38a06 100644
--- a/course_grader_vue/components/convert/calculator.vue
+++ b/course_grader_vue/components/convert/calculator.vue
@@ -122,10 +122,10 @@ export default {
     CalculatorRow,
     GradeScaleRow,
     BButton,
+    BLink,
   },
   setup() {
     const calculatorStore = useCalculatorStore();
-
     return {
       calculatorStore,
     };
@@ -136,19 +136,14 @@ export default {
       scaleValues: [],
     };
   },
-  methods: {
-    initializeCalculator: function () {
-      this.calculatorValues = this.calculatorStore.calculatorValues;
-      this.scaleValues = this.calculatorStore.scaleValues;
-
-      this.calculatorStore.$subscribe((mutation, state) => {
-        this.calculatorValues = state.calculatorValues;
-        this.scaleValues = state.scaleValues;
-      });
-    },
-  },
   created() {
-    this.initializeCalculator();
+    this.calculatorValues = this.calculatorStore.calculatorValues;
+    this.scaleValues = this.calculatorStore.scaleValues;
+
+    this.calculatorStore.$subscribe((mutation, state) => {
+      this.calculatorValues = state.calculatorValues;
+      this.scaleValues = state.scaleValues;
+    });
   },
 };
 </script>
diff --git a/course_grader_vue/components/grade/input.vue b/course_grader_vue/components/grade/input.vue
index 9feb27c..c419347 100644
--- a/course_grader_vue/components/grade/input.vue
+++ b/course_grader_vue/components/grade/input.vue
@@ -182,21 +182,14 @@ export default {
       this.menuOpen = true;
     },
     updateGradeChoices: function () {
-      var i,
-        len,
-        grade,
-        valid = [];
-      for (i = 0, len = this.gradeChoices.length; i < len; i++) {
-        grade =
-          i === 0 && this.gradeChoices[i] === ""
-            ? gettext("x_no_grade_now")
-            : this.gradeChoices[i];
-
+      var valid = [];
+      this.gradeChoices.forEach((gc, idx) => {
+        let grade = (idx === 0 && gc === "") ? gettext("x_no_grade_now") : gc;
         if (this.incomplete && incompleteBlocklist.includes(grade)) {
-          continue;
+          return;
         }
         valid.push(grade);
-      }
+      });
       this.actualChoices = valid;
     },
     incompleteChanged: function (checked) {
@@ -255,7 +248,6 @@ export default {
             this.updateGradeStatus();
           })
           .catch((error) => {
-            console.log(error.message);
             this.gradeError = error.message;
           })
           .finally(() => {
diff --git a/course_grader_vue/components/grade/static.vue b/course_grader_vue/components/grade/static.vue
index 87f94c3..ef88805 100644
--- a/course_grader_vue/components/grade/static.vue
+++ b/course_grader_vue/components/grade/static.vue
@@ -4,12 +4,16 @@
   </template>
   <template v-else-if="student.is_withdrawn">
     <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-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>
+    <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">{{ gettext("submitted_grade") }}:</span>
       <span class="fs-2 fw-bold">I</span>
diff --git a/course_grader_vue/components/student.vue b/course_grader_vue/components/student.vue
index b135cdf..525c9b7 100644
--- a/course_grader_vue/components/student.vue
+++ b/course_grader_vue/components/student.vue
@@ -18,13 +18,13 @@
       </div>
     </div>
     <div v-if="appState.editingGrades && student.grade_url" class="text-end">
-      <GradeInput :student="student" :gradeChoices="gradeChoices"></GradeInput>
+      <GradeInput :student="student" :gradeChoices="gradeChoices" />
     </div>
     <div v-else-if="appState.reviewingConversion" class="text-end">
-      <GradeImport :student="student"></GradeImport>
+      <GradeImport :student="student" />
     </div>
     <div v-else class="text-end">
-      <GradeStatic :student="student"></GradeStatic>
+      <GradeStatic :student="student" />
     </div>
   </div>
 </template>
diff --git a/course_grader_vue/components/workflow/confirm-grades.vue b/course_grader_vue/components/workflow/confirm-grades.vue
index 7d15d3e..2a4109a 100644
--- a/course_grader_vue/components/workflow/confirm-grades.vue
+++ b/course_grader_vue/components/workflow/confirm-grades.vue
@@ -85,33 +85,13 @@
           class="small"
         >
           <i class="bi bi-exclamation-triangle-fill me-1"></i>
-          {{
-            interpolate(
-              ngettext(
-                "Grades submitted, but one grade had an error.",
-                "Grades submitted, but %(failed_submission_count)s grades had errors.",
-                appState.graderoster.failed_submission_count
-              ),
-              appState.graderoster,
-              true
-            )
-          }}
+          {{ partialGradeErrorText }}
         </BAlert>
 
         <!-- danger -->
         <BAlert v-else variant="danger" :model-value="true" class="small">
           <i class="bi bi-exclamation-octagon-fill me-1"></i>
-          {{
-            interpolate(
-              ngettext(
-                "Grade submitted with error.",
-                "Grades submitted with errors.",
-                appState.graderoster.failed_submission_count
-              ),
-              appState.graderoster,
-              true
-            )
-          }}
+          {{ allGradeErrorText }}
         </BAlert>
       </template>
 
@@ -175,57 +155,57 @@
       </li>
     </ul>
 
-    <div v-if="appState.graderoster.has_grade_imports">
+    <template #footer v-if="appState.graderoster.has_grade_imports">
       <div v-if="appState.graderoster.grade_import_count > 1">
         {{ gettext("multi_conversion_scale_msg") }}
         <label class="visually-hidden">
           {{ gettext("multi_conversion_scale_view") }}
         </label>
-        <select id="gp-select-scale" @change="showGradeScale($event)">
+        <select id="gp-select-scale" v-model="importConversion">
           <option selected disabled>
             {{ gettext("multi_conversion_scale_option_view") }}
           </option>
           <option
             v-for="(submission, index) in appState.graderoster.submissions"
-            v-if="submission.grade_import"
-            :value="index"
+            v-if="submission.grade_import.import_conversion"
+            :value="submission.grade_import.import_conversion"
           >
             Section {{ submission.section_id }}
           </option>
         </select>
       </div>
-      <div v-else-if="!selectedGradeScale">
+      <div v-else-if="!importConversion">
         {{ gettext("conversion_scale_msg") }}
         <BLink
           :title="gettext('conversion_scale_view_title')"
-          @click="showGradeScale($event)"
+          @click.prevent="showImportConversion()"
         >
           {{ gettext("conversion_scale_view") }}
         </BLink>
       </div>
 
-      <div v-if="selectedGradeScale">
+      <div v-if="importConversion">
         <h2 class="visually-hidden">{{ gettext("conversion_scale_header") }}</h2>
         <ol>
-          <li v-for="(item, index) in selectedGradeScale">
-            <span v-if="index === selectedGradeScale.length - 1">
-              <span>&lt; <span>{{ item.min_percentage }}&percnt;</span> &equals; </span>
-              <span>{{ lowestValidGrade }}</span>
+          <li v-for="(row, index) in importConversion.grade_scale">
+            <span v-if="index === importConversion.grade_scale.length - 1">
+              <span>&lt; <span>{{ row.min_percentage }}&percnt;</span> &equals; </span>
+              <span>{{ importConversion.lowest_valid_grade }}</span>
             </span>
             <span v-else>
-              <span>&ge; <span>{{ item.min_percentage }}&percnt;</span> &equals; </span>
-              <span>{{ item.grade }}</span>
+              <span>&ge; <span>{{ row.min_percentage }}&percnt;</span> &equals; </span>
+              <span>{{ row.grade }}</span>
             </span>
           </li>
         </ol>
         <BLink
           :title="gettext('conversion_scale_hide_title')"
-          @click.prevent="hideGradeScale()"
+          @click.prevent="hideImportConversion()"
         >
           {{ gettext("conversion_scale_hide") }}
         </BLink>
       </div>
-    </div>
+    </template>
   </BCard>
 </template>
 
@@ -274,24 +254,34 @@ export default {
   },
   data() {
     return {
-      selectedGradeScale: null,
-      lowestValidGrade: null,
+      importConversion: null,
     };
   },
+  computed: {
+    partialGradeErrorText() {
+      return interpolate(ngettext(
+        "Grades submitted, but one grade had an error.",
+        "Grades submitted, but %(failed_submission_count)s grades had errors.",
+        this.appState.graderoster.failed_submission_count
+      ), this.appState.graderoster, true);
+    },
+    allGradeErrorText() {
+      return interpolate(ngettext(
+        "Grade submitted with error.",
+        "Grades submitted with errors.",
+        this.appState.graderoster.failed_submission_count
+      ), this.appState.graderoster, true);
+    },
+  },
   methods: {
-    showGradeScale (ev) {
-      var idx = (ev.target.value) ? ev.target.value : 0,
-          conversion;
-
-      if (appState.graderoster.submissions[idx]) {
-        conversion = appState.graderoster.submissions[idx].import_conversion;
-        this.selectedGradeScale = conversion.grade_scale;
-        this.lowestValidGrade = conversion.lowest_valid_grade;
+    showImportConversion () {
+      let submission = this.appState.graderoster.submissions[0];
+      if (submission && submission.grade_import) {
+        this.importConversion = submission.grade_import.import_conversion;
       }
     },
-    hideGradeScale () {
-      this.selectedGradeScale = null;
-      this.lowestValidGrade = null;
+    hideImportConversion () {
+      this.importConversion = null;
     },
   },
 };
diff --git a/course_grader_vue/layouts/default.vue b/course_grader_vue/layouts/default.vue
index 9600912..b427b6c 100644
--- a/course_grader_vue/layouts/default.vue
+++ b/course_grader_vue/layouts/default.vue
@@ -28,7 +28,7 @@
             "
             aria-controls="gettingStartedCollapse"
           >
-            <span><i class="bi bi-calendar3 me-3"></i>Previous</span>
+            <span><i class="bi bi-calendar3 me-3"></i>Previous Terms</span>
             <i class="bi bi-chevron-right" aria-hidden="true"></i>
           </BLink>
           <div
diff --git a/course_grader_vue/stores/context.js b/course_grader_vue/stores/context.js
index 052a616..40a2310 100644
--- a/course_grader_vue/stores/context.js
+++ b/course_grader_vue/stores/context.js
@@ -13,10 +13,9 @@ export const useContextStore = defineStore({
   getters: {},
   actions: {
     selectTerm (url) {
-      for (let i = 0; i < this.context.terms.length; ++i) {
-        const t = this.context.terms[i];
-        t.is_selected = (t.url === url) ? true : false;
-      }
+      this.context.terms.forEach((term) => {
+        term.is_selected = (term.url === url) ? true : false;
+      });
     },
   },
 });

From e8dcaaa41afc4d8b3e98c304add8610378b03b95 Mon Sep 17 00:00:00 2001
From: Jim Laney <jlaney@uw.edu>
Date: Mon, 28 Oct 2024 09:23:45 -0700
Subject: [PATCH 3/3] refactor text

---
 course_grader_vue/components/import/upload.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/course_grader_vue/components/import/upload.vue b/course_grader_vue/components/import/upload.vue
index ab78c2f..5064536 100644
--- a/course_grader_vue/components/import/upload.vue
+++ b/course_grader_vue/components/import/upload.vue
@@ -24,11 +24,7 @@
     </div>
   </div>
   <div v-else>
-    <p>
-      {{ interpolate(ngettext(
-           "One grade expected", "%(count)s grades expected",
-            expectedGradeCount), {"count": expectedGradeCount}, true) }}
-    </p>
+    <p>{{ expectedGradeCountText }}</p>
     <p>The CSV is required to contain at least two columns:</p>
     <ul>
       <li>a column for student identifier (<strong>SIS User ID</strong> or <strong>StudentNo)</strong> AND</li>
@@ -223,6 +219,12 @@ export default {
         this.errorResponse &&
         this.errorResponse.response.indexOf("Request Entity Too Large") !== -1);
     },
+    expectedGradeCountText() {
+      return interpolate(ngettext(
+        "One grade expected",
+        "%(count)s grades expected",
+        this.expectedGradeCount), {"count": this.expectedGradeCount}, true);
+    },
   },
   methods: {
     fileSelected(files) {