add: 本を登録するフォームを作成

package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "element-ui": "^2.4.11",
     "firebase": "^5.8.2",
+    "github-markdown-css": "^3.0.1",
     "highlight.js": "^9.13.1",
     "inversify": "^5.0.1",
     "marked": "^0.5.1",

src/boundary/bookApplicationService/InOutType.ts

@@ -10,7 +10,7 @@ export enum BookType {
 }
 export type Evaluation = 1 | 2 | 3 | 4 | 5
 export enum PurchasedLocation {
-  ONLINE = 'ONLcINE',
+  ONLINE = 'ONLINE',
   OFFLINE = 'OFFLINE',
 }
 
@@ -24,10 +24,10 @@ export type IBook = {
   type: BookType,
   price: number,
   owner: Owner,
-
+  purchasedUrl: string,
+  downloadUrl: string,
   // 任意
   coverImageFilePath: string | null,
-  purchasedUrl: string | null,
   evaluation: Evaluation | null,
   receiptImageFilePath: string | null,
   createdAt: Date,
@@ -43,10 +43,11 @@ export type IRegistrationParams = {
   type: BookType,
   price: number,
   owner: Owner,
+  purchasedUrl: string,
+  downloadUrl: string,
 
   // 任意
   coverImageFilePath: string | null,
-  purchasedUrl: string | null,
   evaluation: Evaluation | null,
   receiptImageFilePath: string | null,
 }

src/components/atoms/spaceStick.vue

@@ -0,0 +1,17 @@
+<template>
+  <div :style="`height: ${height}px; width: ${width}px;`"></div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+
+
+@Component
+export default class SpaceStick extends Vue {
+  @Prop({ default: 16 })
+  public height!: string | number
+
+  @Prop({ default: 0 })
+  public width!: string | number
+}
+</script>

src/components/containers/changeUserProfileForm.vue

@@ -7,17 +7,6 @@
     transition="dialog-bottom-transition"
     scrollable
   >
-    <v-avatar
-      size="36px"
-      slot="activator"
-    >
-      <img
-        width="36"
-        height="36"
-        :src="user.iconFilepath"
-        class="user-icon-img">
-    </v-avatar>
-
     <UserProfileForm
       :updateProfile="updateProfile"
       :user="user"

src/components/containers/createBookForm.vue

@@ -0,0 +1,98 @@
+<template>
+  <v-dialog
+    :value="isOpen"
+    @input="closeDialog()"
+    fullscreen
+    hide-overlay
+    transition="dialog-bottom-transition"
+    scrollable
+  >
+    <BookForm
+      :createBook="createBook"
+      :user="user"
+      @cancel="closeDialog()"/>
+
+    <!-- 登録中 -->
+    <v-dialog v-model="isSending" persistent width="300">
+      <v-card color="primary" dark>
+        <v-card-text>
+          登録中です...
+          <v-progress-linear
+            indeterminate
+            color="white"
+            class="mb-0"
+          />
+        </v-card-text>
+      </v-card>
+
+    </v-dialog>
+
+    <!-- 登録失敗 -->
+    <v-dialog :value="isSendFailed" @input="toStandby()" width="500">
+      <v-card color="error" dark>
+        <v-card-text>
+          エラーが発生しました<br>
+          恐れ入りますが時間を置いてから再度やり直してください
+        </v-card-text>
+
+        <v-card-actions>
+          <v-spacer/>
+          <v-btn
+            @click="toStandby()"
+            color="red lighten-2"
+          >OK</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-snackbar
+      :value="isSendSuccess"
+      @input="toStandby()"
+      :timeout="3000"
+      color="success"
+      top>
+      本の登録に成功しました
+    </v-snackbar>
+
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import { IRegistrationParams } from '@/boundary/bookApplicationService/InOutType'
+import BookForm from '@/components/organisms/createBookForm.vue'
+import {
+  closeDialog,
+  createBook,
+  toStandby,
+} from '@/store/containers/createBookForm/action'
+import selector from '@/store/containers/createBookForm/selector'
+import authSelector from '@/store/middleware/auth/selector'
+import { mapComputed } from '@/submodules/store'
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component({
+  components: {
+    BookForm,
+  },
+  computed: mapComputed(selector, authSelector),
+})
+export default class CreateBookFormContainer extends Vue {
+  public createBook(params: IRegistrationParams) {
+    return this.$store.dispatch(createBook({ params }))
+  }
+
+  public toStandby() {
+    return this.$store.dispatch(toStandby())
+  }
+
+  public closeDialog() {
+    return this.$store.dispatch(closeDialog())
+  }
+}
+</script>
+
+<style module>
+.user-icon-img {
+  cursor: pointer;
+}
+</style>

src/components/containers/navigation.vue

@@ -68,6 +68,7 @@
 
 <script lang="ts">
 import router from '@/router/index'
+import { openDialog as openCreateBookFormDialog } from '@/store/containers/createBookForm/action'
 import { closeDrawer } from '@/store/containers/navigation/action'
 import selector from '@/store/containers/navigation/selector'
 import { mapComputed } from '@/submodules/store'
@@ -84,11 +85,16 @@ export default class Navigation extends Vue {
         text: '購入済み書籍一覧',
         action: () => router.push('/books'),
       },
+      {
+        icon: 'library_add',
+        text: '本を登録する',
+        action: () => this.$store.dispatch(openCreateBookFormDialog()),
+      },
     ]
   }
 
-  public async fire(action: () => void) {
-    await this.$store.dispatch(closeDrawer())
+  public fire(action: () => void) {
+    this.$store.dispatch(closeDrawer())
     action()
   }
 }