Fix redirect problem for scheduleEntry delete

manuelmeister · manuelmeister · commit f1a84b6790c6 · 2025-02-08T18:47:24.000+01:00
diff --git a/frontend/src/components/activity/ScheduleEntry.vue b/frontend/src/components/activity/ScheduleEntry.vue
@@ -193,7 +193,7 @@ Displays a single scheduleEntry
                     class="text-right tabular-nums pb-2 pr-4"
                   >
                     <RouterLink
-                      v-if="scheduleEntryItem._meta.self !== scheduleEntry()._meta.self"
+                      v-if="scheduleEntryItem._meta.self !== scheduleEntry._meta.self"
                       :to="scheduleEntryRoute(scheduleEntryItem)"
                       class="e-title-link"
                     >
@@ -215,7 +215,7 @@ Displays a single scheduleEntry
                     <RouterLink
                       v-if="
                         category.numberingStyle === '-' &&
-                        scheduleEntryItem._meta.self !== scheduleEntry()._meta.self
+                        scheduleEntryItem._meta.self !== scheduleEntry._meta.self
                       "
                       :to="scheduleEntryRoute(scheduleEntryItem)"
                       class="e-title-link"
@@ -231,9 +231,9 @@ Displays a single scheduleEntry
             </table>
             <DialogActivityEdit
               v-if="activity && isContributor"
-              :schedule-entry="scheduleEntry()"
+              :schedule-entry="scheduleEntry"
               hide-header-fields
-              @activityUpdated="activity.$reload()"
+              @activity-updated="activity.$reload()"
             >
               <template #activator="{ on }">
                 <ButtonEdit text small class="v-btn--has-bg" v-on="on" />
@@ -292,7 +292,11 @@ import RootNode from '@/components/activity/RootNode.vue'
 import ActivityResponsibles from '@/components/activity/ActivityResponsibles.vue'
 import { dateHelperUTCFormatted } from '@/mixins/dateHelperUTCFormatted.js'
 import { campRoleMixin } from '@/mixins/campRoleMixin'
-import router, { periodRoute, scheduleEntryRoute } from '@/router.js'
+import router, {
+  firstActivityScheduleEntry,
+  periodRoute,
+  scheduleEntryRoute,
+} from '@/router.js'
 import DownloadNuxtPdf from '@/components/print/print-nuxt/DownloadNuxtPdfListItem.vue'
 import DownloadClientPdf from '@/components/print/print-client/DownloadClientPdfListItem.vue'
 import { errorToMultiLineToast } from '@/components/toast/toasts'
@@ -332,11 +336,34 @@ export default {
       isPaperDisplaySize: () => this.isPaperDisplaySize,
     }
   },
+  async beforeRouteUpdate(to, from, next) {
+    if (to.params.scheduleEntryId !== from.params.scheduleEntryId) {
+      return await this.api
+        .get()
+        .scheduleEntries({ id: to.params.scheduleEntryId })
+        ._meta.load.then(() => next())
+        .catch(() =>
+          next({
+            name: 'camp/activity',
+            params: {
+              ...to.params,
+              scheduleEntryId: firstActivityScheduleEntry(this.activity).id,
+            },
+          })
+        )
+    } else {
+      return next()
+    }
+  },
   props: {
-    scheduleEntry: {
-      type: Object,
+    activityId: {
+      type: String,
       required: true,
     },
+    scheduleEntryId: {
+      type: String,
+      default: null,
+    },
   },
   data() {
     return {
@@ -348,7 +375,18 @@ export default {
   },
   computed: {
     activity() {
-      return this.scheduleEntry.activity()
+      return this.api.get().activities({ id: this.activityId })
+    },
+    scheduleEntry() {
+      try {
+        if (this.scheduleEntryId) {
+          return this.api.get().scheduleEntries({ id: this.scheduleEntryId })
+        } else {
+          return firstActivityScheduleEntry(this.activity)
+        }
+      } catch {
+        return firstActivityScheduleEntry(this.activity)
+      }
     },
     camp() {
       return this.activity.camp()
diff --git a/frontend/src/components/activity/dialog/DialogActivityEdit.vue b/frontend/src/components/activity/dialog/DialogActivityEdit.vue
@@ -20,7 +20,7 @@
     <DialogActivityForm
       :activity="entityData"
       :current-schedule-entry="scheduleEntry"
-      :period="scheduleEntry.period"
+      :period="scheduleEntry.period()"
       :hide-location="hideHeaderFields"
     />
   </dialog-form>
@@ -131,6 +131,7 @@ export default {
     },
     updatedSuccessful(data) {
       this.close()
+      this.api.reload(this.activity)
       this.$emit('activity-updated', data)
     },
   },
diff --git a/frontend/src/components/activity/dialog/DialogActivityForm.vue b/frontend/src/components/activity/dialog/DialogActivityForm.vue
@@ -72,7 +72,7 @@ export default {
     },
     currentScheduleEntry: {
       type: Object,
-      required: true,
+      default: null,
     },
     autoselectTitle: {
       type: Boolean,
diff --git a/frontend/src/components/activity/dialog/FormScheduleEntryList.vue b/frontend/src/components/activity/dialog/FormScheduleEntryList.vue
@@ -24,8 +24,8 @@
           :periods="periods"
           :deletable="
             scheduleEntriesWithoutDeleted.length > 1 &&
-            ($route.name !== 'activity' ||
-              scheduleEntry.self !== currentScheduleEntry._meta.self)
+            ($route.name !== 'camp/activity' ||
+              scheduleEntry.self !== currentScheduleEntry?._meta.self)
           "
           @delete="deleteEntry(scheduleEntry)"
         />
@@ -53,7 +53,7 @@ export default {
 
     currentScheduleEntry: {
       type: Object,
-      required: true,
+      default: null,
     },
 
     // all available periods
diff --git a/frontend/src/components/campAdmin/DialogCategoryCreate.vue b/frontend/src/components/campAdmin/DialogCategoryCreate.vue
@@ -264,10 +264,7 @@ export default {
         const match = router.matcher.match(url)
 
         if (match.name === 'camp/activity') {
-          const scheduleEntry = await this.api
-            .get()
-            .scheduleEntries({ id: match.params['scheduleEntryId'] })
-          return await scheduleEntry.activity()
+          return await this.api.get().activities({ id: match.params['activityId'] })
         } else if (match.name === 'camp/admin/activity/category') {
           return await this.api.get().categories({ id: match.params['categoryId'] })
         }
diff --git a/frontend/src/components/campAdmin/ErrorExistingActivitiesList.vue b/frontend/src/components/campAdmin/ErrorExistingActivitiesList.vue
@@ -16,6 +16,7 @@
                 name: 'camp/activity',
                 params: {
                   campId: camp.id,
+                  activityId: activity.id,
                   scheduleEntryId: scheduleEntry.id,
                 },
               }"
diff --git a/frontend/src/components/dashboard/ActivityRow.vue b/frontend/src/components/dashboard/ActivityRow.vue
@@ -139,6 +139,7 @@ export default {
         name: 'camp/activity',
         params: {
           campId: this.scheduleEntry.period().camp().id,
+          activityId: this.scheduleEntry.activity().id,
           scheduleEntryId: this.scheduleEntry.id,
         },
       }
diff --git a/frontend/src/components/program/DialogActivityCreate.vue b/frontend/src/components/program/DialogActivityCreate.vue
@@ -143,7 +143,7 @@ export default {
       return this.period.camp()
     },
     period() {
-      return this.scheduleEntry.period
+      return this.scheduleEntry.period()
     },
     clipboardAccessDenied() {
       return (
@@ -282,11 +282,7 @@ export default {
         const match = router.matcher.match(url)
 
         if (match.name === 'camp/activity') {
-          const scheduleEntry = await this.api
-            .get()
-            .scheduleEntries({ id: match.params['scheduleEntryId'] })
-
-          return await scheduleEntry.activity()
+          return await this.api.get().activities({ id: match.params['activityId'] })
         }
       }
       return null
diff --git a/frontend/src/components/story/StoryDay.vue b/frontend/src/components/story/StoryDay.vue
@@ -24,6 +24,7 @@
                   name: 'camp/activity',
                   params: {
                     campId: day.period().camp().id,
+                    activityId: scheduleEntry.activity().id,
                     scheduleEntryId: scheduleEntry.id,
                   },
                 }"
diff --git a/frontend/src/router.js b/frontend/src/router.js
@@ -502,23 +502,32 @@ export default new Router({
       ],
     },
     {
-      path: '/camps/:campId/:campShortTitle/program/activities/:scheduleEntryId/:activityName?',
+      path: '/camps/:campId/:campShortTitle/program/activity/:activityId/:scheduleEntryId?/:activityName?',
       name: 'camp/activity',
       components: {
         navigation: NavigationCamp,
         default: () => import('./views/camp/activity/Activity.vue'),
         aside: () => import('./views/camp/activity/SideBarProgram.vue'),
       },
-      beforeEnter: all([requireAuth, requireCamp, requireScheduleEntry]),
+      beforeEnter: all([requireAuth, requireCamp, requireActivityScheduleEntry]),
       props: {
         navigation: (route) => ({ camp: campFromRoute(route) }),
-        default: (route) => ({ scheduleEntry: scheduleEntryFromRoute(route) }),
+        default: (route) => ({
+          activityId: route.params.activityId,
+          scheduleEntryId: route.params.scheduleEntryId,
+        }),
         aside: (route) => ({
           camp: campFromRoute(route),
-          day: dayFromScheduleEntryInRoute(route),
+          activityId: route.params.activityId,
+          scheduleEntryId: route.params.scheduleEntryId,
         }),
       },
     },
+    {
+      path: '/camps/:campId/:campShortTitle/program/activities/:scheduleEntryId/:activityName?',
+      redirect:
+        '/camps/:campId/:campShortTitle/program/activity/0/:scheduleEntryId?/:activityName?',
+    },
     {
       path: '/',
       name: 'home',
@@ -600,27 +609,48 @@ async function requireCamp(to, from, next) {
   }
 }
 
-async function requireScheduleEntry(to, from, next) {
-  const scheduleEntry = await scheduleEntryFromRoute(to)
-  if (scheduleEntry === undefined) {
-    next({
-      name: 'PageNotFound',
-      params: [to.fullPath, ''],
-      replace: true,
+async function requireActivityScheduleEntry(to, from, next) {
+  await apiStore
+    .get()
+    .activities({ id: to.params.activityId })
+    ._meta.load.then((activity) => {
+      // activity exists
+      if (to.params.scheduleEntryId) {
+        apiStore
+          .get()
+          .scheduleEntries({ id: to.params.scheduleEntryId })
+          ._meta.load.then(() => {
+            // activity and scheduleEntry exist
+            next()
+          })
+          .catch(async () => {
+            // scheduleEntry is not found, use first activity scheduleEntry
+            to.params.scheduleEntryId = firstActivityScheduleEntry(activity).id
+            next(to)
+          })
+      }
+      next()
+    })
+    .catch(() => {
+      // activityId does not exist, check if scheduleEntryId exists
+      if (to.params.scheduleEntryId) {
+        apiStore
+          .get()
+          .scheduleEntries({ id: to.params.scheduleEntryId })
+          ._meta.load.then(async (scheduleEntry) => {
+            const activity = await scheduleEntry.activity()._meta.load
+            to.params.activityId = activity.id
+            next(to)
+          })
+          .catch(async () => {
+            // scheduleEntry and activity are not found, fallback to camp program
+            next({
+              ...to,
+              name: 'camp/program',
+            })
+          })
+      }
     })
-  } else {
-    await scheduleEntry._meta.load
-      .then(() => {
-        next()
-      })
-      .catch(() => {
-        next({
-          name: 'PageNotFound',
-          params: [to.fullPath, ''],
-          replace: true,
-        })
-      })
-  }
 }
 
 async function requirePeriod(to, from, next) {
@@ -721,13 +751,6 @@ export function periodFromRoute(route) {
   return apiStore.get().periods({ id: route.params.periodId })
 }
 
-function scheduleEntryFromRoute(route) {
-  if (!route.params.scheduleEntryId) {
-    return undefined
-  }
-  return apiStore.get().scheduleEntries({ id: route.params.scheduleEntryId })
-}
-
 function categoryFromRoute(route) {
   if (!route.params.categoryId) {
     return undefined
@@ -772,13 +795,6 @@ function getContentLayout(route) {
   }
 }
 
-function dayFromScheduleEntryInRoute(route) {
-  if (!route.params.scheduleEntryId) {
-    return undefined
-  }
-  return apiStore.get().scheduleEntries({ id: route.params.scheduleEntryId }).day()
-}
-
 /**
  * @param camp
  * @param subroute {'admin' | 'dashboard' | 'program' | 'material' | 'story' | 'home' | 'collaborators' | 'print' }
@@ -856,7 +872,8 @@ export function periodRoute(period, routeName = 'camp/period/program', query = {
 export function scheduleEntryRoute(scheduleEntry, query = {}) {
   if (scheduleEntry._meta.loading || scheduleEntry.activity()._meta.loading) return {}
 
-  const camp = scheduleEntry.activity().camp()
+  const activity = scheduleEntry.activity()
+  const camp = activity.camp()
 
   // if (camp._meta.loading) return {}
 
@@ -866,7 +883,8 @@ export function scheduleEntryRoute(scheduleEntry, query = {}) {
       campId: camp.id,
       campShortTitle: slugify(campShortTitle(camp)),
       scheduleEntryId: scheduleEntry.id,
-      activityName: slugify(scheduleEntry.activity().title),
+      activityId: activity.id,
+      activityName: slugify(activity.title),
     },
     query,
   }
@@ -967,6 +985,21 @@ async function firstFuturePeriod(route) {
   )
 }
 
+export async function firstActivityScheduleEntry(activity) {
+  if (typeof activity === 'string') {
+    activity = apiStore.get().activities({ id: activity })
+  }
+  return activity
+    .scheduleEntries()
+    .items.reduce(
+      (result, current) =>
+        result === null || new Date(result.start) > new Date(current.start)
+          ? current
+          : result,
+      null
+    )
+}
+
 async function redirectToPeriod(to, from, next, routeName) {
   const period = await firstFuturePeriod(to)
   if (period) {
diff --git a/frontend/src/views/camp/activity/Activity.vue b/frontend/src/views/camp/activity/Activity.vue
diff --git a/frontend/src/views/camp/activity/SideBarProgram.vue b/frontend/src/views/camp/activity/SideBarProgram.vue

Original file line number	Diff line number	Diff line change
`@@ -139,6 +139,7 @@ export default {`
`139`	`139`	`name: 'camp/activity',`
`140`	`140`	`params: {`
`141`	`141`	`campId: this.scheduleEntry.period().camp().id,`
	`142`	`+ activityId: this.scheduleEntry.activity().id,`
`142`	`143`	`scheduleEntryId: this.scheduleEntry.id,`
`143`	`144`	`},`
`144`	`145`	`}`