Merge pull request #435 from uw-it-aca/task/section-statuses

add section status and term selector

course_grader/views/pages.py

@@ -55,12 +55,14 @@ def get_context_data(self, **kwargs):
 
         opt_terms = []
         for opt_term in all_terms:
+            opt_term_id = f"{opt_term.year}-{opt_term.quarter}"
             opt_terms.append({
+                "id": opt_term_id,
                 "quarter": opt_term.get_quarter_display(),
                 "year": opt_term.year,
                 "url": url_for_term(opt_term),
                 "sections_url": reverse("section-list", kwargs={
-                    "term_id": f"{opt_term.year}-{opt_term.quarter}"}),
+                    "term_id": opt_term_id}),
                 "is_selected": opt_term == selected_term,
             })
 

course_grader_vue/components/section/list.vue

@@ -1,26 +1,19 @@
 <template>
   <div>
     <ul>
-      <li v-for="section in sections" :key="section.section_id" id="section-{{section.section_id}}">
-        <section-list-item :section="section"></section-list-item>
-        <div v-if="section.secondary_sections && section.secondary_sections.length">
-          <ul>
-            <li v-for="secondary in section.secondary_sections" :key="secondary.section_id" id="section-{{secondary.section_id}}">
-              <section-list-item :section="secondary"></section-list-item>
-            </li>
-          </ul>
-        </div>
+      <li v-for="section in sections" :key="section.section_id">
+        <primary-section :section="section"></primary-section>
       </li>
     </ul>
   </div>
 </template>
 
 <script>
-import SectionListItem from "@/components/section/list-item.vue";
+import PrimarySection from "@/components/section/primary.vue";
 
 export default {
   components: {
-    "section-list-item": SectionListItem,
+    "primary-section": PrimarySection,
   },
   props: {
     sections: {

course_grader_vue/components/section/primary.vue

@@ -0,0 +1,85 @@
+<template>
+  <div :aria-labelledby="sectionNameId">
+    <template v-if="section.section_url">
+      <router-link :to="{ path: section.section_url }" :title="routerLinkTitle">
+        <h3 :id="sectionNameId">{{ section.display_name }}</h3>
+      </router-link>
+    </template>
+    <template v-else>
+      <h3 :id="sectionNameId">{{ section.display_name }}</h3>
+    </template>
+    <div v-if="section.grading_status">
+      {{ section.grading_status }}
+    </div>
+    <div v-else>{{ gradingStatusText }}</div>
+  </div>
+  <div v-if="section.secondary_sections && section.secondary_sections.length">
+    <ul>
+      <li v-for="secondary in section.secondary_sections" :key="secondary.section_id">
+        <secondary-section :section="secondary" :gradingStatus="gradingStatus"></secondary-section>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import SecondarySection from "@/components/section/secondary.vue";
+import { getSectionStatus } from "@/utils/data";
+import { formatGradingStatus, formatLinkTitle } from "@/utils/grading-status";
+
+export default {
+  components: {
+    "secondary-section": SecondarySection,
+  },
+  props: {
+    section: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup() {
+    return {
+      getSectionStatus,
+      formatGradingStatus,
+      formatLinkTitle,
+    };
+  },
+  data() {
+    return {
+      gradingStatus: {},
+      sectionNameId: "section-name-" + this.section.section_id,
+      gradingStatusText: "",
+      routerLinkTitle: "",
+    };
+  },
+  methods: {
+    loadSecondarySectionStatus: function(gs) {
+      var secondary, l, i;
+      if (gs.hasOwnProperty("secondary_sections")) {
+        for (i = 0, l = gs.secondary_sections.length; i < l; i++) {
+          secondary = gs.secondary_sections[i];
+          this.gradingStatus[secondary.section_id] = secondary.grading_status;
+        }
+      }
+    },
+    loadSectionStatus: function () {
+      if (this.section.status_url) {
+        this.getSectionStatus(this.section.status_url).then(response => {
+          return response.data;
+        }).then(data => {
+          this.gradingStatusText = this.formatGradingStatus(data.grading_status);
+          this.routerLinkTitle = this.formatLinkTitle(data.grading_status);
+          this.loadSecondarySectionStatus(data.grading_status);
+        }).catch(error => {
+          console.log(error.message);
+        });
+      }
+    },
+  },
+  created() {
+    if (!this.section.grading_status) {
+      this.loadSectionStatus();
+    }
+  },
+};
+</script>

course_grader_vue/components/section/secondary.vue

@@ -0,0 +1,71 @@
+<template>
+  <div :aria-labelledby="sectionNameId">
+    <template v-if="section.section_url">
+      <router-link :to="{ path: section.section_url }" :title="routerLinkTitle">
+        <h3 :id="sectionNameId">{{ section.display_name }}</h3>
+      </router-link>
+    </template>
+    <template v-else>
+      <h3 :id="sectionNameId">{{ section.display_name }}</h3>
+    </template>
+    <div v-if="section.grading_status">
+      {{ section.grading_status }}
+    </div>
+    <div v-else>{{ gradingStatusText }}</div>
+  </div>
+</template>
+
+<script>
+import { getSectionStatus } from "@/utils/data";
+import { formatGradingStatus, formatLinkTitle } from "@/utils/grading-status";
+
+export default {
+  props: {
+    section: {
+      type: Object,
+      required: true,
+    },
+    gradingStatus: {
+      type: Object,
+    },
+  },
+  setup() {
+    return {
+      getSectionStatus,
+      formatGradingStatus,
+      formatLinkTitle,
+    };
+  },
+  data() {
+    return {
+      sectionNameId: "section-name-" + this.section.section_id,
+      gradingStatusText: "",
+      routerLinkTitle: "",
+      section_id: this.section.section_id,
+    };
+  },
+  methods: {
+    loadSectionStatus: function () {
+      if (this.section.status_url) {
+        this.getSectionStatus(this.section.status_url).then(response => {
+          return response.data;
+        }).then(data => {
+          this.gradingStatusText = this.formatGradingStatus(data.grading_status);
+          this.routerLinkTitle = this.formatLinkTitle(data.grading_status);
+        }).catch(error => {
+          console.log(error.message);
+        });
+      } else {
+        if (this.gradingStatus.hasOwnProperty(this.section_id)) {
+          this.updateGradingStatusUI(this.gradingStatus[this.section_id]);
+        }
+      }
+    },
+  },
+  created() {
+    if (!this.section.grading_status) {
+      this.loadSectionStatus();
+    }
+  },
+};
+</script>

course_grader_vue/pages/term.vue

@@ -1,16 +1,31 @@
 <template>
-  <layout :page-title="pageTitle">
+  <layout :page-title="selectedTermText">
     <template #content>
-      <div class="border">
-      <div v-if="sections.length > 0">
-        <section-list :sections="sections"></section-list>
+      <div>
+        <select
+          aria-label="Select term"
+          @change="selectTerm"
+          v-model="selectedTermUrl"
+        >
+          <template v-for="term in this.contextStore.context.terms" :key="term.id">
+            <option
+              :value="term.url"
+              :title="`Select ${term.quarter} ${term.year}`"
+              :selected="term.is_selected"
+            >{{ term.quarter }} {{ term.year }}</option>
+          </template>
+        </select>
       </div>
-      <div v-else>
-        You do not have any classes to grade for <strong>{{ pageTitle }}</strong
-        >. If you believe this to be incorrect, please contact your department's
-        Time Schedule Coordinator.
+      <div class="border">
+        <div v-if="sections.length > 0">
+          <section-list :sections="sections"></section-list>
+        </div>
+        <div v-else>
+          You do not have any classes to grade for <strong>{{ selectedTermText }}</strong
+          >. If you believe this to be incorrect, please contact your department's
+          Time Schedule Coordinator.
+        </div>
       </div>
-    </div>
     </template>
   </layout>
 </template>
@@ -35,26 +50,31 @@ export default {
   },
   data() {
     return {
-      pageTitle: this.contextStore.context.page_title,
+      selectedTermUrl: "",
+      selectedTermText: this.contextStore.context.page_title,
       sectionsURL: this.contextStore.context.sections_url,
       sections: [],
     };
   },
   methods: {
+    selectTerm: function (e) {
+      this.contextStore.selectTerm(e.target.value);
+      window.location.href = this.contextStore.context.terms.find((t) =>
+        t.is_selected).url;
+    },
     updateTerm: function () {
       let term;
       if (this.$route.params.id) {
         term = this.contextStore.context.terms.find((t) =>
           t.sections_url.endsWith(this.$route.params.id)
         );
-        if (term) {
-          this.pageTitle = term.quarter + " " + term.year;
-          this.sectionsURL = term.sections_url;
-        }
-      } else {
-        this.pageTitle = this.contextStore.context.page_title;
-        this.sectionsURL = this.contextStore.context.sections_url;
       }
+      if (!term) {
+        term = this.contextStore.context.terms[0];
+      }
+      this.selectedTermUrl = term.url;
+      this.selectedTermText = term.quarter + " " + term.year;
+      this.sectionsURL = term.sections_url;
     },
     loadSectionsForTerm: function () {
       this.getSections(this.sectionsURL)

course_grader_vue/stores/context.js

@@ -13,5 +13,12 @@ export const useContextStore = defineStore({
     };
   },
   getters: {},
-  actions: {},
+  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;
+      }
+    },
+  },
 });