Merge pull request #515 from uw-it-aca/task/modal-lifecycle

fix lifecycle for import modal

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>

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(() => {

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>

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,16 +97,17 @@ export default {
     },
   },
   setup() {
+    const appState = useWorkflowStateStore();
     const gradeStore = useGradeStore();
     return {
+      appState,
       gradeStore,
       createImport,
     };
   },
   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();
       }

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;

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>