From 56ab5075e5164e1ad2b0ced99c828b70e9005a5a Mon Sep 17 00:00:00 2001
From: Nicola Fulvio Calabria <nicola.calabria@inaf.it>
Date: Sun, 15 Jan 2023 22:08:16 +0100
Subject: [PATCH] Added Create New Collection modal and button
---
.../src/components/Collections.vue | 8 ++-
.../modal/CreateCollectionModal.vue | 62 +++++++++++++++++++
2 files changed, 69 insertions(+), 1 deletion(-)
create mode 100644 vospace-ui-frontend/src/components/modal/CreateCollectionModal.vue
diff --git a/vospace-ui-frontend/src/components/Collections.vue b/vospace-ui-frontend/src/components/Collections.vue
index 6489d97..2c548d8 100644
--- a/vospace-ui-frontend/src/components/Collections.vue
+++ b/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 },
diff --git a/vospace-ui-frontend/src/components/modal/CreateCollectionModal.vue b/vospace-ui-frontend/src/components/modal/CreateCollectionModal.vue
new file mode 100644
index 0000000..e75035c
--- /dev/null
+++ b/vospace-ui-frontend/src/components/modal/CreateCollectionModal.vue
@@ -0,0 +1,62 @@
+<!--
+ 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>
--
GitLab