Merge branch 'development' into feature/85-from-cookie-to-localstorage

Author: NEKOYASAN

functions/package.json

@@ -22,11 +22,12 @@
     "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-admin": "^8.11.0",
     "firebase-functions": "^3.6.1",
-    "firebase": "^7.14.2",
+    "firebase": "^7.14.3",
     "js-cookie": "^2.2.1",
     "jwt-decode": "^2.2.0",
     "lodash.clonedeep": "^4.5.0",
@@ -35,6 +36,7 @@
     "nuxt-svg-loader": "^1.2.0",
     "nuxt-webfontloader": "^1.1.0",
     "uuid": "^8.0.0",
+    "vue-property-decorator": "^8.4.2",
     "vuex-class-component": "^2.3.2",
     "vuex-persistedstate": "^3.0.1"
   },

src/assets/svgs/header_logo.svg

@@ -6,21 +6,7 @@
     :height="buttonSize"
     @click="onClick"
   >
-    <span v-if="iconSize === 'x-small'">
-      <v-icon :color="iconColor" x-small>{{ iconName }}</v-icon>
-    </span>
-    <span v-if="iconSize === 'small'">
-      <v-icon :color="iconColor" small>{{ iconName }}</v-icon>
-    </span>
-    <span v-if="iconSize === 'medium'">
-      <v-icon :color="iconColor" small>{{ iconName }}</v-icon>
-    </span>
-    <span v-if="iconSize === 'large'">
-      <v-icon :color="iconColor" small>{{ iconName }}</v-icon>
-    </span>
-    <span v-if="iconSize === 'x-large'">
-      <v-icon :color="iconColor" x-large>{{ iconName }}</v-icon>
-    </span>
+    <v-icon :size="iconSize" :color="iconColor">{{ iconName }}</v-icon>
   </v-btn>
 </template>
 
@@ -51,14 +37,9 @@ export default Vue.extend({
       default: '#004170'
     },
     iconSize: {
-      type: String,
+      type: [String, Number],
       required: false,
-      default: 'medium',
-      validator(value: string): boolean {
-        return ['x-small', 'small', 'medium', 'large', 'x-large'].includes(
-          value
-        )
-      }
+      default: '40'
     }
   },
   methods: {

src/components/AddButton.vue

@@ -2,7 +2,7 @@
   <v-container fill-height class="calendar-bar">
     <v-row align="center" class="pa-0 ma-0">
       <v-col cols="1" class="pa-0 ma-1">
-        <v-card class="calendar-bar-ym" flat="true">
+        <v-card class="calendar-bar-ym" flat>
           <v-card-title class="calendar-bar-ym-title">
             {{ currentMonthString }}
           </v-card-title>
@@ -13,7 +13,7 @@
       </v-col>
       <v-col
         v-for="date in dateListWindow.list"
-        :key="date"
+        :key="fmtft(date)"
         v-touch="{
           left: () => dateListWindow.nextList(),
           right: () => dateListWindow.prevList()
@@ -23,7 +23,6 @@
       >
         <v-card
           class="calendar-bar-date elevation-4"
-          flat="false"
           :class="{
             current: fmtft(date) === fmtft(dateListWindow.currentDate)
           }"
@@ -195,10 +194,19 @@ class DateListWindowImpl implements DateListWindow {
 
 @Component
 export default class CalendarBar extends Vue {
-  @Prop({ default: new Date() }) date: Date | undefined
-  @Prop({ default: { view: 'Week', startWeekOn: 'Monday' } }) config:
-    | CalendarBarConfig
-    | undefined
+  @Prop({
+    default() {
+      return { view: 'Week', startWeekOn: 'Monday' }
+    }
+  })
+  config: CalendarBarConfig | undefined
+
+  @Prop({
+    default() {
+      return new Date()
+    }
+  })
+  public value!: Date
 
   dateListWindow: DateListWindow = new DateListWindowImpl(
     this.config?.view ?? 'Week',
@@ -211,9 +219,19 @@ export default class CalendarBar extends Vue {
     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()
   }
 
@@ -247,14 +265,7 @@ export default class CalendarBar extends Vue {
 .calendar-bar {
   color: $color-white;
   font-size: small;
-  background: linear-gradient(
-    to bottom,
-    $color-white 0%,
-    $color-white 50%,
-    $color-base-color-01 50%,
-    $color-base-color-01 100%
-  );
-  padding: 0 3px;
+  padding: 0 0;
 }
 
 .calendar-bar-ym {
@@ -281,13 +292,15 @@ export default class CalendarBar extends Vue {
 .calendar-bar-ym-title {
   color: $color-base-color-01;
   font-size: 12px;
+  font-weight: bold;
   padding: 8px 0 0 0;
 }
 
 .calendar-bar-ym-subtitle {
   color: $color-white !important;
   font-size: 10px;
-  padding: 8px 2px 16px;
+  font-weight: bold;
+  padding: 8px 2px 0;
 }
 
 .calendar-bar-date {

src/components/CalendarBar.vue

@@ -52,12 +52,12 @@ export default Vue.extend({
 })
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .lessoncaption-title {
   display: flex;
   flex-direction: column;
-  background: #015998;
-  color: #fff;
+  background: $color-base-color-07;
+  color: $color-white;
   height: 66px;
   border-radius: 22px !important;
   margin: 0 8px;
@@ -71,7 +71,7 @@ export default Vue.extend({
   font-size: 28px;
   padding: 10px 2px 0 2px;
   display: flex;
-  color: #fff !important;
+  color: $color-white !important;
   align-items: center;
   text-align: center;
 }
@@ -80,7 +80,7 @@ export default Vue.extend({
   font-size: 8px;
   margin-top: 0;
   display: flex;
-  color: #fff !important;
+  color: $color-white !important;
   align-items: center;
   text-align: center;
 }
@@ -91,7 +91,7 @@ export default Vue.extend({
   font-weight: normal;
   font-size: 10px;
   text-align: center;
-  color: #fff;
+  color: $color-white;
   flex: none;
   order: 4;
   align-self: center;

src/components/LessonCaption.vue

@@ -1,15 +1,20 @@
 <template>
-  <v-bottom-sheet v-model="sheet" persistent>
-    <v-container class="simple-bottom-sheet">
-      <v-row>
-        <v-col class="message">{{ message }}</v-col>
-        <v-col cols="2">
-          <span class="abb-button">
-            <AddButton @addButtonClicked="addButtonClicked" />
-          </span>
-        </v-col>
-      </v-row>
-    </v-container>
+  <v-bottom-sheet v-model="sheet" class="sheet" persistent scrollable>
+    <v-card class="card">
+      <v-card-title class="card-title" />
+      <v-card-text class="card-text">
+        <v-container class="container">
+          <v-row class="row">
+            <v-col class="col message">{{ message }}</v-col>
+            <v-col cols="2">
+              <span class="add-button">
+                <AddButton @addButtonClicked="addButtonClicked" />
+              </span>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card-text>
+    </v-card>
   </v-bottom-sheet>
 </template>
 
@@ -23,6 +28,7 @@ export default Vue.extend({
   props: {
     message: {
       type: String,
+      default: 'メッセージ',
       required: true
     },
     expanded: {
@@ -38,32 +44,46 @@ export default Vue.extend({
   },
   methods: {
     addButtonClicked() {
-      this.sheet = !this.sheet
       this.$emit('addButtonClicked')
     }
   }
 })
 </script>
 
 <style lang="scss" scoped>
-.simple-bottom-sheet {
+.card {
   background-color: $color-base-color-07;
-  color: $color-white;
-  border-radius: 24px 24px 0 0;
+  border-radius: 24px 24px 0 0 !important;
+}
+
+.card-title {
+  padding: 8px !important;
+}
+.card-text {
+  padding: 0 !important;
+}
+
+.container {
+  padding: 0 16px 16px;
+}
+
+.row {
+  margin: 0;
+  padding: 0;
+}
+
+.col {
   padding: 0;
 }
 
 .message {
-  max-width: 90%;
-  padding: 1rem 1.5rem;
   align-self: center;
+  color: $color-white !important;
+  font-family: 'Noto Sans JP', sans-serif;
 }
 
 .add-button {
-  max-width: 20%;
-  margin: 0 12px;
-  padding: 10px;
-  align-self: end;
+  align-self: start;
   float: right;
 }
 </style>

src/components/SimpleBottomSheet.vue

@@ -62,9 +62,9 @@ describe('CalendarBar.vue', () => {
     // 2020-05-08T10:00:00.000+0900
     const dt = new Date(2020, 4, 8, 10, 0, 0, 0)
     const wrapper = mountFunction({
-      propsData: { date: dt, config: { view: 'V', startWeekOn: 'DOW' } }
+      propsData: { value: dt, config: { view: 'V', startWeekOn: 'DOW' } }
     })
-    expect(wrapper.props().date).toBe(dt)
+    expect(wrapper.props().value).toBe(dt)
     expect(wrapper.props().config.view).toBe('V')
     expect(wrapper.props().config.startWeekOn).toBe('DOW')
   })
@@ -87,7 +87,7 @@ describe('CalendarBar.vue', () => {
 
     wrapper = mountFunction({
       propsData: {
-        date: dt,
+        value: dt,
         config: { view: 'Day', startWeekOn: 'Sunday' }
       }
     })
@@ -97,7 +97,7 @@ describe('CalendarBar.vue', () => {
 
     wrapper = mountFunction({
       propsData: {
-        date: dt,
+        value: dt,
         config: { view: 'Day', startWeekOn: 'Monday' }
       }
     })
@@ -118,7 +118,7 @@ describe('CalendarBar.vue', () => {
       new Date(2020, 4, 9, 10, 0, 0, 0)
     )
     const props = (pDate: Date, pDow: string) => ({
-      date: pDate,
+      value: pDate,
       config: { view: 'Week', startWeekOn: pDow }
     })
     let dateListWindow
@@ -234,7 +234,7 @@ describe('CalendarBar.vue', () => {
       new Date(2020, 4, 9, 10, 0, 0, 0)
     )
     const props = (pDate: Date, pDow: string) => ({
-      date: pDate,
+      value: pDate,
       config: { view: 'Weekday', startWeekOn: pDow }
     })
     let dateListWindow
@@ -300,7 +300,7 @@ describe('CalendarBar.vue', () => {
 
     wrapper = mountFunction({
       propsData: {
-        date: dt,
+        value: dt,
         config: { view: 'Day', startWeekOn: 'Sunday' }
       }
     })
@@ -368,7 +368,7 @@ describe('CalendarBar.vue', () => {
 
     wrapper = mountFunction({
       propsData: {
-        date: dt,
+        value: dt,
         config: { view: 'Week', startWeekOn: 'Sunday' }
       }
     })
@@ -438,7 +438,7 @@ describe('CalendarBar.vue', () => {
 
     wrapper = mountFunction({
       propsData: {
-        date: dt,
+        value: dt,
         config: { view: 'Weekday', startWeekOn: 'Sunday' }
       }
     })