Improvements for Collections Items

Open-EO · Jan 5, 2025 · cf4db5c · cf4db5c
1 parent e239467
commit cf4db5c
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 20 deletions.
diff --git a/src/components/modals/CollectionModal.vue b/src/components/modals/CollectionModal.vue
@@ -1,19 +1,33 @@
 <template>
-	<Modal width="80%" :title="collection.id" @closed="$emit('closed')">
-		<div class="docgen">
-			<Collection :data="collection" />
-			<section class="items" v-if="currentItems">
-				<Items :items="currentItems">
-					<template #item-location="p">
-						<MapExtentViewer :footprint="p.geometry"></MapExtentViewer>
-					</template>
-				</Items>
-				<div class="pagination">
-					<button title="Previous page" @click="paginate(-1)" :disabled="!hasPrevItems"><i class="fas fa-arrow-left"></i> Previous Page</button>
-					<button title="Next page" @click="paginate(1)" :disabled="!hasNextItems">Next Page <i class="fas fa-arrow-right"></i></button>
-				</div>
-			</section>
-		</div>
+	<Modal class="collection" width="80%" height="96%" :title="collection.id" @closed="$emit('closed')">
+		<Tabs id="collection-modal" position="bottom">
+			<Tab id="metadata" name="Overview" icon="fa-info" class="docgen">
+				<Collection :data="collection" />
+			</Tab>
+			<Tab id="items" name="Items" icon="fa-images" class="docgen" @show="showHiddenMap=true" @hide="showHiddenMap=false">
+				<section class="items" v-if="currentItems">
+					<Items :items="currentItems" showMap>
+						<template #map="p">
+							<MapExtentViewer :show="showHiddenMap" ref="overview" :footprint="p.geojson" :fill="false"></MapExtentViewer>
+						</template>
+						<template #after-search-box>
+							<div class="pagination">
+								<AsyncButton title="Previous page" :fn="() => paginate(-1)" :disabled="!hasPrevItems" fa icon="fas fa-arrow-left">Previous Page</AsyncButton>
+								<AsyncButton title="Next page" :fn="() => paginate(1)" :disabled="!hasNextItems" fa icon="fas fa-arrow-right">Next Page</AsyncButton>
+							</div>
+						</template>
+						<template #item-location="p">
+							<MapExtentViewer :show="showHiddenMap" :footprint="p.geometry"></MapExtentViewer>
+						</template>
+					</Items>
+					<div class="pagination">
+						<AsyncButton title="Previous page" :fn="() => paginate(-1)" :disabled="!hasPrevItems" fa icon="fas fa-arrow-left">Previous Page</AsyncButton>
+						<AsyncButton title="Next page" :fn="() => paginate(1)" :disabled="!hasNextItems" fa icon="fas fa-arrow-right">Next Page</AsyncButton>
+					</div>
+				</section>
+				<section v-else>Individual items are not available for this collection.</section>
+			</Tab>
+		</Tabs>
 	</Modal>
 </template>
 
@@ -22,20 +36,27 @@ import Modal from './Modal.vue';
 import Collection from '../Collection.vue';
 import Utils from '../../utils.js';
 import StacMigrate from '@radiantearth/stac-migrate';
+import AsyncButton from '@openeo/vue-components/components/internal/AsyncButton.vue';
+import Tabs from '@openeo/vue-components/components/Tabs.vue';
+import Tab from '@openeo/vue-components/components/Tab.vue';
 
 export default {
 	name: 'CollectionModal',
 	components: {
+		AsyncButton,
 		MapExtentViewer: () => import('../maps/MapExtentViewer.vue'),
 		Modal,
 		Collection,
-		Items: () => import('@openeo/vue-components/components/Items.vue')
+		Items: () => import('@openeo/vue-components/components/Items.vue'),
+		Tabs,
+		Tab
 	},
 	data() {
 		return {
 			items: [],
 			itemsPage: 0,
-			itemPages: null
+			itemPages: null,
+			showHiddenMap: false
 		};
 	},
 	props: {
@@ -44,7 +65,7 @@ export default {
 		}
 	},
 	computed: {
-		...Utils.mapState(['connection']),
+		...Utils.mapState(['connection', 'pageLimit']),
 		...Utils.mapGetters(['supports']),
 		currentItems() {
 			if (this.items.length >= this.itemsPage) {
@@ -77,7 +98,7 @@ export default {
 		},
 		async nextItems() {
 			if (!this.itemPages) {
-				this.itemPages = await this.connection.listCollectionItems(this.collection.id);
+				this.itemPages = await this.connection.listCollectionItems(this.collection.id, null, null, this.pageLimit);
 			}
 			let items = await this.itemPages.nextPage();
 			items = items.map(item => StacMigrate.item(item, this.collection, false));
@@ -109,7 +130,30 @@ export default {
 .vue-component.items > .searchable-list > h2 {
 	display: block;
 	font-size: 1.4em;
-	margin-top: 1.5em;
 	border-bottom-style: dotted;
 }
+
+.modal.collection {
+	.map-extent {
+		height: 300px;
+	}
+	.modal-content {
+		padding: 0;
+		overflow: hidden;
+		width: 100%;
+		height: 100%;
+	}
+	.items .pagination {
+		margin: 1em 0;
+	}
+	#collection-modal {
+		width: 100%;
+		height: 100%;
+		
+		> .tabsBody > .tabContent {
+			padding: 1em;
+			overflow: auto;
+		}
+	}
+}
 </style>
diff --git a/src/components/modals/Modal.vue b/src/components/modals/Modal.vue
@@ -39,6 +39,10 @@ export default {
 			type: String,
 			default: "auto"
 		},
+		height: {
+			type: String,
+			default: "auto"
+		},
 		show: {
 			type: Boolean,
 			default: true
@@ -69,6 +73,9 @@ export default {
 			if (this.minWidth) {
 				style['min-width'] = this.minWidth;
 			}
+			if (this.height) {
+				style['height'] = this.height;
+			}
 			if (Array.isArray(this.position)) {
 				style.position = 'absolute';
 				style.left = this.position[0] + 'px';