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