Update frontend/pages/settings/admin/ledenlijst.vue
All checks were successful
Build and Deploy / Deploy (push) Successful in 4m55s
All checks were successful
Build and Deploy / Deploy (push) Successful in 4m55s
This commit is contained in:
parent
6cc14bcaf0
commit
a121c3ae10
@ -1,260 +1,262 @@
|
|||||||
<template>
|
<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" >
|
<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">
|
<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>
|
<h1 class="font-bold text-center text-lg mb-5">Beheer Persoon</h1>
|
||||||
|
|
||||||
<div class="text-default mb-2">
|
<div class="text-default mb-2">
|
||||||
Relatiecode: <b>{{ modelData.relatiecode }}</b>
|
Relatiecode: <b>{{ modelData.relatiecode }}</b>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-default mb-2">
|
<div class="text-default mb-2">
|
||||||
Naam: <b>{{ modelData.fullName }}</b>
|
Naam: <b>{{ modelData.fullName }}</b>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-default mb-5">
|
<div class="text-default mb-5">
|
||||||
Groepen: <b>{{ modelData.groups.join(', ') }}</b>
|
Groepen: <b>{{ modelData.groups.join(', ') }}</b>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<label class="relative inline-flex items-center cursor-pointer mb-5">
|
<label class="relative inline-flex items-center cursor-pointer mb-5">
|
||||||
<input type="checkbox" value="" v-model="modelData.wedstrijdteam" class="sr-only peer">
|
<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>
|
<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>
|
<span class="ml-3 font-medium text-gray-900 dark:text-gray-300">Wedstrijd Team</span>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<input :disabled="disableButtons" type="submit" class="btn" :value="'Bewerken'" />
|
<input :disabled="disableButtons" type="submit" class="btn" :value="'Bewerken'" />
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
|
<div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
|
||||||
<div class="mb-5">
|
<div class="mb-5">
|
||||||
<form @submit.prevent="submitLedenlijst" class="flex flex-col">
|
<form @submit.prevent="submitLedenlijst" class="flex flex-col">
|
||||||
<input required="true" @change="handleFileChanged" accept=".csv" class="my-2" type="file">
|
<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>
|
<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>
|
<button :disabled="disableButtons" class="btn mx-auto mt-2">Publish Ledenlijst</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col gap-3">
|
<div class="flex flex-col gap-3">
|
||||||
<input v-model="searchTerm" class="input mb-2 font-bold" type="search" placeholder="Search">
|
<input v-model="searchTerm" class="input mb-2 font-bold" type="search" placeholder="Search">
|
||||||
<div v-for="lid in filteredLedenlijst" :key="lid.relatiecode">
|
<div v-for="lid in filteredLedenlijst" :key="lid.relatiecode">
|
||||||
<div @click="handleModel(lid)" class="item container flex flex-wrap hover:cursor-pointer">
|
<div @click="handleModel(lid)" class="item container flex flex-wrap hover:cursor-pointer">
|
||||||
<b class="w-24">{{ lid.relatiecode }}</b> {{ lid.fullName }}
|
<b class="w-24">{{ lid.relatiecode }}</b> {{ lid.fullName }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { doc, getDocs, collection, writeBatch, updateDoc, setDoc, getFirestore } from "firebase/firestore";
|
import { doc, getDocs, collection, writeBatch, updateDoc, setDoc, getFirestore } from "firebase/firestore";
|
||||||
import { useToast } from 'vue-toastification'
|
import { useToast } from 'vue-toastification'
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
title: 'Ledenlijst',
|
title: 'Ledenlijst',
|
||||||
key: 'back'
|
key: 'back'
|
||||||
})
|
})
|
||||||
|
|
||||||
const toast = useToast()
|
const toast = useToast()
|
||||||
|
|
||||||
const usersStore = useUsersStore()
|
const usersStore = useUsersStore()
|
||||||
const modelData = ref(null)
|
const modelData = ref(null)
|
||||||
const db = getFirestore()
|
const db = getFirestore()
|
||||||
|
|
||||||
const file = ref(null)
|
const file = ref(null)
|
||||||
const disableButtons = ref(false)
|
const disableButtons = ref(false)
|
||||||
const searchTerm = ref('')
|
const searchTerm = ref('')
|
||||||
const newLedenlijst = ref([])
|
const newLedenlijst = ref([])
|
||||||
const showModel = ref(false)
|
const showModel = ref(false)
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
usersStore.getLedenlijst()
|
usersStore.getLedenlijst()
|
||||||
})
|
})
|
||||||
|
|
||||||
const handleModel = (lid) => {
|
const handleModel = (lid) => {
|
||||||
modelData.value = lid
|
modelData.value = lid
|
||||||
if (!modelData.value.hasOwnProperty('wedstrijdteam')) modelData.value.wedstrijdteam = false
|
if (!modelData.value.hasOwnProperty('wedstrijdteam')) modelData.value.wedstrijdteam = false
|
||||||
|
|
||||||
modelData.value.oldWedstrijdteam = modelData.value.wedstrijdteam
|
modelData.value.oldWedstrijdteam = modelData.value.wedstrijdteam
|
||||||
|
|
||||||
showModel.value = true
|
showModel.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const submitModelForm = async () => {
|
const submitModelForm = async () => {
|
||||||
disableButtons.value = true
|
disableButtons.value = true
|
||||||
usersStore.ledenlijst.filter(a => a.relatiecode === modelData.value.relatiecode)[0].wedstrijdteam = modelData.value.wedstrijdteam
|
usersStore.ledenlijst.filter(a => a.relatiecode === modelData.value.relatiecode)[0].wedstrijdteam = modelData.value.wedstrijdteam
|
||||||
|
|
||||||
if (modelData.value.wedstrijdteam === modelData.value.oldWedstrijdteam) {
|
if (modelData.value.wedstrijdteam === modelData.value.oldWedstrijdteam) {
|
||||||
disableButtons.value = false
|
disableButtons.value = false
|
||||||
showModel.value = false
|
showModel.value = false
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let docRef = doc(db, "ledenlijst", modelData.value.relatiecode)
|
let docRef = doc(db, "ledenlijst", modelData.value.relatiecode)
|
||||||
|
|
||||||
await updateDoc(docRef, {
|
await updateDoc(docRef, {
|
||||||
wedstrijdteam: modelData.value.wedstrijdteam
|
wedstrijdteam: modelData.value.wedstrijdteam
|
||||||
})
|
})
|
||||||
|
|
||||||
docRef = doc(db, "competitors", modelData.value.relatiecode)
|
docRef = doc(db, "competitors", modelData.value.relatiecode)
|
||||||
|
|
||||||
if (modelData.value.wedstrijdteam) {
|
if (modelData.value.wedstrijdteam) {
|
||||||
await setDoc(docRef, {
|
await setDoc(docRef, {
|
||||||
relatiecode: modelData.value.relatiecode,
|
relatiecode: modelData.value.relatiecode,
|
||||||
name: modelData.value.fullName,
|
name: modelData.value.fullName,
|
||||||
active: true,
|
active: true,
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
await updateDoc(docRef, {
|
await updateDoc(docRef, {
|
||||||
active: false,
|
active: false,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
toast.success('Persoon is bewerkt')
|
toast.success('Persoon is bewerkt')
|
||||||
|
|
||||||
disableButtons.value = false
|
disableButtons.value = false
|
||||||
showModel.value = false
|
showModel.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
const filteredLedenlijst = computed(() => {
|
const filteredLedenlijst = computed(() => {
|
||||||
return usersStore.ledenlijst.filter(lid => lid.fullName.toLowerCase().includes(searchTerm.value.toLowerCase()))
|
return usersStore.ledenlijst.filter(lid => lid.fullName.toLowerCase().includes(searchTerm.value.toLowerCase()))
|
||||||
})
|
})
|
||||||
|
|
||||||
const handleFileChanged = (event) => {
|
const handleFileChanged = (event) => {
|
||||||
const target = event.target;
|
const target = event.target;
|
||||||
|
|
||||||
if (target && target.files) {
|
if (target && target.files) {
|
||||||
file.value = target.files[0];
|
file.value = target.files[0];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const submitLedenlijst = () => {
|
const submitLedenlijst = () => {
|
||||||
disableButtons.value = true
|
disableButtons.value = true
|
||||||
|
|
||||||
let reader = new FileReader()
|
let reader = new FileReader()
|
||||||
|
|
||||||
reader.onload = function() {
|
reader.onload = function() {
|
||||||
csvToJson(reader.result);
|
csvToJson(reader.result);
|
||||||
};
|
};
|
||||||
|
|
||||||
reader.onerror = function() {
|
reader.onerror = function() {
|
||||||
console.log(reader.error);
|
console.log(reader.error);
|
||||||
};
|
};
|
||||||
|
|
||||||
reader.readAsText(file.value)
|
reader.readAsText(file.value)
|
||||||
}
|
}
|
||||||
|
|
||||||
const csvToJson = (csv) => {
|
const csvToJson = (csv) => {
|
||||||
let arr = csv.split('\n');
|
let arr = csv.split('\n');
|
||||||
|
|
||||||
var result = [];
|
var result = [];
|
||||||
var headers = arr[0].split(';');
|
var headers = arr[0].split(';');
|
||||||
for(var i = 1; i < arr.length; i++) {
|
for(var i = 1; i < arr.length; i++) {
|
||||||
var data = arr[i].split(';');
|
var data = arr[i].split(';');
|
||||||
var obj = {};
|
var obj = {};
|
||||||
for(var j = 0; j < data.length; j++) {
|
for(var j = 0; j < data.length; j++) {
|
||||||
obj[headers[j].trim()] = data[j].trim();
|
obj[headers[j].trim()] = data[j].trim();
|
||||||
}
|
}
|
||||||
result.push(obj);
|
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')
|
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 = []
|
newLedenlijst.value = []
|
||||||
|
|
||||||
for (let i in result) {
|
for (let i in result) {
|
||||||
let groups = []
|
let groups = []
|
||||||
let correctGroups = null
|
let correctGroups = null
|
||||||
if (!result[i].Relatiecode) break;
|
if (!result[i].Relatiecode) break;
|
||||||
|
|
||||||
if (result[i].Verenigingssporten.includes(',')) correctGroups = result[i].Verenigingssporten.split(',')
|
if (result[i].Verenigingssporten.includes(',')) correctGroups = result[i].Verenigingssporten.split(',')
|
||||||
else correctGroups = [result[i].Verenigingssporten]
|
else correctGroups = [result[i].Verenigingssporten]
|
||||||
|
|
||||||
correctGroups.forEach(group => {
|
correctGroups.forEach(group => {
|
||||||
const x = group.split(' - ')
|
const x = group.split(' - ')
|
||||||
|
|
||||||
if (x[2] === 'Week') groups.push('Vrijdag')
|
if (x[2] === 'Week') groups.push('Vrijdag')
|
||||||
else if (x[2] === 'Zaterdag' && x[1] !== 'Wedstrijd') groups.push('Zaterdag')
|
else if (x[2] === 'Zaterdag' && x[1] !== 'Wedstrijd') groups.push('Zaterdag')
|
||||||
|
|
||||||
groups.push(x[1])
|
groups.push(x[1])
|
||||||
})
|
})
|
||||||
|
|
||||||
if (groups[2] === 'Week') groups[2] = 'Vrijdag'
|
if (groups[2] === 'Week') groups[2] = 'Vrijdag'
|
||||||
|
|
||||||
const inwedstrijdteam = usersStore.ledenlijst.filter(x => x.relatiecode === result[i].Relatiecode)[0].wedstrijdteam;
|
console.log(result[i]);
|
||||||
|
|
||||||
const wedstrijdteam = inwedstrijdteam ? true : false
|
const inwedstrijdteam = usersStore.ledenlijst.filter(x => x.relatiecode === result[i].Relatiecode)[0].wedstrijdteam;
|
||||||
|
|
||||||
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'] })
|
const wedstrijdteam = inwedstrijdteam ? true : false
|
||||||
}
|
|
||||||
uploadLedenlijst()
|
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)
|
const uploadLedenlijst = async () => {
|
||||||
|
try {
|
||||||
newLedenlijst.value.forEach(lid => {
|
const batch = writeBatch(db)
|
||||||
const docRef = doc(db, "ledenlijst", lid.relatiecode)
|
|
||||||
|
newLedenlijst.value.forEach(lid => {
|
||||||
const exists = usersStore.ledenlijst.filter(a => a.relatiecode === lid.relatiecode).length > 1
|
const docRef = doc(db, "ledenlijst", lid.relatiecode)
|
||||||
|
|
||||||
if (!exists) {
|
const exists = usersStore.ledenlijst.filter(a => a.relatiecode === lid.relatiecode).length > 1
|
||||||
return batch.set(docRef, lid);
|
|
||||||
}
|
if (!exists) {
|
||||||
|
return batch.set(docRef, lid);
|
||||||
batch.update(docRef, { fullName: lid.relatiecode, email: lid.email, groups: lid.groups, diploma: lid.diploma})
|
}
|
||||||
})
|
|
||||||
|
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 deleteLeden = usersStore.ledenlijst.filter(a => newLedenlijst.value.map(x => x.relatiecode).indexOf(a.relatiecode) === -1)
|
||||||
const docRef = doc(db, "ledenlijst", lid.relatiecode)
|
|
||||||
|
deleteLeden.forEach(lid => {
|
||||||
batch.delete(docRef)
|
const docRef = doc(db, "ledenlijst", lid.relatiecode)
|
||||||
})
|
|
||||||
|
batch.delete(docRef)
|
||||||
await batch.commit();
|
})
|
||||||
|
|
||||||
toast.success('Published ledenlijst')
|
await batch.commit();
|
||||||
} catch (e) {
|
|
||||||
toast.error("Error updating ledenlijst");
|
toast.success('Published ledenlijst')
|
||||||
console.log(e)
|
} catch (e) {
|
||||||
}
|
toast.error("Error updating ledenlijst");
|
||||||
|
console.log(e)
|
||||||
usersStore.ledenlijst = newLedenlijst.value
|
}
|
||||||
|
|
||||||
updateUsers()
|
usersStore.ledenlijst = newLedenlijst.value
|
||||||
}
|
|
||||||
|
updateUsers()
|
||||||
|
}
|
||||||
const updateUsers = async () => {
|
|
||||||
try {
|
|
||||||
const querySnapshot = await getDocs(collection(db, "users"));
|
const updateUsers = async () => {
|
||||||
querySnapshot.forEach((doc) => {
|
try {
|
||||||
const data = doc.data()
|
const querySnapshot = await getDocs(collection(db, "users"));
|
||||||
data.id = doc.id
|
querySnapshot.forEach((doc) => {
|
||||||
usersStore.users.push(data)
|
const data = doc.data()
|
||||||
|
data.id = doc.id
|
||||||
});
|
usersStore.users.push(data)
|
||||||
} catch (e) {
|
|
||||||
console.log(e)
|
});
|
||||||
|
} catch (e) {
|
||||||
toast.error('Error getting users')
|
console.log(e)
|
||||||
}
|
|
||||||
|
toast.error('Error getting users')
|
||||||
const batch = writeBatch(db);
|
}
|
||||||
|
|
||||||
usersStore.users.forEach(user => {
|
const batch = writeBatch(db);
|
||||||
const lid = usersStore.ledenlijst.filter(a => a.email.includes(user.email))
|
|
||||||
const newRelatiecodes = lid.map(a => a.relatiecode)
|
usersStore.users.forEach(user => {
|
||||||
|
const lid = usersStore.ledenlijst.filter(a => a.email.includes(user.email))
|
||||||
user.allRelatiecodes = newRelatiecodes
|
const newRelatiecodes = lid.map(a => a.relatiecode)
|
||||||
user.relatiecodes.forEach((relatiecode, index) => {
|
|
||||||
if (!newRelatiecodes.includes(relatiecode)) { user.relatiecodes.splice(index, 1); console.log('removed item', 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)
|
|
||||||
})
|
const userRef = doc(db, "users", user.id)
|
||||||
|
batch.update(userRef, user)
|
||||||
await batch.commit();
|
})
|
||||||
|
|
||||||
disableButtons.value = false
|
await batch.commit();
|
||||||
}
|
|
||||||
</script>
|
disableButtons.value = false
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user