student opt program and courses, exams, and assessment tables and pagination updated

frontend/src/components/Header/BCHeader.vue

@@ -63,23 +63,29 @@
 
     <v-app-bar v-if="!smallScreen" density="compact">
       <v-toolbar>
-        <v-btn text v-for="link in menuLinks" :key="link.id" class="text-none">
+        <v-btn
+          text
+          v-for="link in menuLinks"
+          :key="link.id"
+          class="text-none"
+          density="compact"
+        >
           <router-link
             :to="link.route"
             style="text-decoration: none; color: inherit"
           >
             {{ link.title }}
           </router-link>
         </v-btn>
-        <v-btn v-if="!profile.pen" class="text-none">
+        <v-btn v-if="!profile.pen" class="text-none" density="compact">
           <a
             id="profile-route"
             class="text-decoration-none text-disabled"
             :disabled="true"
             >Profile (Student Not Loaded)</a
           >
         </v-btn>
-        <v-btn v-else>
+        <v-btn v-else density="compact">
           <router-link
             :to="`/student-profile/${profile.studentID}`"
             id="profile-route"

frontend/src/components/StudentProfile/StudentAssessments.vue

@@ -9,6 +9,7 @@
       :headers="fields"
       showFilter="true"
       title="Assessments"
+      :items-per-page="'-1'"
       :id="id"
     >
       <template

frontend/src/components/StudentProfile/StudentCourses.vue

@@ -9,6 +9,7 @@
           v-if="courses"
           :items="courses"
           :headers="fields"
+          :items-per-page="'-1'"
           :id="id"
           showFilter="true"
           title="studentCourse"

frontend/src/components/StudentProfile/StudentExams.vue

@@ -1,18 +1,17 @@
 <template>
   <div>
-    <v-alert info v-if="!exams">
+    <v-alert info v-if="!studentExams">
       This student does not have any exams.
     </v-alert>
-    <DisplayTable
-      :items="exams"
-      :fields="fields"
-      showFilter="true"
-      title="Assessments"
+    <v-data-table
+      :items="studentExams"
+      :headers="studentExamsHeaders"
+      :items-per-page="'-1'"
     >
       <template v-slot:item.sessionDate="{ item }">
         {{ $filters.formatYYYYMMDate(item.sessionDate) }}
       </template>
-    </DisplayTable>
+    </v-data-table>
   </div>
 </template>
 
@@ -25,15 +24,15 @@ export default {
   props: {},
   computed: {
     ...mapState(useStudentStore, {
-      exams: "getStudentExams",
+      studentExams: "getStudentExams",
     }),
   },
   components: {
     DisplayTable: DisplayTable,
   },
   data: function () {
     return {
-      fields: [
+      studentExamsHeaders: [
         // {
         //   key: "data-table-expand",
         //   title: "",

frontend/src/components/StudentProfile/StudentOptionalPrograms.vue

@@ -22,11 +22,9 @@
         hide-default-footer
       >
         <template v-slot:item.optionalProgramName="{ item }">
-          <div class="pt-2">
-            {{ item.optionalProgramName }} ({{ item.optionalProgramCode }})
-            <br />
-            {{ item.optionalProgramCompletionDate }}
-          </div>
+          {{ item.optionalProgramName }} ({{ item.optionalProgramCode }})
+          <br />
+          {{ item.optionalProgramCompletionDate }}
         </template>
 
         <template v-slot:item.optionalReqMet="{ item }">
@@ -569,22 +567,37 @@ export default {
         {
           key: "data-table-expand",
           title: "",
-          sortable: true,
-          class: "text-left",
         },
         {
           key: "programCode",
           title: "Graduation Program",
-          class: "text-center",
+          cellProps: {
+            style: "vertical-align: baseline;",
+            class: "pt-5 pb-5",
+          },
+        },
+        {
+          key: "optionalProgramName",
+          title: "Optional Program",
+          cellProps: {
+            style: "vertical-align: baseline;",
+            class: "pt-5 pb-5",
+          },
         },
-        { key: "optionalProgramName", title: "Optional Program" },
         { key: "optionalReqMet", title: "Requirements Met" },
         { key: "optionalNonGradReasons", title: "Requirements Not Met" },
         {
           key: "optionalProgramCompletionDate",
           title: "Optional Program Completion Date",
         },
-        { key: "actions", title: "Delete" },
+        {
+          key: "actions",
+          title: "Delete",
+          cellProps: {
+            style: "vertical-align: baseline;",
+            class: "pt-5 pb-5",
+          },
+        },
       ],
     };
   },