#42 - wip

resources/js/Pages/Dashboard.vue

@@ -257,7 +257,7 @@ import {computed} from 'vue'
 import {usePage} from '@inertiajs/inertia-vue3'
 
 export default {
-  name: 'Dashboard',
+  name: 'DashboardPage',
   setup() {
     const user = computed(() => usePage().props.value.auth.user)
     const stats = [

resources/js/Shared/Alerts/ErrorAlert.vue

@@ -0,0 +1,67 @@
+<template>
+  <transition
+    enter-active-class="transform ease-out duration-300 transition"
+    enter-from-class="opacity-0"
+    enter-to-class="opacity-100"
+    leave-active-class="transition ease-in duration-100"
+    leave-from-class="opacity-100"
+    leave-to-class="opacity-0"
+  >
+    <div
+      v-if="show"
+      class="fixed bottom-4 right-0 mx-auto w-full max-w-md bg-red-500 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden z-50 sm:mr-4"
+    >
+      <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 mr-2" />
+            <p class="w-0 flex-1 text-sm font-medium text-white">
+              {{ message }}
+            </p>
+          </div>
+          <div class="ml-4 flex-shrink-0 flex">
+            <button
+              class="bg-red-500 rounded-md inline-flex text-red-100 hover:text-red-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600"
+              @click="show = false"
+            >
+              <span class="sr-only">Close</span>
+              <XIcon
+                class="h-5 w-5"
+                aria-hidden="true"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import {XIcon} from '@heroicons/vue/outline'
+import {ExclamationIcon} from '@heroicons/vue/solid'
+import {ref} from 'vue'
+
+export default {
+  name: 'ErrorAlert',
+  components: {
+    ExclamationIcon,
+    XIcon,
+  },
+  props: {
+    message: {
+      type: String,
+      default: () => null,
+    },
+  },
+  setup() {
+    const show = ref(true)
+
+    setTimeout(() => show.value = false, 6000)
+
+    return {
+      show,
+    }
+  },
+}
+</script>

resources/js/Shared/Alerts/SuccessAlert.vue

@@ -0,0 +1,67 @@
+<template>
+  <transition
+    enter-active-class="transform ease-out duration-300 transition"
+    enter-from-class="opacity-0"
+    enter-to-class="opacity-100"
+    leave-active-class="transition ease-in duration-100"
+    leave-from-class="opacity-100"
+    leave-to-class="opacity-0"
+  >
+    <div
+      v-if="show"
+      class="fixed bottom-4 right-0 mx-auto w-full max-w-md bg-green-500 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden z-50 sm:mr-4"
+    >
+      <div class="p-4">
+        <div class="flex items-center">
+          <div class="w-0 flex-1 flex justify-between">
+            <CheckCircleIcon class="h-5 w-5 text-white mr-2" />
+            <p class="w-0 flex-1 text-sm font-medium text-white">
+              {{ message }}
+            </p>
+          </div>
+          <div class="ml-4 flex-shrink-0 flex">
+            <button
+              class="bg-green-500 rounded-md inline-flex text-green-100 hover:text-green-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-600"
+              @click="show = false"
+            >
+              <span class="sr-only">Close</span>
+              <XIcon
+                class="h-5 w-5"
+                aria-hidden="true"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import {XIcon} from '@heroicons/vue/outline'
+import {CheckCircleIcon} from '@heroicons/vue/solid'
+import {ref} from 'vue'
+
+export default {
+  name: 'SuccessAlert',
+  components: {
+    CheckCircleIcon,
+    XIcon,
+  },
+  props: {
+    message: {
+      type: String,
+      default: () => '',
+    },
+  },
+  setup() {
+    const show = ref(true)
+
+    setTimeout(() => show.value = false, 6000)
+
+    return {
+      show,
+    }
+  },
+}
+</script>

resources/js/Shared/FlashMessage.vue

@@ -8,7 +8,7 @@
     leave-to-class="opacity-0"
   >
     <div
-      v-if="$page.props.flash.success && show"
+      v-if="show"
       class="fixed bottom-4 right-0 mx-auto w-full max-w-md bg-green-500 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden z-50 sm:mr-4"
     >
       <div class="p-4">
@@ -16,7 +16,7 @@
           <div class="w-0 flex-1 flex justify-between">
             <CheckCircleIcon class="h-5 w-5 text-white mr-2" />
             <p class="w-0 flex-1 text-sm font-medium text-white">
-              {{ $page.props.flash.success }}
+              {{ message }}
             </p>
           </div>
           <div class="ml-4 flex-shrink-0 flex">
@@ -35,38 +35,39 @@
       </div>
     </div>
   </transition>
-  <div
-    v-if="($page.props.flash.error) && show"
-    class="fixed bottom-4 right-0 mx-auto w-full max-w-md bg-red-500 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden z-50 sm:mr-4"
-  >
-    <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 mr-2" />
-          <p class="w-0 flex-1 text-sm font-medium text-white">
-            {{ $page.props.flash.error }}
-          </p>
-        </div>
-        <div class="ml-4 flex-shrink-0 flex">
-          <button
-            class="bg-red-500 rounded-md inline-flex text-red-100 hover:text-red-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600"
-            @click="show = false"
-          >
-            <span class="sr-only">Close</span>
-            <XIcon
-              class="h-5 w-5"
-              aria-hidden="true"
-            />
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
+<!--  <div-->
+<!--    v-if="($page.props.flash.error) && show"-->
+<!--    class="fixed bottom-4 right-0 mx-auto w-full max-w-md bg-red-500 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden z-50 sm:mr-4"-->
+<!--  >-->
+<!--    <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 mr-2" />-->
+<!--          <p class="w-0 flex-1 text-sm font-medium text-white">-->
+<!--            {{ $page.props.flash.error }}-->
+<!--          </p>-->
+<!--        </div>-->
+<!--        <div class="ml-4 flex-shrink-0 flex">-->
+<!--          <button-->
+<!--            class="bg-red-500 rounded-md inline-flex text-red-100 hover:text-red-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600"-->
+<!--            @click="show = false"-->
+<!--          >-->
+<!--            <span class="sr-only">Close</span>-->
+<!--            <XIcon-->
+<!--              class="h-5 w-5"-->
+<!--              aria-hidden="true"-->
+<!--            />-->
+<!--          </button>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </div>-->
+<!--  </div>-->
 </template>
 
 <script>
 import {XIcon} from '@heroicons/vue/outline'
 import {ExclamationIcon, CheckCircleIcon} from '@heroicons/vue/solid'
+import {ref} from 'vue'
 
 export default {
   name: 'FlashMessage',
@@ -76,22 +77,19 @@ export default {
     XIcon,
   },
   props: {
-    flash: Object,
-    default: () => ({success: null, error: null}),
+    message: {
+      type: String,
+      default: () => null,
     },
-  data() {
+  },
+  setup() {
+    const show = ref(true)
+
+    setTimeout(() => show.value = false, 6000)
+
     return {
-      show:true,
+      show,
     }
   },
-  watch: {
-    '$page.props.flash': {
-      handler() {
-        this.show = true
-        setTimeout(() => this.show = false, 6000)
-      },
-    },
-    deep: true,
-  },
 }
 </script>

resources/js/Shared/Layout/AppLayout.vue

@@ -2,7 +2,14 @@
   <div class="min-h-full">
     <MainMenu />
     <main class="lg:ml-64 flex flex-col flex-1 py-8">
-      <FlashMessage />
+      <SuccessAlert
+        v-if="flash.success"
+        :message="flash.success"
+      />
+      <ErrorAlert
+        v-if="flash.error"
+        :message="flash.error"
+      />
       <div>
         <slot />
       </div>
@@ -12,13 +19,21 @@
 
 <script>
 import MainMenu from '@/Shared/MainMenu'
-import FlashMessage from '@/Shared/FlashMessage'
+import SuccessAlert from '@/Shared/Alerts/SuccessAlert'
+import ErrorAlert from '@/Shared/Alerts/ErrorAlert'
 
 export default {
   name: 'AppLayout',
   components: {
-    FlashMessage,
+    SuccessAlert,
+    ErrorAlert,
     MainMenu,
   },
+  props: {
+    flash: {
+      type: Object,
+      default: () => null,
+    },
+  },
 }
 </script>

resources/views/pdf/vacation-request.blade.php

@@ -74,7 +74,7 @@
         <h2>Wniosek o urlop</h2>
         <p class="content">
             Proszę o {{ mb_strtolower($vacationRequest->type->label()) }} w okresie od dnia {{ $vacationRequest->from->format("d.m.Y") }}
-            do dnia {{ $vacationRequest->to->format("d.m.Y") }} włącznie tj. {{ $vacationRequest->estimated_days }} dni roboczych za rok {{ $vacationRequest->yearPeriod->year }}.
+            do dnia {{ $vacationRequest->to->format("d.m.Y") }} włącznie tj. {{ $vacationRequest->vacations()->count() }} dni roboczych za rok {{ $vacationRequest->yearPeriod->year }}.
         </p>
     </div>