From 62d5db8c3e1b314e61c2fe4c0172853a9d2d9a0d Mon Sep 17 00:00:00 2001
From: paidge <paidge_cs@hotmail.com>
Date: Wed, 26 Jan 2022 04:16:58 +0100
Subject: [PATCH] v0.07 : add a button to delete favourites
---
assets/css/style.scss | 1 +
components/btn/Sort.vue | 3 --
components/certif/List.vue | 2 +-
components/member/Card.vue | 45 +++-----------------------
components/member/List.vue | 32 ++++++++++++------
components/navigation/menu/Sidebar.vue | 2 +-
nuxt.config.js | 2 +-
pages/favoris.vue | 7 ++--
pages/previsions/index.vue | 8 +++--
plugins/favourites.js | 42 ++++++++++++++++++++++++
plugins/functions.js | 13 --------
11 files changed, 80 insertions(+), 77 deletions(-)
create mode 100644 plugins/favourites.js
delete mode 100644 plugins/functions.js
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 386cb97..18e7874 100644
--- a/assets/css/style.scss
+++ b/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
diff --git a/components/btn/Sort.vue b/components/btn/Sort.vue
index 8c061a9..b07e1be 100644
--- a/components/btn/Sort.vue
+++ b/components/btn/Sort.vue
@@ -44,9 +44,6 @@ export default {
return ["asc", "desc"].indexOf(value) !== -1
}
}
- },
- created() {
- console.log("created")
}
}
</script>
diff --git a/components/certif/List.vue b/components/certif/List.vue
index e48244a..6caa536 100644
--- a/components/certif/List.vue
+++ b/components/certif/List.vue
@@ -76,7 +76,7 @@
">
<th scope="row" class="py-1">
<div>
- <span v-if="$isFavourite(certif.uid)">★ </span>
+ <span v-if="$favourites.list.includes(certif.uid)">★ </span>
{{ certif.uid }}
<BadgeDanger
:limitDate="certif.received_certifications.limit"
diff --git a/components/member/Card.vue b/components/member/Card.vue
index 10bae06..1af4ce2 100644
--- a/components/member/Card.vue
+++ b/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>
diff --git a/components/member/List.vue b/components/member/List.vue
index a5e5982..6cf81b6 100644
--- a/components/member/List.vue
+++ b/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)">★ </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)">★ </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>
diff --git a/components/navigation/menu/Sidebar.vue b/components/navigation/menu/Sidebar.vue
index e938fda..8a78660 100644
--- a/components/navigation/menu/Sidebar.vue
+++ b/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
diff --git a/nuxt.config.js b/nuxt.config.js
index 4e615b3..3309a36 100644
--- a/nuxt.config.js
+++ b/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"
],
diff --git a/pages/favoris.vue b/pages/favoris.vue
index 5ded360..1ff65ba 100644
--- a/pages/favoris.vue
+++ b/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) {
diff --git a/pages/previsions/index.vue b/pages/previsions/index.vue
index 61f362a..3461e67 100644
--- a/pages/previsions/index.vue
+++ b/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)"
>★ </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)
+ "
>★ </span
>
{{ member.member.uid }}
diff --git a/plugins/favourites.js b/plugins/favourites.js
new file mode 100644
index 0000000..73187ba
--- /dev/null
+++ b/plugins/favourites.js
@@ -0,0 +1,42 @@
+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
+ })
+ )
+}
diff --git a/plugins/functions.js b/plugins/functions.js
deleted file mode 100644
index 0c5efde..0000000
--- a/plugins/functions.js
+++ /dev/null
@@ -1,13 +0,0 @@
-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
-}
--
GitLab