added manage users

frontend/pages/settings/admin/ledenlijst.vue

@@ -15,7 +15,7 @@
 
       <label class="relative inline-flex items-center cursor-pointer mb-5">
         <input type="checkbox" value="" v-model="modelData.wedstrijdteam" class="sr-only peer">
-        <div class="w-11 h-6 bg-neutral-200 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>
+        <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 Team</span>
       </label>
 

frontend/pages/settings/admin/users.vue

@@ -1,13 +1,99 @@
 <template>
-    <div>
+  <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" >
-        Users
+    <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>
+
+      <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
+
+  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
+  })
+
+  toast.success('Gebruiker is bewerkt')
+
+  disableButtons.value = false
+  showModel.value = false
+}
 </script>