.githooks/pre-commit

+#!/bin/bash
+
+# Color for echo
+RED='\e[31m'
+GREEN='\e[32m'
+BLUE='\e[34m'
+UNDERLINE='\e[4m'
+BOLD='\e[1m'
+NC='\e[0m'
+
+if ! command -v jq &> /dev/null
+then
+    echo -e "${RED}I require jq but it's not installed."
+    echo -e "${BOLD}${GREEN}See informations here : ${NC}${BLUE}${UNDERLINE}https://stedolan.github.io/jq/download/${NC}"
+    echo -e "${RED}We can't check if you have put all i18n keys in JSON files${NC}"
+    exit 0
+else
+    $(git rev-parse --show-toplevel)/utils/findMissingI18nKeys.sh
+    FINDING_MISSING_KEYS=$?
+    echo -e "$BLUE$FINDING_MISSING_KEYS$NC"
+    if [ $FINDING_MISSING_KEYS -ne 0 ]; then
+        echo -e "${RED}You must to complete all i18n keys used in pages${NC}"
+        git st i18n/locales/*.json
+        exit $FINDING_MISSING_KEYS
+    fi
+fi
+exit 0

.gitignore

@@ -89,3 +89,7 @@ sw.*
 
 # Vim swap files
 *.swp
+
+# Script generated files
+*.missing
+keysUsed
\ No newline at end of file

README.md

@@ -4,11 +4,16 @@
 
 This project needs NodeJS v16
 
+In order to use the hooks, this project needs :
+
+- jq ([Site pour le download](https://stedolan.github.io/jq/download/))
+
 ## Contribute
 
 ```bash
 $ git clone https://git.duniter.org/paidge/wotwizard-ui.git
 $ cd wotwizard-ui
+$ git config --local core.hooksPath .githooks/
 $ nvm use 16
 $ git checkout -b my-branch
 $ npm install

assets/css/style.scss

@@ -53,6 +53,10 @@ $info: #0a8299;
 }
 
 .table {
+	&-fixed {
+		table-layout: fixed;
+	}
+
 	&.sortable thead {
 		tr {
 			border-left: 1px solid var(--text-primary-color);
@@ -71,6 +75,10 @@ $info: #0a8299;
 	&-hover tbody tr {
 		cursor: pointer;
 	}
+
+	.td-date {
+		width: 160px;
+	}
 }
 
 .list-group-item {
@@ -97,20 +105,6 @@ $info: #0a8299;
 	}
 }
 
-.uid {
-	@extend .text-truncate;
-	display: inline-block;
-	max-width: 200px;
-
-	@media (min-width: 576px) {
-		max-width: 255px;
-	}
-
-	@media (min-width: 992px) {
-		max-width: 205px;
-	}
-}
-
 .icon {
 	width: 1.15rem;
 }

components/badge/Danger.vue

 <template>
 	<span
-		class="danger font-weight-normal"
 		:class="classWarning"
 		:title="title"
 		v-if="

components/btn/Search.vue

@@ -12,6 +12,7 @@
 				:value="value"
 				autocomplete="off"
 				@input="$emit('input', $event.target.value)"
+				@keyup="$emit('keyup', $event.keyCode)"
 				:placeholder="$t('recherche.title')"
 				:aria-label="$t('recherche.title')"
 				aria-describedby="rechHelp" />

components/btn/Sort.vue

 <template>
 	<div class="btn-sort px-2" tabindex="0">
-		{{ title }}
+		<span>{{ title }}</span>
 		<outline-sort-ascending-icon
-			class="ml-2 icon"
+			class="ml-2 icon flex-shrink-0"
 			v-if="currentSortDir == 'desc' && currentSort == fieldName" />
 		<outline-sort-descending-icon
-			class="ml-2 icon"
+			class="ml-2 icon flex-shrink-0"
 			v-if="currentSortDir == 'asc' && currentSort == fieldName" />
 	</div>
 </template>

components/certif/List.vue

 <template>
 	<div class="table-responsive" v-if="certifs.length > 0">
-		<input
-			type="text"
-			v-if="certifs.length > 5"
-			v-model="search"
-			class="form-control w-75 mx-auto my-2"
-			:placeholder="$t('recherche.title')" />
-		<table class="table table-striped table-hover sortable">
+		<BtnSearch v-model="search" class="col" v-if="certifs.length > 5" />
+		<table class="table table-striped table-hover table-fixed sortable">
 			<thead class="thead-light">
 				<tr>
 					<th class="p-0" @click="sort('uid')">
@@ -16,7 +11,7 @@
 							:currentSort="currentSort"
 							:currentSortDir="currentSortDir" />
 					</th>
-					<th class="p-0" @click="sort('expires_on')">
+					<th class="p-0 td-date" @click="sort('expires_on')">
 						<BtnSort
 							class="justify-content-end"
 							:title="$t('expire')"
@@ -39,28 +34,23 @@
 						)
 					">
 					<th scope="row" class="py-1">
-						<div>
-							<div class="d-flex">
-								<div class="uid inline-block">
-									<span v-if="$favourites.list.includes(certif.uid)"
-										>★&nbsp;</span
-									>{{ certif.uid }}
-								</div>
-								&nbsp;
-								<BadgeDanger
-									:limitDate="certif.received_certifications.limit"
-									:memberStatus="certif.status" />
-							</div>
-							<BadgeStatus :membre="certif" />
-							<BadgeQuality
-								:quality="certif.quality.ratio"
-								v-if="!['REVOKED', 'NEWCOMER'].includes(certif.status)" />
-							<BadgeDispo
-								:isDispo="certif.minDatePassed"
-								:dateDispo="certif.minDate"
-								:certifs="certif.sent_certifications"
-								v-if="certif.status == 'MEMBER'" />
+						<div class="d-flex">
+							<span v-if="$favourites.list.includes(certif.uid)">★&nbsp;</span>
+							<div class="text-truncate">{{ certif.uid }}</div>
+							&nbsp;
+							<BadgeDanger
+								:limitDate="certif.received_certifications.limit"
+								:memberStatus="certif.status" />
 						</div>
+						<BadgeStatus :membre="certif" />
+						<BadgeQuality
+							:quality="certif.quality.ratio"
+							v-if="!['REVOKED', 'NEWCOMER'].includes(certif.status)" />
+						<BadgeDispo
+							:isDispo="certif.minDatePassed"
+							:dateDispo="certif.minDate"
+							:certifs="certif.sent_certifications"
+							v-if="certif.status == 'MEMBER'" />
 					</th>
 					<td class="text-right py-1">
 						<BadgeDate :date="certif.expires_on" styleDate="short" />

components/member/List.vue

 <template>
 	<div class="table-responsive pb-3">
-		<table class="table table-striped table-hover sortable text-center">
+		<table
+			class="table table-striped table-hover table-fixed sortable text-center">
 			<thead class="thead-light">
 				<tr>
 					<th
@@ -28,7 +29,7 @@
 					</th>
 					<th
 						scope="col"
-						class="d-none d-sm-table-cell p-0"
+						class="td-date d-none d-sm-table-cell p-0"
 						@click="sort('date_membership')"
 						v-if="['adhesion', 'favoris', 'search'].includes(type)">
 						<BtnSort
@@ -43,7 +44,7 @@
 					</th>
 					<th
 						scope="col"
-						class="d-none p-0"
+						class="td-date d-none p-0"
 						:class="{
 							'd-sm-table-cell': type == 'certif',
 							'd-md-table-cell': type != 'certif'
@@ -60,31 +61,27 @@
 							:currentSort="currentSort"
 							:currentSortDir="currentSortDir" />
 					</th>
-					<th v-if="type == 'favoris'"></th>
+					<th v-if="type == 'favoris'" style="width: 60px"></th>
 				</tr>
 			</thead>
 			<tbody>
 				<tr v-for="member in membersSorted" :key="member.uid">
 					<th scope="row" @click="redirect(member.hash)">
 						<div class="d-flex justify-content-center">
-							<div class="uid inline-block">
-								<span v-if="$favourites.list.includes(member.uid)">★&nbsp;</span
-								>{{ member.uid }}
-							</div>
+							<span v-if="$favourites.list.includes(member.uid)">★&nbsp;</span>
+							<div class="text-truncate">{{ member.uid }}</div>
 							&nbsp;
 							<BadgeDanger
-								:limitDate="
-									Math.min(
-										Math.max(member.received_certifications.limit, 1),
-										member.limitDate
-									)
-								"
+								:limitDate="member.received_certifications.limit"
 								:memberStatus="member.status" />
 						</div>
 						<div v-if="['adhesion', 'certif'].includes(type)" class="d-sm-none">
-							<BadgeDate :date="getDate(member)" styleDate="long" />
+							<BadgeDate :date="getDate(member)" styleDate="short" />
 						</div>
 						<BadgeStatus :membre="member" />
+						<BadgeQuality
+							:quality="member.quality.ratio"
+							v-if="!['REVOKED', 'NEWCOMER'].includes(member.status)" />
 						<BadgeDispo
 							:isDispo="member.minDatePassed"
 							:dateDispo="member.minDate"
@@ -101,7 +98,7 @@
 						class="d-none d-sm-table-cell"
 						v-if="['adhesion', 'favoris', 'search'].includes(type)"
 						@click="redirect(member.hash)">
-						<BadgeDate :date="member.limitDate" styleDate="long" />
+						<BadgeDate :date="member.limitDate" styleDate="short" />
 					</td>
 					<td
 						class="d-none"
@@ -113,9 +110,9 @@
 						@click="redirect(member.hash)">
 						<BadgeDate
 							:date="member.received_certifications.limit"
-							styleDate="long" />
+							styleDate="short" />
 					</td>
-					<td class="py-1" v-if="type == 'favoris'">
+					<td class="py-1" v-if="type == 'favoris'" style="width: 60px">
 						<button
 							class="btn btn-danger"
 							v-if="$favourites.list.includes(member.uid)"

components/navigation/menu/Sidebar.vue

@@ -5,7 +5,7 @@
 				<img :src="$icon(512)" alt="Accueil" class="logo" />
 				<div>
 					<h1 class="h3">
-						Wotwizard <small><span class="small">v0.20</span></small>
+						Wotwizard <small><span class="small">v0.21</span></small>
 					</h1>
 					<small class="text-muted">{{ $t("slogan") }}</small>
 				</div>

graphql/queries.js

@@ -32,6 +32,10 @@ export const LAST_EVENTS = gql`
 					minDatePassed
 					minDate
 					limitDate
+					quality {
+						__typename
+						ratio
+					}
 					history {
 						__typename
 						in
@@ -103,6 +107,10 @@ export const SEARCH_MEMBERS = gql`
 				minDatePassed
 				hash
 				limitDate
+				quality {
+					__typename
+					ratio
+				}
 				received_certifications {
 					__typename
 					limit
@@ -224,6 +232,10 @@ export const FAVORIS = gql`
 		limitDate
 		minDatePassed
 		minDate
+		quality {
+			__typename
+			ratio
+		}
 		received_certifications {
 			__typename
 			limit
@@ -247,6 +259,10 @@ export const NEXT_EXITS = gql`
 			minDatePassed
 			minDate
 			limitDate
+			quality {
+				__typename
+				ratio
+			}
 			received_certifications {
 				__typename
 				limit
@@ -281,6 +297,10 @@ export const NEXT_LOOSE_CERTS = gql`
 				minDatePassed
 				minDate
 				limitDate
+				quality {
+					__typename
+					ratio
+				}
 				received_certifications {
 					__typename
 					limit

i18n/locales/fr.json

@@ -12,8 +12,8 @@
 		"developpeurs": "Développeurs :",
 		"graphql": "API grahQL",
 		"participants": "Liste des participants au projet :",
-		"title": "À propos",
 		"testeurs": "Testeurs :",
+		"title": "À propos",
 		"traducteurs": "Traducteurs :"
 	},
 	"aurevoir": "Au revoir à",
@@ -83,8 +83,8 @@
 		"title": "Mes favoris",
 		"use": "Mes favoris uniquement"
 	},
-	"futuremembers": "Futures entrées",
 	"futureexits": "Futures sorties",
+	"futuremembers": "Futures entrées",
 	"infos": "Informations",
 	"inout": "Entrées et sorties de la toile de confiance des 2 derniers jours",
 	"inpreparation": "En préparation",
@@ -168,8 +168,8 @@
 		"pardate": "Prévisions par date",
 		"parmembre": "Prévisions par membres",
 		"period": {
-			"title": "Période de recherche",
-			"desc": "Sélectionnez le nombre de jours souhaités"
+			"desc": "Sélectionnez le nombre de jours souhaités",
+			"title": "Période de recherche"
 		},
 		"title": "Prévisions"
 	},

pages/membre.vue

@@ -17,7 +17,7 @@
 					<div class="row mt-3" v-if="idFromHash.status != 'REVOKED'">
 						<div class="col-sm-10 col-md-8 col-lg-5 mb-3 mx-auto">
 							<h3
-								class="h4 text-center"
+								class="h5 text-center"
 								:class="{
 									'text-success':
 										['NEWCOMER', 'MISSING'].includes(idFromHash.status) &&
@@ -43,7 +43,7 @@
 						<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">
+							<h3 class="h5 text-center">
 								{{ $t("certification.envoyees") }} ({{ nbCertifsSent
 								}}<span v-if="nbCertifsPendingSent != 0">{{
 									"&nbsp;+&nbsp;" + nbCertifsPendingSent

pages/membres/index.vue

@@ -3,7 +3,7 @@
 		<h2 class="text-center my-5 font-weight-light">{{ $t("membres") }}</h2>
 		<div class="row mb-4">
 			<div class="col-sm-8 col-md-6 col-lg-5 m-auto">
-				<BtnSearch v-model="param" :help="$t('recherche.desc')" />
+				<BtnSearch v-model="param" :help="$t('recherche.desc')" @keyup="save" />
 			</div>
 		</div>
 		<NavigationLoader :isLoading="$apollo.queries.idSearch.loading" />

pages/parametres.vue

@@ -12,7 +12,7 @@
 						<tr>
 							<th>{{ $t("nom") }}</th>
 							<th class="d-none d-sm-table-cell">{{ $t("type") }}</th>
-							<th>{{ $t("valeur") }}</th>
+							<th class="td-date">{{ $t("valeur") }}</th>
 							<th class="d-none d-md-table-cell">{{ $t("description") }}</th>
 						</tr>
 					</thead>

utils/findMissingI18nKeys.sh

+#!/bin/bash
+
+# Color for echo
+RED='\e[31m'
+GREEN='\e[32m'
+NC='\e[0m'
+
+TMP_FILE=temp
+KEY_FILE=keysUsed
+
+# Get all used keys in Vue files
+grep --include=\*.vue --exclude=\*template.vue -roE -e "\\\$(t|tc)\((\"|')([a-zA-Z.]*)(\"|')(, [a-zA-Z._]*){0,1}\)" . > $TMP_FILE
+sed -i -e "s/'/\"/" $TMP_FILE
+sed -i -e "s/'/\"/" $TMP_FILE
+sed -i -E -e 's/\..*:\$(t|tc)\("([a-zA-Z.]*).*$/\2/' $TMP_FILE
+
+# Remove duplicates keys
+sort $TMP_FILE | uniq > $KEY_FILE
+
+# Verify all i18n files
+FILES="i18n/locales/*.json"
+RETURN_CODE=0
+for f in $FILES
+do
+    echo -e "Processing ${GREEN}$f${NC} file..."
+    
+    tmp=$(mktemp)
+    while read key; do
+        # Verify if key exists
+        jq -e ".$key" $f > /dev/null
+        status=$?
+        # If not, create it
+        if [ $status -ne 0 ]
+        then
+            echo -e "create ${RED}$key${NC} in file ${GREEN}$f${NC}"
+            value=$(jq -e ".$key" i18n/locales/fr.json)
+            if [ "$value" == "null" ]
+            then
+                filter=".$key = \"TO_TRANSLATE\""
+            else
+                filter=".$key = $value"
+            fi
+            jq --sort-keys "$filter" $f > "$tmp" && mv "$tmp" $f
+            RETURN_CODE=$((RETURN_CODE+1))
+        fi
+    done < $KEY_FILE
+done
+
+rm $KEY_FILE $TMP_FILE
+# Return 0 if no key was created, or number of keys added
+exit $RETURN_CODE