feat: finish team and settings

src/app/components/games/GameList.vue

@@ -0,0 +1,15 @@
+<template>
+  <section>list</section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api'
+
+export default defineComponent({
+  setup() {
+    return {}
+  },
+})
+</script>
+
+<style lang="scss"></style>

src/app/components/games/GeneratorConfig.vue

@@ -0,0 +1,25 @@
+<template>
+  <v-card flat outlined>
+    <v-card-title>Generator</v-card-title>
+    <v-card-subtitle
+      >Configure the generator to generate your personal fixture
+      schedule.</v-card-subtitle
+    >
+    <v-card-text>
+      <v-btn color="primary" @click="submit">Generate fixtures</v-btn>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api'
+
+export default defineComponent({
+  components: {},
+  setup() {
+    return {}
+  },
+})
+</script>
+
+<style lang="scss"></style>

src/app/components/teams/AddTeam.vue

@@ -1,51 +1,52 @@
 <template>
-  <v-form ref="formRef" v-model="valid" novalidate>
-    <v-row v-if="isLoading" style="height: 110px">
-      <v-col cols="12" sm="8" lg="6">
-        <v-skeleton-loader height="56" type="image"></v-skeleton-loader>
-      </v-col>
-      <v-col cols="12" sm="4" lg="6">
-        <v-skeleton-loader
-          height="56"
-          width="112"
-          type="image"
-        ></v-skeleton-loader>
-      </v-col>
-    </v-row>
+  <v-card flat outlined>
+    <v-card-title>Add a participant</v-card-title>
+    <v-card-subtitle>List of the participants</v-card-subtitle>
+    <v-card-text>
+      <v-form ref="formRef" v-model="valid" novalidate>
+        <v-row v-if="isLoading" style="height: 110px;">
+          <v-col cols="12" sm="8" lg="6">
+            <v-skeleton-loader height="56" type="image"></v-skeleton-loader>
+          </v-col>
+          <v-col cols="12" sm="4" lg="6">
+            <v-skeleton-loader
+              height="56"
+              width="112"
+              type="image"
+            ></v-skeleton-loader>
+          </v-col>
+        </v-row>
 
-    <v-row v-if="!isLoading">
-      <v-col cols="12" sm="8" lg="6">
         <v-text-field
           v-model="teamNameModel"
           :label="$t('teams.add.label')"
           :loading="isSubmitting"
           :rules="[rules.isRequired]"
           maxlength="45"
           :counter="45"
+          style="max-width: 450px;"
           filled
           @keypress.enter.native="submit($event)"
         ></v-text-field>
-      </v-col>
-      <v-col cols="12" sm="4" lg="6">
+
         <v-btn
           color="primary"
-          height="56"
           :loading="isSubmitting"
           :disabled="isSubmitting || !valid"
           @click="submit($event)"
         >
           {{ $t('teams.add.submit') }}
         </v-btn>
-      </v-col>
-    </v-row>
 
-    <v-snackbar v-model="snackbar" bottom color="error">
-      {{ $t('teams.add.failed') }}
-      <v-btn dark text @click="snackbar = false">
-        {{ $t('common.close') }}
-      </v-btn>
-    </v-snackbar>
-  </v-form>
+        <v-snackbar v-model="snackbar" bottom color="error">
+          {{ $t('teams.add.failed') }}
+          <v-btn dark text @click="snackbar = false">
+            {{ $t('common.close') }}
+          </v-btn>
+        </v-snackbar>
+      </v-form>
+    </v-card-text>
+  </v-card>
 </template>
 
 <script lang="ts">

src/app/components/teams/TeamItem.vue

@@ -1,12 +1,12 @@
 <template>
-  <v-list-item>
-    <v-list-item-avatar>
+  <v-list-item class="team-item">
+    <v-list-item-avatar style="background: #f0f0f0;">
       {{ initials(team.name) }}
     </v-list-item-avatar>
     <v-list-item-content>
       <v-list-item-title>{{ team.name }}</v-list-item-title>
     </v-list-item-content>
-    <v-list-item-action>
+    <v-list-item-action class="team-item__action">
       <v-btn text color="primary" v-if="!isRemoving" @click="remove(team)">{{
         $t('common.delete')
       }}</v-btn>
@@ -61,4 +61,23 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+.team-item {
+  .team-item__action {
+    visibility: hidden;
+    opacity: 0;
+  }
+  &:hover {
+    background: lighten(#5f3dc4, 45);
+    .team-item__action {
+      visibility: visible;
+      opacity: 1;
+    }
+
+    .v-avatar {
+      background: #5f3dc4 !important;
+      color: #fff !important;
+    }
+  }
+}
+</style>

src/app/components/teams/TeamList.vue

@@ -1,28 +1,32 @@
 <template>
-  <section>
-    <v-skeleton-loader
-      v-if="isLoading"
-      type="list-item-avatar, divider, list-item-avatar, divider, list-item-avatar"
-    ></v-skeleton-loader>
+  <v-card flat outlined>
+    <v-card-title>List of the participants</v-card-title>
+    <v-card-subtitle>List of the participants</v-card-subtitle>
+    <v-card-actions>
+      <v-skeleton-loader
+        v-if="isLoading"
+        type="list-item-avatar, divider, list-item-avatar, divider, list-item-avatar"
+      ></v-skeleton-loader>
 
-    <div class="no-data" v-if="!isLoading && teams.length === 0">
-      <font-awesome-icon icon="users" />
-      <h3 class="title">No teams yet</h3>
-      <p class="body-1">Add teams to start your tournament</p>
-    </div>
+      <div class="no-data" v-if="!isLoading && teams.length === 0">
+        <font-awesome-icon icon="users" />
+        <h3 class="title">No teams yet</h3>
+        <p class="body-1">Add teams to start your tournament</p>
+      </div>
 
-    <v-list v-if="!isLoading">
-      <template v-for="(team, index) in teams">
-        <TeamItem
-          :key="team.name"
-          :team="team"
-          :index="index"
-          @removed="teamIndex => removed(teamIndex)"
-        />
-        <v-divider v-if="index + 1 < teams.length" :key="index"></v-divider>
-      </template>
-    </v-list>
-  </section>
+      <v-list v-if="!isLoading" style="width: 100%;">
+        <template v-for="(team, index) in teams">
+          <TeamItem
+            :key="team.name"
+            :team="team"
+            :index="index"
+            @removed="teamIndex => removed(teamIndex)"
+          />
+          <v-divider v-if="index + 1 < teams.length" :key="index"></v-divider>
+        </template>
+      </v-list>
+    </v-card-actions>
+  </v-card>
 </template>
 
 <script lang="ts">

src/app/components/teams/Teams.vue

@@ -1,6 +1,8 @@
 <template>
   <section>
     <AddTeam @input="newTeam => addNewTeam(newTeam)" :is-loading="isLoading" />
+    <br />
+    <br />
     <TeamList
       :teams="teams"
       @removed="teamIndex => removed(teamIndex)"

src/app/components/tournament/InvitationCard.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="d-flex justify-center" style="width: 100%;">
     <v-card max-width="420" style="margin-top: 12px; width: 100%;">
-      <v-card-title class="headline">
+      <v-card-title class="title">
         {{ $t('tournament.invitation.title') }}
       </v-card-title>
       <v-card-subtitle>

src/app/components/tournament/NavBar.vue

@@ -1,23 +1,43 @@
 <template>
   <v-container>
     <v-tabs centered fixed-tabs background-color="transparent" dark>
-      <v-tab link :to="{ name: 'tournament.teams', params: { hash: hash } }">
+      <v-tab
+        v-if="isOpen || isPlanable"
+        link
+        :to="{ name: 'tournament.teams', params: { hash: hash } }"
+      >
         {{ $t('teams.title') }}
       </v-tab>
 
-      <v-tab link :to="{ name: 'tournament.games', params: { hash: hash } }">
+      <v-tab
+        v-if="isPlanable && isAdmin"
+        link
+        :to="{ name: 'tournament.generator', params: { hash: hash } }"
+      >
+        {{ $t('generator.title') }}
+      </v-tab>
+
+      <v-tab
+        v-if="isPlayable || isClosed"
+        link
+        :to="{ name: 'tournament.games', params: { hash: hash } }"
+      >
         {{ $t('games.title') }}
       </v-tab>
 
       <v-tab
-        v-if="!isOpen"
+        v-if="isPlayable || isClosed"
         link
         :to="{ name: 'tournament.ranking', params: { hash: hash } }"
       >
         {{ $t('ranking.title') }}
       </v-tab>
 
-      <v-tab link :to="{ name: 'tournament.settings', params: { hash: hash } }">
+      <v-tab
+        v-if="isAdmin"
+        link
+        :to="{ name: 'tournament.settings', params: { hash: hash } }"
+      >
         {{ $t('settings.title') }}
       </v-tab>
     </v-tabs>
@@ -30,14 +50,25 @@ import { useTournament } from '../../reactive/tournament.state'
 
 export default defineComponent({
   setup(props, { root }) {
-    const { tournament, isOpen } = useTournament()
+    const {
+      tournament,
+      isOpen,
+      isPlanable,
+      isPlayable,
+      isClosed,
+      isAdmin,
+    } = useTournament()
 
     const hash = computed(() => root.$route.params.hash)
 
     return {
       hash,
       tournament,
       isOpen,
+      isPlanable,
+      isPlayable,
+      isClosed,
+      isAdmin,
     }
   },
 })

src/app/dto/tournament-state.ts

@@ -1,5 +1,6 @@
 export enum TournamentState {
   Open = 'OPEN',
+  Planable = 'PLANABLE',
   Playable = 'PLAYABLE',
   Closed = 'CLOSED',
 }

src/app/reactive/tournament.state.ts

@@ -19,6 +19,9 @@ export function useTournament() {
   const loadTournamentIsLoading = ref(false)
 
   const isOpen = computed(() => tournament.state === TournamentState.Open)
+  const isPlanable = computed(
+    () => tournament.state === TournamentState.Planable,
+  )
   const isPlayable = computed(
     () => tournament.state === TournamentState.Playable,
   )
@@ -67,6 +70,7 @@ export function useTournament() {
     loadTournamentIsLoading,
     loadTournamentHasFailed,
     isPlayable,
+    isPlanable,
     isOpen,
     isClosed,
   }

src/app/router/routes.ts

@@ -42,6 +42,11 @@ export const routes: RouteConfig[] = [
         name: 'tournament.teams',
         component: () => import('../views/TournamentTeams.vue'),
       },
+      {
+        path: '/tournament/:hash/generator',
+        name: 'tournament.generator',
+        component: () => import('../views/TournamentGenerator.vue'),
+      },
       {
         path: '/tournament/:hash/games',
         name: 'tournament.games',

src/app/views/Tournament.vue

@@ -33,7 +33,7 @@
             >
           </v-row>
           <InvitationCard
-            v-if="showInviationCard && isOpen"
+            v-if="showInviationCard && isOpen && isAdmin"
             :visitor-id="visitorId"
             @close="() => (showInviationCard = false)"
           />
@@ -65,6 +65,7 @@ export default defineComponent({
   setup(props, { root }) {
     const {
       isOpen,
+      isAdmin,
       loadTournament,
       tournament,
       loadTournamentIsLoading,
@@ -97,6 +98,7 @@ export default defineComponent({
       state,
       visitorId,
       isOpen,
+      isAdmin,
       hasTournament,
       loadTournamentIsLoading,
       showInviationCard,

src/app/views/TournamentGames.vue

@@ -3,16 +3,22 @@
     <v-container>
       <Heading size="small" padded> {{ $t('games.title') }}</Heading>
       <p class="body-1">{{ $t('games.description.open') }}</p>
+      <br />
+      <GeneratorConfig />
+      <br />
+      <GameList />
     </v-container>
   </section>
 </template>
 
 <script lang="ts">
 import { defineComponent } from '@vue/composition-api'
 import Heading from '../components/Heading.vue'
+import GeneratorConfig from '../components/games/GeneratorConfig.vue'
+import GameList from '../components/games/GameList.vue'
 
 export default defineComponent({
-  components: { Heading },
+  components: { Heading, GeneratorConfig, GameList },
 
   setup() {
     return {}