Object Permissions

frontend/src/components/object/ObjectList.vue

@@ -9,6 +9,7 @@ import Button from 'primevue/button';
 import { useToast } from 'primevue/usetoast';
 // State
 import { storeToRefs } from 'pinia';
+import { useBucketStore } from '@/store';
 import { useObjectStore } from '@/store';
 // Components
 import DeleteObjectButton from './DeleteObjectButton.vue';
@@ -17,6 +18,7 @@ import ObjectSidebar from './ObjectSidebar.vue';
 import ObjectTable from './ObjectTable.vue';
 import ObjectUpload from './ObjectUpload.vue';
 
+const bucketStore = useBucketStore();
 const objectStore = useObjectStore();
 const { multiSelectedObjects } = storeToRefs(objectStore);
 const route = useRoute();
@@ -43,7 +45,10 @@ const closeUpload = () => {
 
 const listObjects = async () => {
   try {
-    await objectStore.listObjects({ bucketId: route.query.bucketId });
+    await Promise.all([
+      bucketStore.getBucketPermissionsForUser(route.query.bucketId?.toString() || ''),
+      objectStore.listObjects({ bucketId: route.query.bucketId })
+    ]);
   } catch (error: any) {
     toast.add({ severity: 'error', summary: 'Unable to load Objects.', detail: error, life: 5000 });
   }
@@ -108,6 +113,4 @@ onMounted(() => {
   </div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

frontend/src/components/object/ObjectPermission.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+// Vue
+import { onMounted } from 'vue';
+// PrimeVue etc
+import Button from 'primevue/button';
+import Checkbox from 'primevue/checkbox';
+import Column from 'primevue/column';
+import DataTable from 'primevue/datatable';
+import { useToaster } from '@/composables/useToaster';
+// State
+import { storeToRefs } from 'pinia';
+import { useObjectStore } from '@/store';
+// Other
+import { Permissions } from '@/utils/constants';
+
+
+const props = defineProps<{
+  objectId: string;
+}>();
+
+const objectStore = useObjectStore();
+const { loading, selectedObjectPermissions } = storeToRefs(useObjectStore());
+
+onMounted(() => {
+  fetchPermissions();
+});
+
+const fetchPermissions = () => {
+  useToaster(() => objectStore.getObjectPermissions(props.objectId), { summary: 'Unable to load permissions.' });
+};
+
+const updateObjectPermission = (value: any, userId: string, permCode: string) => {
+  if (value) {
+    objectStore.addObjectPermission(props.objectId, userId, permCode);
+  } else {
+    objectStore.deleteObjectPermission(props.objectId, userId, permCode);
+  }
+};
+
+const removeObjectUser = async (userId: string) => {
+  await objectStore.removeObjectUser(props.objectId, userId);
+  fetchPermissions();
+};
+</script>
+
+<template>
+  <div>
+    <DataTable
+      :loading="loading"
+      :value="selectedObjectPermissions"
+      data-key="userId"
+      class="p-datatable-sm"
+      striped-rows
+      responsive-layout="scroll"
+      :paginator="true"
+      :rows="10"
+      paginator-template="RowsPerPageDropdown CurrentPageReport PrevPageLink NextPageLink"
+      current-page-report-template="{first}-{last} of {totalRecords}"
+      :rows-per-page-options="[10, 20, 50]"
+    >
+      <template #empty>
+        <div class="flex justify-content-center">
+          <h3>There are no users associated with this object.</h3>
+        </div>
+      </template>
+      <Column
+        field="fullName"
+        header="Name"
+      />
+      <Column
+        header="Read"
+        body-class="content-center"
+      >
+        <template #body="{ data }">
+          <Checkbox
+            v-model="data.read"
+            input-id="read"
+            :binary="true"
+            @input="(value) => updateObjectPermission(value, data.userId, Permissions.READ)"
+          />
+        </template>
+      </Column>
+      <Column
+        header="Update"
+        body-class="content-center"
+      >
+        <template #body="{ data }">
+          <Checkbox
+            v-model="data.update"
+            input-id="update"
+            :binary="true"
+            @input="(value) => updateObjectPermission(value, data.userId, Permissions.UPDATE)"
+          />
+        </template>
+      </Column>
+      <Column
+        header="Delete"
+        body-class="content-center"
+      >
+        <template #body="{ data }">
+          <Checkbox
+            v-model="data.delete"
+            input-id="delete"
+            :binary="true"
+            @input="(value) => updateObjectPermission(value, data.userId, Permissions.DELETE)"
+          />
+        </template>
+      </Column>
+      <Column
+        header="Manage"
+        body-class="content-center"
+      >
+        <template #body="{ data }">
+          <Checkbox
+            v-model="data.manage"
+            input-id="manage"
+            :binary="true"
+            @input="(value) => updateObjectPermission(value, data.userId, Permissions.MANAGE)"
+          />
+        </template>
+      </Column>
+      <Column header="Remove">
+        <template #body="{ data }">
+          <Button
+            class="p-button-lg p-button-text"
+            style="color: red"
+            @click="removeObjectUser(data.userId)"
+          >
+            <font-awesome-icon icon="fa-solid fa-user-xmark" />
+          </Button>
+        </template>
+      </Column>
+    </DataTable>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.content-center) {
+  text-align: center !important;
+}
+
+:deep(.p-datatable-thead > tr > th) {
+  background-color: transparent;
+}
+
+:deep(.p-column-title) {
+  font-weight: bold;
+}
+
+:deep(.p-paginator) {
+  justify-content: right;
+}
+
+:deep(.header-right .p-column-header-content) {
+  justify-content: right;
+}
+
+:deep(.content-right) {
+  text-align: right !important;
+}
+
+:deep(.p-button.p-button-lg) {
+  padding: 0;
+  margin-left: 1rem;
+}
+
+:deep(.truncate) {
+  max-width: 1px;
+  white-space: nowrap;
+
+  > div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+</style>