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"
@@ -146,7 +146,7 @@
 		<transition name="modal">
 			<modal
 				@close="showUserDeleteModal = false"
-				@submit="deleteUser()"
+				@submit="deleteMember()"
 				v-if="showUserDeleteModal"
 			>
 				<template #header><span>{{ $t('team.edit.deleteUser.header') }}</span></template>
@@ -160,12 +160,11 @@
 	</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,133 +175,115 @@ 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,
-
-			newMember: UserModel,
-			foundUsers: [],
-			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 &&
+		team.value &&
-				this.team.maxRight &&
+		team.value.maxRight &&
-				this.team.maxRight > Rights.READ
+		team.value.maxRight > Rights.READ
 	)
-		},
+})
-		...mapState({
+const userInfo = computed(() => store.state.auth.info)
-			userInfo: (state) => state.auth.info,
-		}),
-	},
 
-	methods: {
+const teamService = ref<TeamService>(new TeamService())
-		async loadTeam() {
+const teamMemberService = ref<TeamMemberService>(new TeamMemberService())
-			this.team = new TeamModel({id: this.teamId})
+const userService = ref<UserService>(new UserService())
-			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() {
+const team = ref<TeamModel>()
-			if (this.team.name === '') {
+const teamId = computed(() => route.params.id)
-				this.showError = true
+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
 	}
-			this.showError = false
+	showError.value = false
 
-			this.team = await this.teamService.update(this.team)
+	team.value = await teamService.value.update(team.value)
-			this.$message.success({message: this.$t('team.edit.success')})
+	success({message: t('team.edit.success')})
-		},
+}
 
-		async deleteTeam() {
+async function deleteTeam() {
-			await this.teamService.delete(this.team)
+	await teamService.value.delete(team.value)
-			this.$message.success({message: this.$t('team.edit.delete.success')})
+	success({message: t('team.edit.delete.success')})
-			this.$router.push({name: 'teams.index'})
+	router.push({name: 'teams.index'})
-		},
+}
 
-		async deleteUser() {
+async function deleteMember() {
 	try {
-				await this.teamMemberService.delete({
+		await teamMemberService.value.delete({
-					teamId: this.team.id,
+			teamId: teamId.value,
-					username: this.member.username,
+			username: memberToDelete.value.username,
 		})
-				this.$message.success({message: this.$t('team.edit.deleteUser.success')})
+		success({message: t('team.edit.deleteUser.success')})
-				this.loadTeam()
+		await loadTeam()
 	} finally {
-				this.showUserDeleteModal = false
+		showUserDeleteModal.value = false
 	}
-		},
+}
 
-		async addUser() {
+async function addUser() {
-			const newMember = new TeamMemberModel({
+	await teamMemberService.value.create({
-				teamId: this.teamId,
+		teamId: teamId.value,
-				username: this.newMember.username,
+		username: newMember.value.username,
 	})
-			await this.teamMemberService.create(newMember)
+	await loadTeam()
-			this.loadTeam()
+	success({message: t('team.edit.userAddedSuccess')})
-			this.$message.success({message: this.$t('team.edit.userAddedSuccess')})
+}
-		},
 
-		async toggleUserType(member) {
+async function toggleUserType(member) {
 	// FIXME: direct manipulation
 	member.admin = !member.admin
-			member.teamId = this.teamId
+	member.teamId = teamId.value
-			const r = await this.teamMemberService.update(member)
+	const r = await teamMemberService.value.update(member)
-			for (const tm in this.team.members) {
+	for (const tm in team.value.members) {
-				if (this.team.members[tm].id === member.id) {
+		if (team.value.members[tm].id === member.id) {
-					this.team.members[tm].admin = r.admin
+			team.value.members[tm].admin = r.admin
 			break
 		}
 	}
-			this.$message.success({
+	success({
 		message: member.admin ?
-					this.$t('team.edit.madeAdmin') :
+			t('team.edit.madeAdmin') :
-					this.$t('team.edit.madeMember'),
+			t('team.edit.madeMember'),
 	})
-		},
+}
 
-		async findUser(query) {
+async function findUser(query: string) {
 	if (query === '') {
-				this.clearAll()
+		foundUsers.value = []
 		return
 	}
 
-			this.foundUsers = await this.userService.getAll({}, {s: query})
+	const users = await userService.value.getAll({}, {s: query})
-		},
+	foundUsers.value = users.filter((u: UserModel) => u.id !== userInfo.value.id)
-
+}
-		clearAll() {
-			this.foundUsers = []
-		},
-	},
-})
 </script>
 
 <style lang="scss" scoped>