feat(ranking): add ranking table

.eslintrc.js

@@ -1,21 +1,21 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
   },
   extends: [
-    "plugin:vue/essential",
-    "eslint:recommended",
-    "@vue/typescript/recommended",
-    "@vue/prettier",
-    "@vue/prettier/@typescript-eslint"
+    'plugin:vue/essential',
+    'eslint:recommended',
+    '@vue/typescript/recommended',
+    '@vue/prettier',
+    '@vue/prettier/@typescript-eslint',
   ],
   parserOptions: {
-    ecmaVersion: 2020
+    ecmaVersion: 2020,
   },
   rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     '@typescript-eslint/no-explicit-any': 'off',
-  }
-};
+  },
+}

package.json

@@ -16,7 +16,8 @@
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "format": "prettier --write \"src/**/*.ts\" \"tests/**/*.ts\"",
-    "prebuild": "rimraf dist"
+    "prebuild": "rimraf dist",
+    "test": "echo \"Error: no test specified\" && exit 0"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.28",

src/app/components/form/TextInput.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="field copa-field" :class="loading ? 'is-loading' : ''">
     <label v-if="label" class="label">{{ $t(label) }}</label>
-    <p :class="`control ${hasIconLeft ? 'has-icons-left' : ''} has-icons-right`">
+    <p
+      :class="`control ${hasIconLeft ? 'has-icons-left' : ''} has-icons-right`"
+    >
       <input
         class="input"
         :class="state"
@@ -34,15 +36,15 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, watch } from "@vue/composition-api"
+import { computed, defineComponent, ref, watch } from '@vue/composition-api'
 
 export default defineComponent({
   props: {
     value: [Number, String],
     label: String,
     type: {
       type: String,
-      default: "text",
+      default: 'text',
     },
     state: String,
     message: String,
@@ -62,7 +64,7 @@ export default defineComponent({
 
     const onInput = (event: any) => {
       modelValue.value = event.target.value
-      emit("input", modelValue.value)
+      emit('input', modelValue.value)
     }
 
     const inputListeners = computed(() => ({
@@ -78,32 +80,32 @@ export default defineComponent({
       hasIconRight: computed(() => !!props.state || !!props.loading),
       iconRight: computed(() => {
         if (props.loading) {
-          return ""
+          return ''
         }
         if (props.state) {
-          if (props.state === "is-success") {
-            return "check"
-          } else if (props.state === "is-danger") {
-            return "exclamation"
-          } else if (props.state === "is-warning") {
-            return "exclamation-triangle"
+          if (props.state === 'is-success') {
+            return 'check'
+          } else if (props.state === 'is-danger') {
+            return 'exclamation'
+          } else if (props.state === 'is-warning') {
+            return 'exclamation-triangle'
           }
         }
-        return ""
+        return ''
       }),
       iconRightClass: computed(() => {
         if (props.state) {
           return `has-text-${props.state.substring(3)}`
         }
-        return ""
+        return ''
       }),
     }
   },
 })
 </script>
 
 <style lang="scss">
-@import "src/styles/utilities/all";
+@import 'src/styles/utilities/all';
 
 .copa-field {
   position: relative;
@@ -141,7 +143,7 @@ export default defineComponent({
 
   .control {
     &::after {
-      content: "";
+      content: '';
       position: absolute;
       bottom: 0;
       height: 0;

src/app/components/ranking/Ranking.vue

@@ -0,0 +1,94 @@
+<template>
+  <section>
+    <v-card flat outlined>
+      <v-skeleton-loader v-if="isLoading" type="table-tbody" />
+
+      <v-data-table
+        v-if="!isLoading"
+        :headers="headers"
+        :items="ranking"
+        disable-sort
+        disable-filtering
+        disable-pagination
+        hide-default-footer
+        sort-by="position"
+      />
+    </v-card>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent, onBeforeMount, ref } from '@vue/composition-api'
+import { RankingDto } from '../../dto/ranking.dto'
+import { API } from '../../api'
+
+export default defineComponent({
+  components: {},
+  setup(props, { root }) {
+    const isLoading = ref(false)
+    const ranking = ref<RankingDto[]>([])
+
+    async function loadRanking() {
+      isLoading.value = true
+
+      const response = await API.Tournament.getRanking(root.$route.params.hash)
+
+      if (response.isSuccessful && response.data) {
+        ranking.value = response.data
+      }
+
+      isLoading.value = false
+    }
+
+    const headers = [
+      {
+        text: root.$t('ranking.table.position'),
+        value: 'position',
+        align: 'start',
+      },
+      {
+        text: root.$t('ranking.table.team'),
+        value: 'team.name',
+      },
+      {
+        text: root.$t('ranking.table.played'),
+        value: 'played',
+      },
+      {
+        text: root.$t('ranking.table.won'),
+        value: 'won',
+      },
+      {
+        text: root.$t('ranking.table.drawn'),
+        value: 'drawn',
+      },
+      {
+        text: root.$t('ranking.table.lost'),
+        value: 'lost',
+      },
+      {
+        text: root.$t('ranking.table.goalsFor'),
+        value: 'goals',
+      },
+      {
+        text: root.$t('ranking.table.goalsAgainst'),
+        value: 'goalsAgainst',
+      },
+      {
+        text: root.$t('ranking.table.points'),
+        value: 'points',
+      },
+    ]
+
+    onBeforeMount(() => loadRanking())
+
+    return {
+      headers,
+      ranking,
+      isLoading,
+    }
+  },
+})
+</script>
+
+<style lang="scss"></style>

src/app/dto/update-game.dto.ts

@@ -1,4 +1,3 @@
-
 export class UpdateGameDto {
   readonly hostScore!: number
   readonly guestScore!: number

src/app/views/TournamentRanking.vue

@@ -2,16 +2,18 @@
   <section>
     <v-container>
       <Heading size="small" padded>Ranking</Heading>
+      <Ranking />
     </v-container>
   </section>
 </template>
 
 <script lang="ts">
 import { defineComponent } from '@vue/composition-api'
 import Heading from '../components/Heading.vue'
+import Ranking from '../components/ranking/Ranking.vue'
 
 export default defineComponent({
-  components: { Heading },
+  components: { Heading, Ranking },
 
   setup() {
     return {}

src/i18n/en.ts

@@ -69,7 +69,11 @@ export default {
     state: {
       open: {
         label: 'Open',
-        hint: 'Tournament is in pre configure and registraion phase',
+        hint: 'Tournament is in pre configure and registration phase',
+      },
+      playable: {
+        label: 'Playable',
+        hint: 'Tournament is configured and ready to be played',
       },
     },
     invitation: {
@@ -86,6 +90,17 @@ export default {
   },
   ranking: {
     title: 'Ranking',
+    table: {
+      position: 'Position',
+      team: 'Team',
+      played: 'Played',
+      won: 'Won',
+      drawn: 'Drawn',
+      lost: 'Lost',
+      goalsFor: 'Goals For',
+      goalsAgainst: 'Goals Against',
+      points: 'Points',
+    },
   },
   games: {
     title: 'Fixtures',

src/plugins/eventbus.plugin.ts

@@ -7,7 +7,7 @@
 import Vue, { PluginObject } from 'vue'
 
 export const EventBus: PluginObject<any> = {
-  install(VueInstance, options): void {
+  install(VueInstance): void {
     const eventBus = new Vue()
     VueInstance.$eventBus = eventBus
     VueInstance.prototype.$eventBus = eventBus

src/types/logdown.d.ts

@@ -1,4 +1,4 @@
-import Vue, { ComponentOptions, PluginFunction, AsyncComponent } from 'vue'
+import { PluginFunction } from 'vue'
 
 type LogdownBuilder = (scope: string) => LogdownInstance