From 40e7e60560bff7924840787741aafba66bf88b02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20G=C3=B6bel?= <dgoebel@techfak.uni-bielefeld.de>
Date: Thu, 29 Dec 2022 19:01:48 +0100
Subject: [PATCH] Improve UI in various cases and add changes in CHANGELOG.md
#29
---
CHANGELOG.md | 9 ++++++++
src/components/BucketView.vue | 29 ++++++++++++++++++++----
src/views/object-storage/BucketsView.vue | 14 ++++++++++++
3 files changed, 48 insertions(+), 4 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index e69de29..a552260 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -0,0 +1,9 @@
+## Version 1.0.1
+
+### General
+* Improved UI when browsing a non-existing bucket or a bucket without permissions for
+* Improved UI when not browsing a bucket
+### Fixes
+* Show correct number of visible objects when searching for objects #28
+### Internal
+* Use a central repository for the buckets and current user permissions to simplify complex interactions between components #29
diff --git a/src/components/BucketView.vue b/src/components/BucketView.vue
index f176536..aeff991 100644
--- a/src/components/BucketView.vue
+++ b/src/components/BucketView.vue
@@ -687,12 +687,33 @@ watch(
<!-- Body -->
<div class="pt-3">
<!-- If bucket not found -->
- <div v-if="objectState.bucketNotFoundError">
- <p>Bucket not found</p>
+ <div v-if="objectState.bucketNotFoundError" class="text-center fs-2 mt-5">
+ <bootstrap-icon
+ icon="search"
+ class="mb-3"
+ :width="64"
+ :height="64"
+ style="color: var(--bs-secondary)"
+ fill="currentColor"
+ />
+ <p>
+ Bucket <i>{{ props.bucketName }}</i> not found
+ </p>
</div>
<!-- If no permission for bucket -->
- <div v-else-if="objectState.bucketPermissionError">
- <p>No permission for this bucket</p>
+ <div
+ v-else-if="objectState.bucketPermissionError"
+ class="text-center fs-2 mt-5"
+ >
+ <bootstrap-icon
+ icon="folder-x"
+ class="mb-3"
+ :width="64"
+ :height="64"
+ style="color: var(--bs-secondary)"
+ fill="currentColor"
+ />
+ <p>You don't have permission for this bucket</p>
</div>
<!-- Show content of bucket -->
<div v-else>
diff --git a/src/views/object-storage/BucketsView.vue b/src/views/object-storage/BucketsView.vue
index 082a51b..ce195dc 100644
--- a/src/views/object-storage/BucketsView.vue
+++ b/src/views/object-storage/BucketsView.vue
@@ -154,6 +154,20 @@ onMounted(() => {
</div>
<div class="col-9">
<router-view></router-view>
+ <div
+ v-if="router.currentRoute.value.name === 'buckets'"
+ class="text-center fs-2 mt-5"
+ >
+ <bootstrap-icon
+ icon="hand-index-thumb-fill"
+ class="mb-5"
+ :width="64"
+ :height="64"
+ style="color: var(--bs-secondary)"
+ fill="currentColor"
+ />
+ <p>Click on a bucket to browse its content</p>
+ </div>
</div>
</div>
</template>
--
GitLab