Merge branch 'dashboard-calendar-widget' into #152-dashboard

#152 - final support for weeks
#152 - optimization
2022-06-26 17:26:18 +02:00 · 2022-06-24 11:20:18 +02:00 · 2022-06-24 11:11:09 +02:00 · 2022-06-24 10:22:51 +02:00 · 2022-06-24 10:08:48 +02:00 · 2022-06-24 10:00:36 +02:00
11 changed files with 84 additions and 69 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/resources/js/Pages/Calendar.vue
+++ b/resources/js/Pages/Calendar.vue
@@ -55,20 +55,18 @@
      </div>
    </div>
    <div class="overflow-x-auto">
-      <table class="w-full text-sm text-center border-y border-r border-gray-300">
+      <table class="w-full text-sm text-center border border-gray-300">
        <thead>
          <tr>
-            <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"
-            >
+            <th class="py-2 w-64 text-lg font-semibold text-gray-800 border border-gray-300">
              <div class="flex justify-center items-center">
-                {{ selectedMonth.name }}
+                {{ selectedMonth.name }} {{ years.selected.year }}
              </div>
            </th>
            <th
              v-for="day in calendar"
              :key="day.dayOfMonth"
-              class="p-2 text-lg font-semibold text-gray-900 border second:border-l-0 border-gray-300"
+              class="p-2 text-lg font-semibold text-gray-900 border 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 }"
            >
@@ -86,28 +84,22 @@
            v-for="user in users.data"
            :key="user.id"
          >
-            <th
-              class="p-2 border-y border-gray-300 bg-white sticky left-0 sticky-border"
-            >
+            <th class="p-2 border border-gray-300">
              <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 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 class="ml-3">
+                  <div class="text-sm font-medium text-gray-900 truncate">
+                    {{ user.name }}
+                  </div>
                </div>
              </div>
            </th>
            <td
              v-for="day in calendar"
              :key="day.dayOfMonth"
-              class="border second:border-l-0 border-gray-300"
+              class="border border-gray-300"
              :class="{ 'bg-blumilk-25': day.isToday, 'bg-red-100': day.isWeekend || day.isHoliday }"
              @mouseover="setActiveDay(user.id + '+' + day.date)"
              @mouseleave="unsetActiveDay"
@@ -184,10 +176,3 @@ 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/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -7,7 +7,6 @@
      <VacationStats :stats="stats" />
    </div>
    <div class="grid grid-cols-1 gap-4">
-      <VacationCalendar />
      <PendingVacationRequests
        v-if="can.listAllVacationRequests"
        :requests="vacationRequests.data"
--- 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 xl:overflow-x-visible">
+      <div class="overflow-x-auto overflow-y-hidden xl:overflow-x-visible">
        <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 bg-gray-50 sticky -left-1">
+              <th class="py-3 px-6 w-64 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase">
                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 bg-white sticky -left-1">
+              <th class="p-4 text-sm font-semibold text-gray-500 capitalize whitespace-nowrap">
                <div class="flex justify-start items-center">
                  <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
                    <img
@@ -46,14 +46,12 @@
                      :src="item.user.avatar"
                    >
                  </span>
-                  <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"
+                  <div class="ml-3">
+                    <div
+                      class="text-sm font-medium text-gray-900 whitespace-nowrap"
                    >
-                      {{ split }}
-                    </span>
+                      {{ item.user.name }}
+                    </div>
                  </div>
                </div>
              </th>
--- 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/IndexForApprovers.vue
+++ b/resources/js/Pages/VacationRequest/IndexForApprovers.vue
@@ -242,12 +242,46 @@
        <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"
            >
-              {{ head }}
+              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
            </th>
            <th scope="col" />
          </tr>
@@ -347,8 +381,6 @@ const props = defineProps({
  types: Object,
 })

-const headers = ['Numer', 'Pracownik', 'Rodzaj wniosku', 'Od', 'Do', 'Dni urlopu', 'Status']
-
 const statuses = [
  {
    name: 'Wszystkie',
--- a/resources/js/Shared/Widgets/VacationCalendar.vue
+++ b/resources/js/Shared/Widgets/VacationCalendar.vue
@@ -179,7 +179,7 @@ const calendarState = reactive({
 })

 const customCalendar = {
-  generateCalendar() {
+  loadCalendar() {
    const date = DateTime.fromObject({
      year: calendar.currents.year,
      month: calendarState.viewMode.isMonth ? calendar.currents.month : 1,
@@ -231,23 +231,23 @@ const customCalendar = {
 }

 watch([calendar.viewMode, calendar.currents], () => {
-  customCalendar.generateCalendar()
+  customCalendar.loadCalendar()
 })

-customCalendar.generateCalendar()
+customCalendar.loadCalendar()

 function toLast() {
  if (calendar.viewMode.value === 'week')
    minusWeek()
  else
-    addMonths(-1)
+    minusMonth()
 }

 function toNext() {
-  if (calendar.viewMode.value === 'week') {
+  if (calendar.viewMode.value === 'week')
    addWeek()
-  } else
-    addMonths()
+  else
+    addMonth()
 }

 function resetCalendar(config = {}) {
@@ -275,15 +275,10 @@ function addWeek(minus = false) {

  const startWeekDay = date.startOf('week'), endWeekDay = date.endOf('week')
  nextMonth = howMany > 0 ? startWeekDay.month : endWeekDay.month
-  if (howMany < 0 && endWeekDay.day === endWeekDay.daysInMonth) {
-    console.log('pre', endWeekDay.day, endWeekDay.daysInMonth)
+  if (howMany < 0 && endWeekDay.day === endWeekDay.daysInMonth)
    calendar.currents.week--
-  } else if (howMany > 0 && startWeekDay.day === 1) {
-    console.log('next', endWeekDay.day, endWeekDay.daysInMonth)
+  else if (howMany > 0 && startWeekDay.day === 1)
    calendar.currents.week++
-  } else {
-    console.log('else', endWeekDay.day, endWeekDay.daysInMonth)
-  }

  if (nextMonth !== calendar.currents.month) {
    calendar.currents.month = calendar.currents.week > 1 ? nextMonth : 1
@@ -298,8 +293,12 @@ function minusWeek() {
  addWeek(true)
 }

-function addMonths(howMany = 1) {
-  calendar.currents.month += howMany
+function addMonth(minus = false) {
+  calendar.currents.month += minus ? -1 : 1
+}
+
+function minusMonth() {
+  addMonth(true)
 }

 function goToToday() {
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,4 @@
 const defaultTheme = require('tailwindcss/defaultTheme')
-const plugin = require('tailwindcss/plugin')

 module.exports = {
  content: [
@@ -32,12 +31,5 @@ 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	c16eb9aff5	Merge branch 'dashboard-calendar-widget' into #152-dashboard	2022-06-26 17:26:18 +02:00
Kamil Niemczycki	a7bc4695a7	#152 - final support for weeks	2022-06-24 11:20:18 +02:00
Kamil Niemczycki	4e16f363ac	#152 - optimization	2022-06-24 11:11:09 +02:00
Kamil Niemczycki	7893282385	#152 - wip	2022-06-24 10:22:51 +02:00
Kamil Niemczycki	db874d4395	#152 - wip	2022-06-24 10:08:48 +02:00
Kamil Niemczycki	dcc3808428	#152 - wip	2022-06-24 10:00:36 +02:00
Kamil Niemczycki	2a3e65ed5f	#152 - calendar template added	2022-06-24 09:58:21 +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