Added Create New Collection modal and button

vospace-ui-frontend/src/components/Collections.vue

@@ -7,6 +7,9 @@
 <div>
   <b-button variant="primary" class="float-right" @click="loadCollections">Reload</b-button>
   <h3>Collections</h3>
+  <div class="mb-3">
+      <b-button variant="success" class="mr-2" v-b-modal.create-collection-modal>New collection</b-button>
+  </div>
   <div v-if="jobs.length > 0" class="mb-3">
     <table class="table b-table table-striped table-hover">
       <thead>
@@ -35,15 +38,18 @@
     </div>
   </div>
   <FAQModal/>
+  <CreateCollectionModal />
 </div>
 </template>
 
 <script>
 import FAQModal from './modal/FAQModal.vue'
+import CreateCollectionModal from './modal/CreateCollectionModal.vue'
 
 export default {
   components: {
-    FAQModal
+    FAQModal,
+    CreateCollectionModal
   },
   computed: {
     jobs() { return this.$store.state.jobs },

vospace-ui-frontend/src/components/modal/CreateCollectionModal.vue

+<!--
+  This file is part of vospace-ui
+  Copyright (C) 2021 Istituto Nazionale di Astrofisica
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+<template>
+<b-modal id="create-collection-modal" title="Create collection" okTitle="Create" @show="reset" @shown="afterShow" @ok.prevent="createCollection">
+  <b-form>
+    <label class="w-30" for="new-collection-name-input">Collection name:</label>
+    <b-form-input v-model.trim="newCollectionName" id="new-collection-name-input" ref="newCollectionNameInput" class="w-75" aria-describedby="new-collection-name-input-feedback" :state="newCollectionNameState" v-on:input="resetError"
+      @keydown.native.enter.prevent="createCollection">
+    </b-form-input>
+    <b-form-invalid-feedback id="new-collection-name-input-feedback" class="text-right">{{newCollectionNameError}}</b-form-invalid-feedback>
+  </b-form>
+</b-modal>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      newCollectionName: null,
+      newCollectionNameError: null
+    }
+  },
+  computed: {
+    newCollectionNameState() {
+      if (this.newCollectionNameError) {
+        return false;
+      }
+      return null;
+    }
+  },
+  methods: {
+    afterShow: function() {
+      this.$refs.newCollectionNameInput.focus();
+    },
+    reset() {
+      this.newCollectionName = null;
+      this.resetError();
+    },
+    resetError() {
+      this.newCollectionNameError = null;
+    },
+    createCollection() {
+      if (!this.newCollectionName) {
+        this.newCollectionNameError = "Collection name is required";
+      } else if (/[<>?":\\/`|'*]/.test(this.newCollectionName)) {
+        this.newCollectionNameError = "Collection name contains an illegal character. Following characters are not allowed: < > ? \" : \\ / | ' * `";
+      } else {
+        this.$store.dispatch('createCollection', this.newCollectionName)
+          .then(() => {
+            this.$bvModal.hide('create-collection-modal');
+          })
+          .catch(res => {
+            this.newCollectionNameError = res.message;
+          });
+      }
+    }
+  }
+}
+</script>