SubmissionType and ExamInformation Comp converted to TS

frontend/src/components/SubmissionTests.vue

@@ -38,7 +38,7 @@ export default {
     },
     expand: {
       type: Boolean,
-      default: false
+      default: true
     }
   },
   data () {

frontend/src/components/SubmissionType.vue

@@ -2,11 +2,10 @@
   <v-layout column>
     <v-card>
       <v-card-title class="title mb-2">{{ name }} - Full score: {{ fullScore }}</v-card-title>
-      <v-expansion-panel expand>
+      <v-expansion-panel expand v-model="expanded">
         <v-expansion-panel-content
           v-for="(item, i) in typeItems"
           :key="i"
-          :value="expandedByDefault[item.title]"
         >
           <div slot="header"><b>{{ item.title }}</b></div>
           <v-card
@@ -31,72 +30,74 @@
   </v-layout>
 </template>
 
-<script>
+<script lang="ts">
+import {Vue, Component, Prop} from 'vue-property-decorator'
 import {highlight} from 'highlight.js'
 import {UI} from '@/store/modules/ui'
 
-export default {
-  name: 'submission-type',
-  props: {
-    name: {
-      type: String,
-      required: true
-    },
-    description: {
-      type: String,
-      required: true
-    },
-    solution: {
-      type: String,
-      required: true
-    },
-    fullScore: {
-      type: Number,
-      required: true
-    },
-    programmingLanguage: {
-      type: String,
-      default: 'c'
-    },
-    reverse: {
-      type: Boolean,
-      default: false
-    },
-    expandedByDefault: {
-      type: Object,
-      default: function () {
-        return {
-          Description: true,
-          Solution: true
-        }
+@Component
+export default class SubmissionType extends Vue {
+  @Prop({
+    type: String,
+    required: true
+  }) name!: string
+  @Prop({
+    type: String,
+    required: true
+  }) description!: string
+  @Prop({
+    type: String,
+    required: true
+  }) solution!: string
+  @Prop({
+    type: Number,
+    required: true
+  }) fullScore!: number
+  @Prop({
+    type: String,
+    default: 'c'
+  }) programmingLanguage!: string
+  @Prop({
+    type: Boolean,
+    default: false
+  }) reverse!: boolean
+  @Prop({
+    type: Object,
+    default: function () {
+      return {
+        Description: true,
+        Solution: true
       }
     }
-  },
-  computed: {
-    typeItems () {
-      let items = [
-        {
-          title: 'Description',
-          text: this.description
-        },
-        {
-          title: 'Solution',
-          text: this.solution
-        }
-      ]
-      if (this.reverse) {
-        return items.reverse()
-      } else {
-        return items
+  }) expandedByDefault!: {Description: boolean, Solution: boolean}
+
+  expanded = this.reverse
+    ? [this.expandedByDefault.Description, this.expandedByDefault.Solution]
+    : [this.expandedByDefault.Solution, this.expandedByDefault.Description]
+
+  get typeItems () {
+    let items = [
+      {
+        title: 'Description',
+        text: this.description
+      },
+      {
+        title: 'Solution',
+        text: this.solution
       }
-    },
-    highlightedSolution () {
-      return highlight(this.programmingLanguage, this.solution, true).value
-    },
-    backgroundColor () {
-      return UI.state.darkMode ? 'grey' : '#F3F3F3'
+    ]
+    if (this.reverse) {
+      return items.reverse()
+    } else {
+      return items
     }
   }
+  get highlightedSolution () {
+    return highlight(this.programmingLanguage, this.solution, true).value
+  }
+  get backgroundColor () {
+    return UI.state.darkMode ? 'grey' : '#F3F3F3'
+  }
 }
 </script>
 

frontend/src/components/student/ExamInformation.vue

@@ -20,9 +20,12 @@
   </table>
 </template>
 
-<script>
-export default {
-  name: 'exam-information',
-  props: ['exam']
+<script lang="ts">
+import {Vue, Component, Prop} from 'vue-property-decorator'
+import { Exam } from '@/models';
+
+@Component
+export default class ExamInformation extends Vue {
+  @Prop(Object) exam!: Exam
 }
 </script>

frontend/src/components/student_list/StudentList.vue

@@ -109,6 +109,7 @@ import {mapActions, mapState} from 'vuex'
 import StudentListMenu from '@/components/student_list/StudentListMenu'
 import StudentListReverseMapper from '@/components/student_list/StudentListReverseMapper'
 import { changeActiveForUser } from '@/api'
+import { getters } from '@/store/getters';
 
 export default {
   components: {
@@ -137,7 +138,7 @@ export default {
       'students'
     ]),
     submissionTypeHeaders () {
-      const subTypes = Object.values(this.$store.state.submissionTypes)
+      const subTypes = Object.values(getters.state.submissionTypes)
       return subTypes.map(type => {
         return {
           pk: type.pk,