#42 - global notifications (#50)

* change layout

* change layout

* #22 - wip

* wip

* wip

* #22 - wip

* #22 - wip

* #22 - wip

* #22 - wip

* #22 - fix

* #22 - wip

* #22 - added some tests

* #22 - wip

* #22 - wip

* #22 - fix

* #42 - wip

* #42 - wip

* #42 - fix

* #42 - wip

Co-authored-by: Adrian Hopek <adrian.hopek@blumilk.pl>

resources/js/Pages/Login.vue

@@ -15,7 +15,7 @@
       <div class="p-4">
         <div class="flex items-center">
           <div class="w-0 flex-1 flex justify-between">
-            <ExclamationIcon class="h-5 w-5 text-white" />
+            <ExclamationIcon class="h-5 w-5 mr-1 text-white" />
             <p class="w-0 flex-1 text-sm font-medium text-white">
               {{ errors.oauth }}
             </p>

resources/js/Pages/VacationRequest/Show.vue

@@ -126,6 +126,7 @@
               :href="`/vacation-requests/${request.id}/accept-as-technical`"
               method="post"
               as="button"
+              preserve-scroll
               class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
             >
               Zaakceptuj wniosek
@@ -148,6 +149,7 @@
               :href="`/vacation-requests/${request.id}/accept-as-administrative`"
               method="post"
               as="button"
+              preserve-scroll
               class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
             >
               Zaakceptuj wniosek
@@ -170,6 +172,7 @@
               :href="`/vacation-requests/${request.id}/reject`"
               method="post"
               as="button"
+              preserve-scroll
               class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
             >
               Odrzuć wniosek
@@ -192,6 +195,7 @@
               :href="`/vacation-requests/${request.id}/cancel`"
               method="post"
               as="button"
+              preserve-scroll
               class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
             >
               Anuluj wniosek

resources/js/Shared/Layout/AppLayout.vue

@@ -11,9 +11,36 @@
 
 <script>
 import MainMenu from '@/Shared/MainMenu'
+import {useToast} from 'vue-toastification'
+import {watch} from 'vue'
 
 export default {
   name: 'AppLayout',
-  components: {MainMenu},
+  components: {
+    MainMenu,
+  },
+  props: {
+    flash: {
+      type: Object,
+      default: () => null,
+    },
+  },
+  setup(props) {
+    const toast = useToast()
+
+    watch(() => props.flash, flash => {
+      if (flash.success) {
+        toast.success(flash.success)
+      }
+
+      if (flash.error) {
+        toast.error(flash.error)
+      }
+    }, {immediate:true})
+
+    return {
+      toast,
+    }
+  },
 }
 </script>

resources/js/Shared/Layout/GuestLayout.vue

@@ -1,4 +1,3 @@
-
 <template>
   <div class="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8 bg-blumilk-25">
     <slot />

resources/js/Shared/MainMenu.vue

@@ -363,11 +363,11 @@ export default {
 
     const navigation = [
       {name: 'Strona główna', href: '/', icon: HomeIcon, current: true},
-      {name: 'Użytkownicy', href: '/users', icon: UserGroupIcon, current: false},
-      {name: 'Dostępne urlopy', href: '/vacation-limits', icon: SunIcon, current: false},
-      {name: 'Twoje wnioski', href: '/vacation-requests', icon: CollectionIcon, current: false},
-      {name: 'Dni wolne', href: '/holidays', icon: StarIcon, current: false},
+      {name: 'Wnioski urlopowe', href: '/vacation-requests', icon: CollectionIcon, current: false},
       {name: 'Kalendarz urlopów', href: '/vacation-calendar', icon: CalendarIcon, current: false},
+      {name: 'Dni wolne', href: '/holidays', icon: StarIcon, current: false},
+      {name: 'Limity urlopów', href: '/vacation-limits', icon: SunIcon, current: false},
+      {name: 'Użytkownicy', href: '/users', icon: UserGroupIcon, current: false},
     ]
     const userNavigation = [
       {name: 'Your Profile', href: '#'},

resources/js/app.js

@@ -4,6 +4,7 @@ import {InertiaProgress} from '@inertiajs/progress'
 import AppLayout from '@/Shared/Layout/AppLayout'
 import Flatpickr from 'flatpickr'
 import { Polish } from 'flatpickr/dist/l10n/pl.js'
+import Toast from 'vue-toastification'
 
 createInertiaApp({
   resolve: name => {
@@ -16,6 +17,11 @@ createInertiaApp({
   setup({el, App, props, plugin}) {
     createApp({render: () => h(App, props)})
       .use(plugin)
+      .use(Toast, {
+        position: 'bottom-right',
+        maxToast: 5,
+
+      })
       .component('InertiaLink', Link)
       .component('InertiaHead', Head)
       .mount(el)