Update object sidebar based on prop

bcgov · Feb 13, 2024 · 4419fa0 · 4419fa0
1 parent e65b7c7
commit 4419fa0
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 47 deletions.
diff --git a/frontend/src/components/bucket/BucketList.vue b/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>

diff --git a/frontend/src/components/bucket/BucketSidebar.vue b/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>

diff --git a/frontend/src/components/bucket/BucketTable.vue b/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) => {

diff --git a/frontend/src/components/object/ObjectSidebar.vue b/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))