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

Added #VC

Browse Source
This commit is contained in:
Kamil Niemczycki 2022-06-20 12:55:05 +02:00
parent a272c7a2de
commit b761dc8e6b
2 changed files with 150 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,7 @@
<div class="grid grid-cols-1 gap-4 items-start xl:grid-cols-3 xl:gap-8">
<div class="grid grid-cols-1 gap-4 xl:col-span-2">
<Welcome :user="auth.user" />
<VacationCalendar />
<VacationStats :stats="stats" />
</div>
<div class="grid grid-cols-1 gap-4">
@ -38,6 +39,7 @@ import HomeOfficeList from '@/Shared/Widgets/HomeOfficeList'
import UpcomingHolidays from '@/Shared/Widgets/UpcomingHolidays'
import UserVacationRequests from '@/Shared/Widgets/UserVacationRequests'
import PendingVacationRequests from '@/Shared/Widgets/PendingVacationRequests'
import VacationCalendar from '@/Shared/Widgets/VacationCalendar'
defineProps({
auth: Object,

148
resources/js/Shared/Widgets/VacationCalendar.vue Normal file
View File

@ -0,0 +1,148 @@
<template>
<div class="shadow ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
<div class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none">
<div class="bg-white py-2">
M<span class="sr-only sm:not-sr-only">on</span>
</div>
<div class="bg-white py-2">
T<span class="sr-only sm:not-sr-only">ue</span>
</div>
<div class="bg-white py-2">
W<span class="sr-only sm:not-sr-only">ed</span>
</div>
<div class="bg-white py-2">
T<span class="sr-only sm:not-sr-only">hu</span>
</div>
<div class="bg-white py-2">
F<span class="sr-only sm:not-sr-only">ri</span>
</div>
<div class="bg-white py-2">
S<span class="sr-only sm:not-sr-only">at</span>
</div>
<div class="bg-white py-2">
S<span class="sr-only sm:not-sr-only">un</span>
</div>
</div>
<div class="flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto">
<div class="w-full grid grid-cols-7 grid-rows-6 gap-px">
<div
v-for="day in days"
:key="day.date"
:class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', 'relative py-2 px-3']"
>
<time
:datetime="day.date"
:class="day.isToday ? 'flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white' : undefined"
>
{{ day.date.split('-').pop().replace(/^0/, '') }}
</time>
<ol
v-if="day.events.length > 0"
class="mt-2"
>
<li
v-for="event in day.events.slice(0, 2)"
:key="event.id"
>
<a
:href="event.href"
class="group flex"
>
<p class="flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600">
{{ event.name }}
</p>
<time
:datetime="event.datetime"
class="ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block"
>
{{ event.time }}
</time>
</a>
</li>
<li
v-if="day.events.length > 2"
class="text-gray-500"
>
+ {{ day.events.length - 2 }} more
</li>
</ol>
</div>
</div>
</div>
</div>
</template>
<script setup>
const days = [
{ date: '2021-12-27', events: [] },
{ date: '2021-12-28', events: [] },
{ date: '2021-12-29', events: [] },
{ date: '2021-12-30', events: [] },
{ date: '2021-12-31', events: [] },
{ date: '2022-01-01', isCurrentMonth: true, events: [] },
{ date: '2022-01-02', isCurrentMonth: true, events: [] },
{
date: '2022-01-03',
isCurrentMonth: true,
events: [
{ id: 1, name: 'Design review', time: '10AM', datetime: '2022-01-03T10:00', href: '#' },
{ id: 2, name: 'Sales meeting', time: '2PM', datetime: '2022-01-03T14:00', href: '#' },
],
},
{ date: '2022-01-04', isCurrentMonth: true, events: [] },
{ date: '2022-01-05', isCurrentMonth: true, events: [] },
{ date: '2022-01-06', isCurrentMonth: true, events: [] },
{
date: '2022-01-07',
isCurrentMonth: true,
events: [{ id: 3, name: 'Date night', time: '6PM', datetime: '2022-01-08T18:00', href: '#' }],
},
{ date: '2022-01-08', isCurrentMonth: true, events: [] },
{ date: '2022-01-09', isCurrentMonth: true, events: [] },
{ date: '2022-01-10', isCurrentMonth: true, events: [] },
{ date: '2022-01-11', isCurrentMonth: true, events: [] },
{
date: '2022-01-12',
isCurrentMonth: true,
isToday: true,
events: [{ id: 6, name: "Sam's birthday party", time: '2PM', datetime: '2022-01-25T14:00', href: '#' }],
},
{ date: '2022-01-13', isCurrentMonth: true, events: [] },
{ date: '2022-01-14', isCurrentMonth: true, events: [] },
{ date: '2022-01-15', isCurrentMonth: true, events: [] },
{ date: '2022-01-16', isCurrentMonth: true, events: [] },
{ date: '2022-01-17', isCurrentMonth: true, events: [] },
{ date: '2022-01-18', isCurrentMonth: true, events: [] },
{ date: '2022-01-19', isCurrentMonth: true, events: [] },
{ date: '2022-01-20', isCurrentMonth: true, events: [] },
{ date: '2022-01-21', isCurrentMonth: true, events: [] },
{
date: '2022-01-22',
isCurrentMonth: true,
isSelected: true,
events: [
{ id: 4, name: 'Maple syrup museum', time: '3PM', datetime: '2022-01-22T15:00', href: '#' },
{ id: 5, name: 'Hockey game', time: '7PM', datetime: '2022-01-22T19:00', href: '#' },
],
},
{ date: '2022-01-23', isCurrentMonth: true, events: [] },
{ date: '2022-01-24', isCurrentMonth: true, events: [] },
{ date: '2022-01-25', isCurrentMonth: true, events: [] },
{ date: '2022-01-26', isCurrentMonth: true, events: [] },
{ date: '2022-01-27', isCurrentMonth: true, events: [] },
{ date: '2022-01-28', isCurrentMonth: true, events: [] },
{ date: '2022-01-29', isCurrentMonth: true, events: [] },
{ date: '2022-01-30', isCurrentMonth: true, events: [] },
{ date: '2022-01-31', isCurrentMonth: true, events: [] },
{ date: '2022-02-01', events: [] },
{ date: '2022-02-02', events: [] },
{
date: '2022-02-03',
events: [{ id: 7, name: 'Cinema with friends', time: '9PM', datetime: '2022-02-04T21:00', href: '#' }],
},
{ date: '2022-02-04', events: [] },
{ date: '2022-02-05', events: [] },
{ date: '2022-02-06', events: [] },
]
const selectedDay = days.find((day) => day.isSelected)
</script>