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

Merge branch '#152-dashboard-tables' into #152-dashboard

Browse Source
This commit is contained in:
Kamil Niemczycki 2022-07-04 12:51:58 +02:00
commit 31f771b8e4
Signed by: kamilniemczycki
GPG Key ID: 04D4E2012F969213
5 changed files with 60 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -55,18 +55,20 @@
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-sm text-center border border-gray-300">
<table class="w-full text-sm text-center border-y border-r border-gray-300">
<thead>
<tr>
<th class="py-2 w-64 text-lg font-semibold text-gray-800 border border-gray-300">
<th
class="py-2 w-64 text-lg font-semibold text-gray-800 border-y border-gray-300 bg-white sticky left-0 sticky-border"
>
<div class="flex justify-center items-center">
{{ selectedMonth.name }} {{ years.selected.year }}
{{ selectedMonth.name }}
</div>
</th>
<th
v-for="day in calendar"
:key="day.dayOfMonth"
class="p-2 text-lg font-semibold text-gray-900 border border-gray-300"
class="p-2 text-lg font-semibold text-gray-900 border second:border-l-0 border-gray-300"
style="min-width: 46px;"
:class="{ 'bg-red-100 text-red-800': day.isWeekend || day.isHoliday, 'text-blumilk-600 bg-blumilk-25': day.isToday }"
>
@ -84,22 +86,28 @@
v-for="user in users.data"
:key="user.id"
>
<th class="p-2 border border-gray-300">
<th
class="p-2 border-y border-gray-300 bg-white sticky left-0 sticky-border"
>
<div class="flex justify-start items-center">
<span class="inline-flex justify-center items-center w-8 h-8 rounded-full">
<img :src="user.avatar">
</span>
<div class="ml-3">
<div class="text-sm font-medium text-gray-900 truncate">
{{ user.name }}
</div>
<div class="ml-3 flex items-start flex-col-reverse md:flex-row">
<span
v-for="split in user.name.split(' ', 2)"
:key="split"
class="text-sm first:text-xs md:first:text-sm font-medium text-gray-900 truncate first:mr-1"
>
{{ split }}
</span>
</div>
</div>
</th>
<td
v-for="day in calendar"
:key="day.dayOfMonth"
class="border border-gray-300"
class="border second:border-l-0 border-gray-300"
:class="{ 'bg-blumilk-25': day.isToday, 'bg-red-100': day.isWeekend || day.isHoliday }"
@mouseover="setActiveDay(user.id + '+' + day.date)"
@mouseleave="unsetActiveDay"
@ -176,3 +184,10 @@ function linkParameters(user, day) {
return props.can.createOnBehalfOfEmployee ? { user: user.id, from_date: day.date } : { from_date: day.date }
}
</script>
<style lang="css">
.sticky-border {
box-shadow: inset -1px 0 rgb(209 213 219 / 1),
inset 1px 0 rgb(209 213 219 / 1);
}
</style>

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

@ -9,11 +9,11 @@
</div>
</div>
<div class="border-t border-gray-200">
<div class="overflow-x-auto overflow-y-hidden xl:overflow-x-visible">
<div class="overflow-x-auto xl:overflow-x-visible">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="py-3 px-6 w-64 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase">
<th class="py-3 px-6 w-64 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase bg-gray-50 sticky -left-1">
Pracownik
</th>
<th
@ -38,7 +38,7 @@
:key="item.user.id"
class="hover:bg-blumilk-25"
>
<th class="p-4 text-sm font-semibold text-gray-500 capitalize whitespace-nowrap">
<th class="p-4 text-sm font-semibold text-gray-500 capitalize whitespace-nowrap bg-white sticky -left-1">
<div class="flex justify-start items-center">
<span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
<img
@ -46,12 +46,14 @@
:src="item.user.avatar"
>
</span>
<div class="ml-3">
<div
class="text-sm font-medium text-gray-900 whitespace-nowrap"
<div class="ml-3 flex items-start flex-col-reverse md:flex-row">
<span
v-for="split in item.user.name.split(' ', 2)"
:key="split"
class="text-sm first:text-xs md:first:text-sm font-medium text-gray-900 truncate first:mr-1"
>
{{ item.user.name }}
</div>
{{ split }}
</span>
</div>
</div>
</th>

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

@ -16,7 +16,7 @@
<tr>
<th
scope="col"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap bg-gray-50 sticky -left-1"
>
Imię i nazwisko
</th>
@ -52,8 +52,8 @@
:key="item.id"
class="hover:bg-blumilk-25"
>
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<div class="flex">
<td class="p-4 text-sm text-gray-500 whitespace-nowrap bg-white sticky -left-1 z-10">
<div class="flex justify-start items-center">
<span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
<img
class="w-10 h-10 rounded-full"
@ -61,10 +61,16 @@
>
</span>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900 break-all">
{{ item.user.name }}
<p class="flex items-start flex-col-reverse md:flex-row">
<span
v-for="split in item.user.name.split(' ', 2)"
:key="split"
class="first:text-xs md:first:text-sm font-medium text-gray-900 truncate first:mr-1"
>
{{ split }}
</span>
</p>
<p class="text-sm text-gray-500 break-all">
<p class="hidden md:block text-sm text-gray-500 break-all">
{{ item.user.email }}
</p>
</div>

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

@ -242,46 +242,12 @@
<thead class="bg-gray-50">
<tr>
<th
v-for="head in headers"
:key="head"
scope="col"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Numer
</th>
<th
scope="col"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Pracownik
</th>
<th
scope="col"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Rodzaj wniosku
</th>
<th
scope="col"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Od
</th>
<th
scope="col"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Do
</th>
<th
scope="col"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Dni urlopu
</th>
<th
scope="col"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Status
{{ head }}
</th>
<th scope="col" />
</tr>
@ -381,6 +347,8 @@ const props = defineProps({
types: Object,
})
const headers = ['Numer', 'Pracownik', 'Rodzaj wniosku', 'Od', 'Do', 'Dni urlopu', 'Status']
const statuses = [
{
name: 'Wszystkie',

8
tailwind.config.js
View File

@ -1,4 +1,5 @@
const defaultTheme = require('tailwindcss/defaultTheme')
const plugin = require('tailwindcss/plugin')
module.exports = {
content: [
@ -31,5 +32,12 @@ module.exports = {
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
require('@tailwindcss/line-clamp'),
plugin(function({ addVariant, e }) {
addVariant('second', ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.${e(`second${separator}${className}`)}:nth-child(2)`
})
})
}),
],
}