frontend/src/stores/teams.js

import { reactive, unref, watch, computed, watchEffect, shallowReactive } from 'vue'
import router from '@/router'
import { useI18n } from 'vue-i18n'

import TeamService from '@/services/team'
import TeamModel from '@/models/team'
import TeamMemberService from '@/services/teamMember'
import TeamMemberModel from '@/models/teamMember'
import Rights from '@/models/constants/rights.json'

import { success } from '@/message'

import { defineStore, storeToRefs, acceptHMRUpdate } from 'pinia'

// the first argument is a unique id of the store across your application
export const useTeamStore = defineStore('team', () => {
	const { t } = useI18n()

	const teamService = shallowReactive(new TeamService())
	const teamServiceLoading = computed(() => teamService.loading)

	const teamMemberService = shallowReactive(new TeamMemberService())
	const teamMemberServiceLoading = computed(() => teamMemberService.loading)


	const teams = reactive({})
	const members = reactive({})

	// create getters
	function getTeamMembersByTeamId(teamId) {
		return teams?.[teamId].memberIds.map((memberId) => members[memberId])
	}

	function setTeam(unformattedTeam) {
		const { members, ...team } = unformattedTeam

		setMembers(members)

		team.memberIds = members.map(({ id }) => id)
		teams[team.id] = team
		return team
	}

	function setMembers(members) {
		members.forEach((member) => {
			members[member.id] = member
		})
	}

	async function loadAllTeams() {
		console.log('loadAllTeams')
		const newTeams = await teamService.getAll()
		newTeams.forEach((team) => setTeam(team))

		console.log(newTeams)
		console.log(teams)
	}

	async function loadTeam(teamId) {
		setTeam(new TeamModel({ id: teamId }))
		const unformattedTeam = await teamService.get(teams[teamId])
		return setTeam(unformattedTeam)
	}

	async function newTeam(team) {
		if (team.name === '') {
			throw new Error(t('team.attributes.nameRequired'))
		}

		const newTeam = await teamService.create(team)
		setTeam(newTeam)
		router.push({
			name: 'teams.edit',
			params: { id: newTeam.id },
		})

		success({ message: t('team.create.success') })
	}

	async function updateTeam(team) {
		if (team.name === '') {
			throw new Error(t('team.attributes.nameRequired'))
		}

		const newTeam = new TeamMemberModel({
			...team,
			members: getTeamMembersByTeamId(team.id),
		})

		const unformattedTeam = await teamService.update(newTeam)
		setTeam(unformattedTeam)

		success({ message: t('team.edit.success') })
	}

	async function deleteTeam(teamId) {
		await teamService.delete(teams[teamId])
		delete teams[teamId]

		success({ message: t('team.edit.delete.success') })

		router.push({ name: 'teams.index' })
	}


	async function deleteTeamMember(teamMemberId) {
		const teamId = members[teamMemberId].teamId
		await teamMemberService.delete(members[teamMemberId])

		teams[teamId].members = teams[teamId].members.filter(
			(id) => id !== teamMemberId,
		)
		delete members[teamMemberId]

		success({ message: t('team.edit.deleteUser.success') })
	}

	async function addTeamMember(user, teamId) {
		const newMember = new TeamMemberModel({
			teamId,
			username: user.username,
		})
		const member = teamMemberService.create(newMember)

		setMembers([member])
		teams[teamId].members.push(member.id)

		success({ message: t('team.edit.userAddedSuccess') })
	}

	async function toggleMemberType(memberId) {
		const member = members[memberId]

		const newMember = {
			admin: !member.admin,
			teamId: member.teamId,
		}
		const updatedMember = await teamMemberService.update(newMember)
		setMembers([updatedMember])

		// FIXME: update userservice ?

		success({
			message: member.admin
				? t('team.edit.madeAdmin')
				: t('team.edit.madeMember'),
		})
	}

	watchEffect(() => loadAllTeams())

	return {
		// state
		// TODO: add readonly()
		teams,
		// teams: readonly(teams),
		members,
		// members: readonly(members),

		// getters
		teamServiceLoading,
		teamMemberServiceLoading,

		// ACTIONS
		// team
		setMembers,
		loadAllTeams,
		loadTeam,
		newTeam,
		updateTeam,
		deleteTeam,

		// members
		deleteTeamMember,
		addTeamMember,
		toggleMemberType,
	}
})

if (import.meta.hot) {
	import.meta.hot.accept(acceptHMRUpdate(useTeamStore, import.meta.hot))
}

export function useTeam(teamId) {
	const teamStore = useTeamStore()
	const {
		members,
		addTeamMember,
		deleteTeamMember,
		newTeam,
		updateTeam,
		deleteTeam,
	} = teamStore

	const team = reactive(new TeamModel())

	const isNewTeam = computed(() => Boolean(unref(teamId)))

	watch(() => unref(teamId), () => {
		if (isNewTeam.value) {
			return
		}

		teamStore.loadTeam(unref(teamId)).then((loadedTeam) => {
			Object.assign(team, loadedTeam)
		})
	})

	const userIsAdmin = computed(() => team?.maxRight > Rights.READ)

	const {teamServiceLoading, teamMemberServiceLoading} = storeToRefs(teamStore)

	return {
		teamServiceLoading,
		teamMemberServiceLoading,
		team,
		members,
		addTeamMember: (user) => addTeamMember(user, teamId),
		deleteTeamMember,
		newTeam: () => newTeam(team),
		updateTeam: () => updateTeam(team),
		deleteTeam: () => deleteTeam(teamId),
		userIsAdmin,
	}
}