Merge pull request #164 from kaizumaki/feature/issue-160-display-period

N時間目の表示を修正（period, startTime, endTimeの設定）

Author: NEKOYASAN

src/components/PeriodCard.vue

@@ -2,22 +2,17 @@
   <div class="PeriodCard">
     <div class="PeriodCard-NumberBlock">
       <div class="PeriodCard-Number">
-        <span class="PeriodCard-Number-Num">1</span>
+        <span class="PeriodCard-Number-Num">{{ period + 1 }}</span>
         <span class="PeriodCard-Number-Text">時間目</span>
       </div>
       <div class="PeriodCard-Time">
-        <span>00:00</span>
+        <span>{{ formatDate(time) }}</span>
         <span>|</span>
-        <span>00:00</span>
+        <span>{{ formatDate(maxEndTime) }}</span>
       </div>
     </div>
     <v-row>
-      <v-col
-        v-for="(item, i) in classData.lessonsOnCurrentDate"
-        :key="i"
-        cols="12"
-        md="6"
-      >
+      <v-col v-for="(item, i) in classData" :key="i" cols="12" md="6">
         <content-card :lesson="item" />
       </v-col>
     </v-row>
@@ -27,19 +22,36 @@
 <script lang="ts">
 import Vue from 'vue'
 import dayjs from 'dayjs'
+import minMax from 'dayjs/plugin/minMax'
 import ContentCard from '@/components/ContentCard.vue'
+import { classData } from '@/types/store/classData'
+dayjs.extend(minMax)
 
 export default Vue.extend({
   components: { ContentCard },
   props: {
+    period: {
+      type: Number,
+      default: 0
+    },
+    time: {
+      type: String,
+      default: ''
+    },
     classData: {
-      type: Object,
-      default: () => {}
+      type: Array as () => classData.LessonWithId[],
+      default: () => []
+    }
+  },
+  computed: {
+    maxEndTime() {
+      const endTimeArray = this.classData.map(value => dayjs(value.endTime))
+      return dayjs.max(...endTimeArray)
     }
   },
   methods: {
     formatDate(date: Date): string {
-      return dayjs(date).format('HH:MM')
+      return dayjs(date).format('HH:mm')
     }
   }
 })

src/pages/classes/index.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="MainPage">
     <div v-if="classData.lessonsOnCurrentDate.length">
-      <period-card :class-data="classData" />
+      <period-card
+        v-for="(lessons, time, index) in lessonsGroupByPeriod"
+        :key="index"
+        :period="index"
+        :time="time"
+        :class-data="lessons"
+      />
     </div>
     <div v-else-if="today" class="Classes-Outer">
       <h1 class="Classes-Title">
@@ -22,14 +28,20 @@ import dayjs from 'dayjs'
 import isToday from 'date-fns/isToday'
 import { vxm } from '@/store'
 import PeriodCard from '@/components/PeriodCard.vue'
+import { classData } from '@/types/store/classData'
+import LessonWithId = classData.LessonWithId
 
+type LessonsGroupedBy = {
+  [key: string]: LessonWithId[]
+}
 type Data = {
   classData: typeof vxm.classData
 }
 
 type Computed = {
   today: boolean
   dateTitle: string
+  lessonsGroupByPeriod: LessonsGroupedBy
 }
 
 export default Vue.extend<Data, unknown, Computed, unknown>({
@@ -46,6 +58,16 @@ export default Vue.extend<Data, unknown, Computed, unknown>({
     },
     dateTitle() {
       return dayjs(vxm.app.currentDate).format('M/D')
+    },
+    lessonsGroupByPeriod() {
+      const groupBy = (targets: LessonWithId[], key: keyof LessonWithId) =>
+        targets.reduce((acc: LessonsGroupedBy, currentLesson: LessonWithId) => {
+          const valueToGroup = currentLesson[key].toString()
+          acc[valueToGroup] = acc[valueToGroup] || []
+          acc[valueToGroup].push(currentLesson)
+          return acc
+        }, {})
+      return groupBy(this.classData.lessonsOnCurrentDate, 'startTime')
     }
   }
 })