forked from galaxyproject/galaxy
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request galaxyproject#16725 from davelopez/migrate_collect…
…ion_elements_store_pinia Migrate `collection elements` store to Pinia
- Loading branch information
Showing
16 changed files
with
460 additions
and
242 deletions.
There are no files selected for viewing
241 changes: 111 additions & 130 deletions
241
client/src/components/History/CurrentCollection/CollectionPanel.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.