Add position for book in collection

front/src/BookListElement.vue

@@ -164,6 +164,7 @@ async function importInventaireEdition(inventaireid) {
         </button>
       </div>
     </div>
+    <slot></slot>
   </div>
 </template>
 

front/src/CollectionForm.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed, ref } from 'vue'
 import { getCollection } from './api.js'
-import BookListElement from './BookListElement.vue'
+import CollectionFormElement from './CollectionFormElement.vue'
 import AddBookToCollection from './AddBookToCollection.vue'
 import Pagination from './Pagination.vue'
 
@@ -43,7 +43,7 @@ function fetchCollection() {
     <h2 class="title">{{ data.name }}</h2>
     <AddBookToCollection :collection-id="props.id" @created="fetchCollection" />
     <div>
-      <BookListElement v-for="book in data.books" :key="book.id" v-bind="book" />
+      <CollectionFormElement v-for="item in data.items" :key="item.id" v-bind="item" />
     </div>
     <Pagination
       class="mt-5"

front/src/CollectionFormElement.vue

@@ -0,0 +1,58 @@
+<script setup>
+import BookListElement from './BookListElement.vue'
+
+const props = defineProps({
+  position: Number,
+  book: Array,
+})
+</script>
+<template>
+  <div class="collectionitembox">
+    <BookListElement v-bind="props.book">
+      <div class="separator" />
+      <div class="positionindicator centered is-narrow">
+        {{ props.position }}
+      </div>
+      <div class="separator" />
+      <div class="positionwidget centered is-narrow">
+        <b-icon-list />
+      </div>
+    </BookListElement>
+  </div>
+</template>
+
+<style scoped>
+.collectionitembox {
+  transition: ease-in-out 0.04s;
+  display: flex;
+}
+
+.collectionitembox:hover {
+  transform: scale(1.01);
+  transition: ease-in-out 0.02s;
+}
+
+.separator {
+  width: 5px;
+  background: var(--bulma-scheme-main);
+}
+
+.positionindicator {
+  font-size: 36px;
+  margin-left: 40px;
+  margin-right: 40px;
+}
+
+.positionwidget {
+  color: var(--bulma-scheme-main);
+  font-size: 48px;
+  margin-left: 30px;
+  margin-right: 30px;
+  border-top-right-radius: var(--bulma-box-radius);
+  border-bottom-right-radius: var(--bulma-box-radius);
+}
+
+.positionwidget:hover {
+  cursor: move;
+}
+</style>