#22 - vacation calendar (#51)

* 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 * #22 - wip * #22 - wip * #22 - wip * #22 - fix * #22 - fix * #22 - fix * #22 - fix * #22 - fix * #22 - fix * #22 - cr fixes * #22 - cr fix Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>
2022-02-15 15:08:26 +01:00
parent b161981d5a
commit 6c352b629c
50 changed files with 1682 additions and 397 deletions
--- a/resources/js/Pages/VacationRequest/Create.vue
+++ b/resources/js/Pages/VacationRequest/Create.vue
@@ -1,6 +1,6 @@
 <template>
  <InertiaHead title="Złóż wniosek urlopowy" />
-  <div class="bg-white sm:rounded-lg shadow-md">
+  <div class="bg-white shadow-md">
    <div class="p-4 sm:px-6">
      <h2 class="text-lg leading-6 font-medium text-gray-900">
        Złóż wniosek urlopowy
--- a/resources/js/Pages/VacationRequest/Index.vue
+++ b/resources/js/Pages/VacationRequest/Index.vue
@@ -1,6 +1,6 @@
 <template>
  <InertiaHead title="Twoje wnioski urlopowe" />
-  <div class="bg-white sm:rounded-lg shadow-md">
+  <div class="bg-white shadow-md">
    <div class="flex justify-between items-center p-4 sm:px-6">
      <div>
        <h2 class="text-lg leading-6 font-medium text-gray-900">
@@ -57,7 +57,7 @@
            </th>
            <th
              scope="col"
-              class="px-4 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider"
+              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
            >
              Dni urlopu
            </th>
@@ -84,7 +84,7 @@
                {{ request.name }}
              </InertiaLink>
            </td>
-            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+            <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
              {{ request.type }}
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
@@ -93,15 +93,18 @@
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
              {{ request.to }}
            </td>
-            <td class="px-4 py-4 whitespace-nowrap text-right text-sm text-gray-500">
-              {{ request.estimatedDays }}
+            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+              {{ request.days.length }}
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
-              {{ request.state }}
+              <Status :status="request.state" />
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
-              <InertiaLink :href="`/vacation-requests/${request.id}`">
-                <ChevronRightIcon class="block w-6 h-6 fill-gray-400" />
+              <InertiaLink
+                :href="`/vacation-requests/${request.id}`"
+                class="flex justify-around"
+              >
+                <ChevronRightIcon class="block w-6 h-6 fill-blumilk-500" />
              </InertiaLink>
            </td>
          </tr>
@@ -169,7 +172,19 @@
 </template>

 <script>
-import {ChevronRightIcon, DotsVerticalIcon, PencilIcon, TrashIcon} from '@heroicons/vue/solid'
+import {
+  ChevronRightIcon,
+  ClockIcon,
+  DotsVerticalIcon,
+  PencilIcon,
+  ThumbDownIcon,
+  ThumbUpIcon,
+  TrashIcon,
+  XIcon,
+  CheckIcon,
+  DocumentTextIcon,
+} from '@heroicons/vue/solid'
+import Status from '@/Shared/Status'

 export default {
  name: 'VacationRequestIndex',
@@ -178,6 +193,13 @@ export default {
    PencilIcon,
    TrashIcon,
    ChevronRightIcon,
+    ThumbUpIcon,
+    ClockIcon,
+    XIcon,
+    CheckIcon,
+    DocumentTextIcon,
+    ThumbDownIcon,
+    Status,
  },
  props: {
    requests: {
--- a/resources/js/Pages/VacationRequest/Show.vue
+++ b/resources/js/Pages/VacationRequest/Show.vue
@@ -2,7 +2,7 @@
  <InertiaHead :title="`Wniosek ${request.name}`" />
  <div class="grid grid-cols-1 gap-6 xl:grid-flow-col-dense xl:grid-cols-3">
    <div class="space-y-6 xl:col-start-1 xl:col-span-2">
-      <div class="bg-white sm:rounded-lg shadow-md">
+      <div class="bg-white shadow-md">
        <div class="px-4 py-5 sm:px-6">
          <h3 class="text-lg leading-6 font-medium text-gray-900">
            Informacje na temat wniosku
@@ -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
@@ -26,6 +34,14 @@
                {{ request.type }}
              </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">
+                Obecny status
+              </dt>
+              <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                <Status :status="request.state" />
+              </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">
                Urlop od
@@ -47,16 +63,25 @@
                Dni urlopu
              </dt>
              <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
-                {{ request.estimatedDays }}
+                {{ request.days.length }}
              </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">
                Komentarz
              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              <dd
+                v-if="request.comment != null"
+                class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"
+              >
                {{ request.comment }}
              </dd>
+              <dd
+                v-else
+                class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"
+              >
+                -
+              </dd>
            </div>
            <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
              <dt class="text-sm font-medium text-gray-500">
@@ -85,14 +110,15 @@
          </dl>
        </div>
      </div>
-      <div class="bg-white shadow sm:rounded-lg">
+      <div class="bg-white shadow">
        <div class="px-4 py-5 sm:p-6">
          <h3 class="text-lg leading-6 font-medium text-gray-900">
            Zaakceptuj wniosek jako osoba techniczna
          </h3>
          <div class="mt-2 max-w-xl text-sm text-gray-500">
            <p>
-              W zależności od typu wniosku, zostanie on zatwierdzony lub osoba administracyjna będzie musiała go zaakceptować.
+              W zależności od typu wniosku, zostanie on zatwierdzony lub osoba administracyjna będzie
+              musiała go zaakceptować.
            </p>
          </div>
          <div class="mt-5">
@@ -107,7 +133,7 @@
          </div>
        </div>
      </div>
-      <div class="bg-white shadow sm:rounded-lg">
+      <div class="bg-white shadow">
        <div class="px-4 py-5 sm:p-6">
          <h3 class="text-lg leading-6 font-medium text-gray-900">
            Zaakceptuj wniosek jako osoba administracyjna
@@ -129,7 +155,7 @@
          </div>
        </div>
      </div>
-      <div class="bg-white shadow sm:rounded-lg">
+      <div class="bg-white shadow">
        <div class="px-4 py-5 sm:p-6">
          <h3 class="text-lg leading-6 font-medium text-gray-900">
            Odrzuć wniosek
@@ -151,7 +177,7 @@
          </div>
        </div>
      </div>
-      <div class="bg-white shadow sm:rounded-lg border border-red-500">
+      <div class="bg-white shadow border border-red-500">
        <div class="px-4 py-5 sm:p-6">
          <h3 class="text-lg leading-6 font-medium text-gray-900">
            Anuluj wniosek
@@ -175,7 +201,7 @@
      </div>
    </div>
    <div class="xl:col-start-3 xl:col-span-1 space-y-6">
-      <div class="bg-white sm:rounded-lg shadow-md">
+      <div class="bg-white shadow-md">
        <div class="px-4 py-5 sm:px-6">
          <h3 class="text-lg leading-6 font-medium text-gray-900">
            Historia wniosku
@@ -185,31 +211,12 @@
          <ul>
            <li
              v-for="(activity, index) in activities.data"
-              :key="activity.id"
+              :key="index"
            >
-              <div :class="{'relative pb-8': index !== activities.data.length - 1}">
-                <span
-                  v-if="(index !== activities.data.length - 1)"
-                  class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
-                />
-                <div class="relative flex space-x-3">
-                  <div>
-                    <span class="bg-blumilk-500 h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white">
-                      <ThumbUpIcon class="w-5 h-5 text-white" />
-                    </span>
-                  </div>
-                  <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
-                    <div>
-                      <p class="text-sm text-gray-500">
-                        {{ activity.to }}
-                      </p>
-                    </div>
-                    <div class="text-right text-sm whitespace-nowrap text-gray-500">
-                      <time>{{ activity.date }}</time>
-                    </div>
-                  </div>
-                </div>
-              </div>
+              <Activity
+                :activity="activity"
+                :last="index !== activities.data.length - 1"
+              />
            </li>
          </ul>
        </div>
@@ -219,14 +226,16 @@
 </template>

 <script>
-import { ThumbUpIcon } from '@heroicons/vue/outline'
-import {PaperClipIcon} from '@heroicons/vue/solid'
+import {PaperClipIcon} from '@heroicons/vue/outline'
+import Activity from '@/Shared/Activity'
+import Status from '@/Shared/Status'

 export default {
  name: 'VacationRequestShow',
  components: {
-    ThumbUpIcon,
+    Activity,
    PaperClipIcon,
+    Status,
  },
  props: {
    request: {