wrbapp/frontend/pages/settings/admin/ledenlijst.vue

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