#22 - wip

2022-02-14 13:42:49 +01:00
parent d026d41715
commit d3d6e3080c
7 changed files with 239 additions and 163 deletions
--- a/resources/js/Composables/statusInfo.js
+++ b/resources/js/Composables/statusInfo.js
@@ -0,0 +1,128 @@
+import {
+  CheckIcon as OutlineCheckIcon,
+  ClockIcon as OutlineClockIcon,
+  DocumentTextIcon as OutlineDocumentTextIcon,
+  ThumbDownIcon as OutlineThumbDownIcon,
+  ThumbUpIcon as OutlineThumbUpIcon,
+  XIcon as OutlineXIcon,
+} from '@heroicons/vue/outline'
+
+import {
+  CheckIcon as SolidCheckIcon,
+  ClockIcon as SolidClockIcon,
+  DocumentTextIcon as SolidDocumentTextIcon,
+  ThumbDownIcon as SolidThumbDownIcon,
+  ThumbUpIcon as SolidThumbUpIcon,
+  XIcon as SolidXIcon,
+} from '@heroicons/vue/solid'
+
+const statuses = [
+  {
+    text: 'Utworzony',
+    value: 'created',
+    outline: {
+      icon: OutlineDocumentTextIcon,
+      foreground: 'text-white',
+      background: 'bg-gray-400',
+    },
+    solid: {
+      icon: SolidDocumentTextIcon,
+      color: 'text-gray-400',
+    },
+  },
+  {
+    text: 'Czeka na akceptację od technicznego',
+    value: 'waiting_for_technical',
+    outline: {
+      icon: OutlineClockIcon,
+      foreground: 'text-white',
+      background: 'bg-amber-400',
+    },
+    solid: {
+      icon: SolidClockIcon,
+      color: 'text-amber-400',
+    },
+  },
+  {
+    text: 'Czeka na akceptację od administracyjnego',
+    value: 'waiting_for_administrative',
+    outline: {
+      icon: OutlineClockIcon,
+      foreground: 'text-white',
+      background: 'bg-amber-400',
+    },
+    solid: {
+      icon: SolidClockIcon,
+      color: 'text-amber-400',
+    },
+  },
+  {
+    text: 'Odrzucony',
+    value: 'rejected',
+    outline: {
+      icon: OutlineThumbDownIcon,
+      foreground: 'text-white',
+      background: 'bg-rose-600',
+    },
+    solid: {
+      icon: SolidThumbDownIcon,
+      color: 'text-rose-600',
+    },
+  },
+  {
+    text: 'Zaakceptowany przez technicznego',
+    value: 'accepted_by_technical',
+    outline: {
+      icon: OutlineThumbUpIcon,
+      foreground: 'text-white',
+      background: 'bg-green-500',
+    },
+    solid: {
+      icon: SolidThumbUpIcon,
+      color: 'text-green-500',
+    },
+  },
+  {
+    text: 'Zaakceptowany przez administracyjnego',
+    value: 'accepted_by_administrative',
+    outline: {
+      icon: OutlineThumbUpIcon,
+      foreground: 'text-white',
+      background: 'bg-green-500',
+    },
+    solid: {
+      icon: SolidThumbUpIcon,
+      color: 'text-green-500',
+    },
+  },
+  {
+    text: 'Zatwierdzony',
+    value: 'approved',
+    outline: {
+      icon: OutlineCheckIcon,
+      foreground: 'text-white',
+      background: 'bg-blumilk-500',
+    },
+    solid: {
+      icon: SolidCheckIcon,
+      color: 'text-blumilk-500',
+    },
+  },
+  {
+    text: 'Anulowany',
+    value: 'canceled',
+    outline: {
+      icon: OutlineXIcon,
+      foreground: 'text-white',
+      background: 'bg-gray-900',
+    },
+    solid: {
+      icon: SolidXIcon,
+      color: 'text-gray-900',
+    },
+  },
+]
+
+export function useStatusInfo(status) {
+  return statuses.find(statusInfo => statusInfo.value === status)
+}
--- a/resources/js/Pages/Calendar.vue
+++ b/resources/js/Pages/Calendar.vue
@@ -62,7 +62,7 @@
              v-for="day in calendar"
              :key="day.dayOfMonth"
              class="border border-gray-300 text-lg font-semibold text-gray-900 py-4 px-2"
-              :class="{ 'text-blumilk-600 bg-blumilk-25 font-black': day.isToday}"
+              :class="{ 'text-blumilk-600 bg-blumilk-25 font-black': day.isToday }"
            >
              <div>
                {{ day.dayOfMonth }}
@@ -75,21 +75,20 @@
        </thead>
        <tbody>
          <tr
-            v-for="userVacation in userVacations"
-            :key="userVacation.user.id"
+            v-for="user in users.data"
+            :key="user.id"
          >
            <th class="border border-gray-300 py-2 px-4">
              <div class="flex justify-start items-center">
                <span class="inline-flex items-center justify-center h-10 w-10 rounded-full">
                  <img
                    class="h-10 w-10 rounded-full"
-                    :src="userVacation.user.avatar"
-                    alt=""
+                    :src="user.avatar"
                  >
                </span>
                <div class="ml-3">
                  <div class="text-sm font-medium text-gray-900">
-                    {{ userVacation.user.name }}
+                    {{ user.name }}
                  </div>
                </div>
              </div>
@@ -98,10 +97,10 @@
              v-for="day in calendar"
              :key="day.dayOfMonth"
              class="border border-gray-300"
-              :class="{'bg-gray-100': day.isWeekend, 'bg-green-100': day.isHoliday, 'bg-blumilk-500': userVacation.vacations.includes(day.date) }"
+              :class="{'bg-red-100': day.isWeekend || day.isHoliday, 'bg-blumilk-500': day.vacations.includes(user.id) }"
            >
              <div
-                v-if="userVacation.vacations.includes(day.date)"
+                v-if="day.vacations.includes(user.id)"
                class="flex justify-center items-center"
              >
                <svg
@@ -139,7 +138,7 @@ export default {
    ChevronDownIcon,
  },
  props: {
-    userVacations: {
+    users: {
      type: Object,
      default: () => null,
    },
--- a/resources/js/Pages/VacationRequest/Show.vue
+++ b/resources/js/Pages/VacationRequest/Show.vue
@@ -18,6 +18,14 @@
                {{ request.name }}
              </dd>
            </div>
+            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+              <dt class="text-sm font-medium text-gray-500">
+                Pracownik
+              </dt>
+              <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                {{ request.user.name }}
+              </dd>
+            </div>
            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
              <dt class="text-sm font-medium text-gray-500">
                Rodzaj urlopu
--- a/resources/js/Shared/Activity.vue
+++ b/resources/js/Shared/Activity.vue
@@ -6,9 +6,9 @@
    />
    <div class="relative flex space-x-3">
      <div>
-        <span :class="[statusInfo.iconBackground, statusInfo.iconForeground, 'h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white']">
+        <span :class="[statusInfo.outline.background, statusInfo.outline.foreground, 'h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white']">
          <component
-            :is="statusInfo.icon"
+            :is="statusInfo.outline.icon"
            class="w-5 h-5 text-white"
          />
        </span>
@@ -32,8 +32,8 @@
 </template>

 <script>
-import {CheckIcon, ClockIcon, DocumentTextIcon, ThumbDownIcon, ThumbUpIcon, XIcon} from '@heroicons/vue/outline'
 import {computed} from 'vue'
+import {useStatusInfo} from '@/Composables/statusInfo'

 export default {
  name: 'VacationRequestActivity',
@@ -48,65 +48,7 @@ export default {
    },
  },
  setup(props) {
-    const statuses = [
-      {
-        text: 'Utworzony',
-        icon: DocumentTextIcon,
-        value: 'created',
-        iconForeground: 'text-white',
-        iconBackground: 'bg-gray-400',
-      },
-      {
-        text: 'Czeka na akceptację od technicznego',
-        icon: ClockIcon,
-        value: 'waiting_for_technical',
-        iconForeground: 'text-white',
-        iconBackground: 'bg-amber-400',
-      },
-      {
-        text: 'Czeka na akceptację od administracyjnego',
-        icon: ClockIcon,
-        value: 'waiting_for_administrative',
-        iconForeground: 'text-white',
-        iconBackground: 'bg-amber-400',
-      },
-      {
-        text: 'Odrzucony',
-        icon: ThumbDownIcon,
-        value: 'rejected',
-        iconForeground: 'text-white',
-        iconBackground: 'bg-rose-600',
-      },
-      {
-        text: 'Zaakceptowany przez technicznego',
-        icon: ThumbUpIcon,
-        value: 'accepted_by_technical',
-        iconForeground: 'text-white',
-        iconBackground: 'bg-green-500',
-      },
-      {
-        text: 'Zaakceptowany przez administracyjnego',
-        icon: ThumbUpIcon,
-        value: 'accepted_by_administrative',
-        iconForeground: 'text-white',
-        iconBackground: 'bg-green-500',
-      },
-      {
-        text: 'Zatwierdzony',
-        icon: CheckIcon,
-        value: 'approved',
-        iconForeground: 'text-white',
-        iconBackground: 'bg-blumilk-500',
-      },
-      {
-        text: 'Anulowany',
-        icon: XIcon,
-        value: 'canceled',
-        iconForeground: 'text-white',
-        iconBackground: 'bg-gray-900',
-      },
-    ]
-    const statusInfo = computed(() => statuses.find(status => status.value === props.activity.state))
+    const statusInfo = computed(() => useStatusInfo(props.activity.state))

    return {
      statusInfo,
--- a/resources/js/Shared/Status.vue
+++ b/resources/js/Shared/Status.vue
@@ -1,16 +1,16 @@
 <template>
  <div class="flex items-center">
    <component
-      :is="statusInfo.icon"
-      :class="[statusInfo.color ,'w-5 h-5 mr-1']"
+      :is="statusInfo.solid.icon"
+      :class="[statusInfo.solid.color ,'w-5 h-5 mr-1']"
    />
    <span>{{ statusInfo.text }}</span>
  </div>
 </template>

 <script>
-import {CheckIcon, ClockIcon, DocumentTextIcon, ThumbDownIcon, ThumbUpIcon, XIcon} from '@heroicons/vue/solid'
 import {computed} from 'vue'
+import {useStatusInfo} from '@/Composables/statusInfo'

 export default {
  name: 'VacationRequestStatus',
@@ -25,57 +25,7 @@ export default {
    },
  },
  setup(props) {
-    const statuses = [
-      {
-        text: 'Utworzony',
-        icon: DocumentTextIcon,
-        value: 'created',
-        color: 'text-gray-400',
-      },
-      {
-        text: 'Czeka na akceptację od technicznego',
-        icon: ClockIcon,
-        value: 'waiting_for_technical',
-        color: 'text-amber-400',
-      },
-      {
-        text: 'Czeka na akceptację od administracyjnego',
-        icon: ClockIcon,
-        value: 'waiting_for_administrative',
-        color: 'text-amber-400',
-      },
-      {
-        text: 'Odrzucony',
-        icon: ThumbDownIcon,
-        value: 'rejected',
-        color: 'text-rose-600',
-      },
-      {
-        text: 'Zaakceptowany przez technicznego',
-        icon: ThumbUpIcon,
-        value: 'accepted_by_technical',
-        color: 'text-green-500',
-      },
-      {
-        text: 'Zaakceptowany przez administracyjnego',
-        icon: ThumbUpIcon,
-        value: 'accepted_by_administrative',
-        color: 'text-green-500',
-      },
-      {
-        text: 'Zatwierdzony',
-        icon: CheckIcon,
-        value: 'approved',
-        color: 'text-blumilk-500',
-      },
-      {
-        text: 'Anulowany',
-        icon: XIcon,
-        value: 'canceled',
-        color: 'text-gray-900',
-      },
-    ]
-    const statusInfo = computed(() => statuses.find(status => status.value === props.status))
+    const statusInfo = computed(() => useStatusInfo(props.status))

    return {
      statusInfo,