kamilniemczycki/toby
1
0
Fork 0
Code Issues Pull Requests 2 Projects Releases Activity

#99 - ui changes (#100)

Browse Source 
* #99 - ui changes

* #99 - logo fix

* #99 - tailwind plugin for eslint

* #99 - fix

* #99 - fix

* #99 - fix pagination

* #99 - fix logo

Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>
This commit is contained in:
Adrian Hopek 2022-03-31 10:12:33 +02:00 committed by GitHub
parent 08421b8a69
commit b49fcadbba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
38 changed files with 758 additions and 667 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.eslintrc.js
View File

@ -1,4 +1,5 @@
module.exports = { module.exports = {
plugins: ['tailwindcss'],
env: { env: {
node: true, node: true,
'vue/setup-compiler-macros': true, 'vue/setup-compiler-macros': true,
@ -15,5 +16,10 @@ module.exports = {
'comma-dangle': ['error', 'always-multiline'], 'comma-dangle': ['error', 'always-multiline'],
'object-curly-spacing': ['error', 'always'], 'object-curly-spacing': ['error', 'always'],
'vue/require-default-prop': 0, 'vue/require-default-prop': 0,
'tailwindcss/classnames-order': 'error',
'tailwindcss/enforces-negative-arbitrary-values': 'error',
'tailwindcss/enforces-shorthand': 'error',
'tailwindcss/no-arbitrary-value': 'error',
'tailwindcss/no-contradicting-classname': 'error',
}, },
} }

6
app/Eloquent/Models/User.php
View File

@ -103,9 +103,9 @@ class User extends Authenticatable
} }
return $query return $query
->where("first_name", "ILIKE", $text) ->where("first_name", "ILIKE", "%{$text}%")
->orWhere("last_name", "ILIKE", $text) ->orWhere("last_name", "ILIKE", "%{$text}%")
->orWhere("email", "ILIKE", $text); ->orWhere("email", "ILIKE", "%{$text}%");
} }
public function scopeWithVacationLimitIn(Builder $query, YearPeriod $yearPeriod): Builder public function scopeWithVacationLimitIn(Builder $query, YearPeriod $yearPeriod): Builder

2
app/Infrastructure/Http/Controllers/VacationRequestController.php
View File

@ -113,7 +113,7 @@ class VacationRequestController extends Controller
"users" => UserResource::collection($users), "users" => UserResource::collection($users),
"filters" => [ "filters" => [
"status" => $status, "status" => $status,
"user" => $user, "user" => (int)$user,
], ],
]); ]);
} }

26
package-lock.json generated
View File

@ -34,6 +34,7 @@
}, },
"devDependencies": { "devDependencies": {
"eslint": "^8.11.0", "eslint": "^8.11.0",
"eslint-plugin-tailwindcss": "^3.5.0",
"eslint-plugin-vue": "^8.5.0" "eslint-plugin-vue": "^8.5.0"
} }
}, },
@ -4344,6 +4345,20 @@
"url": "https://opencollective.com/eslint" "url": "https://opencollective.com/eslint"
} }
}, },
"node_modules/eslint-plugin-tailwindcss": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.5.0.tgz",
"integrity": "sha512-m1NyKX1qii3arb+zWrsNO5R15b27aaEm6m1ie9JM9a6yBrU9Q8H62obzT/U8PSITIucMY864uxljV8MiP7H6xg==",
"dev": true,
"dependencies": {
"fast-glob": "^3.2.5",
"postcss": "^8.4.4",
"tailwindcss": "^3.0.7"
},
"engines": {
"node": ">=12.13.0"
}
},
"node_modules/eslint-plugin-vue": { "node_modules/eslint-plugin-vue": {
"version": "8.5.0", "version": "8.5.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-8.5.0.tgz", "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-8.5.0.tgz",
@ -12883,6 +12898,17 @@
"v8-compile-cache": "^2.0.3" "v8-compile-cache": "^2.0.3"
} }
}, },
"eslint-plugin-tailwindcss": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.5.0.tgz",
"integrity": "sha512-m1NyKX1qii3arb+zWrsNO5R15b27aaEm6m1ie9JM9a6yBrU9Q8H62obzT/U8PSITIucMY864uxljV8MiP7H6xg==",
"dev": true,
"requires": {
"fast-glob": "^3.2.5",
"postcss": "^8.4.4",
"tailwindcss": "^3.0.7"
}
},
"eslint-plugin-vue": { "eslint-plugin-vue": {
"version": "8.5.0", "version": "8.5.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-8.5.0.tgz", "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-8.5.0.tgz",

1
package.json
View File

@ -41,6 +41,7 @@
}, },
"devDependencies": { "devDependencies": {
"eslint": "^8.11.0", "eslint": "^8.11.0",
"eslint-plugin-tailwindcss": "^3.5.0",
"eslint-plugin-vue": "^8.5.0" "eslint-plugin-vue": "^8.5.0"
} }
} }

BIN
public/img/logo-white.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

16
public/img/logo-white.svg Normal file
View File

@ -0,0 +1,16 @@
<svg version="1.1" width="120mm" height="40mm" viewBox="0 0 247.56 84.867" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-24.251 -29.695)">
<rect x="49.391" y="55.396" width="36.399" height="31.455" fill="none" stroke-width=".26458"/>
<rect x="78.629" y="48.576" width="11.849" height="22.76" fill="none" stroke-width=".26458"/>
<rect x="34.217" y="41.501" width="52.169" height="17.731" fill="none" stroke-width=".28432"/>
<rect x="29.563" y="50.338" width="21.5" height="59.423" fill="none" stroke-width=".43534"/>
<rect x="51.948" y="83.526" width="37.677" height="24.976" fill="none" stroke-width=".25616"/>
<path d="m30.841 107.97h18.175v-53.797l-8.9598-9.4978-9.2153 9.5215zm21.47 6.5913h-24.765c-1.8203 0-3.2956-1.476-3.2956-3.2956v-58.402c0-0.85478 0.33302-1.6771 0.92745-2.2909l12.542-12.959c0.62618-0.64734 1.4817-0.99236 2.389-1.004 0.89994 6e-3 1.7582 0.37959 2.3756 1.034l12.224 12.959c0.57644 0.61101 0.89747 1.4199 0.89747 2.2613v58.402c0 1.8196-1.475 3.2956-3.2953 3.2956" fill="#fff"/>
<path d="m91.783 114.55h-39.526c-1.8196 0-3.2953-1.4746-3.2953-3.2942v-56.774c0-1.8196 1.4757-3.2956 3.2953-3.2956 1.8203 0 3.2957 1.476 3.2957 3.2956v53.479h32.935v-19.798l-8.3273-8.4141c-0.62195-0.629-0.96555-1.4803-0.95215-2.365 0.012-0.88335 0.37924-1.7254 1.0192-2.3357l8.2603-7.8835v-14.892c0-1.8203 1.4757-3.2956 3.2957-3.2956 1.8203 0 3.2949 1.4753 3.2949 3.2956v16.302c0 0.90064-0.36759 1.7625-1.0195 2.3837l-6.8534 6.5405 6.9201 6.9914c0.61066 0.61736 0.95285 1.4503 0.95285 2.3181v24.447c0 1.8196-1.4746 3.2942-3.2949 3.2942" fill="#fff"/>
<path d="m91.785 55.564c-0.95638 0-1.9053-0.41381-2.5573-1.2146l-9.615-11.809-38.795 0.049h-0.0042c-1.8186 0-3.2921-1.4714-3.2953-3.2907-0.0025-1.8189 1.4714-3.2956 3.2911-3.2985l40.363-0.0529h0.0056c0.98883 0 1.9283 0.44661 2.5538 1.2153l10.606 13.025c1.1497 1.4125 0.93768 3.4876-0.47308 4.6369-0.61207 0.49777-1.349 0.73978-2.0793 0.73978" fill="#fff"/>
<path d="m81.455 42.589h-40.642c-1.8203 0-3.2953-1.475-3.2953-3.2949v-6.3034c0-1.82 1.475-3.2956 3.2953-3.2956h40.642c1.8196 0 3.2942 1.4757 3.2942 3.2956v6.3034c0 1.82-1.4746 3.2949-3.2942 3.2949" fill="#fff"/>
<path d="m55.657 80.088c0-27.744-3.53e-4 -27.811-0.24152-28.455-0.24946-0.66676-0.39359-0.82818-6.5083-7.2892l-1.6452-1.7384h32.308l8.8511 10.869v13.63l-3.9188 3.7465c-2.1553 2.0606-4.1251 3.9568-4.3772 4.2139-0.66375 0.67676-0.94174 1.3731-0.94517 2.3675-0.0049 1.4251 0.0387 1.4818 4.8994 6.3692l4.3418 4.3656v19.731h-32.764z" fill="none" stroke-width=".11786"/>
<path d="m30.911 81.056 0.0038-26.842 4.5152-4.6554c2.4834-2.5604 4.565-4.6554 4.626-4.6554 0.06091 0 2.0846 2.0913 4.4971 4.6472l4.3863 4.6472v53.7h-18.032z" fill="none" stroke-width=".11786"/>
<text transform="matrix(.28744 0 0 .28614 -24.649 -29.82)" fill="#ffffff" font-family="sans-serif" font-size="133.33px"><tspan x="485.27344" y="426.98435"><tspan font-family="'Noto Sans'" font-weight="bold">blumilk_</tspan></tspan></text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

36
resources/js/Pages/Calendar.vue
View File

@ -3,28 +3,28 @@
<div class="bg-white shadow-md"> <div class="bg-white shadow-md">
<div class="flex justify-between items-center p-4 sm:px-6"> <div class="flex justify-between items-center p-4 sm:px-6">
<div class="flex items-center"> <div class="flex items-center">
<h2 class="text-lg leading-6 font-medium text-gray-900"> <h2 class="text-lg font-medium leading-6 text-center text-gray-900">
Kalendarz urlopów Kalendarz urlopów
</h2> </h2>
<div class="ml-5 flex items-center rounded-md shadow-sm md:items-stretch"> <div class="flex items-center ml-3 rounded-md shadow-sm md:items-stretch">
<InertiaLink <InertiaLink
v-if="previousMonth" v-if="previousMonth"
as="button" as="button"
:href="`/vacation/calendar/${previousMonth.value}`" :href="`/vacation/calendar/${previousMonth.value}`"
class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50" class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-l-md border border-r-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50"
> >
<ChevronLeftIcon class="h-5 w-5" /> <ChevronLeftIcon class="w-5 h-5" />
</InertiaLink> </InertiaLink>
<span <span
v-else v-else
class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50" class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-l-md border border-r-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50"
> >
<ChevronLeftIcon class="h-5 w-5" /> <ChevronLeftIcon class="w-5 h-5" />
</span> </span>
<InertiaLink <InertiaLink
as="button" as="button"
:href="`/vacation/calendar/${currentMonth.value}`" :href="`/vacation/calendar/${currentMonth.value}`"
class="hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium flex items-center text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block" class="hidden focus:relative items-center p-2 text-sm font-medium text-gray-700 hover:text-gray-900 bg-white hover:bg-gray-50 border-y border-gray-300 md:flex"
> >
Dzisiaj Dzisiaj
</InertiaLink> </InertiaLink>
@ -32,32 +32,32 @@
v-if="nextMonth" v-if="nextMonth"
as="button" as="button"
:href="`/vacation/calendar/${nextMonth.value}`" :href="`/vacation/calendar/${nextMonth.value}`"
class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50" class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-r-md border border-l-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50"
> >
<ChevronRightIcon class="h-5 w-5" /> <ChevronRightIcon class="w-5 h-5" />
</InertiaLink> </InertiaLink>
<span <span
v-else v-else
class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50" class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-r-md border border-l-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50"
> >
<ChevronRightIcon class="h-5 w-5" /> <ChevronRightIcon class="w-5 h-5" />
</span> </span>
</div> </div>
</div> </div>
<div v-if="can.generateTimesheet"> <div v-if="can.generateTimesheet">
<a <a
:href="`/vacation/timesheet/${selectedMonth.value}`" :href="`/vacation/timesheet/${selectedMonth.value}`"
class="inline-flex items-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500" class="block py-3 px-4 ml-3 text-sm font-medium leading-4 text-center text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
> >
Pobierz plik Excel Pobierz plik Excel
</a> </a>
</div> </div>
</div> </div>
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="w-full text-center text-sm border border-gray-300"> <table class="w-full text-sm text-center border border-gray-300">
<thead> <thead>
<tr> <tr>
<th class="w-64 py-2 border text-lg font-semibold text-gray-800 border-gray-300"> <th class="py-2 w-64 text-lg font-semibold text-gray-800 border border-gray-300">
<div class="flex justify-center items-center"> <div class="flex justify-center items-center">
{{ selectedMonth.name }} {{ years.selected.year }} {{ selectedMonth.name }} {{ years.selected.year }}
</div> </div>
@ -65,13 +65,13 @@
<th <th
v-for="day in calendar" v-for="day in calendar"
:key="day.dayOfMonth" :key="day.dayOfMonth"
class="border border-gray-300 text-lg font-semibold text-gray-900 py-2 px-2" class="p-2 text-lg font-semibold text-gray-900 border border-gray-300"
style="min-width: 46px;" style="min-width: 46px;"
:class="{ 'bg-red-100 text-red-800': day.isWeekend || day.isHoliday, 'text-blumilk-600 bg-blumilk-25': day.isToday }" :class="{ 'bg-red-100 text-red-800': day.isWeekend || day.isHoliday, 'text-blumilk-600 bg-blumilk-25': day.isToday }"
> >
<div> <div>
{{ day.dayOfMonth }} {{ day.dayOfMonth }}
<p class="font-normal mt-1 text-sm capitalize"> <p class="mt-1 text-sm font-normal capitalize">
{{ day.dayOfWeek }} {{ day.dayOfWeek }}
</p> </p>
</div> </div>
@ -83,9 +83,9 @@
v-for="user in users.data" v-for="user in users.data"
:key="user.id" :key="user.id"
> >
<th class="border border-gray-300 py-2 px-2"> <th class="p-2 border border-gray-300">
<div class="flex justify-start items-center"> <div class="flex justify-start items-center">
<span class="inline-flex items-center justify-center h-8 w-8 rounded-full"> <span class="inline-flex justify-center items-center w-8 h-8 rounded-full">
<img :src="user.avatar"> <img :src="user.avatar">
</span> </span>
<div class="ml-3"> <div class="ml-3">

4
resources/js/Pages/Dashboard.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<InertiaHead title="Strona główna" /> <InertiaHead title="Strona główna" />
<div class="grid grid-cols-1 gap-4 items-start lg:grid-cols-3 lg:gap-8"> <div class="grid grid-cols-1 gap-4 items-start xl:grid-cols-3 xl:gap-8">
<div class="grid grid-cols-1 gap-4 lg:col-span-2"> <div class="grid grid-cols-1 gap-4 xl:col-span-2">
<Welcome :user="auth.user" /> <Welcome :user="auth.user" />
<VacationStats :stats="stats" /> <VacationStats :stats="stats" />
</div> </div>

12
resources/js/Pages/Error.vue
View File

@ -1,24 +1,24 @@
<template> <template>
<InertiaHead :title="error.title" /> <InertiaHead :title="error.title" />
<div class="min-h-full px-4 py-16 sm:px-6 sm:py-24 md:grid md:place-items-center lg:px-8"> <div class="py-16 px-4 min-h-full sm:py-24 sm:px-6 md:grid md:place-items-center lg:px-8">
<div class="max-w-max mx-auto"> <div class="mx-auto max-w-max">
<main class="sm:flex"> <main class="sm:flex">
<p class="text-4xl font-extrabold text-blumilk-600 sm:text-5xl"> <p class="text-4xl font-extrabold text-blumilk-600 sm:text-5xl">
{{ error.code }} {{ error.code }}
</p> </p>
<div class="sm:ml-6"> <div class="sm:ml-6">
<div class="sm:border-l sm:border-gray-200 sm:pl-6"> <div class="sm:pl-6 sm:border-l sm:border-gray-200">
<h1 class="text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl"> <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl">
{{ error.title }} {{ error.title }}
</h1> </h1>
<p class="mt-1 text-base text-gray-500"> <p class="mt-1 text-base text-gray-500">
{{ error.message }} {{ error.message }}
</p> </p>
</div> </div>
<div class="mt-10 flex space-x-3 sm:border-l sm:border-transparent sm:pl-6"> <div class="flex mt-10 space-x-3 sm:pl-6 sm:border-l sm:border-transparent">
<InertiaLink <InertiaLink
href="/" href="/"
class="inline-flex items-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500" class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
> >
Wróć do strony głównej Wróć do strony głównej
</InertiaLink> </InertiaLink>

23
resources/js/Pages/Holidays/Create.vue
View File

@ -2,30 +2,27 @@
<InertiaHead title="Dodaj dzień wolny" /> <InertiaHead title="Dodaj dzień wolny" />
<div class="bg-white shadow-md"> <div class="bg-white shadow-md">
<div class="p-4 sm:px-6"> <div class="p-4 sm:px-6">
<h2 class="text-lg leading-6 font-medium text-gray-900"> <h2 class="text-lg font-medium leading-6 text-gray-900">
Dodaj dzień wolny Dodaj dzień wolny
</h2> </h2>
<p class="mt-1 text-sm text-gray-500">
Użytkownik nie będzie miał możliwości wzięcia urlopu w dzień wolny.
</p>
</div> </div>
<form <form
class="border-t border-gray-200 px-6" class="px-6 border-t border-gray-200"
@submit.prevent="createHoliday" @submit.prevent="createHoliday"
> >
<div class="sm:grid sm:grid-cols-3 py-4 items-center"> <div class="items-center py-4 sm:grid sm:grid-cols-3">
<label <label
for="name" for="name"
class="block text-sm font-medium text-gray-700 sm:mt-px" class="block text-sm font-medium text-gray-700 sm:mt-px"
> >
Nazwa Nazwa
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<input <input
id="name" id="name"
v-model="form.name" v-model="form.name"
type="text" type="text"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm" class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }" :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }"
> >
<p <p
@ -36,20 +33,20 @@
</p> </p>
</div> </div>
</div> </div>
<div class="sm:grid sm:grid-cols-3 py-4 items-center"> <div class="items-center py-4 sm:grid sm:grid-cols-3">
<label <label
for="date" for="date"
class="block text-sm font-medium text-gray-700 sm:mt-px" class="block text-sm font-medium text-gray-700 sm:mt-px"
> >
Data Data
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<FlatPickr <FlatPickr
id="date" id="date"
v-model="form.date" v-model="form.date"
placeholder="Wybierz datę" placeholder="Wybierz datę"
:config="{minDate, maxDate}" :config="{minDate, maxDate}"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm" class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.date, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.date }" :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.date, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.date }"
/> />
<p <p
@ -64,14 +61,14 @@
<div class="space-x-3"> <div class="space-x-3">
<InertiaLink <InertiaLink
href="/holidays" href="/holidays"
class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500" class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
> >
Anuluj Anuluj
</InertiaLink> </InertiaLink>
<button <button
type="submit" type="submit"
:disabled="form.processing" :disabled="form.processing"
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" class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
> >
Zapisz Zapisz
</button> </button>

23
resources/js/Pages/Holidays/Edit.vue
View File

@ -2,30 +2,27 @@
<InertiaHead title="Edytuj dzień wolny" /> <InertiaHead title="Edytuj dzień wolny" />
<div class="bg-white shadow-md"> <div class="bg-white shadow-md">
<div class="p-4 sm:px-6"> <div class="p-4 sm:px-6">
<h2 class="text-lg leading-6 font-medium text-gray-900"> <h2 class="text-lg font-medium leading-6 text-gray-900">
Edytuj dzień wolny Edytuj dzień wolny
</h2> </h2>
<p class="mt-1 text-sm text-gray-500">
Użytkownik nie będzie miał możliwości wzięcia urlopu w dzień wolny.
</p>
</div> </div>
<form <form
class="border-t border-gray-200 px-6" class="px-6 border-t border-gray-200"
@submit.prevent="editHoliday" @submit.prevent="editHoliday"
> >
<div class="sm:grid sm:grid-cols-3 py-4 items-center"> <div class="items-center py-4 sm:grid sm:grid-cols-3">
<label <label
for="name" for="name"
class="block text-sm font-medium text-gray-700 sm:mt-px" class="block text-sm font-medium text-gray-700 sm:mt-px"
> >
Nazwa Nazwa
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<input <input
id="name" id="name"
v-model="form.name" v-model="form.name"
type="text" type="text"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm" class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }" :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }"
> >
<p <p
@ -36,19 +33,19 @@
</p> </p>
</div> </div>
</div> </div>
<div class="sm:grid sm:grid-cols-3 py-4 items-center"> <div class="items-center py-4 sm:grid sm:grid-cols-3">
<label <label
for="date" for="date"
class="block text-sm font-medium text-gray-700 sm:mt-px" class="block text-sm font-medium text-gray-700 sm:mt-px"
> >
Data Data
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<FlatPickr <FlatPickr
id="date" id="date"
v-model="form.date" v-model="form.date"
placeholder="Wybierz datę" placeholder="Wybierz datę"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm" class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.date, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.date }" :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.date, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.date }"
/> />
<p <p
@ -63,14 +60,14 @@
<div class="space-x-3"> <div class="space-x-3">
<InertiaLink <InertiaLink
href="/holidays" href="/holidays"
class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500" class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
> >
Anuluj Anuluj
</InertiaLink> </InertiaLink>
<button <button
type="submit" type="submit"
:disabled="form.processing" :disabled="form.processing"
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" class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
> >
Zapisz Zapisz
</button> </button>

41
resources/js/Pages/Holidays/Index.vue
View File

@ -3,48 +3,45 @@
<div class="bg-white shadow-md"> <div class="bg-white shadow-md">
<div class="flex justify-between items-center p-4 sm:px-6"> <div class="flex justify-between items-center p-4 sm:px-6">
<div> <div>
<h2 class="text-lg leading-6 font-medium text-gray-900"> <h2 class="text-lg font-medium leading-6 text-gray-900">
Dni wolne od pracy Dni wolne od pracy
</h2> </h2>
<p class="mt-1 text-sm text-gray-500">
Lista dni wolnych od pracy w danym roku
</p>
</div> </div>
<div v-if="can.manageHolidays"> <div v-if="can.manageHolidays">
<InertiaLink <InertiaLink
href="holidays/create" href="holidays/create"
class="inline-flex items-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500" class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
> >
Dodaj dzień wolny Dodaj dzień
</InertiaLink> </InertiaLink>
</div> </div>
</div> </div>
<div class="border-t border-gray-200"> <div class="border-t border-gray-200">
<div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible"> <div class="overflow-auto xl:overflow-visible">
<table class="min-w-full divide-y divide-gray-200"> <table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50"> <thead class="bg-gray-50">
<tr> <tr>
<th <th
scope="col" scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider" class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
> >
Nazwa Nazwa
</th> </th>
<th <th
scope="col" scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider" class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
> >
Data Data
</th> </th>
<th <th
scope="col" scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider" class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
> >
Dzień tygodnia Dzień tygodnia
</th> </th>
<th <th
scope="col" scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider" class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
/> />
</tr> </tr>
</thead> </thead>
@ -54,24 +51,24 @@
:key="holiday.id" :key="holiday.id"
class="hover:bg-blumilk-25" class="hover:bg-blumilk-25"
> >
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 font-semibold capitalize"> <td class="p-4 text-sm font-semibold text-gray-500 capitalize whitespace-nowrap">
{{ holiday.name }} {{ holiday.name }}
</td> </td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500"> <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
{{ holiday.displayDate }} {{ holiday.displayDate }}
</td> </td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500"> <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
{{ holiday.dayOfWeek }} {{ holiday.dayOfWeek }}
</td> </td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 text-right"> <td class="p-4 text-sm text-right text-gray-500 whitespace-nowrap">
<Menu <Menu
v-if="can.manageHolidays" v-if="can.manageHolidays"
as="div" as="div"
class="relative inline-block text-left" class="inline-block relative text-left"
> >
<MenuButton class="rounded-full flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blumilk-500"> <MenuButton class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100">
<DotsVerticalIcon <DotsVerticalIcon
class="h-5 w-5" class="w-5 h-5"
aria-hidden="true" aria-hidden="true"
/> />
</MenuButton> </MenuButton>
@ -84,7 +81,7 @@
leave-from-class="transform opacity-100 scale-100" leave-from-class="transform opacity-100 scale-100"
leave-to-class="transform opacity-0 scale-95" leave-to-class="transform opacity-0 scale-95"
> >
<MenuItems class="origin-top-right absolute right-0 mt-2 w-56 z-10 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"> <MenuItems class="absolute right-0 z-10 mt-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right">
<div class="py-1"> <div class="py-1">
<MenuItem <MenuItem
v-slot="{ active }" v-slot="{ active }"
@ -94,7 +91,7 @@
:href="`/holidays/${holiday.id}/edit`" :href="`/holidays/${holiday.id}/edit`"
:class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']" :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']"
> >
<PencilIcon class="mr-2 h-5 w-5 text-blue-500" /> Edytuj <PencilIcon class="mr-2 w-5 h-5 text-blue-500" /> Edytuj
</InertiaLink> </InertiaLink>
</MenuItem> </MenuItem>
<MenuItem <MenuItem
@ -108,7 +105,7 @@
:href="`/holidays/${holiday.id}`" :href="`/holidays/${holiday.id}`"
:class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']" :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
> >
<TrashIcon class="mr-2 h-5 w-5 text-red-500" /> Usuń <TrashIcon class="mr-2 w-5 h-5 text-red-500" /> Usuń
</InertiaLink> </InertiaLink>
</MenuItem> </MenuItem>
</div> </div>
@ -120,7 +117,7 @@
<tr v-if="!holidays.data.length"> <tr v-if="!holidays.data.length">
<td <td
colspan="100%" colspan="100%"
class="text-center py-4 text-xl leading-5 text-gray-700" class="py-4 text-xl leading-5 text-center text-gray-700"
> >
Brak danych Brak danych
</td> </td>

22
resources/js/Pages/Login.vue
View File

@ -10,23 +10,23 @@
> >
<div <div
v-if="errors.oauth" v-if="errors.oauth"
class="absolute inset-x-2 top-2 sm:mx-auto sm:w-full sm:max-w-md bg-red-500 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden" class="overflow-hidden absolute inset-x-2 top-2 bg-red-500 rounded-lg ring-1 ring-black ring-opacity-5 shadow-lg pointer-events-auto sm:mx-auto sm:w-full sm:max-w-md"
> >
<div class="p-4"> <div class="p-4">
<div class="flex items-center"> <div class="flex items-center">
<div class="w-0 flex-1 flex justify-between"> <div class="flex flex-1 justify-between w-0">
<ExclamationIcon class="h-5 w-5 mr-1 text-white" /> <ExclamationIcon class="mr-1 w-5 h-5 text-white" />
<p class="w-0 flex-1 text-sm font-medium text-white"> <p class="flex-1 w-0 text-sm font-medium text-white">
{{ errors.oauth }} {{ errors.oauth }}
</p> </p>
</div> </div>
<div class="ml-4 flex-shrink-0 flex"> <div class="flex shrink-0 ml-4">
<button <button
class="bg-red-500 rounded-md inline-flex text-red-100 hover:text-red-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600" class="inline-flex text-red-100 hover:text-red-400 bg-red-500 rounded-md focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-offset-2"
@click="delete errors.oauth" @click="delete errors.oauth"
> >
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<XIcon class="h-5 w-5" /> <XIcon class="w-5 h-5" />
</button> </button>
</div> </div>
</div> </div>
@ -34,20 +34,20 @@
</div> </div>
</transition> </transition>
<div <div
class="sm:mx-auto sm:w-full sm:max-w-md text-white space-y-4 flex flex-col items-center rounded-lg px-4 py-8" class="flex flex-col items-center py-8 px-4 space-y-4 text-white rounded-lg sm:mx-auto sm:w-full sm:max-w-md"
dusk="login-link" dusk="login-link"
> >
<img <img
class="mx-auto h-50 w-auto" class="mx-auto w-auto h-50"
src="img/logo.png" src="img/logo.png"
> >
<a <a
href="/login/google/start" href="/login/google/start"
class="inline-flex justify-center items-center py-2 px-6 rounded-md shadow-sm bg-blumilk-500 text-md font-medium text-white hover:bg-blumilk-700" class="inline-flex justify-center items-center py-2 px-6 font-medium text-white bg-blumilk-500 hover:bg-blumilk-700 rounded-md shadow-sm text-md"
> >
Zaloguj się za pomocą Google Zaloguj się za pomocą Google
<svg <svg
class="w-5 h-5 ml-2" class="ml-2 w-5 h-5"
fill="currentColor" fill="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
> >

20
resources/js/Pages/MonthlyUsage.vue
View File

@ -3,23 +3,23 @@
<div class="bg-white shadow-md"> <div class="bg-white shadow-md">
<div class="flex justify-between items-center p-4 sm:px-6"> <div class="flex justify-between items-center p-4 sm:px-6">
<div class="flex items-center"> <div class="flex items-center">
<h2 class="text-lg leading-6 font-medium text-gray-900"> <h2 class="text-lg font-medium leading-6 text-gray-900">
Wykorzystanie miesięczne urlopu wypoczynkowego Wykorzystanie miesięczne urlopu wypoczynkowego
</h2> </h2>
</div> </div>
</div> </div>
<div class="border-t border-gray-200"> <div class="border-t border-gray-200">
<div class="overflow-x-auto xl:overflow-x-visible overflow-y-hidden"> <div class="overflow-x-auto overflow-y-hidden xl:overflow-x-visible">
<table class="min-w-full divide-y divide-gray-200"> <table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50"> <thead class="bg-gray-50">
<tr> <tr>
<th class="w-64 px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider text-left"> <th class="py-3 px-6 w-64 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase">
Pracownik Pracownik
</th> </th>
<th <th
v-for="month in months" v-for="month in months"
:key="month" :key="month"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider text-center" class="py-3 px-6 text-xs font-semibold tracking-wider text-center text-gray-500 uppercase"
:class="{'bg-blumilk-50': isCurrentMonth(month)}" :class="{'bg-blumilk-50': isCurrentMonth(month)}"
style="min-width: 46px;" style="min-width: 46px;"
> >
@ -27,7 +27,7 @@
{{ month.shortcut }} {{ month.shortcut }}
</span> </span>
</th> </th>
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider text-center"> <th class="py-3 px-6 text-xs font-semibold tracking-wider text-center text-gray-500 uppercase">
Wykorzystanie urlopu Wykorzystanie urlopu
</th> </th>
</tr> </tr>
@ -38,11 +38,11 @@
:key="item.user.id" :key="item.user.id"
class="hover:bg-blumilk-25" class="hover:bg-blumilk-25"
> >
<th class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 font-semibold capitalize"> <th class="p-4 text-sm font-semibold text-gray-500 capitalize whitespace-nowrap">
<div class="flex justify-start items-center"> <div class="flex justify-start items-center">
<span class="inline-flex items-center justify-center h-10 w-10 rounded-full"> <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
<img <img
class="h-10 w-10 rounded-full" class="w-10 h-10 rounded-full"
:src="item.user.avatar" :src="item.user.avatar"
> >
</span> </span>
@ -58,12 +58,12 @@
<td <td
v-for="month in months" v-for="month in months"
:key="month.value" :key="month.value"
class="px-4 py-4 text-sm text-gray-500 font-semibold text-center" class="p-4 text-sm font-semibold text-center text-gray-500"
:class="{'bg-blumilk-25': isCurrentMonth(month)}" :class="{'bg-blumilk-25': isCurrentMonth(month)}"
> >
{{ item.months[month.value] ?? '-' }} {{ item.months[month.value] ?? '-' }}
</td> </td>
<td class="px-4 py-4 text-sm text-gray-500 font-semibold text-center"> <td class="p-4 text-sm font-semibold text-center text-gray-500">
<div style="min-width: 300px;"> <div style="min-width: 300px;">
<VacationBar :stats="{ used: item.stats.used, pending: item.stats.pending, remaining: item.stats.remaining }" /> <VacationBar :stats="{ used: item.stats.used, pending: item.stats.pending, remaining: item.stats.remaining }" />
</div> </div>

71
resources/js/Pages/Users/Create.vue
View File

@ -2,30 +2,27 @@
<InertiaHead title="Dodawanie użytkownika" /> <InertiaHead title="Dodawanie użytkownika" />
<div class="bg-white shadow-md"> <div class="bg-white shadow-md">
<div class="p-4 sm:px-6"> <div class="p-4 sm:px-6">
<h2 class="text-lg leading-6 font-medium text-gray-900"> <h2 class="text-lg font-medium leading-6 text-gray-900">
Dodaj użytkownika Dodaj użytkownika
</h2> </h2>
<p class="mt-1 text-sm text-gray-500">
Tylko dodani użytkownicy będą mogli zalogować się do aplikacji.
</p>
</div> </div>
<form <form
class="border-t border-gray-200 px-6" class="px-6 border-t border-gray-200"
@submit.prevent="createUser" @submit.prevent="createUser"
> >
<div class="sm:grid sm:grid-cols-3 py-4 items-center"> <div class="items-center py-4 sm:grid sm:grid-cols-3">
<label <label
for="firstName" for="firstName"
class="block text-sm font-medium text-gray-700 sm:mt-px" class="block text-sm font-medium text-gray-700 sm:mt-px"
> >
Imię Imię
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<input <input
id="firstName" id="firstName"
v-model="form.firstName" v-model="form.firstName"
type="text" type="text"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm" class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.firstName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.firstName }" :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.firstName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.firstName }"
> >
<p <p
@ -36,19 +33,19 @@
</p> </p>
</div> </div>
</div> </div>
<div class="sm:grid sm:grid-cols-3 py-4 items-center"> <div class="items-center py-4 sm:grid sm:grid-cols-3">
<label <label
for="lastName" for="lastName"
class="block text-sm font-medium text-gray-700 sm:mt-px" class="block text-sm font-medium text-gray-700 sm:mt-px"
> >
Nazwisko Nazwisko
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<input <input
id="lastName" id="lastName"
v-model="form.lastName" v-model="form.lastName"
type="text" type="text"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm" class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.lastName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.lastName }" :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.lastName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.lastName }"
> >
<p <p
@ -59,19 +56,19 @@
</p> </p>
</div> </div>
</div> </div>
<div class="sm:grid sm:grid-cols-3 py-4 items-center"> <div class="items-center py-4 sm:grid sm:grid-cols-3">
<label <label
for="email" for="email"
class="block text-sm font-medium text-gray-700 sm:mt-px" class="block text-sm font-medium text-gray-700 sm:mt-px"
> >
Adres e-mail Adres e-mail
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<input <input
id="email" id="email"
v-model="form.email" v-model="form.email"
type="email" type="email"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm" class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.email, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.email }" :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.email, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.email }"
> >
<p <p
@ -82,19 +79,19 @@
</p> </p>
</div> </div>
</div> </div>
<div class="sm:grid sm:grid-cols-3 py-4 items-center"> <div class="items-center py-4 sm:grid sm:grid-cols-3">
<label <label
for="position" for="position"
class="block text-sm font-medium text-gray-700 sm:mt-px" class="block text-sm font-medium text-gray-700 sm:mt-px"
> >
Stanowisko Stanowisko
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<input <input
id="position" id="position"
v-model="form.position" v-model="form.position"
type="text" type="text"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm" class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.position, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.position }" :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.position, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.position }"
> >
<p <p
@ -108,19 +105,19 @@
<Listbox <Listbox
v-model="form.role" v-model="form.role"
as="div" as="div"
class="sm:grid sm:grid-cols-3 py-4 items-center" class="items-center py-4 sm:grid sm:grid-cols-3"
> >
<ListboxLabel class="block text-sm font-medium text-gray-700"> <ListboxLabel class="block text-sm font-medium text-gray-700">
Rola Rola
</ListboxLabel> </ListboxLabel>
<div class="mt-1 relative sm:mt-0 sm:col-span-2"> <div class="relative mt-1 sm:col-span-2 sm:mt-0">
<ListboxButton <ListboxButton
class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1" class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }" :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.role, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.role }"
> >
<span class="block truncate">{{ form.role.label }}</span> <span class="block truncate">{{ form.role.label }}</span>
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"> <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
<SelectorIcon class="h-5 w-5 text-gray-400" /> <SelectorIcon class="w-5 h-5 text-gray-400" />
</span> </span>
</ListboxButton> </ListboxButton>
<transition <transition
@ -128,7 +125,7 @@
leave-from-class="opacity-100" leave-from-class="opacity-100"
leave-to-class="opacity-0" leave-to-class="opacity-0"
> >
<ListboxOptions class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"> <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">
<ListboxOption <ListboxOption
v-for="role in roles" v-for="role in roles"
:key="role.value" :key="role.value"
@ -145,7 +142,7 @@
v-if="selected" v-if="selected"
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']" :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
> >
<CheckIcon class="h-5 w-5" /> <CheckIcon class="w-5 h-5" />
</span> </span>
</li> </li>
</ListboxOption> </ListboxOption>
@ -162,19 +159,19 @@
<Listbox <Listbox
v-model="form.employmentForm" v-model="form.employmentForm"
as="div" as="div"
class="sm:grid sm:grid-cols-3 py-4 items-center" class="items-center py-4 sm:grid sm:grid-cols-3"
> >
<ListboxLabel class="block text-sm font-medium text-gray-700"> <ListboxLabel class="block text-sm font-medium text-gray-700">
Forma zatrudnienia Forma zatrudnienia
</ListboxLabel> </ListboxLabel>
<div class="mt-1 relative sm:mt-0 sm:col-span-2"> <div class="relative mt-1 sm:col-span-2 sm:mt-0">
<ListboxButton <ListboxButton
class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1" class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }" :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }"
> >
<span class="block truncate">{{ form.employmentForm.label }}</span> <span class="block truncate">{{ form.employmentForm.label }}</span>
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"> <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
<SelectorIcon class="h-5 w-5 text-gray-400" /> <SelectorIcon class="w-5 h-5 text-gray-400" />
</span> </span>
</ListboxButton> </ListboxButton>
@ -183,7 +180,7 @@
leave-from-class="opacity-100" leave-from-class="opacity-100"
leave-to-class="opacity-0" leave-to-class="opacity-0"
> >
<ListboxOptions class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"> <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">
<ListboxOption <ListboxOption
v-for="employmentForm in employmentForms" v-for="employmentForm in employmentForms"
:key="employmentForm.value" :key="employmentForm.value"
@ -200,7 +197,7 @@
v-if="selected" v-if="selected"
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']" :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
> >
<CheckIcon class="h-5 w-5" /> <CheckIcon class="w-5 h-5" />
</span> </span>
</li> </li>
</ListboxOption> </ListboxOption>
@ -214,19 +211,19 @@
</p> </p>
</div> </div>
</Listbox> </Listbox>
<div class="sm:grid sm:grid-cols-3 py-4 items-center"> <div class="items-center py-4 sm:grid sm:grid-cols-3">
<label <label
for="employment_date" for="employment_date"
class="block text-sm font-medium text-gray-700 sm:mt-px" class="block text-sm font-medium text-gray-700 sm:mt-px"
> >
Data zatrudnienia Data zatrudnienia
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<FlatPickr <FlatPickr
id="employment_date" id="employment_date"
v-model="form.employmentDate" v-model="form.employmentDate"
placeholder="Wybierz datę" placeholder="Wybierz datę"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm" class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentDate, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentDate }" :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentDate, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentDate }"
/> />
<p <p
@ -241,14 +238,14 @@
<div class="space-x-3"> <div class="space-x-3">
<InertiaLink <InertiaLink
href="/users" href="/users"
class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500" class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
> >
Anuluj Anuluj
</InertiaLink> </InertiaLink>
<button <button
type="submit" type="submit"
:disabled="form.processing" :disabled="form.processing"
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" class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
> >
Zapisz Zapisz
</button> </button>

69
resources/js/Pages/Users/Edit.vue
View File

@ -2,30 +2,27 @@
<InertiaHead title="Edycja użytkownika" /> <InertiaHead title="Edycja użytkownika" />
<div class="bg-white shadow-md"> <div class="bg-white shadow-md">
<div class="p-4 sm:px-6"> <div class="p-4 sm:px-6">
<h2 class="text-lg leading-6 font-medium text-gray-900"> <h2 class="text-lg font-medium leading-6 text-gray-900">
Edytuj użytkownika Edytuj użytkownika
</h2> </h2>
<p class="mt-1 text-sm text-gray-500">
Edytuj dane użytkownika, takie jak e-mail czy formę zatrudnienia.
</p>
</div> </div>
<form <form
class="border-t border-gray-200 px-6" class="px-6 border-t border-gray-200"
@submit.prevent="editUser" @submit.prevent="editUser"
> >
<div class="sm:grid sm:grid-cols-3 py-4 items-center"> <div class="items-center py-4 sm:grid sm:grid-cols-3">
<label <label
for="firstName" for="firstName"
class="block text-sm font-medium text-gray-700 sm:mt-px" class="block text-sm font-medium text-gray-700 sm:mt-px"
> >
Imię Imię
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<input <input
id="firstName" id="firstName"
v-model="form.firstName" v-model="form.firstName"
type="text" type="text"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm" class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.firstName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.firstName }" :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.firstName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.firstName }"
> >
<p <p
@ -36,19 +33,19 @@
</p> </p>
</div> </div>
</div> </div>
<div class="sm:grid sm:grid-cols-3 py-4 items-center"> <div class="items-center py-4 sm:grid sm:grid-cols-3">
<label <label
for="lastName" for="lastName"
class="block text-sm font-medium text-gray-700 sm:mt-px" class="block text-sm font-medium text-gray-700 sm:mt-px"
> >
Nazwisko Nazwisko
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<input <input
id="lastName" id="lastName"
v-model="form.lastName" v-model="form.lastName"
type="text" type="text"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm" class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.lastName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.lastName }" :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.lastName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.lastName }"
> >
<p <p
@ -59,19 +56,19 @@
</p> </p>
</div> </div>
</div> </div>
<div class="sm:grid sm:grid-cols-3 py-4 items-center"> <div class="items-center py-4 sm:grid sm:grid-cols-3">
<label <label
for="email" for="email"
class="block text-sm font-medium text-gray-700 sm:mt-px" class="block text-sm font-medium text-gray-700 sm:mt-px"
> >
Adres e-mail Adres e-mail
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<input <input
id="email" id="email"
v-model="form.email" v-model="form.email"
type="email" type="email"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm" class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.email, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.email }" :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.email, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.email }"
> >
<p <p
@ -82,19 +79,19 @@
</p> </p>
</div> </div>
</div> </div>
<div class="sm:grid sm:grid-cols-3 py-4 items-center"> <div class="items-center py-4 sm:grid sm:grid-cols-3">
<label <label
for="position" for="position"
class="block text-sm font-medium text-gray-700 sm:mt-px" class="block text-sm font-medium text-gray-700 sm:mt-px"
> >
Stanowisko Stanowisko
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<input <input
id="position" id="position"
v-model="form.position" v-model="form.position"
type="text" type="text"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm" class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.position, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.position }" :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.position, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.position }"
> >
<p <p
@ -108,19 +105,19 @@
<Listbox <Listbox
v-model="form.role" v-model="form.role"
as="div" as="div"
class="sm:grid sm:grid-cols-3 py-4 items-center" class="items-center py-4 sm:grid sm:grid-cols-3"
> >
<ListboxLabel class="block text-sm font-medium text-gray-700"> <ListboxLabel class="block text-sm font-medium text-gray-700">
Rola Rola
</ListboxLabel> </ListboxLabel>
<div class="mt-1 relative sm:mt-0 sm:col-span-2"> <div class="relative mt-1 sm:col-span-2 sm:mt-0">
<ListboxButton <ListboxButton
class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1" class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }" :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }"
> >
<span class="block truncate">{{ form.role.label }}</span> <span class="block truncate">{{ form.role.label }}</span>
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"> <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
<SelectorIcon class="h-5 w-5 text-gray-400" /> <SelectorIcon class="w-5 h-5 text-gray-400" />
</span> </span>
</ListboxButton> </ListboxButton>
<transition <transition
@ -129,7 +126,7 @@
leave-to-class="opacity-0" leave-to-class="opacity-0"
> >
<ListboxOptions <ListboxOptions
class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" 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"
> >
<ListboxOption <ListboxOption
v-for="role in roles" v-for="role in roles"
@ -149,7 +146,7 @@
v-if="selected" v-if="selected"
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']" :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
> >
<CheckIcon class="h-5 w-5" /> <CheckIcon class="w-5 h-5" />
</span> </span>
</li> </li>
</ListboxOption> </ListboxOption>
@ -166,19 +163,19 @@
<Listbox <Listbox
v-model="form.employmentForm" v-model="form.employmentForm"
as="div" as="div"
class="sm:grid sm:grid-cols-3 py-4 items-center" class="items-center py-4 sm:grid sm:grid-cols-3"
> >
<ListboxLabel class="block text-sm font-medium text-gray-700"> <ListboxLabel class="block text-sm font-medium text-gray-700">
Forma zatrudnienia Forma zatrudnienia
</ListboxLabel> </ListboxLabel>
<div class="mt-1 relative sm:mt-0 sm:col-span-2"> <div class="relative mt-1 sm:col-span-2 sm:mt-0">
<ListboxButton <ListboxButton
class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1" class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }" :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }"
> >
<span class="block truncate">{{ form.employmentForm.label }}</span> <span class="block truncate">{{ form.employmentForm.label }}</span>
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"> <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
<SelectorIcon class="h-5 w-5 text-gray-400" /> <SelectorIcon class="w-5 h-5 text-gray-400" />
</span> </span>
</ListboxButton> </ListboxButton>
<transition <transition
@ -187,7 +184,7 @@
leave-to-class="opacity-0" leave-to-class="opacity-0"
> >
<ListboxOptions <ListboxOptions
class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" 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"
> >
<ListboxOption <ListboxOption
v-for="employmentForm in employmentForms" v-for="employmentForm in employmentForms"
@ -207,7 +204,7 @@
v-if="selected" v-if="selected"
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']" :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
> >
<CheckIcon class="h-5 w-5" /> <CheckIcon class="w-5 h-5" />
</span> </span>
</li> </li>
</ListboxOption> </ListboxOption>
@ -221,19 +218,19 @@
</p> </p>
</div> </div>
</Listbox> </Listbox>
<div class="sm:grid sm:grid-cols-3 py-4 items-center"> <div class="items-center py-4 sm:grid sm:grid-cols-3">
<label <label
for="employment_date" for="employment_date"
class="block text-sm font-medium text-gray-700 sm:mt-px" class="block text-sm font-medium text-gray-700 sm:mt-px"
> >
Data zatrudnienia Data zatrudnienia
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<FlatPickr <FlatPickr
id="employment_date" id="employment_date"
v-model="form.employmentDate" v-model="form.employmentDate"
placeholder="Wybierz datę" placeholder="Wybierz datę"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm" class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentDate, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentDate }" :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentDate, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentDate }"
/> />
<p <p
@ -248,14 +245,14 @@
<div class="space-x-3"> <div class="space-x-3">
<InertiaLink <InertiaLink
href="/users" href="/users"
class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500" class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
> >
Anuluj Anuluj
</InertiaLink> </InertiaLink>
<button <button
type="submit" type="submit"
:disabled="form.processing" :disabled="form.processing"
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" class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
> >
Zapisz Zapisz
</button> </button>

69
resources/js/Pages/Users/Index.vue
View File

@ -3,73 +3,70 @@
<div class="bg-white shadow-md"> <div class="bg-white shadow-md">
<div class="flex justify-between items-center p-4 sm:px-6"> <div class="flex justify-between items-center p-4 sm:px-6">
<div> <div>
<h2 class="text-lg leading-6 font-medium text-gray-900"> <h2 class="text-lg font-medium leading-6 text-gray-900">
Użytkownicy w organizacji Użytkownicy
</h2> </h2>
<p class="mt-1 text-sm text-gray-500">
Lista użytkowników w organizacji.
</p>
</div> </div>
<div> <div>
<InertiaLink <InertiaLink
href="users/create" href="users/create"
class="inline-flex items-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500" class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-center text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
> >
Dodaj użytkownika Dodaj użytkownika
</InertiaLink> </InertiaLink>
</div> </div>
</div> </div>
<div class="border-t border-gray-200"> <div class="border-t border-gray-200">
<div class="px-4 py-3"> <div class="py-3 px-4">
<div class="relative max-w-md"> <div class="relative max-w-md">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
<SearchIcon class="h-5 w-5 text-gray-400" /> <SearchIcon class="w-5 h-5 text-gray-400" />
</div> </div>
<input <input
v-model.trim="search" v-model.trim="search"
type="search" type="search"
class="block w-full bg-white border border-gray-300 rounded-md py-2 pl-10 pr-3 text-sm placeholder-gray-500 focus:outline-none focus:text-gray-900 focus:placeholder-gray-400 focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm mt-1" class="block py-2 pr-3 pl-10 mt-1 w-full text-sm placeholder:text-gray-500 focus:text-gray-900 focus:placeholder:text-gray-400 bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 sm:text-sm"
placeholder="Szukaj" placeholder="Szukaj"
> >
</div> </div>
</div> </div>
<div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible"> <div class="overflow-auto xl:overflow-visible">
<table class="min-w-full divide-y divide-gray-200"> <table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50"> <thead class="bg-gray-50">
<tr> <tr>
<th <th
scope="col" scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider" class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
> >
Imię i nazwisko Imię i nazwisko
</th> </th>
<th <th
scope="col" scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider" class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
> >
Rola Rola
</th> </th>
<th <th
scope="col" scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider" class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
> >
Stanowisko Stanowisko
</th> </th>
<th <th
scope="col" scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider" class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
> >
Forma zatrudnienia Forma zatrudnienia
</th> </th>
<th <th
scope="col" scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider" class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
> >
Data rozpoczęcia Data rozpoczęcia
</th> </th>
<th <th
scope="col" scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider" class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
/> />
</tr> </tr>
</thead> </thead>
@ -79,43 +76,43 @@
:key="user.id" :key="user.id"
:class="{ 'bg-red-50': user.deleted, 'hover:bg-blumilk-25': !user.deleted }" :class="{ 'bg-red-50': user.deleted, 'hover:bg-blumilk-25': !user.deleted }"
> >
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500"> <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<div class="flex"> <div class="flex">
<span class="inline-flex items-center justify-center h-10 w-10 rounded-full"> <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
<img <img
class="h-10 w-10 rounded-full" class="w-10 h-10 rounded-full"
:src="user.avatar" :src="user.avatar"
> >
</span> </span>
<div class="ml-3"> <div class="ml-3">
<p class="text-sm font-medium break-all text-gray-900"> <p class="text-sm font-medium text-gray-900 break-all">
{{ user.name }} {{ user.name }}
</p> </p>
<p class="text-sm break-all text-gray-500"> <p class="text-sm text-gray-500 break-all">
{{ user.email }} {{ user.email }}
</p> </p>
</div> </div>
</div> </div>
</td> </td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500"> <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
{{ user.role }} {{ user.role }}
</td> </td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500"> <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
{{ user.position }} {{ user.position }}
</td> </td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500"> <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
{{ user.employmentForm }} {{ user.employmentForm }}
</td> </td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500"> <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
{{ user.employmentDate }} {{ user.employmentDate }}
</td> </td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 text-right"> <td class="p-4 text-sm text-right text-gray-500 whitespace-nowrap">
<Menu <Menu
as="div" as="div"
class="relative inline-block text-left" class="inline-block relative text-left"
> >
<MenuButton class="rounded-full flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blumilk-500"> <MenuButton class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100">
<DotsVerticalIcon class="h-5 w-5" /> <DotsVerticalIcon class="w-5 h-5" />
</MenuButton> </MenuButton>
<transition <transition
@ -126,7 +123,7 @@
leave-from-class="transform opacity-100 scale-100" leave-from-class="transform opacity-100 scale-100"
leave-to-class="transform opacity-0 scale-95" leave-to-class="transform opacity-0 scale-95"
> >
<MenuItems class="origin-top-right absolute right-0 mt-2 w-56 z-10 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"> <MenuItems class="absolute right-0 z-10 mt-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right">
<div <div
v-if="!user.deleted" v-if="!user.deleted"
class="py-1" class="py-1"
@ -139,7 +136,7 @@
:href="`/users/${user.id}/edit`" :href="`/users/${user.id}/edit`"
:class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']" :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']"
> >
<PencilIcon class="mr-2 h-5 w-5 text-blue-500" /> Edytuj <PencilIcon class="mr-2 w-5 h-5 text-blue-500" /> Edytuj
</InertiaLink> </InertiaLink>
</MenuItem> </MenuItem>
<MenuItem <MenuItem
@ -153,7 +150,7 @@
:href="`/users/${user.id}`" :href="`/users/${user.id}`"
:class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']" :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
> >
<TrashIcon class="mr-2 h-5 w-5 text-red-500" /> Usuń <TrashIcon class="mr-2 w-5 h-5 text-red-500" /> Usuń
</InertiaLink> </InertiaLink>
</MenuItem> </MenuItem>
</div> </div>
@ -172,7 +169,7 @@
:href="`/users/${user.id}/restore`" :href="`/users/${user.id}/restore`"
:class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']" :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
> >
<RefreshIcon class="mr-2 h-5 w-5 text-green-500" /> Przywróć <RefreshIcon class="mr-2 w-5 h-5 text-green-500" /> Przywróć
</InertiaLink> </InertiaLink>
</MenuItem> </MenuItem>
</div> </div>
@ -186,15 +183,15 @@
> >
<td <td
colspan="100%" colspan="100%"
class="text-center py-4 text-xl leading-5 text-gray-700" class="py-4 text-xl leading-5 text-center text-gray-700"
> >
Brak danych Brak danych
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<Pagination :pagination="users.meta" />
</div> </div>
<Pagination :pagination="users.meta" />
</div> </div>
</div> </div>
</template> </template>

49
resources/js/Pages/VacationLimits.vue
View File

@ -3,47 +3,44 @@
<div class="bg-white shadow-md"> <div class="bg-white shadow-md">
<div class="flex justify-between items-center p-4 sm:px-6"> <div class="flex justify-between items-center p-4 sm:px-6">
<div> <div>
<h2 class="text-lg leading-6 font-medium text-gray-900"> <h2 class="text-lg font-medium leading-6 text-gray-900">
Dostępne dni urlopu dla użytkowników Dostępne dni urlopu dla użytkowników
</h2> </h2>
<p class="mt-1 text-sm text-gray-500">
Zarządzaj dostępnymi dniami urlopów dla użytkowników.
</p>
</div> </div>
</div> </div>
<div class="border-t border-gray-200"> <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"> <form @submit.prevent="submitVacationDays">
<table class="min-w-full divide-y divide-gray-200 border-b"> <div class="overflow-auto xl:overflow-visible">
<table class="min-w-full border-b divide-y divide-gray-200">
<thead class="bg-gray-50"> <thead class="bg-gray-50">
<tr> <tr>
<th <th
scope="col" scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider" class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
> >
Imię i nazwisko Imię i nazwisko
</th> </th>
<th <th
scope="col" scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider" class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
> >
Forma zatrudnienia Forma zatrudnienia
</th> </th>
<th <th
scope="col" scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider" class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
> >
Posiada urlop? Posiada urlop?
</th> </th>
<th <th
scope="col" scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider" class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
> >
Pozostałe dni z poprzedniego roku Pozostałe dni z poprzedniego roku
</th> </th>
<th <th
scope="col" scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider" class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
> >
Dostępne dni w roku Dostępne dni w roku
</th> </th>
@ -55,28 +52,28 @@
:key="item.id" :key="item.id"
class="hover:bg-blumilk-25" class="hover:bg-blumilk-25"
> >
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500"> <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<div class="flex"> <div class="flex">
<span class="inline-flex items-center justify-center h-10 w-10 rounded-full"> <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
<img <img
class="h-10 w-10 rounded-full" class="w-10 h-10 rounded-full"
:src="item.user.avatar" :src="item.user.avatar"
> >
</span> </span>
<div class="ml-3"> <div class="ml-3">
<p class="text-sm font-medium break-all text-gray-900"> <p class="text-sm font-medium text-gray-900 break-all">
{{ item.user.name }} {{ item.user.name }}
</p> </p>
<p class="text-sm break-all text-gray-500"> <p class="text-sm text-gray-500 break-all">
{{ item.user.email }} {{ item.user.email }}
</p> </p>
</div> </div>
</div> </div>
</td> </td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500"> <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
{{ item.user.employmentForm }} {{ item.user.employmentForm }}
</td> </td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500"> <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<Switch <Switch
v-model="item.hasVacation" 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']" :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']"
@ -86,18 +83,18 @@
/> />
</Switch> </Switch>
</td> </td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500"> <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<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"> <div class="inline-flex items-center py-2 px-4 mt-1 w-full max-w-lg text-gray-500 bg-gray-50 rounded-md border border-gray-300 sm:col-span-2 sm:mt-0 sm:text-sm">
{{ item.remainingLastYear }} {{ item.remainingLastYear }}
</div> </div>
</td> </td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500"> <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<input <input
v-model="item.days" v-model="item.days"
type="number" type="number"
min="0" 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" class="block w-full disabled:text-slate-500 disabled:bg-slate-50 rounded-md disabled:border-slate-200 shadow-sm disabled:shadow-none disabled:cursor-not-allowed sm:text-sm"
:disabled="!item.hasVacation" :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`] }" :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`] }"
> >
@ -113,17 +110,18 @@
<tr v-if="!form.items.length"> <tr v-if="!form.items.length">
<td <td
colspan="100%" colspan="100%"
class="text-center py-4 text-xl leading-5 text-gray-700" class="py-4 text-xl leading-5 text-center text-gray-700"
> >
Brak danych Brak danych
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
<div class="flex justify-end py-3 px-4"> <div class="flex justify-end py-3 px-4">
<button <button
type="submit" 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" class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
> >
Zapisz Zapisz
</button> </button>
@ -131,7 +129,6 @@
</form> </form>
</div> </div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>

127
resources/js/Pages/VacationRequest/Create.vue
View File

@ -1,25 +1,25 @@
<template> <template>
<InertiaHead title="Złóż wniosek urlopowy" /> <InertiaHead title="Złóż wniosek urlopowy" />
<div class="grid grid-cols-1 gap-4 items-start lg:grid-cols-3 lg:gap-8"> <div class="grid grid-cols-1 gap-4 items-start xl:grid-cols-3 xl:gap-8">
<div class="lg:col-span-2 h-full bg-white shadow-md flex flex-col"> <div class="flex flex-col h-full bg-white shadow-md xl:col-span-2">
<div class="p-4 sm:px-6"> <div class="p-4 sm:px-6">
<h2 class="text-lg leading-6 font-medium text-gray-900"> <h2 class="text-lg font-medium leading-6 text-gray-900">
Złóż wniosek urlopowy Złóż wniosek urlopowy
</h2> </h2>
</div> </div>
<form <form
class="border-t border-gray-200 h-full px-6" class="px-6 h-full border-t border-gray-200"
@submit.prevent="createForm" @submit.prevent="createForm"
> >
<div class="h-full flex flex-col justify-around"> <div class="flex flex-col justify-around h-full">
<div> <div>
<div <div
v-if="form.errors.vacationRequest" v-if="form.errors.vacationRequest"
class="rounded-md bg-red-50 p-4 mt-2" class="p-4 mt-2 bg-red-50 rounded-md"
> >
<div class="flex"> <div class="flex">
<div class="flex-shrink-0"> <div class="shrink-0">
<XCircleIcon class="h-5 w-5 text-red-400" /> <XCircleIcon class="w-5 h-5 text-red-400" />
</div> </div>
<div class="ml-3"> <div class="ml-3">
<h3 class="text-sm font-medium text-red-800"> <h3 class="text-sm font-medium text-red-800">
@ -35,25 +35,25 @@
v-if="can.createOnBehalfOfEmployee" v-if="can.createOnBehalfOfEmployee"
v-model="form.user" v-model="form.user"
as="div" as="div"
class="sm:grid sm:grid-cols-3 py-4 items-center" class="items-center py-4 sm:grid sm:grid-cols-3"
> >
<ListboxLabel class="block text-sm font-medium text-gray-700"> <ListboxLabel class="block text-sm font-medium text-gray-700">
Osoba składająca wniosek Osoba składająca wniosek
</ListboxLabel> </ListboxLabel>
<div class="mt-1 relative sm:mt-0 sm:col-span-2"> <div class="relative mt-1 sm:col-span-2 sm:mt-0">
<ListboxButton <ListboxButton
class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1" class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.type, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.type }" :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.user, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.user }"
> >
<span class="flex items-center"> <span class="flex items-center">
<img <img
:src="form.user.avatar" :src="form.user.avatar"
class="flex-shrink-0 h-6 w-6 rounded-full" class="shrink-0 w-6 h-6 rounded-full"
> >
<span class="ml-3 block truncate">{{ form.user.name }}</span> <span class="block ml-3 truncate">{{ form.user.name }}</span>
</span> </span>
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"> <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
<SelectorIcon class="h-5 w-5 text-gray-400" /> <SelectorIcon class="w-5 h-5 text-gray-400" />
</span> </span>
</ListboxButton> </ListboxButton>
@ -63,7 +63,7 @@
leave-to-class="opacity-0" leave-to-class="opacity-0"
> >
<ListboxOptions <ListboxOptions
class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" 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"
> >
<ListboxOption <ListboxOption
v-for="user in users.data" v-for="user in users.data"
@ -77,7 +77,7 @@
<img <img
:src="user.avatar" :src="user.avatar"
alt="" alt=""
class="flex-shrink-0 h-6 w-6 rounded-full" class="shrink-0 w-6 h-6 rounded-full"
> >
<span :class="[selected ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']"> <span :class="[selected ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']">
{{ user.name }} {{ user.name }}
@ -88,7 +88,7 @@
v-if="selected" v-if="selected"
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']" :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
> >
<CheckIcon class="h-5 w-5" /> <CheckIcon class="w-5 h-5" />
</span> </span>
</li> </li>
</ListboxOption> </ListboxOption>
@ -104,7 +104,7 @@
</Listbox> </Listbox>
<div <div
v-else v-else
class="sm:grid sm:grid-cols-3 py-4 items-center" class="items-center py-4 sm:grid sm:grid-cols-3"
> >
<label <label
for="date_from" for="date_from"
@ -112,11 +112,11 @@
> >
Osoba składająca wniosek Osoba składająca wniosek
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<div class="flex justify-start items-center"> <div class="flex justify-start items-center">
<span class="inline-flex items-center justify-center h-10 w-10 rounded-full"> <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
<img <img
class="h-10 w-10 rounded-full" class="w-10 h-10 rounded-full"
:src="auth.user.avatar" :src="auth.user.avatar"
> >
</span> </span>
@ -129,51 +129,46 @@
</div> </div>
</div> </div>
<Listbox <Listbox
v-model="form.type" v-model="form.vacationType"
as="div" as="div"
class="sm:grid sm:grid-cols-3 py-4 items-center" class="items-center py-4 sm:grid sm:grid-cols-3"
> >
<ListboxLabel class="block text-sm font-medium text-gray-700"> <ListboxLabel class="block text-sm font-medium text-gray-700">
Rodzaj wniosku Rodzaj urlopu
</ListboxLabel> </ListboxLabel>
<div class="mt-1 relative sm:mt-0 sm:col-span-2"> <div class="relative mt-1 sm:col-span-2 sm:mt-0">
<ListboxButton <ListboxButton
class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1" class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.type, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.type }" :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.type, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.type }"
> >
<span class="block truncate">{{ form.type.label }}</span> <span class="block truncate">{{ form.vacationType.label }}</span>
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"> <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
<SelectorIcon class="h-5 w-5 text-gray-400" /> <SelectorIcon class="w-5 h-5 text-gray-400" />
</span> </span>
</ListboxButton> </ListboxButton>
<transition <transition
leave-active-class="transition ease-in duration-100" leave-active-class="transition ease-in duration-100"
leave-from-class="opacity-100" leave-from-class="opacity-100"
leave-to-class="opacity-0" leave-to-class="opacity-0"
> >
<ListboxOptions <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="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
>
<ListboxOption <ListboxOption
v-for="type in vacationTypes" v-for="vacationType in vacationTypes"
:key="type.value" :key="vacationType.value"
v-slot="{ active, selected }" v-slot="{ active, selected }"
as="template" as="template"
:value="type" :value="vacationType"
>
<li
:class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
> >
<li :class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
<span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']"> <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
{{ type.label }} {{ vacationType.label }}
</span> </span>
<span <span
v-if="selected" v-if="selected"
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']" :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
> >
<CheckIcon class="h-5 w-5" /> <CheckIcon class="w-5 h-5" />
</span> </span>
</li> </li>
</ListboxOption> </ListboxOption>
@ -187,20 +182,20 @@
</p> </p>
</div> </div>
</Listbox> </Listbox>
<div class="sm:grid sm:grid-cols-3 py-4 items-center"> <div class="items-center py-4 sm:grid sm:grid-cols-3">
<label <label
for="date_from" for="date_from"
class="block text-sm font-medium text-gray-700 sm:mt-px" class="block text-sm font-medium text-gray-700 sm:mt-px"
> >
Planowany urlop od Planowany urlop od
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<FlatPickr <FlatPickr
id="date_from" id="date_from"
v-model="form.from" v-model="form.from"
:config="fromInputConfig" :config="fromInputConfig"
placeholder="Wybierz datę" placeholder="Wybierz datę"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm" class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.from, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.from }" :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.from, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.from }"
@on-change="onFromChange" @on-change="onFromChange"
/> />
@ -212,20 +207,20 @@
</p> </p>
</div> </div>
</div> </div>
<div class="sm:grid sm:grid-cols-3 py-4 items-center"> <div class="items-center py-4 sm:grid sm:grid-cols-3">
<label <label
for="date_from" for="date_from"
class="block text-sm font-medium text-gray-700 sm:mt-px" class="block text-sm font-medium text-gray-700 sm:mt-px"
> >
Planowany urlop do Planowany urlop do
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<FlatPickr <FlatPickr
id="date_to" id="date_to"
v-model="form.to" v-model="form.to"
:config="toInputConfig" :config="toInputConfig"
placeholder="Wybierz datę" placeholder="Wybierz datę"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm" class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.to, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.to }" :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.to, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.to }"
@on-change="onToChange" @on-change="onToChange"
/> />
@ -237,33 +232,33 @@
</p> </p>
</div> </div>
</div> </div>
<div class="sm:grid sm:grid-cols-3 py-4 items-center"> <div class="items-center py-4 sm:grid sm:grid-cols-3">
<span class="block text-sm font-medium text-gray-700 sm:mt-px">Liczba dni urlopu</span> <span class="block text-sm font-medium text-gray-700 sm:mt-px">Liczba dni urlopu</span>
<div <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" class="inline-flex items-center py-2 px-4 mt-1 w-full max-w-lg text-gray-500 bg-gray-50 rounded-md border border-gray-300 sm:col-span-2 sm:mt-0 sm:text-sm"
> >
{{ estimatedDays.length }} {{ estimatedDays.length }}
</div> </div>
</div> </div>
<div class="sm:grid sm:grid-cols-3 py-4 items-center"> <div class="items-center py-4 sm:grid sm:grid-cols-3">
<label <label
for="comment" for="comment"
class="block text-sm font-medium text-gray-700" class="block text-sm font-medium text-gray-700"
> >
Komentarz Komentarz
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-1 sm:col-span-2 sm:mt-0">
<textarea <textarea
id="comment" id="comment"
v-model="form.comment" v-model="form.comment"
rows="4" rows="4"
class="shadow-sm focus:ring-blumilk-500 focus:border-blumilk-500 block w-full max-w-lg sm:text-sm border-gray-300 rounded-md" class="block w-full max-w-lg rounded-md border-gray-300 focus:border-blumilk-500 focus:ring-blumilk-500 shadow-sm sm:text-sm"
/> />
</div> </div>
</div> </div>
<div <div
v-if="can.skipFlow" v-if="can.skipFlow"
class="sm:grid sm:grid-cols-3 py-4 items-center" class="items-center py-4 sm:grid sm:grid-cols-3"
> >
<label <label
for="flowSkipped" for="flowSkipped"
@ -271,7 +266,7 @@
> >
Natychmiastowo zatwierdź wniosek Natychmiastowo zatwierdź wniosek
</label> </label>
<div class="mt-1 sm:mt-0 sm:col-span-2"> <div class="mt-2 sm:col-span-2 sm:mt-0">
<Switch <Switch
id="flowSkipped" id="flowSkipped"
v-model="form.flowSkipped" v-model="form.flowSkipped"
@ -288,14 +283,14 @@
<div class="space-x-3"> <div class="space-x-3">
<InertiaLink <InertiaLink
href="/vacation/requests" href="/vacation/requests"
class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500" class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
> >
Anuluj Anuluj
</InertiaLink> </InertiaLink>
<button <button
type="submit" type="submit"
:disabled="form.processing" :disabled="form.processing"
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" class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
> >
Zapisz Zapisz
</button> </button>
@ -304,9 +299,9 @@
</div> </div>
</form> </form>
</div> </div>
<div class="bg-white shadow-md h-full"> <div class="h-full bg-white shadow-md">
<div class="p-4 sm:px-6"> <div class="p-4 sm:px-6">
<h2 class="text-lg leading-6 font-medium text-gray-900"> <h2 class="text-lg font-medium leading-6 text-gray-900">
<span v-if="auth.user.id !== form.user.id"> <span v-if="auth.user.id !== form.user.id">
Urlop wypoczynkowy, dane dla: {{ form.user.name }} Urlop wypoczynkowy, dane dla: {{ form.user.name }}
</span> </span>
@ -315,7 +310,7 @@
</span> </span>
</h2> </h2>
</div> </div>
<div class="border-t border-gray-200 px-6 pt-8"> <div class="px-6 pt-8 border-t border-gray-200">
<VacationChart :stats="stats" /> <VacationChart :stats="stats" />
</div> </div>
</div> </div>
@ -346,7 +341,7 @@ const form = useForm({
: props.auth.user, : props.auth.user,
from: null, from: null,
to: null, to: null,
type: props.vacationTypes[0], vacationType: props.vacationTypes[0],
comment: null, comment: null,
flowSkipped: false, flowSkipped: false,
}) })
@ -385,7 +380,7 @@ function createForm() {
form form
.transform(data => ({ .transform(data => ({
...data, ...data,
type: data.type.value, type: data.vacationType.value,
user: data.user.id, user: data.user.id,
})) }))
.post('/vacation/requests') .post('/vacation/requests')
@ -418,20 +413,20 @@ function resetForm() {
async function refreshEstimatedDays(from, to) { async function refreshEstimatedDays(from, to) {
if (from && to) { if (from && to) {
const res = await axios.post('/api/calculate-vacation/days', { from, to }) const res = await axios.post('/api/vacation/calculate-days', { from, to })
estimatedDays.value = res.data estimatedDays.value = res.data
} }
} }
async function refreshVacationStats(user) { async function refreshVacationStats(user) {
const res = await axios.post('/api/calculate-vacation/stats', { user: user.id }) const res = await axios.post('/api/vacation/calculate-stats', { user: user.id })
stats.value = res.data stats.value = res.data
} }
async function refreshUnavailableDays(user) { async function refreshUnavailableDays(user) {
const res = await axios.post('/api/calculate-unavailable-days', { user: user.id }) const res = await axios.post('/api/vacation/calculate-unavailable-days', { user: user.id })
const unavailableDays = res.data const unavailableDays = res.data
fromInputConfig.disable = [ fromInputConfig.disable = [

129
resources/js/Pages/VacationRequest/Index.vue
View File

@ -2,27 +2,25 @@
<InertiaHead title="Moje wnioski urlopowe" /> <InertiaHead title="Moje wnioski urlopowe" />
<div class="bg-white shadow-md"> <div class="bg-white shadow-md">
<div class="flex justify-between items-center p-4 sm:px-6"> <div class="flex justify-between items-center p-4 sm:px-6">
<div> <h2 class="text-lg font-medium leading-6 text-gray-900">
<h2 class="text-lg leading-6 font-medium text-gray-900">
Moje wnioski urlopowe Moje wnioski urlopowe
</h2> </h2>
</div>
<div> <div>
<InertiaLink <InertiaLink
href="/vacation/requests/create" href="/vacation/requests/create"
class="inline-flex items-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500" class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
> >
Dodaj wniosek Dodaj wniosek
</InertiaLink> </InertiaLink>
</div> </div>
</div> </div>
<div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible"> <div class="border-t border-gray-200">
<nav class="relative shadow flex divide-x divide-gray-200 border-t border-gray-200"> <div class="hidden relative divide-x divide-gray-200 shadow md:flex">
<InertiaLink <button
v-for="(status, index) in statuses" v-for="(status, index) in statuses"
:key="index" :key="index"
:data="{ status: status.value }"
:class="[status.value === filters.status ? 'text-blumilk-600 font-semibold' : 'hover:bg-blumilk-25 text-gray-700 focus:z-10', 'group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-sm font-medium text-center']" :class="[status.value === filters.status ? 'text-blumilk-600 font-semibold' : 'hover:bg-blumilk-25 text-gray-700 focus:z-10', 'group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-sm font-medium text-center']"
@click="form.status = status"
> >
<span>{{ status.name }}</span> <span>{{ status.name }}</span>
<span <span
@ -31,45 +29,102 @@
> >
{{ stats[status.value] }} {{ stats[status.value] }}
</span> </span>
<span :class="[status.value === filters.status ? 'bg-blumilk-500' : 'bg-transparent', 'absolute inset-x-0 bottom-0 h-0.5']" /> <span
</InertiaLink> :class="[status.value === filters.status ? 'bg-blumilk-500' : 'bg-transparent', 'absolute inset-x-0 bottom-0 h-0.5']"
</nav> />
</button>
</div>
<div class="grid grid-cols-1 gap-2 p-4 md:hidden md:grid-cols-2 md:gap-4">
<Listbox
v-model="form.status"
as="div"
>
<ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
Status
</ListboxLabel>
<div class="relative mt-1 sm:mt-0">
<ListboxButton
class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
>
<span class="flex items-center">
{{ form.status.name }}
</span>
<span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
<SelectorIcon class="w-5 h-5 text-gray-400" />
</span>
</ListboxButton>
<transition
leave-active-class="transition ease-in duration-100"
leave-from-class="opacity-100"
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"
>
<ListboxOption
v-for="status in statuses"
:key="status.value"
v-slot="{ active, selected }"
as="template"
:value="status"
>
<li
:class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default truncate select-none relative py-2 pl-3 pr-9']"
>
{{ status.name }}
<span
v-if="selected"
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
>
<CheckIcon class="w-5 h-5" />
</span>
</li>
</ListboxOption>
</ListboxOptions>
</transition>
</div>
</Listbox>
</div>
</div>
<div class="overflow-auto xl:overflow-visible">
<table class="min-w-full divide-y divide-gray-200"> <table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50"> <thead class="bg-gray-50">
<tr> <tr>
<th <th
scope="col" scope="col"
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider" class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
> >
Numer Numer
</th> </th>
<th <th
scope="col" scope="col"
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider" class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
> >
Rodzaj urlopu Rodzaj urlopu
</th> </th>
<th <th
scope="col" scope="col"
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider" class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
> >
Od Od
</th> </th>
<th <th
scope="col" scope="col"
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider" class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
> >
Do Do
</th> </th>
<th <th
scope="col" scope="col"
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider" class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
> >
Dni urlopu Dni urlopu
</th> </th>
<th <th
scope="col" scope="col"
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider" class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
> >
Status Status
</th> </th>
@ -80,9 +135,9 @@
<tr <tr
v-for="request in requests.data" v-for="request in requests.data"
:key="request.id" :key="request.id"
class="hover:bg-blumilk-25 relative" class="relative hover:bg-blumilk-25"
> >
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500"> <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<InertiaLink <InertiaLink
:href="`/vacation/requests/${request.id}`" :href="`/vacation/requests/${request.id}`"
class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline" class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline"
@ -90,22 +145,22 @@
{{ request.name }} {{ request.name }}
</InertiaLink> </InertiaLink>
</td> </td>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500"> <td class="p-4 text-sm font-medium text-gray-500 whitespace-nowrap">
<VacationType :type="request.type" /> <VacationType :type="request.type" />
</td> </td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500"> <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
{{ request.from }} {{ request.from }}
</td> </td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500"> <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
{{ request.to }} {{ request.to }}
</td> </td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500"> <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
{{ request.days.length }} {{ request.days.length }}
</td> </td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500"> <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<Status :status="request.state" /> <Status :status="request.state" />
</td> </td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500"> <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<InertiaLink <InertiaLink
:href="`/vacation/requests/${request.id}`" :href="`/vacation/requests/${request.id}`"
class="flex justify-around" class="flex justify-around"
@ -121,25 +176,29 @@
<tr v-if="! requests.data.length"> <tr v-if="! requests.data.length">
<td <td
colspan="100%" colspan="100%"
class="text-center py-4 text-xl leading-5 text-gray-700" class="py-4 text-xl leading-5 text-center text-gray-700"
> >
Brak danych Brak danych
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<Pagination :pagination="requests.meta" />
</div> </div>
<Pagination :pagination="requests.meta" />
</div> </div>
</template> </template>
<script setup> <script setup>
import { ChevronRightIcon } from '@heroicons/vue/solid' import { ChevronRightIcon, SelectorIcon, CheckIcon } from '@heroicons/vue/solid'
import Status from '@/Shared/Status' import Status from '@/Shared/Status'
import VacationType from '@/Shared/VacationType' import VacationType from '@/Shared/VacationType'
import Pagination from '@/Shared/Pagination' import Pagination from '@/Shared/Pagination'
import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'
import { reactive, watch } from 'vue'
import { debounce } from 'lodash'
import { Inertia } from '@inertiajs/inertia'
defineProps({ const props = defineProps({
requests: Object, requests: Object,
stats: Object, stats: Object,
filters: Object, filters: Object,
@ -163,4 +222,16 @@ const statuses = [
value: 'failed', value: 'failed',
}, },
] ]
const form = reactive({
status: statuses.find(status => status.value === props.filters.status) ?? statuses[0],
})
watch(form, debounce(() => {
Inertia.get('/vacation/requests/me', { status: form.status.value }, {
preserveState: true,
replace: false,
})
}, 300))
</script> </script>

97
resources/js/Pages/VacationRequest/IndexForApprovers.vue
View File

@ -3,34 +3,31 @@
<div class="bg-white shadow-md"> <div class="bg-white shadow-md">
<div class="flex justify-between items-center p-4 sm:px-6"> <div class="flex justify-between items-center p-4 sm:px-6">
<div> <div>
<h2 class="text-lg leading-6 font-medium text-gray-900"> <h2 class="text-lg font-medium leading-6 text-gray-900">
Wnioski urlopowe Wnioski urlopowe
</h2> </h2>
</div> </div>
<div> <div>
<InertiaLink <InertiaLink
href="/vacation/requests/create" href="/vacation/requests/create"
class="inline-flex items-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500" class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
> >
Dodaj wniosek Dodaj wniosek
</InertiaLink> </InertiaLink>
</div> </div>
</div> </div>
<div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
<div class="border-t border-gray-200"> <div class="border-t border-gray-200">
<div class="px-4 grid grid-cols-2 gap-4"> <div class="grid grid-cols-1 gap-2 p-4 md:grid-cols-2 md:gap-4">
<div>
<Listbox <Listbox
v-model="form.user" v-model="form.user"
as="div" as="div"
class="py-4 items-center"
> >
<ListboxLabel class="block text-sm font-medium text-gray-700 mb-2"> <ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
Pracownik Pracownik
</ListboxLabel> </ListboxLabel>
<div class="mt-1 relative sm:mt-0"> <div class="relative mt-1 sm:mt-0">
<ListboxButton <ListboxButton
class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300" class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
> >
<span v-if="form.user === null"> <span v-if="form.user === null">
Wszyscy Wszyscy
@ -41,12 +38,12 @@
> >
<img <img
:src="form.user.avatar" :src="form.user.avatar"
class="flex-shrink-0 h-6 w-6 rounded-full" class="shrink-0 w-6 h-6 rounded-full"
> >
<span class="ml-3 block truncate">{{ form.user.name }}</span> <span class="block ml-3 truncate">{{ form.user.name }}</span>
</span> </span>
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"> <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
<SelectorIcon class="h-5 w-5 text-gray-400" /> <SelectorIcon class="w-5 h-5 text-gray-400" />
</span> </span>
</ListboxButton> </ListboxButton>
@ -56,7 +53,7 @@
leave-to-class="opacity-0" leave-to-class="opacity-0"
> >
<ListboxOptions <ListboxOptions
class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" 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"
> >
<ListboxOption <ListboxOption
v-slot="{ active }" v-slot="{ active }"
@ -67,14 +64,14 @@
:class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']" :class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
> >
<div class="flex items-center"> <div class="flex items-center">
Wszyscy pracownicy Wszyscy
</div> </div>
<span <span
v-if="form.user === null" v-if="form.user === null"
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']" :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
> >
<CheckIcon class="h-5 w-5" /> <CheckIcon class="w-5 h-5" />
</span> </span>
</li> </li>
</ListboxOption> </ListboxOption>
@ -91,7 +88,7 @@
<div class="flex items-center"> <div class="flex items-center">
<img <img
:src="user.avatar" :src="user.avatar"
class="flex-shrink-0 h-6 w-6 rounded-full" class="shrink-0 w-6 h-6 rounded-full"
> >
<span <span
:class="[form.user?.id === user.id ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']" :class="[form.user?.id === user.id ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']"
@ -103,7 +100,7 @@
v-if="form.user?.id === user.id" v-if="form.user?.id === user.id"
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']" :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
> >
<CheckIcon class="h-5 w-5" /> <CheckIcon class="w-5 h-5" />
</span> </span>
</li> </li>
</ListboxOption> </ListboxOption>
@ -111,25 +108,22 @@
</transition> </transition>
</div> </div>
</Listbox> </Listbox>
</div>
<div>
<Listbox <Listbox
v-model="form.status" v-model="form.status"
as="div" as="div"
class="py-4 items-center"
> >
<ListboxLabel class="block text-sm font-medium text-gray-700 mb-2"> <ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
Status Status
</ListboxLabel> </ListboxLabel>
<div class="mt-1 relative sm:mt-0"> <div class="relative mt-1 sm:mt-0">
<ListboxButton <ListboxButton
class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300" class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
> >
<span class="flex items-center"> <span class="flex items-center">
{{ form.status.name }} {{ form.status.name }}
</span> </span>
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"> <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
<SelectorIcon class="h-5 w-5 text-gray-400" /> <SelectorIcon class="w-5 h-5 text-gray-400" />
</span> </span>
</ListboxButton> </ListboxButton>
@ -139,7 +133,7 @@
leave-to-class="opacity-0" leave-to-class="opacity-0"
> >
<ListboxOptions <ListboxOptions
class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" 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"
> >
<ListboxOption <ListboxOption
v-for="status in statuses" v-for="status in statuses"
@ -149,7 +143,7 @@
:value="status" :value="status"
> >
<li <li
:class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']" :class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default truncate select-none relative py-2 pl-3 pr-9']"
> >
{{ status.name }} {{ status.name }}
@ -157,7 +151,7 @@
v-if="selected" v-if="selected"
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']" :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
> >
<CheckIcon class="h-5 w-5" /> <CheckIcon class="w-5 h-5" />
</span> </span>
</li> </li>
</ListboxOption> </ListboxOption>
@ -167,49 +161,49 @@
</Listbox> </Listbox>
</div> </div>
</div> </div>
</div> <div class="overflow-auto xl:overflow-visible">
<table class="min-w-full divide-y divide-gray-200"> <table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50"> <thead class="bg-gray-50">
<tr> <tr>
<th <th
scope="col" scope="col"
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider" class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
> >
Numer Numer
</th> </th>
<th <th
scope="col" scope="col"
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider" class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
> >
Pracownik Pracownik
</th> </th>
<th <th
scope="col" scope="col"
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider" class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
> >
Rodzaj urlopu Rodzaj urlopu
</th> </th>
<th <th
scope="col" scope="col"
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider" class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
> >
Od Od
</th> </th>
<th <th
scope="col" scope="col"
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider" class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
> >
Do Do
</th> </th>
<th <th
scope="col" scope="col"
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider" class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
> >
Dni urlopu Dni urlopu
</th> </th>
<th <th
scope="col" scope="col"
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider" class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
> >
Status Status
</th> </th>
@ -220,9 +214,9 @@
<tr <tr
v-for="request in requests.data" v-for="request in requests.data"
:key="request.id" :key="request.id"
class="hover:bg-blumilk-25 relative" class="relative hover:bg-blumilk-25"
> >
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500"> <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<InertiaLink <InertiaLink
:href="`/vacation/requests/${request.id}`" :href="`/vacation/requests/${request.id}`"
class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline" class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline"
@ -230,12 +224,11 @@
{{ request.name }} {{ request.name }}
</InertiaLink> </InertiaLink>
</td> </td>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500"> <td class="p-4 text-sm font-medium text-gray-500 whitespace-nowrap">
<div class="flex"> <div class="flex">
<img <div class="w-10 h-10 rounded-full">
class="h-10 w-10 rounded-full" <img :src="request.user.avatar">
:src="request.user.avatar" </div>
>
<div class="ml-3"> <div class="ml-3">
<p class="text-sm font-medium text-gray-900"> <p class="text-sm font-medium text-gray-900">
{{ request.user.name }} {{ request.user.name }}
@ -246,22 +239,22 @@
</div> </div>
</div> </div>
</td> </td>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500"> <td class="p-4 text-sm font-medium text-gray-500 whitespace-nowrap">
<VacationType :type="request.type" /> <VacationType :type="request.type" />
</td> </td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500"> <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
{{ request.from }} {{ request.from }}
</td> </td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500"> <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
{{ request.to }} {{ request.to }}
</td> </td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500"> <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
{{ request.days.length }} {{ request.days.length }}
</td> </td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500"> <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<Status :status="request.state" /> <Status :status="request.state" />
</td> </td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500"> <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<InertiaLink <InertiaLink
:href="`/vacation/requests/${request.id}`" :href="`/vacation/requests/${request.id}`"
class="flex justify-around" class="flex justify-around"
@ -277,15 +270,15 @@
<tr v-if="! requests.data.length"> <tr v-if="! requests.data.length">
<td <td
colspan="100%" colspan="100%"
class="text-center py-4 text-xl leading-5 text-gray-700" class="py-4 text-xl leading-5 text-center text-gray-700"
> >
Brak danych Brak danych
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<Pagination :pagination="requests.meta" />
</div> </div>
<Pagination :pagination="requests.meta" />
</div> </div>
</template> </template>

92
resources/js/Pages/VacationRequest/Show.vue
View File

@ -1,31 +1,31 @@
<template> <template>
<InertiaHead :title="`Wniosek ${request.name}`" /> <InertiaHead :title="`Wniosek ${request.name}`" />
<div class="grid grid-cols-1 gap-6 xl:grid-flow-col-dense xl:grid-cols-3"> <div class="grid grid-cols-1 gap-6 xl:grid-cols-3 xl:grid-flow-col-dense">
<div class="space-y-6 xl:col-start-1 xl:col-span-2"> <div class="space-y-6 xl:col-span-2 xl:col-start-1">
<div class="bg-white shadow-md"> <div class="bg-white shadow-md">
<div class="px-4 py-5 sm:px-6"> <div class="py-5 px-4 sm:px-6">
<h3 class="text-lg leading-6 font-medium text-gray-900"> <h3 class="text-lg font-medium leading-6 text-gray-900">
Informacje na temat wniosku Informacje na temat wniosku
</h3> </h3>
</div> </div>
<div class="border-t border-gray-200 px-4 py-5 sm:p-0"> <div class="py-5 px-4 border-t border-gray-200 sm:p-0">
<dl class="sm:divide-y sm:divide-gray-200"> <dl class="sm:divide-y sm:divide-gray-200">
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
<dt class="text-sm font-medium text-gray-500"> <dt class="text-sm font-medium text-gray-500">
Nr wniosku Nr wniosku
</dt> </dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
{{ request.name }} {{ request.name }}
</dd> </dd>
</div> </div>
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
<dt class="text-sm font-medium text-gray-500 flex items-center"> <dt class="flex items-center text-sm font-medium text-gray-500">
Pracownik Pracownik
</dt> </dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
<div class="flex"> <div class="flex">
<img <img
class="h-10 w-10 rounded-full" class="w-10 h-10 rounded-full"
:src="request.user.avatar" :src="request.user.avatar"
> >
<div class="ml-3"> <div class="ml-3">
@ -39,27 +39,27 @@
</div> </div>
</dd> </dd>
</div> </div>
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
<dt class="text-sm font-medium text-gray-500"> <dt class="text-sm font-medium text-gray-500">
Rodzaj urlopu Rodzaj urlopu
</dt> </dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
<VacationType :type="request.type" /> <VacationType :type="request.type" />
</dd> </dd>
</div> </div>
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
<dt class="text-sm font-medium text-gray-500"> <dt class="text-sm font-medium text-gray-500">
Obecny status Obecny status
</dt> </dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
<Status :status="request.state" /> <Status :status="request.state" />
</dd> </dd>
</div> </div>
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
<dt class="text-sm font-medium text-gray-500"> <dt class="text-sm font-medium text-gray-500">
Data Data
</dt> </dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
<template v-if="request.days.length > 1"> <template v-if="request.days.length > 1">
{{ request.from }} - {{ request.to }} {{ request.from }} - {{ request.to }}
</template> </template>
@ -71,35 +71,35 @@
</span> </span>
</dd> </dd>
</div> </div>
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
<dt class="text-sm font-medium text-gray-500"> <dt class="text-sm font-medium text-gray-500">
Komentarz Komentarz
</dt> </dt>
<dd <dd
v-if="request.comment != null" v-if="request.comment != null"
class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2" class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0"
> >
{{ request.comment }} {{ request.comment }}
</dd> </dd>
<dd <dd
v-else v-else
class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2" class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0"
> >
- -
</dd> </dd>
</div> </div>
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> <div class="py-5 px-4 bg-white sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500 flex items-center"> <dt class="flex items-center text-sm font-medium text-gray-500">
Załączniki Załączniki
</dt> </dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
<ul class="border border-gray-200 rounded-md divide-y divide-gray-200"> <ul class="rounded-md border border-gray-200 divide-y divide-gray-200">
<li class="pl-3 pr-4 py-3 flex items-center justify-between text-sm"> <li class="flex justify-between items-center py-3 pr-4 pl-3 text-sm">
<div class="w-0 flex-1 flex items-center"> <div class="flex flex-1 items-center w-0">
<PaperClipIcon class="flex-shrink-0 h-5 w-5 text-gray-400" /> <PaperClipIcon class="shrink-0 w-5 h-5 text-gray-400" />
<span class="ml-2 flex-1 w-0 truncate"> wniosek_urlopowy.pdf </span> <span class="flex-1 ml-2 w-0 truncate"> wniosek_urlopowy.pdf </span>
</div> </div>
<div class="ml-4 flex-shrink-0"> <div class="shrink-0 ml-4">
<a <a
:href="`/vacation/requests/${request.id}/download`" :href="`/vacation/requests/${request.id}/download`"
target="_blank" target="_blank"
@ -119,8 +119,8 @@
v-if="can.acceptAsTechnical" v-if="can.acceptAsTechnical"
class="bg-white shadow" class="bg-white shadow"
> >
<div class="px-4 py-5 sm:p-6"> <div class="py-5 px-4 sm:p-6">
<h3 class="text-lg leading-6 font-medium text-gray-900"> <h3 class="text-lg font-medium leading-6 text-gray-900">
Zaakceptuj wniosek jako osoba techniczna Zaakceptuj wniosek jako osoba techniczna
</h3> </h3>
<div class="mt-2 max-w-xl text-sm text-gray-500"> <div class="mt-2 max-w-xl text-sm text-gray-500">
@ -135,7 +135,7 @@
method="post" method="post"
as="button" as="button"
preserve-scroll preserve-scroll
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" class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
> >
Zaakceptuj wniosek Zaakceptuj wniosek
</InertiaLink> </InertiaLink>
@ -146,8 +146,8 @@
v-if="can.acceptAsAdministrative" v-if="can.acceptAsAdministrative"
class="bg-white shadow" class="bg-white shadow"
> >
<div class="px-4 py-5 sm:p-6"> <div class="py-5 px-4 sm:p-6">
<h3 class="text-lg leading-6 font-medium text-gray-900"> <h3 class="text-lg font-medium leading-6 text-gray-900">
Zaakceptuj wniosek jako osoba administracyjna Zaakceptuj wniosek jako osoba administracyjna
</h3> </h3>
<div class="mt-2 max-w-xl text-sm text-gray-500"> <div class="mt-2 max-w-xl text-sm text-gray-500">
@ -161,7 +161,7 @@
method="post" method="post"
as="button" as="button"
preserve-scroll preserve-scroll
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" class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
> >
Zaakceptuj wniosek Zaakceptuj wniosek
</InertiaLink> </InertiaLink>
@ -172,8 +172,8 @@
v-if="can.reject" v-if="can.reject"
class="bg-white shadow" class="bg-white shadow"
> >
<div class="px-4 py-5 sm:p-6"> <div class="py-5 px-4 sm:p-6">
<h3 class="text-lg leading-6 font-medium text-gray-900"> <h3 class="text-lg font-medium leading-6 text-gray-900">
Odrzuć wniosek Odrzuć wniosek
</h3> </h3>
<div class="mt-2 max-w-xl text-sm text-gray-500"> <div class="mt-2 max-w-xl text-sm text-gray-500">
@ -187,7 +187,7 @@
method="post" method="post"
as="button" as="button"
preserve-scroll preserve-scroll
class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm" class="inline-flex justify-center items-center py-2 px-4 font-medium text-red-700 bg-red-100 hover:bg-red-200 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:text-sm"
> >
Odrzuć wniosek Odrzuć wniosek
</InertiaLink> </InertiaLink>
@ -196,10 +196,10 @@
</div> </div>
<div <div
v-if="can.cancel" v-if="can.cancel"
class="bg-white shadow border border-red-500" class="bg-white border border-red-500 shadow"
> >
<div class="px-4 py-5 sm:p-6"> <div class="py-5 px-4 sm:p-6">
<h3 class="text-lg leading-6 font-medium text-gray-900"> <h3 class="text-lg font-medium leading-6 text-gray-900">
Anuluj wniosek Anuluj wniosek
</h3> </h3>
<div class="mt-2 max-w-xl text-sm text-gray-500"> <div class="mt-2 max-w-xl text-sm text-gray-500">
@ -213,7 +213,7 @@
method="post" method="post"
as="button" as="button"
preserve-scroll preserve-scroll
class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm" class="inline-flex justify-center items-center py-2 px-4 font-medium text-red-700 bg-red-100 hover:bg-red-200 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:text-sm"
> >
Anuluj wniosek Anuluj wniosek
</InertiaLink> </InertiaLink>
@ -221,14 +221,14 @@
</div> </div>
</div> </div>
</div> </div>
<div class="xl:col-start-3 xl:col-span-1 space-y-6"> <div class="space-y-6 xl:col-span-1 xl:col-start-3">
<div class="bg-white shadow-md"> <div class="bg-white shadow-md">
<div class="px-4 py-5 sm:px-6"> <div class="py-5 px-4 sm:px-6">
<h3 class="text-lg leading-6 font-medium text-gray-900"> <h3 class="text-lg font-medium leading-6 text-gray-900">
Historia wniosku Historia wniosku
</h3> </h3>
</div> </div>
<div class="border-t border-gray-200 px-4 py-4"> <div class="p-4 border-t border-gray-200">
<ul> <ul>
<li <li
v-for="(activity, index) in activities.data" v-for="(activity, index) in activities.data"

10
resources/js/Shared/Activity.vue
View File

@ -2,9 +2,9 @@
<div :class="{'relative pb-8': last}"> <div :class="{'relative pb-8': last}">
<span <span
v-if="last" v-if="last"
class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" class="absolute top-4 left-4 -ml-px w-0.5 h-full bg-gray-200"
/> />
<div class="relative flex space-x-3"> <div class="flex relative space-x-3">
<div> <div>
<span :class="[statusInfo.outline.background, statusInfo.outline.foreground, 'h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white']"> <span :class="[statusInfo.outline.background, statusInfo.outline.foreground, 'h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white']">
<component <component
@ -13,16 +13,16 @@
/> />
</span> </span>
</div> </div>
<div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4"> <div class="flex flex-1 justify-between pt-1.5 space-x-4 min-w-0">
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<div class="text-sm font-medium text-gray-700"> <div class="text-sm font-medium text-gray-700">
{{ statusInfo.text }} {{ statusInfo.text }}
</div> </div>
<div class="text-right text-sm whitespace-nowrap font-medium text-gray-400"> <div class="text-sm font-medium text-right text-gray-400 whitespace-nowrap">
{{ activity.user }} {{ activity.user }}
</div> </div>
</div> </div>
<div class="text-right text-sm whitespace-nowrap text-gray-500 flex flex-col"> <div class="flex flex-col text-sm text-right text-gray-500 whitespace-nowrap">
<time>{{ activity.date }}</time> <time>{{ activity.date }}</time>
<time>{{ activity.time }}</time> <time>{{ activity.time }}</time>
</div> </div>

4
resources/js/Shared/Layout/AppLayout.vue
View File

@ -4,8 +4,8 @@
:auth="auth" :auth="auth"
:years="years" :years="years"
/> />
<main class="lg:ml-64 flex flex-col flex-1 py-8"> <main class="flex flex-col flex-1 py-8 lg:ml-64">
<div class="px-4"> <div class="lg:px-4">
<slot /> <slot />
</div> </div>
</main> </main>

2
resources/js/Shared/Layout/GuestLayout.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8 bg-blumilk-25"> <div class="flex flex-col justify-center py-12 min-h-screen bg-blumilk-25 sm:px-6 lg:px-8">
<slot /> <slot />
</div> </div>
</template> </template>

91
resources/js/Shared/MainMenu.vue
View File

@ -5,7 +5,7 @@
> >
<Dialog <Dialog
as="div" as="div"
class="fixed inset-0 flex z-40 lg:hidden" class="flex fixed inset-0 z-40 lg:hidden"
@close="sidebarOpen = false" @close="sidebarOpen = false"
> >
<TransitionChild <TransitionChild
@ -28,7 +28,7 @@
leave-from="translate-x-0" leave-from="translate-x-0"
leave-to="-translate-x-full" leave-to="-translate-x-full"
> >
<div class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-blumilk-700"> <div class="flex relative flex-col flex-1 pt-5 pb-4 w-full max-w-xs bg-blumilk-700">
<TransitionChild <TransitionChild
as="template" as="template"
enter="ease-in-out duration-300" enter="ease-in-out duration-300"
@ -38,46 +38,50 @@
leave-from="opacity-100" leave-from="opacity-100"
leave-to="opacity-0" leave-to="opacity-0"
> >
<div class="absolute top-0 right-0 -mr-12 pt-2"> <div class="absolute top-0 right-0 pt-2 -mr-12">
<button <button
type="button" type="button"
class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" class="flex justify-center items-center ml-1 w-10 h-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
@click="sidebarOpen = false" @click="sidebarOpen = false"
> >
<XIcon class="h-6 w-6 text-white" /> <XIcon class="w-6 h-6 text-white" />
</button> </button>
</div> </div>
</TransitionChild> </TransitionChild>
<div class="flex-shrink-0 flex items-center px-4"> <div class="flex shrink-0 items-center px-4">
<InertiaLink href="/"> <InertiaLink
href="/"
@click="sidebarOpen = false;"
>
<img <img
class="h-8 w-auto" class="w-auto h-8"
src="/img/logo-white.png" src="/img/logo-white.svg"
alt="Workflow"
> >
</InertiaLink> </InertiaLink>
</div> </div>
<nav class="mt-5 flex-shrink-0 h-full divide-y divide-blumilk-800 overflow-y-auto"> <nav class="overflow-y-auto shrink-0 mt-5 h-full divide-y divide-blumilk-800">
<div class="px-2 space-y-1"> <div class="px-2 space-y-1">
<InertiaLink <InertiaLink
href="/" href="/"
:class="[$page.component === 'Dashboard' ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md']" :class="[$page.component === 'Dashboard' ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md']"
@click="sidebarOpen = false;"
> >
<HomeIcon class="mr-4 flex-shrink-0 h-6 w-6 text-blumilk-200" /> <HomeIcon class="shrink-0 mr-4 w-6 h-6 text-blumilk-200" />
Strona główna Strona główna
</InertiaLink> </InertiaLink>
</div> </div>
<div class="mt-3 pt-3"> <div class="pt-3 mt-3">
<div class="px-2 space-y-1"> <div class="px-2 space-y-1">
<InertiaLink <InertiaLink
v-for="item in navigation" v-for="item in navigation"
:key="item.name" :key="item.name"
:href="item.href" :href="item.href"
:class="[$page.component === item.component ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-base font-medium rounded-md']" :class="[$page.component === item.component ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-base font-medium rounded-md']"
@click="sidebarOpen = false;"
> >
<component <component
:is="item.icon" :is="item.icon"
class="mr-4 flex-shrink-0 h-6 w-6 text-blumilk-200" class="shrink-0 mr-4 w-6 h-6 text-blumilk-200"
/> />
{{ item.name }} {{ item.name }}
</InertiaLink> </InertiaLink>
@ -86,30 +90,29 @@
</nav> </nav>
</div> </div>
</TransitionChild> </TransitionChild>
<div class="flex-shrink-0 w-14" /> <div class="shrink-0 w-14" />
</Dialog> </Dialog>
</TransitionRoot> </TransitionRoot>
<div class="hidden lg:flex lg:w-64 lg:flex-col lg:fixed lg:inset-y-0"> <div class="hidden lg:flex lg:fixed lg:inset-y-0 lg:flex-col lg:w-64">
<div class="flex flex-col flex-grow bg-blumilk-700 pt-5 pb-4 overflow-y-auto"> <div class="flex overflow-y-auto flex-col grow pt-5 pb-4 bg-blumilk-700">
<div class="flex items-center flex-shrink-0 px-4"> <div class="flex shrink-0 items-center px-4">
<InertiaLink href="/"> <InertiaLink href="/">
<img <img
class="h-8 w-auto" src="/img/logo-white.svg"
src="/img/logo-white.png" class="w-auto h-8"
alt="Workflow"
> >
</InertiaLink> </InertiaLink>
</div> </div>
<nav class="mt-5 px-2 flex-1 flex flex-col divide-y divide-blumilk-800 overflow-y-auto"> <nav class="flex overflow-y-auto flex-col flex-1 px-2 mt-5 divide-y divide-blumilk-800">
<InertiaLink <InertiaLink
href="/" href="/"
:class="[$page.component === 'Dashboard' ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md']" :class="[$page.component === 'Dashboard' ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md']"
> >
<HomeIcon class="mr-4 flex-shrink-0 h-6 w-6 text-blumilk-200" /> <HomeIcon class="shrink-0 mr-4 w-6 h-6 text-blumilk-200" />
Strona główna Strona główna
</InertiaLink> </InertiaLink>
<div class="mt-1 pt-1 space-y-1"> <div class="pt-1 mt-1 space-y-1">
<InertiaLink <InertiaLink
v-for="item in navigation" v-for="item in navigation"
:key="item.name" :key="item.name"
@ -118,7 +121,7 @@
> >
<component <component
:is="item.icon" :is="item.icon"
class="mr-4 flex-shrink-0 h-6 w-6 text-blumilk-200" class="shrink-0 mr-4 w-6 h-6 text-blumilk-200"
/> />
{{ item.name }} {{ item.name }}
</InertiaLink> </InertiaLink>
@ -127,21 +130,21 @@
</div> </div>
</div> </div>
<div class="lg:pl-64 flex flex-col flex-1"> <div class="flex flex-col flex-1 lg:pl-64">
<div class="relative z-10 flex-shrink-0 flex h-16 bg-white border-b border-gray-200"> <div class="flex relative z-10 shrink-0 h-16 bg-white border-b border-gray-200">
<button <button
type="button" type="button"
class="px-4 border-r border-gray-200 text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blumilk-500 lg:hidden" class="px-4 text-gray-400 border-r border-gray-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blumilk-500 lg:hidden"
@click="sidebarOpen = true" @click="sidebarOpen = true"
> >
<MenuAlt1Icon class="h-6 w-6" /> <MenuAlt1Icon class="w-6 h-6" />
</button> </button>
<div class="flex-1 px-4 flex justify-between sm:px-6 lg:px-8"> <div class="flex flex-1 justify-between px-4 sm:px-6 lg:px-8">
<div class="flex items-center"> <div class="flex items-center">
<div> <div>
<Menu <Menu
as="div" as="div"
class="relative inline-block text-left" class="inline-block relative text-left"
> >
<div class="flex justify-center items-center"> <div class="flex justify-center items-center">
<div class="mr-4 text-sm"> <div class="mr-4 text-sm">
@ -149,10 +152,10 @@
</div> </div>
<div> <div>
<MenuButton <MenuButton
class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500" class="inline-flex justify-center py-2 px-4 w-full text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
> >
{{ years.selected.year }} {{ years.selected.year }}
<ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" /> <ChevronDownIcon class="-mr-1 ml-2 w-5 h-5" />
</MenuButton> </MenuButton>
</div> </div>
</div> </div>
@ -166,7 +169,7 @@
leave-to-class="transform opacity-0 scale-95" leave-to-class="transform opacity-0 scale-95"
> >
<MenuItems <MenuItems
class="origin-top-right absolute right-0 mt-2 w-24 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" class="absolute right-0 mt-2 w-24 bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right"
> >
<div class="py-1"> <div class="py-1">
<MenuItem <MenuItem
@ -184,7 +187,7 @@
{{ item.year }} {{ item.year }}
<CheckIcon <CheckIcon
v-if="item.year === years.selected.year" v-if="item.year === years.selected.year"
class="h-5 w-5 text-blumilk-500 ml-2" class="ml-2 w-5 h-5 text-blumilk-500"
/> />
</InertiaLink> </InertiaLink>
</MenuItem> </MenuItem>
@ -195,7 +198,7 @@
</div> </div>
<div <div
v-if="years.current.year !== years.selected.year" v-if="years.current.year !== years.selected.year"
class="ml-3 text-sm hidden sm:block" class="hidden ml-3 text-sm sm:block"
> >
<InertiaLink <InertiaLink
:href="years.current.link" :href="years.current.link"
@ -208,22 +211,22 @@
</inertialink> </inertialink>
</div> </div>
</div> </div>
<div class="ml-4 flex items-center md:ml-6"> <div class="flex items-center ml-4 md:ml-6">
<Menu <Menu
as="div" as="div"
class="ml-3 relative" class="relative ml-3"
> >
<MenuButton <MenuButton
class="max-w-xs bg-white rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500 lg:p-2 lg:rounded-md lg:hover:bg-gray-50" class="flex items-center max-w-xs text-sm bg-white rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 lg:p-2 lg:hover:bg-gray-50 lg:rounded-md"
> >
<img <img
class="h-8 w-8 rounded-full" class="w-8 h-8 rounded-full"
:src="auth.user.avatar" :src="auth.user.avatar"
> >
<span class="hidden ml-3 text-gray-700 text-sm font-medium lg:block"> <span class="hidden ml-3 text-sm font-medium text-gray-700 lg:block">
{{ auth.user.name }} {{ auth.user.name }}
</span> </span>
<ChevronDownIcon class="hidden flex-shrink-0 ml-1 h-5 w-5 text-gray-400 lg:block" /> <ChevronDownIcon class="hidden shrink-0 ml-1 w-5 h-5 text-gray-400 lg:block" />
</MenuButton> </MenuButton>
<transition <transition
enter-active-class="transition ease-out duration-100" enter-active-class="transition ease-out duration-100"
@ -234,7 +237,7 @@
leave-to-class="transform opacity-0 scale-95" leave-to-class="transform opacity-0 scale-95"
> >
<MenuItems <MenuItems
class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" class="absolute right-0 py-1 mt-2 w-48 bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right"
> >
<MenuItem v-slot="{ active }"> <MenuItem v-slot="{ active }">
<InertiaLink <InertiaLink

14
resources/js/Shared/Pagination.vue
View File

@ -1,25 +1,25 @@
<template> <template>
<div <div
v-if="pagination.last_page !== 1" v-if="pagination.last_page !== 1"
class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6 rounded-b-lg" class="flex justify-between items-center py-3 px-4 bg-white rounded-b-lg border-t border-gray-200 sm:px-6"
> >
<div class="flex-1 flex justify-between sm:hidden"> <div class="flex flex-1 justify-between sm:hidden">
<Component <Component
:is="prevLink ? 'InertiaLink': 'span'" :is="prevLink ? 'InertiaLink': 'span'"
:href="prevLink" :href="prevLink"
class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50" class="inline-flex relative items-center py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300"
> >
Poprzednia Poprzednia
</Component> </Component>
<Component <Component
:is="nextLink ? 'InertiaLink': 'span'" :is="nextLink ? 'InertiaLink': 'span'"
:href="nextLink" :href="nextLink"
class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50" class="inline-flex relative items-center py-2 px-4 ml-3 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300"
> >
Następna Następna
</Component> </Component>
</div> </div>
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> <div class="hidden sm:flex sm:flex-1 sm:justify-between sm:items-center">
<div class="text-sm text-gray-700"> <div class="text-sm text-gray-700">
Wyświetlanie od Wyświetlanie od
<span class="font-medium">{{ pagination.from }}</span> <span class="font-medium">{{ pagination.from }}</span>
@ -29,7 +29,7 @@
<span class="font-medium">{{ pagination.total }}</span> <span class="font-medium">{{ pagination.total }}</span>
wyników wyników
</div> </div>
<nav class="relative z-0 inline-flex space-x-1"> <nav class="inline-flex relative z-0 space-x-1">
<template <template
v-for="(link, index) in pagination.links" v-for="(link, index) in pagination.links"
:key="index" :key="index"
@ -38,7 +38,7 @@
:is="link.url ? 'InertiaLink' : 'span'" :is="link.url ? 'InertiaLink' : 'span'"
:href="link.url" :href="link.url"
:preserve-scroll="true" :preserve-scroll="true"
class="relative inline-flex items-center px-4 py-2 border rounded-md text-sm font-medium" class="inline-flex relative items-center py-2 px-4 text-sm font-medium rounded-md border"
:class="{ 'z-10 bg-blumilk-25 border-blumilk-500 text-blumilk-600': link.active, 'bg-white border-gray-300 text-gray-500': !link.active, 'hover:bg-blumilk-25': link.url, 'border-none': !link.url}" :class="{ 'z-10 bg-blumilk-25 border-blumilk-500 text-blumilk-600': link.active, 'bg-white border-gray-300 text-gray-500': !link.active, 'hover:bg-blumilk-25': link.url, 'border-none': !link.url}"
v-text="link.label" v-text="link.label"
/> />

24
resources/js/Shared/VacationBar.vue
View File

@ -1,56 +1,56 @@
<template> <template>
<Popper <Popper
hover hover
class="h-full w-full" class="w-full h-full"
> >
<div class="flex bg-white text-white"> <div class="flex text-white bg-white">
<div <div
v-show="stats.used > 0" v-show="stats.used > 0"
:style="`background-color: ${colors.used}; flex-basis: ${calculatePercent(stats.used)}%;`" :style="`background-color: ${colors.used}; flex-basis: ${calculatePercent(stats.used)}%;`"
class="flex items-center justify-center py-2 px-0.5" class="flex justify-center items-center py-2 px-0.5"
> >
<strong>{{ stats.used }}</strong> <strong>{{ stats.used }}</strong>
</div> </div>
<div <div
v-show="stats.pending > 0" v-show="stats.pending > 0"
:style="`background-color: ${colors.pending}; flex-basis: ${calculatePercent(stats.pending)}%;`" :style="`background-color: ${colors.pending}; flex-basis: ${calculatePercent(stats.pending)}%;`"
class="flex items-center justify-center py-2 px-0.5" class="flex justify-center items-center py-2 px-0.5"
> >
<strong>{{ stats.pending }}</strong> <strong>{{ stats.pending }}</strong>
</div> </div>
<div <div
v-show="stats.remaining > 0" v-show="stats.remaining > 0"
:style="`background-color: ${colors.remaining}; flex-basis: ${calculatePercent(stats.remaining)}%;`" :style="`background-color: ${colors.remaining}; flex-basis: ${calculatePercent(stats.remaining)}%;`"
class="flex items-center justify-center py-2 px-0.5" class="flex justify-center items-center py-2 px-0.5"
> >
<strong>{{ stats.remaining }}</strong> <strong>{{ stats.remaining }}</strong>
</div> </div>
</div> </div>
<template #content> <template #content>
<div class="px-4 py-2 bg-white text-md text-gray-900 rounded-md shadow-md flext"> <div class="py-2 px-4 text-gray-900 bg-white rounded-md shadow-md text-md flext">
<div class="flex items-center font-normal"> <div class="flex items-center font-normal">
<i <i
class="inline-block w-5 h-3 mr-3" class="inline-block mr-3 w-5 h-3"
:style="`background-color: ${colors.used}`" :style="`background-color: ${colors.used}`"
/> />
Wykorzystane: Wykorzystane:
<span class="font-semibold ml-1">{{ stats.used }}</span> <span class="ml-1 font-semibold">{{ stats.used }}</span>
</div> </div>
<div class="flex items-center font-normal"> <div class="flex items-center font-normal">
<i <i
class="inline-block w-5 h-3 mr-3" class="inline-block mr-3 w-5 h-3"
:style="`background-color: ${colors.pending}`" :style="`background-color: ${colors.pending}`"
/> />
Rozpatrywane: Rozpatrywane:
<span class="font-semibold ml-1">{{ stats.pending }}</span> <span class="ml-1 font-semibold">{{ stats.pending }}</span>
</div> </div>
<div class="flex items-center font-normal"> <div class="flex items-center font-normal">
<i <i
class="inline-block w-5 h-3 mr-3" class="inline-block mr-3 w-5 h-3"
:style="`background-color: ${colors.remaining}`" :style="`background-color: ${colors.remaining}`"
/> />
Pozostałe: Pozostałe:
<span class="font-semibold ml-1">{{ stats.remaining }}</span> <span class="ml-1 font-semibold">{{ stats.remaining }}</span>
</div> </div>
</div> </div>
</template> </template>

2
resources/js/Shared/VacationTypeCalendarIcon.vue
View File

@ -8,7 +8,7 @@
</div> </div>
</div> </div>
<template #content> <template #content>
<div class="px-2 py-1 bg-white text-xs text-gray-900 shadow-md "> <div class="py-1 px-2 text-xs text-gray-900 bg-white shadow-md ">
{{ typeInfo.text }} {{ typeInfo.text }}
</div> </div>
</template> </template>

8
resources/js/Shared/Widgets/AbsenceList.vue
View File

@ -1,19 +1,19 @@
<template> <template>
<section class="bg-white shadow-md"> <section class="bg-white shadow-md">
<div class="p-4 sm:px-6"> <div class="p-4 sm:px-6">
<h2 class="text-lg leading-6 font-medium text-gray-900"> <h2 class="text-lg font-medium leading-6 text-gray-900">
Dzisiejsze nieobecności Dzisiejsze nieobecności
</h2> </h2>
</div> </div>
<div class="border-t border-gray-200 px-4 sm:px-6"> <div class="px-4 border-t border-gray-200 sm:px-6">
<ul class="divide-y divide-gray-200"> <ul class="divide-y divide-gray-200">
<li <li
v-for="absence in absences" v-for="absence in absences"
:key="absence.user.id" :key="absence.user.id"
class="py-4 flex" class="flex py-4"
> >
<img <img
class="h-10 w-10 rounded-full" class="w-10 h-10 rounded-full"
:src="absence.user.avatar" :src="absence.user.avatar"
> >
<div class="ml-3"> <div class="ml-3">

8
resources/js/Shared/Widgets/PendingVacationRequests.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<section class="bg-white shadow-md"> <section class="bg-white shadow-md">
<div class="p-4 sm:px-6"> <div class="p-4 sm:px-6">
<h2 class="text-lg leading-6 font-medium text-gray-900"> <h2 class="text-lg font-medium leading-6 text-gray-900">
Wnioski oczekujące na akcje Wnioski oczekujące na akcje
</h2> </h2>
</div> </div>
<div class="border-t border-gray-200 pb-5 px-4 sm:px-6"> <div class="px-4 pb-5 border-t border-gray-200 sm:px-6">
<div class="flow-root mt-6"> <div class="flow-root mt-6">
<ul class="-my-5 divide-y divide-gray-200"> <ul class="-my-5 divide-y divide-gray-200">
<li <li
@ -30,7 +30,7 @@
<div class="mt-3 text-sm text-gray-600"> <div class="mt-3 text-sm text-gray-600">
<div class="flex"> <div class="flex">
<img <img
class="h-10 w-10 rounded-full" class="w-10 h-10 rounded-full"
:src="request.user.avatar" :src="request.user.avatar"
> >
<div class="ml-3"> <div class="ml-3">
@ -56,7 +56,7 @@
<InertiaLink <InertiaLink
href="/vacation/requests" href="/vacation/requests"
:data="{status: 'waiting_for_action'}" :data="{status: 'waiting_for_action'}"
class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blumilk-500" class="flex justify-center items-center py-2 px-4 w-full text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 shadow-sm"
> >
Zobacz wszystkie Zobacz wszystkie
</InertiaLink> </InertiaLink>

8
resources/js/Shared/Widgets/UpcomingHolidays.vue
View File

@ -1,16 +1,16 @@
<template> <template>
<section class="bg-white shadow-md"> <section class="bg-white shadow-md">
<div class="p-4 sm:px-6"> <div class="p-4 sm:px-6">
<h2 class="text-lg leading-6 font-medium text-gray-900"> <h2 class="text-lg font-medium leading-6 text-gray-900">
Najbliższe dni wolne Najbliższe dni wolne
</h2> </h2>
</div> </div>
<div class="border-t border-gray-200 px-4 pb-5 sm:px-6"> <div class="px-4 pb-5 border-t border-gray-200 sm:px-6">
<ul class="divide-y divide-gray-200"> <ul class="divide-y divide-gray-200">
<li <li
v-for="holiday in holidays" v-for="holiday in holidays"
:key="holiday.id.id" :key="holiday.id.id"
class="py-4 flex" class="flex py-4"
> >
<div> <div>
<p class="text-sm font-medium text-gray-900"> <p class="text-sm font-medium text-gray-900">
@ -30,7 +30,7 @@
<div> <div>
<InertiaLink <InertiaLink
href="/holidays" href="/holidays"
class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blumilk-500" class="flex justify-center items-center py-2 px-4 w-full text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 shadow-sm"
> >
Zobacz wszystkie Zobacz wszystkie
</InertiaLink> </InertiaLink>

6
resources/js/Shared/Widgets/UserVacationRequests.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<section class="bg-white shadow-md"> <section class="bg-white shadow-md">
<div class="p-4 sm:px-6"> <div class="p-4 sm:px-6">
<h2 class="text-lg leading-6 font-medium text-gray-900"> <h2 class="text-lg font-medium leading-6 text-gray-900">
Twoje wnioski Twoje wnioski
</h2> </h2>
</div> </div>
<div class="border-t border-gray-200 pb-5 px-4 sm:px-6"> <div class="px-4 pb-5 border-t border-gray-200 sm:px-6">
<div class="flow-root mt-6"> <div class="flow-root mt-6">
<ul class="-my-5 divide-y divide-gray-200"> <ul class="-my-5 divide-y divide-gray-200">
<li <li
@ -42,7 +42,7 @@
<div class="mt-6"> <div class="mt-6">
<InertiaLink <InertiaLink
href="/vacation/requests/me" href="/vacation/requests/me"
class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blumilk-500" class="flex justify-center items-center py-2 px-4 w-full text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 shadow-sm"
> >
Zobacz wszystkie Zobacz wszystkie
</InertiaLink> </InertiaLink>

36
resources/js/Shared/Widgets/VacationStats.vue
View File

@ -1,62 +1,62 @@
<template> <template>
<section class="grid grid-cols-2 gap-4"> <section class="grid grid-cols-1 gap-4 md:grid-cols-2">
<div class="bg-white shadow-md p-4"> <div class="hidden p-4 bg-white shadow-md md:block">
<VacationChart :stats="stats" /> <VacationChart :stats="stats" />
</div> </div>
<div class="h-full"> <div class="h-full">
<div class="grid grid-cols-2 gap-4 h-full"> <div class="grid grid-cols-2 gap-4 h-full">
<div class="px-4 py-5 bg-white shadow-md sm:p-6"> <div class="py-5 px-4 bg-white shadow-md sm:p-6">
<dd class="mt-1 text-4xl font-semibold text-blumilk-500"> <dd class="mt-1 text-4xl font-semibold text-blumilk-500">
{{ stats.remaining }} {{ stats.remaining }}
</dd> </dd>
<dt class="text-md font-medium text-gray-700 truncate"> <dt class="font-medium text-gray-700 truncate text-md">
Pozostało Pozostało
</dt> </dt>
<dt class="text-sm font-medium text-gray-500 mt-2"> <dt class="mt-2 text-sm font-medium text-gray-500">
Dni do wykorzystania teraz. Dni do wykorzystania teraz.
</dt> </dt>
</div> </div>
<div class="px-4 py-5 bg-white shadow-md sm:p-6"> <div class="py-5 px-4 bg-white shadow-md sm:p-6">
<dd class="mt-1 text-4xl font-semibold text-blumilk-700"> <dd class="mt-1 text-4xl font-semibold text-blumilk-700">
{{ stats.used }} {{ stats.used }}
</dd> </dd>
<dt class="text-md font-medium text-gray-700 truncate"> <dt class="font-medium text-gray-700 truncate text-md">
Dni wykorzystane Wykorzystane
</dt> </dt>
<dt class="text-sm font-medium text-gray-500 mt-2"> <dt class="mt-2 text-sm font-medium text-gray-500">
Dni, które zostały już wykorzystane na urlop wypoczynkowy. Dni, które zostały już wykorzystane na urlop wypoczynkowy.
</dt> </dt>
</div> </div>
<div class="px-4 py-5 bg-white shadow-md sm:p-6"> <div class="py-5 px-4 bg-white shadow-md sm:p-6">
<dt class="mt-1 text-4xl font-semibold text-blumilk-200"> <dt class="mt-1 text-4xl font-semibold text-blumilk-200">
{{ stats.pending }} {{ stats.pending }}
</dt> </dt>
<dd class="text-md font-medium text-gray-500 truncate"> <dd class="font-medium text-gray-700 truncate text-md">
Rozpatrywane Rozpatrywane
</dd> </dd>
<dt class="text-sm font-medium text-gray-500 mt-2"> <dt class="mt-2 text-sm font-medium text-gray-500">
Dni czekające na akceptację przełożonych. Dni czekające na akceptację przełożonych.
</dt> </dt>
</div> </div>
<div class="px-4 py-5 bg-white shadow-md sm:p-6"> <div class="py-5 px-4 bg-white shadow-md sm:p-6">
<dt class="mt-1 text-4xl font-semibold text-gray-900"> <dt class="mt-1 text-4xl font-semibold text-gray-900">
{{ stats.limit }} {{ stats.limit }}
</dt> </dt>
<dd class="text-md font-medium text-gray-500 truncate"> <dd class="font-medium text-gray-700 truncate text-md">
Limit urlopu Limit urlopu
</dd> </dd>
<dt class="text-sm font-medium text-gray-500 mt-2"> <dt class="mt-2 text-sm font-medium text-gray-500">
Twój roczny limit urlopu wypoczynkowego. Twój roczny limit urlopu wypoczynkowego.
</dt> </dt>
</div> </div>
<div class="px-4 py-5 bg-white shadow-md sm:p-6 col-span-2"> <div class="col-span-2 py-5 px-4 bg-white shadow-md sm:p-6">
<dt class="mt-1 text-4xl font-semibold text-gray-900"> <dt class="mt-1 text-4xl font-semibold text-gray-900">
{{ stats.other }} {{ stats.other }}
</dt> </dt>
<dd class="text-md font-medium text-gray-500 truncate"> <dd class="font-medium text-gray-700 truncate text-md">
Inne urlopy Inne urlopy
</dd> </dd>
<dt class="text-sm font-medium text-gray-500 mt-2"> <dt class="mt-2 text-sm font-medium text-gray-500">
Urlopy bezpłatne, okolicznościowe, zwolnienia lekarskie, itd., które zostały już zatwierdzone. Urlopy bezpłatne, okolicznościowe, zwolnienia lekarskie, itd., które zostały już zatwierdzone.
</dt> </dt>
</div> </div>

12
resources/js/Shared/Widgets/Welcome.vue
View File

@ -1,16 +1,16 @@
<template> <template>
<section> <section>
<div class=" bg-white overflow-hidden shadow"> <div class=" overflow-hidden bg-white shadow">
<div class="bg-white p-6"> <div class="p-6 bg-white">
<div class="sm:flex sm:items-center sm:justify-between"> <div class="sm:flex sm:justify-between sm:items-center">
<div class="sm:flex sm:space-x-5"> <div class="sm:flex sm:space-x-5">
<div class="flex-shrink-0"> <div class="shrink-0">
<img <img
class="mx-auto h-20 w-20 rounded-full" class="mx-auto w-20 h-20 rounded-full"
:src="user.avatar" :src="user.avatar"
> >
</div> </div>
<div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left"> <div class="mt-4 text-center sm:pt-1 sm:mt-0 sm:text-left">
<p class="text-sm font-medium text-gray-600"> <p class="text-sm font-medium text-gray-600">
Cześć, Cześć,
</p> </p>

1
resources/js/app.js
View File

@ -41,5 +41,6 @@ Flatpickr.setDefaults({
enableTime: false, enableTime: false,
altFormat: 'd.m.Y', altFormat: 'd.m.Y',
altInput: true, altInput: true,
disableMobile: true,
}) })

6
routes/api.php
View File

@ -8,7 +8,7 @@ use Toby\Infrastructure\Http\Controllers\Api\CalculateUserVacationStatsControlle
use Toby\Infrastructure\Http\Controllers\Api\CalculateVacationDaysController; use Toby\Infrastructure\Http\Controllers\Api\CalculateVacationDaysController;
Route::middleware("auth:sanctum")->group(function (): void { Route::middleware("auth:sanctum")->group(function (): void {
Route::post("calculate-vacation-days", CalculateVacationDaysController::class); Route::post("vacation/calculate-days", CalculateVacationDaysController::class);
Route::post("calculate-vacation-stats", CalculateUserVacationStatsController::class); Route::post("vacation/calculate-stats", CalculateUserVacationStatsController::class);
Route::post("calculate-unavailable-days", CalculateUserUnavailableDaysController::class); Route::post("vacation/calculate-unavailable-days", CalculateUserUnavailableDaysController::class);
}); });