Resolve "UI improvements"

Closes #67 (closed)

src/components/object-storage/BucketListItem.vue

@@ -13,6 +13,7 @@ import { computed, onMounted } from "vue";
 import { Tooltip } from "bootstrap";
 import { useBucketStore } from "@/stores/buckets";
 import { useRouter } from "vue-router";
+import { useAuthStore } from "@/stores/users";
 
 const props = defineProps<{
   active: boolean;
@@ -23,6 +24,7 @@ const props = defineProps<{
 
 const randomIDSuffix = Math.random().toString(16).substring(2, 8);
 const permissionRepository = useBucketStore();
+const userRepository = useAuthStore();
 const router = useRouter();
 
 const permission = computed<BucketPermissionOut | undefined>(
@@ -41,6 +43,8 @@ function permissionDeleted(perm: BucketPermissionIn) {
 onMounted(() => {
   if (!props.loading) {
     new Tooltip("#tooltip-" + randomIDSuffix);
+    new Tooltip("#ownBucketIcon-" + randomIDSuffix);
+    new Tooltip("#sharedBucketIcon-" + randomIDSuffix);
   }
 });
 </script>
@@ -86,8 +90,44 @@ onMounted(() => {
           params: { bucketName: bucket.name, subFolders: [] },
         }"
       >
-        <span class="text-truncate" style="width: 80%">{{ bucket.name }}</span>
-        <div>
+        <span class="text-truncate flex-grow-3">
+          <template v-if="bucket.owner_constraint === 'READ'"
+            >Upload Bucket</template
+          >
+          <template v-else-if="bucket.owner_constraint === 'WRITE'"
+            >Download Bucket</template
+          >
+          <template v-else>{{ bucket.name }}</template>
+        </span>
+        <div class="text-nowrap">
+          <font-awesome-icon
+            :hidden="bucket.owner !== userRepository.currentUID"
+            :id="'ownBucketIcon-' + randomIDSuffix"
+            icon="fa-solid fa-user"
+            :class="{
+              'me-2':
+                props.active ||
+                permission ||
+                (
+                  permissionRepository.bucketPermissionsMapping[bucket.name] ??
+                  []
+                ).length > 0,
+            }"
+            data-bs-toogle="tooltip"
+            data-bs-title="Own Bucket"
+          />
+          <font-awesome-icon
+            :hidden="
+              !permission &&
+              (permissionRepository.bucketPermissionsMapping[bucket.name] ?? [])
+                .length === 0
+            "
+            :id="'sharedBucketIcon-' + randomIDSuffix"
+            icon="fa-solid fa-users"
+            :class="{ 'me-2': props.active }"
+            data-bs-toogle="tooltip"
+            data-bs-title="Shared Bucket"
+          />
           <font-awesome-icon
             v-if="props.active && !permission && props.deletable"
             icon="fa-solid fa-trash"
@@ -111,7 +151,7 @@ onMounted(() => {
         <table class="table table-sm table-borderless mb-0">
           <tbody>
             <tr v-if="permission">
-              <th scope="row" class="fw-bold">Permission</th>
+              <th scope="row" class="fw-bold">Permission:</th>
               <td>
                 <a
                   href="#"
@@ -121,6 +161,30 @@ onMounted(() => {
                 >
               </td>
             </tr>
+            <tr v-if="permission">
+              <th scope="row" class="fw-bold">Owner:</th>
+              <td class="text-truncate">
+                {{ userRepository.userMapping[bucket.owner] }}
+              </td>
+            </tr>
+            <tr
+              v-if="
+                (
+                  permissionRepository.bucketPermissionsMapping[bucket.name] ??
+                  []
+                ).length > 0
+              "
+            >
+              <th scope="row" class="fw-bold">Permissions:</th>
+              <td>
+                <a
+                  href="#"
+                  data-bs-toggle="modal"
+                  data-bs-target="#permission-list-modal"
+                  >View</a
+                >
+              </td>
+            </tr>
             <tr>
               <th scope="row" class="fw-bold">Created:</th>
               <td>
@@ -156,12 +220,15 @@ onMounted(() => {
 .delete-icon {
   color: white;
 }
+
 .delete-icon:hover {
   color: var(--bs-danger) !important;
 }
+
 .info-icon {
   color: white;
 }
+
 .info-icon:hover {
   color: var(--bs-info) !important;
 }