From 809f87cac57d797066f44d82086d63124663dc36 Mon Sep 17 00:00:00 2001
From: k-okina <okinakahiro@gmail.com>
Date: Sun, 3 Feb 2019 00:56:20 +0900
Subject: [PATCH] =?UTF-8?q?add:=20=E6=9C=AC=E3=82=92=E7=99=BB=E9=8C=B2?=
 =?UTF-8?q?=E3=81=99=E3=82=8B=E3=83=95=E3=82=A9=E3=83=BC=E3=83=A0=E3=82=92?=
 =?UTF-8?q?=E4=BD=9C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 .../bookApplicationService/InOutType.ts       |   9 +-
 src/components/atoms/spaceStick.vue           |  17 +
 .../containers/changeUserProfileForm.vue      |  11 -
 src/components/containers/createBookForm.vue  |  98 ++++++
 src/components/containers/navigation.vue      |  10 +-
 src/components/organisms/createBookForm.vue   | 301 ++++++++++++++++++
 src/components/organisms/userProfileForm.vue  |  11 +-
 ...serImageUploader.vue => imageUploader.vue} |  10 +-
 src/config/user/rules.ts                      |   9 +
 .../BookApplicationService.ts                 |  10 +-
 src/domain/model/book/IBookFactory.ts         |   8 +
 src/domain/model/book/IBookRepository.ts      |   3 +-
 src/firebaseImpl/domain/book/BookFactory.ts   |  18 ++
 .../domain/book/FirebaseBookRepository.ts     |   2 -
 src/inversify/firebaseProviders.ts            |   3 +
 src/layouts/loggedInLayout.vue                |   3 +
 src/models/book.ts                            |   3 +-
 src/store/containers/createBookForm/action.ts |   9 +
 .../failureUpdateProfile.spec.ts              |  22 ++
 src/store/containers/createBookForm/index.ts  |  84 +++++
 .../containers/createBookForm/selector.ts     |  29 ++
 .../successUpdateProfile.spec.ts              |  20 ++
 src/store/containers/index.ts                 |   6 +-
 yarn.lock                                     |   4 +
 25 files changed, 664 insertions(+), 37 deletions(-)
 create mode 100644 src/components/atoms/spaceStick.vue
 create mode 100644 src/components/containers/createBookForm.vue
 create mode 100644 src/components/organisms/createBookForm.vue
 rename src/components/relay/{userImageUploader.vue => imageUploader.vue} (94%)
 create mode 100644 src/domain/model/book/IBookFactory.ts
 create mode 100644 src/firebaseImpl/domain/book/BookFactory.ts
 create mode 100644 src/store/containers/createBookForm/action.ts
 create mode 100644 src/store/containers/createBookForm/failureUpdateProfile.spec.ts
 create mode 100644 src/store/containers/createBookForm/index.ts
 create mode 100644 src/store/containers/createBookForm/selector.ts
 create mode 100644 src/store/containers/createBookForm/successUpdateProfile.spec.ts

diff --git a/package.json b/package.json
index 5dcac4c..1282822 100644
--- a/package.json
+++ b/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",
diff --git a/src/boundary/bookApplicationService/InOutType.ts b/src/boundary/bookApplicationService/InOutType.ts
index b662f09..1720419 100644
--- a/src/boundary/bookApplicationService/InOutType.ts
+++ b/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,
 }
diff --git a/src/components/atoms/spaceStick.vue b/src/components/atoms/spaceStick.vue
new file mode 100644
index 0000000..8f2d995
--- /dev/null
+++ b/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>
diff --git a/src/components/containers/changeUserProfileForm.vue b/src/components/containers/changeUserProfileForm.vue
index 78abd82..da3c07a 100644
--- a/src/components/containers/changeUserProfileForm.vue
+++ b/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"
diff --git a/src/components/containers/createBookForm.vue b/src/components/containers/createBookForm.vue
new file mode 100644
index 0000000..d2f5230
--- /dev/null
+++ b/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>
diff --git a/src/components/containers/navigation.vue b/src/components/containers/navigation.vue
index 64d1f83..f0689d0 100644
--- a/src/components/containers/navigation.vue
+++ b/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()
   }
 }
diff --git a/src/components/organisms/createBookForm.vue b/src/components/organisms/createBookForm.vue
new file mode 100644
index 0000000..5052d7e
--- /dev/null
+++ b/src/components/organisms/createBookForm.vue
@@ -0,0 +1,301 @@
+<template>
+  <v-card class="elevation-12">
+    <v-toolbar card dark color="primary">
+      <v-btn icon dark @click="cancel()">
+        <v-icon>close</v-icon>
+      </v-btn>
+      <v-toolbar-title>Registration Book</v-toolbar-title>
+    </v-toolbar>
+
+    <v-card-text>
+      <v-form ref="form" v-model="valid" lazy-validation>
+        <v-layout row wrap>
+          <v-flex xs12 md2>
+            <p>本の表紙</p>
+            <ImageUploader
+              v-model="coverImageFilePath"
+              minWidth="200"
+              minHeight="200" />
+          </v-flex>
+          <v-flex xs12 md2>
+            <p>領収書</p>
+            <ImageUploader
+              v-model="receiptImageFilePath"
+              minWidth="200"
+              minHeight="200" />
+          </v-flex>
+        </v-layout>
+
+        <v-layout row wrap>
+          <v-flex xs12 md6>
+            <v-text-field
+              v-model="title"
+              :rules="titleRules"
+              prepend-icon="subject"
+              label="タイトル"
+              type="text" />
+          </v-flex>
+        </v-layout>
+
+        <v-layout row wrap>
+          <v-flex xs12 md1>
+            <v-text-field
+              v-model.number="price"
+              :rules="priceRules"
+              prepend-icon="attach_money"
+              label="価格"
+              type="text" />
+          </v-flex>
+        </v-layout>
+
+        <v-layout row wrap>
+          <v-flex xs8 md4>
+            <v-flex xs4>
+              <p>所有者</p>
+              <v-btn-toggle color="primary" v-model="owner">
+                <template v-for="owner in ownerList">
+                  <v-btn flat :value="owner" :key="owner">
+                    {{ owner | ownerFilter }}
+                  </v-btn>
+                </template>
+              </v-btn-toggle>
+            </v-flex>
+          </v-flex>
+        </v-layout>
+
+        <SpaceStick />
+
+        <v-layout row wrap>
+          <v-flex xs8 md4>
+            <v-flex xs4>
+              <p>購入場所</p>
+              <v-btn-toggle color="primary" v-model="purchasedLocation">
+                <template v-for="location in purchasedLocationList">
+                  <v-btn flat :value="location" :key="location">
+                    {{ location }}
+                  </v-btn>
+                </template>
+              </v-btn-toggle>
+            </v-flex>
+          </v-flex>
+        </v-layout>
+
+        <SpaceStick />
+
+        <v-layout row wrap>
+          <v-flex xs8 md4>
+            <v-flex xs4>
+              <p>種類</p>
+              <v-btn-toggle color="primary" v-model="type">
+                <template v-for="bookType in bookTypeList">
+                  <v-btn flat :value="bookType" :key="bookType">
+                    {{ bookType | bookTypeFilter }}
+                  </v-btn>
+                </template>
+              </v-btn-toggle>
+            </v-flex>
+          </v-flex>
+        </v-layout>
+
+        <SpaceStick />
+
+        <v-flex :class="$style.group">
+          <p>購入日時</p>
+          <v-layout row wrap>
+            <v-flex xs2 md1>
+              <v-select
+                v-model="purchasedYear"
+                :items="years"
+                solo/>
+            </v-flex>
+            <v-flex xs2 md1>
+              <v-select
+                v-model="purchasedMonth"
+                :items="months"
+                solo/>
+            </v-flex>
+            <v-flex xs2 md1>
+              <v-select
+                v-model="purchasedDay"
+                :items="days"
+                solo/>
+            </v-flex>
+          </v-layout>
+        </v-flex>
+
+        <v-layout row wrap fill-height class="editor-wrapper flex-grow">
+          <v-flex xs12 sm5 class="a-flex flex-grow-deep">
+            <v-textarea
+              class="flex-grow"
+              v-model="description"
+              outline
+              no-resize
+              :rows="rows"
+              label="説明文"
+              color="primary" />
+          </v-flex>
+
+          <SpaceStick width="12" />
+
+          <v-flex hidden-xs-only md6 class="a-flex flex-grow">
+            <Markdown :source="description || 'プレビュー'" />
+          </v-flex>
+        </v-layout>
+
+      </v-form>
+
+    </v-card-text>
+
+    <v-card-actions>
+      <v-spacer/>
+      <v-btn
+        :disabled="!valid"
+        @click="submit()"
+        color="primary">
+        登録
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { BookType, Evaluation, Owner, PurchasedLocation } from '@/boundary/bookApplicationService/InOutType'
+import { IRegistrationParams } from '@/boundary/bookApplicationService/InOutType'
+import { IUser } from '@/boundary/userApplicationService/InOutType'
+import SpaceStick from '@/components/atoms/spaceStick.vue'
+import Markdown from '@/components/molecules/markdown/markdown'
+import ImageUploader from '@/components/relay/imageUploader.vue'
+import { days, months, years } from '@/config/user/birthday'
+import * as rules from '@/config/user/rules'
+import { Component, Prop, Vue } from 'vue-property-decorator'
+
+@Component({
+  filters: {
+    bookTypeFilter(bookType: BookType) {
+      if (bookType === BookType.PHYSICAL_BOOK) {
+        return '物理本'
+      }
+      return '電子本'
+    },
+    ownerFilter(owner: Owner) {
+      switch (owner) {
+        case Owner.SELF:
+          return '自分'
+        case Owner.COMPANY:
+          return '会社'
+        case Owner.OTHER:
+          return 'その他'
+      }
+    },
+  },
+  components: {
+    ImageUploader,
+    Markdown,
+    SpaceStick,
+  },
+})
+export default class CreateBookForm extends Vue {
+  public $refs!: {
+    form: VForm,
+  }
+
+  @Prop({required: true})
+  public createBook!: (params: IRegistrationParams) => void
+
+  @Prop({required: true})
+  public user!: IUser
+
+  public valid = true
+
+  public title = ''
+  public purchasedLocation = PurchasedLocation.ONLINE
+  public description = ''
+  public type = BookType.PHYSICAL_BOOK
+  public price = 0
+  public owner = Owner.COMPANY
+  public purchasedUrl = ''
+  public downloadUrl = ''
+  public coverImageFilePath: string | null = null
+  public evaluation: Evaluation | null = null
+  public receiptImageFilePath: string | null = null
+
+  public purchasedYear = new Date().getFullYear()
+  public purchasedMonth = new Date().getMonth() + 1
+  public purchasedDay = new Date().getDate()
+
+  get rows() {
+    const rows = this.description.split('\n').length
+    if (rows < 10) {
+      return 10
+    }
+    return rows
+  }
+  get titleRules() {
+    return rules.requiredRules('Title is required')
+  }
+
+  get priceRules() {
+    return [
+      ...rules.requiredRules('Price is required'),
+      ...rules.numberRules,
+    ]
+  }
+  get urlRules() { return rules.urlRules }
+  get years() { return years }
+  get months() { return months }
+  get days() { return days }
+  get purchasedLocationList() {
+    return [
+      PurchasedLocation.ONLINE,
+      PurchasedLocation.OFFLINE,
+    ]
+  }
+  get bookTypeList() {
+    return [
+      BookType.PHYSICAL_BOOK,
+      BookType.E_BOOK,
+    ]
+  }
+  get ownerList() {
+    return [
+      Owner.COMPANY,
+      Owner.SELF,
+      Owner.OTHER,
+    ]
+  }
+  get purchasedDatetime() {
+    return new Date(`${this.purchasedYear}/${this.purchasedMonth}/${this.purchasedDay}`)
+  }
+
+  public submit() {
+    if (this.$refs.form.validate()) {
+      this.createBook({
+        userId: this.user.id,
+        title: this.title,
+        purchasedLocation: this.purchasedLocation,
+        purchasedDatetime: this.purchasedDatetime,
+        description: this.description,
+        type: this.type,
+        price: this.price,
+        owner: this.owner,
+        coverImageFilePath: this.coverImageFilePath,
+        purchasedUrl: this.purchasedUrl,
+        downloadUrl: this.downloadUrl,
+        evaluation: this.evaluation,
+        receiptImageFilePath: this.receiptImageFilePath,
+      })
+    }
+  }
+
+  public cancel() {
+    this.$emit('cancel')
+  }
+}
+</script>
+
+<style module>
+.group {
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+</style>
diff --git a/src/components/organisms/userProfileForm.vue b/src/components/organisms/userProfileForm.vue
index c4ee103..e60d4cf 100644
--- a/src/components/organisms/userProfileForm.vue
+++ b/src/components/organisms/userProfileForm.vue
@@ -10,7 +10,7 @@
     <v-card-text>
       <v-form ref="form" v-model="valid" lazy-validation>
         <v-layout row wrap>
-          <UserImageUploader v-model="iconFilepath" />
+          <ImageUploader v-model="iconFilepath" />
         </v-layout>
 
         <v-layout row wrap>
@@ -143,7 +143,7 @@
     <v-card-actions>
       <v-spacer/>
       <v-btn
-        :disabled="!valid || isSending"
+        :disabled="!valid"
         @click="submit()"
         color="primary"
       >保存</v-btn>
@@ -153,7 +153,7 @@
 
 <script lang="ts">
 import { IUser } from '@/boundary/userApplicationService/InOutType'
-import UserImageUploader from '@/components/relay/userImageUploader.vue'
+import ImageUploader from '@/components/relay/imageUploader.vue'
 import { days, months, years } from '@/config/user/birthday'
 import { genderList } from '@/config/user/gender'
 import * as rules from '@/config/user/rules'
@@ -161,7 +161,7 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
 
 @Component({
   components: {
-    UserImageUploader,
+    ImageUploader,
   },
 })
 export default class UserProfileForm extends Vue {
@@ -173,7 +173,6 @@ export default class UserProfileForm extends Vue {
   @Prop({required: true}) public user!: IUser
 
   public valid = true
-  public isSending = false
 
   public iconFilepath!: string
   public displayName!: string
@@ -226,7 +225,6 @@ export default class UserProfileForm extends Vue {
 
   public submit() {
     if (this.$refs.form.validate()) {
-      this.isSending = true
       this.updateProfile({
         id: this.user.id,
         emailAddress: this.user.emailAddress,
@@ -240,7 +238,6 @@ export default class UserProfileForm extends Vue {
         hireDate: this.hireDate,
         gender: this.gender,
       })
-      this.isSending = false
     }
   }
 
diff --git a/src/components/relay/userImageUploader.vue b/src/components/relay/imageUploader.vue
similarity index 94%
rename from src/components/relay/userImageUploader.vue
rename to src/components/relay/imageUploader.vue
index 342b766..52128f6 100644
--- a/src/components/relay/userImageUploader.vue
+++ b/src/components/relay/imageUploader.vue
@@ -4,7 +4,7 @@
     :action="''"
     :http-request="uploadToFilesbaseStorage"
     :show-file-list="false"
-    :before-upload="beforeAvatarUpload">
+    :before-upload="beforeAvatarUpload" >
 
     <img v-if="imageUrl" :src="imageUrl" class="avatar">
     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
@@ -92,9 +92,11 @@ enum UploadState {
     prop: 'url',
   },
 })
-export default class UserImageUploader extends Vue {
+export default class ImageUploader extends Vue {
   @Prop() public url!: string
   @Prop({default: false}) public hideStatus!: boolean
+  @Prop({default: 0}) public minWidth!: number
+  @Prop({default: 0}) public minHeight!: number
 
   public imageUrl = ''
   public isNotAllowFileType = false
@@ -181,6 +183,10 @@ export default class UserImageUploader extends Vue {
     &:hover {
       border-color: #409EFF;
     }
+    &.el-upload--text {
+      min-width: 200px;
+      min-height: 200px;
+    }
   }
 }
 
diff --git a/src/config/user/rules.ts b/src/config/user/rules.ts
index a5ac70d..57613c7 100644
--- a/src/config/user/rules.ts
+++ b/src/config/user/rules.ts
@@ -82,3 +82,12 @@ export const urlRules = [
 export const postalCodeRules = [
   (v: string) => !v || /^\d{3}[-]\d{4}$|^\d{3}[-]\d{2}$|^\d{3}$|^\d{5}$|^\d{7}$/.test(v) || 'Postal code is invalid',
 ]
+
+export const requiredRules = (message: string) => [
+  (v: string) => !!v || message,
+]
+
+export const numberRules = [
+  (v: string) => /^\d/.test(v) || 'Accept number input only',
+  (v: string) => Number(v) > 0 || 'Required over 0',
+]
diff --git a/src/domain/application/bookApplicationService/BookApplicationService.ts b/src/domain/application/bookApplicationService/BookApplicationService.ts
index a7d9d67..e692216 100644
--- a/src/domain/application/bookApplicationService/BookApplicationService.ts
+++ b/src/domain/application/bookApplicationService/BookApplicationService.ts
@@ -3,6 +3,7 @@ import {
   IBook,
   IRegistrationParams,
 } from '@/boundary/bookApplicationService/InOutType'
+import IBookFactory from '@/domain/model/book/IBookFactory'
 import { IBookRepository } from '@/domain/model/book/IBookRepository'
 import { inject, injectable } from 'inversify'
 
@@ -11,11 +12,14 @@ export class BookApplicationService implements IBookApplicationService {
   constructor(
     @inject(IBookRepository)
     private readonly bookRepository: IBookRepository,
-  ) {
-  }
+
+    @inject(IBookFactory)
+    private readonly bookFactory: IBookFactory,
+  ) {}
 
   public create(params: IRegistrationParams): Promise<void> {
-    return this.bookRepository.create(params)
+    const book = this.bookFactory.create(params)
+    return this.bookRepository.create(book)
   }
   public update(book: IBook): Promise<void> {
     return this.bookRepository.update(book)
diff --git a/src/domain/model/book/IBookFactory.ts b/src/domain/model/book/IBookFactory.ts
new file mode 100644
index 0000000..3a9373e
--- /dev/null
+++ b/src/domain/model/book/IBookFactory.ts
@@ -0,0 +1,8 @@
+import {
+  IBook,
+  IRegistrationParams,
+} from '@/boundary/bookApplicationService/InOutType'
+
+export default abstract class IBookFactory {
+  public abstract create(params: IRegistrationParams): IBook
+}
diff --git a/src/domain/model/book/IBookRepository.ts b/src/domain/model/book/IBookRepository.ts
index f9466c5..856d872 100644
--- a/src/domain/model/book/IBookRepository.ts
+++ b/src/domain/model/book/IBookRepository.ts
@@ -1,10 +1,9 @@
 import {
   IBook,
-  IRegistrationParams,
 } from '@/boundary/bookApplicationService/InOutType'
 
 export abstract class IBookRepository {
-  public abstract create(params: IRegistrationParams): Promise<void>
+  public abstract create(params: IBook): Promise<void>
   public abstract update(book: IBook): Promise<void>
   public abstract delete(id: Identifier): Promise<void>
 }
diff --git a/src/firebaseImpl/domain/book/BookFactory.ts b/src/firebaseImpl/domain/book/BookFactory.ts
new file mode 100644
index 0000000..afefe97
--- /dev/null
+++ b/src/firebaseImpl/domain/book/BookFactory.ts
@@ -0,0 +1,18 @@
+import {
+  IBook,
+  IRegistrationParams,
+} from '@/boundary/bookApplicationService/InOutType'
+import IBookFactory from '@/domain/model/book/IBookFactory'
+import { Book } from '@/models/book'
+
+export default class BookFactory implements IBookFactory {
+  public create(params: IRegistrationParams): IBook {
+    const date = new Date()
+    return {
+      id: Book.getReference().doc().id,
+      ...params,
+      createdAt: date,
+      updatedAt: date,
+    }
+  }
+}
diff --git a/src/firebaseImpl/domain/book/FirebaseBookRepository.ts b/src/firebaseImpl/domain/book/FirebaseBookRepository.ts
index a7711ae..4957e52 100644
--- a/src/firebaseImpl/domain/book/FirebaseBookRepository.ts
+++ b/src/firebaseImpl/domain/book/FirebaseBookRepository.ts
@@ -2,7 +2,6 @@ import { IBook } from '@/boundary/bookApplicationService/InOutType'
 import { IBookRepository } from '@/domain/model/book/IBookRepository'
 import { Book } from '@/models/book'
 import firebase from 'firebase/app'
-import { injectable } from 'inversify'
 
 function bookSetter(params: IBook, book: Book) {
   book.userId = params.userId
@@ -19,7 +18,6 @@ function bookSetter(params: IBook, book: Book) {
   book.receiptImageFilePath = params.receiptImageFilePath
 }
 
-@injectable()
 export class FirebaseBookRepository implements IBookRepository {
   public async create(params: IBook): Promise<void> {
     const book = new Book(params.id)
diff --git a/src/inversify/firebaseProviders.ts b/src/inversify/firebaseProviders.ts
index 01d9334..7ece6ae 100644
--- a/src/inversify/firebaseProviders.ts
+++ b/src/inversify/firebaseProviders.ts
@@ -10,12 +10,14 @@ import { BookApplicationService } from '@/domain/application/bookApplicationServ
 import { UserApplicationService } from '@/domain/application/userApplicationService/UserApplicationService'
 import { IAuthDomainService } from '@/domain/model/auth/IAuthDomainService'
 import { IAuthRepository } from '@/domain/model/auth/IAuthRepository'
+import IBookFactory from '@/domain/model/book/IBookFactory'
 import { IBookRepository } from '@/domain/model/book/IBookRepository'
 import { IUserRepository } from '@/domain/model/user/IUserRepository'
 import { ILogger } from '@/drivers/ILogger'
 import { ConsoleLogger } from '@/drivers/logger/ConsoleLogger'
 import { FirebaseAuthDomainService } from '@/firebaseImpl/domain/auth/FirebaseAuthDomainService'
 import { FirebaseAuthRepository } from '@/firebaseImpl/domain/auth/FirebaseAuthRepository'
+import BookFactory from '@/firebaseImpl/domain/book/BookFactory'
 import { FirebaseBookRepository } from '@/firebaseImpl/domain/book/FirebaseBookRepository'
 import { FirebaseUserRepository } from '@/firebaseImpl/domain/user/FirebaseUserRepository'
 import { UserObservableRepository } from '@/firebaseImpl/query/observableRepository/UserObservableRepository'
@@ -41,4 +43,5 @@ export function firebaseProviders(container: Container): void {
   container.bind(IAuthDomainService).to(FirebaseAuthDomainService).inSingletonScope()
   container.bind(IAuthRepository).to(FirebaseAuthRepository).inSingletonScope()
   container.bind(IBookRepository).to(FirebaseBookRepository).inSingletonScope()
+  container.bind(IBookFactory).to(BookFactory).inSingletonScope()
 }
diff --git a/src/layouts/loggedInLayout.vue b/src/layouts/loggedInLayout.vue
index 4e513fa..aa3096d 100644
--- a/src/layouts/loggedInLayout.vue
+++ b/src/layouts/loggedInLayout.vue
@@ -5,6 +5,7 @@
       <Navigation />
       <LoggedInHeader />
       <ChangeUserProfileForm />
+      <CreateBookForm />
 
       <v-content>
         <slot />
@@ -16,6 +17,7 @@
 
 <script lang="ts">
 import ChangeUserProfileForm from '@/components/containers/changeUserProfileForm.vue'
+import CreateBookForm from '@/components/containers/createBookForm.vue'
 import LoggedInHeader from '@/components/containers/loggedInHeader.vue'
 import Navigation from '@/components/containers/navigation.vue'
 import authSelector from '@/store/middleware/auth/selector'
@@ -27,6 +29,7 @@ import { Component, Vue } from 'vue-property-decorator'
     Navigation,
     LoggedInHeader,
     ChangeUserProfileForm,
+    CreateBookForm,
   },
   computed: mapComputed(authSelector),
 })
diff --git a/src/models/book.ts b/src/models/book.ts
index 9c2dad1..be4e717 100644
--- a/src/models/book.ts
+++ b/src/models/book.ts
@@ -22,10 +22,11 @@ export class Book extends Pring.Base {
   @Pring.property public type!: BookType
   @Pring.property public price!: number
   @Pring.property public owner!: Owner
+  @Pring.property public purchasedUrl!: string
+  @Pring.property public downloadUrl!: string
 
   // 任意
   @Pring.property public coverImageFilePath!: string | null
-  @Pring.property public purchasedUrl!: string | null
   @Pring.property public evaluation!: Evaluation | null
   @Pring.property public receiptImageFilePath!: string | null
 
diff --git a/src/store/containers/createBookForm/action.ts b/src/store/containers/createBookForm/action.ts
new file mode 100644
index 0000000..d4c75ad
--- /dev/null
+++ b/src/store/containers/createBookForm/action.ts
@@ -0,0 +1,9 @@
+import { IRegistrationParams } from '@/boundary/bookApplicationService/InOutType'
+import { actionCreatorFactory } from 'typescript-fsa-vuex'
+
+export const actionCreator = actionCreatorFactory('containers/createBookForm')
+
+export const createBook = actionCreator<{readonly params: IRegistrationParams}>('CREATE_BOOK')
+export const toStandby = actionCreator('TO_STANDBY')
+export const openDialog = actionCreator('OPEN_DIALOG')
+export const closeDialog = actionCreator('CLOSE_DIALOG')
diff --git a/src/store/containers/createBookForm/failureUpdateProfile.spec.ts b/src/store/containers/createBookForm/failureUpdateProfile.spec.ts
new file mode 100644
index 0000000..8c7e504
--- /dev/null
+++ b/src/store/containers/createBookForm/failureUpdateProfile.spec.ts
@@ -0,0 +1,22 @@
+// import '@/rejectTestConfiguration'
+// import { createStore } from '@/store/root'
+// import { userFactory } from '@/stub/domain/factory/IUser'
+// import flushPromises from 'flush-promises'
+// import { updateProfile } from './action'
+// import selector from './selector'
+
+
+// test('ユーザープロフィールの更新に失敗する', async () => {
+//   const store = createStore()
+//   expect(selector.isSendFailed(store.state)).toBe(false)
+//   expect(selector.isSending(store.state)).toBe(false)
+//   expect(selector.isSendSuccess(store.state)).toBe(false)
+
+//   store.dispatch(updateProfile({user: userFactory()}))
+//   expect(selector.isSending(store.state)).toBe(true)
+//   await flushPromises()
+
+//   expect(selector.isSending(store.state)).toBe(false)
+//   expect(selector.isSendFailed(store.state)).toBe(true)
+//   expect(selector.isSendSuccess(store.state)).toBe(false)
+// })
diff --git a/src/store/containers/createBookForm/index.ts b/src/store/containers/createBookForm/index.ts
new file mode 100644
index 0000000..c026f4b
--- /dev/null
+++ b/src/store/containers/createBookForm/index.ts
@@ -0,0 +1,84 @@
+import { BookApplicationService } from '@/serviceLocator/BookApplicationService'
+import { Logger } from '@/serviceLocator/Logger'
+import {
+  action,
+  actionsToMutations,
+  combineAction,
+  combineMutation,
+  mutation,
+} from 'typescript-fsa-vuex'
+import {
+  actionCreator,
+  closeDialog,
+  createBook,
+  openDialog,
+  toStandby,
+} from './action'
+
+const startCreate = actionCreator('START_UPDATE')
+const successCreate = actionCreator('SUCCESS_UPDATE')
+const failureSend = actionCreator('FAILURE_SEND')
+
+export enum ScreenState {
+  STANDBY,
+  SENDING,
+  SEND_FAILED,
+  SEND_SUCCESS,
+}
+
+type State = {
+  isOpen: boolean,
+  screenState: ScreenState,
+}
+
+const initialState = (): State => ({
+  isOpen: false,
+  screenState: ScreenState.STANDBY,
+})
+
+const mutations = combineMutation<State>(
+  mutation(startCreate, (state) => {
+    state.screenState = ScreenState.SENDING
+  }),
+  mutation(successCreate, (state) => {
+    state.screenState = ScreenState.SEND_SUCCESS
+  }),
+  mutation(failureSend, (state) => {
+    state.screenState = ScreenState.SEND_FAILED
+  }),
+  mutation(openDialog, (state) => {
+    state.isOpen = true
+  }),
+  mutation(closeDialog, (state) => {
+    state.isOpen = false
+  }),
+  mutation(toStandby, (state) => {
+    state.screenState = ScreenState.STANDBY
+  }),
+)
+
+const actions = combineAction<State, any>(
+  action(createBook, async ({commit}, action) => {
+    commit(startCreate())
+
+    try {
+      await BookApplicationService.getInstance().create(action.payload.params)
+      Logger.getInstance().info('本の作成に成功')
+      commit(successCreate())
+    } catch (e) {
+      Logger.getInstance().error(e)
+      commit(failureSend())
+    }
+  }),
+  actionsToMutations(
+    openDialog,
+    closeDialog,
+    toStandby,
+  ),
+)
+
+export default {
+  state: initialState,
+  mutations,
+  actions,
+}
diff --git a/src/store/containers/createBookForm/selector.ts b/src/store/containers/createBookForm/selector.ts
new file mode 100644
index 0000000..112bfaf
--- /dev/null
+++ b/src/store/containers/createBookForm/selector.ts
@@ -0,0 +1,29 @@
+import { Store } from '@/store/root'
+import { ScreenState } from './index'
+
+function _stateScope(state: Store['state']) {
+  return state.containers.createBookForm
+}
+
+function isSending(state: Store['state']) {
+  return _stateScope(state).screenState === ScreenState.SENDING
+}
+
+function isSendFailed(state: Store['state']) {
+  return _stateScope(state).screenState === ScreenState.SEND_FAILED
+}
+
+function isSendSuccess(state: Store['state']) {
+  return _stateScope(state).screenState === ScreenState.SEND_SUCCESS
+}
+
+function isOpen(state: Store['state']) {
+  return _stateScope(state).isOpen
+}
+
+export default {
+  isSending,
+  isSendSuccess,
+  isSendFailed,
+  isOpen,
+}
diff --git a/src/store/containers/createBookForm/successUpdateProfile.spec.ts b/src/store/containers/createBookForm/successUpdateProfile.spec.ts
new file mode 100644
index 0000000..d1c8843
--- /dev/null
+++ b/src/store/containers/createBookForm/successUpdateProfile.spec.ts
@@ -0,0 +1,20 @@
+// import '@/resolveTestConfiguration'
+// import { createStore } from '@/store/root'
+// import { userFactory } from '@/stub/domain/factory/IUser'
+// import flushPromises from 'flush-promises'
+// import { createBook } from './action'
+// import selector from './selector'
+
+
+// test('ユーザープロフィールの更新に成功する', async () => {
+//   const store = createStore()
+//   expect(selector.isSendFailed(store.state)).toBe(false)
+//   expect(selector.isSending(store.state)).toBe(false)
+//   expect(selector.isSendSuccess(store.state)).toBe(false)
+//   store.dispatch(updateProfile({user: userFactory()}))
+//   expect(selector.isSending(store.state)).toBe(true)
+//   await flushPromises()
+//   expect(selector.isSending(store.state)).toBe(false)
+//   expect(selector.isSendFailed(store.state)).toBe(false)
+//   expect(selector.isSendSuccess(store.state)).toBe(true)
+// })
diff --git a/src/store/containers/index.ts b/src/store/containers/index.ts
index 8c1a4c3..025ce46 100644
--- a/src/store/containers/index.ts
+++ b/src/store/containers/index.ts
@@ -1,12 +1,12 @@
 import changeUserProfileForm from './changeUserProfileForm'
-// import createBookForm from './createBookForm'
+import createBookForm from './createBookForm'
 import loginForm from './loginForm'
 import navigation from './navigation'
 import userRegistrationForm from './userRegistrationForm'
 
 export type ContainersState = {
   changeUserProfileForm: ReturnType<typeof changeUserProfileForm.state>,
-  // createBookForm: ReturnType<typeof createBookForm.state>,
+  createBookForm: ReturnType<typeof createBookForm.state>,
   loginForm: ReturnType<typeof loginForm.state>,
   navigation: ReturnType<typeof navigation.state>,
   userRegistrationForm: ReturnType<typeof userRegistrationForm.state>,
@@ -15,7 +15,7 @@ export type ContainersState = {
 export default {
   modules: {
     changeUserProfileForm,
-    // createBookForm,
+    createBookForm,
     loginForm,
     navigation,
     userRegistrationForm,
diff --git a/yarn.lock b/yarn.lock
index 0ccde21..e27bd75 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5493,6 +5493,10 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
+github-markdown-css@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/github-markdown-css/-/github-markdown-css-3.0.1.tgz#d08db1060d2e182025e0d07d547cfe2afed30205"
+
 glob-base@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"