[prev in list] [next in list] [prev in thread] [next in thread] 

List:       kde-commits
Subject:    [wikitolearn-frontend] src: Make a new error component
From:       Demetrio Carrara <null () kde ! org>
Date:       2018-05-31 20:12:34
Message-ID: E1fOTw2-00077p-6y () code ! kde ! org
[Download RAW message or body]

Git commit b80c125a566a1f6b421b632ea3563c36e55e944e by Demetrio Carrara.
Committed on 29/05/2018 at 12:00.
Pushed by dcarrara into branch 'master'.

Make a new error component

M  +5    -3    src/App.vue
M  +28   -15   src/components/Error.vue
A  +83   -0    src/components/ui/WTLSnackbar.vue
M  +5    -0    src/store/actions.js
M  +4    -0    src/store/mutations.js

https://commits.kde.org/wikitolearn-frontend/b80c125a566a1f6b421b632ea3563c36e55e944e

diff --git a/src/App.vue b/src/App.vue
index 479d493..60e5d0d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,10 +6,11 @@
 		.App__content
 			transition(name="fade", mode="out-in")
 				router-view.view
-		transition(name="bounce")
+		transition(name="fade", mode="out-in")
 			WTLSpinner.App__spinner(
 				v-if="activeRequests"
 			)
+		Error
 	//
 		.App__polling-operations
 			PollingBar
@@ -42,7 +43,7 @@ noscript {
 		margin: 0 auto;
 		right: 30%;
 		border-radius: 50%;
-		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+		box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
 	}
 
 	@include media-breakpoint-up(md) {
@@ -93,11 +94,12 @@ noscript {
 import AppHeader from "components/AppHeader"
 import PollingBar from "components/PollingBar"
 import WTLSpinner from "components/ui/WTLSpinner"
+import Error from "components/Error"
 // import AuthCheck from "components/utils/AuthCheck"
 
 export default {
 	name: "App",
-	components: { AppHeader, PollingBar /* , AuthCheck */, WTLSpinner },
+	components: { AppHeader, PollingBar /* , AuthCheck */, WTLSpinner, Error },
 	data: () => {
 		return {
 			isRTL: LANGUAGE_ISRTL
diff --git a/src/components/Error.vue b/src/components/Error.vue
index dff50e9..82756cf 100644
--- a/src/components/Error.vue
+++ b/src/components/Error.vue
@@ -1,24 +1,37 @@
 <template lang="pug">
-	.Error(v-if="error != null")
-		b.Error__title Error
-		.Error__message {{ error.error }}
+	WTLSnackbar(
+		:text="errorMsg"
+		ref="snackbar"
+	)
 </template>
 
-<style lang="scss">
-@import "~styles/declarations";
-
-.Error {
-	padding: 1rem;
-	border: 1px solid $red;
-}
-</style>
-
 <script>
+import { mapState } from "vuex"
+import WTLSnackbar from "components/ui/WTLSnackbar"
+
 export default {
 	name: "Error",
-	props: {
-		error: {
-			default: null
+	components: { WTLSnackbar },
+	data() {
+		return {
+			errorMsg: ""
+		}
+	},
+	computed: {
+		...mapState([
+			"error"
+		])
+	},
+	watch: {
+		error: function(val) {
+			if (this.error !== null) {
+				this.errorMsg = val.response.data.status + " - " + val.response.data.error
+				const description = val.response.data.error_description
+				if (description !== undefined) {
+					this.errorMsg += " - " + description
+				}
+				this.$refs.snackbar.showSnack()
+			}
 		}
 	}
 }
diff --git a/src/components/ui/WTLSnackbar.vue b/src/components/ui/WTLSnackbar.vue
new file mode 100644
index 0000000..a5d6f80
--- /dev/null
+++ b/src/components/ui/WTLSnackbar.vue
@@ -0,0 +1,83 @@
+<template lang="pug">
+	transition(
+		name="fade"
+	)
+		.WTLSnackbar(
+			v-if="show"
+		)
+			.WTLSnackbar__container {{ text }}
+				.WTLSnackbar__close-button(
+					v-if="closable"
+				) CLOSE
+</template>
+
+<script>
+export default {
+	name: "WTLSnackbar",
+	props: {
+		text: {
+			type: String,
+			required: true
+		},
+		closable: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			show: false
+		}
+	},
+	methods: {
+		open() {
+			this.show = true
+		},
+		close() {
+			this.show = false
+		},
+		showSnack() {
+			this.show = true
+			setTimeout(() => {
+				this.show = false
+			}, 2000)
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+@import "~styles/declarations";
+
+/* The snackbar - position it at the bottom and in the middle of the screen */
+.WTLSnackbar {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	&__container {
+		// visibility: hidden; /* Hidden by default. Visible on click */
+		min-width: 5rem; /* Set a default minimum width */
+		// margin-left: -2.5rem; /* Divide value of min-width by 2 */
+		background-color: $red;
+		color: #fff; /* White text color */
+		text-align: center; /* Centered text */
+		border-radius: 0.25rem; /* Rounded borders */
+		padding: 1rem; /* Padding */
+		position: fixed; /* Sit on top of the screen */
+		z-index: 1; /* Add a z-index if needed */
+		// left: 50%; /* Center the snackbar */
+		bottom: 30px; /* 30px from the bottom */
+	}
+}
+
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.25s ease-out;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/store/actions.js b/src/store/actions.js
index 08a8129..175c5f5 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -102,5 +102,10 @@ export const actions = {
 			.then((response) => {
 				return dispatch("FETCH_COURSE", { courseName })
 			})
+	},
+
+	SET_ERROR({ commit }, { error }) {
+		commit("EMPTY_ERROR")
+		commit("SET_ERROR", { error: error })
 	}
 }
diff --git a/src/store/mutations.js b/src/store/mutations.js
index 89caff5..b23262e 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -29,6 +29,10 @@ export const mutations = {
 		state.error = Object.assign({}, error)
 	},
 
+	EMPTY_ERROR(state) {
+		state.error = null
+	},
+
 	CLEAR_ERROR(state) {
 		state.error = null
 	},

[prev in list] [next in list] [prev in thread] [next in thread]