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

wip

Browse Source
This commit is contained in:
Adrian Hopek 2022-03-14 14:20:36 +01:00
parent 91980163e0
commit 1843451f3f
9 changed files with 43 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/Composables/statusInfo.js
View File

@ -125,7 +125,7 @@ const statuses = [
export function useStatusInfo() {
const getStatues = () => statuses
const findStatus = value => statuses.find(month => month.value === value)
const findStatus = value => statuses.find(status => status.value === value)
return {
getStatues,

10
resources/js/Composables/vacationTypeInfo.js
View File

@ -8,7 +8,7 @@ import HandHeartOutlineIcon from 'vue-material-design-icons/HandHeartOutline.vue
import CalendarCheckIcon from 'vue-material-design-icons/CalendarCheck.vue'
import MedicalBagIcon from 'vue-material-design-icons/MedicalBag.vue'
const statuses = [
const types = [
{
text: 'Urlop wypoczynkowy',
value: 'vacation',
@ -129,11 +129,11 @@ const statuses = [
]
export function useVacationTypeInfo() {
const getStatues = () => statuses
const findStatus = value => statuses.find(month => month.value === value)
const getTypes = () => types
const findType = value => types.find(type => type.value === value)
return {
getStatues,
findStatus,
getTypes,
findType,
}
}

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

@ -112,14 +112,7 @@
v-if="day.vacations.includes(user.id)"
class="flex justify-center items-center"
>
<Popper hover>
<VacationTypeCalendarIcon :status="day.vacationTypes[user.id]" />
<template #content>
<div class="px-2 py-1 bg-white text-xs text-gray-900 shadow-md ">
{{ day.vacationTypes[user.id] }}
</div>
</template>
</Popper>
<VacationTypeCalendarIcon :type="day.vacationTypes[user.id]" />
</div>
</td>
</tr>
@ -135,7 +128,6 @@ import {CheckIcon, ChevronDownIcon} from '@heroicons/vue/solid'
import {computed} from 'vue'
import {useMonthInfo} from '@/Composables/monthInfo'
import VacationTypeCalendarIcon from '@/Shared/VacationTypeCalendarIcon'
import Popper from 'vue3-popper'
export default {
name: 'VacationCalendar',
@ -147,7 +139,6 @@ export default {
MenuItems,
CheckIcon,
ChevronDownIcon,
Popper,
},
props: {
users: {

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

@ -119,7 +119,7 @@
class="hover:underline focus:outline-none"
>
<span class="absolute inset-0" />
Wniosek o {{ request.type.toLowerCase() }}
Wniosek o {{ findType(request.type).text.toLowerCase() }}
[{{ request.name }}]
</InertiaLink>
</h3>
@ -185,7 +185,7 @@
class="hover:underline focus:outline-none"
>
<span class="absolute inset-0" />
Wniosek o {{ request.type.toLowerCase() }}
Wniosek o {{ findType(request.type).text.toLowerCase() }}
[{{ request.name }}]
</InertiaLink>
</h3>
@ -302,6 +302,7 @@ 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'
export default {
name: 'DashboardPage',
@ -335,8 +336,11 @@ export default {
setup() {
const user = computed(() => usePage().props.value.auth.user)
const { findType } = useVacationTypeInfo()
return {
user,
findType,
}
},
}

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

@ -85,7 +85,7 @@
</InertiaLink>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
<VacationType :status="request.type" />
<VacationType :type="request.type" />
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
{{ request.from }}

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

@ -247,7 +247,7 @@
</div>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
<VacationType :status="request.type" />
<VacationType :type="request.type" />
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
{{ request.from }}

2
resources/js/Pages/VacationRequest/Show.vue
View File

@ -44,7 +44,7 @@
Rodzaj urlopu
</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<VacationType :status="request.type" />
<VacationType :type="request.type" />
</dd>
</div>
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">

6
resources/js/Shared/VacationType.vue
View File

@ -16,7 +16,7 @@ import {useVacationTypeInfo} from '@/Composables/vacationTypeInfo'
export default {
name: 'VacationType',
props: {
status: {
type: {
type: String,
default: () => null,
},
@ -26,9 +26,9 @@ export default {
},
},
setup(props) {
const { findStatus } = useVacationTypeInfo()
const { findType } = useVacationTypeInfo()
const vacationTypeInfo = computed(() => findStatus(props.status))
const vacationTypeInfo = computed(() => findType(props.type))
return {
vacationTypeInfo,

25
resources/js/Shared/VacationTypeCalendarIcon.vue
View File

@ -1,24 +1,35 @@
<template>
<Popper hover>
<div class="flex items-center">
<div>
<span :class="[statusInfo.outline.background, statusInfo.outline.foreground, 'flex items-center justify-center']">
<span :class="[typeInfo.outline.background, typeInfo.outline.foreground, 'flex items-center justify-center']">
<component
:is="statusInfo.outline.icon"
:class="statusInfo.outline.background"
:is="typeInfo.outline.icon"
:class="typeInfo.outline.background"
/>
</span>
</div>
</div>
<template #content>
<div class="px-2 py-1 bg-white text-xs text-gray-900 shadow-md ">
{{ typeInfo.text }}
</div>
</template>
</Popper>
</template>
<script>
import {computed} from 'vue'
import {useVacationTypeInfo} from '@/Composables/vacationTypeInfo'
import Popper from 'vue3-popper'
export default {
name: 'VacationTypeCalendarIcon',
components: {
Popper,
},
props: {
status: {
type: {
type: String,
default: () => null,
},
@ -28,12 +39,12 @@ export default {
},
},
setup(props) {
const { findStatus } = useVacationTypeInfo()
const { findType } = useVacationTypeInfo()
const statusInfo = computed(() => findStatus(props.status))
const typeInfo = computed(() => findType(props.type))
return {
statusInfo,
typeInfo,
}
},
}