- vue composition api (#91)
* wip * fix Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>
This commit is contained in:
Adrian Hopek
GitHub
parent
95f5ed44d6
commit
dcda8c6255
@ -13,5 +13,7 @@ module.exports = {
|
||||
indent: ['error', 2],
|
||||
'vue/html-indent': ['error', 2],
|
||||
'comma-dangle': ['error', 'always-multiline'],
|
||||
'object-curly-spacing': ['error', 'always'],
|
||||
'vue/require-default-prop': 0,
|
||||
},
|
||||
}
|
||||
|
||||
@ -65,7 +65,7 @@ const types = [
|
||||
},
|
||||
]
|
||||
|
||||
export function useVacationTypeInfo() {
|
||||
export default function useVacationTypeInfo() {
|
||||
const getTypes = () => types
|
||||
const findType = value => types.find(type => type.value === value)
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import {computed} from 'vue'
|
||||
import {usePage} from '@inertiajs/inertia-vue3'
|
||||
import { computed } from 'vue'
|
||||
import { usePage } from '@inertiajs/inertia-vue3'
|
||||
|
||||
export default function useCurrentYearPeriodInfo() {
|
||||
const minDate = computed(() => new Date(usePage().props.value.years.current, 0, 1))
|
||||
|
||||
@ -83,9 +83,7 @@
|
||||
v-for="user in users.data"
|
||||
:key="user.id"
|
||||
>
|
||||
<th
|
||||
class="border border-gray-300 py-2 px-4"
|
||||
>
|
||||
<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
|
||||
@ -94,9 +92,7 @@
|
||||
>
|
||||
</span>
|
||||
<div class="ml-3">
|
||||
<div
|
||||
class="text-sm font-medium text-gray-900 whitespace-nowrap"
|
||||
>
|
||||
<div class="text-sm font-medium text-gray-900 whitespace-nowrap">
|
||||
{{ user.name }}
|
||||
</div>
|
||||
</div>
|
||||
@ -122,66 +118,28 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ChevronLeftIcon, ChevronRightIcon} from '@heroicons/vue/solid'
|
||||
import {computed} from 'vue'
|
||||
import {useMonthInfo} from '@/Composables/monthInfo'
|
||||
<script setup>
|
||||
import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/solid'
|
||||
import { computed } from 'vue'
|
||||
import { useMonthInfo } from '@/Composables/monthInfo'
|
||||
import VacationTypeCalendarIcon from '@/Shared/VacationTypeCalendarIcon'
|
||||
|
||||
export default {
|
||||
name: 'VacationCalendar',
|
||||
components: {
|
||||
VacationTypeCalendarIcon,
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
},
|
||||
props: {
|
||||
users: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
auth: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
calendar: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
current: {
|
||||
type: String,
|
||||
default: () => 'january',
|
||||
},
|
||||
selected: {
|
||||
type: String,
|
||||
default: () => 'january',
|
||||
},
|
||||
years: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
can: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const {getMonths, findMonth} = useMonthInfo()
|
||||
const months = getMonths()
|
||||
const props = defineProps({
|
||||
users: Object,
|
||||
auth: Object,
|
||||
calendar: Object,
|
||||
current: String,
|
||||
selected: String,
|
||||
years: Object,
|
||||
can: Object,
|
||||
})
|
||||
|
||||
const currentMonth = computed(() => findMonth(props.current))
|
||||
const selectedMonth = computed(() => findMonth(props.selected))
|
||||
const previousMonth = computed(() => months[months.indexOf(selectedMonth.value) - 1])
|
||||
const nextMonth = computed(() => months[months.indexOf(selectedMonth.value) + 1])
|
||||
const { getMonths, findMonth } = useMonthInfo()
|
||||
|
||||
const months = getMonths()
|
||||
|
||||
return {
|
||||
months,
|
||||
currentMonth,
|
||||
selectedMonth,
|
||||
previousMonth,
|
||||
nextMonth,
|
||||
}
|
||||
},
|
||||
}
|
||||
const currentMonth = computed(() => findMonth(props.current))
|
||||
const selectedMonth = computed(() => findMonth(props.selected))
|
||||
const previousMonth = computed(() => months[months.indexOf(selectedMonth.value) - 1])
|
||||
const nextMonth = computed(() => months[months.indexOf(selectedMonth.value) + 1])
|
||||
</script>
|
||||
|
||||
@ -2,346 +2,38 @@
|
||||
<InertiaHead title="Strona główna" />
|
||||
<div class="grid grid-cols-1 gap-4 items-start lg:grid-cols-3 lg:gap-8">
|
||||
<div class="grid grid-cols-1 gap-4 lg:col-span-2">
|
||||
<section>
|
||||
<div class=" bg-white overflow-hidden shadow">
|
||||
<div class="bg-white p-6">
|
||||
<div class="sm:flex sm:items-center sm:justify-between">
|
||||
<div class="sm:flex sm:space-x-5">
|
||||
<div class="flex-shrink-0">
|
||||
<img
|
||||
class="mx-auto h-20 w-20 rounded-full"
|
||||
:src="user.avatar"
|
||||
>
|
||||
</div>
|
||||
<div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
|
||||
<p class="text-sm font-medium text-gray-600">
|
||||
Cześć,
|
||||
</p>
|
||||
<p class="text-xl font-bold text-gray-900 sm:text-2xl">
|
||||
{{ user.name }}
|
||||
</p>
|
||||
<p class="text-sm font-medium text-gray-600">
|
||||
{{ user.role }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="bg-white shadow-md p-4">
|
||||
<VacationChart :stats="stats" />
|
||||
</div>
|
||||
<div class="h-full">
|
||||
<div class="grid grid-cols-2 gap-4 h-full">
|
||||
<div class="px-4 py-5 bg-white shadow-md sm:p-6">
|
||||
<dd class="mt-1 text-4xl font-semibold text-blumilk-500">
|
||||
{{ stats.remaining }}
|
||||
</dd>
|
||||
<dt class="text-md font-medium text-gray-700 truncate">
|
||||
Pozostało
|
||||
</dt>
|
||||
<dt class="text-sm font-medium text-gray-500 mt-2">
|
||||
Dni do wykorzystania teraz.
|
||||
</dt>
|
||||
</div>
|
||||
<div class="px-4 py-5 bg-white shadow-md sm:p-6">
|
||||
<dd class="mt-1 text-4xl font-semibold text-blumilk-700">
|
||||
{{ stats.used }}
|
||||
</dd>
|
||||
<dt class="text-md font-medium text-gray-700 truncate">
|
||||
Dni wykorzystane
|
||||
</dt>
|
||||
<dt class="text-sm font-medium text-gray-500 mt-2">
|
||||
Dni, które zostały już wykorzystane na urlop wypoczynkowy.
|
||||
</dt>
|
||||
</div>
|
||||
<div class="px-4 py-5 bg-white shadow-md sm:p-6">
|
||||
<dt class="mt-1 text-4xl font-semibold text-blumilk-200">
|
||||
{{ stats.pending }}
|
||||
</dt>
|
||||
<dd class="text-md font-medium text-gray-500 truncate">
|
||||
Rozpatrywane
|
||||
</dd>
|
||||
<dt class="text-sm font-medium text-gray-500 mt-2">
|
||||
Dni czekające na akceptację przełożonych.
|
||||
</dt>
|
||||
</div>
|
||||
<div class="px-4 py-5 bg-white shadow-md sm:p-6">
|
||||
<dt class="mt-1 text-4xl font-semibold text-gray-900">
|
||||
{{ stats.limit }}
|
||||
</dt>
|
||||
<dd class="text-md font-medium text-gray-500 truncate">
|
||||
Limit urlopu
|
||||
</dd>
|
||||
<dt class="text-sm font-medium text-gray-500 mt-2">
|
||||
Twój roczny limit urlopu wypoczynkowego.
|
||||
</dt>
|
||||
</div>
|
||||
<div class="px-4 py-5 bg-white shadow-md sm:p-6 col-span-2">
|
||||
<dt class="mt-1 text-4xl font-semibold text-gray-900">
|
||||
{{ stats.other }}
|
||||
</dt>
|
||||
<dd class="text-md font-medium text-gray-500 truncate">
|
||||
Inne urlopy
|
||||
</dd>
|
||||
<dt class="text-sm font-medium text-gray-500 mt-2">
|
||||
Urlopy bezpłatne, okolicznościowe, zwolnienia lekarskie, itd., które zostały już zatwierdzone.
|
||||
</dt>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<Welcome :user="auth.user" />
|
||||
<VacationStats :stats="stats" />
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<section v-if="can.listAllVacationRequests">
|
||||
<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-blumilk-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 {{ findType(request.type).text.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>
|
||||
<li v-if="! vacationRequests.data.length">
|
||||
<p class="py-2">
|
||||
Brak danych
|
||||
</p>
|
||||
</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 focus:outline-none focus:ring-2 focus:ring-blumilk-500"
|
||||
>
|
||||
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">
|
||||
Twoje wnioski
|
||||
</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-blumilk-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 {{ findType(request.type).text.toLowerCase() }}
|
||||
[{{ request.name }}]
|
||||
</InertiaLink>
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-gray-600">
|
||||
{{ request.from }} - {{ request.to }}
|
||||
</p>
|
||||
<p class="mt-2 text-sm text-gray-600">
|
||||
<Status :status="request.state" />
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="! vacationRequests.data.length">
|
||||
<p class="py-2">
|
||||
Brak danych
|
||||
</p>
|
||||
</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 focus:outline-none focus:ring-2 focus:ring-blumilk-500"
|
||||
>
|
||||
Zobacz wszystkie
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="bg-white shadow-md">
|
||||
<div class="p-4 sm:px-6">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
Dzisiejsze nieobecności
|
||||
</h2>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 px-4 sm:px-6">
|
||||
<ul class="divide-y divide-gray-200">
|
||||
<li
|
||||
v-for="absence in absences.data"
|
||||
:key="absence.user.id"
|
||||
class="py-4 flex"
|
||||
>
|
||||
<img
|
||||
class="h-10 w-10 rounded-full"
|
||||
:src="absence.user.avatar"
|
||||
>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm font-medium text-gray-900">
|
||||
{{ absence.user.name }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-500">
|
||||
{{ absence.user.email }}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="! absences.data.length">
|
||||
<p class="py-2">
|
||||
Brak danych
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="bg-white shadow-md">
|
||||
<div>
|
||||
<div class="p-4 sm:px-6">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
Najbliższe dni wolne
|
||||
</h2>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 px-4 pb-5 sm:px-6">
|
||||
<ul class="divide-y divide-gray-200">
|
||||
<li
|
||||
v-for="holiday in holidays.data"
|
||||
:key="holiday.id.id"
|
||||
class="py-4 flex"
|
||||
>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-900">
|
||||
{{ holiday.name }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-500">
|
||||
{{ holiday.displayDate }}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="! holidays.data.length">
|
||||
<p class="py-2">
|
||||
Brak danych
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<InertiaLink
|
||||
href="/holidays"
|
||||
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 focus:outline-none focus:ring-2 focus:ring-blumilk-500"
|
||||
>
|
||||
Zobacz wszystkie
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<PendingVacationRequests
|
||||
v-if="can.listAllVacationRequests"
|
||||
:requests="vacationRequests.data"
|
||||
/>
|
||||
<UserVacationRequests
|
||||
v-else
|
||||
:requests="vacationRequests.data"
|
||||
/>
|
||||
<AbsenceList :absences="absences.data" />
|
||||
<UpcomingHolidays :holidays="holidays.data" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {computed} from 'vue'
|
||||
import {usePage} from '@inertiajs/inertia-vue3'
|
||||
import Status from '@/Shared/Status'
|
||||
import VacationChart from '@/Shared/VacationChart'
|
||||
import {useVacationTypeInfo} from '@/Composables/vacationTypeInfo'
|
||||
<script setup>
|
||||
import Welcome from '@/Shared/Widgets/Welcome'
|
||||
import VacationStats from '@/Shared/Widgets/VacationStats'
|
||||
import AbsenceList from '@/Shared/Widgets/AbsenceList'
|
||||
import UpcomingHolidays from '@/Shared/Widgets/UpcomingHolidays'
|
||||
import UserVacationRequests from '@/Shared/Widgets/UserVacationRequests'
|
||||
import PendingVacationRequests from '@/Shared/Widgets/PendingVacationRequests'
|
||||
|
||||
export default {
|
||||
name: 'DashboardPage',
|
||||
components: {Status, VacationChart},
|
||||
props: {
|
||||
absences: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
vacationRequests: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
holidays: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
can: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
stats: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
used: 0,
|
||||
pending: 0,
|
||||
remaining: 0,
|
||||
}),
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const user = computed(() => usePage().props.value.auth.user)
|
||||
|
||||
const { findType } = useVacationTypeInfo()
|
||||
|
||||
return {
|
||||
user,
|
||||
findType,
|
||||
}
|
||||
},
|
||||
}
|
||||
defineProps({
|
||||
auth: Object,
|
||||
absences: Object,
|
||||
vacationRequests: Object,
|
||||
holidays: Object,
|
||||
can: Object,
|
||||
stats: Object,
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -81,34 +81,19 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {useForm} from '@inertiajs/inertia-vue3'
|
||||
<script setup>
|
||||
import { useForm } from '@inertiajs/inertia-vue3'
|
||||
import FlatPickr from 'vue-flatpickr-component'
|
||||
import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo'
|
||||
|
||||
export default {
|
||||
name: 'HolidayCreate',
|
||||
components: {
|
||||
FlatPickr,
|
||||
},
|
||||
setup() {
|
||||
const form = useForm({
|
||||
name: null,
|
||||
date: null,
|
||||
})
|
||||
const form = useForm({
|
||||
name: null,
|
||||
date: null,
|
||||
})
|
||||
|
||||
const {minDate, maxDate} = useCurrentYearPeriodInfo()
|
||||
const { minDate, maxDate } = useCurrentYearPeriodInfo()
|
||||
|
||||
return {
|
||||
form,
|
||||
minDate,
|
||||
maxDate,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createHoliday() {
|
||||
this.form.post('/holidays')
|
||||
},
|
||||
},
|
||||
function createHoliday() {
|
||||
form.post('/holidays')
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -80,34 +80,20 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { useForm } from '@inertiajs/inertia-vue3'
|
||||
import FlatPickr from 'vue-flatpickr-component'
|
||||
|
||||
export default {
|
||||
name: 'HolidayEdit',
|
||||
components: {
|
||||
FlatPickr,
|
||||
},
|
||||
props: {
|
||||
holiday: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const form = useForm({
|
||||
name: props.holiday.name,
|
||||
date: props.holiday.date,
|
||||
})
|
||||
const props = defineProps({
|
||||
holiday: Object,
|
||||
})
|
||||
|
||||
return { form }
|
||||
},
|
||||
methods: {
|
||||
editHoliday() {
|
||||
this.form
|
||||
.put(`/holidays/${this.holiday.id}`)
|
||||
},
|
||||
},
|
||||
const form = useForm({
|
||||
name: props.holiday.name,
|
||||
date: props.holiday.date,
|
||||
})
|
||||
|
||||
function editHoliday() {
|
||||
form.put(`/holidays/${props.holiday.id}`)
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -94,10 +94,7 @@
|
||||
:href="`/holidays/${holiday.id}/edit`"
|
||||
:class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']"
|
||||
>
|
||||
<PencilIcon
|
||||
class="mr-2 h-5 w-5 text-blue-500"
|
||||
aria-hidden="true"
|
||||
/> Edytuj
|
||||
<PencilIcon class="mr-2 h-5 w-5 text-blue-500" /> Edytuj
|
||||
</InertiaLink>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
@ -111,10 +108,7 @@
|
||||
:href="`/holidays/${holiday.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 h-5 w-5 text-red-500"
|
||||
aria-hidden="true"
|
||||
/> Usuń
|
||||
<TrashIcon class="mr-2 h-5 w-5 text-red-500" /> Usuń
|
||||
</InertiaLink>
|
||||
</MenuItem>
|
||||
</div>
|
||||
@ -123,9 +117,7 @@
|
||||
</Menu>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
v-if="!holidays.data.length"
|
||||
>
|
||||
<tr v-if="!holidays.data.length">
|
||||
<td
|
||||
colspan="100%"
|
||||
class="text-center py-4 text-xl leading-5 text-gray-700"
|
||||
@ -140,33 +132,12 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { DotsVerticalIcon, PencilIcon, TrashIcon } from '@heroicons/vue/solid'
|
||||
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
|
||||
|
||||
export default {
|
||||
name: 'HolidayIndex',
|
||||
components: {
|
||||
DotsVerticalIcon,
|
||||
PencilIcon,
|
||||
TrashIcon,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuItems,
|
||||
},
|
||||
props: {
|
||||
holidays: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
can: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
defineProps({
|
||||
holidays: Object,
|
||||
can: Object,
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -26,10 +26,7 @@
|
||||
@click="delete errors.oauth"
|
||||
>
|
||||
<span class="sr-only">Close</span>
|
||||
<XIcon
|
||||
class="h-5 w-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<XIcon class="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -43,7 +40,6 @@
|
||||
<img
|
||||
class="mx-auto h-50 w-auto"
|
||||
src="img/logo.png"
|
||||
alt="Blumilk"
|
||||
>
|
||||
<a
|
||||
href="/login/google/start"
|
||||
@ -64,23 +60,16 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { XIcon, ExclamationIcon } from '@heroicons/vue/solid'
|
||||
|
||||
defineProps({
|
||||
errors: Object,
|
||||
})
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import GuestLayout from '@/Shared/Layout/GuestLayout'
|
||||
import {XIcon} from '@heroicons/vue/solid'
|
||||
import {ExclamationIcon} from '@heroicons/vue/solid'
|
||||
|
||||
export default {
|
||||
name: 'LoginPage',
|
||||
components: {
|
||||
XIcon,
|
||||
ExclamationIcon,
|
||||
},
|
||||
layout: GuestLayout,
|
||||
props: {
|
||||
errors: {
|
||||
type: Object,
|
||||
default: () => ({oauth: null}),
|
||||
},
|
||||
},
|
||||
}
|
||||
export default { name: 'LoginPage', layout: GuestLayout }
|
||||
</script>
|
||||
|
||||
@ -258,57 +258,34 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { useForm } from '@inertiajs/inertia-vue3'
|
||||
import FlatPickr from 'vue-flatpickr-component'
|
||||
import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'
|
||||
import { CheckIcon, SelectorIcon } from '@heroicons/vue/solid'
|
||||
|
||||
export default {
|
||||
name: 'UserCreate',
|
||||
components: {
|
||||
FlatPickr,
|
||||
Listbox,
|
||||
ListboxButton,
|
||||
ListboxLabel,
|
||||
ListboxOption,
|
||||
ListboxOptions,
|
||||
CheckIcon,
|
||||
SelectorIcon,
|
||||
},
|
||||
props: {
|
||||
employmentForms: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
roles: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const form = useForm({
|
||||
firstName: null,
|
||||
lastName: null,
|
||||
email: null,
|
||||
employmentForm: props.employmentForms[0],
|
||||
role: props.roles[0],
|
||||
position: null,
|
||||
employmentDate: null,
|
||||
})
|
||||
const props = defineProps({
|
||||
employmentForms: Object,
|
||||
roles: Object,
|
||||
})
|
||||
|
||||
return { form }
|
||||
},
|
||||
methods: {
|
||||
createUser() {
|
||||
this.form
|
||||
.transform(data => ({
|
||||
...data,
|
||||
employmentForm: data.employmentForm.value,
|
||||
role: data.role.value,
|
||||
}))
|
||||
.post('/users')
|
||||
},
|
||||
},
|
||||
const form = useForm({
|
||||
firstName: null,
|
||||
lastName: null,
|
||||
email: null,
|
||||
employmentForm: props.employmentForms[0],
|
||||
role: props.roles[0],
|
||||
position: null,
|
||||
employmentDate: null,
|
||||
})
|
||||
|
||||
function createUser() {
|
||||
form
|
||||
.transform(data => ({
|
||||
...data,
|
||||
employmentForm: data.employmentForm.value,
|
||||
role: data.role.value,
|
||||
}))
|
||||
.post('/users')
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -128,7 +128,9 @@
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<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">
|
||||
<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-for="role in roles"
|
||||
:key="role.value"
|
||||
@ -136,7 +138,9 @@
|
||||
as="template"
|
||||
:value="role"
|
||||
>
|
||||
<li :class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
|
||||
<li
|
||||
:class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
|
||||
>
|
||||
<span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
|
||||
{{ role.label }}
|
||||
</span>
|
||||
@ -182,7 +186,9 @@
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<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">
|
||||
<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-for="employmentForm in employmentForms"
|
||||
:key="employmentForm.value"
|
||||
@ -190,7 +196,9 @@
|
||||
as="template"
|
||||
:value="employmentForm"
|
||||
>
|
||||
<li :class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
|
||||
<li
|
||||
:class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
|
||||
>
|
||||
<span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
|
||||
{{ employmentForm.label }}
|
||||
</span>
|
||||
@ -257,61 +265,35 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {useForm} from '@inertiajs/inertia-vue3'
|
||||
<script setup>
|
||||
import { useForm } from '@inertiajs/inertia-vue3'
|
||||
import FlatPickr from 'vue-flatpickr-component'
|
||||
import {Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions} from '@headlessui/vue'
|
||||
import {CheckIcon, SelectorIcon} from '@heroicons/vue/solid'
|
||||
import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'
|
||||
import { CheckIcon, SelectorIcon } from '@heroicons/vue/solid'
|
||||
|
||||
export default {
|
||||
name: 'UserEdit',
|
||||
components: {
|
||||
FlatPickr,
|
||||
Listbox,
|
||||
ListboxButton,
|
||||
ListboxLabel,
|
||||
ListboxOption,
|
||||
ListboxOptions,
|
||||
CheckIcon,
|
||||
SelectorIcon,
|
||||
},
|
||||
props: {
|
||||
employmentForms: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
roles: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
user: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const form = useForm({
|
||||
firstName: props.user.firstName,
|
||||
lastName: props.user.lastName,
|
||||
email: props.user.email,
|
||||
role: props.roles.find(role => role.value === props.user.role),
|
||||
position: props.user.position,
|
||||
employmentForm: props.employmentForms.find(form => form.value === props.user.employmentForm),
|
||||
employmentDate: props.user.employmentDate,
|
||||
})
|
||||
const props = defineProps({
|
||||
employmentForms: Object,
|
||||
roles: Object,
|
||||
user: Object,
|
||||
})
|
||||
|
||||
return { form }
|
||||
},
|
||||
methods: {
|
||||
editUser() {
|
||||
this.form
|
||||
.transform(data => ({
|
||||
...data,
|
||||
employmentForm: data.employmentForm.value,
|
||||
role: data.role.value,
|
||||
}))
|
||||
.put(`/users/${this.user.id}`)
|
||||
},
|
||||
},
|
||||
const form = useForm({
|
||||
firstName: props.user.firstName,
|
||||
lastName: props.user.lastName,
|
||||
email: props.user.email,
|
||||
role: props.roles.find(role => role.value === props.user.role),
|
||||
position: props.user.position,
|
||||
employmentForm: props.employmentForms.find(form => form.value === props.user.employmentForm),
|
||||
employmentDate: props.user.employmentDate,
|
||||
})
|
||||
|
||||
function editUser() {
|
||||
form
|
||||
.transform(data => ({
|
||||
...data,
|
||||
employmentForm: data.employmentForm.value,
|
||||
role: data.role.value,
|
||||
}))
|
||||
.put(`/users/${props.user.id}`)
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -81,13 +81,10 @@
|
||||
>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<div class="flex">
|
||||
<span
|
||||
class="inline-flex items-center justify-center h-10 w-10 rounded-full"
|
||||
>
|
||||
<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"
|
||||
alt=""
|
||||
>
|
||||
</span>
|
||||
<div class="ml-3">
|
||||
@ -118,10 +115,7 @@
|
||||
class="relative inline-block text-left"
|
||||
>
|
||||
<MenuButton class="rounded-full flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blumilk-500">
|
||||
<DotsVerticalIcon
|
||||
class="h-5 w-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<DotsVerticalIcon class="h-5 w-5" />
|
||||
</MenuButton>
|
||||
|
||||
<transition
|
||||
@ -145,10 +139,7 @@
|
||||
:href="`/users/${user.id}/edit`"
|
||||
:class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']"
|
||||
>
|
||||
<PencilIcon
|
||||
class="mr-2 h-5 w-5 text-blue-500"
|
||||
aria-hidden="true"
|
||||
/> Edytuj
|
||||
<PencilIcon class="mr-2 h-5 w-5 text-blue-500" /> Edytuj
|
||||
</InertiaLink>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
@ -162,10 +153,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 h-5 w-5 text-red-500"
|
||||
aria-hidden="true"
|
||||
/> Usuń
|
||||
<TrashIcon class="mr-2 h-5 w-5 text-red-500" /> Usuń
|
||||
</InertiaLink>
|
||||
</MenuItem>
|
||||
</div>
|
||||
@ -184,10 +172,7 @@
|
||||
:href="`/users/${user.id}/restore`"
|
||||
:class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
|
||||
>
|
||||
<RefreshIcon
|
||||
class="mr-2 h-5 w-5 text-green-500"
|
||||
aria-hidden="true"
|
||||
/> Przywróć
|
||||
<RefreshIcon class="mr-2 h-5 w-5 text-green-500" /> Przywróć
|
||||
</InertiaLink>
|
||||
</MenuItem>
|
||||
</div>
|
||||
@ -208,102 +193,32 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div
|
||||
v-if="users.data.length && users.meta.last_page !== 1"
|
||||
class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6 rounded-b-lg"
|
||||
>
|
||||
<div class="flex-1 flex justify-between sm:hidden">
|
||||
<InertiaLink
|
||||
:is="users.links.prev ? 'InertiaLink': 'span'"
|
||||
:href="users.links.prev"
|
||||
class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
Poprzednia
|
||||
</InertiaLink>
|
||||
<Component
|
||||
:is="users.links.next ? 'InertiaLink': 'span'"
|
||||
:href="users.links.next"
|
||||
class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
Następna
|
||||
</Component>
|
||||
</div>
|
||||
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
||||
<div class="text-sm text-gray-700">
|
||||
Wyświetlanie
|
||||
<span class="font-medium">{{ users.meta.from }}</span>
|
||||
od
|
||||
<span class="font-medium">{{ users.meta.to }}</span>
|
||||
do
|
||||
<span class="font-medium">{{ users.meta.total }}</span>
|
||||
wyników
|
||||
</div>
|
||||
<nav class="relative z-0 inline-flex space-x-1">
|
||||
<template
|
||||
v-for="(link, index) in users.meta.links"
|
||||
:key="index"
|
||||
>
|
||||
<Component
|
||||
:is="link.url ? 'InertiaLink' : 'span'"
|
||||
:href="link.url"
|
||||
:preserve-scroll="true"
|
||||
class="relative inline-flex items-center px-4 py-2 border rounded-md text-sm font-medium"
|
||||
:class="{ 'z-10 bg-blumilk-25 border-blumilk-500 text-blumilk-600': link.active, 'bg-white border-gray-300 text-gray-500': !link.active, 'hover:bg-blumilk-25': link.url, 'border-none': !link.url}"
|
||||
v-text="link.label"
|
||||
/>
|
||||
</template>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<Pagination :pagination="users.meta" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
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 { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
|
||||
import Pagination from '@/Shared/Pagination'
|
||||
|
||||
export default {
|
||||
name: 'UserIndex',
|
||||
components: {
|
||||
SearchIcon,
|
||||
DotsVerticalIcon,
|
||||
PencilIcon,
|
||||
TrashIcon,
|
||||
RefreshIcon,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuItems,
|
||||
},
|
||||
props: {
|
||||
users: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
filters: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
let search = ref(props.filters.search)
|
||||
const props = defineProps({
|
||||
users: Object,
|
||||
filters: Object,
|
||||
})
|
||||
|
||||
watch(search, debounce(value => {
|
||||
Inertia.get('/users', value ? { search: value} : {}, {
|
||||
preserveState: true,
|
||||
replace: true,
|
||||
})
|
||||
}, 300))
|
||||
const search = ref(props.filters.search)
|
||||
|
||||
return {
|
||||
search,
|
||||
}
|
||||
},
|
||||
}
|
||||
watch(search, debounce(value => {
|
||||
Inertia.get('/users', value ? { search: value } : {}, {
|
||||
preserveState: true,
|
||||
replace: true,
|
||||
})
|
||||
}, 300))
|
||||
</script>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
Dostępne dni urlopu dla użytkowników
|
||||
</h2>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
Zarządzaj dostepnymi dniami urlopów dla użytkowników.
|
||||
Zarządzaj dostępnymi dniami urlopów dla użytkowników.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -56,13 +56,10 @@
|
||||
>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<div class="flex">
|
||||
<span
|
||||
class="inline-flex items-center justify-center h-10 w-10 rounded-full"
|
||||
>
|
||||
<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"
|
||||
alt=""
|
||||
>
|
||||
</span>
|
||||
<div class="ml-3">
|
||||
@ -112,9 +109,7 @@
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
v-if="!form.items.length"
|
||||
>
|
||||
<tr v-if="!form.items.length">
|
||||
<td
|
||||
colspan="100%"
|
||||
class="text-center py-4 text-xl leading-5 text-gray-700"
|
||||
@ -137,48 +132,30 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Switch} from '@headlessui/vue'
|
||||
import {useForm} from '@inertiajs/inertia-vue3'
|
||||
<script setup>
|
||||
import { Switch } from '@headlessui/vue'
|
||||
import { useForm } from '@inertiajs/inertia-vue3'
|
||||
|
||||
export default {
|
||||
name: 'VacationLimits',
|
||||
components: {
|
||||
Switch,
|
||||
},
|
||||
props: {
|
||||
limits: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
years: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const form = useForm({
|
||||
items: props.limits,
|
||||
const props = defineProps({
|
||||
limits: Object,
|
||||
years: Object,
|
||||
})
|
||||
|
||||
const form = useForm({
|
||||
items: props.limits,
|
||||
})
|
||||
|
||||
function submitVacationDays() {
|
||||
form
|
||||
.transform(data => ({
|
||||
items: data.items.map(item => ({
|
||||
id: item.id,
|
||||
days: item.hasVacation ? item.days : null,
|
||||
})),
|
||||
}))
|
||||
.put('/vacation-limits', {
|
||||
preserveState: (page) => Object.keys(page.props.errors).length,
|
||||
preserveScroll: true,
|
||||
})
|
||||
|
||||
return {
|
||||
form,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submitVacationDays() {
|
||||
this.form
|
||||
.transform(data => ({
|
||||
items: data.items.map(item => ({
|
||||
id: item.id,
|
||||
days: item.hasVacation ? item.days : null,
|
||||
})),
|
||||
}))
|
||||
.put('/vacation-limits', {
|
||||
preserveState: (page) => Object.keys(page.props.errors).length,
|
||||
preserveScroll: true,
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -322,128 +322,94 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {useForm} from '@inertiajs/inertia-vue3'
|
||||
<script setup>
|
||||
import { useForm } from '@inertiajs/inertia-vue3'
|
||||
import FlatPickr from 'vue-flatpickr-component'
|
||||
import {Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions, Switch} from '@headlessui/vue'
|
||||
import {CheckIcon, SelectorIcon, XCircleIcon} from '@heroicons/vue/solid'
|
||||
import {reactive, ref, watch} from 'vue'
|
||||
import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions, Switch } from '@headlessui/vue'
|
||||
import { CheckIcon, SelectorIcon, XCircleIcon } from '@heroicons/vue/solid'
|
||||
import { reactive, ref, watch } from 'vue'
|
||||
import axios from 'axios'
|
||||
import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo'
|
||||
import VacationChart from '@/Shared/VacationChart'
|
||||
|
||||
export default {
|
||||
name: 'VacationRequestCreate',
|
||||
components: {
|
||||
VacationChart,
|
||||
Switch,
|
||||
FlatPickr,
|
||||
Listbox,
|
||||
ListboxButton,
|
||||
ListboxLabel,
|
||||
ListboxOption,
|
||||
ListboxOptions,
|
||||
CheckIcon,
|
||||
SelectorIcon,
|
||||
XCircleIcon,
|
||||
},
|
||||
props: {
|
||||
auth: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
users: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
vacationTypes: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
holidays: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
can: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const form = useForm({
|
||||
user: props.can.createOnBehalfOfEmployee
|
||||
? props.users.data.find(user => user.id === props.auth.user.id) ?? props.users.data[0]
|
||||
: props.auth.user,
|
||||
from: null,
|
||||
to: null,
|
||||
type: props.vacationTypes[0],
|
||||
comment: null,
|
||||
flowSkipped: false,
|
||||
})
|
||||
|
||||
const estimatedDays = ref([])
|
||||
const props = defineProps({
|
||||
auth: Object,
|
||||
users: Object,
|
||||
vacationTypes: Object,
|
||||
holidays: Object,
|
||||
can: Object,
|
||||
})
|
||||
|
||||
const stats = ref({
|
||||
used: 0,
|
||||
pending: 0,
|
||||
remaining: 0,
|
||||
})
|
||||
const form = useForm({
|
||||
user: props.can.createOnBehalfOfEmployee
|
||||
? props.users.data.find(user => user.id === props.auth.user.id) ?? props.users.data[0]
|
||||
: props.auth.user,
|
||||
from: null,
|
||||
to: null,
|
||||
type: props.vacationTypes[0],
|
||||
comment: null,
|
||||
flowSkipped: false,
|
||||
})
|
||||
|
||||
const {minDate, maxDate} = useCurrentYearPeriodInfo()
|
||||
const estimatedDays = ref([])
|
||||
|
||||
const disableDates = [
|
||||
date => (date.getDay() === 0 || date.getDay() === 6),
|
||||
]
|
||||
const stats = ref({
|
||||
used: 0,
|
||||
pending: 0,
|
||||
remaining: 0,
|
||||
})
|
||||
|
||||
const fromInputConfig = reactive({
|
||||
minDate: minDate,
|
||||
maxDate: maxDate,
|
||||
disable: disableDates,
|
||||
})
|
||||
const { minDate, maxDate } = useCurrentYearPeriodInfo()
|
||||
|
||||
const toInputConfig = reactive({
|
||||
minDate: minDate,
|
||||
maxDate: maxDate,
|
||||
disable: disableDates,
|
||||
})
|
||||
const disableDates = [
|
||||
date => (date.getDay() === 0 || date.getDay() === 6),
|
||||
]
|
||||
|
||||
watch(() => form.user, user => {
|
||||
axios.post('/api/calculate-vacations-stats', {user: user.id})
|
||||
.then(res => stats.value = res.data)
|
||||
}, {immediate: true})
|
||||
const fromInputConfig = reactive({
|
||||
minDate,
|
||||
maxDate,
|
||||
disable: disableDates,
|
||||
})
|
||||
|
||||
return {
|
||||
form,
|
||||
estimatedDays,
|
||||
stats,
|
||||
fromInputConfig,
|
||||
toInputConfig,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createForm() {
|
||||
this.form
|
||||
.transform(data => ({
|
||||
...data,
|
||||
type: data.type.value,
|
||||
user: data.user.id,
|
||||
}))
|
||||
.post('/vacation-requests')
|
||||
},
|
||||
onFromChange(selectedDates, dateStr) {
|
||||
this.form.to = dateStr
|
||||
const toInputConfig = reactive({
|
||||
minDate,
|
||||
maxDate,
|
||||
disable: disableDates,
|
||||
})
|
||||
|
||||
this.refreshEstimatedDays(this.form.from, this.form.to)
|
||||
},
|
||||
onToChange() {
|
||||
this.refreshEstimatedDays(this.form.from, this.form.to)
|
||||
},
|
||||
refreshEstimatedDays(from, to) {
|
||||
if (from && to) {
|
||||
axios.post('/api/calculate-vacation-days', {from, to})
|
||||
.then(res => this.estimatedDays = res.data)
|
||||
}
|
||||
},
|
||||
},
|
||||
watch(() => form.user, async user => {
|
||||
const res = await axios.post('/api/calculate-vacations-stats', { user: user.id })
|
||||
|
||||
stats.value = res.data
|
||||
}, { immediate: true })
|
||||
|
||||
function createForm() {
|
||||
form
|
||||
.transform(data => ({
|
||||
...data,
|
||||
type: data.type.value,
|
||||
user: data.user.id,
|
||||
}))
|
||||
.post('/vacation-requests')
|
||||
}
|
||||
|
||||
function onFromChange(selectedDates, dateStr) {
|
||||
form.to = dateStr
|
||||
|
||||
refreshEstimatedDays(form.from, form.to)
|
||||
}
|
||||
|
||||
function onToChange() {
|
||||
refreshEstimatedDays(form.from, form.to)
|
||||
}
|
||||
|
||||
async function refreshEstimatedDays(from, to) {
|
||||
if (from && to) {
|
||||
const res = await axios.post('/api/calculate-vacation-days', { from, to })
|
||||
|
||||
estimatedDays.value = res.data
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@ -118,9 +118,7 @@
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
v-if="! requests.data.length"
|
||||
>
|
||||
<tr v-if="! requests.data.length">
|
||||
<td
|
||||
colspan="100%"
|
||||
class="text-center py-4 text-xl leading-5 text-gray-700"
|
||||
@ -130,131 +128,39 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div
|
||||
v-if="requests.data.length && requests.meta.last_page !== 1"
|
||||
class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6 rounded-b-lg"
|
||||
>
|
||||
<div class="flex-1 flex justify-between sm:hidden">
|
||||
<InertiaLink
|
||||
:is="requests.links.prev ? 'InertiaLink': 'span'"
|
||||
:href="requests.links.prev"
|
||||
class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
Poprzednia
|
||||
</InertiaLink>
|
||||
<Component
|
||||
:is="requests.links.next ? 'InertiaLink': 'span'"
|
||||
:href="requests.links.next"
|
||||
class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
Następna
|
||||
</Component>
|
||||
</div>
|
||||
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
||||
<div class="text-sm text-gray-700">
|
||||
Wyświetlanie
|
||||
<span class="font-medium">{{ requests.meta.from }}</span>
|
||||
od
|
||||
<span class="font-medium">{{ requests.meta.to }}</span>
|
||||
do
|
||||
<span class="font-medium">{{ requests.meta.total }}</span>
|
||||
wyników
|
||||
</div>
|
||||
<nav class="relative z-0 inline-flex space-x-1">
|
||||
<template
|
||||
v-for="(link, index) in requests.meta.links"
|
||||
:key="index"
|
||||
>
|
||||
<Component
|
||||
:is="link.url ? 'InertiaLink' : 'span'"
|
||||
:href="link.url"
|
||||
:preserve-scroll="true"
|
||||
class="relative inline-flex items-center px-4 py-2 border rounded-md text-sm font-medium"
|
||||
:class="{ 'z-10 bg-blumilk-25 border-blumilk-500 text-blumilk-600': link.active, 'bg-white border-gray-300 text-gray-500': !link.active, 'hover:bg-blumilk-25': link.url, 'border-none': !link.url}"
|
||||
v-text="link.label"
|
||||
/>
|
||||
</template>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<Pagination :pagination="requests.meta" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
ChevronRightIcon,
|
||||
ClockIcon,
|
||||
DotsVerticalIcon,
|
||||
PencilIcon,
|
||||
ThumbDownIcon,
|
||||
ThumbUpIcon,
|
||||
TrashIcon,
|
||||
XIcon,
|
||||
CheckIcon,
|
||||
DocumentTextIcon,
|
||||
} from '@heroicons/vue/solid'
|
||||
<script setup>
|
||||
import { ChevronRightIcon } from '@heroicons/vue/solid'
|
||||
import Status from '@/Shared/Status'
|
||||
import VacationType from '@/Shared/VacationType'
|
||||
import Pagination from '@/Shared/Pagination'
|
||||
|
||||
export default {
|
||||
name: 'VacationRequestIndex',
|
||||
components: {
|
||||
DotsVerticalIcon,
|
||||
PencilIcon,
|
||||
TrashIcon,
|
||||
ChevronRightIcon,
|
||||
ThumbUpIcon,
|
||||
ClockIcon,
|
||||
XIcon,
|
||||
CheckIcon,
|
||||
DocumentTextIcon,
|
||||
ThumbDownIcon,
|
||||
Status,
|
||||
VacationType,
|
||||
},
|
||||
props: {
|
||||
requests: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
stats: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
all: 0,
|
||||
pending: 0,
|
||||
success: 0,
|
||||
failed: 0,
|
||||
}),
|
||||
},
|
||||
filters: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const statuses = [
|
||||
{
|
||||
name: 'Wszystkie',
|
||||
value: 'all',
|
||||
},
|
||||
{
|
||||
name: 'W trakcie',
|
||||
value: 'pending',
|
||||
},
|
||||
{
|
||||
name: 'Zatwierdzone',
|
||||
value: 'success',
|
||||
},
|
||||
{
|
||||
name: 'Odrzucone/anulowane',
|
||||
value: 'failed',
|
||||
},
|
||||
]
|
||||
defineProps({
|
||||
requests: Object,
|
||||
stats: Object,
|
||||
filters: Object,
|
||||
})
|
||||
|
||||
return {
|
||||
statuses,
|
||||
}
|
||||
const statuses = [
|
||||
{
|
||||
name: 'Wszystkie',
|
||||
value: 'all',
|
||||
},
|
||||
}
|
||||
{
|
||||
name: 'W trakcie',
|
||||
value: 'pending',
|
||||
},
|
||||
{
|
||||
name: 'Zatwierdzone',
|
||||
value: 'success',
|
||||
},
|
||||
{
|
||||
name: 'Odrzucone/anulowane',
|
||||
value: 'failed',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
@ -93,7 +93,9 @@
|
||||
:src="user.avatar"
|
||||
class="flex-shrink-0 h-6 w-6 rounded-full"
|
||||
>
|
||||
<span :class="[form.user?.id === user.id ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']">
|
||||
<span
|
||||
:class="[form.user?.id === user.id ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']"
|
||||
>
|
||||
{{ user.name }}
|
||||
</span>
|
||||
</div>
|
||||
@ -123,9 +125,7 @@
|
||||
<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
|
||||
class="flex items-center"
|
||||
>
|
||||
<span class="flex items-center">
|
||||
{{ form.status.name }}
|
||||
</span>
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||
@ -274,9 +274,7 @@
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
v-if="! requests.data.length"
|
||||
>
|
||||
<tr v-if="! requests.data.length">
|
||||
<td
|
||||
colspan="100%"
|
||||
class="text-center py-4 text-xl leading-5 text-gray-700"
|
||||
@ -286,153 +284,59 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div
|
||||
v-if="requests.data.length && requests.meta.last_page !== 1"
|
||||
class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6 rounded-b-lg"
|
||||
>
|
||||
<div class="flex-1 flex justify-between sm:hidden">
|
||||
<InertiaLink
|
||||
:is="requests.links.prev ? 'InertiaLink': 'span'"
|
||||
:href="requests.links.prev"
|
||||
class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
Poprzednia
|
||||
</InertiaLink>
|
||||
<Component
|
||||
:is="requests.links.next ? 'InertiaLink': 'span'"
|
||||
:href="requests.links.next"
|
||||
class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
Następna
|
||||
</Component>
|
||||
</div>
|
||||
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
||||
<div class="text-sm text-gray-700">
|
||||
Wyświetlanie
|
||||
<span class="font-medium">{{ requests.meta.from }}</span>
|
||||
od
|
||||
<span class="font-medium">{{ requests.meta.to }}</span>
|
||||
do
|
||||
<span class="font-medium">{{ requests.meta.total }}</span>
|
||||
wyników
|
||||
</div>
|
||||
<nav class="relative z-0 inline-flex space-x-1">
|
||||
<template
|
||||
v-for="(link, index) in requests.meta.links"
|
||||
:key="index"
|
||||
>
|
||||
<Component
|
||||
:is="link.url ? 'InertiaLink' : 'span'"
|
||||
:href="link.url"
|
||||
:preserve-scroll="true"
|
||||
class="relative inline-flex items-center px-4 py-2 border rounded-md text-sm font-medium"
|
||||
:class="{ 'z-10 bg-blumilk-25 border-blumilk-500 text-blumilk-600': link.active, 'bg-white border-gray-300 text-gray-500': !link.active, 'hover:bg-blumilk-25': link.url, 'border-none': !link.url}"
|
||||
v-text="link.label"
|
||||
/>
|
||||
</template>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<Pagination :pagination="requests.meta" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
CheckIcon,
|
||||
ChevronRightIcon,
|
||||
ClockIcon,
|
||||
DocumentTextIcon,
|
||||
DotsVerticalIcon,
|
||||
PencilIcon,
|
||||
SelectorIcon,
|
||||
ThumbDownIcon,
|
||||
ThumbUpIcon,
|
||||
TrashIcon,
|
||||
XCircleIcon,
|
||||
XIcon,
|
||||
} from '@heroicons/vue/solid'
|
||||
<script setup>
|
||||
import { CheckIcon, ChevronRightIcon, SelectorIcon } from '@heroicons/vue/solid'
|
||||
import Status from '@/Shared/Status'
|
||||
import VacationType from '@/Shared/VacationType'
|
||||
import {watch, reactive} from 'vue'
|
||||
import {debounce} from 'lodash'
|
||||
import {Inertia} from '@inertiajs/inertia'
|
||||
import {Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions} from '@headlessui/vue'
|
||||
import { watch, reactive } from 'vue'
|
||||
import { debounce } from 'lodash'
|
||||
import { Inertia } from '@inertiajs/inertia'
|
||||
import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'
|
||||
import Pagination from '@/Shared/Pagination'
|
||||
|
||||
export default {
|
||||
name: 'VacationRequestIndex',
|
||||
components: {
|
||||
Listbox,
|
||||
ListboxButton,
|
||||
ListboxLabel,
|
||||
ListboxOption,
|
||||
ListboxOptions,
|
||||
DotsVerticalIcon,
|
||||
PencilIcon,
|
||||
TrashIcon,
|
||||
ChevronRightIcon,
|
||||
ThumbUpIcon,
|
||||
ClockIcon,
|
||||
XIcon,
|
||||
CheckIcon,
|
||||
DocumentTextIcon,
|
||||
ThumbDownIcon,
|
||||
Status,
|
||||
VacationType,
|
||||
SelectorIcon,
|
||||
XCircleIcon,
|
||||
const props = defineProps({
|
||||
requests: Object,
|
||||
users: Object,
|
||||
filters: Object,
|
||||
})
|
||||
|
||||
const statuses = [
|
||||
{
|
||||
name: 'Wszystkie',
|
||||
value: 'all',
|
||||
},
|
||||
props: {
|
||||
requests: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
users: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
filters: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
{
|
||||
name: 'Oczekujące na akcje',
|
||||
value: 'waiting_for_action',
|
||||
},
|
||||
setup(props) {
|
||||
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: statuses.find(status => status.value === props.filters.status) ?? statuses[0],
|
||||
})
|
||||
|
||||
watch(form, debounce(() => {
|
||||
Inertia.get('/vacation-requests', {user: form.user?.id, status: form.status.value}, {
|
||||
preserveState: true,
|
||||
replace: true,
|
||||
})
|
||||
}, 300))
|
||||
|
||||
return {form, statuses}
|
||||
{
|
||||
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: statuses.find(status => status.value === props.filters.status) ?? statuses[0],
|
||||
})
|
||||
|
||||
watch(form, debounce(() => {
|
||||
Inertia.get('/vacation-requests', { user: form.user?.id, status: form.status.value }, {
|
||||
preserveState: true,
|
||||
replace: true,
|
||||
})
|
||||
}, 300))
|
||||
</script>
|
||||
|
||||
@ -245,33 +245,15 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {PaperClipIcon} from '@heroicons/vue/outline'
|
||||
<script setup>
|
||||
import { PaperClipIcon } from '@heroicons/vue/outline'
|
||||
import Activity from '@/Shared/Activity'
|
||||
import Status from '@/Shared/Status'
|
||||
import VacationType from '@/Shared/VacationType'
|
||||
|
||||
export default {
|
||||
name: 'VacationRequestShow',
|
||||
components: {
|
||||
VacationType,
|
||||
Activity,
|
||||
PaperClipIcon,
|
||||
Status,
|
||||
},
|
||||
props: {
|
||||
request: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
can: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
activities: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
},
|
||||
}
|
||||
defineProps({
|
||||
request: Object,
|
||||
can: Object,
|
||||
activities: Object,
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -31,30 +31,16 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {computed} from 'vue'
|
||||
import {useStatusInfo} from '@/Composables/statusInfo'
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useStatusInfo } from '@/Composables/statusInfo'
|
||||
|
||||
export default {
|
||||
name: 'VacationRequestActivity',
|
||||
props: {
|
||||
activity: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
last: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { findStatus } = useStatusInfo()
|
||||
const props = defineProps({
|
||||
activity: Object,
|
||||
last: Boolean,
|
||||
})
|
||||
|
||||
const statusInfo = computed(() => findStatus(props.activity.state))
|
||||
const { findStatus } = useStatusInfo()
|
||||
|
||||
return {
|
||||
statusInfo,
|
||||
}
|
||||
},
|
||||
}
|
||||
const statusInfo = computed(() => findStatus(props.activity.state))
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<div class="min-h-full">
|
||||
<MainMenu />
|
||||
<MainMenu
|
||||
:auth="auth"
|
||||
:years="years"
|
||||
/>
|
||||
<main class="lg:ml-64 flex flex-col flex-1 py-8">
|
||||
<div class="px-4">
|
||||
<slot />
|
||||
@ -9,38 +12,26 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import MainMenu from '@/Shared/MainMenu'
|
||||
import {useToast} from 'vue-toastification'
|
||||
import {watch} from 'vue'
|
||||
import { useToast } from 'vue-toastification'
|
||||
import { defineProps, watch } from 'vue'
|
||||
|
||||
export default {
|
||||
name: 'AppLayout',
|
||||
components: {
|
||||
MainMenu,
|
||||
},
|
||||
props: {
|
||||
flash: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const toast = useToast()
|
||||
const props = defineProps({
|
||||
flash: Object,
|
||||
auth: Object,
|
||||
years: Object,
|
||||
})
|
||||
|
||||
watch(() => props.flash, flash => {
|
||||
if (flash.success) {
|
||||
toast.success(flash.success)
|
||||
}
|
||||
const toast = useToast()
|
||||
|
||||
if (flash.error) {
|
||||
toast.error(flash.error)
|
||||
}
|
||||
}, {immediate:true})
|
||||
watch(() => props.flash, flash => {
|
||||
if (flash.success) {
|
||||
toast.success(flash.success)
|
||||
}
|
||||
|
||||
return {
|
||||
toast,
|
||||
}
|
||||
},
|
||||
}
|
||||
if (flash.error) {
|
||||
toast.error(flash.error)
|
||||
}
|
||||
}, { immediate:true })
|
||||
</script>
|
||||
|
||||
@ -3,9 +3,3 @@
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'GuestLayout',
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -91,7 +91,6 @@
|
||||
</Dialog>
|
||||
</TransitionRoot>
|
||||
|
||||
<!-- Static sidebar for desktop -->
|
||||
<div class="hidden lg:flex lg:w-64 lg:flex-col lg:fixed lg:inset-y-0">
|
||||
<div class="flex flex-col flex-grow bg-blumilk-700 pt-5 pb-4 overflow-y-auto">
|
||||
<div class="flex items-center flex-shrink-0 px-4">
|
||||
@ -202,30 +201,23 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-4 flex items-center md:ml-6">
|
||||
<!-- Profile dropdown -->
|
||||
<Menu
|
||||
as="div"
|
||||
class="ml-3 relative"
|
||||
>
|
||||
<div>
|
||||
<MenuButton
|
||||
class="max-w-xs bg-white rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500 lg:p-2 lg:rounded-md lg:hover:bg-gray-50"
|
||||
<MenuButton
|
||||
class="max-w-xs bg-white rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500 lg:p-2 lg:rounded-md lg:hover:bg-gray-50"
|
||||
>
|
||||
<img
|
||||
class="h-8 w-8 rounded-full"
|
||||
:src="auth.user.avatar"
|
||||
>
|
||||
<img
|
||||
class="h-8 w-8 rounded-full"
|
||||
:src="auth.user.avatar"
|
||||
alt="Avatar"
|
||||
>
|
||||
<span class="hidden ml-3 text-gray-700 text-sm font-medium lg:block">
|
||||
<span class="sr-only">Open user menu for </span>
|
||||
{{ auth.user.name }}
|
||||
</span>
|
||||
<ChevronDownIcon
|
||||
class="hidden flex-shrink-0 ml-1 h-5 w-5 text-gray-400 lg:block"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</MenuButton>
|
||||
</div>
|
||||
<span class="hidden ml-3 text-gray-700 text-sm font-medium lg:block">
|
||||
<span class="sr-only">Open user menu for </span>
|
||||
{{ auth.user.name }}
|
||||
</span>
|
||||
<ChevronDownIcon class="hidden flex-shrink-0 ml-1 h-5 w-5 text-gray-400 lg:block" />
|
||||
</MenuButton>
|
||||
<transition
|
||||
enter-active-class="transition ease-out duration-100"
|
||||
enter-from-class="transform opacity-0 scale-95"
|
||||
@ -237,18 +229,14 @@
|
||||
<MenuItems
|
||||
class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
>
|
||||
<MenuItem
|
||||
v-for="item in userNavigation"
|
||||
:key="item.name"
|
||||
v-slot="{ active }"
|
||||
>
|
||||
<MenuItem v-slot="{ active }">
|
||||
<InertiaLink
|
||||
:href="item.href"
|
||||
:method="item.method"
|
||||
:as="item.as"
|
||||
href="/logout"
|
||||
method="POST"
|
||||
as="button"
|
||||
:class="[active ? 'bg-gray-100' : '', 'block w-full text-left px-4 py-2 text-sm text-gray-700']"
|
||||
>
|
||||
{{ item.name }}
|
||||
Wyloguj się
|
||||
</InertiaLink>
|
||||
</MenuItem>
|
||||
</MenuItems>
|
||||
@ -260,8 +248,8 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ref} from 'vue'
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import {
|
||||
Dialog,
|
||||
DialogOverlay,
|
||||
@ -273,7 +261,6 @@ import {
|
||||
TransitionRoot,
|
||||
} from '@headlessui/vue'
|
||||
import {
|
||||
BellIcon,
|
||||
HomeIcon,
|
||||
CollectionIcon,
|
||||
MenuAlt1Icon,
|
||||
@ -283,71 +270,58 @@ import {
|
||||
StarIcon,
|
||||
CalendarIcon, DocumentTextIcon,
|
||||
} from '@heroicons/vue/outline'
|
||||
import {
|
||||
CashIcon,
|
||||
CheckCircleIcon,
|
||||
CheckIcon,
|
||||
ChevronDownIcon,
|
||||
ChevronRightIcon,
|
||||
OfficeBuildingIcon,
|
||||
SearchIcon,
|
||||
} from '@heroicons/vue/solid'
|
||||
import {computed} from 'vue'
|
||||
import {usePage} from '@inertiajs/inertia-vue3'
|
||||
import { CheckIcon, ChevronDownIcon } from '@heroicons/vue/solid'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Dialog,
|
||||
DialogOverlay,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuItems,
|
||||
TransitionChild,
|
||||
TransitionRoot,
|
||||
BellIcon,
|
||||
CashIcon,
|
||||
CheckCircleIcon,
|
||||
ChevronDownIcon,
|
||||
ChevronRightIcon,
|
||||
MenuAlt1Icon,
|
||||
OfficeBuildingIcon,
|
||||
SearchIcon,
|
||||
XIcon,
|
||||
StarIcon,
|
||||
HomeIcon,
|
||||
CheckIcon,
|
||||
UserGroupIcon,
|
||||
SunIcon,
|
||||
CalendarIcon,
|
||||
},
|
||||
setup() {
|
||||
const sidebarOpen = ref(false)
|
||||
const props = defineProps({
|
||||
auth: Object,
|
||||
years: Object,
|
||||
})
|
||||
|
||||
const auth = computed(() => usePage().props.value.auth)
|
||||
const years = computed(() => usePage().props.value.years)
|
||||
const sidebarOpen = ref(false)
|
||||
|
||||
const navigation = computed(() =>
|
||||
[
|
||||
{name: 'Moje wnioski', href: '/vacation-requests/me', component: 'VacationRequest/Index' , icon: DocumentTextIcon, can: true},
|
||||
{name: 'Wnioski urlopowe', href: '/vacation-requests', component: 'VacationRequest/IndexForApprovers', icon: CollectionIcon, can: auth.value.can.listAllVacationRequests},
|
||||
{name: 'Kalendarz urlopów', href: '/vacation-calendar', component: 'Calendar', icon: CalendarIcon, can: true},
|
||||
{name: 'Dni wolne', href: '/holidays', component: 'Holidays/Index', icon: StarIcon, can: true},
|
||||
{name: 'Limity urlopów', href: '/vacation-limits', component: 'VacationLimits', icon: SunIcon, can: auth.value.can.manageVacationLimits},
|
||||
{name: 'Użytkownicy', href: '/users', component: 'Users/Index', icon: UserGroupIcon, can: auth.value.can.manageUsers},
|
||||
].filter(item => item.can))
|
||||
|
||||
const userNavigation = [
|
||||
{name: 'Wyloguj się', href: '/logout', method: 'post', as: 'button'},
|
||||
]
|
||||
|
||||
return {
|
||||
auth,
|
||||
years,
|
||||
navigation,
|
||||
userNavigation,
|
||||
sidebarOpen,
|
||||
}
|
||||
},
|
||||
}
|
||||
const navigation = computed(() =>
|
||||
[
|
||||
{
|
||||
name: 'Moje wnioski',
|
||||
href: '/vacation-requests/me',
|
||||
component: 'VacationRequest/Index',
|
||||
icon: DocumentTextIcon,
|
||||
can: true,
|
||||
},
|
||||
{
|
||||
name: 'Wnioski urlopowe',
|
||||
href: '/vacation-requests',
|
||||
component: 'VacationRequest/IndexForApprovers',
|
||||
icon: CollectionIcon,
|
||||
can: props.auth.can.listAllVacationRequests,
|
||||
},
|
||||
{
|
||||
name: 'Kalendarz urlopów',
|
||||
href: '/vacation-calendar',
|
||||
component: 'Calendar',
|
||||
icon: CalendarIcon,
|
||||
can: true,
|
||||
},
|
||||
{
|
||||
name: 'Dni wolne',
|
||||
href: '/holidays',
|
||||
component: 'Holidays/Index',
|
||||
icon: StarIcon,
|
||||
can: true,
|
||||
},
|
||||
{
|
||||
name: 'Limity urlopów',
|
||||
href: '/vacation-limits',
|
||||
component: 'VacationLimits',
|
||||
icon: SunIcon,
|
||||
can: props.auth.can.manageVacationLimits,
|
||||
},
|
||||
{
|
||||
name: 'Użytkownicy',
|
||||
href: '/users',
|
||||
component: 'Users/Index',
|
||||
icon: UserGroupIcon,
|
||||
can: props.auth.can.manageUsers,
|
||||
},
|
||||
].filter(item => item.can))
|
||||
</script>
|
||||
|
||||
61
resources/js/Shared/Pagination.vue
Normal file
61
resources/js/Shared/Pagination.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="pagination.last_page !== 1"
|
||||
class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6 rounded-b-lg"
|
||||
>
|
||||
<div class="flex-1 flex justify-between sm:hidden">
|
||||
<Component
|
||||
:is="prevLink ? 'InertiaLink': 'span'"
|
||||
:href="prevLink"
|
||||
class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
Poprzednia
|
||||
</Component>
|
||||
<Component
|
||||
:is="nextLink ? 'InertiaLink': 'span'"
|
||||
:href="nextLink"
|
||||
class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
Następna
|
||||
</Component>
|
||||
</div>
|
||||
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
||||
<div class="text-sm text-gray-700">
|
||||
Wyświetlanie
|
||||
<span class="font-medium">{{ pagination.from }}</span>
|
||||
od
|
||||
<span class="font-medium">{{ pagination.to }}</span>
|
||||
do
|
||||
<span class="font-medium">{{ pagination.total }}</span>
|
||||
wyników
|
||||
</div>
|
||||
<nav class="relative z-0 inline-flex space-x-1">
|
||||
<template
|
||||
v-for="(link, index) in pagination.links"
|
||||
:key="index"
|
||||
>
|
||||
<Component
|
||||
:is="link.url ? 'InertiaLink' : 'span'"
|
||||
:href="link.url"
|
||||
:preserve-scroll="true"
|
||||
class="relative inline-flex items-center px-4 py-2 border rounded-md text-sm font-medium"
|
||||
:class="{ 'z-10 bg-blumilk-25 border-blumilk-500 text-blumilk-600': link.active, 'bg-white border-gray-300 text-gray-500': !link.active, 'hover:bg-blumilk-25': link.url, 'border-none': !link.url}"
|
||||
v-text="link.label"
|
||||
/>
|
||||
</template>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
pagination: Object,
|
||||
})
|
||||
|
||||
const prevLink = computed(() => props.pagination.links.at(0)?.url)
|
||||
const nextLink = computed(() => props.pagination.links.at(-1)?.url)
|
||||
|
||||
</script>
|
||||
@ -2,36 +2,21 @@
|
||||
<div class="flex items-center">
|
||||
<component
|
||||
:is="statusInfo.solid.icon"
|
||||
:class="[statusInfo.solid.color ,'w-5 h-5 mr-1']"
|
||||
:class="[statusInfo.solid.color, 'w-5 h-5 mr-1']"
|
||||
/>
|
||||
<span>{{ statusInfo.text }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {computed} from 'vue'
|
||||
import {useStatusInfo} from '@/Composables/statusInfo'
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useStatusInfo } from '@/Composables/statusInfo'
|
||||
|
||||
export default {
|
||||
name: 'VacationRequestStatus',
|
||||
props: {
|
||||
status: {
|
||||
type: String,
|
||||
default: () => null,
|
||||
},
|
||||
last: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { findStatus } = useStatusInfo()
|
||||
const props = defineProps({
|
||||
status: String,
|
||||
})
|
||||
|
||||
const statusInfo = computed(() => findStatus(props.status))
|
||||
const { findStatus } = useStatusInfo()
|
||||
|
||||
return {
|
||||
statusInfo,
|
||||
}
|
||||
},
|
||||
}
|
||||
const statusInfo = computed(() => findStatus(props.status))
|
||||
</script>
|
||||
|
||||
@ -6,17 +6,13 @@
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { PieChart } from 'echarts/charts'
|
||||
import {
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
} from 'echarts/components'
|
||||
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import VChart from 'vue-echarts'
|
||||
import {computed} from 'vue'
|
||||
import { computed } from 'vue'
|
||||
|
||||
use([
|
||||
CanvasRenderer,
|
||||
@ -26,68 +22,59 @@ use([
|
||||
LegendComponent,
|
||||
])
|
||||
|
||||
export default {
|
||||
name: 'VacationChart',
|
||||
components: {
|
||||
VChart,
|
||||
const props = defineProps({
|
||||
stats: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
used: 0,
|
||||
pending: 0,
|
||||
remaining: 0,
|
||||
}),
|
||||
},
|
||||
props: {
|
||||
stats: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
used: 0,
|
||||
pending: 0,
|
||||
remaining: 0,
|
||||
}),
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const option = computed(() => ({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)',
|
||||
},
|
||||
color: [
|
||||
'#2C466F',
|
||||
'#AABDDD',
|
||||
'#527ABA',
|
||||
],
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ['Wykorzystane', 'Rozpatrywane', 'Pozostałe'],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Urlop wypoczynkowy',
|
||||
type: 'pie',
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2,
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inner',
|
||||
formatter: param => param.value !== 0 ? param.value : '' ,
|
||||
fontWeight: 'bold',
|
||||
fontSize: 16,
|
||||
color: '#FFFFFF',
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{ value: props.stats.used, name: 'Wykorzystane' },
|
||||
{ value: props.stats.pending, name: 'Rozpatrywane' },
|
||||
{ value: props.stats.remaining, name: 'Pozostałe' },
|
||||
],
|
||||
radius: ['30%', '70%'],
|
||||
},
|
||||
],
|
||||
}))
|
||||
})
|
||||
|
||||
return { option }
|
||||
const option = computed(() => ({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)',
|
||||
},
|
||||
}
|
||||
color: [
|
||||
'#2C466F',
|
||||
'#AABDDD',
|
||||
'#527ABA',
|
||||
],
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ['Wykorzystane', 'Rozpatrywane', 'Pozostałe'],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Urlop wypoczynkowy',
|
||||
type: 'pie',
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2,
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inner',
|
||||
formatter: param => param.value !== 0 ? param.value : '' ,
|
||||
fontWeight: 'bold',
|
||||
fontSize: 16,
|
||||
color: '#FFFFFF',
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{ value: props.stats.used, name: 'Wykorzystane' },
|
||||
{ value: props.stats.pending, name: 'Rozpatrywane' },
|
||||
{ value: props.stats.remaining, name: 'Pozostałe' },
|
||||
],
|
||||
radius: ['30%', '70%'],
|
||||
},
|
||||
],
|
||||
}))
|
||||
</script>
|
||||
|
||||
@ -9,30 +9,15 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {computed} from 'vue'
|
||||
import {useVacationTypeInfo} from '@/Composables/vacationTypeInfo'
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import useVacationTypeInfo from '@/Composables/vacationTypeInfo'
|
||||
|
||||
export default {
|
||||
name: 'VacationType',
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: () => null,
|
||||
},
|
||||
last: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { findType } = useVacationTypeInfo()
|
||||
const props = defineProps({
|
||||
type: String,
|
||||
})
|
||||
|
||||
const vacationTypeInfo = computed(() => findType(props.type))
|
||||
const { findType } = useVacationTypeInfo()
|
||||
|
||||
return {
|
||||
vacationTypeInfo,
|
||||
}
|
||||
},
|
||||
}
|
||||
const vacationTypeInfo = computed(() => findType(props.type))
|
||||
</script>
|
||||
|
||||
@ -15,34 +15,16 @@
|
||||
</Popper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {computed} from 'vue'
|
||||
import {useVacationTypeInfo} from '@/Composables/vacationTypeInfo'
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import useVacationTypeInfo from '@/Composables/vacationTypeInfo'
|
||||
import Popper from 'vue3-popper'
|
||||
|
||||
export default {
|
||||
name: 'VacationTypeCalendarIcon',
|
||||
components: {
|
||||
Popper,
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: () => null,
|
||||
},
|
||||
last: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { findType } = useVacationTypeInfo()
|
||||
const props = defineProps({
|
||||
type: String,
|
||||
})
|
||||
|
||||
const typeInfo = computed(() => findType(props.type))
|
||||
const { findType } = useVacationTypeInfo()
|
||||
|
||||
return {
|
||||
typeInfo,
|
||||
}
|
||||
},
|
||||
}
|
||||
const typeInfo = computed(() => findType(props.type))
|
||||
</script>
|
||||
|
||||
42
resources/js/Shared/Widgets/AbsenceList.vue
Normal file
42
resources/js/Shared/Widgets/AbsenceList.vue
Normal file
@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<section class="bg-white shadow-md">
|
||||
<div class="p-4 sm:px-6">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
Dzisiejsze nieobecności
|
||||
</h2>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 px-4 sm:px-6">
|
||||
<ul class="divide-y divide-gray-200">
|
||||
<li
|
||||
v-for="absence in absences"
|
||||
:key="absence.user.id"
|
||||
class="py-4 flex"
|
||||
>
|
||||
<img
|
||||
class="h-10 w-10 rounded-full"
|
||||
:src="absence.user.avatar"
|
||||
>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm font-medium text-gray-900">
|
||||
{{ absence.user.name }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-500">
|
||||
{{ absence.user.email }}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="! absences.length">
|
||||
<p class="py-2">
|
||||
Brak danych
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
absences: Object,
|
||||
})
|
||||
</script>
|
||||
76
resources/js/Shared/Widgets/PendingVacationRequests.vue
Normal file
76
resources/js/Shared/Widgets/PendingVacationRequests.vue
Normal file
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<section 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 requests"
|
||||
:key="request.id"
|
||||
class="py-5"
|
||||
>
|
||||
<div class="relative focus-within:ring-2 focus-within:ring-blumilk-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 {{ findType(request.type).text.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>
|
||||
<li v-if="! requests.length">
|
||||
<p class="py-2">
|
||||
Brak danych
|
||||
</p>
|
||||
</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 focus:outline-none focus:ring-2 focus:ring-blumilk-500"
|
||||
>
|
||||
Zobacz wszystkie
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import useVacationTypeInfo from '@/Composables/vacationTypeInfo'
|
||||
|
||||
defineProps({
|
||||
requests: Object,
|
||||
})
|
||||
|
||||
const { findType } = useVacationTypeInfo()
|
||||
</script>
|
||||
46
resources/js/Shared/Widgets/UpcomingHolidays.vue
Normal file
46
resources/js/Shared/Widgets/UpcomingHolidays.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<section class="bg-white shadow-md">
|
||||
<div class="p-4 sm:px-6">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
Najbliższe dni wolne
|
||||
</h2>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 px-4 pb-5 sm:px-6">
|
||||
<ul class="divide-y divide-gray-200">
|
||||
<li
|
||||
v-for="holiday in holidays"
|
||||
:key="holiday.id.id"
|
||||
class="py-4 flex"
|
||||
>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-900">
|
||||
{{ holiday.name }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-500">
|
||||
{{ holiday.displayDate }}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="! holidays.length">
|
||||
<p class="py-2">
|
||||
Brak danych
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<InertiaLink
|
||||
href="/holidays"
|
||||
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 focus:outline-none focus:ring-2 focus:ring-blumilk-500"
|
||||
>
|
||||
Zobacz wszystkie
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
holidays: Object,
|
||||
})
|
||||
</script>
|
||||
62
resources/js/Shared/Widgets/UserVacationRequests.vue
Normal file
62
resources/js/Shared/Widgets/UserVacationRequests.vue
Normal file
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<section class="bg-white shadow-md">
|
||||
<div class="p-4 sm:px-6">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
Twoje wnioski
|
||||
</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 requests"
|
||||
:key="request.id"
|
||||
class="py-5"
|
||||
>
|
||||
<div class="relative focus-within:ring-2 focus-within:ring-blumilk-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 {{ findType(request.type).text.toLowerCase() }}
|
||||
[{{ request.name }}]
|
||||
</InertiaLink>
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-gray-600">
|
||||
{{ request.from }} - {{ request.to }}
|
||||
</p>
|
||||
<p class="mt-2 text-sm text-gray-600">
|
||||
<Status :status="request.state" />
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="! requests.length">
|
||||
<p class="py-2">
|
||||
Brak danych
|
||||
</p>
|
||||
</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 focus:outline-none focus:ring-2 focus:ring-blumilk-500"
|
||||
>
|
||||
Zobacz wszystkie
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import useVacationTypeInfo from '@/Composables/vacationTypeInfo'
|
||||
|
||||
defineProps({
|
||||
requests: Object,
|
||||
})
|
||||
|
||||
const { findType } = useVacationTypeInfo()
|
||||
</script>
|
||||
74
resources/js/Shared/Widgets/VacationStats.vue
Normal file
74
resources/js/Shared/Widgets/VacationStats.vue
Normal file
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<section class="grid grid-cols-2 gap-4">
|
||||
<div class="bg-white shadow-md p-4">
|
||||
<VacationChart :stats="stats" />
|
||||
</div>
|
||||
<div class="h-full">
|
||||
<div class="grid grid-cols-2 gap-4 h-full">
|
||||
<div class="px-4 py-5 bg-white shadow-md sm:p-6">
|
||||
<dd class="mt-1 text-4xl font-semibold text-blumilk-500">
|
||||
{{ stats.remaining }}
|
||||
</dd>
|
||||
<dt class="text-md font-medium text-gray-700 truncate">
|
||||
Pozostało
|
||||
</dt>
|
||||
<dt class="text-sm font-medium text-gray-500 mt-2">
|
||||
Dni do wykorzystania teraz.
|
||||
</dt>
|
||||
</div>
|
||||
<div class="px-4 py-5 bg-white shadow-md sm:p-6">
|
||||
<dd class="mt-1 text-4xl font-semibold text-blumilk-700">
|
||||
{{ stats.used }}
|
||||
</dd>
|
||||
<dt class="text-md font-medium text-gray-700 truncate">
|
||||
Dni wykorzystane
|
||||
</dt>
|
||||
<dt class="text-sm font-medium text-gray-500 mt-2">
|
||||
Dni, które zostały już wykorzystane na urlop wypoczynkowy.
|
||||
</dt>
|
||||
</div>
|
||||
<div class="px-4 py-5 bg-white shadow-md sm:p-6">
|
||||
<dt class="mt-1 text-4xl font-semibold text-blumilk-200">
|
||||
{{ stats.pending }}
|
||||
</dt>
|
||||
<dd class="text-md font-medium text-gray-500 truncate">
|
||||
Rozpatrywane
|
||||
</dd>
|
||||
<dt class="text-sm font-medium text-gray-500 mt-2">
|
||||
Dni czekające na akceptację przełożonych.
|
||||
</dt>
|
||||
</div>
|
||||
<div class="px-4 py-5 bg-white shadow-md sm:p-6">
|
||||
<dt class="mt-1 text-4xl font-semibold text-gray-900">
|
||||
{{ stats.limit }}
|
||||
</dt>
|
||||
<dd class="text-md font-medium text-gray-500 truncate">
|
||||
Limit urlopu
|
||||
</dd>
|
||||
<dt class="text-sm font-medium text-gray-500 mt-2">
|
||||
Twój roczny limit urlopu wypoczynkowego.
|
||||
</dt>
|
||||
</div>
|
||||
<div class="px-4 py-5 bg-white shadow-md sm:p-6 col-span-2">
|
||||
<dt class="mt-1 text-4xl font-semibold text-gray-900">
|
||||
{{ stats.other }}
|
||||
</dt>
|
||||
<dd class="text-md font-medium text-gray-500 truncate">
|
||||
Inne urlopy
|
||||
</dd>
|
||||
<dt class="text-sm font-medium text-gray-500 mt-2">
|
||||
Urlopy bezpłatne, okolicznościowe, zwolnienia lekarskie, itd., które zostały już zatwierdzone.
|
||||
</dt>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import VacationChart from '@/Shared/VacationChart'
|
||||
|
||||
defineProps({
|
||||
stats: Object,
|
||||
})
|
||||
</script>
|
||||
35
resources/js/Shared/Widgets/Welcome.vue
Normal file
35
resources/js/Shared/Widgets/Welcome.vue
Normal file
@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<section>
|
||||
<div class=" bg-white overflow-hidden shadow">
|
||||
<div class="bg-white p-6">
|
||||
<div class="sm:flex sm:items-center sm:justify-between">
|
||||
<div class="sm:flex sm:space-x-5">
|
||||
<div class="flex-shrink-0">
|
||||
<img
|
||||
class="mx-auto h-20 w-20 rounded-full"
|
||||
:src="user.avatar"
|
||||
>
|
||||
</div>
|
||||
<div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
|
||||
<p class="text-sm font-medium text-gray-600">
|
||||
Cześć,
|
||||
</p>
|
||||
<p class="text-xl font-bold text-gray-900 sm:text-2xl">
|
||||
{{ user.name }}
|
||||
</p>
|
||||
<p class="text-sm font-medium text-gray-600">
|
||||
{{ user.role }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
user: Object,
|
||||
})
|
||||
</script>
|
||||
@ -1,6 +1,6 @@
|
||||
import {createApp, h} from 'vue'
|
||||
import {createInertiaApp, Head, Link} from '@inertiajs/inertia-vue3'
|
||||
import {InertiaProgress} from '@inertiajs/progress'
|
||||
import { createApp, h } from 'vue'
|
||||
import { createInertiaApp, Head, Link } from '@inertiajs/inertia-vue3'
|
||||
import { InertiaProgress } from '@inertiajs/progress'
|
||||
import AppLayout from '@/Shared/Layout/AppLayout'
|
||||
import Flatpickr from 'flatpickr'
|
||||
import { Polish } from 'flatpickr/dist/l10n/pl.js'
|
||||
@ -14,8 +14,8 @@ createInertiaApp({
|
||||
|
||||
return page
|
||||
},
|
||||
setup({el, App, props, plugin}) {
|
||||
createApp({render: () => h(App, props)})
|
||||
setup({ el, App, props, plugin }) {
|
||||
createApp({ render: () => h(App, props) })
|
||||
.use(plugin)
|
||||
.use(Toast, {
|
||||
position: 'bottom-right',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user