From b779006cd74cd7a7d03f29bee8f3f80460f3e71a Mon Sep 17 00:00:00 2001
From: Csaky <Tim.Csaky@gov.bc.ca>
Date: Wed, 28 Feb 2024 16:36:35 -0800
Subject: [PATCH] More refactoring for the file details page components

use models to to pass current and latest versionId's
extend action to fetchMetadata/tags for all versions in one shot
---
 .../src/components/object/ObjectAccess.vue    |  13 +-
 .../components/object/ObjectFileDetails.vue   | 145 ++++++++----------
 .../src/components/object/ObjectMetadata.vue  |  23 +--
 frontend/src/components/object/ObjectTag.vue  |  25 ++-
 .../src/components/object/ObjectVersion.vue   |  61 ++------
 frontend/src/store/versionStore.ts            |  46 ++----
 .../options/GetVersionMetadataOptions.ts      |   3 +-
 .../types/options/GetVersionTaggingOptions.ts |   3 +-
 .../src/views/detail/DetailObjectsView.vue    |  28 +++-
 9 files changed, 146 insertions(+), 201 deletions(-)

diff --git a/frontend/src/components/object/ObjectAccess.vue b/frontend/src/components/object/ObjectAccess.vue
index a3a10707..0ff959f5 100644
--- a/frontend/src/components/object/ObjectAccess.vue
+++ b/frontend/src/components/object/ObjectAccess.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, ref } from 'vue';
 
 import { usePermissionStore, useUserStore } from '@/store';
 import { Permissions } from '@/utils/constants';
@@ -25,8 +25,7 @@ const { getUsers } = storeToRefs(userStore);
 // State
 const managedBy: Ref<string | undefined> = ref();
 
-// Actions
-async function load() {
+onMounted(async () => {
   await permissionStore.fetchObjectPermissions({ objectId: props.objectId });
 
   const uniqueIds = [
@@ -44,14 +43,6 @@ async function load() {
       .map((x: User) => x.fullName)
       .join(', ');
   }
-}
-
-onMounted(() => {
-  load();
-});
-
-watch(props, () => {
-  load();
 });
 </script>
 
diff --git a/frontend/src/components/object/ObjectFileDetails.vue b/frontend/src/components/object/ObjectFileDetails.vue
index 2d18c2c8..6e229d9d 100644
--- a/frontend/src/components/object/ObjectFileDetails.vue
+++ b/frontend/src/components/object/ObjectFileDetails.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
-import { computed, onBeforeMount, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 
 import {
@@ -29,16 +29,15 @@ import { Permissions, RouteNames } from '@/utils/constants';
 import { ButtonMode } from '@/utils/enums';
 
 import type { Ref } from 'vue';
+import type { COMSObject } from '@/types';
 
 // Props
 type Props = {
   objectId: string;
-  versionId?: string;
+  versionId: string;
 };
 
-const props = withDefaults(defineProps<Props>(), {
-  versionId: undefined
-});
+const props = withDefaults(defineProps<Props>(), {});
 
 const router = useRouter();
 
@@ -55,70 +54,58 @@ const { getObject } = storeToRefs(objectStore);
 const { getVersionsByObjectId, getLatestVersionIdByObjectId } = storeToRefs(versionStore);
 
 // State
-const obj = computed((): any => getObject.value(props.objectId));
+const object: Ref<COMSObject | undefined> = ref(undefined);
+const bucketId: Ref<string> = ref('');
+
+const currentVersionId: Ref<string | undefined> = ref(props.versionId);
 const latestVersionId = computed(() => getLatestVersionIdByObjectId.value(props.objectId));
-const versionId = computed(() => props.versionId ?? latestVersionId.value);
 const permissionsVisible: Ref<boolean> = ref(false);
 
-function onDeletedSuccess() {
-  router.push({
-    name: RouteNames.DETAIL_OBJECTS,
-    query: {
-      objectId: props.objectId,
-      versionId: latestVersionId.value
-    }
-  });
-}
-
-function onFileUploaded(newVersionId: string) {
-  // Navigate to new version
-  router.push({
-    name: RouteNames.DETAIL_OBJECTS,
-    query: {
-      objectId: props.objectId,
-      versionId: newVersionId
-    }
+async function onVersionsChanged() {
+  await Promise.all([
+    versionStore.fetchVersions({ objectId: props.objectId }),
+    metadataStore.fetchMetadata({ objectId: props.objectId }),
+    tagStore.fetchTagging({ objectId: props.objectId })
+  ]).then(async () => {
+    currentVersionId.value = latestVersionId.value;
+    currentVersionId === latestVersionId;
+
+    await Promise.all([
+      versionStore.fetchMetadata({ objectId: props.objectId }),
+      versionStore.fetchTagging({ objectId: props.objectId })
+    ]);
   });
 }
 
-onBeforeMount(async () => {
+onMounted(async () => {
   const head = await objectStore.headObject(props.objectId);
   const isPublic = head?.status === 204;
 
   await permissionStore.fetchBucketPermissions({ userId: getUserId.value, objectPerms: true });
   await objectStore.fetchObjects({ objectId: props.objectId, userId: getUserId.value, bucketPerms: true });
+  object.value = getObject.value(props.objectId);
+  const bucketId = object.value?.bucketId;
   if (
     !isPublic &&
-    (!obj.value ||
-      !permissionStore.isObjectActionAllowed(obj.value.id, getUserId.value, Permissions.READ, obj.value.bucketId))
+    (!object.value ||
+      !permissionStore.isObjectActionAllowed(object.value.id, getUserId.value, Permissions.READ, object.value.bucketId))
   ) {
     router.replace({ name: RouteNames.FORBIDDEN });
   }
   // fetch data for child components
-  await bucketStore.fetchBuckets({ bucketId: obj.value.bucketId });
-  await versionStore.fetchVersions({ objectId: props.objectId });
-  await metadataStore.fetchMetadata({ objectId: props.objectId });
-  await tagStore.fetchTagging({ objectId: props.objectId });
-  if (props.versionId) {
-    await versionStore.fetchTagging({ versionId: props.versionId });
-    await versionStore.fetchMetadata({ versionId: props.versionId });
-  }
-});
-
-// refresh data from COMS
-watch([props], async () => {
-  await versionStore.fetchVersions({ objectId: props.objectId });
-  await metadataStore.fetchMetadata({ objectId: props.objectId });
-  await tagStore.fetchTagging({ objectId: props.objectId });
-  if (props.versionId) {
-    await versionStore.fetchTagging({ versionId: props.versionId });
-    await versionStore.fetchMetadata({ versionId: props.versionId });
-  }
+  await Promise.all([
+    bucketStore.fetchBuckets({ bucketId: bucketId }),
+    versionStore.fetchVersions({ objectId: props.objectId }),
+    metadataStore.fetchMetadata({ objectId: props.objectId }),
+    tagStore.fetchTagging({ objectId: props.objectId }),
+    versionStore.fetchTagging({ objectId: props.objectId }),
+    versionStore.fetchMetadata({ objectId: props.objectId })
+  ]);
 });
 </script>
 
 <template>
-  <div v-if="obj">
+  <div v-if="object">
     <div class="grid grid-nogutter">
       <div class="col-12">
         <h1 class="heading">File details</h1>
@@ -130,23 +117,22 @@ watch([props], async () => {
             class="text-3xl pr-3"
           />
           <h2 class="">
-            {{ obj.name }}
+            {{ object.name }}
           </h2>
         </div>
 
         <div class="action-buttons">
-          <ShareObjectButton :id="props.objectId" />
+          <ShareObjectButton :id="object.id" />
           <DownloadObjectButton
             v-if="
-              obj.public ||
-              permissionStore.isObjectActionAllowed(props.objectId, getUserId, Permissions.READ, obj.bucketId)
+              object.public || permissionStore.isObjectActionAllowed(object.id, getUserId, Permissions.READ, bucketId)
             "
             :mode="ButtonMode.ICON"
-            :ids="[props.objectId]"
-            :version-id="props.versionId"
+            :ids="[object.id]"
+            :version-id="currentVersionId"
           />
           <Button
-            v-if="permissionStore.isObjectActionAllowed(props.objectId, getUserId, Permissions.MANAGE, obj.bucketId)"
+            v-if="permissionStore.isObjectActionAllowed(object.id, getUserId, Permissions.MANAGE, bucketId)"
             v-tooltip.bottom="'Object permissions'"
             class="p-button-lg p-button-text"
             aria-label="Object permissions"
@@ -155,12 +141,12 @@ watch([props], async () => {
             <font-awesome-icon icon="fa-solid fa-users" />
           </Button>
           <DeleteObjectButton
-            v-if="permissionStore.isObjectActionAllowed(props.objectId, getUserId, Permissions.DELETE, obj.bucketId)"
+            v-if="permissionStore.isObjectActionAllowed(object.id, getUserId, Permissions.DELETE, bucketId)"
             :mode="ButtonMode.ICON"
-            :ids="[props.objectId]"
-            :version-id="props.versionId"
-            :disabled="getVersionsByObjectId(props.objectId).length === 1"
-            @on-deleted-success="onDeletedSuccess"
+            :ids="[object.id]"
+            :version-id="currentVersionId"
+            :disabled="getVersionsByObjectId(object.id).length === 1"
+            @on-deleted-success="onVersionsChanged"
           />
         </div>
       </div>
@@ -169,50 +155,47 @@ watch([props], async () => {
     <div class="flex flex-row">
       <div class="flex flex-column w-6 gap-3 py-5">
         <ObjectProperties
-          :object-id="props.objectId"
-          :version-id="versionId"
+          :object-id="object.id"
           :full-view="true"
         />
-        <ObjectAccess :object-id="props.objectId" />
+        <ObjectAccess :object-id="object.id" />
         <ObjectMetadata
-          :editable="props.versionId === latestVersionId"
-          :object-id="props.objectId"
-          :version-id="versionId"
-          @on-file-uploaded="onFileUploaded"
+          v-model:version-id="currentVersionId"
+          :editable="currentVersionId === latestVersionId"
+          :object-id="object.id"
+          @on-metadata-success="onVersionsChanged"
         />
       </div>
       <Divider layout="vertical" />
       <div class="flex flex-column w-6 gap-4 xl:pl-3 py-5">
         <div class="flex flex-row-reverse">
           <ObjectUploadBasic
-            v-if="permissionStore.isObjectActionAllowed(props.objectId, getUserId, Permissions.UPDATE, obj.bucketId)"
-            :bucket-id="obj.bucketId"
-            :object-id="props.objectId"
-            @on-file-uploaded="onFileUploaded"
+            v-if="permissionStore.isObjectActionAllowed(object.id, getUserId, Permissions.UPDATE, object.bucketId)"
+            :bucket-id="bucketId"
+            :object-id="object.id"
+            @on-file-uploaded="onVersionsChanged"
           />
         </div>
         <ObjectVersion
-          :bucket-id="obj?.bucketId"
-          :object-id="props.objectId"
-          :version-id="versionId"
+          v-model:version-id="currentVersionId"
+          :bucket-id="bucketId"
+          :object-id="object.id"
+          @on-deleted-success="onVersionsChanged"
         />
         <ObjectTag
-          :object-id="props.objectId"
-          :version-id="versionId"
-          @on-file-uploaded="onFileUploaded"
+          :object-id="object.id"
+          v-model:version-id="currentVersionId"
         />
       </div>
     </div>
   </div>
 
-  <!-- eslint-disable vue/no-v-model-argument -->
   <Dialog
     v-model:visible="permissionsVisible"
     :draggable="false"
     :modal="true"
     class="bcbox-info-dialog"
   >
-    <!-- eslint-enable vue/no-v-model-argument -->
     <template #header>
       <font-awesome-icon
         icon="fas fa-users"
@@ -222,10 +205,10 @@ watch([props], async () => {
     </template>
 
     <h3 class="bcbox-info-dialog-subhead">
-      {{ obj?.name }}
+      {{ object?.name }}
     </h3>
 
-    <ObjectPermission :object-id="props.objectId" />
+    <ObjectPermission :object-id="object?.id" />
   </Dialog>
 </template>
 
diff --git a/frontend/src/components/object/ObjectMetadata.vue b/frontend/src/components/object/ObjectMetadata.vue
index 195c6466..008ab5f8 100644
--- a/frontend/src/components/object/ObjectMetadata.vue
+++ b/frontend/src/components/object/ObjectMetadata.vue
@@ -10,22 +10,19 @@ import { Permissions } from '@/utils/constants';
 
 import type { Ref } from 'vue';
 import type { ObjectMetadataTagFormType } from '@/components/object/ObjectMetadataTagForm.vue';
-import type { Metadata } from '@/types';
 
 // Props
 type Props = {
   editable?: boolean;
   objectId: string;
-  versionId?: string;
 };
 
 const props = withDefaults(defineProps<Props>(), {
-  editable: true,
-  versionId: undefined
+  editable: true
 });
 
 // Emits
-const emit = defineEmits(['on-file-uploaded']);
+const emit = defineEmits(['on-metadata-success']);
 
 // Store
 const metadataStore = useMetadataStore();
@@ -38,9 +35,7 @@ const { getMetadataByObjectId } = storeToRefs(metadataStore);
 
 // State
 const obj = computed(() => objectStore.getObject(props.objectId));
-const objectMetadata: Ref<Metadata | undefined> = computed(() =>
-  props.versionId ? getMetadataByVersionId.value(props.versionId) : getMetadataByObjectId.value(props.objectId)
-);
+const versionId = defineModel<string>('versionId');
 const editing: Ref<boolean> = ref(false);
 const formData: Ref<ObjectMetadataTagFormType> = ref({
   filename: ''
@@ -61,15 +56,15 @@ const confirmUpdate = (values: ObjectMetadataTagFormType) => {
 
 const showModal = () => {
   formData.value.filename = obj.value?.name ?? '';
-  formData.value.metadata = objectMetadata.value?.metadata;
+  formData.value.metadata = (
+    versionId.value ? getMetadataByVersionId.value(versionId.value) : getMetadataByObjectId.value(props.objectId)
+  )?.metadata;
 
   editing.value = true;
 };
 
 const submitModal = async (values: ObjectMetadataTagFormType) => {
-  await metadataStore.replaceMetadata(props.objectId, values.metadata ?? [], props.versionId);
-  emit('on-file-uploaded');
-
+  await metadataStore.replaceMetadata(props.objectId, values.metadata ?? [], versionId.value);
   closeModal();
 };
 
@@ -84,7 +79,7 @@ const closeModal = () => {
       <h2>Metadata</h2>
     </div>
     <GridRow
-      v-for="meta in objectMetadata?.metadata"
+      v-for="meta in (versionId ? getMetadataByVersionId(versionId) : getMetadataByObjectId(props.objectId))?.metadata"
       :key="meta.key + meta.value"
       :label="meta.key"
       :value="meta.value"
@@ -107,14 +102,12 @@ const closeModal = () => {
     </Button>
   </div>
 
-  <!-- eslint-disable vue/no-v-model-argument -->
   <Dialog
     v-model:visible="editing"
     :draggable="false"
     :modal="true"
     class="bcbox-info-dialog"
   >
-    <!-- eslint-enable vue/no-v-model-argument -->
     <template #header>
       <font-awesome-icon
         icon="fa-solid fa-pen-to-square"
diff --git a/frontend/src/components/object/ObjectTag.vue b/frontend/src/components/object/ObjectTag.vue
index 35b44e43..83f89b7e 100644
--- a/frontend/src/components/object/ObjectTag.vue
+++ b/frontend/src/components/object/ObjectTag.vue
@@ -9,23 +9,17 @@ import { Permissions } from '@/utils/constants';
 
 import type { Ref } from 'vue';
 import type { ObjectMetadataTagFormType } from '@/components/object/ObjectMetadataTagForm.vue';
-import type { Tagging } from '@/types';
 
 // Props
 type Props = {
   editable?: boolean;
   objectId: string;
-  versionId?: string;
 };
 
 const props = withDefaults(defineProps<Props>(), {
-  editable: true,
-  versionId: undefined
+  editable: true
 });
 
-// Emits
-const emit = defineEmits(['on-file-uploaded']);
-
 // Store
 const objectStore = useObjectStore();
 const tagStore = useTagStore();
@@ -37,9 +31,7 @@ const { getTaggingByObjectId } = storeToRefs(tagStore);
 
 // State
 const obj = computed(() => objectStore.getObject(props.objectId));
-const objectTagging: Ref<Tagging | undefined> = computed(() => {
-  return props.versionId ? getTaggingByVersionId.value(props.versionId) : getTaggingByObjectId.value(props.objectId);
-});
+const versionId = defineModel<string>('versionId');
 const editing: Ref<boolean> = ref(false);
 const formData: Ref<ObjectMetadataTagFormType> = ref({
   filename: ''
@@ -48,17 +40,20 @@ const formData: Ref<ObjectMetadataTagFormType> = ref({
 // Actions
 const showModal = () => {
   formData.value.filename = obj.value?.name ?? '';
-  formData.value.tagset = objectTagging.value?.tagset;
+  formData.value.tagset = (
+    versionId.value ? getTaggingByVersionId.value(versionId.value) : getTaggingByObjectId.value(props.objectId)
+  )?.tagset;
+
   editing.value = true;
 };
 
 const submitModal = async (values: ObjectMetadataTagFormType) => {
   if (values.tagset) {
-    await tagStore.replaceTagging(props.objectId, values.tagset, props.versionId);
+    await tagStore.replaceTagging(props.objectId, values.tagset, versionId.value);
   } else {
-    await tagStore.deleteTagging(props.objectId, [], props.versionId);
+    await tagStore.deleteTagging(props.objectId, [], versionId.value);
   }
-  emit('on-file-uploaded');
+  await versionStore.fetchTagging({ versionId: versionId.value as string });
   closeModal();
 };
 
@@ -73,7 +68,7 @@ const closeModal = () => {
       <h2>Tags</h2>
     </div>
     <div
-      v-for="tag in objectTagging?.tagset"
+      v-for="tag in (versionId ? getTaggingByVersionId(versionId) : getTaggingByObjectId(props.objectId))?.tagset"
       :key="tag.key + tag.value"
     >
       <div class="grid">
diff --git a/frontend/src/components/object/ObjectVersion.vue b/frontend/src/components/object/ObjectVersion.vue
index 33cb17ba..457e5c17 100644
--- a/frontend/src/components/object/ObjectVersion.vue
+++ b/frontend/src/components/object/ObjectVersion.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
 import { watch, computed } from 'vue';
-import { useRouter } from 'vue-router';
 
 import { DeleteObjectButton, DownloadObjectButton } from '@/components/object';
 import { Button, Column, DataTable } from '@/lib/primevue';
@@ -21,14 +20,12 @@ type VersionDataSource = {
 type Props = {
   bucketId: string;
   objectId: string;
-  versionId?: string;
 };
 
-const props = withDefaults(defineProps<Props>(), {
-  versionId: undefined
-});
+const props = withDefaults(defineProps<Props>(), {});
 
-const router = useRouter();
+// Emits
+const emit = defineEmits(['on-deleted-success']);
 
 // Store
 const permissionStore = usePermissionStore();
@@ -37,9 +34,10 @@ const versionStore = useVersionStore();
 // getters
 const { getUserId } = storeToRefs(useAuthStore());
 const { getUser } = storeToRefs(userStore);
-const { getLatestVersionIdByObjectId, getVersionsByObjectId } = storeToRefs(versionStore);
+const { getVersionsByObjectId } = storeToRefs(versionStore);
 
 // State
+const versionId = defineModel<string>('versionId');
 const versions: Ref<Array<Version>> = computed((): any => getVersionsByObjectId.value(props.objectId));
 const tableData: Ref<Array<VersionDataSource>> = computed(() => {
   return versions.value.map((v: Version, index, arr) => ({
@@ -50,27 +48,14 @@ const tableData: Ref<Array<VersionDataSource>> = computed(() => {
 });
 
 // Highlight row for currently selected version
-const rowClass = (data: any) => [{ 'selected-row': data.id === props.versionId }];
+const rowClass = (data: any) => [{ 'selected-row': data.id === versionId.value }];
 
-async function onDeletedSuccess(versionId: string) {
-  await versionStore.fetchVersions({ objectId: props.objectId });
-  // Navigate to new latest version if deleting active version
-  if (props.versionId === versionId) {
-    router.push({
-      name: RouteNames.DETAIL_OBJECTS,
-      query: {
-        objectId: props.objectId,
-        versionId: getLatestVersionIdByObjectId.value(props.objectId)
-      }
-    });
-  }
+async function onDeletedSuccess() {
+  emit('on-deleted-success');
 }
 
-const rowClick = function (e: any) {
-  router.push({
-    name: RouteNames.DETAIL_OBJECTS,
-    query: { objectId: e.data.objectId, versionId: e.data.id }
-  });
+const onVersionClick = (e: any) => {
+  versionId.value = e.data.id;
 };
 
 watch(props, async () => {
@@ -95,7 +80,7 @@ watch(props, async () => {
         paginator-template="RowsPerPageDropdown CurrentPageReport PrevPageLink NextPageLink "
         current-page-report-template="{first}-{last} of {totalRecords}"
         :rows-per-page-options="[5, 10, 20]"
-        @row-click="rowClick($event)"
+        @row-click="onVersionClick"
       >
         <template #empty>
           <div
@@ -157,26 +142,12 @@ watch(props, async () => {
               :ids="[props.objectId]"
               :version-id="data.id"
             />
-            <router-link
-              v-if="
-                data.public ||
-                permissionStore.isObjectActionAllowed(
-                  props.objectId,
-                  getUserId,
-                  Permissions.READ,
-                  props.bucketId as string
-                )
-              "
-              :to="{ name: RouteNames.DETAIL_OBJECTS, query: { objectId: props.objectId, versionId: data.id } }"
-              class="action-link"
+            <Button
+              v-tooltip.bottom="'Version details'"
+              class="p-button-lg p-button-rounded p-button-text"
             >
-              <Button
-                v-tooltip.bottom="'Version details'"
-                class="p-button-lg p-button-rounded p-button-text"
-              >
-                <font-awesome-icon icon="fa-solid fa-circle-info" />
-              </Button>
-            </router-link>
+              <font-awesome-icon icon="fa-solid fa-circle-info" />
+            </Button>
             <DeleteObjectButton
               v-if="
                 permissionStore.isObjectActionAllowed(
diff --git a/frontend/src/store/versionStore.ts b/frontend/src/store/versionStore.ts
index 1bcd1a62..43456459 100644
--- a/frontend/src/store/versionStore.ts
+++ b/frontend/src/store/versionStore.ts
@@ -58,15 +58,15 @@ export const useVersionStore = defineStore('version', () => {
     try {
       appStore.beginIndeterminateLoading();
 
-      const response = (await versionService.getMetadata(null, params)).data;
-
-      // Remove old values matching search parameters
-      const matches = (x: Metadata) => !params.versionId || params.versionId === x.versionId;
-
-      const [, difference] = partition(state.metadata.value, matches);
-
-      // Merge and assign
-      state.metadata.value = difference.concat(response);
+      if (params.objectId) {
+        state.metadata.value = [];
+        const versions = getters.getVersionsByObjectId.value(params.objectId);
+        state.metadata.value = (
+          await versionService.getMetadata(null, { versionId: versions.map(({ id }) => id) })
+        ).data;
+      } else {
+        state.metadata.value = (await versionService.getMetadata(null, params)).data;
+      }
     } catch (error: any) {
       toast.error('Fetching metadata', error);
     } finally {
@@ -77,17 +77,12 @@ export const useVersionStore = defineStore('version', () => {
   async function fetchTagging(params: GetVersionTaggingOptions) {
     try {
       appStore.beginIndeterminateLoading();
-
-      const response = (await versionService.getObjectTagging(params)).data;
-
-      // Remove old values matching search parameters
-      const matches = (x: Tagging) => !params.versionId || params.versionId === x.versionId;
-
-      const [, difference] = partition(state.tagging.value, matches);
-
-      // Merge and assign
-      state.tagging.value = difference.concat(response);
-      // NOTE: seems to be adding duplicates
+      if (params.objectId) {
+        const versions = getters.getVersionsByObjectId.value(params.objectId);
+        state.tagging.value = (await versionService.getObjectTagging({ versionId: versions.map(({ id }) => id) })).data;
+      } else {
+        state.tagging.value = (await versionService.getObjectTagging(params)).data;
+      }
     } catch (error: any) {
       toast.error('Fetching tags', error);
     } finally {
@@ -98,16 +93,7 @@ export const useVersionStore = defineStore('version', () => {
   async function fetchVersions(params: GetVersionOptions) {
     try {
       appStore.beginIndeterminateLoading();
-
-      const response = (await objectService.listObjectVersion(params.objectId)).data;
-
-      // Remove old values matching search parameters
-      const matches = (x: Version) => !params.objectId || x.objectId === params.objectId;
-
-      const [, difference] = partition(state.versions.value, matches);
-
-      // Merge and assign
-      state.versions.value = difference.concat(response);
+      state.versions.value = (await objectService.listObjectVersion(params.objectId)).data;
     } catch (error: any) {
       toast.error('Fetching versions', error);
     } finally {
diff --git a/frontend/src/types/options/GetVersionMetadataOptions.ts b/frontend/src/types/options/GetVersionMetadataOptions.ts
index e1cfd91f..986ed03b 100644
--- a/frontend/src/types/options/GetVersionMetadataOptions.ts
+++ b/frontend/src/types/options/GetVersionMetadataOptions.ts
@@ -1,3 +1,4 @@
 export type GetVersionMetadataOptions = {
-  versionId: string;
+  objectId?: string;
+  versionId?: string | string[];
 };
diff --git a/frontend/src/types/options/GetVersionTaggingOptions.ts b/frontend/src/types/options/GetVersionTaggingOptions.ts
index 17d4be68..8981e749 100644
--- a/frontend/src/types/options/GetVersionTaggingOptions.ts
+++ b/frontend/src/types/options/GetVersionTaggingOptions.ts
@@ -1,3 +1,4 @@
 export type GetVersionTaggingOptions = {
-  versionId: string;
+  objectId?: string;
+  versionId?: string | string[];
 };
diff --git a/frontend/src/views/detail/DetailObjectsView.vue b/frontend/src/views/detail/DetailObjectsView.vue
index a9360287..f4199943 100644
--- a/frontend/src/views/detail/DetailObjectsView.vue
+++ b/frontend/src/views/detail/DetailObjectsView.vue
@@ -1,6 +1,12 @@
 <script setup lang="ts">
+import { computed, onBeforeMount, ref } from 'vue';
+import { storeToRefs } from 'pinia';
+
 import { RequirePublicOrAuth } from '@/components/guards';
 import { ObjectFileDetails } from '@/components/object';
+import { useVersionStore } from '@/store';
+
+import type { Ref } from 'vue';
 
 // Props
 type Props = {
@@ -11,14 +17,32 @@ type Props = {
 const props = withDefaults(defineProps<Props>(), {
   versionId: undefined
 });
+
+// Store
+const versionStore = useVersionStore();
+const { getLatestVersionIdByObjectId } = storeToRefs(versionStore);
+
+// State
+const versionId: Ref<string | undefined> = ref(props.versionId);
+
+onBeforeMount(async () => {
+  // Always load version data
+  if (props.objectId) {
+    await versionStore.fetchVersions({ objectId: props.objectId });
+
+    if (!versionId.value) {
+      versionId.value = getLatestVersionIdByObjectId.value(props.objectId);
+    }
+  }
+});
 </script>
 
 <template>
   <RequirePublicOrAuth :object-id="props.objectId">
     <ObjectFileDetails
-      v-if="props.objectId"
+      v-if="props.objectId && versionId"
       :object-id="props.objectId"
-      :version-id="props.versionId"
+      :version-id="versionId"
     />
     <div v-else>
       <h3 class="font-bold">No object or version provided</h3>