wrbapp/frontend/pages/settings/config/managerelatiecodes.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">Save</button>
                <span @click="router.back()" class="hover:underline font-bold w-full text-center sm:w-max sm:ml-auto hover:cursor-pointer">Cancel</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 } = 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 = () => {
    if (userPersons.value.length === 0) return setTimeout(() => getAllPersons(), 50)
    fetch('https://api.xeovalyte.com/getrelatiecodes', {
                method: 'POST',
                headers: {
                    Authorization: 'Basic WGVvdmFseXRlOmtNKjhuRXMzNTchalJlXm1KYnZrRSFOIw==',
                    'content-type': 'application/json'
                },
                body: JSON.stringify({ email: user.value.email })
            }).then(response => response.json())
                .then(response => {
                    response.persons.forEach(person => {
                        if (userPersons.value.map(a => a.relatiecode).includes(person.relatiecode)) {
                            person.checked = true
                        } else {
                            person.checked = false
                        }
                    })

                    userAllPersons.value = response.persons
                })
                .catch(err => {
                    console.log(err)

                    toast.error('Error tijdens het ophalen van gegevens')
                });
}
</script>