Polarcraft/web/components/team/Default.vue

<template>
  <Modal v-if="modalOpen" title="Invite team member" @close="modalOpen = false" @submit="modalOpen = false">
    <div>
      <h2 class="text-lg font-bold text-primary">Users</h2> 
      <div class="h-48 space-y-3 overflow-y-auto">
        <div v-for="unaffiliatedUser in unaffilatedUsers" :key="unaffiliatedUser._id.toString()" class="flex items-center rounded bg-neutral-700 px-3 py-1 text-gray-200">
          {{ unaffiliatedUser.username }}
          <Button v-if="!unaffiliatedUser.teamInvites.includes(user.team.id)" class="ml-auto" @click="inviteUser(unaffiliatedUser)">Invite</Button>
          <Button v-else class="ml-auto" type="danger" @click="cancelInvite(unaffiliatedUser)">Cancel Invite</Button>
        </div>
      </div>
    </div>
  </Modal>
  <Modal v-if="editTeamModal.open" title="Edit team" @close="editTeamModal.open = false" @submit="editTeam">
    <Input v-model:value="editTeamModal.name" background-class="bg-neutral-800" class="w-full max-w-sm">Naam / Prefix</Input>
    <Colorpicker v-model:value="editTeamModal.color" input-background-class="bg-neutral-800" class="w-full max-w-sm" />
  </Modal>
  <div class="mx-auto my-10 max-w-2xl">
    <h2 class="mb-2 text-xl font-bold text-primary">Team Information</h2>
    <div class="rounded border-[1px] border-primary px-5 py-2 text-primary">
      <table class="w-full table-auto">
        <tbody class="divide-y divide-gray-700">
          <tr>
            <td class="py-3">Name</td>
            <td class="font-bold">{{ team.name }}</td>
          </tr>
          <tr>
            <td class="py-3">Color</td>
            <td class="font-bold">{{ team.color }}</td>
          </tr>
          <tr>
            <td class="py-3">ID</td>
            <td class="font-bold">{{ team._id }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="mb-10 mt-5 flex justify-center gap-x-3">
      <Button type="danger" @click="leaveTeam">Leave Team</Button>
      <Button v-if="user.team.admin" @click="openTeamModal">Edit Team</Button>
    </div>
    <h2 class="mb-2 text-xl font-bold text-primary">Team Members</h2>
    <div class="space-y-5 rounded border-[1px] border-primary p-5 text-primary">
      <div v-for="teamMember in teamMembers" :key="teamMember._id" class="flex h-12 items-center rounded bg-neutral-800 px-5 font-bold text-gray-200">
        {{ teamMember.username }} 
        <span v-if="teamMember.team.admin" class="ml-3 text-sm text-gray-400">Admin</span>
        <div v-if="user.team.admin" class="ml-auto">
          <Button v-if="!teamMember.team.admin && teamMember._id !== user._id" @click="promoteUser(teamMember)">Promote</Button>
          <Button v-if="teamMember.team.admin && teamMember._id !== user._id" @click="demoteUser(teamMember)">Demote</Button>
        </div>
      </div>
      <div v-if="user.team.admin" class="rounded border-2 border-dashed border-neutral-500 bg-neutral-800 p-3 text-center font-bold text-gray-200 hover:cursor-pointer hover:bg-neutral-700" @click="modalOpen = true">
        Invite new member
      </div>
    </div>
  </div>
</template>

<script setup>
const user = useState('user');
const { data: team } = await useFetch('/api/team');
const { data: teamMembers } = await useFetch('/api/team/members');
const { data: unaffilatedUsers } = await useFetch('/api/team/unaffiliated')

const modalOpen = ref(false)

const editTeamModal = ref({
  open: false,
  name: '',
  color: '',
})

const openTeamModal = () => {
  editTeamModal.value.name = team.value.name
  editTeamModal.value.color = team.value.color
  editTeamModal.value.open = true
}

const leaveTeam = async () => {
  try {
    await $fetch('/api/team/leave');

    user.value.team = null;

    useToast().success('Succesvol team verlaten')
  } catch (e) {
    console.log(e);
    useToast().error(e.statusMessage)
  }
}

const editTeam = async () => {
  try {
    await $fetch('/api/team/edit', {
      method: 'POST',
      body: {
        name: editTeamModal.value.name,
        color: editTeamModal.value.color,
      }
    });

    team.value.name = editTeamModal.value.name
    team.value.color = editTeamModal.value.color

    useToast().success('Team is succesvol bewerkt')

    editTeamModal.value.open = false
  } catch (e) {
    console.log(e);
    useToast().error(e.statusMessage)
  }
}

const inviteUser = async (usr) => {
  try {
    await $fetch('/api/team/invite', {
      method: 'POST',
      body: { id: usr._id }
    });

    usr.teamInvites.push(user.value.team.id);

    useToast().success(`Invited ${usr.username} succesvol`)
  } catch (e) {
    console.log(e);
    useToast().error(e.statusMessage)
  }
}

const cancelInvite = async (usr) => {
  try {
    await $fetch('/api/team/cancelinvite', {
      method: 'POST',
      body: { id: usr._id }
    });

    usr.teamInvites = usr.teamInvites.filter(a => a !== user.value.team.id);

    useToast().success('Succesvol invite geannuleerd')
  } catch (e) {
    console.log(e);
    useToast().error(e.statusMessage)
  }
}

const promoteUser = async (usr) => {
  try {
    await $fetch('/api/team/promote', {
      method: 'POST',
      body: { userId: usr._id }
    });

    usr.team.admin = true

    console.log(usr)
    console.log(teamMembers)

    useToast().success('Succesvol gebruiker gepromoveerd')
  } catch (e) {
    console.log(e);
    useToast().error(e.statusMessage)
  }
}

const demoteUser = async (usr) => {
  try {
    await $fetch('/api/team/demote', {
      method: 'POST',
      body: { userId: usr._id }
    });

    usr.team.admin = false

    useToast().success('Succesvol gebruiker gedegradeerd')
  } catch (e) {
    console.log(e);
    useToast().error(e.statusMessage)
  }
}
</script>