From 2570f7b98b97a960f0da35a5cad10ac81542939b Mon Sep 17 00:00:00 2001
From: Xeovalyte <me+gitea@xeovalyte.dev>
Date: Fri, 27 Jan 2023 19:09:09 +0100
Subject: [PATCH] added ledenlijst wedstrijdteam configuratie

---
 frontend/components/layout/Navbar.vue        |  4 +-
 frontend/pages/settings/admin/ledenlijst.vue | 85 +++++++++++++++-----
 frontend/pages/wedstrijd/addcontest.vue      |  2 +-
 3 files changed, 70 insertions(+), 21 deletions(-)

diff --git a/frontend/components/layout/Navbar.vue b/frontend/components/layout/Navbar.vue
index bd4a90a..e564e13 100644
--- a/frontend/components/layout/Navbar.vue
+++ b/frontend/components/layout/Navbar.vue
@@ -17,7 +17,7 @@
                 <Icon size="1.8em" name="ion:settings-sharp" />
                 <span>Settings</span>
             </NuxtLink>
-            <NuxtLink v-if="userData.wedstrijdteam" to="/wedstrijd" class="flex flex-col items-center hover:cursor-pointer drop-shadow" :class="route.path.startsWith('/wedstrijd') ? 'text-primary' : ''">
+            <NuxtLink v-if="userPersons[0] && userPersons.filter(a => a.wedstrijdteam).length > 0" to="/wedstrijd" class="flex flex-col items-center hover:cursor-pointer drop-shadow" :class="route.path.startsWith('/wedstrijd') ? 'text-primary' : ''">
                 <Icon size="1.8em" name="ion:podium-outline" />
                 <span>Wedstrijd</span>
             </NuxtLink>
@@ -29,7 +29,7 @@
 import { Device } from '@capacitor/device';
 
 const route = useRoute()
-const { userData } = inject('firebase')
+const { userData, userPersons } = inject('firebase')
 
 const platform = ref(null)
 
diff --git a/frontend/pages/settings/admin/ledenlijst.vue b/frontend/pages/settings/admin/ledenlijst.vue
index 410aa5c..86556f4 100644
--- a/frontend/pages/settings/admin/ledenlijst.vue
+++ b/frontend/pages/settings/admin/ledenlijst.vue
@@ -1,40 +1,66 @@
 <template>
-    <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 class="item container flex flex-wrap">
-                    <b class="w-24">{{ lid.relatiecode }}</b> {{ lid.fullName }}
-                </div>
-            </div>
+  <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-200 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, runTransaction } from "firebase/firestore"; 
+import { doc, getDocs, collection, writeBatch, updateDoc } from "firebase/firestore"; 
 import { useToast } from 'vue-toastification'
 
 definePageMeta({
-    title: 'Ledenlijst',
-    key: 'back'
+  title: 'Ledenlijst',
+  key: 'back'
 })
 
 const { db, ledenlijst, users } = inject('firebase')
 
 const toast = useToast()
 
+const modelData = ref(null)
+
 const file = ref(null)
 const disableButtons = ref(false)
 const searchTerm = ref('')
 const newLedenlijst = ref([])
+const showModel = ref(false)
 
 onMounted(async () => {
   if (!ledenlijst.value.length) {
@@ -51,6 +77,29 @@ onMounted(async () => {
   }
 })
 
+const handleModel = (lid) => {
+  modelData.value = lid
+  if (!modelData.value.hasOwnProperty('wedstrijdteam')) modelData.value.wedstrijdteam = false
+
+  showModel.value = true
+}
+
+const submitModelForm = async () => {
+  disableButtons.value = true
+  ledenlijst.value.filter(a => a.relatiecode === modelData.value.relatiecode)[0].wedstrijdteam = modelData.value.wedstrijdteam 
+
+  const docRef = doc(db, "ledenlijst", modelData.value.relatiecode)
+
+  await updateDoc(docRef, {
+    wedstrijdteam: modelData.value.wedstrijdteam
+  })
+
+  toast.success('Persoon is bewerkt')
+
+  disableButtons.value = false
+  showModel.value = false
+}
+
 const filteredLedenlijst = computed(() => {
   return ledenlijst.value.filter(lid => lid.fullName.toLowerCase().includes(searchTerm.value.toLowerCase()))
 })
diff --git a/frontend/pages/wedstrijd/addcontest.vue b/frontend/pages/wedstrijd/addcontest.vue
index e432f57..e9cc16a 100644
--- a/frontend/pages/wedstrijd/addcontest.vue
+++ b/frontend/pages/wedstrijd/addcontest.vue
@@ -26,7 +26,7 @@
       <label class="font-bold">Info (Optioneel)</label>
       <input v-model="modelData.info" type="text" placeholder="Bijv. Een diskwalificatie" class="input dark:bg-neutral-700 bg-neutral-300 mb-10" />
 
-      <input type="submit" class="btn" :value="modelData.edit ? 'Bewerken' : 'Toevoegen'" />
+      <input :disabled="disableButtons" type="submit" class="btn" :value="modelData.edit ? 'Bewerken' : 'Toevoegen'" />
     </form>
   </div>
   <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">