Merge pull request #537 from uw-it-aca/char/vite6

Char/vite6
uw-it-aca · Dec 18, 2024 · 373394f · 373394f
2 parents edd836a + aa4a67c
commit 373394f
Show file tree

Hide file tree

Showing 43 changed files with 969 additions and 652 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
diff --git a/.jshintignore b/.jshintignore
diff --git a/.stylelintignore b/.stylelintignore
diff --git a/.stylelintrc b/.stylelintrc
@@ -1,17 +1,10 @@
 {
   "extends": [
     "stylelint-config-standard-scss",
-    "stylelint-config-recommended-vue/scss",
-    "stylelint-config-prettier"
+    "stylelint-config-recommended-vue/scss"
   ],
   "rules": {
     "scss/no-global-function-names": null,
-    "no-invalid-position-at-import-rule": null,
-    "scss/at-import-partial-extension": [
-      "never",
-      {
-        "severity": "warning"
-      }
-    ]
+    "no-invalid-position-at-import-rule": null
   }
 }
diff --git a/course_grader_vue/components/convert/calculator-row.vue b/course_grader_vue/components/convert/calculator-row.vue
@@ -8,16 +8,16 @@
       <div class="w-50">
         <div class="input-group mb-3">
           <input
-            type="text"
             :id="`calculator-percentage-${index}`"
+            type="text"
             name="calculator-percentage"
             :value="rowData.percentage"
             class="form-control"
-            @change="percentageChanged($event.target.value)"
             required
             aria-describedby="percent-addon2"
+            @change="percentageChanged($event.target.value)"
           />
-          <span class="input-group-text" id="percent-addon2">&percnt;</span>
+          <span id="percent-addon2" class="input-group-text">&percnt;</span>
         </div>
         <label for="`calculator-percentage-${index}`">
           <span v-if="last" class="visually-hidden">
@@ -26,9 +26,7 @@
           <span v-else-if="first" class="visually-hidden">
             Upper Limit: Final Score (percentage)
           </span>
-          <span v-else class="visually-hidden">
-            Final Score (percentage)
-          </span>
+          <span v-else class="visually-hidden"> Final Score (percentage) </span>
           <span role="alert" class="text-danger invalid-grade small">
             {{ rowData.percentageError }}
           </span>
@@ -37,13 +35,13 @@
       <div class="mx-3">&equals;</div>
       <div class="w-50">
         <input
-          type="text"
           :id="`calculator-grade-${index}`"
+          type="text"
           name="calculator-grade"
           :value="rowData.grade"
           class="form-control"
-          @change="gradeChanged($event.target.value)"
           required
+          @change="gradeChanged($event.target.value)"
         />
         <label for="`calculator-grade-${index}`">
           <span v-if="last" class="visually-hidden">
@@ -52,9 +50,7 @@
           <span v-else-if="first" class="visually-hidden">
             Upper Limit: Grade Point
           </span>
-          <span v-else class="visually-hidden">
-            Lower Limit: Grade Point
-          </span>
+          <span v-else class="visually-hidden"> Lower Limit: Grade Point </span>
           <span role="alert" class="text-danger invalid-grade small">
             {{ rowData.gradeError }}
           </span>

diff --git a/course_grader_vue/components/convert/calculator.vue b/course_grader_vue/components/convert/calculator.vue
@@ -14,10 +14,10 @@
       </template>
       <BDropdownItem
         v-for="(scale, index) in calculatorStore.availableScales"
-        :value="scale"
         :key="index"
+        :value="scale"
         @click.prevent="calculatorStore.setScale(scale)"
-      >{{ gettext("conversion_scale_" + scale) }}
+        >{{ gettext("conversion_scale_" + scale) }}
       </BDropdownItem>
     </BDropdown>
   </div>
@@ -26,7 +26,8 @@
     <div v-if="!calculatorStore.isFixedScale">
       <h4 id="grade_conversion_header">Grade conversion calculator</h4>
       <p>
-        Set at least two Percentage to Grade Point conversion points and click <strong>Apply</strong> to create the full Grade Scale below.
+        Set at least two Percentage to Grade Point conversion points and click
+        <strong>Apply</strong> to create the full Grade Scale below.
       </p>
 
       <div class="d-flex justify-content-between">
@@ -40,10 +41,11 @@
             <div class="d-flex my-3">
               <div class="w-50 text-center">
                 <BLink
-                  @click.prevent="calculatorStore.addCalculatorRow()"
                   title="Add a row to the conversion table. Leave unused rows blank."
                   tabindex="0"
-                >+ Add a row</BLink>
+                  @click.prevent="calculatorStore.addCalculatorRow()"
+                  >+ Add a row</BLink
+                >
               </div>
               <div class="w-50 text-center">
                 <i class="bi bi-three-dots-vertical"></i>
@@ -65,7 +67,8 @@
           <BLink
             title="Reset the grade conversion calculator"
             @click.prevent="calculatorStore.resetCalculatorValues()"
-          >Reset</BLink>
+            >Reset</BLink
+          >
         </span>
         <span>
           <BButton
@@ -88,19 +91,14 @@
       id="conversion_grade_scale_container"
       aria-labelledby="grade_scale_header"
     >
-      <h4 class="visually-hidden" id="grade_scale_header">
-        Grade Scale:
-      </h4>
+      <h4 id="grade_scale_header" class="visually-hidden">Grade Scale:</h4>
 
       <div class="d-flex justify-content-between">
         <div class="fw-bold">Minimum score for class grade</div>
         <div class="fw-bold">Grade Point</div>
       </div>
 
-      <ol
-        aria-label="Review and adjust Grade Scale:"
-        class="list-unstyled"
-      >
+      <ol aria-label="Review and adjust Grade Scale:" class="list-unstyled">
         <li v-for="(data, index) in scaleValues" :key="index">
           <GradeScaleRow
             :row-data="data"
@@ -110,9 +108,9 @@
         </li>
       </ol>
       <span>
-        <BButton
-          @click.prevent="calculatorStore.resetScaleValues()"
-        >Clear scale</BButton>
+        <BButton @click.prevent="calculatorStore.resetScaleValues()"
+          >Clear scale</BButton
+        >
       </span>
     </div>
   </div>
@@ -125,6 +123,7 @@ import GradeScaleRow from "@/components/convert/grade-scale-row.vue";
 import { BLink, BButton, BDropdown, BDropdownItem } from "bootstrap-vue-next";
 
 export default {
+  name: "CalculatorComp",
   components: {
     CalculatorRow,
     GradeScaleRow,

diff --git a/course_grader_vue/components/convert/grade-scale-row.vue b/course_grader_vue/components/convert/grade-scale-row.vue
@@ -13,17 +13,17 @@
       <div v-else>
         <div class="input-group mb-3">
           <input
-            type="text"
             :id="`min-percentage-${index}`"
+            type="text"
             class="form-control"
             name="min-percentage"
             :value="rowData.minPercentage"
             :title="gradeScaleTitle"
-            @change="minPercentageChanged($event.target.value)"
             required
             aria-describedby="percent-addon2"
+            @change="minPercentageChanged($event.target.value)"
           />
-          <span class="input-group-text" id="percent-addon2">&percnt;</span>
+          <span id="percent-addon2" class="input-group-text">&percnt;</span>
         </div>
         <label for="`min-percentage-${index}`">
           <span role="alert" class="text-danger invalid-grade small">
@@ -81,13 +81,17 @@ export default {
         "Any final grade below a %(min_percentage)s% will result in a %(grade)s.",
         {
           min_percentage: this.lastMinPercentage,
-          grade: this.rowData.grade
-        }, true
+          grade: this.rowData.grade,
+        },
+        true
       );
     },
     gradeScaleTitle() {
       return interpolate(
-        "Minimum percentage that will result in a %(grade)s", this.rowData, true);
+        "Minimum percentage that will result in a %(grade)s",
+        this.rowData,
+        true
+      );
     },
   },
   methods: {

diff --git a/course_grader_vue/components/errors.vue b/course_grader_vue/components/errors.vue
@@ -1,47 +1,77 @@
 <template>
-  <template v-if="errorResponse.status === 404" id="404-error">
-    <div class="alert" role="main">
+  <template v-if="errorResponse.status === 404">
+    <div id="404-error" class="alert" role="main">
       <h3>404 {{ errorText }}</h3>
       <p>Some things you may want to try:</p>
       <ul>
-        <li>Make sure you are logged into this service with the appropriate UW NetID.</li>
-        <li>Feel free to contact us at [email protected] if you have questions or need help.</li>
+        <li>
+          Make sure you are logged into this service with the appropriate UW
+          NetID.
+        </li>
+        <li>
+          Feel free to contact us at [email protected] if you have questions or need
+          help.
+        </li>
       </ul>
     </div>
   </template>
-  <template v-else-if="errorResponse.status === 401" id="403-error">
-    <div class="alert" role="main">
+  <template v-else-if="errorResponse.status === 401">
+    <div id="401-error" class="alert" role="main">
       <h3>{{ errorText }}</h3>
       <p>Some things you may want to try:</p>
       <ul>
-        <li>Make sure you are logged into this service with the appropriate UW NetID.</li>
-        <li>Feel free to contact us at [email protected] if you have questions or need help.</li>
+        <li>
+          Make sure you are logged into this service with the appropriate UW
+          NetID.
+        </li>
+        <li>
+          Feel free to contact us at [email protected] if you have questions or need
+          help.
+        </li>
       </ul>
     </div>
   </template>
-  <template v-else-if="errorResponse.status === 500" id="500-error">
-    <div class="alert" role="main">
+  <template v-else-if="errorResponse.status === 500">
+    <div id="500-error" class="alert" role="main">
       <h3>There was a problem retrieving grade information:</h3>
       <h4>{{ errorText }}</h4>
 
-      <p>The Gradepage support team has been alerted of this issue and are working to get you back on track.</p>
+      <p>
+        The Gradepage support team has been alerted of this issue and are
+        working to get you back on track.
+      </p>
       <p>You may want to:</p>
       <ul>
         <li>Give us a little time, and try again later.</li>
-        <li>Drop us a line at <a href="mailto:[email protected]">[email protected]</a> and let us know that this has been taking awhile.</li>
+        <li>
+          Drop us a line at <a href="mailto:[email protected]">[email protected]</a> and let
+          us know that this has been taking awhile.
+        </li>
       </ul>
     </div>
   </template>
-  <template v-else id="543-error">
-    <div class="alert" role="main">
+  <template v-else>
+    <div id="543-error" class="alert" role="main">
       <h3>There was a problem retrieving grade information:</h3>
       <h4>{{ errorText }}</h4>
 
-      <p>To correct this issue, <strong>please email us at <a href="mailto:[email protected]">[email protected]</a></strong>.</p>
+      <p>
+        To correct this issue,
+        <strong
+          >please email us at
+          <a href="mailto:[email protected]">[email protected]</a></strong
+        >.
+      </p>
       <ul>
-        <li>Include a screenshot, or paste the error text into your email so that we can quickly diagnose the issue.
+        <li>
+          Include a screenshot, or paste the error text into your email so that
+          we can quickly diagnose the issue.
           <ul>
-            <li>The error text to paste into your email to us is: <br/>{{ errorText }}</li>
+            <li>
+              The error text to paste into your email to us is: <br />{{
+                errorText
+              }}
+            </li>
           </ul>
         </li>
       </ul>
@@ -51,6 +81,7 @@
 
 <script>
 export default {
+  name: "ErrorsComp",
   props: {
     errorResponse: {
       type: Object,

diff --git a/course_grader_vue/components/grade/import.vue b/course_grader_vue/components/grade/import.vue
@@ -1,9 +1,15 @@
 <template>
   <div>
     <span v-if="student.is_override_grade">
-      <span class="fa-stack" title="Override grade imported from Canvas Gradebook">
+      <span
+        class="fa-stack"
+        title="Override grade imported from Canvas Gradebook"
+      >
         <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>
+        <i
+          class="fas fa-marker fa-flip-horizontal fa-stack-1x fa-inverse"
+          aria-hidden="true"
+        ></i>
       </span>
     </span>
     {{ student.imported_grade }}%
@@ -15,6 +21,7 @@
 
 <script>
 export default {
+  name: "GradeImport",
   props: {
     student: {
       type: Object,