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

#90 - user profile (#125)

Browse Source 
* fix css focuses

* #90 - wip

* #90 - fix to generate PDF

* #90 - wip

* #90 - wip

* #90 - wip

* #90 - wip

* #90 - fix to calendar

* #90 - wip

* #90 - fix

* #90 - fix lint

* #90 - fix

* Apply suggestions from code review

Co-authored-by: Krzysztof Rewak <krzysztof.rewak@gmail.com>
Co-authored-by: Ewelina Lasowy <56546832+EwelinaLasowy@users.noreply.github.com>

* #90 - cr fixes

* #90 - fix

Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>
Co-authored-by: Krzysztof Rewak <krzysztof.rewak@gmail.com>
Co-authored-by: Ewelina Lasowy <56546832+EwelinaLasowy@users.noreply.github.com>
This commit is contained in:
Adrian Hopek
2022-04-14 11:58:45 +02:00
committed by GitHub
parent 459b62500e
commit cc981b02b4
62 changed files with 765 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
resources/js/Pages/AnnualSummary.vue
View File

@@ -39,7 +39,7 @@
offset-distance="0"
>
<div :class="[day.isPendingVacation && 'mx-0.5']">
<button :class="[day.isPendingVacation && `border-dashed`, `${getVacationBorder(day)} isolate bg-white w-full hover:bg-blumilk-25 border-b-4 py-1.5 font-medium`]">
<button :class="[day.isPendingVacation && `border-dashed`, `${getVacationBorder(day)} isolate bg-white w-full hover:bg-blumilk-25 border-b-4 py-1.5 font-medium focus:outline-blumilk-500`]">
<time
:datetime="day.date.toISODate()"
:class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'mx-auto flex h-7 w-7 p-4 items-center justify-center']"
@@ -58,7 +58,7 @@
hover
offset-distance="0"
>
<button class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent">
<button class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent focus:outline-blumilk-500">
<time
:datetime="day.date.toISODate()"
:class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'text-red-700 font-bold mx-auto flex h-7 w-7 p-4 items-center justify-center']"
@@ -74,7 +74,7 @@
</Popper>
<button
v-else
class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent"
class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent focus:outline-blumilk-500"
>
<time
:datetime="day.date.toISODate()"

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

@@ -11,20 +11,21 @@
v-if="previousMonth"
as="button"
:href="`/vacation/calendar/${previousMonth.value}`"
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"
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 focus:outline-blumilk-500 md:px-2 md:w-9 md:hover:bg-gray-50"
>
<ChevronLeftIcon class="w-5 h-5" />
</InertiaLink>
<span
v-else
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"
class="flex justify-center items-center p-2 text-gray-400 bg-gray-100 rounded-l-md border border-r-0 border-gray-300 md:px-2 md:w-9"
>
<ChevronLeftIcon class="w-5 h-5" />
</span>
<InertiaLink
v-if="years.current.year === years.selected.year"
as="button"
:href="`/vacation/calendar/${currentMonth.value}`"
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"
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 focus:outline-blumilk-500 md:flex"
>
Dzisiaj
</InertiaLink>
@@ -32,13 +33,13 @@
v-if="nextMonth"
as="button"
:href="`/vacation/calendar/${nextMonth.value}`"
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"
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 focus:outline-blumilk-500 md:px-2 md:w-9 md:hover:bg-gray-50"
>
<ChevronRightIcon class="w-5 h-5" />
</InertiaLink>
<span
v-else
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"
class="flex justify-center items-center p-2 text-gray-400 bg-gray-100 rounded-r-md border border-l-0 border-gray-300 md:px-2 md:w-9"
>
<ChevronRightIcon class="w-5 h-5" />
</span>

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

@@ -14,8 +14,14 @@
v-else
:requests="vacationRequests.data"
/>
<AbsenceList :absences="absences.data" />
<UpcomingHolidays :holidays="holidays.data" />
<AbsenceList
v-if="years.current.year === years.selected.year"
:absences="absences.data"
/>
<UpcomingHolidays
v-if="years.current.year === years.selected.year"
:holidays="holidays.data"
/>
</div>
</div>
</template>
@@ -35,5 +41,6 @@ defineProps({
holidays: Object,
can: Object,
stats: Object,
years: Object,
})
</script>

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

@@ -49,9 +49,9 @@
<tr
v-for="holiday in holidays.data"
:key="holiday.id"
class="hover:bg-blumilk-25"
:class="[holiday.isPast ? 'bg-gray-100' : 'hover:bg-blumilk-25']"
>
<td class="p-4 text-sm font-semibold text-gray-500 capitalize whitespace-nowrap">
<td class="p-4 text-sm font-semibold text-gray-700 capitalize whitespace-nowrap">
{{ holiday.name }}
</td>
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">

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

@@ -112,7 +112,7 @@
</ListboxLabel>
<div class="relative mt-1 sm:col-span-2 sm:mt-0">
<ListboxButton
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="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none 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.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>
@@ -166,7 +166,7 @@
</ListboxLabel>
<div class="relative mt-1 sm:col-span-2 sm:mt-0">
<ListboxButton
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="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none 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 }"
>
<span class="block truncate">{{ form.employmentForm.label }}</span>

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

@@ -112,7 +112,7 @@
</ListboxLabel>
<div class="relative mt-1 sm:col-span-2 sm:mt-0">
<ListboxButton
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="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none 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 }"
>
<span class="block truncate">{{ form.role.label }}</span>
@@ -170,7 +170,7 @@
</ListboxLabel>
<div class="relative mt-1 sm:col-span-2 sm:mt-0">
<ListboxButton
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="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none 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 }"
>
<span class="block truncate">{{ form.employmentForm.label }}</span>

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

@@ -46,6 +46,12 @@
>
Rola
</th>
<th
scope="col"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Ostatnia aktywność
</th>
<th
scope="col"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
@@ -97,6 +103,9 @@
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
{{ user.role }}
</td>
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
{{ user.lastActiveAt ? DateTime.fromSQL(user.lastActiveAt).toRelative() : '-' }}
</td>
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
{{ user.position }}
</td>
@@ -150,7 +159,7 @@
: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']"
>
<TrashIcon class="mr-2 w-5 h-5 text-red-500" /> Usuń
<BanIcon class="mr-2 w-5 h-5 text-red-500" /> Zablokuj
</InertiaLink>
</MenuItem>
</div>
@@ -201,8 +210,9 @@ import { ref, watch } from 'vue'
import { Inertia } from '@inertiajs/inertia'
import { debounce } from 'lodash'
import { SearchIcon } from '@heroicons/vue/outline'
import { DotsVerticalIcon, PencilIcon, TrashIcon, RefreshIcon } from '@heroicons/vue/solid'
import { DotsVerticalIcon, PencilIcon, BanIcon, RefreshIcon } from '@heroicons/vue/solid'
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
import { DateTime } from 'luxon'
import Pagination from '@/Shared/Pagination'
const props = defineProps({

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

@@ -63,7 +63,7 @@
leave-to-class="opacity-0"
>
<ListboxOptions
class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 focus:ring-blumilk-500 ring-opacity-5 shadow-lg 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
v-for="user in users.data"
@@ -156,7 +156,7 @@
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 focus:ring-blumilk-500 ring-opacity-5 shadow-lg 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
v-for="vacationType in vacationTypes"
:key="vacationType.value"

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

@@ -19,7 +19,7 @@
<button
v-for="(status, index) in statuses"
:key="index"
: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 focus:outline-blumilk-500 bg-white py-4 px-4 text-sm font-medium text-center']"
@click="form.status = status"
>
<span>{{ status.name }}</span>
@@ -140,7 +140,7 @@
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<InertiaLink
: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 focus:outline-blumilk-500"
>
{{ request.name }}
</InertiaLink>
@@ -163,13 +163,13 @@
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<InertiaLink
:href="`/vacation/requests/${request.id}`"
class="flex justify-around"
class="flex justify-around focus:outline-blumilk-500"
>
<ChevronRightIcon class="block w-6 h-6 fill-blumilk-500" />
</InertiaLink>
<InertiaLink
:href="`/vacation/requests/${request.id}`"
class="absolute inset-0"
class="absolute inset-0 focus:outline-blumilk-500"
/>
</td>
</tr>

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

@@ -219,7 +219,7 @@
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<InertiaLink
: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 focus:outline-blumilk-500"
>
{{ request.name }}
</InertiaLink>
@@ -257,13 +257,13 @@
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<InertiaLink
:href="`/vacation/requests/${request.id}`"
class="flex justify-around"
class="flex justify-around focus:outline-blumilk-500"
>
<ChevronRightIcon class="block w-6 h-6 fill-blumilk-500" />
</InertiaLink>
<InertiaLink
:href="`/vacation/requests/${request.id}`"
class="absolute inset-0"
class="absolute inset-0 focus:outline-blumilk-500"
/>
</td>
</tr>