From bbaac624e70f0155c288763479a542ddbbb20d56 Mon Sep 17 00:00:00 2001 From: Pierre-Jean CHANCELLIER <paidge_cs@hotmail.com> Date: Wed, 23 Feb 2022 12:15:51 +0100 Subject: [PATCH] btn to add list to favourites --- components/btn/Favori.vue | 4 ++-- components/btn/FavoriArray.vue | 32 ++++++++++++++++++++++++++++++++ components/certif/All.vue | 20 ++------------------ components/certif/Group.vue | 29 +++++++++++++++++++++++++++++ components/member/Card.vue | 19 ++++++++++++------- package.json | 2 +- plugins/bootstrap.js | 12 +++++++++++- plugins/favourites.js | 9 ++++++++- 8 files changed, 97 insertions(+), 30 deletions(-) create mode 100644 components/btn/FavoriArray.vue diff --git a/components/btn/Favori.vue b/components/btn/Favori.vue index 4699f24..604408d 100644 --- a/components/btn/Favori.vue +++ b/components/btn/Favori.vue @@ -15,11 +15,11 @@ }}</span> <solid-user-add-icon aria-hidden="true" - class="icon" + style="width: 2rem" v-if="!$favourites.list.includes(uid)" /> <solid-user-remove-icon aria-hidden="true" - class="icon" + style="width: 2rem" v-if="$favourites.list.includes(uid)" /> </button> </template> diff --git a/components/btn/FavoriArray.vue b/components/btn/FavoriArray.vue new file mode 100644 index 0000000..5846f41 --- /dev/null +++ b/components/btn/FavoriArray.vue @@ -0,0 +1,32 @@ +<template> + <button + v-if="membersToAdd.length != 0" + class="btn btn-secondary position-relative" + v-tooltip="{ title: $t('favoris.ajouter'), placement: 'left' }" + @click="$favourites.addFavorisArray(membersToAdd, $event)"> + <solid-user-group-icon aria-hidden="true" class="icon" /> + <span + aria-hidden="true" + class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"> + + {{ membersToAdd.length }} + </span> + </button> +</template> + +<script> +export default { + props: { + listUID: { + type: Array, + required: true + } + }, + computed: { + membersToAdd() { + return this.listUID.filter( + (el) => !this.$favourites.list.includes(el.uid) + ) + } + } +} +</script> diff --git a/components/certif/All.vue b/components/certif/All.vue index 605be22..2911049 100644 --- a/components/certif/All.vue +++ b/components/certif/All.vue @@ -2,22 +2,9 @@ <div class="container-lg" v-if="idFromHash.status != 'REVOKED'"> <div class="row mt-3"> <div class="col-sm-10 col-md-8 col-lg-5 mx-auto"> - <h3 - class="h4 text-center" - :class="{ - 'text-success': - $options.filters.dateStatus(idFromHash.certsLimit) == 'success', - 'text-warning': - $options.filters.dateStatus(idFromHash.certsLimit) == 'warning', - 'text-danger': - $options.filters.dateStatus(idFromHash.certsLimit) == 'danger' - }"> - {{ $t("certification.recues") }} <BadgeDanger - style="width: 2rem" - :limitDate="idFromHash.certsLimit" - :memberStatus="idFromHash.status" /> - </h3> <CertifGroup + :limitDate="idFromHash.certsLimit" + :memberStatus="idFromHash.status" :certifs="idFromHash.received_certifications" type="received" :certifStatus="$options.filters.dateStatus(idFromHash.certsLimit)" /> @@ -31,9 +18,6 @@ <div class="col-sm-10 col-md-8 col-lg-5 mx-auto" v-if="['MISSING', 'MEMBER'].includes(idFromHash.status)"> - <h3 class="h4 text-center text-info"> - {{ $t("certification.envoyees") }} - </h3> <CertifGroup :certifs="idFromHash.sent_certifications" type="sent" /> </div> </div> diff --git a/components/certif/Group.vue b/components/certif/Group.vue index 90effc3..83df611 100644 --- a/components/certif/Group.vue +++ b/components/certif/Group.vue @@ -1,5 +1,32 @@ <template> <div> + <div + class="d-flex align-items-center justify-content-between flex-column flex-sm-row mb-4"> + <h3 + class="h4 text-center d-flex" + style="min-width: 0" + :class="{ + 'text-success': certifStatus == 'success', + 'text-warning': certifStatus == 'warning', + 'text-danger': certifStatus == 'danger', + 'text-info': type == 'sent' + }"> + <span class="text-truncate d-block"> + {{ + type == "sent" + ? $t("certification.envoyees") + : $t("certification.recues") + }} + </span> + <BadgeDanger + v-if="type == 'received'" + class="flex-shrink-0" + style="width: 2rem" + :limitDate="limitDate" + :memberStatus="memberStatus" /> + </h3> + <BtnFavoriArray :listUID="certifsNotPending" /> + </div> <CertifList :title="$t('certification.enattente')" :certifs="certifsPending" @@ -22,6 +49,8 @@ <script> export default { props: { + limitDate: Number, + memberStatus: String, certifs: Array, certifStatus: { type: String, diff --git a/components/member/Card.vue b/components/member/Card.vue index 545c51e..2cb2646 100644 --- a/components/member/Card.vue +++ b/components/member/Card.vue @@ -1,10 +1,9 @@ <template> <div class="card member"> <div class="card-body"> - <div - class="d-flex align-items-center justify-content-between flex-column-reverse flex-sm-row mb-4"> + <div class="d-flex align-items-center justify-content-between mb-4"> <h2 - class="h1 card-title text-center d-flex align-items-center flex-column m-0 w-100"> + class="h1 card-title text-center d-flex align-items-center flex-column m-0"> <span class="text-truncate d-inline-block mw-100"> {{ hash.uid }} </span> @@ -131,10 +130,16 @@ export default { </script> <style lang="scss"> -.member .table { - text-align: center; - width: auto; - margin: auto; +.member { + h2 { + min-width: 0; + } + + .table { + text-align: center; + width: auto; + margin: auto; + } } @media (min-width: 576px) { diff --git a/package.json b/package.json index 71f930b..c89625d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "wotwizard-ui", - "version": "2.1.0", + "version": "2.2.0", "private": true, "scripts": { "dev": "nuxt", diff --git a/plugins/bootstrap.js b/plugins/bootstrap.js index da7c3d7..177cae8 100644 --- a/plugins/bootstrap.js +++ b/plugins/bootstrap.js @@ -18,7 +18,7 @@ Vue.directive("tooltip-click", function (el, binding) { } }) -Vue.directive("tooltip", function (el, binding) { +Vue.directive("tooltip", function (el, binding, vnode) { if (binding.value.title != "") { let tooltip = new Tooltip(el, { title: binding.value.title, @@ -26,5 +26,15 @@ Vue.directive("tooltip", function (el, binding) { placement: binding.value.placement, trigger: "hover" }) + + vnode.context.$nextTick(() => { + var x = new MutationObserver(function (e) { + console.log(e) + if (e[0].removedNodes) tooltip.hide() + }); + + x.observe(el.parentNode, { childList: true }) + + }); } }) diff --git a/plugins/favourites.js b/plugins/favourites.js index 36616e6..23f56b5 100644 --- a/plugins/favourites.js +++ b/plugins/favourites.js @@ -18,11 +18,18 @@ export default (context, inject) => { localStorage.favourites = JSON.stringify(context.$favourites.list) } + let addFavorisArray = (certs, e) => { + for (const cert in certs) { + toggleFavourite(certs[cert].uid, e) + } + } + inject( "favourites", Vue.observable({ list: liste_favoris, - toggleFavourite: toggleFavourite + toggleFavourite: toggleFavourite, + addFavorisArray: addFavorisArray }) ) } -- GitLab