Untitled

<template>
	<v-card>
		<v-toolbar color="accent" dark elevation="0">Membres du tableau</v-toolbar>
		<v-card-text>
			<v-row v-if="isUserCreator || isUserAdmin">
				<v-col cols="10">
					<v-text-field
						v-model="newCollaboraterEmail"
						:rules="rules"
						@keypress.enter="addCollaborater"
						color="accent"
						clearable
						label="Inviter un collaborateur"
						placeholder="email@example.com"
					></v-text-field>
				</v-col>
				<v-col cols="2" class="d-flex align-center">
					<v-btn @click="addCollaborater" color="primary"><v-icon>mdi-plus</v-icon></v-btn>
				</v-col>
			</v-row>
			<v-list v-if="collaboraters.length" class="collaboraters-list">
				<v-list-item v-for="(collaborater, i) in collaboraters" :key="i">
					<v-list-item-avatar class="mr-2" :color="!collaborater.photoURL ? 'avatarBg' : ''">
						<img v-if="collaborater.photoURL" :src="collaborater.photoURL" />
						<span v-else>{{ collaborater.displayName.split(" ")[0][0].toUpperCase() }}{{ collaborater.displayName.split(" ")[1][0].toUpperCase() }}</span>
					</v-list-item-avatar>
					<v-list-item-content>
						<v-list-item-title>
							{{ collaborater.displayName }}
							<span v-if="collaborater.email === table.creator.email">(Créateur)</span>
							<span v-if="table.admins.includes(collaborater.email) && collaborater.email !== table.creator.email">(Administrateur)</span>
						</v-list-item-title>
						<v-list-item-subtitle>{{ collaborater.email }}</v-list-item-subtitle>
					</v-list-item-content>
					<v-list-item-action v-if="(isUserCreator && collaborater.email != table.creator.email) || (isUserAdmin && collaborater.email != table.creator.email)">
						<v-menu offset-x>
							<template v-slot:activator="{ on, attrs }">
								<v-btn icon v-on="on" v-bind="attrs" class="more-btn"><v-icon>mdi-dots-vertical</v-icon></v-btn>
							</template>
							<v-list>
								<v-list-item v-if="collaborater.email !== table.creator.email && isUserCreator && !table/*?*/.admins/*?*/.includes(collaborater.email)" @click="addAdmin(collaborater.email)">
									<v-list-item-content>
										<v-list-item-title>Promouvoir comme administrateur</v-list-item-title>
									</v-list-item-content>
								</v-list-item>
								<v-list-item v-if="collaborater.email !== table.creator.email && isUserCreator && table?.admins?.includes(collaborater.email)" @click="removeAdmin(collaborater.email)">
									<v-list-item-content>
										<v-list-item-title>Rétrograder comme collaborateur</v-list-item-title>
									</v-list-item-content>
								</v-list-item>
								<v-list-item v-if="isUserCreator" @click="setOwner(collaborater)">
									<v-list-item-title>Promouvoir comme propriétaire</v-list-item-title>
								</v-list-item>
				</v-list>
			</v-list>
<<<<<<< HEAD
			<p v-else class="mt-4 body-1">Les collaborateurs du tableau que vous inviterez seront ajoutés ici</p>
=======
			<v-list v-if="table.collaboraters.filter((collaborater) => !collaboraters.map((collaborater) => collaborater.email).includes(collaborater)).length">
				<v-list-item v-for="(collaborater, i) in table.collaboraters.filter((collaborater) => !collaboraters.map((collaborater) => collaborater.email).includes(collaborater))" :key="i">
					<v-list-item-avatar class="mr-2 profile-img">
						<v-icon>mdi-account-question</v-icon>
					</v-list-item-avatar>
					<v-list-item-content>
						<v-list-item-subtitle>
							{{ collaborater }}
						</v-list-item-subtitle>
					</v-list-item-content>
					<v-list-item-action v-if="(isUserCreator && collaborater.email != table.creator.email) || (isUserAdmin && collaborater.email != table.creator.email)">
						<v-menu offset-x>
							<template v-slot:activator="{ on, attrs }">
								<v-btn icon v-on="on" v-bind="attrs" class="more-btn"><v-icon>mdi-dots-vertical</v-icon></v-btn>
							</template>
							<v-list>
								<v-list-item v-if="isUserAdmin && collaborater.email != user.email && collaborater.email != table.creator.email" @click="removeCollaborater(collaborater)">
									<v-list-item-content>
										<v-list-item-title>Ejecter</v-list-item-title>
									</v-list-item-content>
								</v-list-item>
							</v-list>
						</v-menu>
					</v-list-item-action>
					<v-btn v-if="collaborater.email === table.creator.email" icon>
						<v-icon color="amber">mdi-crown</v-icon>
					</v-btn>
				</v-list-item>
			</v-list>
			<p v-else class="mt-4 body-1">Les collaborateurs du tableau que vous inviterez seront ajouter ici</p>

			<v-alert v-if="errorMessage" color="red" outlined border="left" dense dismissible type="error">{{ errorMessage }}</v-alert>
		</v-card-text>
		<v-card-actions class="justify-end">
			<v-btn text @click="dialog.value = false">Fermer</v-btn>
		</v-card-actions>
	</v-card>
</template>

<script>
import { db } from "@/firebase";
import { getCurrentUser } from "@/services/authentification";
import { setOwner, addCollaborater, removeCollaborater, addAdmin, removeAdmin } from "@/services/table";
export default {
	name: "MemberList",
	props: ["dialog", "isUserCreator", "table", "isUserAdmin"],
	data: () => ({
		newCollaboraterEmail: "",
		collaboraters: [],
		errorMessage: "",
		rules: [],
	}),
	computed: {
		user() {
			return getCurrentUser();
		},
		admins() {
			let adminsArr = [];
			this.collaboraters.forEach(collaborater => {
				if (this.isCollaboraterAdmin(collaborater)) {
					adminsArr.push(collaborater);
				}
			})
			
			return adminsArr;
		},
		noRoles() {
			let arr = [];
			this.collaboraters.forEach(collaborater => {
				if (!this.isCollaboraterAdmin(collaborater)) {
					arr.push(collaborater);
				}
			})

			return arr;
		}
	},
	async mounted() {
		await this.$bind("collaboraters", db.collection("users").where("email", "in", this.table.collaboraters));
	},
	methods: {
		async addCollaborater() {
			this.rules = [(v) => !!v || "L'adresse email est requise", (v) => /.+@.+/.test(v) || "L'adresse email est invalide"];
			this.errorMessage = await addCollaborater(this.table, this.newCollaboraterEmail);
		},
		async removeCollaborater(collaboraterEmail) {
			await removeCollaborater(this.table, collaboraterEmail);
		},
		async addAdmin(collaboraterEmail) {
			await addAdmin(collaboraterEmail, this.table);
		},
		async removeAdmin(collaboraterEmail) {
			await removeAdmin(collaboraterEmail, this.table);
		},
		async setOwner(collaborater) {
			setOwner(collaborater, this.table);
		},
	},
	watch: {
		"table.collaboraters": async function () {
			await this.$bind("collaboraters", db.collection("users").where("email", "in", this.table.collaboraters));
			if (!this.table.collaboraters.includes(getCurrentUser().email)) this.$router.push({ name: "Home" });
		},
		newCollaboraterEmail: function (val) {
			this.rules = [];
		},
	},
};
</script>

<style>
.role-title {
	color: #4d4d4d;
	font-style: italic;
	letter-spacing: 0.75px;
}
</style>