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">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>