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

<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">
                <span class="">Last updated: <b>37 sep</b></span>
                <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="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="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>
    </div>
</template>

<script setup>
import { doc, getDocs, collection, writeBatch } from "firebase/firestore"; 
import { useToast } from 'vue-toastification'

definePageMeta({
    title: 'Ledenlijst',
    key: 'back'
})

const { db, ledenlijst } = inject('firebase')

const toast = useToast()

const file = ref(null)
const disableButtons = ref(false)
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;

    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 array = csv.split("\n")
    let result = [];

    let headers = array[0].split(",")

    for (let i = 1; i < array.length - 1; i++) {
        let obj = {}
    
        let str = array[i]
        let s = ''
    
        let flag = 0
        for (let ch of str) {
            if (ch === '"' && flag === 0) {
                flag = 1
            }
            else if (ch === '"' && flag == 1) flag = 0
            if (ch === ',' && flag === 0) ch = '|'
            if (ch !== '"') s += ch
        }
    
        let properties = s.split("|")
    
        for (let j in headers) {
            if (properties[j].includes(",")) {
                obj[headers[j]] = properties[j]
                .split(",").map(item => item.trim())
            }
            else obj[headers[j]] = properties[j]
        }
        
        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')

    ledenlijst.value = []

    for (let i in result) {
        let groups = []
        if (Array.isArray(result[i].Verenigingssporten)) {
            for (let j = 0; j < result[i].Verenigingssporten.length; j++ ) {
                let tmp = result[i].Verenigingssporten[j].split(' - ')
                tmp.shift()
                if (tmp[1] === 'Week') tmp[1] = 'Vrijdag'
                groups.push(...tmp)
            }
        } else {
            groups = result[i].Verenigingssporten.split(' - ')
            groups.shift()
            if (groups[1] === 'Week') groups[1] = 'Vrijdag'
        }

        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'] })
    }

    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>