finished ledenlijst

frontend/app.vue

@@ -1,8 +1,10 @@
 <template>
     <div class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex flex-col">
-        <LayoutTopbar class="mb-3" />
-        <NuxtPage class="overflow-y-scroll mb-auto" />
-        <LayoutNavbar />
+        <LayoutTopbar />
+        <div class="overflow-y-scroll pt-3">
+            <NuxtPage />
+        </div>
+        <LayoutNavbar class="mt-auto" />
     </div>
 </template>
 
@@ -11,6 +13,8 @@ import { doc, getFirestore, serverTimestamp, writeBatch, collection, getDocs } f
 
 const db = getFirestore()
 
+const ledenlijst = ref([])
 
-provide('firebase', { db })
+
+provide('firebase', { db, ledenlijst })
 </script>

frontend/components/layout/Navbar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="w-full h-16 bg-neutral-200 dark:bg-neutral-800 flex justify-center items-center shadow">
+    <div class="w-full h-16 py-3 bg-neutral-200 dark:bg-neutral-800 flex justify-center items-center shadow">
         <div class="flex justify-evenly items-center gap-1 w-full max-w-lg dark:text-gray-300 text-gray-900">
             <NuxtLink to="/" class="flex flex-col items-center hover:cursor-pointer drop-shadow" :class="route.path === '/' ? 'text-primary' : ''">
                 <Icon size="1.5em" name="ion:home-outline" />

frontend/components/layout/Topbar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="w-full h-10 bg-neutral-200 dark:bg-neutral-800 flex justify-center items-center shadow px-5 gap-2">
+    <div class="w-full py-3 h-10 bg-neutral-200 dark:bg-neutral-800 flex justify-center items-center shadow px-5 gap-2">
         <div class="flex justify-evenly items-center gap-3 w-full max-w-xl dark:text-gray-300 text-gray-900">
             <Icon v-if="route.meta.key === 'back'" size="1.75em" @click="router.back()" class="hover:cursor-pointer" name="ion:arrow-back"/>
             <h1 class="capitalize font-bold text-xl mr-auto">{{ route.meta.title }}</h1>

frontend/pages/settings/admin/ledenlijst.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-sm">
-        <div>
+    <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
+        <div class="mb-5">
             <form @submit.prevent="submitLedenlijst" class="flex flex-col">
                 <span class="">Last updated: <b>37 sep</b></span>
                 <input required="true" @change="handleFileChanged" accept=".csv" class="my-2" type="file">
@@ -8,10 +8,19 @@
                 <button :disabled="disableButtons" class="enabled:btn disabled:btn-disabled mx-auto mt-2">Publish Ledenlijst</button>
             </form>
         </div>
+        <div class="flex flex-col gap-3">
+            <input v-model="searchTerm" class="container px-3 py-2 mb-2 font-bold outline-none" type="search" placeholder="Search">
+            <div v-for="lid in filteredLedenlijst" :key="lid.relatiecode">
+                <div class="item container flex flex-wrap">
+                    <b class="w-24">{{ lid.relatiecode }}</b> {{ lid.fullName }}
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script setup>
+import { doc, getDocs, collection, writeBatch } from "firebase/firestore"; 
 import { useToast } from 'vue-toastification'
 
 definePageMeta({
@@ -19,11 +28,32 @@ definePageMeta({
     key: 'back'
 })
 
+const { db, ledenlijst } = inject('firebase')
+
 const toast = useToast()
 
 const file = ref(null)
 const disableButtons = ref(false)
-const ledenlijst = ref([])
+const searchTerm = ref('')
+
+onMounted(async () => {
+    if (!ledenlijst.value.length) {
+        try {
+            const querySnapshot = await getDocs(collection(db, "ledenlijst"));
+            querySnapshot.forEach((doc) => {
+                ledenlijst.value.push(doc.data())
+            });
+        } catch (e) {
+            console.log(e)
+        }
+
+        ledenlijst.value.sort((a, b) => a.fullName.localeCompare(b.fullName))
+    }
+})
+
+const filteredLedenlijst = computed(() => {
+    return ledenlijst.value.filter(lid => lid.fullName.toLowerCase().includes(searchTerm.value.toLowerCase()))
+})
 
 const handleFileChanged = (event) => {
     const target = event.target;
@@ -86,6 +116,8 @@ const csvToJson = (csv) => {
 
     if (!Object.hasOwn(result[0], 'Relatiecode') || !Object.hasOwn(result[0], 'Volledige naam (1)') || !Object.hasOwn(result[0], 'E-mail') || !Object.hasOwn(result[0], '2e E-mail') || !Object.hasOwn(result[0], 'Verenigingssporten') || !Object.hasOwn(result[0], 'Diploma dropdown 1')) return toast.error('Missing properties')
 
+    ledenlijst.value = []
+
     for (let i in result) {
         let groups = []
         if (Array.isArray(result[i].Verenigingssporten)) {
@@ -104,6 +136,26 @@ const csvToJson = (csv) => {
         ledenlijst.value.push({ relatiecode: result[i].Relatiecode, fullName: result[i]['Volledige naam (1)'].join(' '), email: [result[i]['E-mail'], result[i]['2e E-mail']], groups: groups, diploma: result[i]['Diploma dropdown 1'] })
     }
 
-    console.log(ledenlijst.value)
+    uploadLedenlijst()
+}
+
+const uploadLedenlijst = async () => {
+    try {
+        const batch = writeBatch(db)
+
+        for (let i = 0; i < ledenlijst.value.length; i++) {
+            const docRef = doc(db, "ledenlijst", ledenlijst.value[i].relatiecode)
+            batch.set(docRef, ledenlijst.value[i]);
+        }
+
+        await batch.commit();
+
+        toast.success('Published ledenlijst')
+    } catch (e) {
+        toast.error("Error updating ledenlijst");
+        console.log(e)
+    }
+
+    disableButtons.value = false
 }
 </script>