Add existing book fields in "create book" form

front/src/AddBook.vue

@@ -9,6 +9,11 @@ const router = useRouter()
 const book = ref({
   title: '',
   author: '',
+  isbn: '',
+  inventaireid: '',
+  openlibraryid: '',
+  shortdescription: '',
+  summary: '',
   coverId: null,
 })
 const errors = ref(null)
@@ -18,11 +23,26 @@ const titleError = computed(() => {
 const authorError = computed(() => {
   return extractFormErrorFromField('Author', errors.value)
 })
+const isbnError = computed(() => {
+  return extractFormErrorFromField('ISBN', errors.value)
+})
+const inventaireError = computed(() => {
+  return extractFormErrorFromField('InventaireID', errors.value)
+})
+const openLibraryError = computed(() => {
+  return extractFormErrorFromField('OpenLibraryId', errors.value)
+})
+const shortDescError = computed(() => {
+  return extractFormErrorFromField('ShortDescription', errors.value)
+})
+const summaryError = computed(() => {
+  return extractFormErrorFromField('ShortDescription', errors.value)
+})
 
 function onSubmit(e) {
   postBook(book).then((res) => {
     if (res.ok) {
-      router.push('/')
+      res.json().then((json) => router.push('/book/' + json.id))
       return
     } else {
       res.json().then((json) => (errors.value = json))
@@ -37,7 +57,7 @@ function onSubmit(e) {
       <label class="label">{{ $t('addbook.title') }}</label>
       <div class="control">
         <input
-          :class="'input ' + (titleError ? 'is-danger' : '')"
+          :class="'input is-medium ' + (titleError ? 'is-danger' : '')"
           type="text"
           maxlength="300"
           required
@@ -51,7 +71,7 @@ function onSubmit(e) {
       <label class="label">{{ $t('addbook.author') }}</label>
       <div class="control">
         <input
-          :class="'input ' + (authorError ? 'is-danger' : '')"
+          :class="'input is-medium ' + (authorError ? 'is-danger' : '')"
           type="text"
           maxlength="100"
           v-model="book.author"
@@ -60,7 +80,71 @@ function onSubmit(e) {
       </div>
       <p v-if="authorError" class="help is-danger">{{ authorError }}</p>
     </div>
+    <div class="field">
+      <label class="label">{{ $t('addbook.shortdesc') }}</label>
+      <div class="control">
+        <input
+          :class="'input ' + (shortDescError ? 'is-danger' : '')"
+          type="text"
+          maxlength="300"
+          v-model="book.shortdescription"
+          :placeholder="$t('addbook.shortdesc')"
+        />
+      </div>
+      <p v-if="shortDescError" class="help is-danger">{{ shortDescError }}</p>
+    </div>
     <CoverUpload name="cover" @on-image-upload="(id) => (book.coverId = id)" />
+    <div class="field">
+      <label class="label">{{ $t('addbook.summary') }}</label>
+      <div class="control">
+        <textarea
+          :class="'textarea ' + (summaryError ? 'is-danger' : '')"
+          type="text"
+          v-model="book.summary"
+          :placeholder="$t('addbook.summary')"
+        />
+      </div>
+      <p v-if="summaryError" class="help is-danger">{{ summaryError }}</p>
+    </div>
+    <div class="field">
+      <label class="label">ISBN</label>
+      <div class="control">
+        <input
+          :class="'input ' + (isbnError ? 'is-danger' : '')"
+          type="text"
+          maxlength="18"
+          v-model="book.isbn"
+          placeholder="ISBN"
+        />
+      </div>
+      <p v-if="isbnError" class="help is-danger">{{ isbnError }}</p>
+    </div>
+    <div class="field">
+      <label class="label">Inventaire</label>
+      <div class="control">
+        <input
+          :class="'input ' + (inventaireError ? 'is-danger' : '')"
+          type="text"
+          maxlength="50"
+          v-model="book.inventaireid"
+          placeholder="Inventaire"
+        />
+      </div>
+      <p v-if="inventaireError" class="help is-danger">{{ inventaireError }}</p>
+    </div>
+    <div class="field">
+      <label class="label">OpenLibrary</label>
+      <div class="control">
+        <input
+          :class="'input ' + (openLibraryError ? 'is-danger' : '')"
+          type="text"
+          maxlength="50"
+          v-model="book.openlibraryid"
+          placeholder="OpenLibrary"
+        />
+      </div>
+      <p v-if="openLibraryError" class="help is-danger">{{ openLibraryError }}</p>
+    </div>
     <div class="field">
       <div class="control">
         <button class="button is-link">{{ $t('addbook.submit') }}</button>

front/src/api.js

@@ -191,10 +191,7 @@ export function genericPayloadCall(apiRoute, object, method) {
 }
 
 export function extractFormErrorFromField(fieldName, errors) {
-  if (errors === null) {
-    return ''
-  }
-  if (errors.value == null) {
+  if (errors == null) {
     return ''
   }
   console.log(errors.value)

front/src/locales/en.json

@@ -20,6 +20,8 @@
   "addbook": {
     "title": "Title",
     "author": "Author",
+    "shortdesc": "Short description",
+    "summary": "Summary",
     "submit": "Submit",
     "coverupload": "Upload cover"
   },

front/src/locales/fr.json

@@ -20,6 +20,8 @@
   "addbook": {
     "title": "Titre",
     "author": "Auteur",
+    "shortdesc": "Description rapide",
+    "summary": "Résumé",
     "submit": "Confirmer",
     "coverupload": "Téléverser la couverture"
   },