Create new collections from my collections view

front/src/AddCollection.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { postCollection, extractFormErrorFromField } from './api.js'
+
+const emit = defineEmits(['created'])
+
+const collection = ref({
+  name: '',
+})
+const addingCollection = ref(false)
+const errors = ref(null)
+const error = computed(() => {
+  return extractFormErrorFromField('Name', errors.value)
+})
+const vFocus = {
+  mounted: (el) => el.focus(),
+}
+
+function onButtonClick() {
+  if (addingCollection.value) {
+    createCollection()
+  } else {
+    addingCollection.value = true
+  }
+}
+
+function createCollection() {
+  postCollection(collection.value).then((res) => {
+    if (res.ok) {
+      addingCollection.value = false
+      collection.value.name = ''
+      emit('created')
+    } else {
+      res.json().then((json) => (errors.value = json))
+    }
+  })
+}
+</script>
+
+<template>
+  <div class="field has-addons">
+    <div v-if="addingCollection" class="control">
+      <input
+        :class="'input is-medium ' + (error ? 'is-danger' : '')"
+        v-focus
+        @keyup.enter="createCollection()"
+        type="text"
+        maxlength="300"
+        v-model="collection.name"
+        :placeholder="$t('collections.name')"
+      />
+      <p v-if="error" class="help is-danger">{{ error }}</p>
+    </div>
+    <div class="control">
+      <button @click="onButtonClick" class="button is-medium mb-2">
+        <span class="icon" :title="$t('collections.add')">
+          <b-icon-check v-if="addingCollection" />
+          <b-icon-plus v-else />
+        </span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

front/src/CollectionsBrowser.vue

@@ -3,6 +3,7 @@ import { ref, computed } from 'vue'
 import { getCollections } from './api.js'
 import CollectionListElement from './CollectionListElement.vue'
 import Pagination from './Pagination.vue'
+import AddCollection from './AddCollection.vue'
 
 const limit = 5
 const pageNumber = ref(1)
@@ -34,6 +35,7 @@ function pageChange(newPageNumber) {
   <div>
     <div v-if="error">{{ $t('bookbrowser.error', { error: error.message }) }}</div>
     <div v-else-if="data">
+      <AddCollection @created="fetchData" />
       <div class="collectionslist">
         <div class="my-2" v-for="collection in data.collections" :key="collection.id">
           <CollectionListElement v-bind="collection" />

front/src/api.js

@@ -121,6 +121,10 @@ export async function postImportBook(id, language) {
   return genericPayloadCall('/ws/importbook', { inventaireid: id, lang: language }, 'POST')
 }
 
+export function postCollection(collection) {
+  return genericPayloadCall('/ws/collection', collection, 'POST')
+}
+
 export function putBook(id, book) {
   return genericPayloadCall('/ws/book/edit/' + id, book.value, 'PUT')
 }

front/src/locales/en.json

@@ -89,5 +89,9 @@
   "review": {
     "title": "My review",
     "textplaceholder": "Write my review..."
+  },
+  "collections": {
+    "add": "Add a collection",
+    "name": "Nom"
   }
 }

front/src/locales/fr.json

@@ -89,5 +89,9 @@
   "review": {
     "title": "Ma critique",
     "textplaceholder": "Écrire ma critique..."
+  },
+  "collections": {
+    "add": "Ajouter une liste",
+    "name": "Nom"
   }
 }