From 57413d2df462e9f639cd793eff22f25009311755 Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Sun, 21 May 2023 11:05:57 +0200 Subject: [PATCH] feat(view): Introduce year grid view (with FC multiMonthYear plugin) Closes #159 Signed-off-by: Thomas Citharel --- appinfo/routes.php | 6 +++--- lib/Controller/SettingsController.php | 2 +- package-lock.json | 20 +++++++++++++++++++ package.json | 1 + .../AppNavigationHeaderDatePicker.vue | 19 +++++++++++++++--- .../AppNavigationHeaderViewMenu.vue | 10 +++++++++- .../EmbedHeader/EmbedHeaderViewButtons.vue | 8 ++++++++ .../Settings/ShortcutOverview.vue | 5 ++++- src/components/CalendarGrid.vue | 2 ++ src/components/Shared/DatePicker.vue | 12 +++++++---- src/filters/dateRangeFormat.js | 3 +++ .../localization/dateFormattingConfig.js | 5 +++++ src/utils/date.js | 4 +++- 13 files changed, 83 insertions(+), 14 deletions(-) diff --git a/appinfo/routes.php b/appinfo/routes.php index 6a494159de..533b426e4c 100644 --- a/appinfo/routes.php +++ b/appinfo/routes.php @@ -31,9 +31,9 @@ ['name' => 'view#index', 'url' => '/new/{isAllDay}/{dtStart}/{dtEnd}', 'verb' => 'GET', 'postfix' => 'direct.new.timerange'], ['name' => 'view#index', 'url' => '/edit/{objectId}', 'verb' => 'GET', 'postfix' => 'direct.edit'], ['name' => 'view#index', 'url' => '/edit/{objectId}/{recurrenceId}', 'verb' => 'GET', 'postfix' => 'direct.edit.recurrenceId'], - ['name' => 'view#index', 'url' => '/{view}/{timeRange}', 'verb' => 'GET', 'requirements' => ['view' => 'timeGridDay|timeGridWeek|dayGridMonth|listMonth'], 'postfix' => 'view.timerange'], - ['name' => 'view#index', 'url' => '/{view}/{timeRange}/new/{mode}/{isAllDay}/{dtStart}/{dtEnd}', 'verb' => 'GET', 'requirements' => ['view' => 'timeGridDay|timeGridWeek|dayGridMonth|listMonth'], 'postfix' => 'view.timerange.new'], - ['name' => 'view#index', 'url' => '/{view}/{timeRange}/edit/{mode}/{objectId}/{recurrenceId}', 'verb' => 'GET', 'requirements' => ['view' => 'timeGridDay|timeGridWeek|dayGridMonth|listMonth'], 'postfix' => 'view.timerange.edit'], + ['name' => 'view#index', 'url' => '/{view}/{timeRange}', 'verb' => 'GET', 'requirements' => ['view' => 'timeGridDay|timeGridWeek|dayGridMonth|multiMonthYear|listMonth'], 'postfix' => 'view.timerange'], + ['name' => 'view#index', 'url' => '/{view}/{timeRange}/new/{mode}/{isAllDay}/{dtStart}/{dtEnd}', 'verb' => 'GET', 'requirements' => ['view' => 'timeGridDay|timeGridWeek|dayGridMonth|multiMonthYear|listMonth'], 'postfix' => 'view.timerange.new'], + ['name' => 'view#index', 'url' => '/{view}/{timeRange}/edit/{mode}/{objectId}/{recurrenceId}', 'verb' => 'GET', 'requirements' => ['view' => 'timeGridDay|timeGridWeek|dayGridMonth|multiMonthYear|listMonth'], 'postfix' => 'view.timerange.edit'], ['name' => 'view#getCalendarDotSvg', 'url' => '/public/getCalendarDotSvg/{color}.svg', 'verb' => 'GET'], // Appointments ['name' => 'appointment#index', 'url' => '/appointments/{userId}', 'verb' => 'GET'], diff --git a/lib/Controller/SettingsController.php b/lib/Controller/SettingsController.php index 81a78b77ee..fe30d548d2 100644 --- a/lib/Controller/SettingsController.php +++ b/lib/Controller/SettingsController.php @@ -105,7 +105,7 @@ public function setConfig(string $key, * @return JSONResponse */ private function setView(string $view):JSONResponse { - if (!\in_array($view, ['timeGridDay', 'timeGridWeek', 'dayGridMonth', 'listMonth'])) { + if (!\in_array($view, ['timeGridDay', 'timeGridWeek', 'dayGridMonth', 'multiMonthYear', 'listMonth'])) { return new JSONResponse([], Http::STATUS_UNPROCESSABLE_ENTITY); } diff --git a/package-lock.json b/package-lock.json index 7abd67ef67..5bdc9f132e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@fullcalendar/daygrid": "^6.1.7", "@fullcalendar/interaction": "^6.1.7", "@fullcalendar/list": "^6.1.7", + "@fullcalendar/multimonth": "^6.1.7", "@fullcalendar/resource": "^6.1.7", "@fullcalendar/resource-timeline": "^6.1.7", "@fullcalendar/timegrid": "^6.1.7", @@ -2003,6 +2004,17 @@ "@fullcalendar/core": "~6.1.7" } }, + "node_modules/@fullcalendar/multimonth": { + "version": "6.1.7", + "resolved": "https://registry.npmjs.org/@fullcalendar/multimonth/-/multimonth-6.1.7.tgz", + "integrity": "sha512-x4Z8XjmjlXNElZsVYr+AdNYiGPrYdmG3nxDYjxIDPl1CvH/pAmZinaRlOmVP4wq7ES9RP/9xOlAhe2/RKpsh3w==", + "dependencies": { + "@fullcalendar/daygrid": "~6.1.7" + }, + "peerDependencies": { + "@fullcalendar/core": "~6.1.7" + } + }, "node_modules/@fullcalendar/premium-common": { "version": "6.1.7", "resolved": "https://registry.npmjs.org/@fullcalendar/premium-common/-/premium-common-6.1.7.tgz", @@ -18911,6 +18923,14 @@ "integrity": "sha512-Fl6jGKylhrk+g/RCISsv66vzpzjCFhd4r3nUDeHTAAE375OYGlVPKpH67YaKxpMrofj82JLIzS3JEzyQBZo0Cg==", "requires": {} }, + "@fullcalendar/multimonth": { + "version": "6.1.7", + "resolved": "https://registry.npmjs.org/@fullcalendar/multimonth/-/multimonth-6.1.7.tgz", + "integrity": "sha512-x4Z8XjmjlXNElZsVYr+AdNYiGPrYdmG3nxDYjxIDPl1CvH/pAmZinaRlOmVP4wq7ES9RP/9xOlAhe2/RKpsh3w==", + "requires": { + "@fullcalendar/daygrid": "~6.1.7" + } + }, "@fullcalendar/premium-common": { "version": "6.1.7", "resolved": "https://registry.npmjs.org/@fullcalendar/premium-common/-/premium-common-6.1.7.tgz", diff --git a/package.json b/package.json index 3b7085a6da..379b59bec1 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "@fullcalendar/daygrid": "^6.1.7", "@fullcalendar/interaction": "^6.1.7", "@fullcalendar/list": "^6.1.7", + "@fullcalendar/multimonth": "^6.1.7", "@fullcalendar/resource": "^6.1.7", "@fullcalendar/resource-timeline": "^6.1.7", "@fullcalendar/timegrid": "^6.1.7", diff --git a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue index 195fbc8979..5cceaf6508 100644 --- a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue +++ b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue @@ -36,13 +36,14 @@ @click.stop.prevent="toggleDatepicker" @mousedown.stop.prevent="doNothing" @mouseup.stop.prevent="doNothing"> - {{ selectedDate | formatDateRage(view, locale) }} + {{ selectedDate | formatDateRange(view, locale) }} {{ $t('calendar', 'Month') }} + + {{ $t('calendar', 'Year') }} + @@ -64,6 +69,9 @@ export default { isMonthViewSelected() { return this.selectedView === 'dayGridMonth' }, + isYearViewSelected() { + return this.selectedView === 'multiMonthYear' + }, isMonthListViewSelected() { return this.selectedView === 'listMonth' }, diff --git a/src/components/AppNavigation/Settings/ShortcutOverview.vue b/src/components/AppNavigation/Settings/ShortcutOverview.vue index 473411ac18..3124064e9f 100644 --- a/src/components/AppNavigation/Settings/ShortcutOverview.vue +++ b/src/components/AppNavigation/Settings/ShortcutOverview.vue @@ -91,7 +91,10 @@ export default { keys: [['3'], ['m']], label: t('calendar', 'Month view'), }, { - keys: [['4'], ['l']], + keys: [['4'], ['y']], + label: t('calendar', 'Year view'), + }, { + keys: [['5'], ['l']], label: t('calendar', 'List view'), }], }, { diff --git a/src/components/CalendarGrid.vue b/src/components/CalendarGrid.vue index 8d1c519211..fe632d4ba6 100644 --- a/src/components/CalendarGrid.vue +++ b/src/components/CalendarGrid.vue @@ -33,6 +33,7 @@ import dayGridPlugin from '@fullcalendar/daygrid' import interactionPlugin from '@fullcalendar/interaction' import listPlugin from '@fullcalendar/list' import timeGridPlugin from '@fullcalendar/timegrid' +import multiMonthPlugin from '@fullcalendar/multimonth' // Import event sources import eventSource from '../fullcalendar/eventSources/eventSource.js' @@ -164,6 +165,7 @@ export default { interactionPlugin, listPlugin, timeGridPlugin, + multiMonthPlugin, ] }, isEditable() { diff --git a/src/components/Shared/DatePicker.vue b/src/components/Shared/DatePicker.vue index 3f8c2ff4df..873573dbda 100644 --- a/src/components/Shared/DatePicker.vue +++ b/src/components/Shared/DatePicker.vue @@ -26,7 +26,7 @@ :format="'YYYY-MM-DD HH:mm'" :formatter="formatter" :value="date" - :type="type" + :type="actualType" :clearable="false" :minute-step="5" :disabled-date="disabledDate" @@ -142,6 +142,10 @@ export default { type: Boolean, default: false, }, + type: { + type: String, + default: 'datetime', + }, }, data() { return { @@ -187,12 +191,12 @@ export default { * * @return {string} */ - type() { - if (this.isAllDay) { + actualType() { + if (this.type === 'datetime' && this.isAllDay) { return 'date' } - return 'datetime' + return this.type }, /** * The earliest date a user is allowed to pick in the timezone diff --git a/src/filters/dateRangeFormat.js b/src/filters/dateRangeFormat.js index 1b996f8b7a..410d996cda 100644 --- a/src/filters/dateRangeFormat.js +++ b/src/filters/dateRangeFormat.js @@ -41,6 +41,9 @@ export default (value, view, locale) => { year: moment(value).locale(locale).weekYear(), }) + case 'multiMonthYear': + return moment(value).locale(locale).format('YYYY') + case 'dayGridMonth': case 'listMonth': default: diff --git a/src/fullcalendar/localization/dateFormattingConfig.js b/src/fullcalendar/localization/dateFormattingConfig.js index c7765cdfc7..812ba0b4b7 100644 --- a/src/fullcalendar/localization/dateFormattingConfig.js +++ b/src/fullcalendar/localization/dateFormattingConfig.js @@ -40,6 +40,11 @@ const getDateFormattingConfig = () => { ...defaultConfig, dayHeaderFormat: 'ddd', }, + multiMonthYear: { + ...defaultConfig, + dayHeaderFormat: 'ddd', + multiMonthMaxColumns: 4, + }, timeGridDay: defaultConfig, timeGridWeek: defaultConfig, listMonth: { diff --git a/src/utils/date.js b/src/utils/date.js index 4b0c3f9cf3..30ed9b45d0 100644 --- a/src/utils/date.js +++ b/src/utils/date.js @@ -120,13 +120,15 @@ export function getDateFromDateTimeValue(dateTimeValue) { * @param {number} data.day Number of days to add * @param {number} data.week Number of weeks to add * @param {number} data.month Number of months to add + * @param data.year * @return {Date} */ -export function modifyDate(date, { day = 0, week = 0, month = 0 }) { +export function modifyDate(date, { day = 0, week = 0, month = 0, year = 0 }) { date = new Date(date.getTime()) date.setDate(date.getDate() + day) date.setDate(date.getDate() + week * 7) date.setMonth(date.getMonth() + month) + date.setFullYear(date.getFullYear() + year) return date }