Show a message when there are no game events / proposals

Author: g3force

frontend/src/components/match/GameEventList.vue

@@ -6,12 +6,15 @@ import {useMatchStateStore} from "@/store/matchState";
 const store = useMatchStateStore()
 
 const gameEvents = computed(() => {
-  return store.matchState.gameEvents
+  return store.matchState.gameEvents!
 })
 </script>
 
 <template>
-  <q-list bordered class="rounded-borders">
+  <q-list bordered class="rounded-borders" v-if="gameEvents.length > 0">
     <GameEventItem :game-event="gameEvent" v-for="(gameEvent, key) in gameEvents" :key="key"/>
   </q-list>
+  <div v-else>
+    No recent game events
+  </div>
 </template>

frontend/src/components/match/GameEventProposalGroupItemList.vue

@@ -6,21 +6,20 @@ import {useMatchStateStore} from "@/store/matchState";
 const store = useMatchStateStore()
 
 const proposalGroups = computed(() => {
-  return store.matchState.proposalGroups
-})
-
-const hasGroups = computed(() => {
-  return proposalGroups.value!.length > 0
+  return store.matchState.proposalGroups!
 })
 </script>
 
 <template>
-  <q-list bordered class="rounded-borders" v-if="hasGroups">
+  <q-list bordered class="rounded-borders" v-if="proposalGroups.length > 0">
     <GameEventProposalGroupItem
       :proposal-group="group"
       :group-id="groupId"
       v-for="(group, groupId) in proposalGroups"
       :key="groupId"
     />
   </q-list>
+  <div v-else>
+    No recent game event proposals
+  </div>
 </template>