- fixed overflow

.env.example

@@ -67,9 +67,3 @@ SLACK_ENABLED=true
 SLACK_CLIENT_TOKEN=
 SLACK_SIGNING_SECRET=
 SLACK_DEFAULT_CHANNEL="#general"
-
-HEROKU_RELEASE_VERSION=v01
-HEROKU_SLUG_DESCRIPTION="Dev 643f546"
-HEROKU_RELEASE_CREATED_AT=2022-07-04T18:05:46Z
-HEROKU_SLUG_COMMIT=643f546142b8a2db342f0ae46f01e61dce03e97c
-GITHUB_REPO_URL=https://github.com/blumilksoftware/toby/

app/Eloquent/Models/Resume.php

@@ -31,7 +31,6 @@ class Resume extends Model
         "technologies" => AsCollection::class,
         "projects" => AsCollection::class,
     ];
-    protected $perPage = 50;
 
     public function user(): BelongsTo
     {

app/Eloquent/Models/User.php

@@ -46,7 +46,6 @@ class User extends Authenticatable implements NotifiableInterface
     protected $with = [
         "profile",
     ];
-    protected $perPage = 50;
 
     public function profile(): HasOne
     {

app/Eloquent/Models/VacationRequest.php

@@ -49,7 +49,6 @@ class VacationRequest extends Model
         "to" => "date",
         "event_ids" => AsCollection::class,
     ];
-    protected $perPage = 50;
 
     public function user(): BelongsTo
     {

app/Infrastructure/Http/Middleware/HandleInertiaRequests.php

@@ -25,7 +25,6 @@ class HandleInertiaRequests extends Middleware
             "flash" => $this->getFlashData($request),
             "years" => $this->getYearsData($request),
             "vacationRequestsCount" => $this->getVacationRequestsCount($request),
-            "deployInformation" => $this->getDeployInformation(),
         ]);
     }
 
@@ -72,15 +71,4 @@ class HandleInertiaRequests extends Middleware
             ->count()
         : null;
     }
-
-    protected function getDeployInformation(): Closure
-    {
-        return fn() => [
-            "release_version" => config("heroku.release_version"),
-            "slug_description" => config("heroku.slug_description"),
-            "release_created_at" => config("heroku.release_created_at"),
-            "slug_commit" => config("heroku.slug_commit"),
-            "github_url" => preg_replace("/\/$/i", "", config("heroku.github_url", "")),
-        ];
-    }
 }

composer.json

@@ -9,7 +9,7 @@
         "ext-pdo": "*",
         "ext-redis": "*",
         "azuyalabs/yasumi": "^2.4",
-        "barryvdh/laravel-dompdf": "^2.0",
+        "barryvdh/laravel-dompdf": "^1.0",
         "fruitcake/laravel-cors": "^3.0",
         "guzzlehttp/guzzle": "^7.0.1",
         "inertiajs/inertia-laravel": "^0.6.2",

config/heroku.php

@@ -1,11 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-return [
-    "release_version" => env("HEROKU_RELEASE_VERSION"),
-    "slug_description" => env("HEROKU_SLUG_DESCRIPTION"),
-    "release_created_at" => env("HEROKU_RELEASE_CREATED_AT"),
-    "slug_commit" => env("HEROKU_SLUG_COMMIT"),
-    "github_url" => env("GITHUB_REPO_URL"),
-];

docker-compose.yml

@@ -2,7 +2,7 @@ version: '3.8'
 
 services:
   web:
-    image: nginx:1.23-alpine
+    image: nginx:1.21-alpine
     container_name: toby-web
     working_dir: /application
     volumes:
@@ -76,7 +76,7 @@ services:
     restart: unless-stopped
 
   node:
-    image: node:18.4.0-alpine3.16
+    image: node:18.1.0-alpine3.14
     container_name: toby-node
     working_dir: /application
     volumes:

package.json

@@ -13,7 +13,7 @@
         "lintf": "./node_modules/.bin/eslint resources/js --ext .js,.vue --fix"
     },
     "dependencies": {
-        "@headlessui/vue": "^1.6.5",
+        "@headlessui/vue": "^1.6.4",
         "@heroicons/vue": "^1.0.6",
         "@inertiajs/inertia": "^0.11.0",
         "@inertiajs/inertia-vue3": "^0.6.0",
@@ -21,27 +21,27 @@
         "@tailwindcss/forms": "^0.5.2",
         "@tailwindcss/line-clamp": "^0.4.0",
         "@tailwindcss/typography": "^0.5.2",
-        "@vue/compiler-sfc": "^3.2.37",
+        "@vue/compiler-sfc": "^3.2.31",
         "autoprefixer": "^10.4.7",
         "axios": "^0.27.2",
-        "echarts": "^5.3.3",
+        "echarts": "^5.3.2",
         "flatpickr": "^4.6.13",
-        "laravel-mix": "^6.0.49",
+        "laravel-mix": "^6.0.44",
         "lodash": "^4.17.21",
-        "luxon": "^2.4.0",
+        "luxon": "^2.3.2",
         "postcss": "^8.4.14",
-        "tailwindcss": "^3.1.4",
+        "tailwindcss": "^3.0.24",
-        "vue": "3.2.37",
+        "vue": "3.2.21",
-        "vue-echarts": "^6.1.0",
+        "vue-echarts": "^6.0.2",
         "vue-flatpickr-component": "^9.0.6",
         "vue-loader": "^17.0.0",
-        "vue-material-design-icons": "^5.1.1",
+        "vue-material-design-icons": "^5.0.0",
         "vue-toastification": "^2.0.0-rc.5",
         "vue3-popper": "^1.5.0",
         "vuedraggable": "^4.1.0"
     },
     "devDependencies": {
-        "eslint": "^8.19.0",
+        "eslint": "^8.16.0",
-        "eslint-plugin-vue": "^9.1.1"
+        "eslint-plugin-vue": "^9.1.0"
     }
 }

resources/js/Pages/Calendar.vue

@@ -55,18 +55,20 @@
       </div>
     </div>
     <div class="overflow-x-auto">
-      <table class="w-full text-sm text-center border border-gray-300">
+      <table class="w-full text-sm text-center border-y border-r border-gray-300">
         <thead>
           <tr>
-            <th class="py-2 w-64 text-lg font-semibold text-gray-800 border border-gray-300">
+            <th
+              class="py-2 w-64 text-lg font-semibold text-gray-800 border-y border-gray-300 bg-white sticky left-0 sticky-border"
+            >
               <div class="flex justify-center items-center">
-                {{ selectedMonth.name }} {{ years.selected.year }}
+                {{ selectedMonth.name }}
               </div>
             </th>
             <th
               v-for="day in calendar"
               :key="day.dayOfMonth"
-              class="p-2 text-lg font-semibold text-gray-900 border border-gray-300"
+              class="p-2 text-lg font-semibold text-gray-900 border second:border-l-0 border-gray-300"
               style="min-width: 46px;"
               :class="{ 'bg-red-100 text-red-800': day.isWeekend || day.isHoliday, 'text-blumilk-600 bg-blumilk-25': day.isToday }"
             >
@@ -84,22 +86,28 @@
             v-for="user in users.data"
             :key="user.id"
           >
-            <th class="p-2 border border-gray-300">
+            <th
+              class="p-2 border-y border-gray-300 bg-white sticky left-0 sticky-border"
+            >
               <div class="flex justify-start items-center">
                 <span class="inline-flex justify-center items-center w-8 h-8 rounded-full">
                   <img :src="user.avatar">
                 </span>
-                <div class="ml-3">
+                <div class="ml-3 flex items-start flex-col-reverse md:flex-row">
-                  <div class="text-sm font-medium text-gray-900 truncate">
+                  <span
-                    {{ user.name }}
+                    v-for="split in user.name.split(' ', 2)"
-                  </div>
+                    :key="split"
+                    class="text-sm first:text-xs md:first:text-sm font-medium text-gray-900 truncate first:mr-1"
+                  >
+                    {{ split }}
+                  </span>
                 </div>
               </div>
             </th>
             <td
               v-for="day in calendar"
               :key="day.dayOfMonth"
-              class="border border-gray-300"
+              class="border second:border-l-0 border-gray-300"
               :class="{ 'bg-blumilk-25': day.isToday, 'bg-red-100': day.isWeekend || day.isHoliday }"
               @mouseover="setActiveDay(user.id + '+' + day.date)"
               @mouseleave="unsetActiveDay"
@@ -176,3 +184,10 @@ function linkParameters(user, day) {
   return props.can.createOnBehalfOfEmployee ? { user: user.id, from_date: day.date } : { from_date: day.date }
 }
 </script>
+
+<style lang="css">
+.sticky-border {
+  box-shadow: inset -1px 0 rgb(209 213 219 / 1),
+              inset 1px 0 rgb(209 213 219 / 1);
+}
+</style>

resources/js/Pages/Holidays/Index.vue

@@ -17,7 +17,7 @@
       </div>
     </div>
     <div class="border-t border-gray-200">
-      <div class="overflow-auto xl:overflow-visible">
+      <div class="overflow-x-auto">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>

resources/js/Pages/Keys.vue

@@ -19,7 +19,7 @@
       </div>
     </div>
     <div class="border-t border-gray-200">
-      <div class="overflow-auto xl:overflow-visible">
+      <div class="overflow-x-auto">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>

resources/js/Pages/MonthlyUsage.vue

@@ -9,11 +9,11 @@
       </div>
     </div>
     <div class="border-t border-gray-200">
-      <div class="overflow-x-auto overflow-y-hidden xl:overflow-x-visible">
+      <div class="overflow-x-auto">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>
-              <th class="py-3 px-6 w-64 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase">
+              <th class="py-3 px-6 w-64 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase bg-gray-50 sticky -left-1">
                 Pracownik
               </th>
               <th
@@ -38,7 +38,7 @@
               :key="item.user.id"
               class="hover:bg-blumilk-25"
             >
-              <th class="p-4 text-sm font-semibold text-gray-500 capitalize whitespace-nowrap">
+              <th class="p-4 text-sm font-semibold text-gray-500 capitalize whitespace-nowrap bg-white sticky -left-1">
                 <div class="flex justify-start items-center">
                   <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
                     <img
@@ -46,12 +46,14 @@
                       :src="item.user.avatar"
                     >
                   </span>
-                  <div class="ml-3">
+                  <div class="ml-3 flex items-start flex-col-reverse md:flex-row">
-                    <div
+                    <span
-                      class="text-sm font-medium text-gray-900 whitespace-nowrap"
+                      v-for="split in item.user.name.split(' ', 2)"
+                      :key="split"
+                      class="text-sm first:text-xs md:first:text-sm font-medium text-gray-900 truncate first:mr-1"
                     >
-                      {{ item.user.name }}
+                      {{ split }}
-                    </div>
+                    </span>
                   </div>
                 </div>
               </th>

resources/js/Pages/Resumes/Index.vue

@@ -15,7 +15,7 @@
       </div>
     </div>
     <div class="border-t border-gray-200">
-      <div class="overflow-auto xl:overflow-visible">
+      <div class="overflow-x-auto">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>

resources/js/Pages/Technologies.vue

@@ -18,7 +18,7 @@
       </div>
     </div>
     <div class="border-t border-gray-200">
-      <div class="overflow-auto xl:overflow-visible">
+      <div class="overflow-x-auto">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>

resources/js/Pages/Users/Index.vue

@@ -30,7 +30,7 @@
           >
         </div>
       </div>
-      <div class="overflow-auto xl:overflow-visible">
+      <div class="overflow-x-auto">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>

resources/js/Pages/VacationLimits.vue

@@ -10,13 +10,13 @@
     </div>
     <div class="border-t border-gray-200">
       <form @submit.prevent="submitVacationDays">
-        <div class="overflow-auto xl:overflow-visible">
+        <div class="overflow-x-auto">
           <table class="min-w-full border-b divide-y divide-gray-200">
             <thead class="bg-gray-50">
               <tr>
                 <th
                   scope="col"
-                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap bg-gray-50 sticky -left-1"
                 >
                   Imię i nazwisko
                 </th>
@@ -52,8 +52,8 @@
                 :key="item.id"
                 class="hover:bg-blumilk-25"
               >
-                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap bg-white sticky -left-1 z-10">
-                  <div class="flex">
+                  <div class="flex justify-start items-center">
                     <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
                       <img
                         class="w-10 h-10 rounded-full"
@@ -61,10 +61,16 @@
                       >
                     </span>
                     <div class="ml-3">
-                      <p class="text-sm font-medium text-gray-900 break-all">
+                      <p class="flex items-start flex-col-reverse md:flex-row">
-                        {{ item.user.name }}
+                        <span
+                          v-for="split in item.user.name.split(' ', 2)"
+                          :key="split"
+                          class="first:text-xs md:first:text-sm font-medium text-gray-900 truncate first:mr-1"
+                        >
+                          {{ split }}
+                        </span>
                       </p>
-                      <p class="text-sm text-gray-500 break-all">
+                      <p class="hidden md:block text-sm text-gray-500 break-all">
                         {{ item.user.email }}
                       </p>
                     </div>

resources/js/Pages/VacationRequest/Create.vue

@@ -297,8 +297,8 @@
               <button
                 type="submit"
                 class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-                :class="[form.processing || !isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+                :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
-                :disabled="form.processing || !isDirty"
+                :disabled="form.processing || !form.isDirty"
               >
                 Zapisz
               </button>
@@ -359,13 +359,6 @@ const form = useForm({
   flowSkipped: false,
 })
 
-let isDirty = ref(false)
-
-watch(form, formData => {
-  const { from, to } = formData.data()
-  isDirty.value = formData.isDirty || from !== null || to !== null
-}, { immediate: true, deep: true })
-
 refreshEstimatedDays(form.from, form.to)
 
 const estimatedDays = ref([])

resources/js/Pages/VacationRequest/Index.vue

@@ -88,7 +88,7 @@
         </Listbox>
       </div>
     </div>
-    <div class="overflow-auto xl:overflow-visible">
+    <div class="overflow-x-auto">
       <table class="min-w-full divide-y divide-gray-200">
         <thead class="bg-gray-50">
           <tr>

resources/js/Pages/VacationRequest/IndexForApprovers.vue

@@ -53,7 +53,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+                class="overflow-x-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
               >
                 <ListboxOption
                   v-slot="{ active }"
@@ -237,51 +237,17 @@
         </Listbox>
       </div>
     </div>
-    <div class="overflow-auto xl:overflow-visible">
+    <div class="overflow-x-auto">
       <table class="min-w-full divide-y divide-gray-200">
         <thead class="bg-gray-50">
           <tr>
             <th
+              v-for="head in headers"
+              :key="head"
               scope="col"
               class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
             >
-              Numer
+              {{ head }}
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Pracownik
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Rodzaj wniosku
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Od
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Do
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Dni urlopu
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Status
             </th>
             <th scope="col" />
           </tr>
@@ -381,6 +347,8 @@ const props = defineProps({
   types: Object,
 })
 
+const headers = ['Numer', 'Pracownik', 'Rodzaj wniosku', 'Od', 'Do', 'Dni urlopu', 'Status']
+
 const statuses = [
   {
     name: 'Wszystkie',

resources/js/Shared/DeployInfo.vue

@@ -1,67 +0,0 @@
-<template>
-  <div
-    :class="{ 'flex-col': isVertical(), 'flex-row': isHorizontal() }"
-    class="min-w-full p-4 text-xs text-gray-500 flex gap-x-1"
-  >
-    <p class="flex flex-row gap-x-1">
-      <strong>Wersja:</strong>
-      <span
-        :title="`Commit: ${deployInformation.slug_commit ?? 'unset'}`"
-      >
-        {{ deployInformation.slug_description ?? 'unset' }} ({{ deployInformation.release_version ?? 'unset' }})
-      </span>
-    </p>
-    <p
-      v-if="deployInformation.release_created_at"
-      class="flex flex-row gap-x-1"
-      :class="{ 'border-l-2 border-gray-300 pl-1': isHorizontal() }"
-    >
-      <strong>Ostatnio zbudowano:</strong>
-      <span>{{ getDate() }}</span>
-    </p>
-    <p
-      v-if="deployInformation.github_url"
-      :class="{ 'border-l-2 border-gray-300 pl-1': isHorizontal(), 'flex flex-row gap-x-1': isVertical() }"
-    >
-      <strong v-if="isVertical()">Repozytorium:</strong>
-      <a
-        v-if="deployInformation.github_url"
-        class="text-gray-800 underline hover:no-underline hover:text-blumilk-600"
-        :href="deployInformation.github_url"
-        target="_blank"
-        rel="noopener nofollow noreferrer"
-      >GitHub</a>
-    </p>
-  </div>
-</template>
-
-<script setup>
-import { DateTime } from 'luxon'
-
-let props = defineProps({
-  deployInformation: Object,
-  layout: {
-    type: String,
-    default: 'horizontal',
-  },
-})
-
-function isVertical() {
-  return props.layout === 'vertical'
-}
-
-function isHorizontal() {
-  return props.layout === 'horizontal'
-}
-
-function getDate() {
-  return DateTime.fromISO(props.deployInformation.release_created_at)
-    .toLocaleString({
-      year: 'numeric',
-      month: '2-digit',
-      day: '2-digit',
-      hour: '2-digit',
-      minute: '2-digit',
-    })
-}
-</script>

resources/js/Shared/Layout/AppLayout.vue

@@ -9,9 +9,6 @@
       <div class="lg:px-4">
         <slot />
       </div>
-      <DeployInfo
-        :deploy-information="deployInformation"
-      />
     </main>
   </div>
 </template>
@@ -20,14 +17,12 @@
 import MainMenu from '@/Shared/MainMenu'
 import { useToast } from 'vue-toastification'
 import { watch } from 'vue'
-import DeployInfo from '@/Shared/DeployInfo'
 
 const props = defineProps({
   flash: Object,
   auth: Object,
   years: Object,
   vacationRequestsCount: Number,
-  deployInformation: Object,
 })
 
 const toast = useToast()

resources/js/Shared/Layout/GuestLayout.vue

@@ -1,18 +1,5 @@
 <template>
-  <div class="relative flex flex-col justify-center py-12 min-h-screen bg-blumilk-25 sm:px-6 lg:px-8">
+  <div class="flex flex-col justify-center py-12 min-h-screen bg-blumilk-25 sm:px-6 lg:px-8">
     <slot />
-    <DeployInfo
-      :deploy-information="deployInformation"
-      layout="vertical"
-      class="absolute right-0 bottom-0"
-    />
   </div>
 </template>
-
-<script setup>
-import DeployInfo from '@/Shared/DeployInfo'
-
-defineProps({
-  deployInformation: Object,
-})
-</script>

tailwind.config.js

@@ -1,4 +1,5 @@
 const defaultTheme = require('tailwindcss/defaultTheme')
+const plugin = require('tailwindcss/plugin')
 
 module.exports = {
   content: [
@@ -31,5 +32,12 @@ module.exports = {
     require('@tailwindcss/forms'),
     require('@tailwindcss/typography'),
     require('@tailwindcss/line-clamp'),
+    plugin(function({ addVariant, e }) {
+      addVariant('second', ({ modifySelectors, separator }) => {
+        modifySelectors(({ className }) => {
+          return `.${e(`second${separator}${className}`)}:nth-child(2)`
+        })
+      })
+    }),
   ],
 }

tests/Feature/UserTest.php

@@ -73,10 +73,10 @@ class UserTest extends FeatureTestCase
 
     public function testUserListIsPaginated(): void
     {
-        User::factory()->count(50)->create();
+        User::factory()->count(15)->create();
         $admin = User::factory()->admin()->create();
 
-        $this->assertDatabaseCount("users", 51);
+        $this->assertDatabaseCount("users", 16);
 
         $this->actingAs($admin)
             ->get("/users?page=2")