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

#62 - wip

Browse Source
This commit is contained in:
Adrian Hopek
2022-03-07 13:05:49 +01:00
parent 5d64ad9d2a
commit b2f08f61b7
10 changed files with 137 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,7 +11,6 @@
<img
class="mx-auto h-20 w-20 rounded-full"
:src="user.avatar"
alt=""
>
</div>
<div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
@@ -22,7 +21,7 @@
{{ user.name }}
</p>
<p class="text-sm font-medium text-gray-600">
{{ user.role }}
{{ user.displayRole }}
</p>
</div>
</div>
@@ -98,7 +97,7 @@
</section>
</div>
<div class="grid grid-cols-1 gap-4">
<section>
<section v-if="user.role === 'employee'">
<div class="bg-white shadow-md">
<div class="p-4 sm:px-6">
<h2 class="text-lg leading-6 font-medium text-gray-900">
@@ -134,9 +133,70 @@
</li>
</ul>
</div>
<div class="mt-6">
<InertiaLink
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"
>
Zobacz wszystkie
</InertiaLink>
</div>
</div>
</div>
</section>
<section v-else>
<div class="bg-white shadow-md">
<div class="p-4 sm:px-6">
<h2 class="text-lg leading-6 font-medium text-gray-900">
Wnioski oczekujące na akcje
</h2>
</div>
<div class="border-t border-gray-200 pb-5 px-4 sm:px-6">
<div class="flow-root mt-6">
<ul class="-my-5 divide-y divide-gray-200">
<li
v-for="request in vacationRequests.data"
:key="request.id"
class="py-5"
>
<div class="relative focus-within:ring-2 focus-within:ring-cyan-500">
<h3 class="text-sm font-semibold text-blumilk-600 hover:text-blumilk-500">
<InertiaLink
:href="`/vacation-requests/${request.id}`"
class="hover:underline focus:outline-none"
>
<span class="absolute inset-0" />
Wniosek o {{ request.type.toLowerCase() }}
[{{ request.name }}]
</InertiaLink>
</h3>
<p class="mt-1 text-sm text-gray-600">
{{ request.from }} - {{ request.to }}
</p>
<div class="mt-3 text-sm text-gray-600">
<div class="flex">
<img
class="h-10 w-10 rounded-full"
:src="request.user.avatar"
>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">
{{ request.user.name }}
</p>
<p class="text-sm text-gray-500">
{{ request.user.email }}
</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="mt-6">
<InertiaLink
href="/vacation-requests"
: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"
>
Zobacz wszystkie

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

@@ -101,7 +101,7 @@
</div>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
{{ user.role }}
{{ user.displayRole }}
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
{{ user.position }}

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

@@ -9,7 +9,7 @@
</div>
<div>
<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"
>
Dodaj wniosek

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

@@ -123,14 +123,10 @@
<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"
>
<span v-if="form.status === null">
Wszystkie
</span>
<span
v-else
class="flex items-center"
>
{{ form.status.text }}
{{ form.status.name }}
</span>
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<SelectorIcon class="h-5 w-5 text-gray-400" />
@@ -145,40 +141,20 @@
<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"
>
<ListboxOption
v-slot="{ active }"
as="template"
:value="null"
>
<li
: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">
Wszystkie statusy
</div>
<span
v-if="form.status === null"
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
>
<CheckIcon class="h-5 w-5" />
</span>
</li>
</ListboxOption>
<ListboxOption
v-for="status in statuses"
:key="status.value"
v-slot="{ active }"
v-slot="{ active, selected }"
as="template"
:value="status"
>
<li
:class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
>
{{ status.text }}
{{ status.name }}
<span
v-if="form.status?.value === status.value"
v-if="selected"
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
>
<CheckIcon class="h-5 w-5" />
@@ -255,17 +231,18 @@
</InertiaLink>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
<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="request.user.avatar"
>
</span>
<div class="flex justify-center items-center">
<img
class="h-10 w-10 rounded-full"
:src="request.user.avatar"
>
<div class="ml-3">
<div class="text-sm font-medium text-gray-500">
<p class="text-sm font-medium text-gray-900">
{{ request.user.name }}
</div>
</p>
<p class="text-sm text-gray-500">
{{ request.user.email }}
</p>
</div>
</div>
</td>
@@ -376,7 +353,6 @@ import {watch, reactive} from 'vue'
import {debounce} from 'lodash'
import {Inertia} from '@inertiajs/inertia'
import {Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions} from '@headlessui/vue'
import {useStatusInfo} from '@/Composables/statusInfo'
export default {
name: 'VacationRequestIndex',
@@ -415,17 +391,36 @@ export default {
},
},
setup(props) {
const {getStatues, findStatus} = useStatusInfo()
const statuses = [
{
name: 'Wszystkie',
value: 'all',
},
{
name: 'Oczekujące na akcje',
value: 'waiting_for_action',
},
{
name: 'W trakcie',
value: 'pending',
},
{
name: 'Zatwierdzone',
value: 'success',
},
{
name: 'Odrzucone/anulowane',
value: 'failed',
},
]
const form = reactive({
user: props.users.data.find(user => user.id === props.filters.user) ?? null,
status: findStatus(props.filters.status) ?? null,
status: statuses.find(status => status.value === props.filters.status) ?? statuses[0],
})
const statuses = getStatues()
watch(form, debounce(() => {
Inertia.get('/vacation-requests', {user: form.user?.id, status: form.status?.value}, {
Inertia.get('/vacation-requests', {user: form.user?.id, status: form.status.value}, {
preserveState: true,
replace: true,
})