Commit 56ab5075 authored by Nicola Fulvio Calabria's avatar Nicola Fulvio Calabria
Browse files

Added Create New Collection modal and button

parent 672d0de5

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

+7 −1
Original line number Diff line number Diff line
@@ -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

0 → 100644
+62 −0
Original line number Diff line number Diff line 
<!--

  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>