Add import edition from inventaire

front/src/ImportListElement.vue

@@ -1,16 +1,17 @@
 <script setup>
-  import { computed } from 'vue'
-  import { getInventaireImagePathOrDefault } from './api.js'
+  import { ref, computed } from 'vue'
+  import { getInventaireImagePathOrDefault, postImportBook } from './api.js'
   import { useRouter } from 'vue-router'
 
   const router = useRouter();
   const props = defineProps({
-    id: String,
+    uri: String,
     title: String,
     image: String,
     publisher: String,
     date: String,
     isbn: String,
+    lang: String
   });
 
   function displayDate(date) {
@@ -22,26 +23,44 @@
       return date;
     }
   }
+  const error = ref(null);
+  const data = ref(null);
+  const importing = ref(false);
+
+  async function importInventaireEdition() {
+    importing.value = true;
+    const res = await postImportBook(props.uri, navigator.language.substring(0,2));
+    const json = await res.json();
+    if (res.ok) {
+      router.push(`/book/${json.id}`);
+    } else {
+      error.value = json;
+    }
+  }
   const imagePathOrDefault = computed(() => getInventaireImagePathOrDefault(props.image));
 </script>
 
 <template>
-  <div v-if="error" class="notification is-danger">
-    <p>{{error}}</p>
-  </div>
   <div class="columns no-padding box container has-background-dark">
-    <div class="media column no-margin clickable" @click="openBook">
+    <div v-if="importing && !data && !error">{{$t('importlistelement.importing')}}</div>
+    <div v-else class="media column no-margin clickable" @click="importInventaireEdition">
       <div class="media-left">
         <figure class="image mb-3">
           <img v-bind:src="imagePathOrDefault" v-bind:alt="title">
         </figure>
       </div>
       <div class="media-content">
-        <div class="is-size-4">{{title}}</div>
-        <div v-if="props.date" class="is-size-5">{{$t('importlistelement.releasedate') + "" +
-          displayDate(date)}}</div>
-        <div v-if="props.publisher" class="is-size-5">{{$t('importlistelement.publisher') + "" + publisher}}</div>
-        <div v-if="props.isbn" class="is-size-5">{{"ISBN: " + isbn}}</div>
+
+        <div v-if="error" class="has-text-danger">
+          <p>{{error}}</p>
+        </div>
+        <div v-else>
+          <div class="is-size-4">{{title}}</div>
+          <div v-if="props.date" class="is-size-5">{{$t('importlistelement.releasedate') + "" +
+            displayDate(date)}}</div>
+          <div v-if="props.publisher" class="is-size-5">{{$t('importlistelement.publisher') + "" + publisher}}</div>
+          <div v-if="props.isbn" class="is-size-5">{{"ISBN: " + isbn}}</div>
+        </div>
       </div>
     </div>
   </div>

front/src/InventaireImport.vue

@@ -1,32 +0,0 @@
-<script setup>
-  import { ref } from 'vue'
-  import { postImportBook } from './api.js'
-  import { useRouter } from 'vue-router'
-
-  const router = useRouter();
-
-  const props = defineProps({
-    inventaireid: String
-  });
-  const error = ref(null);
-  const data = ref(null);
-
-  async function importInventaireId() {
-    const res = await postImportBook(props.inventaireid, navigator.language.substring(0,2));
-    const json = await res.json();
-    if (res.ok) {
-      router.push(`/book/${json.id}`);
-    } else {
-      error.value = json;
-    }
-  }
-
-  importInventaireId();
-</script>
-
-<template>
-  <div v-if="error">{{error}}</div>
-  <div v-else-if="!data">Importing {{props.inventaireid}}...</div>
-</template>
-<style scoped></style>
-

front/src/locales/en.json

@@ -70,7 +70,8 @@
   },
   "importlistelement": {
     "releasedate":"Release date:",
-    "publisher":"Publisher:"
+    "publisher":"Publisher:",
+    "importing":"Importing..."
   }
 
 }

front/src/locales/fr.json

@@ -70,6 +70,7 @@
   },
   "importlistelement": {
     "releasedate":"Date de publication : ",
-    "publisher":"Maison d'édition : "
+    "publisher":"Maison d'édition : ",
+    "importing":"Import en cours..."
   }
 }

front/src/router.js

@@ -9,14 +9,12 @@ import LogIn from './LogIn.vue'
 import Home from './Home.vue'
 import SearchBook from './SearchBook.vue'
 import ImportInventaire from './ImportInventaire.vue'
-import InventaireImport from './InventaireImport.vue'
 import { useAuthStore } from './auth.store'
 
 const routes = [
   { path: '/', component: Home },
   { path: '/books', component: BooksBrowser },
   { path: '/book/:id', component: BookForm, props: true },
-  { path: '/importinventaire/:inventaireid', component: InventaireImport, props: true },
   { path: '/author/:id', component: AuthorForm, props: true },
   { path: '/search/:searchterm', component: SearchBook, props: true },
   { path: '/import/inventaire/:inventaireid', component: ImportInventaire, props: true },