Converted several components to TypeScript

.gitlab-ci.yml

@@ -58,17 +58,18 @@ test_flake8:
 
 # ----------------------------- Frontend subsection -------------------------- #
 .test_template_frontend: &test_definition_frontend
-  image: node:carbon
+  image: crbanman/nightwatch
+  when: manual
   before_script:
     - cd frontend/
 
 test_frontend:
   <<: *test_definition_frontend
-  when: manual
+#  when: manual
   stage: test
   script:
     - yarn install
-    - yarn test --single-run
+    - yarn test:e2e
   cache:
     key: "$CI_JOB_NAME"
     paths:

frontend/nightwatch.json

 {
   "globals_path": "nightwatch_globals",
-  "selenium": {
-    "cli_args": {
-      "webdriver.gecko.driver": "/usr/bin/geckodriver"
-    }
-  },
   "test_settings": {
     "chrome": {
       "desiredCapabilities": {

frontend/src/components/feedback_list/FeedbackSearchOptions.vue

@@ -67,7 +67,7 @@ import {FeedbackSearchOptions as SearchOptions} from '@/store/modules/feedback_l
 import {mapStateToComputedGetterSetter} from '@/util/helpers'
 import {Authentication} from '@/store/modules/authentication'
 import { actions } from '@/store/actions'
-import { getters } from '@/store/getters';
+import { getters } from '@/store/getters'
 
 @Component
 export default class FeedbackSearchOptions extends Vue {
@@ -80,12 +80,12 @@ export default class FeedbackSearchOptions extends Vue {
     return this.tutors.map(tutor => tutor.username)
   }
 
-  get showFinal () { return SearchOptions.state.showFinal}
-  get searchOtherUserComments () { return SearchOptions.state.searchOtherUserComments}
-  get caseSensitive () { return SearchOptions.state.caseSensitive}
-  get useRegex () { return SearchOptions.state.useRegex}
-  get filterByTutors () { return SearchOptions.state.filterByTutors}
-  get filterByStage () { return SearchOptions.state.filterByStage}
+  get showFinal () { return SearchOptions.state.showFinal }
+  get searchOtherUserComments () { return SearchOptions.state.searchOtherUserComments }
+  get caseSensitive () { return SearchOptions.state.caseSensitive }
+  get useRegex () { return SearchOptions.state.useRegex }
+  get filterByTutors () { return SearchOptions.state.filterByTutors }
+  get filterByStage () { return SearchOptions.state.filterByStage }
 
   set showFinal (val) {
     SearchOptions.SET_SHOW_FINAL(val)

frontend/src/components/student/ExamInformation.vue

@@ -22,7 +22,7 @@
 
 <script lang="ts">
 import {Vue, Component, Prop} from 'vue-property-decorator'
-import { Exam } from '@/models';
+import { Exam } from '@/models'
 
 @Component
 export default class ExamInformation extends Vue {

frontend/src/components/student_list/StudentList.vue

@@ -109,7 +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';
+import { getters } from '@/store/getters'
 
 export default {
   components: {

frontend/src/pages/student/StudentLayout.vue

@@ -44,7 +44,7 @@
 import {UI} from '@/store/modules/ui'
 import BaseLayout from '@/components/BaseLayout'
 import ExamInformation from '@/components/student/ExamInformation'
-import { StudentPage } from '@/store/modules/student-page';
+import { StudentPage } from '@/store/modules/student-page'
 export default {
   components: {BaseLayout, ExamInformation},
   name: 'student-layout',
@@ -60,10 +60,10 @@ export default {
     }
   },
   computed: {
-    moduleReference () { return StudentPage.state.exam.moduleReference},
-    submissions () { return StudentPage.state.submissionsForList},
-    exam () { return StudentPage.state.exam},
-    visited () { return StudentPage.state.visited},
+    moduleReference () { return StudentPage.state.exam.moduleReference },
+    submissions () { return StudentPage.state.submissionsForList },
+    exam () { return StudentPage.state.exam },
+    visited () { return StudentPage.state.visited },
 
     mini () { return UI.state.mini },
 

frontend/src/pages/student/StudentPage.vue

@@ -16,7 +16,7 @@ import {mapState} from 'vuex'
 import StudentLayout from './StudentLayout.vue'
 import SubmissionList from '@/components/student/SubmissionList.vue'
 import ExamInformation from '@/components/student/ExamInformation.vue'
-import { StudentPage } from '@/store/modules/student-page';
+import { StudentPage } from '@/store/modules/student-page'
 
 export default {
   components: {
@@ -32,10 +32,10 @@ export default {
     }
   },
   computed: {
-    studentName () { return StudentPage.state.studentName},
-    exam () { return StudentPage.state.exam},
-    submissions () { return StudentPage.state.submissionsForList},
-    loaded () { return StudentPage.state.loaded}
+    studentName () { return StudentPage.state.studentName },
+    exam () { return StudentPage.state.exam },
+    submissions () { return StudentPage.state.submissionsForList },
+    loaded () { return StudentPage.state.loaded }
   }
 }
 </script>

frontend/src/pages/student/StudentSubmissionPage.vue

@@ -82,8 +82,8 @@ export default {
     },
     submission () { return SubmissionNotes.submission },
     showFeedback: function (state) { return SubmissionNotes.state.ui.showFeedback },
-    submissionType () { return StudentPage.state.submissionData[this.id].type},
-    feedback () { return StudentPage.state.submissionData[this.$route.params.id].feedback}
+    submissionType () { return StudentPage.state.submissionData[this.id].type },
+    feedback () { return StudentPage.state.submissionData[this.$route.params.id].feedback }
   },
   methods: {
     onRouteMountOrUpdate (routeId) {

frontend/src/store/modules/feedback_list/feedback-search-options.ts

 import {Module} from 'vuex'
 import {RootState} from '@/store/store'
 import { getStoreBuilder } from 'vuex-typex'
-import { Subscription } from '@/models';
+import { Subscription } from '@/models'
 
 export const namespace = 'feedbackSearchOptions'
 

frontend/src/store/modules/student-page.ts

@@ -2,7 +2,7 @@ import {fetchStudentSelfData, fetchStudentSubmissions} from '@/api'
 import {Exam, Submission, SubmissionList} from '@/models'
 import {RootState} from '@/store/store'
 import {Module} from 'vuex'
-import { getStoreBuilder } from 'vuex-typex';
+import { getStoreBuilder } from 'vuex-typex'
 
 export interface StudentPageState {
   studentName: string

frontend/vue.config.js

@@ -8,11 +8,9 @@ module.exports = {
     allowedHosts: ['localhost'],
     host: 'localhost'
   },
-  configureWebpack: {
-    resolve: {
-      alias: {
-        '@': `${projectRoot}/src`
-      }
-    }
+  configureWebpack: config => {
+    config.resolve.alias['@'] = `${projectRoot}/src`
+    // keep_fnames ist set to true because vuex-typex is dependant on the function names
+    config.optimization.minimizer[0].options.uglifyOptions.keep_fnames = true
   }
 }