107 lines
4.8 KiB
Vue
107 lines
4.8 KiB
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>
|