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>