added upload utils and collection attributes to a store, other format…

…ting, test fixing

client/src/components/Collections/common/CollectionEditView.vue

@@ -10,18 +10,13 @@
             </b-alert>
         </div>
         <b-tabs content-class="mt-3">
-            <b-tab>
-                <template v-slot:title> <font-awesome-icon icon="bars" /> &nbsp; {{ l("Attributes") }}</template>
-                <b>{{ l("Name: ") }}</b> <i>{{ collectionName }}</i>
-                <br />
-                <b>{{ l("Collection Type: ") }}</b> <i>{{ collectionType }}</i>
-                <br />
-                <b>{{ l("Elements: ") }}</b> <br />
-                <div v-for="element in collectionElements" :key="element">{{ element.element_identifier }} <br /></div>
-            </b-tab>
             <b-tab>
                 <template v-slot:title> <font-awesome-icon icon="table" /> &nbsp; {{ l("Database/Build") }}</template>
-                <database-edit-tab :databaseKeyFromElements="databaseKeyFromElements" :genomes="genomes" />
+                <database-edit-tab
+                    :databaseKeyFromElements="databaseKeyFromElements"
+                    :genomes="genomes"
+                    @clicked-save="clickedSave"
+                />
             </b-tab>
             <b-tab>
                 <template v-slot:title> <font-awesome-icon icon="cog" /> &nbsp; {{ l("Convert") }}</template>
@@ -72,7 +67,6 @@ import Vue from "vue";
 import BootstrapVue from "bootstrap-vue";
 import axios from "axios";
 import { prependPath } from "utils/redirect";
-import UploadUtils from "mvc/upload/upload-utils";
 import _l from "utils/localization";
 import Multiselect from "vue-multiselect";
 import { errorMessageAsString } from "utils/simple-error";
@@ -84,6 +78,7 @@ import { faTable } from "@fortawesome/free-solid-svg-icons";
 import { faBars } from "@fortawesome/free-solid-svg-icons";
 import { faUser } from "@fortawesome/free-solid-svg-icons";
 import { faCog } from "@fortawesome/free-solid-svg-icons";
+import store from "../../../store/index";
 
 //import VueObserveVisibility from "vue-observe-visibility";
 
@@ -97,22 +92,10 @@ library.add(faUser);
 Vue.use(BootstrapVue);
 export default {
     created() {
-        this.apiCallToGetData();
-        this.apiCallToGetAttributes();
-        UploadUtils.getUploadDatatypes(true, UploadUtils.AUTO_EXTENSION)
-            .then((extensions) => {
-                this.extensions = extensions;
-            })
-            .catch((err) => {
-                console.log("Error in CollectionEditor, unable to load datatypes", err);
-            });
-        UploadUtils.getUploadGenomes(UploadUtils.DEFAULT_GENOME)
-            .then((genomes) => {
-                this.genomes = genomes;
-            })
-            .catch((err) => {
-                console.log("Error in CollectionEditor, unable to load genomes", err);
-            });
+        // this.apiCallToGetData();
+        // this.apiCallToGetAttributes();
+        this.getDatatypesAndGenomes();
+        this.getCollectionDataAndAttributes();
     },
     components: { Multiselect, DatabaseEditTab, FontAwesomeIcon },
     data: function () {
@@ -145,20 +128,11 @@ export default {
             // },
         },
         collectionType: {
+            // no setter; for display only
             get() {
                 return this.collection_data.collection_type;
             },
         },
-        collectionElements: {
-            get() {
-                return this.collection_data.elements;
-            },
-        },
-        numberOfCollectionElements: {
-            get() {
-                return this.collection_data.element_count;
-            },
-        },
         extension: {
             get() {
                 return this.selectedExtension;
@@ -173,48 +147,65 @@ export default {
             // _l conflicts private methods of Vue internals, expose as l instead
             return _l(str);
         },
+        getDatatypesAndGenomes: async function () {
+            let datatypes = store.getters.getUploadDatatypes();
+            if (!datatypes || datatypes.length == 0) {
+                await store.dispatch("fetchUploadDatatypes");
+                datatypes = store.getters.getUploadDatatypes();
+            }
+            this.extensions = datatypes;
+
+            let genomes = store.getters.getUploadGenomes();
+            if (!genomes || genomes.length == 0) {
+                await store.dispatch("fetchUploadGenomes");
+                genomes = store.getters.getUploadGenomes();
+            }
+            this.genomes = genomes;
+        },
+        getCollectionDataAndAttributes: async function () {
+            this.apiCallToGetData();
+
+            let attributesGet = store.getters.getCollectionAttributes(this.collection_id);
+            if (attributesGet == null) {
+                await store.dispatch("fetchCollectionAttributes", this.collection_id);
+                attributesGet = store.getters.getCollectionAttributes(this.collection_id);
+            }
+            this.attributes_data = attributesGet;
+            this.getDatabaseKeyFromElements();
+            this.getExtensionFromElements();
+        },
         apiCallToGetData: function () {
             axios
                 .get(prependPath("/api/dataset_collections/" + this.collection_id + "?instance_type=history"))
                 .then((response) => {
                     this.collection_data = response.data;
-                    this.getDatabaseKeyFromElements();
-                    this.getExtensionFromElements();
                 });
 
             //TODO error handling
         },
-        apiCallToGetAttributes: function () {
-            axios
-                .get(prependPath("/api/dataset_collections/" + this.collection_id + "/attributes"))
-                .then((response) => {
-                    this.attributes_data = response.data;
-                    this.getDatabaseKeyFromElements();
-                    this.getExtensionFromElements();
-                });
-            //TODO error handling
-        },
         getDatabaseKeyFromElements: function () {
             this.databaseKeyFromElements = this.attributes_data.dbkey;
-            // this.selectedGenome = this.genomes.find((element) => element.id == this.databaseKeyFromElements);
         },
         getExtensionFromElements: function () {
             this.datatypeFromElements = this.attributes_data.extension;
             this.selectedExtension = this.extensions.find((element) => element.id == this.datatypeFromElements);
         },
         clickedSave: function (attribute, newValue) {
+            console.log("user clicked Save.... genome is", newValue);
             const url = prependPath("/api/dataset_collections/" + this.collection_id);
             const data = {};
             if (attribute == "dbkey") {
-                data.add({ dbkey: newValue.id });
+                data["dbkey"] = newValue.id;
             } else if (attribute == "file_ext") {
-                data.add({ file_ext: newValue.id });
+                data["file_ext"] = newValue.id;
             }
 
             axios
                 .put(url, data)
                 .then((response) => {
                     this.apiCallToGetData();
+                    this.getDatabaseKeyFromElements();
+                    this.getExtensionFromElements();
                 })
                 .catch(this.handleError);
         },

client/src/components/Collections/common/DatabaseEditTab.vue

@@ -6,7 +6,7 @@
                 <button
                     class="save-collection-edit btn btn-primary"
                     @click="clickedSave"
-                    :disabled="genome.id == databaseKey"
+                    :disabled="genome.id == databaseKeyFromElements"
                 >
                     {{ l("Save") }}
                 </button>
@@ -28,27 +28,39 @@
 </template>
 <script>
 import Multiselect from "vue-multiselect";
+import store from "../../../store/index";
+
 export default {
-    created() {},
+    created() {
+        this.getGenomes();
+    },
     components: { Multiselect },
     data: function () {
         return {
             selectedGenome: {},
+            genomes: [],
         };
     },
     props: {
         databaseKeyFromElements: {
             type: String,
             required: true,
         },
-        genomes: {
-            type: Array,
-            required: true,
-        },
     },
     methods: {
         clickedSave: function () {
             this.$emit("clicked-save", "dbkey", this.genome);
+            this.selectedGenome = this.genomes.find((element) => element.id == this.databaseKeyFromElements);
+            console.log("DBKFE", this.databaseKeyFromElements);
+            console.log("SG", this.selectedGenome);
+        },
+        getGenomes: async function () {
+            let genomes = store.getters.getUploadGenomes();
+            if (!genomes || genomes.length == 0) {
+                await store.dispatch("fetchUploadGenomes");
+                genomes = store.getters.getUploadGenomes();
+            }
+            this.genomes = genomes;
         },
     },
     computed: {
@@ -58,13 +70,20 @@ export default {
             },
             set(element) {
                 this.selectedGenome = element;
-                console.log();
             },
         },
     },
     watch: {
-        databaseKeyFromElements(databaseKeyFromElements) {
-            this.genome = this.genomes.find((element) => element.id == this.databaseKeyFromElements);
+        //in order to have the dropdown populated with the correct genome, both databaseKeyFromElements and genomes have to be populated
+        databaseKeyFromElements() {
+            if (this.genomes.length > 0) {
+                this.selectedGenome = this.genomes.find((element) => element.id == this.databaseKeyFromElements);
+            }
+        },
+        genomes() {
+            if (this.databaseKeyFromElements != null) {
+                this.selectedGenome = this.genomes.find((element) => element.id == this.databaseKeyFromElements);
+            }
         },
     },
 };

client/src/store/collectionStore.js

@@ -0,0 +1,65 @@
+export const state = {
+    collectionAttributes: {},
+    uploadDatatypes: [],
+    uploadGenomes: [],
+};
+import Vue from "vue";
+import { prependPath } from "utils/redirect";
+import axios from "axios";
+import UploadUtils from "mvc/upload/upload-utils";
+
+const getters = {
+    getCollectionAttributes: (state) => (collectionId) => {
+        return state.collectionAttributes[collectionId] || null;
+    },
+    getUploadDatatypes: (state) => () => {
+        return state.uploadDatatypes;
+    },
+    getUploadGenomes: (state) => () => {
+        return state.uploadGenomes;
+    },
+};
+
+const actions = {
+    fetchCollectionAttributes: async ({ commit }, collectionId) => {
+        const { data } = await axios.get(prependPath("api/dataset_collections/" + collectionId + "/attributes"));
+        commit("saveCollectionAttributes", { collectionId, collectionAttributes: data });
+    },
+    fetchUploadDatatypes: async ({ commit }) => {
+        await UploadUtils.getUploadDatatypes(true, UploadUtils.AUTO_EXTENSION)
+            .then((data) => {
+                commit("saveUploadDatatypes", { datatypes: data });
+            })
+            .catch((err) => {
+                console.log("Error: unable to load datatypes", err);
+            });
+    },
+    fetchUploadGenomes: async ({ commit }) => {
+        await UploadUtils.getUploadGenomes(UploadUtils.DEFAULT_GENOME)
+            .then((data) => {
+                commit("saveUploadGenomes", { genomes: data });
+            })
+            .catch((err) => {
+                console.log("Error: unable to load genomes", err);
+            });
+    },
+};
+
+const mutations = {
+    saveCollectionAttributes: (state, { collectionId, collectionAttributes }) => {
+        Vue.set(state.collectionAttributes, collectionId, collectionAttributes);
+    },
+    saveUploadDatatypes: (state, { datatypes }) => {
+        state.uploadDatatypes = datatypes;
+    },
+    saveUploadGenomes: (state, { genomes }) => {
+        state.uploadGenomes = genomes;
+    },
+};
+
+export const collectionStore = {
+    state,
+    getters,
+    actions,
+    mutations,
+};

client/src/store/index.js

@@ -20,6 +20,7 @@ import { toolStore } from "./toolStore";
 import { datasetPathDestinationStore } from "./datasetPathDestinationStore";
 import { datasetExtFilesStore } from "./datasetExtFilesStore";
 import { jobStore } from "./jobStore";
+import { collectionStore } from "./collectionStore";
 
 // beta features
 import { historyStore as betaHistoryStore } from "components/History/model/historyStore";
@@ -49,6 +50,7 @@ export function createStore() {
             workflows: workflowStore,
             informationStore: jobStore,
             tools: toolStore,
+            collectionStore: collectionStore,
         },
     };