Xeovalyte
6fb439a754
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
70 lines
2.4 KiB
Vue
70 lines
2.4 KiB
Vue
<template>
|
|
<div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
|
|
<div v-if="userStore.userAllPersons.length !== 0 && userStore.userPersons.length !== 0" class="flex flex-col gap-3">
|
|
<div v-for="person in userStore.userAllPersons" :key="person.relatiecode">
|
|
<div @click="updateCheckbox(person)" class="item container flex flex-wrap" :class="person.relatiecode === userStore.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 === userStore.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, getFirestore } from 'firebase/firestore'
|
|
import { useToast } from 'vue-toastification'
|
|
|
|
const router = useRouter()
|
|
|
|
definePageMeta({
|
|
title: 'Beheer Personen',
|
|
key: 'back'
|
|
})
|
|
|
|
const toast = useToast()
|
|
const userStore = useUserStore()
|
|
const db = getFirestore()
|
|
|
|
const buttonsDisabled = ref(false)
|
|
|
|
onMounted(() => {
|
|
userStore.getAllPersons()
|
|
})
|
|
|
|
const save = async () => {
|
|
buttonsDisabled.value = true
|
|
|
|
const newRelatiecodes = []
|
|
|
|
userStore.userAllPersons.forEach(person => {
|
|
if (person.checked) {
|
|
newRelatiecodes.push(person.relatiecode)
|
|
}
|
|
})
|
|
|
|
await updateDoc(doc(db, "users", userStore.user.uid), {
|
|
relatiecodes: newRelatiecodes
|
|
})
|
|
|
|
userStore.getPersons(newRelatiecodes)
|
|
|
|
buttonsDisabled.value = false
|
|
navigateTo('/settings')
|
|
}
|
|
|
|
const updateCheckbox = (person) => {
|
|
if (person.relatiecode === userStore.userPersons[0].relatiecode) return;
|
|
|
|
person.checked = !person.checked
|
|
}
|
|
</script>
|