Emit new VersionId to objectDetailView

Instead of pushing versionId to route, emit the versionId to parent component update object store from child component if required
bcgov · Feb 16, 2024 · ca71604 · ca71604
1 parent b7b227d
commit ca71604
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 28 deletions.
diff --git a/frontend/src/components/object/ObjectFileDetails.vue b/frontend/src/components/object/ObjectFileDetails.vue
@@ -85,23 +85,21 @@ async function onDeletedSuccess(versionId: string) {
   }
 }
 
-async function onFileUploaded() {
-  await Promise.all([
-    objectStore.fetchObjects({ objectId: props.objectId, userId: getUserId.value, bucketPerms: true }),
-    versionStore.fetchVersions({ objectId: props.objectId })
-  ]);
+// Emits (can be replaced with defineModel() macro)
+const emit = defineEmits(['on-upload-new-version']);
 
-  // Obtaining the version id and passing it to the route forces a destruct/construct of the component
-  // Easier approach than attempting to in-place refresh all the data
-  router.push({
-    name: RouteNames.DETAIL_OBJECTS,
-    query: {
-      objectId: props.objectId,
-      versionId: versionStore.findLatestVersionIdByObjectId(props.objectId)
-    }
-  });
+async function onFileUploaded(vId: string) {
+  // emit the new versionId to parent view and it should trigger watch on prop.versionId in this component
+  emit('on-upload-new-version', vId);
 }
 
+// we could subscibe to store actions invoked from other components
+// objectStore.$onAction(({ name, args }) => {
+//   if (name === 'fetchObjects') {
+//     console.log('fetchObjects called', args);
+//   }
+// });
+
 onBeforeMount(async () => {
   if (props.objectId) {
     const head = await objectStore.headObject(props.objectId);

diff --git a/frontend/src/components/object/ObjectProperties.vue b/frontend/src/components/object/ObjectProperties.vue
@@ -11,15 +11,11 @@ import type { Ref } from 'vue';
 import type { Bucket, COMSObject, Metadata } from '@/types';
 
 // Props
-type Props = {
+const props = defineProps<{
   objectId: string;
   versionId?: string;
   fullView: boolean;
-};
-
-const props = withDefaults(defineProps<Props>(), {
-  versionId: undefined
-});
+}>();
 
 // Store
 const bucketStore = useBucketStore();
@@ -52,10 +48,6 @@ async function load() {
 onMounted(() => {
   load();
 });
-
-watch(props, () => {
-  load();
-});
 </script>
 
 <template>

diff --git a/frontend/src/components/object/ObjectUploadBasic.vue b/frontend/src/components/object/ObjectUploadBasic.vue
@@ -74,7 +74,7 @@ const onUpload = async () => {
       toast.info('File upload starting...');
       appStore.beginUploading();
 
-      await objectStore.updateObject(
+      const response = await objectStore.updateObject(
         props.objectId,
         file.value,
         { metadata: objectMetadata },
@@ -85,7 +85,11 @@ const onUpload = async () => {
       // No finally block as we need this called before potential navigation
       appStore.endUploading();
 
-      emit('on-file-uploaded');
+      // update object in store which other components will react to
+      await objectStore.fetchObjects({ objectId: props.objectId });
+      // emit new versionId to parent component
+
+      emit('on-file-uploaded', response?.data.versionId);
       toast.success('File uploaded');
     }
   } catch (error: any) {

diff --git a/frontend/src/store/objectStore.ts b/frontend/src/store/objectStore.ts
@@ -239,8 +239,8 @@ export const useObjectStore = defineStore('object', () => {
           }
         }
       }
-
-      await objectService.updateObject(objectId, object, headers, params, axiosOptions);
+      // ok for an action to return a value
+      return await objectService.updateObject(objectId, object, headers, params, axiosOptions);
     } catch (error: any) {
       toast.error('Updating object', error);
     } finally {

diff --git a/frontend/src/views/detail/DetailObjectsView.vue b/frontend/src/views/detail/DetailObjectsView.vue
@@ -45,6 +45,7 @@ watch([props], () => {
       v-if="props.objectId"
       :object-id="props.objectId"
       :version-id="version"
+      @on-upload-new-version="(vId: string) => (version = vId)"
     />
     <div v-else>
       <h3>No object or version provided</h3>