Add prettier dependency to format frontend code

front/src/AddBook.vue

@@ -1,60 +1,69 @@
 <script setup>
-  import { ref, reactive, computed } from 'vue'
-  import { postBook, extractFormErrorFromField } from './api.js'
-  import { useRouter } from 'vue-router'
-  import CoverUpload from './CoverUpload.vue'
+import { ref, reactive, computed } from 'vue'
+import { postBook, extractFormErrorFromField } from './api.js'
+import { useRouter } from 'vue-router'
+import CoverUpload from './CoverUpload.vue'
 
-  const router = useRouter();
+const router = useRouter()
 
-  const book = ref({
-    title: "",
-    author: "",
-    coverId: null
-  });
-  const errors = ref(null)
-  const titleError = computed(() => {
-    return extractFormErrorFromField("Title", errors.value);
+const book = ref({
+  title: '',
+  author: '',
+  coverId: null,
+})
+const errors = ref(null)
+const titleError = computed(() => {
+  return extractFormErrorFromField('Title', errors.value)
+})
+const authorError = computed(() => {
+  return extractFormErrorFromField('Author', errors.value)
+})
+
+function onSubmit(e) {
+  postBook(book).then((res) => {
+    if (res.ok) {
+      router.push('/')
+      return
+    } else {
+      res.json().then((json) => (errors.value = json))
+    }
   })
-  const authorError = computed(() => {
-    return extractFormErrorFromField("Author", errors.value);
-  })
-
-  function onSubmit(e) {
-    postBook(book)
-      .then((res) => {
-        if (res.ok) {
-          router.push('/');
-          return;
-        } else {
-          res.json().then((json) => (errors.value = json));
-        }
-      })
-  }
-
+}
 </script>
 
 <template>
   <form @submit.prevent="onSubmit">
     <div class="field">
-      <label class="label">{{$t('addbook.title')}}</label>
+      <label class="label">{{ $t('addbook.title') }}</label>
       <div class="control">
-        <input :class="'input ' + (titleError ? 'is-danger' : '')" type="text" maxlength="300"
-        required v-model="book.title" :placeholder="$t('addbook.title')">
+        <input
+          :class="'input ' + (titleError ? 'is-danger' : '')"
+          type="text"
+          maxlength="300"
+          required
+          v-model="book.title"
+          :placeholder="$t('addbook.title')"
+        />
       </div>
-      <p v-if="titleError" class="help is-danger">{{titleError}}</p>
+      <p v-if="titleError" class="help is-danger">{{ titleError }}</p>
     </div>
     <div class="field">
-      <label class="label">{{$t('addbook.author')}}</label>
+      <label class="label">{{ $t('addbook.author') }}</label>
       <div class="control">
-        <input :class="'input ' + (authorError ? 'is-danger' : '')" type="text" maxlength="100"
-        v-model="book.author" :placeholder="$t('addbook.author')">
+        <input
+          :class="'input ' + (authorError ? 'is-danger' : '')"
+          type="text"
+          maxlength="100"
+          v-model="book.author"
+          :placeholder="$t('addbook.author')"
+        />
       </div>
-      <p v-if="authorError" class="help is-danger">{{authorError}}</p>
+      <p v-if="authorError" class="help is-danger">{{ authorError }}</p>
     </div>
-    <CoverUpload name="cover" @on-image-upload="(id) => book.coverId = id"/>
+    <CoverUpload name="cover" @on-image-upload="(id) => (book.coverId = id)" />
     <div class="field">
       <div class="control">
-        <button class="button is-link">{{$t('addbook.submit')}}</button>
+        <button class="button is-link">{{ $t('addbook.submit') }}</button>
       </div>
     </div>
   </form>