attempt #1 to create provider for collection attributes

Author: assuntad23

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

@@ -1,5 +1,11 @@
 <template>
     <div>
+        <dataset-collection-attributes-provider :id="collection_id" v-slot="{ item, loading }">
+            <div v-if="!loading">
+                {{ loading }}
+                {{ item }}
+            </div>
+        </dataset-collection-attributes-provider>
         <h4>{{ l("Edit Collection Attributes") }}</h4>
         <b-alert show variant="info" dismissible>
             {{ l("This will create a new collection in your History. Your quota usage will not increase. ") }}
@@ -54,10 +60,6 @@
                     </template> --> </multiselect
                 ><i>original input: {{ datatypeFromElements }}</i>
             </b-tab>
-            <b-tab>
-                <template v-slot:title> <font-awesome-icon icon="user" /> &nbsp;{{ l("Permissions") }}</template>
-                <p>WIP Permissions</p>
-            </b-tab>
         </b-tabs>
     </div>
 </template>
@@ -79,6 +81,7 @@ 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 { DatasetCollectionAttributesProvider } from "../../WorkflowInvocationState/providers";
 
 //import VueObserveVisibility from "vue-observe-visibility";
 
@@ -96,8 +99,9 @@ export default {
         // this.apiCallToGetAttributes();
         this.getDatatypesAndGenomes();
         this.getCollectionDataAndAttributes();
+        console.log("item is", this.item);
     },
-    components: { Multiselect, DatabaseEditTab, FontAwesomeIcon },
+    components: { Multiselect, DatabaseEditTab, FontAwesomeIcon, DatasetCollectionAttributesProvider },
     data: function () {
         return {
             collection_data: {}, //all data from the response
@@ -118,21 +122,6 @@ export default {
         },
     },
     computed: {
-        collectionName: {
-            get() {
-                return this.collection_data.name;
-            },
-            //TODO : #6966
-            // set(collection_name) {
-            //     this.collection_data.name = collection_name;
-            // },
-        },
-        collectionType: {
-            // no setter; for display only
-            get() {
-                return this.collection_data.collection_type;
-            },
-        },
         extension: {
             get() {
                 return this.selectedExtension;
@@ -163,8 +152,6 @@ export default {
             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);
@@ -174,15 +161,6 @@ export default {
             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;
-                });
-
-            //TODO error handling
-        },
         getDatabaseKeyFromElements: function () {
             this.databaseKeyFromElements = this.attributes_data.dbkey;
         },

client/src/components/WorkflowInvocationState/providers/DatasetCollectionAttributesProvider.js

@@ -0,0 +1,11 @@
+import { default as RxProviderMixin } from "./rxProviders";
+import { datasetCollectionAttributesMonitor } from "./monitors";
+
+export default {
+    mixins: [RxProviderMixin],
+    methods: {
+        buildMonitor() {
+            return datasetCollectionAttributesMonitor();
+        },
+    },
+};

client/src/components/WorkflowInvocationState/providers/fetch.js

@@ -23,3 +23,10 @@ export const fetchInvocationStepById = () => {
         mergeMap((url) => ajax.getJSON(url))
     );
 };
+
+export const fetchDatasetCollectionAttributesById = () => {
+    return pipe(
+        map((id) => prependPath(`/api/dataset_collections/${id}/attributes`)),
+        mergeMap((url) => ajax.getJSON(url))
+    );
+};

client/src/components/WorkflowInvocationState/providers/index.js

@@ -8,4 +8,5 @@ export {
 // test provider
 export { default as DatasetProvider } from "./DatasetProvider";
 export { default as DatasetCollectionProvider } from "./DatasetCollectionProvider";
+export { default as DatasetCollectionAttributesProvider } from "./DatasetCollectionAttributesProvider";
 export { default as InvocationStepProvider } from "./InvocationStepProvider";

client/src/components/WorkflowInvocationState/providers/monitors.js

@@ -2,7 +2,7 @@ import { of, race, pipe, concat, iif } from "rxjs";
 import { filter, mergeMap, switchMap, delay, share, repeat, take, takeWhile } from "rxjs/operators";
 import { cacheContent, monitorContentQuery } from "components/History/caching";
 import { singleUpdateResult } from "components/History/caching/db/monitorQuery";
-import { fetchDatasetById, fetchDatasetCollectionById, fetchInvocationStepById } from "./fetch";
+import { fetchDatasetById, fetchDatasetCollectionById, fetchInvocationStepById, fetchDatasetCollectionAttributesById } from "./fetch";
 import { loadHistoryContents } from "components/History/caching";
 
 // prettier-ignore
@@ -21,6 +21,11 @@ export const datasetCollectionMonitor = (cfg = {}) => {
     return pipe(switchMap((id) => createContentMonitor(id, "dataset_collection", spinUpDelay)));
 };
 
+export const datasetCollectionAttributesMonitor = (cfg = {}) => {
+    const { spinUpDelay } = cfg;
+    return pipe(switchMap((id) => createContentMonitor(id, "dataset_collection_attributes", spinUpDelay)));
+};
+
 const createContentMonitor = (id, contentType, spinUpDelay = 250) => {
     let fetcher;
     switch (contentType) {
@@ -30,6 +35,9 @@ const createContentMonitor = (id, contentType, spinUpDelay = 250) => {
         case "dataset_collection":
             fetcher = fetchDatasetCollectionById;
             break;
+        case "dataset_collection_attributes":
+            fetcher = fetchDatasetCollectionAttributesById;
+            break;
         default:
             console.error(`Can't create monitor for ${contentType}-${id}`);
     }

client/src/components/WorkflowInvocationState/providers/storeProviders.js

@@ -80,6 +80,24 @@ export const DatasetCollectionProvider = {
     },
 };
 
+export const DatasetCollectionAttributesProvider = {
+    mixins: [SimpleProviderMixin, StoreProviderMixin],
+    methods: {
+        ...mapCacheActions("datasetCollectionAttributes", ["fetchDatasetCollectionAttributes"]),
+        async load() {
+            this.loading = true;
+            this.item = await this.fetchDatasetCollectionAttributes(this.id);
+            this.loading = false;
+        },
+    },
+    computed: {
+        ...mapGetters("datasetCollectionAttributes", ["getDatasetCollectionAttributesById"]),
+        storeItem() {
+            return this.getDatasetCollectionAttributesById(this.id);
+        },
+    },
+};
+
 export const DatasetCollectionContentProvider = {
     mixins: [SimpleProviderMixin],
     computed: {