Merge branch 'development' of https://github.com/codeforjapan/StudyAtHome into feature/147-make-user-register-flow

Author: NEKOYASAN

nuxt.config.js

@@ -48,7 +48,7 @@ export default {
   /*
    ** Customize the progress-bar color
    */
-  loading: { color: '#fff' },
+  loading: { color: '#000000' },
   /*
    ** Global CSS
    */

package.json

@@ -31,21 +31,21 @@
     }
   },
   "dependencies": {
-    "@babel/runtime-corejs3": "^7.9.6",
-    "@nuxt/typescript-runtime": "^0.4.6",
-    "@nuxtjs/axios": "^5.10.3",
+    "@babel/runtime-corejs3": "^7.10.2",
+    "@nuxt/typescript-runtime": "^0.4.10",
+    "@nuxtjs/axios": "^5.11.0",
     "@nuxtjs/dotenv": "^1.4.1",
     "@nuxtjs/pwa": "^3.0.0-0",
     "@types/js-cookie": "^2.2.6",
     "@types/jwt-decode": "^2.2.1",
-    "@types/node": "^14.0.5",
+    "@types/node": "^14.0.13",
     "cookieparser": "^0.1.0",
     "core-js": "3.6.5",
     "cross-env": "^7.0.2",
     "date-fns": "^2.14.0",
     "dayjs": "^1.8.26",
     "express": "^4.17.1",
-    "firebase": "7.14.6",
+    "firebase": "7.15.1",
     "firebase-admin": "^8.12.0",
     "js-cookie": "^2.2.1",
     "jwt-decode": "^2.2.0",
@@ -60,24 +60,24 @@
     "vuex-persistedstate": "^3.0.1"
   },
   "devDependencies": {
-    "@nuxt/typescript-build": "^0.6.6",
+    "@nuxt/typescript-build": "^1.0.3",
     "@nuxtjs/eslint-config-typescript": "^2.0.0",
-    "@nuxtjs/stylelint-module": "^3.2.2",
+    "@nuxtjs/stylelint-module": "^4.0.0",
     "@nuxtjs/vuetify": "^1.11.2",
-    "@types/jest": "^25.2.3",
+    "@types/jest": "^26.0.0",
     "@vue/test-utils": "^1.0.3",
     "babel-core": "^6.26.3",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.0.1",
     "cpx": "^1.5.0",
-    "eslint": "^7.0.0",
+    "eslint": "^7.2.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-loader": "^4.0.2",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-tsdoc": "^0.2.4",
     "husky": "^4.2.5",
     "jest": "^26.0.1",
-    "lint-staged": "^10.2.2",
+    "lint-staged": "^10.2.10",
     "nodemon": "^2.0.3",
     "prettier": "^1.19.1",
     "rimraf": "^3.0.2",
@@ -86,7 +86,7 @@
     "stylelint-config-prettier": "^8.0.1",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-scss": "^3.17.2",
-    "ts-jest": "^26.0.0",
+    "ts-jest": "^26.1.0",
     "vue-jest": "^3.0.5"
   }
 }

src/components/ActionButton.vue

@@ -7,6 +7,7 @@
     @click="$emit('click')"
   >
     <span>{{ text }}</span>
+    <v-icon v-if="icon">{{ icon }}</v-icon>
   </v-btn>
 </template>
 
@@ -28,6 +29,9 @@ export default class ActionButton extends Vue {
 
   @Prop({ default: false })
   isLoading?: boolean
+
+  @Prop({ default: '' })
+  icon?: string
 }
 </script>
 

src/components/AddButton.vue

@@ -4,7 +4,7 @@
     :color="buttonColor"
     :width="buttonSize"
     :height="buttonSize"
-    @click="onClick"
+    @click="$emit('clickAddButton')"
   >
     <v-icon :size="iconSize" :color="iconColor">{{ iconName }}</v-icon>
   </v-btn>
@@ -41,11 +41,6 @@ export default Vue.extend({
       required: false,
       default: '40'
     }
-  },
-  methods: {
-    onClick(): void {
-      this.$emit('addButtonClicked')
-    }
   }
 })
 </script>

src/components/BaseDialog.vue

@@ -1,5 +1,10 @@
 <template>
-  <v-dialog :value="value" :persistent="modal" @input="$emit('input', $event)">
+  <v-dialog
+    max-width="320px"
+    :value="value"
+    :persistent="modal"
+    @input="$emit('input', $event)"
+  >
     <v-card class="DialogCard">
       <v-card-title class="DialogCardTitle">
         <v-icon class="DialogCardTitleIcon" size="48">{{ iconName }}</v-icon>
@@ -13,6 +18,8 @@
           v-for="(action, i) in actions"
           :key="i"
           class="my-3"
+          :theme="action.theme"
+          :icon="action.iconName"
           :text="action.buttonLabel"
           @click="doDialogAction(i)"
         />
@@ -34,6 +41,8 @@ import ActionButton from '@/components/ActionButton.vue'
 
 export type DialogAction = {
   buttonLabel: string
+  iconName: string
+  theme: string
   /**
    * ボタン押下時に実行する処理。実行後に BaseModalDialog を閉じないようにするには true を返す。
    */

src/components/BottomSheetLayer.vue

@@ -1,10 +1,11 @@
 <template>
   <v-bottom-sheet
-    v-model="layer"
+    :value="value"
     persistent
     scrollable
     no-click-animation
     :fullscreen="fullscreen"
+    @input="$emit('input', $event)"
   >
     <v-card class="Layer">
       <v-card-title class="Layer-CardElements Layer-CardTitle">
@@ -32,13 +33,9 @@
 <script lang="ts">
 import Vue from 'vue'
 
-type DataType = {
-  layer: boolean
-}
-
 export default Vue.extend({
   props: {
-    expanded: {
+    value: {
       type: Boolean,
       required: false,
       default: true
@@ -56,16 +53,6 @@ export default Vue.extend({
       required: false,
       default: false
     }
-  },
-  data(): DataType {
-    return {
-      layer: this.expanded
-    }
-  },
-  watch: {
-    expanded(newValue) {
-      this.layer = newValue
-    }
   }
 })
 </script>

src/components/CalendarBar.vue

@@ -65,6 +65,7 @@ export type CalendarBarConfig = {
 export interface DateListWindow {
   list: Array<Date>
   currentDate: Date
+  inputHandler: (value: Date) => Date
   selectDate(date: Date): DateListWindow
   nextDay(): DateListWindow
   prevDay(): DateListWindow
@@ -79,11 +80,13 @@ class DateListWindowImpl implements DateListWindow {
   startWeekOn: StartWeekOn
   currentDate: Date
   list: Array<Date>
+  inputHandler: (value: Date) => Date
 
   constructor(
     view: View = 'Week',
     startWeekOn: StartWeekOn = 'Monday',
-    date: Date = new Date()
+    date: Date = new Date(),
+    inputHandler: (value: Date) => Date
   ) {
     this.view = view
     this.startWeekOn = view === 'Weekday' ? 'Monday' : startWeekOn
@@ -96,6 +99,7 @@ class DateListWindowImpl implements DateListWindow {
       this.startWeekOn,
       this.currentDate
     )
+    this.inputHandler = inputHandler
   }
 
   nextDay(): DateListWindow {
@@ -128,6 +132,9 @@ class DateListWindowImpl implements DateListWindow {
       isValid(date) ? date : new Date()
     )
     this.list = this.generateDateList()
+
+    // CalendarBar を経由して変更を通知
+    this.inputHandler(this.currentDate)
     return this
   }
 
@@ -211,28 +218,18 @@ export default class CalendarBar extends Vue {
   dateListWindow: DateListWindow = new DateListWindowImpl(
     this.config?.view ?? 'Week',
     this.config?.startWeekOn ?? 'Monday',
-    this.date ?? new Date()
+    this.value ?? new Date(),
+    this.input
   )
 
-  @Emit('changeCurrentDate')
-  changeCurrentDate(): Date {
-    return this.dateListWindow.currentDate
-  }
-
-  private get date(): Date {
-    return this.value
-  }
-
   @Emit()
   public input(value: Date) {
     return value
   }
 
-  @Watch('dateListWindow.currentDate', { immediate: true })
-  // @Watch('dateListWindow.currentDate')
-  onChangeCurrentDate() {
-    this.input(this.dateListWindow.currentDate)
-    this.changeCurrentDate()
+  @Watch('value', { immediate: true })
+  onValueChanged(newValue: Date) {
+    this.dateListWindow.selectDate(newValue)
   }
 
   get currentMonthString(): string {

src/components/ContentCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="ContentCard-Outer">
-    <v-card class="ContentCard elevation-4">
+    <v-card class="ContentCard elevation-4" @click="toLessonDetail">
       <v-card-actions class="ContentCard-Actions">
         <subject-tag
           class="ContentCard-SubjectTag"
@@ -50,6 +50,7 @@ import Vue from 'vue'
 import SubjectTag from '@/components/SubjectTag.vue'
 import ContentCardEditorButton from '@/components/ContentCardEditorButton.vue'
 import { classData } from '~/types/store/classData'
+import LessonWithId = classData.LessonWithId
 
 export default Vue.extend({
   components: {
@@ -65,6 +66,12 @@ export default Vue.extend({
       type: Boolean,
       default: false
     }
+  },
+  methods: {
+    toLessonDetail() {
+      const lesson = this.lesson as LessonWithId
+      this.$router.push('/lesson/?lessonId=' + lesson.docId)
+    }
   }
 })
 </script>
@@ -73,30 +80,37 @@ export default Vue.extend({
 .ContentCard-Outer {
   display: flex;
 }
+
 .ContentCard-Button-Outer {
   display: flex;
   flex-direction: column;
   flex: 0 1 auto;
   margin-left: 12px;
+
   .ContentCard-Button {
     margin-bottom: 12px;
   }
 }
+
 .ContentCard {
   flex: 1 1 auto;
   color: $color-gray;
   border-radius: 14px !important;
+
   .ContentCard-Actions {
     padding: 16px 16px 0;
   }
+
   .ContentCard-SubjectTag {
     margin-right: 4px;
   }
+
   .ContentCard-Title {
     font-weight: bold;
     font-size: 14px;
     line-height: 1.75;
   }
+
   .ContentCard-Description {
     font-size: 12px;
     color: $color-gray;

src/components/EditingScreen.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-bottom-sheet v-model="screen" no-click-animation persistent scrollable>
+  <v-bottom-sheet :value="expanded" no-click-animation persistent scrollable>
     <v-card class="EditingScreen">
       <v-card-title class="EditingScreen-CardElements">
         <v-container class="EditingScreen-Container">
@@ -56,7 +56,7 @@
         </v-container>
       </v-card-actions>
     </v-card>
-    <v-snackbar :timeout="5000" :value="error" absolute top color="#C01B61">
+    <v-snackbar v-model="error" :timeout="5000" absolute top color="#C01B61">
       エラーにより授業の追加に失敗しました。時間をおいて再度お試しください。
     </v-snackbar>
   </v-bottom-sheet>
@@ -100,7 +100,6 @@ type FourthPageDataType = {
 }
 
 type DataType = {
-  screen: boolean
   page: number
   error: boolean
   lessonId: string
@@ -158,7 +157,6 @@ export default Vue.extend({
   },
   data(): DataType {
     return {
-      screen: this.expanded,
       page: 1,
       error: false,
       isHidden: this.value.isHidden,
@@ -199,9 +197,6 @@ export default Vue.extend({
     }
   },
   watch: {
-    expanded(newValue) {
-      this.screen = newValue
-    },
     value(value) {
       this.isHidden = value.isHidden
       this.lessonId = value.lessonId