Resolve "subscription ended on submit"

Closes #139 (closed)

frontend/src/components/subscriptions/SubscriptionList.vue

@@ -6,7 +6,7 @@
         Tasks
       </v-toolbar-title>
       <v-spacer/>
-      <v-btn icon @click="getSubscriptions">
+      <v-btn icon @click="getSubscriptions(false)">
         <v-icon v-if="!updating">refresh</v-icon>
         <v-progress-circular
           v-else
@@ -27,54 +27,65 @@
   </v-card>
 </template>
 
-<script>
+<script lang="ts">
+import Vue from 'vue'
+import Component from 'vue-class-component'
+import { Prop } from 'vue-property-decorator'
 import { mapGetters, mapActions, mapState } from 'vuex'
 import { UI } from '@/store/modules/ui'
 import { actions } from '@/store/actions'
-import SubscriptionCreation from '@/components/subscriptions/SubscriptionCreation'
-import SubscriptionForList from '@/components/subscriptions/SubscriptionForList'
-import SubscriptionsForStage from '@/components/subscriptions/SubscriptionsForStage'
+import SubscriptionCreation from '@/components/subscriptions/SubscriptionCreation.vue'
+import SubscriptionForList from '@/components/subscriptions/SubscriptionForList.vue'
+import SubscriptionsForStage from '@/components/subscriptions/SubscriptionsForStage.vue'
 import { Subscriptions } from '@/store/modules/subscriptions'
 
-export default {
+@Component({
+  name: 'subscription-list',
   components: {
     SubscriptionsForStage,
     SubscriptionForList,
-    SubscriptionCreation },
-  name: 'subscription-list',
-  props: {
-    sidebar: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data () {
-    return {
-      selectedStage: null,
-      updating: false
-    }
+    SubscriptionCreation 
   },
-  computed: {
-    subscriptions () { return Subscriptions.state.subscriptions },
-    stages () { return Subscriptions.availableStages },
-    stagesReadable () { return Subscriptions.availableStagesReadable },
-    showDetail () {
-      return !this.sidebar || (this.sidebar && !UI.state.sideBarCollapsed)
-    }
-  },
-  methods: {
-    async getSubscriptions () {
+})
+export default class SubscriptionList extends Vue {
+  @Prop({type: Boolean, required: true, default: false}) sidebar!: boolean
+
+  selectedStage = null
+  updating = false
+  timer = 0
+
+  get subscriptions () { return Subscriptions.state.subscriptions }
+  get stages () { return Subscriptions.availableStages }
+  get stagesReadable () { return Subscriptions.availableStagesReadable }
+  get showDetail () { 
+    return !this.sidebar || (this.sidebar && !UI.state.sideBarCollapsed) 
+  }
+
+  async getSubscriptions (silent: boolean) {
+    if (silent === false) {
       this.updating = true
-      const subscriptions = await Subscriptions.getSubscriptions()
-      this.updating = false
-      return subscriptions
     }
-  },
-  created () {
-    const typesAndSubscriptions = [actions.updateSubmissionTypes(), Subscriptions.getSubscriptions()]
-    Promise.all(typesAndSubscriptions).then(() => {
+    const subscriptions = await Subscriptions.getSubscriptions()
+    this.updating = false
+    return subscriptions
+  }
+
+  mounted() {
+    this.timer = setInterval(() => {
+      this.getSubscriptions(true)
+    }, 30 * 1e3)
+  }
+
+  beforeDestroy() {
+    clearInterval(this.timer)
+  }
+
+  created() {
+    const submissionTypes = actions.updateSubmissionTypes()
+    const subscriptions = Subscriptions.getSubscriptions()
+    Promise.all([submissionTypes, subscriptions]).then(() => {
       Subscriptions.subscribeToAll()
-      Subscriptions.cleanAssignmentsFromSubscriptions()
+      Subscriptions.cleanAssignmentsFromSubscriptions(undefined)
     })
   }
 }