Use watch instead of computed

ecamp · Feb 13, 2025 · fcb536f · fcb536f
1 parent 8d83278
commit fcb536f
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 16 deletions.
diff --git a/frontend/src/components/activity/ScheduleEntry.vue b/frontend/src/components/activity/ScheduleEntry.vue
@@ -308,7 +308,7 @@ import ApiForm from '@/components/form/api/ApiForm.vue'
 import ApiSelect from '@/components/form/api/ApiSelect.vue'
 import ButtonEdit from '@/components/buttons/ButtonEdit.vue'
 import DialogActivityEdit from '@/components/activity/dialog/DialogActivityEdit.vue'
-import scheduleEntryRouteChange from '@/mixins/scheduleEntryRouteChange.js'
+import scheduleEntryRouteChange from '@/helpers/scheduleEntryRouteChange.js'
 
 export default {
   name: 'ScheduleEntry',
@@ -355,20 +355,14 @@ export default {
       layoutMode: false,
       editActivityTitle: false,
       categoryChangeState: null,
+      scheduleEntry: null,
       loading: true,
     }
   },
   computed: {
     activity() {
       return this.api.get().activities({ id: this.activityId })
     },
-    scheduleEntry() {
-      if (this.scheduleEntryId) {
-        return this.api.get().scheduleEntries({ id: this.scheduleEntryId })
-      } else {
-        return firstActivityScheduleEntry(this.activityId)
-      }
-    },
     camp() {
       return this.activity.camp()
     },
@@ -427,6 +421,19 @@ export default {
     },
   },
 
+  watch: {
+    scheduleEntryId: {
+      async handler(id) {
+        try {
+          this.scheduleEntry = this.api.get().scheduleEntries({ id })
+        } catch {
+          this.scheduleEntry = await firstActivityScheduleEntry(this.activityId)
+        }
+      },
+      immediate: true,
+    },
+  },
+
   // reload data every time user navigates to Activity view
   async mounted() {
     this.loading = true

diff --git a/frontend/src/components/activity/dialog/DialogActivityEdit.vue b/frontend/src/components/activity/dialog/DialogActivityEdit.vue
@@ -158,6 +158,7 @@ export default {
     updatedSuccessful(data) {
       this.close()
       this.api.reload(this.activity)
+      this.api.reload(this.scheduleEntry.period().scheduleEntries())
       this.$emit('activity-updated', data)
     },
   },

diff --git a/...nd/src/mixins/scheduleEntryRouteChange.js → ...d/src/helpers/scheduleEntryRouteChange.js b/...nd/src/mixins/scheduleEntryRouteChange.js → ...d/src/helpers/scheduleEntryRouteChange.js
@@ -14,7 +14,8 @@ export default async function scheduleEntryRouteChange(activity, to, from, next)
     return await apiStore
       .get()
       .scheduleEntries({ id: to.params.scheduleEntryId })
-      ._meta.load.then(() => next())
+      .$reload()
+      .then(() => next())
       .catch(async () => {
         return next({
           name: 'camp/activity',

diff --git a/frontend/src/router.js b/frontend/src/router.js
@@ -897,7 +897,7 @@ export async function firstActivityScheduleEntryRoute(activity, query = {}) {
     activity = await apiStore.get().activities({ id: activity })._meta.load
   }
   const camp = activity.camp()
-  await apiStore.reload(activity.scheduleEntries())
+  apiStore.reload(activity.scheduleEntries())
   const scheduleEntry = await firstActivityScheduleEntry(activity)
 
   return {

diff --git a/frontend/src/views/camp/activity/SideBarProgram.vue b/frontend/src/views/camp/activity/SideBarProgram.vue
@@ -38,7 +38,7 @@ import ScheduleEntries from '@/components/program/ScheduleEntries.vue'
 import { HTML5_FMT } from '@/common/helpers/dateFormat.js'
 import DaySwitcher from '@/components/activity/DaySwitcher.vue'
 import { firstActivityScheduleEntry } from '@/router.js'
-import scheduleEntryRouteChange from '@/mixins/scheduleEntryRouteChange.js'
+import scheduleEntryRouteChange from '@/helpers/scheduleEntryRouteChange.js'
 
 export default {
   name: 'SideBarProgram',
@@ -54,15 +54,12 @@ export default {
   data() {
     return {
       selectedDay: null,
+      scheduleEntry: null,
     }
   },
   computed: {
     day() {
-      if (this.scheduleEntryId) {
-        return this.api.get().scheduleEntries({ id: this.scheduleEntryId }).day()
-      } else {
-        return firstActivityScheduleEntry(this.activityId).day()
-      }
+      return this.scheduleEntry.day()
     },
     period() {
       return this.daySelection.period()
@@ -74,6 +71,18 @@ export default {
       return this.$date.utc(this.daySelection.start).format(HTML5_FMT.DATE)
     },
   },
+  watch: {
+    scheduleEntryId: {
+      async handler(id) {
+        try {
+          this.scheduleEntry = this.api.get().scheduleEntries({ id })
+        } catch {
+          this.scheduleEntry = await firstActivityScheduleEntry(this.activityId)
+        }
+      },
+      immediate: true,
+    },
+  },
 }
 </script>