AddButtonを押したら編集画面が出るように$emitまわりを修正

Author: kaizumaki

src/components/SimpleBottomSheet.vue

@@ -50,7 +50,8 @@ export default Vue.extend({
   },
   methods: {
     addButtonClicked() {
-      this.$emit('addButtonClicked')
+      this.sheet = !this.sheet
+      this.$emit('addButtonClicked', this.sheet)
     }
   }
 })

src/pages/edit/index.vue

@@ -13,7 +13,12 @@
         <li>サイトポリシー</li>
       </ul>
     </div>
-    <simple-bottom-sheet message="2年B組の授業を追加・編集する" />
+    <simple-bottom-sheet
+      message="2年B組の授業を追加・編集する"
+      :expanded="isExpandedButton"
+      @addButtonClicked="handler"
+    />
+    <editing-screen :expanded="!isExpandedButton" />
   </div>
 </template>
 
@@ -22,22 +27,31 @@ import Vue from 'vue'
 import { vxm } from '@/store'
 import PeriodCardEditable from '@/components/PeriodCardEditable.vue'
 import SimpleBottomSheet from '@/components/SimpleBottomSheet.vue'
+import EditingScreen from '@/components/EditingScreen.vue'
 
-type Data = {
+type DataType = {
   classData: typeof vxm.classData
   dateTitle: string
+  isExpandedButton: boolean
 }
 
 export default Vue.extend({
   components: {
     PeriodCardEditable,
-    SimpleBottomSheet
+    SimpleBottomSheet,
+    EditingScreen
   },
   layout: 'protected',
-  data(): Data {
+  data(): DataType {
     return {
       classData: vxm.classData,
-      dateTitle: '25日'
+      dateTitle: '25日',
+      isExpandedButton: true
+    }
+  },
+  methods: {
+    handler(): void {
+      this.isExpandedButton = !this.isExpandedButton
     }
   }
 })