From eb0b43b1b00e88edb5ff631d54a347509883db63 Mon Sep 17 00:00:00 2001
From: Adrian Hopek <adrian.hopek@blumilk.pl>
Date: Thu, 24 Mar 2022 10:06:47 +0100
Subject: [PATCH] #44 - fix

---
 resources/js/Pages/VacationLimits.vue | 226 +++++++++++++-------------
 1 file changed, 114 insertions(+), 112 deletions(-)

diff --git a/resources/js/Pages/VacationLimits.vue b/resources/js/Pages/VacationLimits.vue
index 507c306..97f2a25 100644
--- a/resources/js/Pages/VacationLimits.vue
+++ b/resources/js/Pages/VacationLimits.vue
@@ -11,123 +11,125 @@
         </p>
       </div>
     </div>
-    <div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
-      <form @submit.prevent="submitVacationDays">
-        <table class="min-w-full divide-y divide-gray-200">
-          <thead class="bg-gray-50">
-            <tr>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+    <div class="border-t border-gray-200">
+      <div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
+        <form @submit.prevent="submitVacationDays">
+          <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+              <tr>
+                <th
+                  scope="col"
+                  class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+                >
+                  Imię i nazwisko
+                </th>
+                <th
+                  scope="col"
+                  class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+                >
+                  Forma zatrudnienia
+                </th>
+                <th
+                  scope="col"
+                  class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+                >
+                  Posiada urlop?
+                </th>
+                <th
+                  scope="col"
+                  class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+                >
+                  Pozostałe dni z poprzedniego roku
+                </th>
+                <th
+                  scope="col"
+                  class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+                >
+                  Dostępne dni w roku
+                </th>
+              </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-100">
+              <tr
+                v-for="(item, index) in form.items"
+                :key="item.id"
+                class="hover:bg-blumilk-25"
               >
-                Imię i nazwisko
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
-              >
-                Forma zatrudnienia
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
-              >
-                Posiada urlop?
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
-              >
-                Pozostałe dni z poprzedniego roku
-              </th>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
-              >
-                Dostępne dni w roku
-              </th>
-            </tr>
-          </thead>
-          <tbody class="bg-white divide-y divide-gray-100">
-            <tr
-              v-for="(item, index) in form.items"
-              :key="item.id"
-              class="hover:bg-blumilk-25"
-            >
-              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
-                <div class="flex">
-                  <span class="inline-flex items-center justify-center h-10 w-10 rounded-full">
-                    <img
-                      class="h-10 w-10 rounded-full"
-                      :src="item.user.avatar"
+                <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+                  <div class="flex">
+                    <span class="inline-flex items-center justify-center h-10 w-10 rounded-full">
+                      <img
+                        class="h-10 w-10 rounded-full"
+                        :src="item.user.avatar"
+                      >
+                    </span>
+                    <div class="ml-3">
+                      <p class="text-sm font-medium break-all text-gray-900">
+                        {{ item.user.name }}
+                      </p>
+                      <p class="text-sm break-all text-gray-500">
+                        {{ item.user.email }}
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+                  {{ item.user.employmentForm }}
+                </td>
+                <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+                  <Switch
+                    v-model="item.hasVacation"
+                    :class="[item.hasVacation ? 'bg-blumilk-500' : 'bg-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500']"
+                  >
+                    <span
+                      :class="[item.hasVacation ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200']"
+                    />
+                  </Switch>
+                </td>
+                <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+                  <div class="mt-1 sm:mt-0 sm:col-span-2 w-full max-w-lg bg-gray-50 border border-gray-300 rounded-md px-4 py-2 inline-flex items-center text-gray-500 sm:text-sm">
+                    {{ item.remainingLastYear }}
+                  </div>
+                </td>
+                <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+                  <div class="mt-1 sm:mt-0 sm:col-span-2">
+                    <input
+                      v-model="item.days"
+                      type="number"
+                      min="0"
+                      class="block w-full shadow-sm rounded-md sm:text-sm disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none disabled:cursor-not-allowed"
+                      :disabled="!item.hasVacation"
+                      :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`items.${index}.days`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`items.${index}.days`] }"
                     >
-                  </span>
-                  <div class="ml-3">
-                    <p class="text-sm font-medium break-all text-gray-900">
-                      {{ item.user.name }}
-                    </p>
-                    <p class="text-sm break-all text-gray-500">
-                      {{ item.user.email }}
+                    <p
+                      v-if="form.errors[`items.${index}.days`]"
+                      class="mt-2 text-sm text-red-600"
+                    >
+                      {{ form.errors[`items.${index}.days`] }}
                     </p>
                   </div>
-                </div>
-              </td>
-              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
-                {{ item.user.employmentForm }}
-              </td>
-              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
-                <Switch
-                  v-model="item.hasVacation"
-                  :class="[item.hasVacation ? 'bg-blumilk-500' : 'bg-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500']"
+                </td>
+              </tr>
+              <tr v-if="!form.items.length">
+                <td
+                  colspan="100%"
+                  class="text-center py-4 text-xl leading-5 text-gray-700"
                 >
-                  <span
-                    :class="[item.hasVacation ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200']"
-                  />
-                </Switch>
-              </td>
-              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
-                <div class="mt-1 sm:mt-0 sm:col-span-2 w-full max-w-lg bg-gray-50 border border-gray-300 rounded-md px-4 py-2 inline-flex items-center text-gray-500 sm:text-sm">
-                  {{ item.remainingLastYear }}
-                </div>
-              </td>
-              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
-                <div class="mt-1 sm:mt-0 sm:col-span-2">
-                  <input
-                    v-model="item.days"
-                    type="number"
-                    min="0"
-                    class="block w-full shadow-sm rounded-md sm:text-sm disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none disabled:cursor-not-allowed"
-                    :disabled="!item.hasVacation"
-                    :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`items.${index}.days`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`items.${index}.days`] }"
-                  >
-                  <p
-                    v-if="form.errors[`items.${index}.days`]"
-                    class="mt-2 text-sm text-red-600"
-                  >
-                    {{ form.errors[`items.${index}.days`] }}
-                  </p>
-                </div>
-              </td>
-            </tr>
-            <tr v-if="!form.items.length">
-              <td
-                colspan="100%"
-                class="text-center py-4 text-xl leading-5 text-gray-700"
-              >
-                Brak danych
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <div class="flex justify-end py-3 px-4">
-          <button
-            type="submit"
-            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"
-          >
-            Zapisz
-          </button>
-        </div>
-      </form>
+                  Brak danych
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div class="flex justify-end py-3 px-4">
+            <button
+              type="submit"
+              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"
+            >
+              Zapisz
+            </button>
+          </div>
+        </form>
+      </div>
     </div>
   </div>
 </template>