Merge remote-tracking branch 'blumilk/main' into #152-dashboard-tables

#5 - (js) Bump vue from 3.2.21 to 3.2.37 (#176 )
* #5 - (js) Bump vue from 3.2.21 to 3.2.37 Bumps [vue](https://github.com/vuejs/core) from 3.2.21 to 3.2.37. - [Release notes](https://github.com/vuejs/core/releases) - [Changelog](https://github.com/vuejs/core/blob/main/CHANGELOG.md) - [Commits](https://github.com/vuejs/core/compare/v3.2.21...v3.2.37) --- updated-dependencies: - dependency-name: vue dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> * - npm dependencies update July 2022 Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>
2022-07-06 14:37:31 +02:00 · 2022-07-05 08:02:34 +02:00 · 2022-07-05 08:02:23 +02:00 · 2022-07-04 19:28:13 +02:00 · 2022-07-04 11:41:59 +02:00 · 2022-07-04 11:04:43 +02:00
21 changed files with 654 additions and 780 deletions
--- a/app/Eloquent/Models/Resume.php
+++ b/app/Eloquent/Models/Resume.php
@@ -31,6 +31,7 @@ class Resume extends Model
        "technologies" => AsCollection::class,
        "projects" => AsCollection::class,
    ];
+    protected $perPage = 50;

    public function user(): BelongsTo
    {
--- a/app/Eloquent/Models/User.php
+++ b/app/Eloquent/Models/User.php
@@ -46,6 +46,7 @@ class User extends Authenticatable implements NotifiableInterface
    protected $with = [
        "profile",
    ];
+    protected $perPage = 50;

    public function profile(): HasOne
    {
--- a/app/Eloquent/Models/VacationRequest.php
+++ b/app/Eloquent/Models/VacationRequest.php
@@ -49,6 +49,7 @@ class VacationRequest extends Model
        "to" => "date",
        "event_ids" => AsCollection::class,
    ];
+    protected $perPage = 50;

    public function user(): BelongsTo
    {
--- a/composer.json
+++ b/composer.json
@@ -9,7 +9,7 @@
        "ext-pdo": "*",
        "ext-redis": "*",
        "azuyalabs/yasumi": "^2.4",
-        "barryvdh/laravel-dompdf": "^1.0",
+        "barryvdh/laravel-dompdf": "^2.0",
        "fruitcake/laravel-cors": "^3.0",
        "guzzlehttp/guzzle": "^7.0.1",
        "inertiajs/inertia-laravel": "^0.6.2",
--- a/composer.lock
+++ b/composer.lock
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -2,7 +2,7 @@ version: '3.8'

 services:
  web:
-    image: nginx:1.21-alpine
+    image: nginx:1.23-alpine
    container_name: toby-web
    working_dir: /application
    volumes:
@@ -76,7 +76,7 @@ services:
    restart: unless-stopped

  node:
-    image: node:18.1.0-alpine3.14
+    image: node:18.4.0-alpine3.16
    container_name: toby-node
    working_dir: /application
    volumes:
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
        "lintf": "./node_modules/.bin/eslint resources/js --ext .js,.vue --fix"
    },
    "dependencies": {
-        "@headlessui/vue": "^1.6.4",
+        "@headlessui/vue": "^1.6.5",
        "@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.31",
+        "@vue/compiler-sfc": "^3.2.37",
        "autoprefixer": "^10.4.7",
        "axios": "^0.27.2",
-        "echarts": "^5.3.2",
+        "echarts": "^5.3.3",
        "flatpickr": "^4.6.13",
-        "laravel-mix": "^6.0.44",
+        "laravel-mix": "^6.0.49",
        "lodash": "^4.17.21",
-        "luxon": "^2.3.2",
+        "luxon": "^2.4.0",
        "postcss": "^8.4.14",
-        "tailwindcss": "^3.0.24",
-        "vue": "3.2.21",
-        "vue-echarts": "^6.0.2",
+        "tailwindcss": "^3.1.4",
+        "vue": "3.2.37",
+        "vue-echarts": "^6.1.0",
        "vue-flatpickr-component": "^9.0.6",
        "vue-loader": "^17.0.0",
-        "vue-material-design-icons": "^5.0.0",
+        "vue-material-design-icons": "^5.1.1",
        "vue-toastification": "^2.0.0-rc.5",
        "vue3-popper": "^1.5.0",
        "vuedraggable": "^4.1.0"
    },
    "devDependencies": {
-        "eslint": "^8.16.0",
-        "eslint-plugin-vue": "^9.1.0"
+        "eslint": "^8.19.0",
+        "eslint-plugin-vue": "^9.1.1"
    }
 }
--- a/resources/js/Pages/Calendar.vue
+++ b/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="text-sm font-medium text-gray-900 truncate">
-                    {{ user.name }}
-                  </div>
+                <div class="ml-3 flex items-start flex-col-reverse md:flex-row">
+                  <span
+                    v-for="split in 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"
+                  >
+                    {{ 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>
--- a/resources/js/Pages/Holidays/Index.vue
+++ b/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>
--- a/resources/js/Pages/Keys.vue
+++ b/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>
--- a/resources/js/Pages/MonthlyUsage.vue
+++ b/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="text-sm font-medium text-gray-900 whitespace-nowrap"
+                  <div class="ml-3 flex items-start flex-col-reverse md:flex-row">
+                    <span
+                      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 }}
-                    </div>
+                      {{ split }}
+                    </span>
                  </div>
                </div>
              </th>
--- a/resources/js/Pages/Resumes/Index.vue
+++ b/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>
--- a/resources/js/Pages/Technologies.vue
+++ b/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>
--- a/resources/js/Pages/Users/Index.vue
+++ b/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>
--- a/resources/js/Pages/VacationLimits.vue
+++ b/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">
-                  <div class="flex">
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap bg-white sticky -left-1 z-10">
+                  <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">
-                        {{ item.user.name }}
+                      <p class="flex items-start flex-col-reverse md:flex-row">
+                        <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>
--- a/resources/js/Pages/VacationRequest/Create.vue
+++ b/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 || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
-                :disabled="form.processing || !form.isDirty"
+                :class="[form.processing || !isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+                :disabled="form.processing || !isDirty"
              >
                Zapisz
              </button>
@@ -359,6 +359,13 @@ 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([])
--- a/resources/js/Pages/VacationRequest/Index.vue
+++ b/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>
--- a/resources/js/Pages/VacationRequest/IndexForApprovers.vue
+++ b/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
-            </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
+              {{ head }}
            </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',
--- a/tailwind.config.js
+++ b/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)`
+        })
+      })
+    }),
  ],
 }
--- a/tests/Feature/UserTest.php
+++ b/tests/Feature/UserTest.php
@@ -73,10 +73,10 @@ class UserTest extends FeatureTestCase

    public function testUserListIsPaginated(): void
    {
-        User::factory()->count(15)->create();
+        User::factory()->count(50)->create();
        $admin = User::factory()->admin()->create();

-        $this->assertDatabaseCount("users", 16);
+        $this->assertDatabaseCount("users", 51);

        $this->actingAs($admin)
            ->get("/users?page=2")
Author	SHA1	Message	Date
Kamil Niemczycki	c04281b050	Merge remote-tracking branch 'blumilk/main' into #152-dashboard-tables	2022-07-06 14:37:31 +02:00
dependabot[bot]	902af64833	#5 - (js) Bump vue from 3.2.21 to 3.2.37 (#176 ) * #5 - (js) Bump vue from 3.2.21 to 3.2.37 Bumps [vue](https://github.com/vuejs/core) from 3.2.21 to 3.2.37. - [Release notes](https://github.com/vuejs/core/releases) - [Changelog](https://github.com/vuejs/core/blob/main/CHANGELOG.md) - [Commits](https://github.com/vuejs/core/compare/v3.2.21...v3.2.37) --- updated-dependencies: - dependency-name: vue dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> * - npm dependencies update July 2022 Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>	2022-07-05 08:02:34 +02:00
dependabot[bot]	d1047e8262	#5 - (php) Bump spatie/laravel-ignition from 1.2.3 to 1.3.1 (#175 ) * #5 - (php) Bump spatie/laravel-ignition from 1.2.3 to 1.3.1 Bumps [spatie/laravel-ignition](https://github.com/spatie/laravel-ignition) from 1.2.3 to 1.3.1. - [Release notes](https://github.com/spatie/laravel-ignition/releases) - [Changelog](https://github.com/spatie/laravel-ignition/blob/main/CHANGELOG.md) - [Commits](https://github.com/spatie/laravel-ignition/compare/1.2.3...1.3.1) --- updated-dependencies: - dependency-name: spatie/laravel-ignition dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * - composer dependencies update July 2022 * - docker-compose.yml update July 2022 Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>	2022-07-05 08:02:23 +02:00
Kamil Niemczycki	043217e9d4	- fixed overflow	2022-07-04 19:28:13 +02:00
Kamil Niemczycki	9e47c7cb28	#152 - updated vacation limits	2022-07-04 11:41:59 +02:00
Kamil Niemczycki	e6f4d0e78c	#152 - updated calendar view	2022-07-04 11:04:43 +02:00
Kamil Niemczycki	8dc487a133	#152 - updated MonthlyUsage	2022-07-04 11:04:14 +02:00
Kamil Niemczycki	5f0d6b5af3	#152 - updated header in calendar	2022-07-04 11:00:35 +02:00
Kamil Niemczycki	f755e1e0db	#152 - updated calendar	2022-07-04 11:00:10 +02:00
Kamil Niemczycki	643f546142	#173 - button behaviour in creating request (#174 ) #173 - improved button behaviour	2022-06-20 09:33:30 +02:00
Kamil Niemczycki	995c0b6696	- changed limits for item list (#171 ) * - changed limits for displayed items * - transferred to models * - updated tests	2022-06-15 10:14:58 +02:00