From 5095749157da4b742b440af43d32f15496dbf735 Mon Sep 17 00:00:00 2001 From: summersamara Date: Sun, 10 Dec 2023 22:56:37 +0100 Subject: [PATCH] create Events Calendar View - install full-calendar npm packages - create FullCalendar component - create Events Calendar route - Fix: remove unused imports in NavBar.vue --- package-lock.json | 62 ++++++++++++++++++++++++++++++++ package.json | 6 ++++ src/components/FullCalendar.vue | 51 ++++++++++++++++++++++++++ src/components/NavBar.vue | 30 +++++++++++----- src/router/event.ts | 9 +++++ src/views/Event/CalendarView.vue | 17 +++++++++ 6 files changed, 167 insertions(+), 8 deletions(-) create mode 100644 src/components/FullCalendar.vue create mode 100644 src/views/Event/CalendarView.vue diff --git a/package-lock.json b/package-lock.json index 4940835d0..4c53f1314 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,11 @@ "@apollo/client": "^3.3.16", "@framasoft/socket": "^1.0.0", "@framasoft/socket-apollo-link": "^1.0.0", + "@fullcalendar/core": "^6.1.10", + "@fullcalendar/daygrid": "^6.1.10", + "@fullcalendar/icalendar": "^6.1.10", + "@fullcalendar/interaction": "^6.1.10", + "@fullcalendar/vue3": "^6.1.10", "@oruga-ui/oruga-next": "^0.7.0", "@sentry/tracing": "^7.1", "@sentry/vue": "^7.1", @@ -55,6 +60,7 @@ "graphql": "^16.8.1", "graphql-tag": "^2.10.3", "hammerjs": "^2.0.8", + "ical.js": "^1.5.0", "intersection-observer": "^0.12.0", "jwt-decode": "^4.0.0", "leaflet": "^1.4.0", @@ -2626,6 +2632,48 @@ "zen-observable": "^0.10.0" } }, + "node_modules/@fullcalendar/core": { + "version": "6.1.10", + "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.10.tgz", + "integrity": "sha512-oTXGJSAGpCf1oY+CKp5qYjMHkJCPBkJ3SHitl63n8Q6xKeiwQ4EF6Au451euUovREwJpLmD1AyZrCnWmtB9AVg==", + "dependencies": { + "preact": "~10.12.1" + } + }, + "node_modules/@fullcalendar/daygrid": { + "version": "6.1.10", + "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.1.10.tgz", + "integrity": "sha512-Z4GRm1IyHKgxXFTWGcEI0nTsvYOIkpE0aMt3/o3ER2SZkF+hfwcDFhtj0c9+WhMjXFIWYeoTnA9rUOY7Zl/nxA==", + "peerDependencies": { + "@fullcalendar/core": "~6.1.10" + } + }, + "node_modules/@fullcalendar/icalendar": { + "version": "6.1.10", + "resolved": "https://registry.npmjs.org/@fullcalendar/icalendar/-/icalendar-6.1.10.tgz", + "integrity": "sha512-TXjtZhjYIQZjeqULRjwDd2VWlymdhJmltaN26YS0dcGuCrQhJJ3x/sODVbVaW1mvbMjnjXYUE8AhdpxvhYGIJg==", + "peerDependencies": { + "@fullcalendar/core": "~6.1.10", + "ical.js": "^1.4.0" + } + }, + "node_modules/@fullcalendar/interaction": { + "version": "6.1.10", + "resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-6.1.10.tgz", + "integrity": "sha512-aZRlwCpmDasq2RNeWV0ub20Uevare9Cb6iMlxCacx0fhOC14H28G9d1FsduJIecInL84SPGwt5ItqAYMsWv7zw==", + "peerDependencies": { + "@fullcalendar/core": "~6.1.10" + } + }, + "node_modules/@fullcalendar/vue3": { + "version": "6.1.10", + "resolved": "https://registry.npmjs.org/@fullcalendar/vue3/-/vue3-6.1.10.tgz", + "integrity": "sha512-YMYBQx0TlWNuN4G6ra2dkf5cCF5aVi/2zDLGLvLqe2Nk2o7uNbTkrCSG40061OepWQlJv+hYqm1JukLRmyqi4Q==", + "peerDependencies": { + "@fullcalendar/core": "~6.1.10", + "vue": "^3.0.11" + } + }, "node_modules/@graphql-typed-document-node/core": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.2.0.tgz", @@ -8079,6 +8127,11 @@ "url": "https://github.com/sponsors/typicode" } }, + "node_modules/ical.js": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/ical.js/-/ical.js-1.5.0.tgz", + "integrity": "sha512-7ZxMkogUkkaCx810yp0ZGKvq1ZpRgJeornPttpoxe6nYZ3NLesZe1wWMXDdwTkj/b5NtXT+Y16Aakph/ao98ZQ==" + }, "node_modules/iconv-lite": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", @@ -10437,6 +10490,15 @@ "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" }, + "node_modules/preact": { + "version": "10.12.1", + "resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz", + "integrity": "sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/preact" + } + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", diff --git a/package.json b/package.json index 8c7ad704b..b0ad36f7a 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,11 @@ "@apollo/client": "^3.3.16", "@framasoft/socket": "^1.0.0", "@framasoft/socket-apollo-link": "^1.0.0", + "@fullcalendar/core": "^6.1.10", + "@fullcalendar/daygrid": "^6.1.10", + "@fullcalendar/icalendar": "^6.1.10", + "@fullcalendar/interaction": "^6.1.10", + "@fullcalendar/vue3": "^6.1.10", "@oruga-ui/oruga-next": "^0.7.0", "@sentry/tracing": "^7.1", "@sentry/vue": "^7.1", @@ -71,6 +76,7 @@ "graphql": "^16.8.1", "graphql-tag": "^2.10.3", "hammerjs": "^2.0.8", + "ical.js": "^1.5.0", "intersection-observer": "^0.12.0", "jwt-decode": "^4.0.0", "leaflet": "^1.4.0", diff --git a/src/components/FullCalendar.vue b/src/components/FullCalendar.vue new file mode 100644 index 000000000..74a85d920 --- /dev/null +++ b/src/components/FullCalendar.vue @@ -0,0 +1,51 @@ + + + diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue index 0c542a0b8..5071128fe 100644 --- a/src/components/NavBar.vue +++ b/src/components/NavBar.vue @@ -165,9 +165,20 @@ @@ -209,19 +224,18 @@ import MobilizonLogo from "@/components/MobilizonLogo.vue"; import { ICurrentUserRole } from "@/types/enums"; import { logout } from "../utils/auth"; -import { IPerson, displayName } from "../types/actor"; +import { displayName } from "../types/actor"; import RouteName from "../router/name"; -import { computed, onMounted, ref, watch } from "vue"; +import { computed, ref, watch } from "vue"; import { useRoute, useRouter } from "vue-router"; import { useI18n } from "vue-i18n"; import AccountCircle from "vue-material-design-icons/AccountCircle.vue"; -import Inbox from "vue-material-design-icons/Inbox.vue"; import { useCurrentUserClient } from "@/composition/apollo/user"; import { useCurrentActorClient, useCurrentUserIdentities, } from "@/composition/apollo/actor"; -import { useLazyQuery, useMutation } from "@vue/apollo-composable"; +import { useMutation } from "@vue/apollo-composable"; import { UPDATE_DEFAULT_ACTOR } from "@/graphql/actor"; import { changeIdentity } from "@/utils/identity"; import { useRegistrationConfig } from "@/composition/apollo/config"; diff --git a/src/router/event.ts b/src/router/event.ts index 5b1c3c39b..f4273d0f4 100644 --- a/src/router/event.ts +++ b/src/router/event.ts @@ -10,6 +10,7 @@ const myEvents = () => import("@/views/Event/MyEventsView.vue"); export enum EventRouteName { EVENT_LIST = "EventList", + EVENT_CALENDAR = "EventCalendar", CREATE_EVENT = "CreateEvent", MY_EVENTS = "MyEvents", EDIT_EVENT = "EditEvent", @@ -26,6 +27,14 @@ export enum EventRouteName { } export const eventRoutes: RouteRecordRaw[] = [ + { + path: "/events/calendar", + name: EventRouteName.EVENT_CALENDAR, + component: import("../views/Event/CalendarView.vue"), + meta: { + requiredAuth: false, + }, + }, { path: "/events/create", name: EventRouteName.CREATE_EVENT, diff --git a/src/views/Event/CalendarView.vue b/src/views/Event/CalendarView.vue new file mode 100644 index 000000000..4d028ab1c --- /dev/null +++ b/src/views/Event/CalendarView.vue @@ -0,0 +1,17 @@ + +