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

Task/modal lifecycle
uw-it-aca · Oct 28, 2024 · d535091 · d535091
2 parents e26264f + 84d9716
commit d535091
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 46 deletions.
diff --git a/course_grader_vue/components/convert/calculator.vue b/course_grader_vue/components/convert/calculator.vue
@@ -3,18 +3,22 @@
     <label for="import_scale_selector" class="visually-hidden">
       {{ gettext("conversion_scale_chooser_label") }}
     </label>
-    <select
+    <BDropdown
       id="import_scale_selector"
-      @change="calculatorStore.setScale($event.target.value)"
+      size="sm"
+      variant="outline-secondary"
+      class="d-inline-block"
     >
-      <option
+      <template #button-content>
+        {{ gettext("conversion_scale_" + calculatorStore.selectedScale) }}
+      </template>
+      <BDropdownItem
         v-for="scale in calculatorStore.availableScales"
         :value="scale"
-        :selected="scale === calculatorStore.selectedScale"
-      >
-        {{ gettext("conversion_scale_" + scale) }}
-      </option>
-    </select>
+        @click.prevent="calculatorStore.setScale(scale)"
+      >{{ gettext("conversion_scale_" + scale) }}
+      </BDropdownItem>
+    </BDropdown>
   </div>
 
   <div class="col-7 bg-body-tertiary p-3">
@@ -115,14 +119,16 @@
 import { useCalculatorStore } from "@/stores/calculator";
 import CalculatorRow from "@/components/convert/calculator-row.vue";
 import GradeScaleRow from "@/components/convert/grade-scale-row.vue";
-import { BLink, BButton } from "bootstrap-vue-next";
+import { BLink, BButton, BDropdown, BDropdownItem } from "bootstrap-vue-next";
 
 export default {
   components: {
     CalculatorRow,
     GradeScaleRow,
     BButton,
     BLink,
+    BDropdown,
+    BDropdownItem,
   },
   setup() {
     const calculatorStore = useCalculatorStore();

diff --git a/course_grader_vue/components/grade/static.vue b/course_grader_vue/components/grade/static.vue
@@ -30,7 +30,7 @@
         <span class="fs-2 fw-bold">{{ student.grade }}</span>
       </template>
     </template>
-    <div v-if="student.date_graded" class="small text-muted">
+    <div v-if="student.date_graded && showDateGraded" class="small text-muted">
       {{ interpolate(gettext("grade_submitted %(date_graded)s"), student, true) }}
     </div>
     <div v-if="student.grade_status" class="small text-muted">
@@ -47,5 +47,10 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      showDateGraded: false,
+    };
+  },
 };
 </script>
diff --git a/course_grader_vue/components/workflow/confirm-grades.vue b/course_grader_vue/components/workflow/confirm-grades.vue
@@ -15,42 +15,40 @@
       <BLink
         class="btn btn-info btn-sm rounded-3 text-nowrap"
         :href="section.term_url"
-        >Return to class list</BLink
+        >Return to section list</BLink
       >
     </div>
   </BAlert>
 
   <BCard class="shadow-sm rounded-3" header-class="p-3" header="Default">
     <template #header>
-      <SectionHeader :section="section" :title="gettext('submitted_grades_for')" />
+      <BDropdown
+        v-model="showSectionOptions"
+        size="sm"
+        variant="outline-secondary"
+        no-caret
+        class="float-end d-inline-block"
+        toggle-class="rounded-2"
+      >
+        <template #button-content>
+          <i class="bi bi-three-dots"></i
+        ></template>
+        <BDropdownItem :href="section.export_url">
+          <i class="bi bi-download me-2 text-body-tertiary"></i>Download Change of Grade
+        </BDropdownItem>
+        <BDropdownItem href="javascript:window.print()">
+          <i class="bi bi-printer me-2 text-body-tertiary"></i>Print this page
+        </BDropdownItem>
+        <BDropdownDivider />
+        <BDropdownItem
+          href="https://itconnect.uw.edu/learn/tools/gradepage/assign-submit-grades/"
+          target="_blank"
+          title="Information on assigning and submitting grades"
+          ><i class="bi bi-question-circle me-2 text-body-tertiary"></i>GradePage Help
+        </BDropdownItem>
+      </BDropdown>
 
-      <template>
-        <BDropdown
-          v-model="showSectionOptions"
-          size="sm"
-          variant="outline-secondary"
-          no-caret
-          class="float-end d-inline-block"
-          toggle-class="rounded-2"
-        >
-          <template #button-content>
-            <i class="bi bi-three-dots"></i
-          ></template>
-          <BDropdownItem :href="section.export_url">
-            <i class="bi bi-download me-2 text-body-tertiary"></i>Download Change of Grade
-          </BDropdownItem>
-          <BDropdownItem href="javascript:window.print()">
-            <i class="bi bi-printer me-2 text-body-tertiary"></i>Print this page
-          </BDropdownItem>
-          <BDropdownDivider />
-          <BDropdownItem
-            href="https://itconnect.uw.edu/learn/tools/gradepage/assign-submit-grades/"
-            target="_blank"
-            title="Information on assigning and submitting grades"
-            ><i class="bi bi-question-circle me-2 text-body-tertiary"></i>GradePage Help
-          </BDropdownItem>
-        </BDropdown>
-      </template>
+      <SectionHeader :section="section" :title="gettext('submitted_grades_for')" />
 
       <div
         v-if="!appState.graderoster.is_submission_confirmation"
@@ -161,18 +159,25 @@
         <label class="visually-hidden">
           {{ gettext("multi_conversion_scale_view") }}
         </label>
-        <select id="gp-select-scale" v-model="importConversion">
-          <option selected disabled>
+        <BDropdown
+          v-model="importConversion"
+          size="sm"
+          variant="outline-secondary"
+          no-caret
+          class="float-end d-inline-block"
+          toggle-class="rounded-2"
+        >
+          <template #button-content>
             {{ gettext("multi_conversion_scale_option_view") }}
-          </option>
-          <option
+          </template>
+          <BDropdownItem
             v-for="(submission, index) in appState.graderoster.submissions"
             v-if="submission.grade_import.import_conversion"
             :value="submission.grade_import.import_conversion"
           >
-            Section {{ submission.section_id }}
-          </option>
-        </select>
+            <i class="me-2 text-body-tertiary"></i>Section {{ submission.section_id }}
+          </BDropdownItem>
+        </BDropdown>
       </div>
       <div v-else-if="!importConversion">
         {{ gettext("conversion_scale_msg") }}