Skip to content

Commit 9ff7948

Browse files
OnatcerOnatcer
committed
add calendar view
1 parent 4b4df34 commit 9ff7948

File tree

14 files changed

+1266
-35
lines changed

14 files changed

+1266
-35
lines changed

‎package-lock.json‎

Lines changed: 64 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,11 @@
3939
"dependencies": {
4040
"@floating-ui/core": "^1.6.0",
4141
"@floating-ui/vue": "^1.0.6",
42+
"@fullcalendar/core": "^6.1.18",
43+
"@fullcalendar/daygrid": "^6.1.18",
44+
"@fullcalendar/interaction": "^6.1.18",
45+
"@fullcalendar/timegrid": "^6.1.18",
46+
"@fullcalendar/vue3": "^6.1.18",
4247
"@heroicons/vue": "^2.1.1",
4348
"@rushstack/eslint-patch": "^1.10.5",
4449
"@tailwindcss/container-queries": "^0.1.1",

‎resources/css/app.css‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,14 +46,16 @@
4646

4747
--color-accent-default: rgba(var(--color-accent-300), 0.2);
4848
--color-accent-foreground: rgb(var(--color-accent-100));
49+
--theme-color-default-background: var(--color-bg-primary);
50+
4951
}
5052

5153
:root.light {
52-
--color-bg-primary: #F5F5F5;
54+
--color-bg-primary: #FFFFFF;
5355
--color-bg-secondary: #f7f7f8;
5456
--color-bg-tertiary: #e1e1e3;
5557
--color-bg-quaternary: #ffffff;
56-
--color-bg-background: #ffffff;
58+
--color-bg-background: #F5F5F5;
5759
--color-text-primary: #18181b;
5860
--color-text-secondary: #3f3f46;
5961
--color-text-tertiary: #57575C;
@@ -70,7 +72,7 @@
7072

7173
--theme-color-chart: var(--color-accent-400);
7274

73-
--theme-shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.05);
75+
--theme-shadow-card: lch(0 0 0 / 0.022) 0px 3px 6px -2px, lch(0 0 0 / 0.044) 0px 1px 1px;
7476
--theme-shadow-dropdown: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
7577

7678
--theme-color-row-background: var(--theme-color-card-background);
@@ -92,10 +94,11 @@
9294

9395
--color-accent-default: rgb(var(--color-accent-100));
9496
--color-accent-foreground: rgb(var(--color-accent-800));
97+
--theme-color-default-background: #FCFCFC;
98+
9599
}
96100

97101
:root {
98-
--theme-color-default-background: var(--color-bg-primary);
99102
--theme-color-icon-active: rgb(var(--color-text-tertiary));
100103
--theme-color-card-background-separator: var(--color-border-tertiary);
101104
--theme-color-card-border: var(--color-border-secondary);

‎resources/js/Components/Common/User/UserTimezoneMismatchModal.vue‎

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,42 @@
11
<script setup lang="ts">
2-
import SecondaryButton from "@/packages/ui/src/Buttons/SecondaryButton.vue";
3-
import DialogModal from "@/packages/ui/src/DialogModal.vue";
4-
import PrimaryButton from "@/packages/ui/src/Buttons/PrimaryButton.vue";
5-
import { onMounted, ref } from "vue";
6-
import { getUserTimezone } from "@/packages/ui/src/utils/settings";
7-
import { getDayJsInstance } from "@/packages/ui/src/utils/time";
8-
import { useForm, usePage } from "@inertiajs/vue3";
9-
import type { User } from "@/types/models";
10-
import { useSessionStorage } from "@vueuse/core";
2+
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
3+
import DialogModal from '@/packages/ui/src/DialogModal.vue';
4+
import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
5+
import { onMounted, ref } from 'vue';
6+
import { getUserTimezone } from '@/packages/ui/src/utils/settings';
7+
import { getDayJsInstance } from '@/packages/ui/src/utils/time';
8+
import { useForm, usePage } from '@inertiajs/vue3';
9+
import type { User } from '@/types/models';
10+
import { useSessionStorage } from '@vueuse/core';
1111
12-
const show = defineModel("show", { default: false });
13-
const saving = defineModel("saving", { default: false });
12+
const show = defineModel('show', { default: false });
13+
const saving = defineModel('saving', { default: false });
1414
15-
const timezone = ref("");
16-
const userTimezone = ref("");
15+
const timezone = ref('');
16+
const userTimezone = ref('');
1717
1818
const page = usePage<{
1919
auth: {
2020
user: User;
2121
};
2222
}>();
2323
24-
const hideTimezoneMismatchModal = useSessionStorage<boolean>(
25-
'hide-timezone-mismatch-modal',
26-
false
27-
);
24+
const hideTimezoneMismatchModal = useSessionStorage<boolean>('hide-timezone-mismatch-modal', false);
2825
2926
onMounted(() => {
3027
timezone.value = Intl.DateTimeFormat().resolvedOptions().timeZone;
3128
userTimezone.value = getUserTimezone();
3229
33-
if(getDayJsInstance()().tz(timezone.value).format() !== getDayJsInstance()().tz(userTimezone.value).format()
34-
&& !hideTimezoneMismatchModal.value
30+
if (
31+
getDayJsInstance()().tz(timezone.value).format() !==
32+
getDayJsInstance()().tz(userTimezone.value).format() &&
33+
!hideTimezoneMismatchModal.value
3534
) {
3635
show.value = true;
3736
}
3837
});
3938
40-
function submit(){
39+
function submit() {
4140
saving.value = true;
4241
const form = useForm({
4342
_method: 'PUT',
@@ -54,15 +53,14 @@ function submit(){
5453
saving.value = false;
5554
show.value = false;
5655
location.reload();
57-
}
56+
},
5857
});
5958
}
6059
61-
function cancel(){
60+
function cancel() {
6261
show.value = false;
6362
hideTimezoneMismatchModal.value = true;
6463
}
65-
6664
</script>
6765

6866
<template>
@@ -76,13 +74,18 @@ function cancel(){
7674
<div class="flex items-center space-x-4">
7775
<div class="col-span-6 sm:col-span-4 flex-1 space-y-2">
7876
<p>
79-
The timezone of your device does not match the timezone in your user settings. <br>
80-
<strong>We highly recommend that you update your timezone settings to your current
81-
timezone.</strong>
77+
The timezone of your device does not match the timezone in your user
78+
settings. <br />
79+
<strong
80+
>We highly recommend that you update your timezone settings to your
81+
current timezone.</strong
82+
>
8283
</p>
8384

8485
<p>
85-
Want to change your timezone setting from <strong>{{ userTimezone }}</strong> to <strong>{{ timezone }}</strong>.
86+
Want to change your timezone setting from
87+
<strong>{{ userTimezone }}</strong> to <strong>{{ timezone }}</strong
88+
>.
8689
</p>
8790
</div>
8891
</div>

‎resources/js/Layouts/AppLayout.vue‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import OrganizationSwitcher from '@/Components/OrganizationSwitcher.vue';
55
import CurrentSidebarTimer from '@/Components/CurrentSidebarTimer.vue';
66
import {
77
Bars3Icon,
8+
CalendarIcon,
89
ChartBarIcon,
910
ClockIcon,
1011
Cog6ToothIcon,
@@ -39,15 +40,17 @@ import { ArrowsRightLeftIcon } from '@heroicons/vue/16/solid';
3940
import { fetchToken, isTokenValid } from '@/utils/session';
4041
import UpdateSidebarNotification from '@/Components/UpdateSidebarNotification.vue';
4142
import BillingBanner from '@/Components/Billing/BillingBanner.vue';
42-
import UserTimezoneMismatchModal from "@/Components/Common/User/UserTimezoneMismatchModal.vue";
43+
import UserTimezoneMismatchModal from '@/Components/Common/User/UserTimezoneMismatchModal.vue';
4344
import { useTheme } from '@/utils/theme';
4445
import { useQuery } from '@tanstack/vue-query';
4546
import { api } from '@/packages/api/src';
4647
import { getCurrentOrganizationId } from '@/utils/useUser';
4748
import LoadingSpinner from '@/packages/ui/src/LoadingSpinner.vue';
49+
import { twMerge } from 'tailwind-merge';
4850
4951
defineProps({
5052
title: String,
53+
mainClass: String,
5154
});
5255
5356
const showSidebarMenu = ref(false);
@@ -132,6 +135,11 @@ const page = usePage<{
132135
:icon="ClockIcon"
133136
:current="route().current('time')"
134137
:href="route('time')"></NavigationSidebarItem>
138+
<NavigationSidebarItem
139+
title="Calendar"
140+
:icon="CalendarIcon"
141+
:current="route().current('calendar')"
142+
:href="route('calendar')"></NavigationSidebarItem>
135143
<NavigationSidebarItem
136144
title="Reporting"
137145
:icon="ChartBarIcon"
@@ -274,7 +282,7 @@ const page = usePage<{
274282
</header>
275283

276284
<!-- Page Content -->
277-
<main class="pb-28 flex-1">
285+
<main :class="twMerge('pb-28 flex-1', mainClass)">
278286
<div
279287
v-if="isOrganizationLoading"
280288
class="flex items-center justify-center h-screen">

0 commit comments

Comments
 (0)