Repaired participants list

frontend/src/components/student_list/StudentList.vue

@@ -24,124 +24,101 @@
       </v-card-actions>
     </v-card-title>
     <v-data-table
-      :headers="dynamicHeaders"
+      :headers="headers"
       :items="studentListItems"
       :search="search"
-      :pagination.sync="pagination"
+      sort-by="name"
       :loading="loading"
       item-key="name"
+      show-expand
+      must-sort
     >
-      <template
-        slot="headers"
-        slot-scope="props"
-      >
-        <tr>
-          <th
-            v-for="(header, i) in props.headers"
-            :key="i"
-            :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
-            style="padding: 0;"
-            @click="changeSort(header.value)"
-          >
-            <v-icon>arrow_upward</v-icon>
-            {{ header.text }}
-          </th>
-        </tr>
-      </template>
-      <template
-        slot="items"
-        slot-scope="props"
-      >
+      <template #item="{ expand, isExpanded, item }">
         <tr>
           <td>
             <v-btn
               small
               icon
-              @click="props.expanded = !props.expanded"
+              @click="expand(!isExpanded)"
             >
-              <v-icon v-if="props.expanded">
+              <v-icon v-if="isExpanded">
                 keyboard_arrow_up
               </v-icon>
               <v-icon v-else>
                 keyboard_arrow_down
               </v-icon>
             </v-btn>
-            {{ props.item.name }}
+          </td>
+          <td>
+            {{ item.name }}
+          </td>
+          <td>
             <v-tooltip top>
               <template #activator="{ on }">
                 <div v-on="on">
                   <v-icon
-                    v-if="!props.item.isActive"
+                    v-if="item.isActive"
                     small
                   >
-                    lock
+                    lock_open
                   </v-icon>
                   <v-icon
                     v-else
                     small
                   >
-                    lock_open
+                    lock
                   </v-icon>
                 </div>
               </template>
-              <span v-if="!props.item.isActive">Participant doesn't have access.</span>
+              <span v-if="!item.isActive">Participant doesn't have access.</span>
               <span v-else>Participant has access.</span>
             </v-tooltip>
           </td>
           <td
             v-for="type in submissionTypeHeaders"
             :key="type.pk"
-            style="padding: 0"
             class="text-right"
           >
             <v-btn
-              v-if="props.item[type.pk]"
+              v-if="item[type.pk]"
               small
               rounded
               outlined
               class="submission-button"
               exact
               :to="{name: 'submission-side-view', params: {
-                studentPk: props.item.pk,
-                submissionPk: props.item[type.pk].pk
+                studentPk: item.pk,
+                submissionPk: item[type.pk].pk
               }}"
-              :color="props.item[type.pk].final ? 'green darken-2' : 'grey'"
+              :color="item[type.pk].final ? 'green darken-2' : 'grey'"
               @click="showSubmissionDetails"
             >
-              {{ props.item[type.pk].score }}
+              {{ item[type.pk].score }}
             </v-btn>
             <span v-else>N.A</span>
           </td>
-          <td
-            style="padding: 0 15px;"
-            class="text-right"
-          >
-            {{ props.item.total }}
+          <td class="text-right">
+            {{ item.total }}
           </td>
         </tr>
       </template>
-      <template
-        slot="expand"
-        slot-scope="props"
-      >
-        <v-card flat>
-          <v-card-text>
-            <v-btn
-              v-if="isReviever"
-              @click="changeActiveStatus(props.item)"
-            >
-              {{ props.item.isActive ? 'Revoke access' : 'Grant access' }}
-            </v-btn>
-            <ul class="student-info-list">
-              <li>
-                <b>Modul:</b> {{ props.item.exam }}
-              </li>
-              <li>
-                <b>MatrikelNr:</b> {{ props.item.matrikelNo }}
-              </li>
-            </ul>
-          </v-card-text>
-        </v-card>
+      <template #expanded-item="{ headers, item }">
+        <td :colspan="headers.length">
+          <v-btn
+            v-if="isReviever"
+            @click="changeActiveStatus(item)"
+          >
+            {{ item.isActive ? 'Revoke access' : 'Grant access' }}
+          </v-btn>
+          <ul class="student-info-list">
+            <li>
+              <b>Modul:</b> {{ item.exam }}
+            </li>
+            <li>
+              <b>MatrikelNr:</b> {{ item.matrikelNo }}
+            </li>
+          </ul>
+        </td>
       </template>
     </v-data-table>
   </v-card>
@@ -164,17 +141,6 @@ export default {
     return {
       loading: true,
       search: '',
-      pagination: {
-        sortBy: 'name',
-        rowsPerPage: 25
-      },
-      staticHeaders: [
-        {
-          text: 'Name',
-          align: 'left',
-          value: 'name'
-        }
-      ]
     }
   },
   computed: {
@@ -197,15 +163,25 @@ export default {
           }
         })
     },
-    dynamicHeaders () {
-      const totalScoreHeader = {
-        text: 'Total',
-        align: 'right',
-        value: 'total'
-      }
-      let headers = this.staticHeaders.concat(this.submissionTypeHeaders)
-      headers.push(totalScoreHeader)
-      return headers
+    headers () {
+      return [
+        {
+          text: 'Name',
+          align: 'left',
+          value: 'name',
+        },
+        {
+          text: 'Has Access',
+          align: 'left',
+          value: 'isActive',
+        },
+        ...this.submissionTypeHeaders,
+        {
+          text: 'Total',
+          align: 'right',
+          value: 'total',
+        },
+      ]
     },
     studentListItems () {
       if (!this.loading) {
@@ -260,14 +236,6 @@ export default {
         return acc
       }, 0)
     },
-    changeSort (column) {
-      if (this.pagination.sortBy === column) {
-        this.pagination.descending = !this.pagination.descending
-      } else {
-        this.pagination.sortBy = column
-        this.pagination.descending = false
-      }
-    },
     refresh (opts = { silent: false }) {
       if (!opts.silent) {
         this.loading = true