From 709786f2c67513f30fa9d86977e8237cea1561b8 Mon Sep 17 00:00:00 2001 From: Dominik Seeger <dominik.seeger@gmx.net> Date: Wed, 6 Mar 2019 14:48:52 +0100 Subject: [PATCH] refactor to class component, also poll available submissions regulary --- .../subscriptions/SubscriptionList.vue | 85 +++++++++++-------- 1 file changed, 48 insertions(+), 37 deletions(-) diff --git a/frontend/src/components/subscriptions/SubscriptionList.vue b/frontend/src/components/subscriptions/SubscriptionList.vue index fcdf863c..8a77daa0 100644 --- a/frontend/src/components/subscriptions/SubscriptionList.vue +++ b/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(true) }) } } -- GitLab