106 lines
3.5 KiB
Vue
106 lines
3.5 KiB
Vue
<template>
|
|
<div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
|
|
<div v-if="userAllPersons.length !== 0 && userPersons.length !== 0" class="flex flex-col gap-3">
|
|
<div v-for="person in userAllPersons" :key="person.relatiecode">
|
|
<div @click="updateCheckbox(person)" class="item container flex flex-wrap" :class="person.relatiecode === userPersons[0].relatiecode ? 'bg-neutral-200 dark:bg-neutral-850 text-neutral-400 dark:text-neutral-500 hover:cursor-not-allowed' : 'hover:cursor-pointer'">
|
|
<input v-model="person.checked" :disabled="person.relatiecode === userPersons[0].relatiecode" class="checkbox my-auto mr-3 disabled:bg-neutral-300 disabled:hover:text-neutral-300 dark:disabled:bg-neutral-600 dark:disabled:hover:text-neutral-600 disabled:hover:cursor-not-allowed" type="checkbox">
|
|
<span><b>{{ person.fullName }}</b></span>
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex flex-wrap">
|
|
<button :disabled="buttonsDisabled" @click="save" class="btn w-full sm:w-40 mb-1">Opslaan</button>
|
|
<span @click="router.back()" class="hover:underline font-bold w-full text-center sm:w-max sm:ml-auto hover:cursor-pointer">Annuleer</span>
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex flex-col justify-center items-center" v-else>
|
|
<Icon size="2em" name="ion:load-c" class="animate-spin" />
|
|
<h2 class="mt-2 font-bold">Loading...</h2>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { updateDoc, doc } from 'firebase/firestore'
|
|
import { useToast } from 'vue-toastification'
|
|
|
|
const router = useRouter()
|
|
|
|
definePageMeta({
|
|
title: 'Beheer Personen',
|
|
key: 'back'
|
|
})
|
|
|
|
const { user, userAllPersons, userPersons, db, getPersons, auth } = inject('firebase')
|
|
const toast = useToast()
|
|
|
|
const buttonsDisabled = ref(false)
|
|
|
|
onMounted(() => {
|
|
if (userAllPersons.value.length === 0) {
|
|
getAllPersons()
|
|
} else {
|
|
userAllPersons.value.forEach(person => {
|
|
if (userPersons.value.map(a => a.relatiecode).includes(person.relatiecode)) {
|
|
person.checked = true
|
|
} else {
|
|
person.checked = false
|
|
}
|
|
})
|
|
}
|
|
})
|
|
|
|
const save = async () => {
|
|
buttonsDisabled.value = true
|
|
|
|
const newRelatiecodes = []
|
|
|
|
userAllPersons.value.forEach(person => {
|
|
if (person.checked) {
|
|
newRelatiecodes.push(person.relatiecode)
|
|
}
|
|
})
|
|
|
|
await updateDoc(doc(db, "users", user.value.uid), {
|
|
relatiecodes: newRelatiecodes
|
|
})
|
|
|
|
getPersons(newRelatiecodes)
|
|
|
|
buttonsDisabled.value = false
|
|
navigateTo('/settings')
|
|
}
|
|
|
|
const updateCheckbox = (person) => {
|
|
if (person.relatiecode === userPersons.value[0].relatiecode) return;
|
|
|
|
person.checked = !person.checked
|
|
}
|
|
|
|
const getAllPersons = async () => {
|
|
if (userPersons.value.length === 0) return setTimeout(() => getAllPersons(), 50)
|
|
|
|
const idToken = await auth.value.currentUser.getIdToken(true)
|
|
|
|
|
|
const { data: response, error } = await useFetch('/api/getrelatiecodes', {
|
|
method: 'post',
|
|
body: { email: user.value.email, token: idToken }
|
|
})
|
|
|
|
if (error.value) {
|
|
console.log(error.value)
|
|
return toast.error('Error tijdens het krijgen van relateicodes')
|
|
}
|
|
|
|
response.value.persons.forEach(person => {
|
|
if (userPersons.value.map(a => a.relatiecode).includes(person.relatiecode)) {
|
|
person.checked = true
|
|
} else {
|
|
person.checked = false
|
|
}
|
|
})
|
|
|
|
userAllPersons.value = response.value.persons
|
|
}
|
|
</script>
|