refactor: #5 create tournament mixin (#19)

src/app/components/GameRow.vue

@@ -38,16 +38,17 @@
 </template>
 
 <script lang="ts">
-  import { Component, Prop, Vue } from 'vue-property-decorator'
+  import { Component, Mixins, Prop } from 'vue-property-decorator'
   import { Game } from '@/app/models/Game'
   import { RequestState } from '@/app/models/States'
   import { API } from '@/app/api'
   import { LogdownInstance } from '@/types/logdown'
   import { Action } from 'vuex-class'
   import { FixtruesStoreActions } from '@/app/store/accessors'
+  import TournamentMixin from '@/app/mixins/admin/Tournament'
 
   @Component
-  export default class GameRow extends Vue {
+  export default class GameRow extends Mixins(TournamentMixin) {
     logger!: LogdownInstance
     hostScore: string = ''
     guestScore: string = ''
@@ -99,7 +100,7 @@
       this.logger.info('updateGameScore - hasScoreChanged', this.hasScoreChanged)
       if (this.isPlayed && this.hasScoreChanged) {
         this.state = RequestState.PENDING
-        const game = await API.Tournament.of(this.$route.params.id).Game.update(this.game.id, {
+        const game = await API.Tournament.of(this.hash).Game.update(this.game.id, {
           hostScore: parseInt(this.hostScore, 10),
           guestScore: parseInt(this.guestScore, 10),
         })

src/app/components/RankingTable.vue

@@ -37,13 +37,14 @@
 </template>
 
 <script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator'
+  import { Component, Mixins } from 'vue-property-decorator'
   import { Ranking } from '@/app/models/Ranking'
   import { RequestState } from '@/app/models/States'
   import { API } from '@/app/api'
+  import TournamentMixin from '@/app/mixins/admin/Tournament'
 
   @Component
-  export default class RankingTable extends Vue {
+  export default class RankingTable extends Mixins(TournamentMixin) {
 
     rankings: Ranking[] = []
     state: RequestState = RequestState.PRISTINE
@@ -54,7 +55,7 @@
 
     async loadRanking() {
       this.state = RequestState.PENDING
-      this.rankings = await API.Tournament.of(this.$route.params.id).Ranking.findAll()
+      this.rankings = await API.Tournament.of(this.hash).Ranking.findAll()
       this.state = RequestState.SUCCESSFUL
     }
 

src/app/components/TournamentTeamTable.vue

@@ -38,21 +38,22 @@
 </template>
 
 <script lang="ts">
-  import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
+  import { Component, Prop, Mixins, Watch } from 'vue-property-decorator'
   import { Tournament } from '@/app/models/Tournament'
   import { RequestState } from '@/app/models/States'
   import { API } from '@/app/api'
   import { Team } from '@/app/models/Team'
   import TournamentAdminAddTeamControl from '@/app/components/forms/TournamentAdminAddTeamControl.vue'
   import { Action } from 'vuex-class'
   import { FixtruesStoreActions } from '../store/accessors'
+  import TournamentMixin from '@/app/mixins/admin/Tournament'
 
   @Component({
     components: {
       TournamentAdminAddTeamControl,
     },
   })
-  export default class TournamentTeamTable extends Vue {
+  export default class TournamentTeamTable extends Mixins(TournamentMixin) {
     @Prop({ required: true })
     tournament!: Tournament
 
@@ -79,7 +80,7 @@
 
     async deleteTeam(team: Team) {
       await API.Tournament.of(this.tournament.visitorId).Team.removeTeam(team.id)
-      await this.generateFixtures(this.$route.params.id)
+      await this.generateFixtures(this.hash)
       this.loadTeams()
     }
   }

src/app/components/admin/StartNotification.vue

@@ -19,19 +19,20 @@
 </template>
 
 <script lang="ts">
-  import { Component, Emit, Prop, Vue, Watch } from 'vue-property-decorator'
-  import { Tournament } from '../../models/Tournament'
+  import { Component, Emit, Mixins, Prop, Watch } from 'vue-property-decorator'
+  import { Tournament } from '@/app/models/Tournament'
   import { Getter, Action } from 'vuex-class'
   import {
     TournamentStoreGetters,
     TournamentStoreActions,
   } from '@/app/store/accessors'
-  import { RequestState } from '../../models/States'
+  import { RequestState } from '@/app/models/States'
   import { API } from '@/app/api'
-  import { TournamentState } from '../../models/TournamentState'
+  import { TournamentState } from '@/app/models/TournamentState'
+  import TournamentMixin from '@/app/mixins/admin/Tournament'
 
   @Component
-  export default class StartNotification extends Vue {
+  export default class StartNotification extends Mixins(TournamentMixin) {
     state: RequestState = RequestState.PRISTINE
 
     @Getter(TournamentStoreGetters.Tournament)
@@ -46,11 +47,11 @@
 
     async startTournament() {
       this.state = RequestState.PENDING
-      await API.Tournament.update(this.$route.params.id, {
+      await API.Tournament.update(this.hash, {
         ...this.tournament,
         state: TournamentState.Playable,
       })
-      await this.loadTournament(this.$route.params.id)
+      await this.loadTournament(this.hash)
       this.state = RequestState.SUCCESSFUL
     }
 

src/app/components/forms/TournamentAdminAddTeamControl.vue

@@ -16,15 +16,16 @@
 </template>
 
 <script lang="ts">
-  import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
+  import { Component, Emit, Mixins, Prop } from 'vue-property-decorator'
   import { RequestState } from '@/app/models/States'
   import { Tournament } from '@/app/models/Tournament'
   import { API } from '@/app/api'
   import { Action } from 'vuex-class'
   import { FixtruesStoreActions } from '@/app/store/accessors'
+  import TournamentMixin from '@/app/mixins/admin/Tournament'
 
   @Component
-  export default class TournamentAdminAddTeamControl extends Vue {
+  export default class TournamentAdminAddTeamControl extends Mixins(TournamentMixin) {
     teamName = ''
     hasError = false
     state: RequestState = RequestState.PRISTINE
@@ -53,7 +54,7 @@
           })
           this.teamName = ''
           this.state = RequestState.PRISTINE
-          await this.generateFixtures(this.$route.params.id)
+          await this.generateFixtures(this.hash)
           this.notifyAddTeam()
         } catch (_) {
           this.$buefy.snackbar.open({

src/app/components/forms/TournamentOptionsForm.vue

@@ -72,7 +72,7 @@
 </template>
 
 <script lang="ts">
-  import { Component, Vue, Watch } from 'vue-property-decorator'
+  import { Component, Mixins, Watch } from 'vue-property-decorator'
   import { minLength, required } from 'vuelidate/lib/validators'
   import { RequestState } from '@/app/models/States'
   import { API } from '@/app/api'
@@ -82,14 +82,15 @@
     TournamentStoreGetters,
   } from '@/app/store/accessors'
   import { Tournament } from '@/app/models/Tournament'
+  import TournamentMixin from '@/app/mixins/admin/Tournament'
 
   @Component({
     validations: {
       name: { required, minLength: minLength(1) },
       owner: { required, minLength: minLength(1) },
     },
   })
-  export default class TournamentOptionsForm extends Vue {
+  export default class TournamentOptionsForm extends Mixins(TournamentMixin) {
     state: RequestState = RequestState.PRISTINE
     name = ''
     owner = ''
@@ -130,7 +131,7 @@
 
     async deleteTournament() {
       this.state = RequestState.PENDING
-      await API.Tournament.delete(this.$route.params.id)
+      await API.Tournament.delete(this.hash)
       await this.$router.replace({ name: 'home' })
       this.state = RequestState.SUCCESSFUL
     }
@@ -139,12 +140,12 @@
       this.$v.$touch()
       if (!this.$v.$invalid) {
         this.state = RequestState.PENDING
-        await API.Tournament.update(this.$route.params.id, {
+        await API.Tournament.update(this.hash, {
           name: this.name,
           owner: this.owner,
           state: this.tournament.state,
         })
-        await this.loadTournament(this.$route.params.id)
+        await this.loadTournament(this.hash)
         this.state = RequestState.SUCCESSFUL
       }
     }

src/app/mixins/admin/Tournament.ts

@@ -0,0 +1,8 @@
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component
+export default class TournamentMixin extends Vue {
+  get hash() {
+    return this.$route.params.id
+  }
+}

src/app/views/admin/TournamentAdminDashboard.vue

@@ -38,7 +38,7 @@
 </template>
 
 <script lang="ts">
-  import { Component, Vue, Watch } from 'vue-property-decorator'
+  import { Component, Mixins, Watch } from 'vue-property-decorator'
   import { Tournament } from '@/app/models/Tournament'
   import { RequestState } from '@/app/models/States'
   import NotFoundHero from '@/app/components/NotFoundHero.vue'
@@ -51,6 +51,7 @@
     TournamentStoreActions,
     TournamentStoreGetters,
   } from '@/app/store/accessors'
+  import TournamentMixin from '@/app/mixins/admin/Tournament'
 
   @Component({
     components: {
@@ -61,7 +62,7 @@
       Footer,
     },
   })
-  export default class TournamentAdminDashboard extends Vue {
+  export default class TournamentAdminDashboard extends Mixins(TournamentMixin) {
     isInvitationVisible = false
     isStartingVisible = false
 
@@ -83,14 +84,14 @@
     }
 
     mounted() {
-      this.loadTournament(this.$route.params.id)
+      this.loadTournament(this.hash)
     }
 
     @Watch('tournament')
     verifyAdmin() {
       if (
         this.tournament &&
-        this.tournament.visitorId === this.$route.params.id
+        this.tournament.visitorId === this.hash
       ) {
         this.$router.replace({
           name: 'tournament.teams',

src/app/views/admin/TournamentAdminFixtures.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator'
+  import { Component, Mixins } from 'vue-property-decorator'
   import TournamentAdminTabs from '@/app/components/admin/TournamentAdminTabs.vue'
   import {
     AdminTabStoreActions,
@@ -40,15 +40,16 @@
   import { Game } from '@/app/models/Game'
   import GameRow from '@/app/components/GameRow.vue'
   import { AdminTabs } from '@/app/constants/tabs'
-  import { Tournament } from '../../models/Tournament'
+  import { Tournament } from '@/app/models/Tournament'
+  import TournamentMixin from '@/app/mixins/admin/Tournament'
 
   @Component({
     components: {
       GameRow,
       TournamentAdminTabs,
     },
   })
-  export default class TournamentAdminFixtures extends Vue {
+  export default class TournamentAdminFixtures extends Mixins(TournamentMixin) {
     @Getter(FixtruesStoreGetters.Rounds)
     rounds!: Game[][]
 
@@ -73,11 +74,11 @@
 
     mounted() {
       this.activateTab(AdminTabs.Fixtures)
-      this.loadFixtures(this.$route.params.id)
+      this.loadFixtures(this.hash)
     }
 
     generate() {
-      this.generateFixtures(this.$route.params.id)
+      this.generateFixtures(this.hash)
     }
   }
 </script>

src/app/views/tournament/TournamentDashboard.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-  import { Component, Vue, Watch } from 'vue-property-decorator'
+  import { Component, Mixins, Watch } from 'vue-property-decorator'
   import { Action, Getter } from 'vuex-class'
   import {
     TournamentStoreActions,
@@ -24,6 +24,7 @@
   import { RequestState } from '@/app/models/States'
   import { Tournament } from '@/app/models/Tournament'
   import NotFoundHero from '@/app/components/NotFoundHero.vue'
+  import TournamentMixin from '@/app/mixins/admin/Tournament'
   import TournamentHeading from '@/app/components/TournamentHeading.vue'
   import Footer from '@/app/components/layout/Footer.vue'
 
@@ -34,7 +35,7 @@
       Footer,
     },
   })
-  export default class TournamentDashboard extends Vue {
+  export default class TournamentDashboard extends Mixins(TournamentMixin) {
     @Getter(TournamentStoreGetters.Tournament)
     tournament!: Tournament
 
@@ -53,7 +54,7 @@
     }
 
     mounted() {
-      this.loadTournament(this.$route.params.id)
+      this.loadTournament(this.hash)
     }
   }
 </script>