From 15c5137010ab001699a4ff835f6a0fbd91dc48a7 Mon Sep 17 00:00:00 2001
From: paidge <paidge_cs@hotmail.com>
Date: Mon, 14 Feb 2022 20:08:26 +0100
Subject: [PATCH] dismissable alerts

---
 components/alerte.vue                | 42 ++++++++++++++++++++++++++++
 pages/favoris.vue                    |  2 +-
 pages/index.vue                      |  2 +-
 pages/membre.vue                     |  2 +-
 pages/membres/index.vue              |  2 +-
 pages/parametres.vue                 |  2 +-
 pages/previsions/futures_sorties.vue |  4 +--
 pages/previsions/index.vue           |  2 +-
 8 files changed, 49 insertions(+), 9 deletions(-)
 create mode 100644 components/alerte.vue

diff --git a/components/alerte.vue b/components/alerte.vue
new file mode 100644
index 0000000..79d1e26
--- /dev/null
+++ b/components/alerte.vue
@@ -0,0 +1,42 @@
+<template>
+	<div class="alert" :class="classType" v-if="error">
+		{{ error }}
+		<button type="button" class="close" data-dismiss="alert" aria-label="Close">
+			<span aria-hidden="true">&times;</span>
+		</button>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		type: {
+			type: String,
+			required: true,
+			validator: function (value) {
+				return (
+					[
+						"primary",
+						"secondary",
+						"success",
+						"danger",
+						"warning",
+						"info",
+						"light",
+						"dark"
+					].indexOf(value) !== -1
+				)
+			}
+		},
+		error: {
+			type: String,
+			default: null
+		}
+	},
+	computed: {
+		classType() {
+			return "alert-" + this.type
+		}
+	}
+}
+</script>
diff --git a/pages/favoris.vue b/pages/favoris.vue
index e6d8632..b1d8f6b 100644
--- a/pages/favoris.vue
+++ b/pages/favoris.vue
@@ -7,7 +7,7 @@
 		<div class="row">
 			<div class="col">
 				<transition name="fade">
-					<div class="alert alert-danger" v-if="error">{{ error }}</div>
+					<Alerte type="danger" :error="error" />
 				</transition>
 				<transition name="fade">
 					<div
diff --git a/pages/index.vue b/pages/index.vue
index 124b9c1..e57d641 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,7 +3,7 @@
 		<h2 class="text-center my-5 font-weight-light">{{ $t("inout") }}</h2>
 		<NavigationLoader :isLoading="$apollo.queries.newMembers.loading" />
 		<transition name="fade">
-			<div class="alert alert-danger" v-if="error">{{ error }}</div>
+			<Alerte type="danger" :error="error" />
 		</transition>
 		<transition name="fade">
 			<div class="result" v-if="newMembers">
diff --git a/pages/membre.vue b/pages/membre.vue
index a3cdb42..72cae00 100644
--- a/pages/membre.vue
+++ b/pages/membre.vue
@@ -2,7 +2,7 @@
 	<main>
 		<NavigationLoader :isLoading="$apollo.queries.idFromHash.loading" />
 		<transition name="fade">
-			<div class="alert alert-danger" v-if="error">{{ error }}</div>
+			<Alerte type="danger" :error="error" />
 		</transition>
 		<transition name="fade">
 			<div v-if="idFromHash && !$apollo.queries.idFromHash.loading">
diff --git a/pages/membres/index.vue b/pages/membres/index.vue
index a235a84..1ef9249 100644
--- a/pages/membres/index.vue
+++ b/pages/membres/index.vue
@@ -11,7 +11,7 @@
 		</div>
 		<NavigationLoader :isLoading="$apollo.queries.idSearch.loading" />
 		<transition name="fade">
-			<div class="alert alert-danger" v-if="error">{{ error }}</div>
+			<Alerte type="danger" :error="error" />
 		</transition>
 		<transition name="fade">
 			<div
diff --git a/pages/parametres.vue b/pages/parametres.vue
index 48614c7..48cc61a 100644
--- a/pages/parametres.vue
+++ b/pages/parametres.vue
@@ -3,7 +3,7 @@
 		<h2 class="text-center my-5 font-weight-light">{{ $t("params.title") }}</h2>
 		<NavigationLoader :isLoading="$apollo.queries.allParameters.loading" />
 		<transition name="fade">
-			<div class="alert alert-danger" v-if="error">{{ error }}</div>
+			<Alerte type="danger" :error="error" />
 		</transition>
 		<transition name="fade">
 			<div class="table-responsive" v-if="allParameters">
diff --git a/pages/previsions/futures_sorties.vue b/pages/previsions/futures_sorties.vue
index 349c492..91a4af8 100644
--- a/pages/previsions/futures_sorties.vue
+++ b/pages/previsions/futures_sorties.vue
@@ -13,9 +13,7 @@
 		</div>
 		<NavigationLoader :isLoading="$apollo.loading" />
 		<transition name="fade">
-			<div class="alert alert-danger" v-if="error && !$apollo.loading">
-				{{ error }}
-			</div>
+			<Alerte type="danger" :error="error" />
 		</transition>
 		<transition name="fade">
 			<div class="row" v-if="!$apollo.loading">
diff --git a/pages/previsions/index.vue b/pages/previsions/index.vue
index a988c72..b7babb1 100644
--- a/pages/previsions/index.vue
+++ b/pages/previsions/index.vue
@@ -2,7 +2,7 @@
 	<main class="container">
 		<NavigationLoader :isLoading="$apollo.queries.wwResult.loading" />
 		<transition name="fade">
-			<div class="alert alert-danger" v-if="error">{{ error }}</div>
+			<Alerte type="danger" :error="error" />
 		</transition>
 		<transition name="fade">
 			<div v-if="wwResult">
-- 
GitLab