diff --git a/assets/css/style.scss b/assets/css/style.scss
index 5a6a7219a6fced87725562f521b3432913e2e088..bef49d0cd024d12e3eec8064ab0053550a8a1043 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -22,7 +22,6 @@ $breadcrumb-divider-color: var(--text-primary-color);
// List-groups
$list-group-bg: var(--background-color-primary);
$list-group-action-active-bg: transparent;
-$list-group-hover-bg: transparent;
$list-group-action-color: var(--text-primary-color);
@import 'font';
diff --git a/components/certif/List.vue b/components/certif/List.vue
index 81a1875c2b90962b6fe83f3702256bb6a268e034..63b4e29169c03f5a6677a1aeeba7d53f13c490b1 100644
--- a/components/certif/List.vue
+++ b/components/certif/List.vue
@@ -1,10 +1,10 @@
<template>
-<ul class="list-group">
- <li class="list-group-item" v-for="certif in certifs">
- <div>{{ getNeighbor(certif) }}</div>
+<div class="list-group">
+ <NuxtLink :to="'/hash/'+getNeighbor(certif).hash" class="list-group-item list-group-item-action" v-for="certif in certifs" :key="getNeighbor(certif).uid">
+ {{ getNeighbor(certif).uid }}
<small class="text-muted">Expire le {{ certif.expires_on | formatDate }}</small>
- </li>
-</ul>
+ </NuxtLink>
+</div>
</template>
<script>
@@ -22,7 +22,7 @@ export default {
},
methods : {
getNeighbor(certif) {
- return this.type == "recieved" ? certif.from.uid : certif.to.uid
+ return this.type == "recieved" ? certif.from : certif.to
}
}
}
diff --git a/components/navigation/Bar.vue b/components/navigation/Bar.vue
index 70f17e5a89ee9804494bb508388e2c0ac8063ec6..91047c7dbf31a50c8d611b21d584e4147b0fef7e 100644
--- a/components/navigation/Bar.vue
+++ b/components/navigation/Bar.vue
@@ -103,7 +103,10 @@ nav.breadcrumb {
h1 {color: var(--text-primary-color);}
- .list-group-item div {
+ .list-group-item {
+ &-action:not(.active):hover {background: transparent;}
+
+ div {
transition: left .3s ease-in-out;
left: 0;
@@ -117,6 +120,7 @@ nav.breadcrumb {
left: .5em;
}
}
+ }
.open & {
left: 0;
diff --git a/layouts/default.vue b/layouts/default.vue
index 6ea2fbb9af1376a4d5e16cd9e38a99fb2894723d..b6f799ffb4f6770e269b9244b0e5f69e4139922b 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,7 +1,7 @@
<template>
<div class="app">
<NavigationBar :breadcrumb="breadcrumb" :menus="menus" />
- <Nuxt />
+ <Nuxt keep-alive />
</div>
</template>
@@ -16,7 +16,7 @@ export default {
items : [
{path: '/appolo',title: 'Appolo'},
{path: '/chartjs',title: 'ChartJS'},
- {path: '/soin',title: 'Prendre soin de ses contacts'}
+ {path: '/membres',title: 'Prendre soin de ses contacts'}
]},
{
title: 'Un menu',
diff --git a/pages/hash/_hash.vue b/pages/hash/_hash.vue
index 9621541cd2e39bb1a082099692efa14f511eb062..a563c0f0a70be345816f74e41d21a30f4432898a 100644
--- a/pages/hash/_hash.vue
+++ b/pages/hash/_hash.vue
@@ -1,29 +1,26 @@
<template>
<main class="content container">
- <div
- class="spinner-border text-primary mx-auto d-block mb-3"
- role="status"
- v-if="$apollo.queries.idFromHash.loading">
- <span class="sr-only">Loading...</span>
- </div>
+ <NavigationLoader :isLoading="$apollo.queries.idFromHash.loading" class="d-block mb-3" />
<div v-if="!$apollo.queries.idFromHash.loading">
<div class="row">
<div class="col-6 mx-auto mt-3">
<div class="card">
<div class="card-body">
<h2 class="card-title">{{ idFromHash.uid }} <small><span class="badge badge-secondary">{{ idFromHash.status }}</span></small></h2>
- <div class="card-subtitle mb-2 text-muted">{{ idFromHash.pubkey }}</div>
- <div> Référent : {{ isReferent ? 'Oui' : 'Non' }}</div>
- <div> Qualité : {{ Math.round(idFromHash.quality.ratio*100)/100 }}</div>
- <div> Date limite d'adhésion : {{ idFromHash.limitDate | formatDate }}</div>
- <div> Date avant de manquer de certifs : {{ idFromHash.received_certifications.limit | formatDate }}</div>
- <div> Pourra certifier à partir du : {{ idFromHash.minDatePassed || 'Déjà dispo' }}</div>
- <div> Nbre de certifs disponibles : {{ 100-idFromHash.sent_certifications.length }}</div>
+ <div v-if="idFromHash.status != 'REVOKED'">
+ <div class="card-subtitle mb-2 text-muted">{{ idFromHash.pubkey }}</div>
+ <div> Référent : {{ isReferent ? 'Oui' : 'Non' }}</div>
+ <div> Qualité : {{ Math.round(idFromHash.quality.ratio*100)/100 }}</div>
+ <div> Date limite d'adhésion : {{ idFromHash.limitDate | formatDate }}</div>
+ <div v-if="idFromHash.status != 'NEWCOMER'"> Date avant de manquer de certifs : {{ idFromHash.received_certifications.limit | formatDate }}</div>
+ <div v-if="idFromHash.status != 'NEWCOMER'"> Pourra certifier à partir du : {{ idFromHash.minDatePassed || 'Déjà dispo' }}</div>
+ <div> Nbre de certifs disponibles : {{ 100-idFromHash.sent_certifications.length }}</div>
+ </div>
</div>
</div>
</div>
</div>
- <div class="row mt-3">
+ <div class="row mt-3" v-if="idFromHash.status != 'REVOKED' && idFromHash.status != 'NEWCOMER'">
<div class="col-6">
<h3>Certifications reçues</h3>
<CertifList :certifs="idFromHash.received_certifications.certifications" type="recieved" />
@@ -43,11 +40,25 @@ import gql from "graphql-tag"
export default {
data() {
// Variables locales
- return {};
+ return {
+ breadcrumb: [
+ {
+ text: 'Accueil',
+ to: '/'
+ },
+ {
+ text: 'Membres',
+ to: '/membres'
+ },
+ {
+ text: '',
+ active: true
+ }
+ ]
+ };
},
// Fonctions locales
methods: {
-
},
apollo: {
idFromHash: {
@@ -102,15 +113,19 @@ export default {
},
},
},
- mounted() {
- // Mise à jour du fil d'ariane au chargement
- $nuxt.$emit("changeRoute", this.breadcrumb);
- },
computed: {
isReferent () {
const nb_certifs_referent = 5
return this.idFromHash.received_certifications.certifications.length > nb_certifs_referent && this.idFromHash.sent_certifications.length > nb_certifs_referent
}
+ },
+ watch: {
+ idFromHash: {
+ handler(n,o) {
+ this.breadcrumb[2].text = this.idFromHash.uid
+ $nuxt.$emit("changeRoute", this.breadcrumb);
+ }
+ }
}
};
</script>
diff --git a/pages/soin.vue b/pages/membres.vue
similarity index 97%
rename from pages/soin.vue
rename to pages/membres.vue
index e8d99b8d8ed5a51a74b0679bedaa0d6cf22cc55d..520968f83481e7b9f73605cacd77215f0e46ede8 100644
--- a/pages/soin.vue
+++ b/pages/membres.vue
@@ -1,6 +1,6 @@
<template>
<main class="content">
- <h2 class="display-2 text-center mb-5">Prendre soin de ses contacts</h2>
+ <h2 class="display-2 text-center mb-5">Membres</h2>
<div class="row mb-4">
<div class="col-6 m-auto text-center">
<label for="rech" class="form-label">Votre recherche</label>