From a121c3ae108cc457f8e7569352f329bef120b722 Mon Sep 17 00:00:00 2001
From: xeovalyte <me+gitea@xeovalyte.dev>
Date: Thu, 21 Dec 2023 14:14:31 +0100
Subject: [PATCH] Update frontend/pages/settings/admin/ledenlijst.vue

---
 frontend/pages/settings/admin/ledenlijst.vue | 522 ++++++++++---------
 1 file changed, 262 insertions(+), 260 deletions(-)

diff --git a/frontend/pages/settings/admin/ledenlijst.vue b/frontend/pages/settings/admin/ledenlijst.vue
index c801c2e..f5b3c32 100644
--- a/frontend/pages/settings/admin/ledenlijst.vue
+++ b/frontend/pages/settings/admin/ledenlijst.vue
@@ -1,260 +1,262 @@
-<template>
-  <div @click.self="showModel = false" v-if="showModel" class="fixed flex justify-center items-center h-screen w-full bg-black top-0 left-0 z-50 bg-opacity-50" >
-    <form @submit.prevent="submitModelForm" class="dark:bg-neutral-800 bg-neutral-200 p-10 rounded-xl flex flex-col w-full max-w-sm">
-      <h1 class="font-bold text-center text-lg mb-5">Beheer Persoon</h1> 
-      
-      <div class="text-default mb-2">
-        Relatiecode: <b>{{ modelData.relatiecode }}</b>
-      </div>
-      <div class="text-default mb-2">
-        Naam: <b>{{ modelData.fullName }}</b>
-      </div>
-      <div class="text-default mb-5">
-        Groepen: <b>{{ modelData.groups.join(', ') }}</b>
-      </div>
-
-      <label class="relative inline-flex items-center cursor-pointer mb-5">
-        <input type="checkbox" value="" v-model="modelData.wedstrijdteam" class="sr-only peer">
-        <div class="w-11 h-6 bg-neutral-300 peer-focus:outline-none peer-focus:ring-none rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
-        <span class="ml-3 font-medium text-gray-900 dark:text-gray-300">Wedstrijd Team</span>
-      </label>
-
-      <input :disabled="disableButtons" type="submit" class="btn" :value="'Bewerken'" />
-    </form>
-  </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">
-          <input required="true" @change="handleFileChanged" accept=".csv" class="my-2" type="file">
-          <span class="text-sm"><i>Met de volgende kolommen: Relatiecode, Volledige naam(1), Roepnaam, E-mail, 2e E-mail, Verenigingssporten, Diploma</i></span>
-          <button :disabled="disableButtons" class="btn mx-auto mt-2">Publish Ledenlijst</button>
-        </form>
-      </div>
-      <div class="flex flex-col gap-3">
-        <input v-model="searchTerm" class="input mb-2 font-bold" type="search" placeholder="Search">
-        <div v-for="lid in filteredLedenlijst" :key="lid.relatiecode">
-          <div @click="handleModel(lid)" class="item container flex flex-wrap hover:cursor-pointer">
-            <b class="w-24">{{ lid.relatiecode }}</b> {{ lid.fullName }}
-          </div>
-        </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { doc, getDocs, collection, writeBatch, updateDoc, setDoc, getFirestore } from "firebase/firestore"; 
-import { useToast } from 'vue-toastification'
-
-definePageMeta({
-  title: 'Ledenlijst',
-  key: 'back'
-})
-
-const toast = useToast()
-
-const usersStore = useUsersStore()
-const modelData = ref(null)
-const db = getFirestore()
-
-const file = ref(null)
-const disableButtons = ref(false)
-const searchTerm = ref('')
-const newLedenlijst = ref([])
-const showModel = ref(false)
-
-onMounted(async () => {
-  usersStore.getLedenlijst()
-})
-
-const handleModel = (lid) => {
-  modelData.value = lid
-  if (!modelData.value.hasOwnProperty('wedstrijdteam')) modelData.value.wedstrijdteam = false
-
-  modelData.value.oldWedstrijdteam = modelData.value.wedstrijdteam
-
-  showModel.value = true
-}
-
-const submitModelForm = async () => {
-  disableButtons.value = true
-  usersStore.ledenlijst.filter(a => a.relatiecode === modelData.value.relatiecode)[0].wedstrijdteam = modelData.value.wedstrijdteam 
-
-  if (modelData.value.wedstrijdteam === modelData.value.oldWedstrijdteam) {
-    disableButtons.value = false
-    showModel.value = false
-    return;
-  } 
-
-  let docRef = doc(db, "ledenlijst", modelData.value.relatiecode)
-
-  await updateDoc(docRef, {
-    wedstrijdteam: modelData.value.wedstrijdteam
-  })
-
-  docRef = doc(db, "competitors", modelData.value.relatiecode)
-  
-  if (modelData.value.wedstrijdteam) {
-    await setDoc(docRef, {
-      relatiecode: modelData.value.relatiecode,
-      name: modelData.value.fullName,
-      active: true, 
-    })
-  } else {
-    await updateDoc(docRef, {
-      active: false, 
-    })
-  }
-
-  toast.success('Persoon is bewerkt')
-
-  disableButtons.value = false
-  showModel.value = false
-}
-
-const filteredLedenlijst = computed(() => {
-  return usersStore.ledenlijst.filter(lid => lid.fullName.toLowerCase().includes(searchTerm.value.toLowerCase()))
-})
-
-const handleFileChanged = (event) => {
-  const target = event.target;
-
-  if (target && target.files) {
-    file.value = target.files[0];
-  }
-}
-
-const submitLedenlijst = () => {
-  disableButtons.value = true
-
-  let reader = new FileReader()
-
-  reader.onload = function() {
-    csvToJson(reader.result);
-  };
-
-  reader.onerror = function() {
-    console.log(reader.error);
-  };
-
-  reader.readAsText(file.value)
-}
-
-const csvToJson = (csv) => {
-  let arr = csv.split('\n');
-
-  var result = [];
-  var headers = arr[0].split(';');
-  for(var i = 1; i < arr.length; i++) {
-    var data = arr[i].split(';');
-    var obj = {};
-    for(var j = 0; j < data.length; j++) {
-      obj[headers[j].trim()] = data[j].trim();
-    }
-    result.push(obj);
-  }
-
-  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')
-
-  newLedenlijst.value = []
-
-  for (let i in result) {
-    let groups = []
-    let correctGroups = null 
-    if (!result[i].Relatiecode) break; 
-
-    if (result[i].Verenigingssporten.includes(',')) correctGroups = result[i].Verenigingssporten.split(',')    
-    else correctGroups = [result[i].Verenigingssporten] 
-    
-    correctGroups.forEach(group => {
-      const x = group.split(' - ')
-
-      if (x[2] === 'Week') groups.push('Vrijdag') 
-      else if (x[2] === 'Zaterdag' && x[1] !== 'Wedstrijd') groups.push('Zaterdag')
-
-      groups.push(x[1])
-    })
-
-    if (groups[2] === 'Week') groups[2] = 'Vrijdag'
-
-    const inwedstrijdteam = usersStore.ledenlijst.filter(x => x.relatiecode === result[i].Relatiecode)[0].wedstrijdteam;
-    
-    const wedstrijdteam = inwedstrijdteam ? true : false
-
-    newLedenlijst.value.push({ relatiecode: result[i].Relatiecode, wedstrijdteam, fullName: result[i]['Volledige naam (1)'], email: [result[i]['E-mail'], result[i]['2e E-mail']], groups: [...new Set(groups)], diploma: result[i]['Diploma dropdown 1'] })
-  }
-  uploadLedenlijst()
-}
-
-const uploadLedenlijst = async () => {
-  try {
-    const batch = writeBatch(db)
-
-    newLedenlijst.value.forEach(lid => {
-      const docRef = doc(db, "ledenlijst", lid.relatiecode)
-
-      const exists = usersStore.ledenlijst.filter(a => a.relatiecode === lid.relatiecode).length > 1
-
-      if (!exists) {
-        return batch.set(docRef, lid);
-      }
-      
-      batch.update(docRef, { fullName: lid.relatiecode, email: lid.email, groups: lid.groups, diploma: lid.diploma})
-    })
-
-    const deleteLeden = usersStore.ledenlijst.filter(a => newLedenlijst.value.map(x => x.relatiecode).indexOf(a.relatiecode) === -1)
-    
-    deleteLeden.forEach(lid => {
-      const docRef = doc(db, "ledenlijst", lid.relatiecode)
-
-      batch.delete(docRef)
-    })
-
-    await batch.commit();
-
-    toast.success('Published ledenlijst')
-  } catch (e) {
-    toast.error("Error updating ledenlijst");
-    console.log(e)
-  }
-
-  usersStore.ledenlijst = newLedenlijst.value
-  
-  updateUsers()
-}
-
-
-const updateUsers = async () => {
-  try {
-    const querySnapshot = await getDocs(collection(db, "users"));
-    querySnapshot.forEach((doc) => {
-      const data = doc.data()
-      data.id = doc.id
-      usersStore.users.push(data)
-
-    });
-  } catch (e) {
-    console.log(e)
-
-    toast.error('Error getting users')
-  }
-  
-  const batch = writeBatch(db);
-
-  usersStore.users.forEach(user => {
-    const lid = usersStore.ledenlijst.filter(a => a.email.includes(user.email))
-    const newRelatiecodes = lid.map(a => a.relatiecode)
-    
-    user.allRelatiecodes = newRelatiecodes
-    user.relatiecodes.forEach((relatiecode, index) => {
-      if (!newRelatiecodes.includes(relatiecode)) { user.relatiecodes.splice(index, 1); console.log('removed item', relatiecode)}
-    })
-
-    const userRef = doc(db, "users", user.id)    
-    batch.update(userRef, user)
-  })
-  
-  await batch.commit();
-
-  disableButtons.value = false
-}
-</script>
+<template>
+  <div @click.self="showModel = false" v-if="showModel" class="fixed flex justify-center items-center h-screen w-full bg-black top-0 left-0 z-50 bg-opacity-50" >
+    <form @submit.prevent="submitModelForm" class="dark:bg-neutral-800 bg-neutral-200 p-10 rounded-xl flex flex-col w-full max-w-sm">
+      <h1 class="font-bold text-center text-lg mb-5">Beheer Persoon</h1> 
+      
+      <div class="text-default mb-2">
+        Relatiecode: <b>{{ modelData.relatiecode }}</b>
+      </div>
+      <div class="text-default mb-2">
+        Naam: <b>{{ modelData.fullName }}</b>
+      </div>
+      <div class="text-default mb-5">
+        Groepen: <b>{{ modelData.groups.join(', ') }}</b>
+      </div>
+
+      <label class="relative inline-flex items-center cursor-pointer mb-5">
+        <input type="checkbox" value="" v-model="modelData.wedstrijdteam" class="sr-only peer">
+        <div class="w-11 h-6 bg-neutral-300 peer-focus:outline-none peer-focus:ring-none rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
+        <span class="ml-3 font-medium text-gray-900 dark:text-gray-300">Wedstrijd Team</span>
+      </label>
+
+      <input :disabled="disableButtons" type="submit" class="btn" :value="'Bewerken'" />
+    </form>
+  </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">
+          <input required="true" @change="handleFileChanged" accept=".csv" class="my-2" type="file">
+          <span class="text-sm"><i>Met de volgende kolommen: Relatiecode, Volledige naam(1), Roepnaam, E-mail, 2e E-mail, Verenigingssporten, Diploma</i></span>
+          <button :disabled="disableButtons" class="btn mx-auto mt-2">Publish Ledenlijst</button>
+        </form>
+      </div>
+      <div class="flex flex-col gap-3">
+        <input v-model="searchTerm" class="input mb-2 font-bold" type="search" placeholder="Search">
+        <div v-for="lid in filteredLedenlijst" :key="lid.relatiecode">
+          <div @click="handleModel(lid)" class="item container flex flex-wrap hover:cursor-pointer">
+            <b class="w-24">{{ lid.relatiecode }}</b> {{ lid.fullName }}
+          </div>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { doc, getDocs, collection, writeBatch, updateDoc, setDoc, getFirestore } from "firebase/firestore"; 
+import { useToast } from 'vue-toastification'
+
+definePageMeta({
+  title: 'Ledenlijst',
+  key: 'back'
+})
+
+const toast = useToast()
+
+const usersStore = useUsersStore()
+const modelData = ref(null)
+const db = getFirestore()
+
+const file = ref(null)
+const disableButtons = ref(false)
+const searchTerm = ref('')
+const newLedenlijst = ref([])
+const showModel = ref(false)
+
+onMounted(async () => {
+  usersStore.getLedenlijst()
+})
+
+const handleModel = (lid) => {
+  modelData.value = lid
+  if (!modelData.value.hasOwnProperty('wedstrijdteam')) modelData.value.wedstrijdteam = false
+
+  modelData.value.oldWedstrijdteam = modelData.value.wedstrijdteam
+
+  showModel.value = true
+}
+
+const submitModelForm = async () => {
+  disableButtons.value = true
+  usersStore.ledenlijst.filter(a => a.relatiecode === modelData.value.relatiecode)[0].wedstrijdteam = modelData.value.wedstrijdteam 
+
+  if (modelData.value.wedstrijdteam === modelData.value.oldWedstrijdteam) {
+    disableButtons.value = false
+    showModel.value = false
+    return;
+  } 
+
+  let docRef = doc(db, "ledenlijst", modelData.value.relatiecode)
+
+  await updateDoc(docRef, {
+    wedstrijdteam: modelData.value.wedstrijdteam
+  })
+
+  docRef = doc(db, "competitors", modelData.value.relatiecode)
+  
+  if (modelData.value.wedstrijdteam) {
+    await setDoc(docRef, {
+      relatiecode: modelData.value.relatiecode,
+      name: modelData.value.fullName,
+      active: true, 
+    })
+  } else {
+    await updateDoc(docRef, {
+      active: false, 
+    })
+  }
+
+  toast.success('Persoon is bewerkt')
+
+  disableButtons.value = false
+  showModel.value = false
+}
+
+const filteredLedenlijst = computed(() => {
+  return usersStore.ledenlijst.filter(lid => lid.fullName.toLowerCase().includes(searchTerm.value.toLowerCase()))
+})
+
+const handleFileChanged = (event) => {
+  const target = event.target;
+
+  if (target && target.files) {
+    file.value = target.files[0];
+  }
+}
+
+const submitLedenlijst = () => {
+  disableButtons.value = true
+
+  let reader = new FileReader()
+
+  reader.onload = function() {
+    csvToJson(reader.result);
+  };
+
+  reader.onerror = function() {
+    console.log(reader.error);
+  };
+
+  reader.readAsText(file.value)
+}
+
+const csvToJson = (csv) => {
+  let arr = csv.split('\n');
+
+  var result = [];
+  var headers = arr[0].split(';');
+  for(var i = 1; i < arr.length; i++) {
+    var data = arr[i].split(';');
+    var obj = {};
+    for(var j = 0; j < data.length; j++) {
+      obj[headers[j].trim()] = data[j].trim();
+    }
+    result.push(obj);
+  }
+
+  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')
+
+  newLedenlijst.value = []
+
+  for (let i in result) {
+    let groups = []
+    let correctGroups = null 
+    if (!result[i].Relatiecode) break; 
+
+    if (result[i].Verenigingssporten.includes(',')) correctGroups = result[i].Verenigingssporten.split(',')    
+    else correctGroups = [result[i].Verenigingssporten] 
+    
+    correctGroups.forEach(group => {
+      const x = group.split(' - ')
+
+      if (x[2] === 'Week') groups.push('Vrijdag') 
+      else if (x[2] === 'Zaterdag' && x[1] !== 'Wedstrijd') groups.push('Zaterdag')
+
+      groups.push(x[1])
+    })
+
+    if (groups[2] === 'Week') groups[2] = 'Vrijdag'
+
+    console.log(result[i]);
+
+    const inwedstrijdteam = usersStore.ledenlijst.filter(x => x.relatiecode === result[i].Relatiecode)[0].wedstrijdteam;
+    
+    const wedstrijdteam = inwedstrijdteam ? true : false
+
+    newLedenlijst.value.push({ relatiecode: result[i].Relatiecode, wedstrijdteam, fullName: result[i]['Volledige naam (1)'], email: [result[i]['E-mail'], result[i]['2e E-mail']], groups: [...new Set(groups)], diploma: result[i]['Diploma dropdown 1'] })
+  }
+  uploadLedenlijst()
+}
+
+const uploadLedenlijst = async () => {
+  try {
+    const batch = writeBatch(db)
+
+    newLedenlijst.value.forEach(lid => {
+      const docRef = doc(db, "ledenlijst", lid.relatiecode)
+
+      const exists = usersStore.ledenlijst.filter(a => a.relatiecode === lid.relatiecode).length > 1
+
+      if (!exists) {
+        return batch.set(docRef, lid);
+      }
+      
+      batch.update(docRef, { fullName: lid.relatiecode, email: lid.email, groups: lid.groups, diploma: lid.diploma})
+    })
+
+    const deleteLeden = usersStore.ledenlijst.filter(a => newLedenlijst.value.map(x => x.relatiecode).indexOf(a.relatiecode) === -1)
+    
+    deleteLeden.forEach(lid => {
+      const docRef = doc(db, "ledenlijst", lid.relatiecode)
+
+      batch.delete(docRef)
+    })
+
+    await batch.commit();
+
+    toast.success('Published ledenlijst')
+  } catch (e) {
+    toast.error("Error updating ledenlijst");
+    console.log(e)
+  }
+
+  usersStore.ledenlijst = newLedenlijst.value
+  
+  updateUsers()
+}
+
+
+const updateUsers = async () => {
+  try {
+    const querySnapshot = await getDocs(collection(db, "users"));
+    querySnapshot.forEach((doc) => {
+      const data = doc.data()
+      data.id = doc.id
+      usersStore.users.push(data)
+
+    });
+  } catch (e) {
+    console.log(e)
+
+    toast.error('Error getting users')
+  }
+  
+  const batch = writeBatch(db);
+
+  usersStore.users.forEach(user => {
+    const lid = usersStore.ledenlijst.filter(a => a.email.includes(user.email))
+    const newRelatiecodes = lid.map(a => a.relatiecode)
+    
+    user.allRelatiecodes = newRelatiecodes
+    user.relatiecodes.forEach((relatiecode, index) => {
+      if (!newRelatiecodes.includes(relatiecode)) { user.relatiecodes.splice(index, 1); console.log('removed item', relatiecode)}
+    })
+
+    const userRef = doc(db, "users", user.id)    
+    batch.update(userRef, user)
+  })
+  
+  await batch.commit();
+
+  disableButtons.value = false
+}
+</script>