Migrate collection elements store to Pinia

client/src/components/History/CurrentCollection/CollectionPanel.vue

@@ -1,135 +1,116 @@
 <!-- When a dataset collection is being viewed, this panel shows the contents of that collection -->
 
-<template>
-    <CollectionElementsProvider
-        v-if="dsc"
-        :id="dsc.id"
-        ref="provider"
-        :key="dsc.id"
-        v-slot="{ loading, result: payload }"
-        :contents-url="contentsUrl"
-        :offset="offset">
-        <ExpandedItems v-slot="{ isExpanded, setExpanded }" :scope-key="dsc.id" :get-item-key="(item) => item.id">
-            <section class="dataset-collection-panel w-100 d-flex flex-column">
-                <section>
-                    <CollectionNavigation
-                        :history-name="history.name"
-                        :selected-collections="selectedCollections"
-                        v-on="$listeners" />
-                    <CollectionDetails :dsc="dsc" :writeable="isRoot" @update:dsc="updateDsc(dsc, $event)" />
-                    <CollectionOperations v-if="isRoot && showControls" :dsc="dsc" />
-                </section>
-                <section class="position-relative flex-grow-1 scroller">
-                    <div>
-                        <ListingLayout :items="payload" :loading="loading" @scroll="onScroll">
-                            <template v-slot:item="{ item }">
-                                <ContentItem
-                                    :id="item.element_index + 1"
-                                    :item="item.object"
-                                    :name="item.element_identifier"
-                                    :expand-dataset="isExpanded(item)"
-                                    :is-dataset="item.element_type == 'hda'"
-                                    :filterable="filterable"
-                                    @update:expand-dataset="setExpanded(item, $event)"
-                                    @view-collection="onViewSubCollection" />
-                            </template>
-                        </ListingLayout>
-                    </div>
-                </section>
-            </section>
-        </ExpandedItems>
-    </CollectionElementsProvider>
-</template>
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
 
-<script>
-import ContentItem from "components/History/Content/ContentItem";
-import ExpandedItems from "components/History/Content/ExpandedItems";
-import ListingLayout from "components/History/Layout/ListingLayout";
-import { updateContentFields } from "components/History/model/queries";
-import { CollectionElementsProvider } from "components/providers/storeProviders";
-
-import CollectionDetails from "./CollectionDetails";
-import CollectionNavigation from "./CollectionNavigation";
-import CollectionOperations from "./CollectionOperations";
-
-export default {
-    components: {
-        CollectionDetails,
-        CollectionElementsProvider,
-        CollectionNavigation,
-        CollectionOperations,
-        ContentItem,
-        ExpandedItems,
-        ListingLayout,
-    },
-    props: {
-        history: { type: Object, required: true },
-        selectedCollections: { type: Array, required: true },
-        showControls: { type: Boolean, default: true },
-        filterable: { type: Boolean, default: false },
-    },
-    data() {
-        return {
-            offset: 0,
-        };
-    },
-    computed: {
-        dsc() {
-            const arr = this.selectedCollections;
-            return arr[arr.length - 1];
-        },
-        jobState() {
-            return this.dsc["job_state_summary"];
-        },
-        isRoot() {
-            return this.dsc == this.rootCollection;
-        },
-        rootCollection() {
-            return this.selectedCollections[0];
-        },
-        contentsUrl() {
-            return this.dsc.contents_url.substring(1);
-        },
-    },
-    watch: {
-        history(newHistory, oldHistory) {
-            if (newHistory.id != oldHistory.id) {
-                // Send up event closing out selected collection on history change.
-                this.$emit("update:selected-collections", []);
-            }
-        },
-        jobState: {
-            handler() {
-                this.$refs.provider.load();
-            },
-            deep: true,
-        },
-    },
-    methods: {
-        updateDsc(collection, fields) {
-            updateContentFields(collection, fields).then((response) => {
-                Object.keys(response).forEach((key) => {
-                    collection[key] = response[key];
-                });
-            });
-        },
-        onScroll(offset) {
-            this.offset = offset;
-        },
-        /**
-         * Passes a sub-collection i.e a collection element object containing another collection, into
-         * a populated object for drilldown without the need for a separate data request. This object
-         * is used for breadcrumbs in the navigation component and to render the collection details and
-         * description at the top of the collection panel. Details include the collection name, the
-         * collection type, and the element count.
-         */
-        onViewSubCollection(itemObject, elementIdentifer) {
-            const collectionObject = {
-                name: elementIdentifer,
-                ...itemObject,
-            };
-            this.$emit("view-collection", collectionObject);
-        },
+import ExpandedItems from "@/components/History/Content/ExpandedItems";
+import { updateContentFields } from "@/components/History/model/queries";
+import { useCollectionElementsStore } from "@/stores/collectionElementsStore";
+import { HistorySummary } from "@/stores/historyStore";
+import { DCESummary, DCObject, HDCASummary } from "@/stores/services";
+
+import CollectionDetails from "./CollectionDetails.vue";
+import CollectionNavigation from "./CollectionNavigation.vue";
+import CollectionOperations from "./CollectionOperations.vue";
+import ContentItem from "@/components/History/Content/ContentItem.vue";
+import ListingLayout from "@/components/History/Layout/ListingLayout.vue";
+
+interface Props {
+    history: HistorySummary;
+    selectedCollections: HDCASummary[];
+    showControls?: boolean;
+    filterable?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    showControls: true,
+    filterable: false,
+});
+
+const collectionElementsStore = useCollectionElementsStore();
+
+const emit = defineEmits<{
+    (e: "view-collection", collection: HDCASummary): void;
+    (e: "update:selected-collections", collections: HDCASummary[]): void;
+}>();
+
+const offset = ref(0);
+
+const dsc = computed(() => props.selectedCollections[props.selectedCollections.length - 1] as HDCASummary);
+const collectionElements = computed(() => collectionElementsStore.getCollectionElements(dsc.value, offset.value));
+const loading = computed(() => collectionElementsStore.isLoadingCollectionElements(dsc.value));
+const jobState = computed(() => dsc.value?.job_state_summary);
+const rootCollection = computed(() => props.selectedCollections[0]);
+const isRoot = computed(() => dsc.value == rootCollection.value);
+
+function updateDsc(collection: any, fields: Object | undefined) {
+    updateContentFields(collection, fields).then((response) => {
+        Object.keys(response).forEach((key) => {
+            collection[key] = response[key];
+        });
+    });
+}
+
+function getItemKey(item: DCESummary) {
+    return item.id;
+}
+
+function onScroll(newOffset: number) {
+    offset.value = newOffset;
+}
+
+async function onViewSubCollection(itemObject: DCObject) {
+    const collection = await collectionElementsStore.getCollection(itemObject.id);
+    emit("view-collection", collection);
+}
+
+watch(
+    () => props.history,
+    (newHistory, oldHistory) => {
+        if (newHistory.id != oldHistory.id) {
+            // Send up event closing out selected collection on history change.
+            emit("update:selected-collections", []);
+        }
+    }
+);
+
+watch(
+    jobState,
+    () => {
+        collectionElementsStore.loadCollectionElements(dsc.value);
     },
-};
+    { deep: true }
+);
 </script>
+
+<template>
+    <ExpandedItems v-slot="{ isExpanded, setExpanded }" :scope-key="dsc.id" :get-item-key="getItemKey">
+        <section class="dataset-collection-panel w-100 d-flex flex-column">
+            <section>
+                <CollectionNavigation
+                    :history-name="history.name"
+                    :selected-collections="selectedCollections"
+                    v-on="$listeners" />
+                <CollectionDetails :dsc="dsc" :writeable="isRoot" @update:dsc="updateDsc(dsc, $event)" />
+                <CollectionOperations v-if="isRoot && showControls" :dsc="dsc" />
+            </section>
+            <section class="position-relative flex-grow-1 scroller">
+                <div>
+                    <ListingLayout :items="collectionElements" :loading="loading" @scroll="onScroll">
+                        <template v-slot:item="{ item }">
+                            <ContentItem
+                                :id="item.element_index + 1"
+                                :item="item.object"
+                                :name="item.element_identifier"
+                                :expand-dataset="isExpanded(item)"
+                                :is-dataset="item.element_type == 'hda'"
+                                :filterable="filterable"
+                                @update:expand-dataset="setExpanded(item, $event)"
+                                @view-collection="onViewSubCollection" />
+                        </template>
+                    </ListingLayout>
+                </div>
+            </section>
+        </section>
+    </ExpandedItems>
+</template>

client/src/components/providers/storeProviders.js

@@ -195,5 +195,4 @@ export const StoreProvider = (storeAction, storeGetter) => {
     };
 };
 
-export const CollectionElementsProvider = StoreProvider("fetchCollectionElements", "getCollectionElements");
 export const ToolsProvider = StoreProvider("fetchAllTools", "getTools");

client/src/schema/schema.ts

@@ -4807,10 +4807,11 @@ export interface components {
              */
             hid: number;
             /**
-             * Content Type
-             * @description The type of this item.
+             * History Content Type
+             * @description This is always `dataset` for datasets.
+             * @enum {string}
              */
-            history_content_type: components["schemas"]["HistoryContentType"];
+            history_content_type: "dataset";
             /**
              * History ID
              * @description The encoded ID of the history associated with this item.
@@ -5021,10 +5022,11 @@ export interface components {
              */
             hid: number;
             /**
-             * Content Type
-             * @description The type of this item.
+             * History Content Type
+             * @description This is always `dataset` for datasets.
+             * @enum {string}
              */
-            history_content_type: components["schemas"]["HistoryContentType"];
+            history_content_type: "dataset";
             /**
              * History ID
              * @description The encoded ID of the history associated with this item.
@@ -5136,10 +5138,11 @@ export interface components {
              */
             hid: number;
             /**
-             * Content Type
-             * @description The type of this item.
+             * History Content Type
+             * @description This is always `dataset_collection` for dataset collections.
+             * @enum {string}
              */
-            history_content_type: components["schemas"]["HistoryContentType"];
+            history_content_type: "dataset_collection";
             /**
              * History ID
              * @description The encoded ID of the history associated with this item.
@@ -5270,10 +5273,11 @@ export interface components {
              */
             hid: number;
             /**
-             * Content Type
-             * @description The type of this item.
+             * History Content Type
+             * @description This is always `dataset_collection` for dataset collections.
+             * @enum {string}
              */
-            history_content_type: components["schemas"]["HistoryContentType"];
+            history_content_type: "dataset_collection";
             /**
              * History ID
              * @description The encoded ID of the history associated with this item.
@@ -9959,7 +9963,7 @@ export interface operations {
             /** @description Successful Response */
             200: {
                 content: {
-                    "application/json": components["schemas"]["HDCADetailed"] | components["schemas"]["HDCASummary"];
+                    "application/json": components["schemas"]["HDCADetailed"];
                 };
             };
             /** @description Validation Error */