changes

components/snackbar/Error.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <Caption v-bind="{title: 'Lỗi', type: 'has-text-findata'}"></Caption>
+    <div class="field is-grouped mb-0">
+      <div class="control is-expanded pr-3" v-html="content"></div>
+      <div class="control">
+        <span class="material-symbols-outlined has-text-findata fs-34">error</span>
+      </div>
+  </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['content', 'duration'],
+  methods: {
+    cancel() {
+      this.$store.commit('updateStore', {name: 'showmodal', data:  undefined})
+    }
+  }
+}
+</script>

components/snackbar/Info.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <p v-html="content"></p>
+  </div>
+</template>
+<script>
+export default {
+  props: ['content', 'duration'],
+  methods: {
+    cancel() {
+      this.$store.commit('updateStore', {name: 'showmodal', data:  undefined})
+    }
+  }
+}
+</script>

components/snackbar/SnackBar.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+  <div class="show" style="max-width: 500px;">
+    <component :is="compobj" v-bind="vbind" @close="$emit('close')"></component> 
+  </div>
+</div>
+</template>
+<script>
+export default {
+  props: ['component', 'width', 'height', 'vbind', 'title'],
+  data() {
+    return {
+      timer: undefined
+    }
+  },
+  mounted() {
+    setTimeout(()=>this.snackbar = undefined, 2900)
+  },
+  computed: {
+    snackbar: {
+      get: function() {return this.$store.state['snackbar']},
+      set: function(val) {this.$store.commit('updateStore', {name: 'snackbar', data: val})}
+    },
+    compobj() {
+      return () => import(`@/components/${this.component}`)
+    }
+  },
+  methods: {
+    show() {
+      var x = document.getElementById("snackbar");
+      x.className = x.className.replace("show", "")
+      setTimeout(()=>this.snackbar = undefined, 100)
+    }
+  }
+}
+</script>
+<style>
+.show {
+  min-width: 250px; /* Set a default minimum width */
+  margin-left: -125px; /* Divide value of min-width by 2 */
+  background-color: #303030; /* Black background color */
+  color: white; /* White text color */
+  text-align: left; /* Centered text */
+  border-radius: 6px; /* Rounded borders */
+  padding: 10px; /* Padding */
+  position: fixed; /* Sit on top of the screen */
+  z-index: 999; /* Add a z-index if needed */
+  left: 50%; /* Center the snackbar */
+  top: 50px; /* 50px from the top */
+  visibility: visible; /* Show the snackbar */
+  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
+  However, delay the fade out process for 2.5 seconds */
+  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+/* Animations to fade the snackbar in and out */
+@-webkit-keyframes fadein {
+  from {top: 0; opacity: 0;}
+  to {top: 50px; opacity: 1;}
+}
+
+@keyframes fadein {
+  from {top: 0; opacity: 0;}
+  to {top: 50px; opacity: 1;}
+}
+
+@-webkit-keyframes fadeout {
+  from {top: 50px; opacity: 1;}
+  to {top: 0; opacity: 0;}
+}
+
+@keyframes fadeout {
+  from {top: 50px; opacity: 1;}
+  to {top: 0; opacity: 0;}
+}
+</style>

components/snackbar/Success.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <Caption v-bind="{title: 'Success', type: 'has-text-primary'}"></Caption>
+    <div class="field is-grouped mb-0 pb-0">
+      <div class="control is-expanded pr-3 mb-0" v-html="content"></div>
+      <div class="control mb-0">
+        <span class="material-symbols-outlined has-text-primary fs-34">check_circle</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['content', 'duration'],
+  methods: {
+    cancel() {
+      this.$store.commit('updateStore', {name: 'showmodal', data:  undefined})
+    }
+  }
+}
+</script>