chore: convert edit team to script setup

src/views/teams/EditTeam.vue

@@ -84,7 +84,7 @@
 			</div>
 			<table class="table has-actions is-striped is-hoverable is-fullwidth">
 				<tbody>
-				<tr :key="m.id" v-for="m in team.members">
+				<tr :key="m.id" v-for="m in team?.members">
 					<td>{{ m.getDisplayName() }}</td>
 					<td>
 						<template v-if="m.id === userInfo.id">
@@ -116,7 +116,7 @@
 						</x-button>
 						<x-button
 							:loading="teamMemberService.loading"
-							@click="() => {member = m; showUserDeleteModal = true}"
+							@click="() => {memberToDelete = m; showUserDeleteModal = true}"
 							class="is-danger"
 							v-if="m.id !== userInfo.id"
 							icon="trash-alt"
@@ -138,7 +138,7 @@
 
 				<template #text>
 					<p>{{ $t('team.edit.delete.text1') }}<br/>
-					{{ $t('team.edit.delete.text2') }}</p>
+						{{ $t('team.edit.delete.text2') }}</p>
 				</template>
 			</modal>
 		</transition>
@@ -146,26 +146,25 @@
 		<transition name="modal">
 			<modal
 				@close="showUserDeleteModal = false"
-				@submit="deleteUser()"
+				@submit="deleteMember()"
 				v-if="showUserDeleteModal"
 			>
 				<template #header><span>{{ $t('team.edit.deleteUser.header') }}</span></template>
 
 				<template #text>
 					<p>{{ $t('team.edit.deleteUser.text1') }}<br/>
-					{{ $t('team.edit.deleteUser.text2') }}</p>
+						{{ $t('team.edit.deleteUser.text2') }}</p>
 				</template>
 			</modal>
 		</transition>
 	</div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import {defineComponent} from 'vue'
+import {computed, ref} from 'vue'
 
-import AsyncEditor from '@/components/input/AsyncEditor'
+import Editor from '@/components/input/AsyncEditor'
-import {mapState} from 'vuex'
+import {useStore} from 'vuex'
-import { i18n } from '@/i18n'
 
 import TeamService from '../../services/team'
 import TeamModel from '../../models/team'
@@ -176,142 +175,124 @@ import UserService from '../../services/user'
 import Rights from '../../models/constants/rights.json'
 
 import Multiselect from '@/components/input/multiselect.vue'
+import {useRoute, useRouter} from 'vue-router'
+import {useTitle} from '@/composables/useTitle'
+import {useI18n} from 'vue-i18n'
+import {success} from '@/message'
 
-export default defineComponent({
+const store = useStore()
-	name: 'EditTeam',
+const route = useRoute()
-	data() {
+const router = useRouter()
-		return {
+const {t} = useI18n()
-			teamService: new TeamService(),
-			teamMemberService: new TeamMemberService(),
-			team: TeamModel,
-			teamId: this.$route.params.id,
-			member: TeamMemberModel,
 
-			showDeleteModal: false,
+const userIsAdmin = computed(() => {
-			showUserDeleteModal: false,
+	return (
-
+		team.value &&
-			newMember: UserModel,
+		team.value.maxRight &&
-			foundUsers: [],
+		team.value.maxRight > Rights.READ
-			userService: new UserService(),
+	)
-
-			showError: false,
-			title: '',
-		}
-	},
-	components: {
-		Multiselect,
-		editor: AsyncEditor,
-	},
-	watch: {
-		// call again the method if the route changes
-		'$route': {
-			handler: 'loadTeam',
-			deep: true,
-			immediate: true,
-		},
-	},
-	computed: {
-		userIsAdmin() {
-			return (
-				this.team &&
-				this.team.maxRight &&
-				this.team.maxRight > Rights.READ
-			)
-		},
-		...mapState({
-			userInfo: (state) => state.auth.info,
-		}),
-	},
-
-	methods: {
-		async loadTeam() {
-			this.team = new TeamModel({id: this.teamId})
-			this.team = await this.teamService.get(this.team)
-			this.title = i18n.global.t('team.edit.title', {team: this.team.name})
-			this.setTitle(this.title)
-		},
-
-		async save() {
-			if (this.team.name === '') {
-				this.showError = true
-				return
-			}
-			this.showError = false
-
-			this.team = await this.teamService.update(this.team)
-			this.$message.success({message: this.$t('team.edit.success')})
-		},
-
-		async deleteTeam() {
-			await this.teamService.delete(this.team)
-			this.$message.success({message: this.$t('team.edit.delete.success')})
-			this.$router.push({name: 'teams.index'})
-		},
-
-		async deleteUser() {
-			try {
-				await this.teamMemberService.delete({
-					teamId: this.team.id,
-					username: this.member.username,
-				})
-				this.$message.success({message: this.$t('team.edit.deleteUser.success')})
-				this.loadTeam()
-			} finally {
-				this.showUserDeleteModal = false
-			}
-		},
-
-		async addUser() {
-			const newMember = new TeamMemberModel({
-				teamId: this.teamId,
-				username: this.newMember.username,
-			})
-			await this.teamMemberService.create(newMember)
-			this.loadTeam()
-			this.$message.success({message: this.$t('team.edit.userAddedSuccess')})
-		},
-
-		async toggleUserType(member) {
-			// FIXME: direct manipulation
-			member.admin = !member.admin
-			member.teamId = this.teamId
-			const r = await this.teamMemberService.update(member)
-			for (const tm in this.team.members) {
-				if (this.team.members[tm].id === member.id) {
-					this.team.members[tm].admin = r.admin
-					break
-				}
-			}
-			this.$message.success({
-				message: member.admin ?
-					this.$t('team.edit.madeAdmin') :
-					this.$t('team.edit.madeMember'),
-			})
-		},
-
-		async findUser(query) {
-			if (query === '') {
-				this.clearAll()
-				return
-			}
-
-			this.foundUsers = await this.userService.getAll({}, {s: query})
-		},
-
-		clearAll() {
-			this.foundUsers = []
-		},
-	},
 })
+const userInfo = computed(() => store.state.auth.info)
+
+const teamService = ref<TeamService>(new TeamService())
+const teamMemberService = ref<TeamMemberService>(new TeamMemberService())
+const userService = ref<UserService>(new UserService())
+
+const team = ref<TeamModel>()
+const teamId = computed(() => route.params.id)
+const memberToDelete = ref<TeamMemberModel>()
+const newMember = ref<UserModel>()
+const foundUsers = ref<UserModel[]>()
+
+const showDeleteModal = ref(false)
+const showUserDeleteModal = ref(false)
+const showError = ref(false)
+
+const title = ref('')
+
+loadTeam()
+
+async function loadTeam() {
+	team.value = await teamService.value.get({id: teamId.value})
+	title.value = t('team.edit.title', {team: team.value?.name})
+	useTitle(() => title.value)
+}
+
+async function save() {
+	if (team.value?.name === '') {
+		showError.value = true
+		return
+	}
+	showError.value = false
+
+	team.value = await teamService.value.update(team.value)
+	success({message: t('team.edit.success')})
+}
+
+async function deleteTeam() {
+	await teamService.value.delete(team.value)
+	success({message: t('team.edit.delete.success')})
+	router.push({name: 'teams.index'})
+}
+
+async function deleteMember() {
+	try {
+		await teamMemberService.value.delete({
+			teamId: teamId.value,
+			username: memberToDelete.value.username,
+		})
+		success({message: t('team.edit.deleteUser.success')})
+		await loadTeam()
+	} finally {
+		showUserDeleteModal.value = false
+	}
+}
+
+async function addUser() {
+	await teamMemberService.value.create({
+		teamId: teamId.value,
+		username: newMember.value.username,
+	})
+	await loadTeam()
+	success({message: t('team.edit.userAddedSuccess')})
+}
+
+async function toggleUserType(member) {
+	// FIXME: direct manipulation
+	member.admin = !member.admin
+	member.teamId = teamId.value
+	const r = await teamMemberService.value.update(member)
+	for (const tm in team.value.members) {
+		if (team.value.members[tm].id === member.id) {
+			team.value.members[tm].admin = r.admin
+			break
+		}
+	}
+	success({
+		message: member.admin ?
+			t('team.edit.madeAdmin') :
+			t('team.edit.madeMember'),
+	})
+}
+
+async function findUser(query: string) {
+	if (query === '') {
+		foundUsers.value = []
+		return
+	}
+
+	const users = await userService.value.getAll({}, {s: query})
+	foundUsers.value = users.filter((u: UserModel) => u.id !== userInfo.value.id)
+}
 </script>
 
 <style lang="scss" scoped>
 .card.is-fullwidth {
-  margin-bottom: 1rem;
+	margin-bottom: 1rem;
 
-  .content {
+	.content {
-    padding: 0;
+		padding: 0;
-  }
+	}
 }
 
 @include modal-transition();