Add empty state and button for games and teams

MGM12-de · Dec 8, 2023 · 0bcdb90 · 0bcdb90
1 parent e9cf61c
commit 0bcdb90
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git a/pages/games.vue b/pages/games.vue
@@ -3,6 +3,24 @@
         <UPageHeader title="Games" />
         <UPageBody>
 
+            <UTable :rows="games" :loading="pending">
+                <template #empty-state>
+                    <div class="flex flex-col items-center justify-center py-6 gap-3">
+                        <span class="italic text-sm">No game found!</span>
+                        <UButton label="Add Game" />
+                    </div>
+                </template>
+            </UTable>
+
         </UPageBody>
     </UPage>
-</template>
+</template>
+
+<script setup lang="ts">
+const supabase = useSupabaseClient();
+
+const { pending, data: games } = await useAsyncData('games', async () => {
+    const { data } = await supabase.from('games').select('*');
+    return data
+});
+</script>
diff --git a/pages/teams.vue b/pages/teams.vue
@@ -3,7 +3,14 @@
         <UPageHeader title="Teams" />
         <UPageBody>
 
-            <UTable :rows="teams" :loading="pending" />
+            <UTable :rows="teams" :loading="pending">
+                <template #empty-state>
+                    <div class="flex flex-col items-center justify-center py-6 gap-3">
+                        <span class="italic text-sm">No team found!</span>
+                        <UButton label="Add Team" />
+                    </div>
+                </template>
+            </UTable>
 
         </UPageBody>
     </UPage>