feat: scheduling cache

src/components/Schedule/index.vue

@@ -1,5 +1,6 @@
 <script>
 import { getSchedule } from '@/api/calendar'
+import { getSchedule as getScheduleCache } from '@/utils/cache'
 import { ScheduleType } from '@/constant'
 import ScheduleCalendar from './ScheduleCalendar'
 import ScheduleSwiper from './ScheduleSwiper'
@@ -30,6 +31,9 @@ export default {
     }
   },
   methods: {
+    getApi () {
+      return this.$attrs.editable ? getSchedule : getScheduleCache
+    },
     getSchedule () {
       const options = {
         loading: true,
@@ -37,11 +41,14 @@ export default {
         detail: null
       }
       this.options = options
-      getSchedule(this.schedule).then(schedule => {
-        options.detail = schedule
-      }, () => {
-        options.error = true
-      }).finally(() => {
+      this.getApi()(this.schedule).then(
+        schedule => {
+          options.detail = schedule
+        },
+        () => {
+          options.error = true
+        }
+      ).finally(() => {
         options.loading = false
       })
     }
@@ -71,17 +78,7 @@ export default {
     }
 
     const { detail } = this.options
-    let component
-    switch (detail.type) {
-      case ScheduleType.RECUR:
-        component = 'ScheduleSwiper'
-        break
-      default:
-        component = 'ScheduleCalendar'
-        break
-    }
-
-    return h(component, {
+    return h(detail.type === ScheduleType.RECUR ? 'ScheduleSwiper' : 'ScheduleCalendar', {
       props: {
         detail,
         ...this.$attrs

src/utils/cache.js

@@ -1,6 +1,6 @@
 import { getAssetUrl } from '@/api/asset'
-import { getProgram } from '@/api/program'
-import { getSchedule } from '@/api/calendar'
+import { getProgram as programApi } from '@/api/program'
+import { getSchedule as scheduleApi } from '@/api/calendar'
 import { ScheduleType } from '@/constant'
 
 const cache = {
@@ -8,12 +8,14 @@ const cache = {
   [ScheduleType.RECUR]: {}
 }
 
+const scheduleCache = {}
+
 function getProgramInst (id) {
-  return getProgram(id, { custom: true })
+  return programApi(id, { custom: true, background: true })
 }
 
 function getScheduleInst (id) {
-  return getSchedule(id, { custom: true })
+  return scheduleApi(id, { custom: true, background: true })
 }
 
 function getProgramName ({ data }) {
@@ -35,14 +37,39 @@ function getScheduleImage ({ programs }) {
 function getPromise (type, id) {
   if (!cache[type][id]) {
     const promise = (type === ScheduleType.CALENDAR ? getProgramInst : getScheduleInst)(id)
-    promise.catch(() => {
-      cache[type][id] = null
-    })
+    promise.then(
+      type === ScheduleType.CALENDAR ? null : schedule => {
+        if (!scheduleCache[id]) {
+          scheduleCache[id] = promise
+        }
+      },
+      () => {
+        cache[type][id] = null
+      }
+    )
     cache[type][id] = promise
   }
   return cache[type][id]
 }
 
+export function getSchedule (id) {
+  if (!scheduleCache[id]) {
+    const promise = scheduleApi(id)
+    promise.then(
+      schedule => {
+        if (schedule.type === ScheduleType.RECUR) {
+          cache[schedule.type][schedule.id] = promise
+        }
+      },
+      () => {
+        scheduleCache[id] = null
+      }
+    )
+    scheduleCache[id] = promise
+  }
+  return scheduleCache[id]
+}
+
 export function getName (type, id) {
   return getPromise(type, id).then(type === ScheduleType.CALENDAR ? getProgramName : getScheduleName)
 }

src/views/schedule/designer/index.vue

@@ -29,7 +29,10 @@ export default {
   },
   methods: {
     onSubmit () {
-      this.$router.replace({ name: 'schedule-list', params: { refresh: true }})
+      this.$router.replace({
+        name: 'schedule-list',
+        params: { refresh: true }
+      })
     }
   }
 }