completed mangerelatiecodes

backend/index.js

@@ -69,12 +69,15 @@ app.post('/getrelatiecodes', async (req, res) => {
         }
 
         let relatiecodes = [];
+        let persons = [];
 
         snapshot.forEach(doc => {
             relatiecodes.push(doc.id)
+            const data = doc.data()
+            persons.push({ fullName: data.fullName, relatiecode: doc.id })
         });
 
-        res.status(200).send({ code: 'success', relatiecodes: relatiecodes })
+        res.status(200).send({ code: 'success', relatiecodes: relatiecodes, persons: persons })
 
 
     } catch (e) {

frontend/app.vue

@@ -29,6 +29,7 @@ const auth = ref(null)
 const userLoaded = ref(false)
 const userData = ref(null)
 const userPersons = ref([])
+const userAllPersons = ref([])
 
 onMounted(() => {
     auth.value = getAuth()
@@ -74,5 +75,5 @@ const getPersons = async (persons) => {
 
 const ledenlijst = ref([])
 
-provide('firebase', { db, ledenlijst, isAuthenticated, user, userData, userPersons, auth })
+provide('firebase', { db, ledenlijst, isAuthenticated, user, userData, userPersons, auth, userAllPersons, getPersons })
 </script>

frontend/pages/settings/config/changeemail.vue

@@ -0,0 +1,12 @@
+<template>
+    <div>
+        Change Email
+    </div>
+</template>
+
+<script setup>
+definePageMeta({
+    title: 'Change Email',
+    key: 'back'
+})
+</script>

frontend/pages/settings/config/changepassword.vue

@@ -0,0 +1,12 @@
+<template>
+    <div>
+        Change Password
+    </div>
+</template>
+
+<script setup>
+definePageMeta({
+    title: 'Change Password',
+    key: 'back'
+})
+</script>

frontend/pages/settings/config/managerelatiecodes.vue

@@ -1,12 +1,102 @@
 <template>
-    <div>
+    <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
-        Manage relatiecodes
+        <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>
 </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('http://test.xeovalyte.com:7289/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 met het controleren van relatiecode')
+                });
+}
 </script>

frontend/pages/settings/index.vue

@@ -23,7 +23,22 @@
         <div>
             <h1 class="text-xl ml-2 font-bold">Account</h1>
             <div class="container">
-                <div @click="logout" class="item-hover">
+                <NuxtLink to="/settings/config/managerelatiecodes" class="item-hover py-2 rounded-t flex items-center">
+                    <span>Beheer Personen</span>
+                    <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
+                </NuxtLink>
+                <div class="divider" />
+                <NuxtLink to="/settings/config/changepassword" class="item-hover py-2 flex items-center">
+                    <span>Change Password</span>
+                    <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
+                </NuxtLink>
+                <div class="divider" />
+                <NuxtLink to="/settings/config/changeemail" class="item-hover py-2 flex items-center">
+                    <span>Change Email</span>
+                    <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
+                </NuxtLink>
+                <div class="divider" />
+                <div @click="logout" class="item-hover rounded-b flex items-center">
                     Logout
                 </div>
             </div>