From 8e76d93a5ad104d5c500eb3447d8e43e70fb6111 Mon Sep 17 00:00:00 2001 From: Johann Hoffmann Date: Tue, 18 Feb 2025 14:48:14 +0100 Subject: [PATCH] consistent naming of calendar modes in english; fixed routerguard to work with router.push on mode or date changes inside stpl component; --- application/controllers/Cis/Stundenplan.php | 2 +- public/js/apps/Dashboard/Fhc.js | 41 +++++++-------- public/js/components/Calendar/Calendar.js | 12 +++-- public/js/components/Calendar/Header.js | 8 +-- .../components/Cis/Stundenplan/Stundenplan.js | 50 +++++++++---------- 5 files changed, 54 insertions(+), 59 deletions(-) diff --git a/application/controllers/Cis/Stundenplan.php b/application/controllers/Cis/Stundenplan.php index c9c486a47..5b7c25b21 100644 --- a/application/controllers/Cis/Stundenplan.php +++ b/application/controllers/Cis/Stundenplan.php @@ -25,7 +25,7 @@ class Stundenplan extends Auth_Controller */ public function index($mode = 'Week', $focus_date = null, $lv_id = null) { - // Convert string "null" to actual null values -> ci3 reroute fix + // convert string "null" to actual null values -> ci3 reroute fix $mode = ($mode === 'null') ? 'Week' : ucfirst(strtolower($mode)); $focus_date = ($focus_date === 'null') ? date('Y-m-d') : $focus_date; $lv_id = ($lv_id === 'null') ? null : $lv_id; diff --git a/public/js/apps/Dashboard/Fhc.js b/public/js/apps/Dashboard/Fhc.js index 610abba0c..5442a7a86 100644 --- a/public/js/apps/Dashboard/Fhc.js +++ b/public/js/apps/Dashboard/Fhc.js @@ -3,7 +3,7 @@ import FhcApi from '../../plugin/FhcApi.js'; import Phrasen from '../../plugin/Phrasen.js'; import contrast from '../../directives/contrast.js'; import {setScrollbarWidth} from "../../helpers/CssVarCalcHelpers"; -import Stundenplan from "../../components/Cis/Stundenplan/Stundenplan"; +import Stundenplan, {DEFAULT_MODE_STUNDENPLAN} from "../../components/Cis/Stundenplan/Stundenplan"; import MylvStudent from "../../components/Cis/Mylv/Student"; import Profil from "../../components/Cis/Profil/Profil"; import CmsNews from "../../components/Cis/Cms/News"; @@ -60,62 +60,55 @@ const router = VueRouter.createRouter({ }, // Redirect old links to new format { - path: "/Cis/Stundenplan/:lv_id(\\d+)", // define lv_id as numeric so this matches - name: "StundenplanNumeric", + // only trigger on first param being numeric to avoid paths like "Stundenplan/Month" entering here + path: "/Cis/Stundenplan/:lv_id(\\d+)", + name: "StundenplanOld", component: Stundenplan, redirect: (to) => { return { // redirect to longer Stundenplan url and map params name: "Stundenplan", params: { - mode: "Week", - focus_date: new Date().toISOString().split("T")[0], - lv_id: to.params.lv_id || null - + lv_id: to.params.lv_id }, }; }, }, - { - // actual routes after Stundenplan -> config/routes.php - // actual param handling -> controllers/Cis/Stundenplan.php + { path: `/Cis/Stundenplan/:mode?/:focus_date?/:lv_id?`, name: 'Stundenplan', component: Stundenplan, props: (route) => { // validate and set mode/focus date if for some reason missing const validModes = ["Month", "Week", "Day"]; - // default to mode week if not provided + // check mode string let mode = route.params.mode && validModes.includes(route.params.mode.charAt(0).toUpperCase() + route.params.mode.slice(1).toLowerCase()) ? route.params.mode.charAt(0).toUpperCase() + route.params.mode.slice(1).toLowerCase() - : "Week"; + : DEFAULT_MODE_STUNDENPLAN; - // default focus_date: today date if not provided + // default to today date if not provided let focusDate = route.params.focus_date || new Date().toISOString().split("T")[0]; - // for consistency reasons format the props into the viewData object so we have consistency in the form - // we access route specific data whether it is codigniter served or just another vue component that has been - // mounted + // for consistency reasons format the props into one object but actually use a new name to we dont collide with + // existing viewData declaration written from codeigniter 3 into routerview tag return { - viewData: { + propsViewData: { mode, focusDate, - lv_id: route.params.lv_id || null + lv_id: route.params.lv_id } }; }, beforeEnter: (to, from, next) => { - // If missing mode or focus_date, redirect with defaults + // missing mode or focus_date -> set defaults if (!to.params.mode || !to.params.focus_date) { next({ name: "Stundenplan", params: { - - mode: to.params.mode || "Week", + mode: to.params.mode || DEFAULT_MODE_STUNDENPLAN, focus_date: to.params.focus_date || new Date().toISOString().split("T")[0], - lv_id: to.params.lv_id || null - - }, + lv_id: to.params.lv_id + } }); } else { next(); diff --git a/public/js/components/Calendar/Calendar.js b/public/js/components/Calendar/Calendar.js index 9ea37c19e..8eed731cd 100644 --- a/public/js/components/Calendar/Calendar.js +++ b/public/js/components/Calendar/Calendar.js @@ -63,7 +63,7 @@ export default { }, watch:{ mode(newVal) { - console.log('mode watcher', newVal) + this.$emit('change:mode', newVal) }, selectedEvent:{ handler(newSelectedEvent) { @@ -125,7 +125,6 @@ export default { this.prevMode = this.currMode; this.currMode = v; } - this.$emit('change:mode', this.currMode) } }, eventsPerDay() { @@ -165,12 +164,12 @@ export default { if (this.events && Array.isArray(this.events) && this.events.length > 0) { let filteredEvents = this.events.filter(event => { let eventDate = new CalendarDate(new Date(event.datum)); - if (this.mode == 'week') + if (this.mode == 'week' || this.mode == 'Week') { // week view filters the elements only for the same week return this.focusDate.w == eventDate.w; } - else if (this.mode == 'day') + else if (this.mode == 'day' || this.mode == 'Day') { // day view filters the elements for the same day and the same week return this.focusDate.d == eventDate.d && this.focusDate.w == eventDate.w; @@ -191,13 +190,16 @@ export default { }, }, methods: { + setMode(mode) { + this.mode = mode + }, handleInput(day) { this.$emit(day[0], day[1]); }, }, created() { const initMode = this.initialMode.toLowerCase() - const allowedInitialModes = ['years', 'day']; + const allowedInitialModes = ['day']; if (!this.noWeekView) allowedInitialModes.push('week'); if (!this.noMonthView) diff --git a/public/js/components/Calendar/Header.js b/public/js/components/Calendar/Header.js index 5d92304c6..5ee3d51e7 100644 --- a/public/js/components/Calendar/Header.js +++ b/public/js/components/Calendar/Header.js @@ -3,9 +3,9 @@ export default { return{ selected: this.mode, modes:{ - day: { mode_bezeichnung: "Tag", icon: "fa-calendar-day" , condition:true}, - week: { mode_bezeichnung: "Woche", icon: "fa-calendar-week", condition: !this.noWeekView }, - month: { mode_bezeichnung: "Monat", icon: "fa-calendar-days", condition: !this.noMonthView }, + day: { mode_bezeichnung: "day", icon: "fa-calendar-day" , condition:true}, + week: { mode_bezeichnung: "week", icon: "fa-calendar-week", condition: !this.noWeekView }, + month: { mode_bezeichnung: "month", icon: "fa-calendar-days", condition: !this.noMonthView }, }, headerPadding:null, } @@ -62,7 +62,7 @@ export default {
-
diff --git a/public/js/components/Cis/Stundenplan/Stundenplan.js b/public/js/components/Cis/Stundenplan/Stundenplan.js index afd121b2c..9d70fa948 100644 --- a/public/js/components/Cis/Stundenplan/Stundenplan.js +++ b/public/js/components/Cis/Stundenplan/Stundenplan.js @@ -4,14 +4,14 @@ import LvModal from "../Mylv/LvModal.js"; import LvInfo from "../Mylv/LvInfo.js" import LvMenu from "../Mylv/LvMenu.js" -export const DEFAULT_MODE = 'Week' +export const DEFAULT_MODE_STUNDENPLAN = 'Week' const Stundenplan = { name: 'Stundenplan', data() { return { events: null, - calendarMode: DEFAULT_MODE, + calendarMode: DEFAULT_MODE_STUNDENPLAN, calendarDate: new CalendarDate(new Date()), eventCalendarDate: new CalendarDate(new Date()), currentlySelectedEvent: null, @@ -20,11 +20,11 @@ const Stundenplan = { studiensemester_kurzbz: null, studiensemester_start: null, studiensemester_ende: null, - uid: null, + uid: null } }, props: [ - "viewData" + "propsViewData" ], watch: { weekFirstDay: { @@ -37,12 +37,12 @@ const Stundenplan = { }, immediate: true, }, - 'viewData.lv_id'(newVal) { - // console.log('viewData.lv_id', newVal) + // forward/backward on history entries happening in stundenplan + 'propsViewData.lv_id'(newVal) { + }, + 'propsViewData.mode'(newVal) { + if(this.$refs.calendar) this.$refs.calendar.setMode(newVal) }, - 'viewData.focus_date'(newVal) { - // console.log('viewData.focus_date', newVal) - } }, components: { FhcCalendar, LvModal, LvMenu, LvInfo @@ -91,12 +91,12 @@ const Stundenplan = { String(day.getMonth() + 1).padStart(2, "0") + "-" + String(day.getDate()).padStart(2, "0"); - this.$router.replace({ + this.$router.push({ name: "Stundenplan", params: { mode: this.calendarMode, focus_date: date, - lv_id: this.viewData?.lv_id || null + lv_id: this.propsViewData?.lv_id || null } }) @@ -104,19 +104,18 @@ const Stundenplan = { }, handleChangeMode(mode) { const modeCapitalized = mode.charAt(0).toUpperCase() + mode.slice(1) - const calendarModeCapitalized = this.calendarMode.charAt(0).toUpperCase() + this.calendarMode.slice(1) - if(modeCapitalized !== calendarModeCapitalized) { // avoid the first $emit event where mode is initialized - this.$router.replace({ - name: "Stundenplan", - params: { - mode: modeCapitalized, - focus_date: this.currentDay.toISOString().split("T")[0], - lv_id: this.viewData?.lv_id || null - } - }) - this.calendarMode = mode - } + this.$router.push({ + name: "Stundenplan", + params: { + mode: modeCapitalized, + focus_date: this.currentDay.toISOString().split("T")[0], + lv_id: this.propsViewData?.lv_id ?? null + } + }) + + this.calendarMode = mode + }, showModal: function(event){ this.currentlySelectedEvent = event; @@ -149,7 +148,7 @@ const Stundenplan = { }, loadEvents: function(){ Promise.allSettled([ - this.$fhcApi.factory.stundenplan.getStundenplan(this.monthFirstDay, this.monthLastDay, this.viewData.lv_id), + this.$fhcApi.factory.stundenplan.getStundenplan(this.monthFirstDay, this.monthLastDay, this.propsViewData.lv_id), this.$fhcApi.factory.stundenplan.getStundenplanReservierungen(this.monthFirstDay, this.monthLastDay) ]).then((result) => { let promise_events = []; @@ -196,11 +195,12 @@ const Stundenplan = {