Stub out grade info.

uw-it-aca · Aug 5, 2024 · 2694141 · 2694141
1 parent 2dd7f05
commit 2694141
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 27 deletions.
diff --git a/course_grader_vue/components/graderoster/list.vue b/course_grader_vue/components/graderoster/list.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <ul>
-      <li v-for="student in graderoster.students" :key="student.item_id">
+    <ul class="list-unstyled">
+      <li v-for="student in graderoster.students" :key="student.item_id" class="mb-3">
         <Student :student="student"></Student>
       </li>
     </ul>

diff --git a/course_grader_vue/components/graderoster/student.vue b/course_grader_vue/components/graderoster/student.vue
@@ -1,21 +1,31 @@
 <template>
-  <div>
-    <h3>{{ student.student_lastname }}, {{ student.student_firstname }}</h3>
+  <div class="d-flex justify-content-between">
     <div>
-      <span class="offcanvas">Section:</span> {{ student.section_id }},
-      <span v-if="student.student_credits">
-        <span class="offcanvas">Student credits:</span> {{ student.student_credits }} CR,
-      </span>
-      <span class="offcanvas">Student number:</span> {{ student.student_number }}
-      <span v-if="student.duplicate_code">
-        <span class="offcanvas">Duplicate code:</span> {{ student.duplicate_code }}
-      </span>
+      <div class="fs-4 text-uppercase">{{ student.student_lastname }}, {{ student.student_firstname }}</div>
+      <div>
+        <span class="offcanvas">Section:</span> {{ student.section_id }},
+        <span v-if="student.student_credits">
+          <span class="offcanvas">Student credits:</span>
+          {{ student.student_credits }} CR,
+        </span>
+        <span class="offcanvas">Student number:</span>
+        {{ student.student_number }}
+        <span v-if="student.duplicate_code">
+          <span class="offcanvas">Duplicate code:</span>
+          {{ student.duplicate_code }}
+        </span>
+      </div>
+    </div>
+    <div>
+      <template v-if="student.grade">{{ student.grade }}</template>
+      <template v-if="student.is_writing_section"><abbr title="Writing Credit">W</abbr></template>
+      <template v-if="student.is_auditor">AUDITOR</template>
+      <template v-if="student.is_withdrawn">WITHDRAWN</template>
     </div>
   </div>
 </template>
 
 <script>
-
 export default {
   props: {
     student: {

diff --git a/course_grader_vue/components/section/primary.vue b/course_grader_vue/components/section/primary.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :aria-labelledby="sectionNameId">
+  <div class="mb-3" :aria-labelledby="sectionNameId">
     <template v-if="section.section_url">
       <RouterLink :to="{ path: section.section_url }" :title="routerLinkTitle">
         <div class="fs-4" :id="sectionNameId">{{ section.display_name }}</div>

diff --git a/course_grader_vue/pages/section.vue b/course_grader_vue/pages/section.vue
@@ -1,7 +1,6 @@
 <template>
   <Layout :page-title="pageTitle">
     <template #content>
-
       <BLink href="/">Back To Current Term </BLink>
 
       <BCard
@@ -10,7 +9,7 @@
         header-bg-variant="transparent"
       >
         <template #header>
-          <h2 class="h6 m-0 fw-bold">{{ section.section_name }}</h2>
+          <div class="fs-6 m-0 fw-bold">{{ section.section_name }}</div>
           <span> SLN {{ section.section_sln }}</span>
         </template>
         <template v-if="isLoading">
@@ -25,7 +24,10 @@
           </ul>
         </template>
         <template v-else>
-          <GradeRoster v-if="graderoster" :graderoster="graderoster"></GradeRoster>
+          <GradeRoster
+            v-if="graderoster"
+            :graderoster="graderoster"
+          ></GradeRoster>
           <div v-else>Graderoster not available</div>
         </template>
       </BCard>
@@ -54,17 +56,18 @@ export default {
       isLoading: true,
       section: {},
       graderoster: {},
+      pageTitle: "Course Section",
     };
   },
   methods: {
     loadGraderoster: function (url) {
       this.getGraderoster(url)
         .then((response) => {
-            return response.data;
-          })
+          return response.data;
+        })
         .then((data) => {
-            this.graderoster = data.graderoster;
-          })
+          this.graderoster = data.graderoster;
+        })
         .catch((error) => {
           console.log(error.message);
         });
@@ -77,7 +80,6 @@ export default {
         })
         .then((data) => {
           this.section = data.section;
-          document.title = this.pageTitle;
           if (this.section.graderoster_url) {
             this.loadGraderoster(this.section.graderoster_url);
           }
@@ -87,16 +89,20 @@ export default {
         })
         .finally(() => {
           this.isLoading = false;
+          this.pageTitle = this.section.section_name;
+          document.title = this.pageTitle + " - GradePage";
         });
     },
   },
   computed: {
-    pageTitle() {
-      return this.section.section_name + " - GradePage";
-    },
+
   },
   created() {
-    this.loadSection();
+    setTimeout(() => {
+      this.loadSection();
+    }, "1000");
+
+
   },
 };
 </script>
diff --git a/course_grader_vue/pages/term.vue b/course_grader_vue/pages/term.vue
@@ -31,7 +31,7 @@
         header-bg-variant="transparent"
       >
         <template #header>
-          <h2 class="h6 m-0 fw-bold">{{ selectedTermName }}</h2>
+          <div class="fs-6 m-0 fw-bold">{{ selectedTermName }}</div>
         </template>
         <template v-if="isLoading">
           <ul class="list-unstyled">