Fix/linting

.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
   }
 }

course_grader_vue/components/section/header.vue

@@ -24,12 +24,11 @@
 </template>
 
 <script>
-import { BPlaceholder, BLink } from "bootstrap-vue-next";
+import { BPlaceholder } from "bootstrap-vue-next";
 
 export default {
   components: {
     BPlaceholder,
-    BLink,
   },
   props: {
     section: {

course_grader_vue/components/section/secondary.vue

@@ -2,11 +2,11 @@
   <div :aria-labelledby="sectionNameId">
     <template v-if="section.section_url">
       <BLink :href="section.section_url" :title="routerLinkTitle">
-        <div class="fs-4" :id="sectionNameId">{{ section.display_name }}</div>
+        <div :id="sectionNameId" class="fs-4">{{ section.display_name }}</div>
       </BLink>
     </template>
     <template v-else>
-      <div class="fs-4" :id="sectionNameId">{{ section.display_name }}</div>
+      <div :id="sectionNameId" class="fs-4">{{ section.display_name }}</div>
     </template>
 
     <div v-if="gradingStatusText">{{ gradingStatusText }}</div>
@@ -51,6 +51,13 @@ export default {
       formatLinkTitle,
     };
   },
+  data() {
+    return {
+      secondaryStatus: null,
+      errorStatus: null,
+      sectionNameId: "section-name-" + this.section.section_id,
+    };
+  },
   computed: {
     gradingStatusText() {
       if (this.section.grading_status) {
@@ -71,12 +78,10 @@ export default {
       }
     },
   },
-  data() {
-    return {
-      secondaryStatus: null,
-      errorStatus: null,
-      sectionNameId: "section-name-" + this.section.section_id,
-    };
+  created() {
+    setTimeout(() => {
+      this.loadGradingStatus();
+    }, 1000);
   },
   methods: {
     loadGradingStatus: function () {
@@ -95,10 +100,5 @@ export default {
       }
     },
   },
-  created() {
-    setTimeout(() => {
-      this.loadGradingStatus();
-    }, 1000);
-  },
 };
 </script>

course_grader_vue/layouts/default.vue

@@ -11,20 +11,33 @@
     <template #navigation>
       <ul class="nav flex-column my-3">
         <li class="nav-item mb-1 position-relative">
-          <BLink class="d-flex justify-content-between nav-link rounded-3 text-body chevron bg-secondary-hover bg-opacity-10-hover"
-            :class="$route.path.includes('/term/' + currentTerm.id )|| $route.path.includes('/section/' + currentTerm.id) ? 'bg-secondary bg-opacity-10' : ''"
-            :href="'/term/' + currentTerm.id">
-            <span><i class="bi bi-house-door-fill me-3"></i>{{ currentTerm.quarter }} {{ currentTerm.year }}</span>
+          <BLink
+            class="d-flex justify-content-between nav-link rounded-3 text-body chevron bg-secondary-hover bg-opacity-10-hover"
+            :class="
+              $route.path.includes('/term/' + currentTerm.id) ||
+              $route.path.includes('/section/' + currentTerm.id)
+                ? 'bg-secondary bg-opacity-10'
+                : ''
+            "
+            :href="'/term/' + currentTerm.id"
+          >
+            <span
+              ><i class="bi bi-house-door-fill me-3"></i
+              >{{ currentTerm.quarter }} {{ currentTerm.year }}</span
+            >
           </BLink>
         </li>
         <li class="nav-item mb-1 position-relative">
           <BLink
-            class="d-flex justify-content-between nav-link rounded-3 text-body chevron bg-secondary-hover bg-opacity-10-hover"
             id="gettingStartedHeading"
+            class="d-flex justify-content-between nav-link rounded-3 text-body chevron bg-secondary-hover bg-opacity-10-hover"
             data-bs-toggle="collapse"
             data-bs-target="#gettingStartedCollapse"
             :aria-expanded="
-              $route.path.includes('/term/' + currentTerm.id) || $route.path.includes('/section/' + currentTerm.id) ? false : true
+              $route.path.includes('/term/' + currentTerm.id) ||
+              $route.path.includes('/section/' + currentTerm.id)
+                ? false
+                : true
             "
             aria-controls="gettingStartedCollapse"
           >
@@ -34,19 +47,31 @@
           <div
             id="gettingStartedCollapse"
             class="collapse"
-            :class="$route.path.includes('/term/' + currentTerm.id) || $route.path.includes('/section/' + currentTerm.id) ? '' : 'show'"
+            :class="
+              $route.path.includes('/term/' + currentTerm.id) ||
+              $route.path.includes('/section/' + currentTerm.id)
+                ? ''
+                : 'show'
+            "
             aria-labelledby="gettingStartedHeading"
           >
             <ul class="nav flex-column small mt-1">
-              <li v-for="(term, index) in this.contextStore.context.terms"
-              :key="index" class="nav-item mb-1">
+              <li
+                v-for="(term, index) in contextStore.context.terms"
+                :key="index"
+                class="nav-item mb-1"
+              >
                 <BLink
                   v-if="index != 0"
                   class="ps-4 nav-link rounded-3 text-body fw-lighter bg-secondary-hover bg-opacity-10-hover"
-                  :class="$route.path.includes('/term/' + term.id) || $route.path.includes('/section/' + term.id) ? 'bg-secondary bg-opacity-10' : ''"
-                  style="--bs-text-opacity: 0.6"
+                  :class="
+                    $route.path.includes('/term/' + term.id) ||
+                    $route.path.includes('/section/' + term.id)
+                      ? 'bg-secondary bg-opacity-10'
+                      : ''
+                  "
                   :href="term.url"
-                  >{{ term.quarter}} {{ term.year }}</BLink
+                  >{{ term.quarter }} {{ term.year }}</BLink
                 >
               </li>
             </ul>
@@ -76,15 +101,13 @@
       <div class="my-3">
         <div class="bg-secondary bg-opacity-10 rounded-3 p-3">
           <div class="mb-2 text-body">
-            <i class="bi bi-exclamation-triangle-fill me-3"></i>Grading Period Status
+            <i class="bi bi-exclamation-triangle-fill me-3"></i>Grading Period
+            Status
           </div>
           <ul class="list-unstyled m-0 text-body small">
-            <li
-              v-for="(msg, index) in messages"
-              :key="index"
-              v-html="msg"
-              class="mt-2"
-            ></li>
+            <li v-for="(msg, index) in messages" :key="index" class="mt-2">
+              {{ msg }}
+            </li>
           </ul>
         </div>
         <SColorMode></SColorMode>
@@ -107,12 +130,12 @@
 <script>
 import { useContextStore } from "@/stores/context";
 import { clearOverride } from "@/utils/data";
-import { BAlert, BLink } from "bootstrap-vue-next";
+import { BLink } from "bootstrap-vue-next";
 import { STopbar, SProfile, SColorMode } from "solstice-vue";
 
 export default {
   name: "GradepageApp",
-  components: { BAlert, BLink, STopbar, SProfile, SColorMode },
+  components: { BLink, STopbar, SProfile, SColorMode },
   props: {
     pageTitle: {
       type: String,

course_grader_vue/main.js

@@ -2,7 +2,7 @@ import { createApp } from "vue";
 import { createBootstrap } from "bootstrap-vue-next";
 import { createPinia } from "pinia";
 import VueGtag from "vue-gtag-next";
-import { Vue3Mq, MqResponsive } from "vue3-mq";
+import { Vue3Mq } from "vue3-mq";
 
 // solstice-vue
 // import SolsticeVue from "solstice-vue";
@@ -14,7 +14,7 @@ import router from "@/router";
 import "bootstrap";
 import "bootstrap-icons/font/bootstrap-icons.css";
 
-// solstice-vue (develop)
+// solstice-vue
 import "solstice-vue/dist/style.css";
 import "solstice-vue/dist/solstice.scss";
 
@@ -48,7 +48,6 @@ app.use(VueGtag, {
 app.use(Vue3Mq, {
   preset: "bootstrap5",
 });
-app.component("mq-responsive", MqResponsive);
 
 // pinia (vuex) state management
 const pinia = createPinia();

course_grader_vue/pages/term.vue

@@ -14,7 +14,7 @@
         </template>
         <template v-if="isLoading">
           <ul class="list-unstyled">
-            <li v-for="index in 10" class="mb-3" :key="index">
+            <li v-for="index in 10" :key="index" class="mb-3">
               <BPlaceholder
                 class="d-block bg-body-secondary"
                 style="height: 60px"
@@ -38,7 +38,7 @@
               </li>
             </ul>
           </template>
-          <div v-else v-html="noClassesWarning"></div>
+          <div v-else>{{ noClassesWarning }}</div>
         </template>
       </BCard>
     </template>
@@ -98,6 +98,13 @@ export default {
       );
     },
   },
+  created() {
+    setTimeout(() => {
+      this.loadSectionsForTerm();
+    }, "1000");
+
+    this.updateTerm();
+  },
   methods: {
     selectTerm: function (e) {
       this.contextStore.selectTerm(e.target.value);
@@ -133,12 +140,5 @@ export default {
         });
     },
   },
-  created() {
-    setTimeout(() => {
-      this.loadSectionsForTerm();
-    }, "1000");
-
-    this.updateTerm();
-  },
 };
 </script>

eslint.config.js

@@ -0,0 +1,18 @@
+import pluginVue from "eslint-plugin-vue";
+import eslintConfigPrettier from "eslint-config-prettier";
+
+export default [
+  // add more generic rulesets here, such as:
+  // js.configs.recommended,
+  ...pluginVue.configs["flat/recommended"],
+  eslintConfigPrettier,
+  // ...pluginVue.configs['flat/vue2-recommended'], // Use this if you are using Vue.js 2.x.
+  {
+    rules: {
+      // override/add rules settings here, such as:
+      // 'vue/no-unused-vars': 'error'
+      'vue/multi-word-component-names': 'off',
+      'vue/no-useless-template-attributes': 'off'
+    },
+  },
+];

package.json

@@ -8,8 +8,8 @@
     "watch": "vite build --watch --mode development",
     "test": "vitest --environment jsdom",
     "coverage": "vitest run --coverage",
-    "eslint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --ignore-path .gitignore",
-    "stylelint": "stylelint '**/*.{vue,scss}'"
+    "eslint": "eslint 'course_grader_vue/**/*.{js,vue}'",
+    "stylelint": "stylelint 'course_grader_vue/**/*.{vue,scss}'"
   },
   "repository": {
     "type": "git",
@@ -23,42 +23,37 @@
   "homepage": "https://github.com/uw-it-aca/gradepage#readme",
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "axios": "^0.27.2",
+    "axios": "^1.7.7",
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
-    "bootstrap-vue-next": "^0.24.21",
-    "dayjs": "^1.11.6",
-    "i": "^0.3.7",
-    "jquery": "^3.6.1",
-    "npm": "^9.6.7",
-    "pinia": "^2.2.2",
-    "regenerator-runtime": "^0.13.11",
+    "bootstrap-vue-next": "^0.24.23",
+    "dayjs": "^1.11.13",
+    "jquery": "^3.7.1",
+    "pinia": "^2.2.4",
+    "regenerator-runtime": "^0.14.1",
     "solstice-vue": "github:uw-it-aca/solstice-vue#1.1.0",
-    "vue": "^3.5.8",
+    "vue": "^3.5.10",
     "vue-gtag-next": "^1.14.0",
     "vue-router": "^4.4.5",
     "vue3-cookies": "^1.0.6",
-    "vue3-mq": "^3.1.3"
+    "vue3-mq": "^4.0.0"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.2.0",
-    "@vitejs/plugin-vue": "^4.2.1",
-    "@vitest/coverage-v8": "^0.34.6",
-    "@vue/eslint-config-prettier": "^7.0.0",
-    "@vue/test-utils": "^2.2.4",
-    "eslint": "^8.28.0",
-    "eslint-plugin-vue": "^9.7.0",
-    "jsdom": "^20.0.3",
-    "postcss-html": "^1.5.0",
-    "prettier": "^2.8.0",
-    "sass": "^1.56.1",
-    "stylelint": "^14.15.0",
-    "stylelint-config-prettier": "^9.0.4",
-    "stylelint-config-recommended-scss": "^6.0.0",
-    "stylelint-config-recommended-vue": "^1.4.0",
-    "stylelint-config-standard-scss": "^3.0.0",
-    "unplugin-vue-components": "^0.27.3",
-    "vite": "^4.4.8",
-    "vitest": "^0.34.6"
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vitest/coverage-v8": "^2.1.1",
+    "@vue/test-utils": "^2.4.6",
+    "eslint": "^9.11.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-vue": "^9.28.0",
+    "jsdom": "^25.0.1",
+    "postcss-html": "^1.7.0",
+    "prettier": "^3.3.3",
+    "sass": "^1.79.4",
+    "stylelint": "^16.9.0",
+    "stylelint-config-recommended-scss": "^14.1.0",
+    "stylelint-config-recommended-vue": "^1.5.0",
+    "stylelint-config-standard-scss": "^13.1.0",
+    "vite": "^5.4.8",
+    "vitest": "^2.1.1"
   }
 }