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

#22 - wip

Browse Source
This commit is contained in:
Adrian Hopek 2022-02-04 08:43:12 +01:00
parent 47288917a2
commit 79d86b2491
9 changed files with 918 additions and 958 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/Infrastructure/Http/Controllers/HolidayController.php
View File

@ -64,19 +64,4 @@ class HolidayController extends Controller
->route("holidays.index")
->with("success", __("Holiday has been deleted"));
}
public function showCalendar(): Response
{
$users = User::query()
->withTrashed()
->orderBy("last_name")
->orderBy("first_name")
->paginate()
->withQueryString();
return inertia("Holidays/Calendar", [
"users" => UserResource::collection($users),
]);
}
}

24
app/Infrastructure/Http/Controllers/VacationCalendarController.php Normal file
View File

@ -0,0 +1,24 @@
<?php
declare(strict_types=1);
namespace Toby\Infrastructure\Http\Controllers;
use Inertia\Response;
use Toby\Eloquent\Models\User;
use Toby\Infrastructure\Http\Resources\UserResource;
class VacationCalendarController extends Controller
{
public function index(): Response
{
$users = User::query()
->orderBy("last_name")
->orderBy("first_name")
->paginate();
return inertia("Calendar", [
"users" => UserResource::collection($users),
]);
}
}

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

@ -20,15 +20,19 @@ class VacationRequestController extends Controller
{
public function index(Request $request): Response
{
$status = $request->get("status", "all");
$vacationRequests = $request->user()
->vacationRequests()
->latest()
->states(VacationRequestState::filterByStatus($request->query("status", "all")))
->states(VacationRequestState::filterByStatus($status))
->paginate();
return inertia("VacationRequest/Index", [
"requests" => VacationRequestResource::collection($vacationRequests),
"filters" => $request->only("status"),
"filters" => [
"status" => $status,
],
]);
}

130
resources/js/Pages/Calendar.vue Normal file
View File

@ -0,0 +1,130 @@
<template>
<InertiaHead title="Kalendarz urlopów" />
<div class="bg-white sm:rounded-lg shadow-md">
<div class="p-4 sm:px-6">
<h2 class="text-lg leading-6 font-medium text-gray-900">
Kalendarz urlopów
</h2>
</div>
<div class="overflow-x-auto">
<table class="w-full text-center border border-gray-300">
<thead>
<tr>
<th class="w-64 py-2 border border-gray-300">
<Menu
as="div"
class="relative inline-block text-left"
>
<div>
<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-offset-gray-100 focus:ring-blumilk-500"
>
Styczeń
<ChevronDownIcon
class="-mr-1 ml-2 h-5 w-5"
aria-hidden="true"
/>
</MenuButton>
</div>
<transition
enter-active-class="transition ease-out duration-100"
enter-from-class="transform opacity-0 scale-95"
enter-to-class="transform opacity-100 scale-100"
leave-active-class="transition ease-in duration-75"
leave-from-class="transform opacity-100 scale-100"
leave-to-class="transform opacity-0 scale-95"
>
<MenuItems
class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
>
<div class="py-1">
<MenuItem>
<a
href="#"
class="text-gray-900 block px-4 py-2 text-sm"
>Styczeń</a>
</MenuItem>
<MenuItem>
<a
href="#"
class="text-gray-900 block px-4 py-2 text-sm"
>Luty</a>
</MenuItem>
<MenuItem>
<a
href="#"
class="text-gray-900 block px-4 py-2 text-sm"
>Marzec</a>
</MenuItem>
</div>
</MenuItems>
</transition>
</Menu>
</th>
<th
v-for="i in 31"
:key="i"
class="border border-gray-300 font-semibold text-gray-900 py-4 px-2 bg-gray-50"
>
{{ i }}
<p class="text-gray-800 font-normal mt-1">
Pt
</p>
</th>
</tr>
</thead>
<tbody>
<tr
v-for="user in users.data"
:key="user.id"
>
<th class="border border-gray-300 py-2 px-4">
<div class="flex justify-start items-center">
<span class="inline-flex items-center justify-center h-10 w-10 rounded-full">
<img
class="h-10 w-10 rounded-full"
:src="user.avatar"
alt=""
>
</span>
<div class="ml-3">
<div class="text-sm font-medium text-gray-900">
{{ user.name }}
</div>
</div>
</div>
</th>
<td
v-for="i in 31"
:key="i"
class="border border-gray-300 bg-blumilk-25"
/>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
import {Menu, MenuButton, MenuItem, MenuItems} from '@headlessui/vue'
import {ChevronDownIcon} from '@heroicons/vue/solid'
export default {
name: 'VacationCalendar',
components: {
Menu,
MenuButton,
MenuItem,
MenuItems,
ChevronDownIcon,
},
props: {
users: {
type: Object,
default: () => null,
},
},
}
</script>

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

@ -252,18 +252,19 @@ import {
ClockIcon,
ReceiptRefundIcon,
UsersIcon,
} from '@heroicons/vue/outline';
import {computed} from 'vue';
import {usePage} from '@inertiajs/inertia-vue3';
} from '@heroicons/vue/outline'
import {computed} from 'vue'
import {usePage} from '@inertiajs/inertia-vue3'
export default {
name: 'Dashboard',
setup() {
const user = computed(() => usePage().props.value.auth.user);
const user = computed(() => usePage().props.value.auth.user)
const stats = [
{label: 'Vacation days left', value: 12},
{label: 'Sick days left', value: 4},
{label: 'Personal days left', value: 2},
];
]
const actions = [
{
icon: ClockIcon,
@ -307,7 +308,7 @@ export default {
iconForeground: 'text-indigo-700',
iconBackground: 'bg-indigo-50',
},
];
]
const recentHires = [
{
name: 'Leonard Krasner',
@ -337,7 +338,7 @@ export default {
'https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
href: '#',
},
];
]
const announcements = [
{
id: 1,
@ -360,108 +361,14 @@ export default {
preview:
'Tenetur libero voluptatem rerum occaecati qui est molestiae exercitationem. Voluptate quisquam iure assumenda consequatur ex et recusandae. Alias consectetur voluptatibus. Accusamus a ab dicta et. Consequatur quis dignissimos voluptatem nisi.',
},
];
]
return {
user,
stats,
actions,
recentHires,
announcements,
};
}
},
};
}
</script>
<!--<script>-->
<!--import { ref } from 'vue';-->
<!--import {-->
<!-- Dialog,-->
<!-- DialogOverlay,-->
<!-- Menu,-->
<!-- MenuButton,-->
<!-- MenuItem,-->
<!-- MenuItems,-->
<!-- TransitionChild,-->
<!-- TransitionRoot,-->
<!--} from '@headlessui/vue';-->
<!--import {-->
<!-- BellIcon,-->
<!-- ClockIcon,-->
<!-- CogIcon,-->
<!-- CreditCardIcon,-->
<!-- DocumentReportIcon,-->
<!-- HomeIcon,-->
<!-- MenuAlt1Icon,-->
<!-- QuestionMarkCircleIcon,-->
<!-- ScaleIcon,-->
<!-- ShieldCheckIcon,-->
<!-- UserGroupIcon,-->
<!-- XIcon,-->
<!--} from '@heroicons/vue/outline';-->
<!--import {-->
<!-- CalendarIcon,-->
<!-- CashIcon,-->
<!-- CheckCircleIcon,-->
<!-- ChevronDownIcon,-->
<!-- ChevronRightIcon,-->
<!-- OfficeBuildingIcon,-->
<!-- SearchIcon, SunIcon,-->
<!--} from '@heroicons/vue/solid';-->
<!--const cards = [-->
<!-- { name: 'Account balance', href: '#', icon: ScaleIcon, amount: '$30,659.45' },-->
<!--];-->
<!--const transactions = [-->
<!-- {-->
<!-- id: 1,-->
<!-- name: 'Payment to Molly Sanders',-->
<!-- href: '#',-->
<!-- amount: '$20,000',-->
<!-- currency: 'USD',-->
<!-- status: 'success',-->
<!-- date: 'July 11, 2020',-->
<!-- datetime: '2020-07-11',-->
<!-- },-->
<!--];-->
<!--const statusStyles = {-->
<!-- success: 'bg-green-100 text-green-800',-->
<!-- processing: 'bg-yellow-100 text-yellow-800',-->
<!-- failed: 'bg-gray-100 text-gray-800',-->
<!--};-->
<!--export default {-->
<!-- components: {-->
<!-- Dialog,-->
<!-- DialogOverlay,-->
<!-- Menu,-->
<!-- MenuButton,-->
<!-- MenuItem,-->
<!-- MenuItems,-->
<!-- TransitionChild,-->
<!-- TransitionRoot,-->
<!-- BellIcon,-->
<!-- CashIcon,-->
<!-- CheckCircleIcon,-->
<!-- ChevronDownIcon,-->
<!-- ChevronRightIcon,-->
<!-- MenuAlt1Icon,-->
<!-- OfficeBuildingIcon,-->
<!-- SearchIcon,-->
<!-- XIcon,-->
<!-- HomeIcon,-->
<!-- UserGroupIcon,-->
<!-- SunIcon,-->
<!-- CalendarIcon,-->
<!-- },-->
<!-- setup() {-->
<!-- const sidebarOpen = ref(false);-->
<!-- return {-->
<!-- cards,-->
<!-- transactions,-->
<!-- statusStyles,-->
<!-- sidebarOpen,-->
<!-- };-->
<!-- },-->
<!--};-->
<!--</script>-->

97
resources/js/Pages/Holidays/Calendar.vue
View File

@ -1,97 +0,0 @@
<template>
<InertiaHead title="Kalendarz" />
<div class="bg-white sm:rounded-lg shadow-md">
<div class="p-4 sm:px-6">
<h2 class="text-lg leading-6 font-medium text-gray-900">
Kalendarz
</h2>
</div>
<div class="grid grid-cols-38 justify-items-center divide-x divide-gray-300">
<div class="w-full text-center col-span-7">
<Menu as="div" class="relative inline-block text-left">
<div>
<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-offset-gray-100 focus:ring-blumilk-500">
Styczeń
<ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
</MenuButton>
</div>
<transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
<MenuItems class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
<div class="py-1">
<MenuItem>
<a href="#" class="text-gray-900 block px-4 py-2 text-sm">Styczeń</a>
</MenuItem>
<MenuItem>
<a href="#" class="text-gray-900 block px-4 py-2 text-sm">Luty</a>
</MenuItem>
<MenuItem>
<a href="#" class="text-gray-900 block px-4 py-2 text-sm">Marzec</a>
</MenuItem>
</div>
</MenuItems>
</transition>
</Menu>
</div>
<div class="w-full text-center font-semibold text-gray-900 py-4 bg-gray-50" v-for="n in 31">{{ n }}
<p class="text-gray-800 font-normal mt-1">Pt</p>
</div>
</div>
<div class="grid grid-cols-38 justify-items-start divide-x divide-gray-300 border-t border-gray-300" v-for="user in users.data"
:key="user.id">
<div class="col-span-7 px-4 py-2 whitespace-nowrap">
<div class="flex justify-start items-center">
<span
class="inline-flex items-center justify-center h-10 w-10 rounded-full"
>
<img
class="h-10 w-10 rounded-full"
:src="user.avatar"
alt=""
>
</span>
<div class="ml-3">
<div class="text-sm font-medium break-all text-gray-900">
{{ user.name }}
</div>
</div>
</div>
</div>
<div class="w-full bg-blumilk-25 divide-x divide-gray-300 flex justify-center" v-for="n in 31">
<!-- <div class="bg-blumilk-500 items-center w-96 m-1 rounded-lg"></div>-->
</div>
</div>
</div>
</template>
<script>
import FlatPickr from 'vue-flatpickr-component';
import {Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions} from '@headlessui/vue';
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
import {CheckIcon, SelectorIcon} from '@heroicons/vue/solid';
import { ChevronDownIcon } from '@heroicons/vue/solid'
export default {
components: {
FlatPickr,
Listbox,
ListboxButton,
ListboxLabel,
ListboxOption,
ListboxOptions,
Menu,
MenuButton,
MenuItem,
MenuItems,
CheckIcon,
SelectorIcon,
ChevronDownIcon,
},
props: {
users: {
type: Object,
default: () => null,
},
},
};
</script>

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

@ -66,7 +66,7 @@
aria-label="Sidebar"
>
<div class="px-2 space-y-1">
<a
<InertiaLink
v-for="item in navigation"
:key="item.name"
:href="item.href"
@ -79,11 +79,11 @@
aria-hidden="true"
/>
{{ item.name }}
</a>
</InertiaLink>
</div>
<div class="mt-6 pt-6">
<div class="px-2 space-y-1">
<a
<InertiaLink
v-for="item in secondaryNavigation"
:key="item.name"
:href="item.href"
@ -95,7 +95,7 @@
aria-hidden="true"
/>
{{ item.name }}
</a>
</InertiaLink>
</div>
</div>
</nav>
@ -104,9 +104,7 @@
<div
class="flex-shrink-0 w-14"
aria-hidden="true"
>
<!-- Dummy element to force sidebar to shrink to fit close icon -->
</div>
/>
</Dialog>
</TransitionRoot>
@ -128,7 +126,7 @@
aria-label="Sidebar"
>
<div class="px-2 space-y-1">
<a
<InertiaLink
v-for="item in navigation"
:key="item.name"
:href="item.href"
@ -141,11 +139,11 @@
aria-hidden="true"
/>
{{ item.name }}
</a>
</InertiaLink>
</div>
<div class="mt-6 pt-6">
<div class="px-2 space-y-1">
<a
<InertiaLink
v-for="item in secondaryNavigation"
:key="item.name"
:href="item.href"
@ -157,7 +155,7 @@
aria-hidden="true"
/>
{{ item.name }}
</a>
</InertiaLink>
</div>
</div>
</nav>
@ -177,19 +175,26 @@
aria-hidden="true"
/>
</button>
<div class="flex-1 px-4 flex justify-between sm:px-6 lg:max-w-7xl lg:mx-auto lg:px-8">
<div class="flex-1 px-4 flex justify-between sm:px-6 lg:px-8">
<div class="flex items-center">
<div>
<Menu
as="div"
class="relative inline-block text-left"
>
<div class="flex justify-center items-center">
<div class="mr-4">
Wybrany rok:
</div>
<div>
<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">
<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"
>
{{ years.current }}
<ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" />
</MenuButton>
</div>
</div>
<transition
enter-active-class="transition ease-out duration-100"
@ -199,7 +204,9 @@
leave-from-class="transform opacity-100 scale-100"
leave-to-class="transform opacity-0 scale-95"
>
<MenuItems class="origin-top-right absolute right-0 mt-2 w-32 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
<MenuItems
class="origin-top-right absolute right-0 mt-2 w-32 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
>
<div class="py-1">
<MenuItem
v-for="(item, index) in years.navigation"
@ -227,30 +234,23 @@
</div>
</div>
<div class="ml-4 flex items-center md:ml-6">
<button
type="button"
class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
>
<span class="sr-only">View notifications</span>
<BellIcon
class="h-6 w-6"
aria-hidden="true"
/>
</button>
<!-- Profile dropdown -->
<Menu
as="div"
class="ml-3 relative"
>
<div>
<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">
<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"
>
<img
class="h-8 w-8 rounded-full"
:src="user.avatar"
alt="Avatar"
>
<span class="hidden ml-3 text-gray-700 text-sm font-medium lg:block"><span class="sr-only">Open user menu for </span>{{ user.name }}</span>
<span class="hidden ml-3 text-gray-700 text-sm font-medium lg:block"><span class="sr-only">Open user menu for </span>{{
user.name
}}</span>
<ChevronDownIcon
class="hidden flex-shrink-0 ml-1 h-5 w-5 text-gray-400 lg:block"
aria-hidden="true"
@ -265,7 +265,9 @@
leave-from-class="transform opacity-100 scale-100"
leave-to-class="transform opacity-0 scale-95"
>
<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">
<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"
>
<MenuItem
v-for="item in userNavigation"
:key="item.name"
@ -290,7 +292,7 @@
</template>
<script>
import { ref } from 'vue';
import {ref} from 'vue'
import {
Dialog,
DialogOverlay,
@ -300,11 +302,12 @@ import {
MenuItems,
TransitionChild,
TransitionRoot,
} from '@headlessui/vue';
} from '@headlessui/vue'
import {
BellIcon,
CogIcon,
HomeIcon,
CollectionIcon,
MenuAlt1Icon,
QuestionMarkCircleIcon,
ShieldCheckIcon,
@ -313,23 +316,18 @@ import {
SunIcon,
StarIcon,
CalendarIcon,
} from '@heroicons/vue/outline';
} from '@heroicons/vue/outline'
import {
CashIcon,
CheckCircleIcon,
CheckIcon,
ChevronDownIcon,
ChevronRightIcon,
OfficeBuildingIcon,
SearchIcon,
} from '@heroicons/vue/solid';
import {computed} from 'vue';
import {usePage} from '@inertiajs/inertia-vue3';
const secondaryNavigation = [
{ name: 'Settings', href: '#', icon: CogIcon },
{ name: 'Help', href: '#', icon: QuestionMarkCircleIcon },
{ name: 'Privacy', href: '#', icon: ShieldCheckIcon },
];
} from '@heroicons/vue/solid'
import {computed} from 'vue'
import {usePage} from '@inertiajs/inertia-vue3'
export default {
components: {
@ -352,26 +350,36 @@ export default {
XIcon,
StarIcon,
HomeIcon,
CheckIcon,
UserGroupIcon,
SunIcon,
CalendarIcon,
},
setup() {
const sidebarOpen = ref(false);
const user = computed(() => usePage().props.value.auth.user);
const years = computed(() => usePage().props.value.years);
const sidebarOpen = ref(false)
const user = computed(() => usePage().props.value.auth.user)
const years = computed(() => usePage().props.value.years)
const navigation = [
{name: 'Strona główna', href: '/', icon: HomeIcon, current: true},
{name: 'Użytkownicy', href: '/users', icon: UserGroupIcon, current: false},
{name: 'Dostępne urlopy', href: '/vacation-limits', icon: SunIcon, current: false},
{name: 'Twoje wnioski', href: '/vacation-requests', icon: CollectionIcon, current: false},
{name: 'Dni wolne', href: '/holidays', icon: StarIcon, current: false},
{name: 'Kalendarz', href: '/calendar', icon: CalendarIcon, current: false},
];
{name: 'Kalendarz urlopów', href: '/vacation-calendar', icon: CalendarIcon, current: false},
]
const userNavigation = [
{name: 'Your Profile', href: '#'},
{name: 'Settings', href: '#'},
{name: 'Wyloguj się', href: '/logout', method: 'post', as: 'button'},
];
]
const secondaryNavigation = [
{name: 'Settings', href: '#', icon: CogIcon},
{name: 'Help', href: '#', icon: QuestionMarkCircleIcon},
{name: 'Privacy', href: '#', icon: ShieldCheckIcon},
]
return {
user,
years,
@ -379,7 +387,7 @@ export default {
secondaryNavigation,
userNavigation,
sidebarOpen,
};
}
},
};
}
</script>

4
routes/web.php
View File

@ -8,6 +8,7 @@ use Toby\Infrastructure\Http\Controllers\HolidayController;
use Toby\Infrastructure\Http\Controllers\LogoutController;
use Toby\Infrastructure\Http\Controllers\SelectYearPeriodController;
use Toby\Infrastructure\Http\Controllers\UserController;
use Toby\Infrastructure\Http\Controllers\VacationCalendarController;
use Toby\Infrastructure\Http\Controllers\VacationLimitController;
use Toby\Infrastructure\Http\Controllers\VacationRequestController;
@ -23,7 +24,8 @@ Route::middleware("auth")->group(function (): void {
Route::get("/vacation-limits", [VacationLimitController::class, "edit"])
->name("vacation.limits");
Route::get("/calendar", [HolidayController::class,"showCalendar"]);
Route::get("/vacation-calendar", [VacationCalendarController::class, "index"])
->name("vacation.calendar");
Route::get("/vacation-limits", [VacationLimitController::class, "edit"])->name("vacation.limits");
Route::put("/vacation-limits", [VacationLimitController::class, "update"]);

11
tailwind.config.js
View File

@ -1,4 +1,4 @@
const defaultTheme = require('tailwindcss/defaultTheme');
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
@ -21,17 +21,14 @@ module.exports = {
'600': '#3C5F97',
'700': '#2C466F',
'800': '#1C2D47',
'900': '#0C141F'
'900': '#0C141F',
},
},
gridTemplateColumns: {
'38': 'repeat(38, minmax(0, 1fr))',
}
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
require('@tailwindcss/line-clamp')
require('@tailwindcss/line-clamp'),
],
};
}