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
38 changed files with 758 additions and 667 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,47 +3,44 @@
<div class="bg-white shadow-md">
<div class="flex justify-between items-center p-4 sm:px-6">
<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
</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 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">
<table class="min-w-full divide-y divide-gray-200 border-b">
<form @submit.prevent="submitVacationDays">
<div class="overflow-auto xl:overflow-visible">
<table class="min-w-full border-b divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th
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
</th>
<th
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
</th>
<th
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?
</th>
<th
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
</th>
<th
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
</th>
@@ -55,28 +52,28 @@
:key="item.id"
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">
<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
class="h-10 w-10 rounded-full"
class="w-10 h-10 rounded-full"
:src="item.user.avatar"
>
</span>
<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 }}
</p>
<p class="text-sm break-all text-gray-500">
<p class="text-sm text-gray-500 break-all">
{{ item.user.email }}
</p>
</div>
</div>
</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 }}
</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
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']"
@@ -86,18 +83,18 @@
/>
</Switch>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
<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">
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<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 }}
</div>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
<div class="mt-1 sm:mt-0 sm:col-span-2">
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<div class="mt-1 sm:col-span-2 sm:mt-0">
<input
v-model="item.days"
type="number"
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"
: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,23 +110,23 @@
<tr v-if="!form.items.length">
<td
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
</td>
</tr>
</tbody>
</table>
<div class="flex justify-end py-3 px-4">
<button
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"
>
Zapisz
</button>
</div>
</form>
</div>
</div>
<div class="flex justify-end py-3 px-4">
<button
type="submit"
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
</button>
</div>
</form>
</div>
</div>
</template>