From 17b77c25c1f4d284584004fbad8f5b1eded1e63d Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sat, 21 May 2022 02:15:18 +0200
Subject: [PATCH] feat: ListTeams script setup

---
 src/views/teams/ListTeams.vue | 35 +++++++++++++----------------------
 1 file changed, 13 insertions(+), 22 deletions(-)

diff --git a/src/views/teams/ListTeams.vue b/src/views/teams/ListTeams.vue
index f8d0b3e07..6a9214ddf 100644
--- a/src/views/teams/ListTeams.vue
+++ b/src/views/teams/ListTeams.vue
@@ -25,29 +25,20 @@
 	</div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
-import TeamService from '../../services/team'
+<script setup lang="ts">
+import {ref, shallowReactive} from 'vue'
+import { useI18n } from 'vue-i18n'
 
-export default defineComponent({
-	name: 'ListTeams',
-	data() {
-		return {
-			teamService: new TeamService(),
-			teams: [],
-		}
-	},
-	created() {
-		this.loadTeams()
-	},
-	mounted() {
-		this.setTitle(this.$t('team.title'))
-	},
-	methods: {
-		async loadTeams() {
-			this.teams = await this.teamService.getAll()
-		},
-	},
+import TeamService from '@/services/team'
+import { useTitle } from '@/composables/useTitle'
+
+const { t } = useI18n()
+useTitle(() => t('team.title'))
+
+const teams = ref([])
+const teamService = shallowReactive(new TeamService())
+teamService.getAll().then((result) => {
+	teams.value = result
 })
 </script>