#44 - vacation monthly usage
This commit is contained in:
Adrian Hopek
@@ -22,7 +22,7 @@
|
||||
<div class="border-t border-gray-200">
|
||||
<div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-100">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
|
||||
@@ -4,117 +4,91 @@
|
||||
<div class="flex justify-between items-center p-4 sm:px-6">
|
||||
<div class="flex items-center">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
Wykorzystanie miesięczne urlopu
|
||||
Wykorzystanie miesięczne urlopu wypoczynkowego
|
||||
</h2>
|
||||
<div class="ml-5">
|
||||
ROK TUTAJ
|
||||
</div>
|
||||
<div class="ml-5">
|
||||
Select z typami urlopów
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-center text-sm border border-gray-300">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-64 py-2 border text-lg font-semibold text-gray-800 border-gray-300" />
|
||||
<th
|
||||
class="border border-gray-300 text-sm font-semibold text-gray-900 py-4 px-2"
|
||||
>
|
||||
Limit zaległy (2021)
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 text-sm font-semibold text-gray-900 py-4 px-2"
|
||||
>
|
||||
Limit obecny (2022)
|
||||
</th>
|
||||
<th
|
||||
v-for="month in months"
|
||||
:key="month"
|
||||
class="border border-gray-300 text-sm font-semibold text-gray-900 py-4 px-2"
|
||||
style="min-width: 46px;"
|
||||
>
|
||||
<div>
|
||||
{{ month.shortcut }}
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 text-sm font-semibold text-gray-900 py-4 px-2"
|
||||
>
|
||||
Wykorzystany
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 text-sm font-semibold text-gray-900 py-4 px-2"
|
||||
>
|
||||
Rozpatrywany
|
||||
</th>
|
||||
<th
|
||||
class="border border-gray-300 text-sm font-semibold text-gray-900 py-4 px-2"
|
||||
>
|
||||
Pozostało
|
||||
</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"
|
||||
>
|
||||
<div class="border-t border-gray-200">
|
||||
<div class="overflow-x-auto xl:overflow-x-visible overflow-y-hidden">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="w-64 px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider text-left">
|
||||
Pracownik
|
||||
</th>
|
||||
<th
|
||||
v-for="month in months"
|
||||
:key="month"
|
||||
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider text-center"
|
||||
:class="{'bg-blumilk-50': isCurrentMonth(month)}"
|
||||
style="min-width: 46px;"
|
||||
>
|
||||
<span :class="{'text-blumilk-600': isCurrentMonth(month)}">
|
||||
{{ month.name }}
|
||||
</span>
|
||||
<div class="ml-3">
|
||||
<div
|
||||
class="text-sm font-medium text-gray-900 whitespace-nowrap"
|
||||
>
|
||||
{{ user.name }}
|
||||
</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider text-center">
|
||||
Wykorzystanie urlopu
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-100">
|
||||
<tr
|
||||
v-for="item in monthlyUsage"
|
||||
:key="item.user.id"
|
||||
class="hover:bg-blumilk-25"
|
||||
>
|
||||
<th class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 font-semibold capitalize">
|
||||
<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="item.user.avatar"
|
||||
>
|
||||
</span>
|
||||
<div class="ml-3">
|
||||
<div
|
||||
class="text-sm font-medium text-gray-900 whitespace-nowrap"
|
||||
>
|
||||
{{ item.user.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<td
|
||||
v-for="index in 17"
|
||||
:key="index"
|
||||
class="border border-gray-300"
|
||||
/>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</th>
|
||||
<td
|
||||
v-for="month in months"
|
||||
:key="month.value"
|
||||
class="px-4 py-4 text-sm text-gray-500 font-semibold text-center"
|
||||
:class="{'bg-blumilk-25': isCurrentMonth(month)}"
|
||||
>
|
||||
{{ item.months[month.value] ?? '-' }}
|
||||
</td>
|
||||
<td class="px-4 py-4 text-sm text-gray-500 font-semibold text-center">
|
||||
<div style="min-width: 300px;">
|
||||
<VacationBar :stats="{ used: item.stats.used, pending: item.stats.pending, remaining: item.stats.remaining }" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {useMonthInfo} from '@/Composables/monthInfo'
|
||||
<script setup>
|
||||
import { useMonthInfo } from '@/Composables/monthInfo'
|
||||
import VacationBar from '@/Shared/VacationBar'
|
||||
|
||||
export default {
|
||||
name: 'MonthlyUsage',
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
users: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
can: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const {getMonths} = useMonthInfo()
|
||||
const months = getMonths()
|
||||
return {
|
||||
months,
|
||||
}
|
||||
},
|
||||
const props = defineProps({
|
||||
monthlyUsage: Object,
|
||||
currentMonth: String,
|
||||
})
|
||||
|
||||
const { getMonths } = useMonthInfo()
|
||||
const months = getMonths()
|
||||
|
||||
function isCurrentMonth(month) {
|
||||
return props.currentMonth === month.value
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user