Merge pull request #966 from traPtitech/feat/add-progress-circular-to…

…-calendar

feat:loading-barを追加

src/components/shared/Calendar.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-sheet height="64">
+    <v-sheet :height="status === 'loading' ? 60 : 64">
       <v-toolbar flat>
         <v-btn
           outlined
@@ -44,6 +44,11 @@
         </v-menu>
       </v-toolbar>
     </v-sheet>
+    <v-progress-linear
+      v-if="status == 'loading'"
+      indeterminate
+      color="primary"
+    ></v-progress-linear>
     <v-sheet :height="height - 64">
       <v-calendar
         :ref="calendarRefName"
@@ -130,6 +135,9 @@ export default class Calendar extends Vue {
   @Prop({ type: Array, default: [] })
   events!: ResponseEvent[]
 
+  @Prop({ type: String, default: 'loading' })
+  status!: 'loading' | 'loaded' | 'error'
+
   focus = ''
   type = 'month'
 

src/pages/Calendar.vue

@@ -3,6 +3,7 @@
     <calendar
       :height="784"
       :events="events"
+      :status="status"
       @monthChanged="fetchMonthlyEvents"
     />
   </v-col>
@@ -20,19 +21,26 @@ import api, { ResponseEvent } from '@/api'
   },
 })
 export default class CalendarPage extends Vue {
+  status: 'loading' | 'loaded' | 'error' = 'loading'
   events: ResponseEvent[] = []
 
   async created() {
     await this.fetchMonthlyEvents(new Date())
   }
 
   async fetchMonthlyEvents(newDate) {
+    this.status = 'loading'
     const startDate = new Date(newDate.getFullYear(), newDate.getMonth(), 1)
     const endDate = new Date(newDate.getFullYear(), newDate.getMonth() + 1, 0)
-    this.events = await api.events.getEvents({
-      dateBegin: startDate.toISOString(),
-      dateEnd: endDate.toISOString(),
-    })
+    try {
+      this.events = await api.events.getEvents({
+        dateBegin: startDate.toISOString(),
+        dateEnd: endDate.toISOString(),
+      })
+      this.status = 'loaded'
+    } catch (e) {
+      this.status = 'error'
+    }
   }
 }
 </script>