v0.07 : add a button to delete favourites

assets/css/style.scss

@@ -14,6 +14,7 @@ $body-color: var(--text-primary-color);
 $table-bg: var(--background-color-primary);
 $table-color: var(--text-primary-color);
 $table-head-bg: var(--background-color-secondary);
+$table-head-color: var(--text-primary-color);
 $table-hover-bg: rgba(0, 0, 255, 0.075);
 
 // Breadcrumb

components/btn/Sort.vue

@@ -44,9 +44,6 @@ export default {
 				return ["asc", "desc"].indexOf(value) !== -1
 			}
 		}
-	},
-	created() {
-		console.log("created")
 	}
 }
 </script>

components/certif/List.vue

@@ -76,7 +76,7 @@
 					">
 					<th scope="row" class="py-1">
 						<div>
-							<span v-if="$isFavourite(certif.uid)">★&nbsp;</span>
+							<span v-if="$favourites.list.includes(certif.uid)">★&nbsp;</span>
 							{{ certif.uid }}
 							<BadgeDanger
 								:limitDate="certif.received_certifications.limit"

components/member/Card.vue

@@ -4,16 +4,16 @@
 			id="favori"
 			class="btn btn-light position-absolute"
 			:class="{
-				add: !isFavorite,
-				remove: isFavorite
+				add: !$favourites.list.includes(hash.uid),
+				remove: $favourites.list.includes(hash.uid)
 			}"
-			@click="toggleFavourite"></button>
+			@click="$favourites.toggleFavourite(hash.uid, $event)"></button>
 		<div class="card-body">
 			<h2 class="card-title text-center mb-4">
 				{{ hash.uid }}
 				<BadgeStatus :membre="hash" />
 			</h2>
-			<BtnClipboard :textContent="this.hash.pubkey" />
+			<BtnClipboard :textContent="hash.pubkey" />
 			<div class="table-responsive">
 				<table
 					class="table table-sm table-borderless"
@@ -136,43 +136,6 @@ export default {
 	},
 	props: {
 		hash: Object
-	},
-	methods: {
-		toggleFavourite() {
-			let $this = this
-
-			$("#favori").tooltip({
-				title: function () {
-					return $this.isFavorite
-						? $this.$t("favoris.supprime")
-						: $this.$t("favoris.enregistre")
-				},
-				html: true,
-				trigger: "manual"
-			})
-
-			$("#favori").tooltip("show")
-			setTimeout(() => {
-				$("#favori").tooltip("hide")
-			}, 1000)
-
-			if (!this.isFavorite) {
-				this.favourites.push(this.hash.uid)
-			} else {
-				this.favourites.splice(this.favourites.indexOf(this.hash.uid), 1)
-			}
-
-			localStorage.favourites = JSON.stringify(this.favourites)
-		}
-	},
-	computed: {
-		isFavorite() {
-			this.favourites = localStorage.favourites
-				? JSON.parse(localStorage.favourites)
-				: []
-
-			return this.favourites.includes(this.hash.uid)
-		}
 	}
 }
 </script>

components/member/List.vue

@@ -32,15 +32,14 @@
 							:currentSort="currentSort"
 							:currentSortDir="currentSortDir" />
 					</th>
+					<th class="position-relative"></th>
 				</tr>
 			</thead>
 			<tbody>
-				<tr
-					v-for="member in membersSorted"
-					:key="member.uid"
-					@click="redirect(member.hash)">
-					<th scope="row">
-						<span v-if="$isFavourite(member.uid)">★&nbsp;</span>{{ member.uid }}
+				<tr v-for="member in membersSorted" :key="member.uid">
+					<th scope="row" @click="redirect(member.hash)">
+						<span v-if="$favourites.list.includes(member.uid)">★&nbsp;</span
+						>{{ member.uid }}
 						<BadgeDanger
 							:limitDate="
 								Math.min(member.received_certifications.limit, member.limitDate)
@@ -48,16 +47,29 @@
 							:memberStatus="member.status" />
 						<BadgeStatus :membre="member" />
 					</th>
-					<td class="d-none d-md-table-cell" v-if="displayPubkey">
+					<td
+						class="d-none d-md-table-cell"
+						v-if="displayPubkey"
+						@click="redirect(member.hash)">
 						{{ member.pubkey.substring(0, 10) }}
 					</td>
-					<td class="d-none d-sm-table-cell" v-if="displayDate">
+					<td
+						class="d-none d-sm-table-cell"
+						v-if="displayDate"
+						@click="redirect(member.hash)">
 						<BadgeDate
 							:date="
 								Math.min(member.limitDate, member.received_certifications.limit)
 							"
-							styleDate="long"
-							class="d-block text-center" />
+							styleDate="long" />
+					</td>
+					<td class="py-1 text-center">
+						<button
+							class="btn btn-danger"
+							v-if="$favourites.list.includes(member.uid)"
+							@click="$favourites.toggleFavourite(member.uid, $event)">
+							X
+						</button>
 					</td>
 				</tr>
 			</tbody>

components/navigation/menu/Sidebar.vue

@@ -10,7 +10,7 @@
 			</nuxt-link>
 			<div
 				class="d-flex text-info justify-content-between align-items-baseline mt-3 mx-2">
-				<div class="">v0.06</div>
+				<div class="">v0.07</div>
 				<div class="small" v-if="countMax">
 					{{ $t("bloc.title") }} n°<span class="font-weight-bold">{{
 						countMax.number

nuxt.config.js

@@ -25,7 +25,7 @@ export default {
 
 	// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
 	plugins: [
-		"~plugins/functions.js",
+		"~plugins/favourites.js",
 		"~plugins/filters.js",
 		"~plugins/bootstrap.js"
 	],

pages/favoris.vue

@@ -3,9 +3,8 @@
 		<h2 class="text-center my-5 font-weight-light">
 			{{ $t("favoris.title") }}
 		</h2>
-
 		<NavigationLoader :isLoading="$apollo.queries.favoris.loading" />
-		<div class="row text-center">
+		<div class="row">
 			<div class="col">
 				<transition name="fade">
 					<div class="alert alert-danger" v-if="error">{{ error }}</div>
@@ -51,9 +50,7 @@ export default {
 			query: FAVORIS,
 			variables() {
 				return {
-					group: localStorage.favourites
-						? JSON.parse(localStorage.favourites)
-						: []
+					group: this.$favourites.list
 				}
 			},
 			update(data) {

pages/previsions/index.vue

@@ -60,7 +60,8 @@
 												)
 											">
 											<th scope="row">
-												<span v-if="$isFavourite(forecast.member.uid)"
+												<span
+													v-if="$favourites.list.includes(forecast.member.uid)"
 													>★&nbsp;</span
 												>
 												{{ forecast.member.uid }}
@@ -117,7 +118,10 @@
 														v-for="member in forecast.forecasts"
 														:key="member.member.uid">
 														<div class="mr-3">
-															<span v-if="$isFavourite(member.member.uid)"
+															<span
+																v-if="
+																	$favourites.list.includes(member.member.uid)
+																"
 																>★&nbsp;</span
 															>
 															{{ member.member.uid }}

plugins/favourites.js

+import Vue from "vue"
+
+export default (context, inject) => {
+	let liste_favoris = localStorage.favourites
+		? JSON.parse(localStorage.favourites)
+		: []
+
+	let toggleFavourite = (uid, e) => {
+		$(e.target).tooltip({
+			title: function () {
+				return context.$favourites.list.includes(uid)
+					? context.app.i18n.t("favoris.supprime")
+					: context.app.i18n.t("favoris.enregistre")
+			},
+			html: true,
+			trigger: "manual"
+		})
+
+		$(e.target).tooltip("show")
+		setTimeout(() => {
+			$(e.target).tooltip("hide")
+		}, 600)
+
+		if (!context.$favourites.list.includes(uid)) {
+			context.$favourites.list.push(uid)
+		} else {
+			context.$favourites.list = context.$favourites.list.filter(
+				(item) => item !== uid
+			)
+		}
+
+		localStorage.favourites = JSON.stringify(context.$favourites.list)
+	}
+
+	inject(
+		"favourites",
+		Vue.observable({
+			list: liste_favoris,
+			toggleFavourite: toggleFavourite
+		})
+	)
+}

plugins/functions.js

-export default (context, inject) => {
-	const isFavourite = (uid) => {
-		if (!localStorage.favourites) {
-			return false
-		} else if (JSON.parse(localStorage.favourites).includes(uid)) {
-			return true
-		}
-		return false
-	}
-	inject("isFavourite", isFavourite)
-	// For Nuxt <= 2.12, also add 👇
-	// context.$hello = hello
-}