Merge pull request #6 from Saba-Var/feat/toastification

feat: toastification

package.json

@@ -13,7 +13,8 @@
     "bulma": "^0.9.4",
     "pinia": "^2.1.6",
     "vue": "^3.3.4",
-    "vue-router": "^4.2.4"
+    "vue-router": "^4.2.4",
+    "vue-toastification": "^2.0.0-rc.5"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",

src/assets/main.css

@@ -1,3 +1,62 @@
 * {
   word-break: break-all;
 }
+
+.toast {
+  top: 3rem;
+}
+
+.scale-in-center {
+  -webkit-animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+
+.scale-out-center {
+  -webkit-animation: scale-out-center 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
+  animation: scale-out-center 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
+}
+
+@keyframes scale-in-center {
+  0% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes scale-out-center {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+    opacity: 1;
+  }
+}
+
+@keyframes scale-out-center {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+    opacity: 1;
+  }
+}
+
+@media (max-width: 600px) {
+  .toast {
+    top: 3.2rem;
+  }
+}

src/components/Notes/AddEditNote.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="card p-4 mb-5" :class="`has-background-${bgColor}-dark`">
+  <div class="card p-4 mb-5 scale-in-center" :class="`has-background-${bgColor}-dark`">
     <label v-if="label" class="label has-text-white">{{ label }}</label>
     <div class="field">
       <div class="control">

src/components/Notes/NoteCard.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="card mb-4">
+  <div
+    class="card mb-4 scale-in-center"
+    :class="{
+      'scale-out-center': isDeleting
+    }"
+  >
     <div class="card-content">
       <div class="content">
         <p class="note-content">
@@ -24,18 +29,31 @@
         </small>
       </div>
     </div>
+
     <footer class="card-footer">
-      <RouterLink class="card-footer-item" :to="`/edit-note/${note.id}`">Edit</RouterLink>
+      <button
+        class="card-footer-item action-button button is-clickable"
+        @click="$router.push(`/edit-note/${note.id}`)"
+        :disabled="isDeleting"
+      >
+        Edit
+      </button>
 
-      <a class="card-footer-item" @click="deleteNoteHandler(note.id)" href="#">Delete</a>
+      <button
+        class="card-footer-item action-button button is-clickable"
+        :disabled="isDeleting"
+        @click="deleteNote"
+      >
+        Delete
+      </button>
     </footer>
   </div>
 </template>
 
 <script setup>
+import { defineProps, computed, ref } from 'vue'
 import { useNotesStore } from '@/stores/notes'
-import { defineProps, computed } from 'vue'
-import { RouterLink } from 'vue-router'
+import { useToast } from 'vue-toastification'
 
 const props = defineProps({
   note: {
@@ -44,9 +62,21 @@ const props = defineProps({
   }
 })
 
+const toast = useToast()
 const storeNotes = useNotesStore()
 const { deleteNoteHandler } = storeNotes
 
+const isDeleting = ref(false)
+
+const deleteNote = () => {
+  isDeleting.value = true
+
+  setTimeout(() => {
+    deleteNoteHandler(props.note.id)
+    toast.success('Note deleted successfully!')
+  }, 500)
+}
+
 const noteContentLengthText = computed(() => {
   const length = props.note.content.length
   return `${length} ${length === 1 ? 'character' : 'characters'}`
@@ -57,4 +87,12 @@ const noteContentLengthText = computed(() => {
 .note-content {
   white-space: pre-line;
 }
+
+.card-footer {
+  border: none !important;
+}
+
+.action-button {
+  border-radius: 0 !important;
+}
 </style>

src/main.js

@@ -1,14 +1,23 @@
-import '@/assets/main.css'
-import { createApp } from 'vue'
+import 'vue-toastification/dist/index.css'
+import Toast from 'vue-toastification'
 import { createPinia } from 'pinia'
+import { createApp } from 'vue'
+import '@/assets/main.css'
 
 import App from '@/App.vue'
 import router from '@/router'
 
 const pinia = createPinia()
 const app = createApp(App)
 
+const toastOptions = {
+  pauseOnHover: false,
+  timeout: 3000,
+  toastClassName: 'toast'
+}
+
 app.use(pinia)
 app.use(router)
+app.use(Toast, toastOptions)
 
 app.mount('#app')

src/views/ViewEditNote.vue

@@ -1,43 +1,64 @@
 <template>
-  <AddEditNote
-    placeholder="Edit note"
-    v-model="noteContent"
-    ref="addEditNoteRef"
-    label="Edit Note"
-    bgColor="link"
+  <div
+    :class="{
+      'scale-out-center': isCanceling
+    }"
   >
-    <template v-slot:buttons>
-      <button @click="$router.push('/')" class="button is-light is-link mr-3">Cancel</button>
-
-      <button
-        class="button has-background-link is-link"
-        :disabled="!noteContent.trim()"
-        @click="editNote"
-      >
-        Save note
-      </button>
-    </template>
-  </AddEditNote>
+    <AddEditNote
+      placeholder="Edit note"
+      v-model="noteContent"
+      ref="addEditNoteRef"
+      label="Edit Note"
+      bgColor="link"
+      :class="{
+        'scale-out-center': isCanceling
+      }"
+    >
+      <template v-slot:buttons>
+        <button @click="cancelHandler" class="button is-light is-link mr-3">Cancel</button>
+
+        <button
+          class="button has-background-link is-link"
+          :disabled="!noteContent.trim()"
+          @click="editNote"
+        >
+          Save note
+        </button>
+      </template>
+    </AddEditNote>
+  </div>
 </template>
 
 <script setup>
 import { useRoute, useRouter } from 'vue-router'
 import { useNotesStore } from '@/stores/notes'
+import { useToast } from 'vue-toastification'
 import { AddEditNote } from '@/components'
 import { onMounted, ref } from 'vue'
 
 const noteStore = useNotesStore()
+const isCanceling = ref(false)
 const noteContent = ref('')
 const router = useRouter()
 const route = useRoute()
+const toast = useToast()
 
 const { getNoteContent, editNoteHandler } = noteStore
 
 const editNote = () => {
   editNoteHandler(+route.params.id, noteContent.value)
+  toast.success('Note edited successfully!')
   router.push('/')
 }
 
+const cancelHandler = () => {
+  isCanceling.value = true
+
+  setTimeout(() => {
+    router.push('/')
+  }, 500)
+}
+
 onMounted(() => {
   const note = getNoteContent(+route.params.id)
   if (note) {

src/views/ViewNotes.vue

@@ -19,11 +19,13 @@
 <script setup>
 import { NoteCard, AddEditNote } from '@/components'
 import { useNotesStore } from '@/stores/notes'
+import { useToast } from 'vue-toastification'
 import { ref, onMounted } from 'vue'
 import { storeToRefs } from 'pinia'
 
-const newNoteValue = ref('')
 const addEditNoteRef = ref(null)
+const newNoteValue = ref('')
+const toast = useToast()
 
 const storeNotes = useNotesStore()
 
@@ -35,6 +37,7 @@ const newNoteAddHandler = () => {
   noteAddHandler(newNoteValue.value)
   newNoteValue.value = ''
   addEditNoteRef.value.focusTextarea()
+  toast.success('Note added successfully!')
 }
 
 onMounted(() => {

src/views/ViewStats.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="stats">
+  <div class="stats scale-in-center">
     <table class="table is-fullwidth">
       <thead>
         <tr>