wrbapp/frontend/pages/settings/admin/users.vue

<template>
  <div @click.self="showModel = false" v-if="showModel" class="fixed flex justify-center items-center h-screen w-full bg-black top-0 left-0 z-50 bg-opacity-50" >
    <form @submit.prevent="submitModelForm" class="dark:bg-neutral-800 bg-neutral-200 p-10 rounded-xl flex flex-col w-full max-w-sm">
      <h1 class="font-bold text-center text-lg mb-5">Beheer Gebruiker</h1> 
      
      <div class="text-default mb-2">
        Relatiecodes: <b>{{ modelData.relatiecodes.join(', ') }}</b>
      </div>
      <div class="text-default mb-2">
        Email: <b>{{ modelData.email }}</b>
      </div>
      <div class="text-default mb-5">
        ID: <b>{{ modelData.id }}</b>
      </div>

      <label class="relative inline-flex items-center cursor-pointer mb-5">
        <input type="checkbox" value="" v-model="modelData.admin" class="sr-only peer">
        <div class="w-11 h-6 bg-neutral-300 peer-focus:outline-none peer-focus:ring-none rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
        <span class="ml-3 font-medium text-gray-900 dark:text-gray-300">Admin</span>
      </label>

      <label class="relative inline-flex items-center cursor-pointer mb-5">
        <input type="checkbox" value="" v-model="modelData.sendNews" class="sr-only peer">
        <div class="w-11 h-6 bg-neutral-300 peer-focus:outline-none peer-focus:ring-none rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
        <span class="ml-3 font-medium text-gray-900 dark:text-gray-300">Berichten Sturen</span>
      </label>

      <label class="relative inline-flex items-center cursor-pointer mb-5">
        <input type="checkbox" value="" v-model="modelData.wedstrijdAdmin" class="sr-only peer">
        <div class="w-11 h-6 bg-neutral-300 peer-focus:outline-none peer-focus:ring-none rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
        <span class="ml-3 font-medium text-gray-900 dark:text-gray-300">Wedstrijd Admin</span>
      </label>
      <input :disabled="disableButtons" type="submit" class="btn" :value="'Bewerken'" />
    </form>
  </div>
  <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
      <input v-model="searchTerm" class="input mb-2 font-bold" type="search" placeholder="Search">
      <div v-for="user in filteredUsers" :key="user.relatiecode">
        <div @click="handleModel(user)" class="item container flex flex-wrap hover:cursor-pointer">
          <b class="w-24">{{ user.email }}</b>
        </div>
    </div>
  </div>
</template>

<script setup>
import { getDocs, collection, doc, updateDoc } from 'firebase/firestore'
import { useToast } from 'vue-toastification'

definePageMeta({
  title: 'Manage users',
  key: 'back'
})

const { users, db } = inject('firebase')
const toast = useToast()

const searchTerm = ref('')
const disableButtons = ref(false)
const showModel = ref(false)

const modelData = ref({})

onMounted(async () => {
  if (!users.value.length) {
    try {
      const querySnapshot = await getDocs(collection(db, "users"));
      querySnapshot.forEach((doc) => {
        users.value.push(doc.data())
      });
    } catch (e) {
      console.log(e)
    }
  }
})

const handleModel = (user) => {
  modelData.value = user 
  if (!modelData.value.hasOwnProperty('admin')) modelData.value.admin = false
  if (!modelData.value.hasOwnProperty('sendNews')) modelData.value.sendNews = false
  if (!modelData.value.hasOwnProperty('wedstrijdAdmin')) modelData.value.wedstrijdAdmin = false

  showModel.value = true
}

const filteredUsers = computed(() => {
  return users.value.filter(user => user.email.toLowerCase().includes(searchTerm.value.toLowerCase()))
})

const submitModelForm = async () => {
  disableButtons.value = true

  const docRef = doc(db, "users", modelData.value.id)

  await updateDoc(docRef, {
    admin: modelData.value.admin,
    sendNews: modelData.value.sendNews,
    wedstrijdAdmin: modelData.value.wedstrijdAdmin
  })

  toast.success('Gebruiker is bewerkt')

  disableButtons.value = false
  showModel.value = false
}
</script>