refactor: defineModel

frontend/src/components/bucket/BucketList.vue

@@ -16,14 +16,17 @@ const { getUserId } = storeToRefs(useAuthStore());
 const { getConfig } = storeToRefs(useConfigStore());
 
 // State
-const sidebarInfo: Ref<Bucket | undefined> = ref(undefined);
+const sidebarInfo: Ref<string | undefined> = ref(undefined);
 const displayBucketConfig: Ref<boolean> = ref(false);
 const bucketConfigTitle: Ref<string> = ref(BucketConfig.TITLE_NEW_BUCKET);
 const bucketToUpdate: Ref<Bucket | undefined> = ref(undefined);
 
+// const dataId = defineModel('dataId', { type: String });
+// const dataId: Ref<string | undefined> = ref(undefined);
+
 // Actions
-const showSidebarInfo = async (bucketId: string) => {
-  sidebarInfo.value = bucketStore.findBucketById(bucketId);
+const showSidebarInfo = (bucketId: string) => {
+  sidebarInfo.value = bucketId;
 };
 
 const closeSidebarInfo = () => {
@@ -117,6 +120,7 @@ onMounted(async () => {
   </div>
   <div class="flex">
     <div class="flex-grow-1">
+      <!-- v-model:dataId="dataId"-->
       <BucketTable
         @show-sidebar-info="showSidebarInfo"
         @show-bucket-config="showBucketConfig"
@@ -127,8 +131,8 @@ onMounted(async () => {
       class="flex-shrink-0 w-4 pl-4 max-w-28rem"
     >
       <BucketSidebar
-        :sidebar-info="sidebarInfo"
         @close-sidebar-info="closeSidebarInfo"
+        v-model:bucketId="sidebarInfo"
       />
     </div>
   </div>

frontend/src/components/bucket/BucketSidebar.vue

@@ -1,67 +1,54 @@
 <script setup lang="ts">
-import { storeToRefs } from 'pinia';
 import { onBeforeMount, ref, watch } from 'vue';
 
 import { Button } from '@/lib/primevue';
-import { usePermissionStore, useUserStore } from '@/store';
+import { usePermissionStore, useBucketStore } from '@/store';
 import { Permissions } from '@/utils/constants';
 
 import type { Ref } from 'vue';
-import type { Bucket, BucketPermission } from '@/types';
-
-// Props
-type Props = {
-  sidebarInfo: Bucket;
-};
-
-const props = withDefaults(defineProps<Props>(), {});
+import type { Bucket } from '@/types';
 
+// access bucketId from parent
+const bucketId = defineModel('bucketId', { type: String });
 // Emits
 const emit = defineEmits(['close-sidebar-info']);
 
 // Store
+const bucketStore = useBucketStore();
 const permissionStore = usePermissionStore();
-const userStore = useUserStore();
-
-const { getBucketPermissions } = storeToRefs(permissionStore);
 
 // State
+const sidebarInfo: Ref<Bucket | undefined> = ref(undefined);
 const managedBy: Ref<string | undefined> = ref();
 
 // Actions
 const closeSidebarInfo = async () => {
   emit('close-sidebar-info');
 };
 
-async function load() {
-  await permissionStore.fetchBucketPermissions({
-    bucketId: props.sidebarInfo.bucketId
-  });
-
-  const uniqueIds = [
-    ...new Set(
-      getBucketPermissions.value
-        .filter((x: BucketPermission) => x.bucketId === props.sidebarInfo.bucketId && x.permCode === Permissions.MANAGE)
-        .map((x: BucketPermission) => x.userId)
-    )
-  ];
-
-  if (uniqueIds.length) {
-    await userStore.fetchUsers({ userId: uniqueIds });
-    managedBy.value = userStore
-      .findUsersById(uniqueIds)
-      .map((x) => x.fullName)
-      .join(', ');
-  }
-}
-
+// required because sidebar component is mounted ater prop is first sent.
 onBeforeMount(() => {
-  load();
+  load(bucketId.value);
 });
 
-watch(props, () => {
-  load();
+watch(bucketId, () => {
+  load(bucketId.value);
 });
+
+async function load(bucketId: string) {
+  // get bucket details
+  sidebarInfo.value = bucketStore.findBucketById(bucketId);
+  // get 'managed by' users
+  await permissionStore.fetchBucketPermissions({
+    bucketId: bucketId,
+    permCode: Permissions.MANAGE
+  });
+  await permissionStore.mapBucketToUserPermissions(bucketId);
+  managedBy.value = permissionStore.getMappedBucketToUserPermissions
+    .filter((mapped) => mapped.bucketId === bucketId && mapped.manage)
+    .map((o) => o.fullName)
+    .join(', ');
+}
 </script>
 
 <template>
@@ -84,13 +71,13 @@ watch(props, () => {
       <div class="grid overflow-hidden">
         <div class="col-fixed">Bucket Name:</div>
         <div class="col wrap-block">
-          {{ props.sidebarInfo?.bucketName }}
+          {{ sidebarInfo?.bucketName }}
         </div>
       </div>
       <div class="grid">
         <div class="col-fixed">Bucket ID:</div>
         <div class="col">
-          {{ props.sidebarInfo?.bucketId }}
+          {{ sidebarInfo?.bucketId }}
         </div>
       </div>
     </div>

frontend/src/components/bucket/BucketTable.vue

@@ -35,8 +35,13 @@ const bucketTreeNodeMap = new Map<string, BucketTreeNode>();
 const confirm = useConfirm();
 const endpointMap = new Map<string, Array<Bucket>>();
 
-const showSidebarInfo = async (id: number) => {
+// access bucketId from parent
+// const dataId = defineModel('dataId', { type: String });
+// const dataId: Ref<string | undefined> = ref(undefined);
+
+const showSidebarInfo = (id: string) => {
   emit('show-sidebar-info', id);
+  // dataId.value = id;
 };
 
 const showBucketConfig = async (bucket: Bucket) => {

frontend/src/components/object/ObjectList.vue

@@ -57,24 +57,6 @@ const showUpload = () => {
 const closeUpload = () => {
   displayUpload.value = false;
 };
-
-// const updateBreadcrumb = async () => {
-//   try {
-//     const bucket = await bucketStore.getBucketInfo(props.bucketId as string);
-//     navStore.replace('__listObjectsDynamic', bucket?.bucketName ?? 'Unknown bucket');
-//   } catch (error: any) {
-//     toast.add({ severity: 'error', summary: 'Unable to load bucket information.', detail: error, life: 5000 });
-//   }
-// };
-
-onMounted(async () => {
-  // Removed for now
-  // updateBreadcrumb();
-
-  await bucketStore.fetchBuckets({ userId: getUserId.value, objectPerms: true });
-  // TODO: userId+bucketPerms bringing back deleted files??
-  await objectStore.fetchObjects({ bucketId: props.bucketId, userId: getUserId.value, bucketPerms: true });
-});
 </script>
 
 <template>

frontend/src/components/object/ObjectProperties.vue

@@ -13,12 +13,12 @@ import type { Bucket, COMSObject, Metadata } from '@/types';
 // Props
 type Props = {
   objectId: string;
-  versionId?: string;
+  // versionId?: string;
   fullView: boolean;
 };
 
 const props = withDefaults(defineProps<Props>(), {
-  versionId: undefined
+  // versionId: undefined
 });
 
 // Store
@@ -38,11 +38,12 @@ const updatedBy: Ref<string | undefined> = ref(undefined);
 // Actions
 async function load() {
   object.value = objectStore.findObjectById(props.objectId);
-  await bucketStore.fetchBuckets({ bucketId: object.value?.bucketId });
-  bucket.value = bucketStore.findBucketById(object.value?.bucketId as string);
 
   if (props.fullView) {
-    objectMetadata.value = metadataStore.findMetadataByObjectId(object.value?.id as string);
+    // to get bucket name
+    await bucketStore.fetchBuckets({ bucketId: object.value?.bucketId });
+    bucket.value = bucketStore.findBucketById(object.value?.bucketId as string);
+
     await userStore.fetchUsers({ userId: [object.value?.createdBy, object.value?.updatedBy] });
     createdBy.value = getUserSearch.value.find((x) => x.userId === object.value?.createdBy)?.fullName;
     updatedBy.value = getUserSearch.value.find((x) => x.userId === object.value?.updatedBy)?.fullName;

frontend/src/components/object/ObjectSidebar.vue

@@ -28,11 +28,10 @@ const closeObjectInfo = async () => {
   emit('close-object-info');
 };
 
-const obj = objectStore.findObjectById(props.objectId);
-
 watch(
   props,
   () => {
+    const obj = objectStore.findObjectById(props.objectId);
     if (
       obj &&
       (obj.public || permissionStore.isObjectActionAllowed(obj.id, getUserId.value, Permissions.READ, obj.bucketId))