Merge branch 'development' into feature/177-tos

Author: NEKOYASAN

src/components/PeriodCard.vue

@@ -13,7 +13,11 @@
     </div>
     <v-row>
       <v-col v-for="(item, i) in classData" :key="i" cols="12" md="6">
-        <content-card :lesson="item" />
+        <content-card
+          :lesson="item"
+          :editable="editable"
+          @clickEditButton="$emit('clickEditButton', item)"
+        />
       </v-col>
     </v-row>
   </div>
@@ -41,6 +45,10 @@ export default Vue.extend({
     classData: {
       type: Array as () => classData.LessonWithId[],
       default: () => []
+    },
+    editable: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {

src/components/PeriodCardEditable.vue

@@ -1,7 +1,15 @@
 <template>
   <div class="MainPage">
     <div v-if="classData.lessonsOnCurrentDate.length">
-      <period-card-editable :class-data="classData" @clickEditButton="doEdit" />
+      <period-card
+        v-for="(lessons, time, index) in lessonsGroupByPeriod"
+        :key="index"
+        :period="index"
+        :time="time"
+        :class-data="lessons"
+        :editable="true"
+        @clickEditButton="doEdit"
+      />
       <ul class="Classes-List">
         <li>おうちで時間割について</li>
         <li>お問い合わせ</li>
@@ -44,20 +52,31 @@ import Vue from 'vue'
 import dayjs from 'dayjs'
 import isToday from 'date-fns/isToday'
 import { vxm } from '@/store'
-import PeriodCardEditable from '@/components/PeriodCardEditable.vue'
+import PeriodCard from '@/components/PeriodCard.vue'
 import SimpleBottomSheet from '@/components/SimpleBottomSheet.vue'
 import EditingScreen from '@/components/EditingScreen.vue'
-import { classData } from '~/types/store/classData'
+import { classData } from '@/types/store/classData'
+import LessonWithId = classData.LessonWithId
+
+type LessonsGroupedBy = {
+  [key: string]: LessonWithId[]
+}
 
 type DataType = {
   classData: typeof vxm.classData
   editingMode: boolean
   editPageValue: object
 }
 
+type Computed = {
+  today: boolean
+  dateTitle: string
+  lessonsGroupByPeriod: LessonsGroupedBy
+}
+
 export default Vue.extend({
   components: {
-    PeriodCardEditable,
+    PeriodCard,
     SimpleBottomSheet,
     EditingScreen
   },
@@ -100,6 +119,16 @@ export default Vue.extend({
     },
     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(vxm.classData.lessonsOnCurrentDate, 'startTime')
     }
   },
   methods: {