Resolve "Add checkbox for public buckets"

Closes #111 (closed)

src/components/object-storage/BucketListItem.vue

@@ -5,8 +5,8 @@ import FontAwesomeIcon from "@/components/FontAwesomeIcon.vue";
 import PermissionModal from "@/components/object-storage/modals/PermissionModal.vue";
 import BucketDetailModal from "@/components/object-storage/modals/BucketDetailModal.vue";
 import dayjs from "dayjs";
-import { computed, onMounted, ref } from "vue";
-import { Tooltip } from "bootstrap";
+import { computed, onMounted, reactive, ref } from "vue";
+import { Toast, Tooltip } from "bootstrap";
 import { useBucketStore } from "@/stores/buckets";
 import { useRouter } from "vue-router";
 import { useAuthStore } from "@/stores/users";
@@ -15,6 +15,7 @@ import { useNameStore } from "@/stores/names";
 import { environment } from "@/environment";
 import { useS3ObjectStore } from "@/stores/s3objects";
 import { filesize } from "filesize";
+import BootstrapToast from "@/components/BootstrapToast.vue";
 
 const props = defineProps<{
   active: boolean;
@@ -32,6 +33,17 @@ const bucketRepository = useBucketStore();
 const objectRepository = useS3ObjectStore();
 const router = useRouter();
 
+let successToast: Toast | null;
+let errorToast: Toast | null;
+
+const requestState = reactive<{
+  error: string;
+  loading: boolean;
+}>({
+  error: "",
+  loading: false,
+});
+
 const permission = computed<BucketPermissionOut | undefined>(
   () => permissionRepository.ownPermissions[props.bucket.name],
 );
@@ -56,12 +68,21 @@ function permissionDeleted() {
 }
 
 function toggleBucketPublicState() {
+  requestState.loading = true;
   bucketRepository
     .togglePublicState(props.bucket.name, !props.bucket.public)
-    .catch(() => {
+    .then(() => {
+      successToast?.show();
+    })
+    .catch((err) => {
+      requestState.error = err.toString();
       if (publicCheckbox.value) {
         publicCheckbox.value.checked = props.bucket.public;
       }
+      errorToast?.show();
+    })
+    .finally(() => {
+      requestState.loading = false;
     });
 }
 
@@ -70,11 +91,28 @@ onMounted(() => {
     new Tooltip("#tooltip-" + randomIDSuffix);
     new Tooltip("#ownBucketIcon-" + randomIDSuffix);
     new Tooltip("#sharedBucketIcon-" + randomIDSuffix);
+    successToast = new Toast("#success-public-bucket-" + randomIDSuffix);
+    errorToast = new Toast("#error-public-bucket-" + randomIDSuffix);
   }
 });
 </script>
 
 <template>
+  <bootstrap-toast
+    :toast-id="'success-public-bucket-' + randomIDSuffix"
+    v-if="!loading"
+  >
+    Bucket {{ bucket.name }} is now {{ bucket.public ? "public" : "private" }}
+  </bootstrap-toast>
+  <bootstrap-toast
+    :toast-id="'error-public-bucket-' + randomIDSuffix"
+    color-class="danger"
+    v-if="!loading"
+  >
+    Error making the bucket {{ bucket.name }}
+    {{ !bucket.public ? "public" : "private" }}:<br />
+    {{ requestState.error }}
+  </bootstrap-toast>
   <permission-modal
     v-if="permission != undefined && props.active"
     :modalId="'view-permission-modal' + randomIDSuffix"
@@ -236,30 +274,35 @@ onMounted(() => {
             </tr>
             <tr v-if="bucket.owner_constraint == undefined">
               <th scope="row">
-                <label
-                  :for="'public-checkbox-' + randomIDSuffix"
-                  class="fw-bold"
-                >
-                  Public</label
+                <div
+                  :class="{ 'form-check': !loading && permission == undefined }"
                 >
+                  <input
+                    v-if="!loading && permission == undefined"
+                    ref="publicCheckbox"
+                    class="form-check-input"
+                    type="checkbox"
+                    :disabled="requestState.loading"
+                    :checked="bucket.public"
+                    :id="'public-checkbox-' + randomIDSuffix"
+                    @change="toggleBucketPublicState"
+                  />
+                  <label
+                    :for="'public-checkbox-' + randomIDSuffix"
+                    class="fw-bold"
+                  >
+                    Public</label
+                  >
+                </div>
               </th>
               <td>
-                <input
-                  ref="publicCheckbox"
-                  class="form-check-input"
-                  :disabled="loading || permission != undefined"
-                  type="checkbox"
-                  :checked="bucket.public"
-                  :id="'public-checkbox-' + randomIDSuffix"
-                  @change="toggleBucketPublicState"
-                />
                 <a
-                  class="ms-4"
                   v-if="bucket.public"
                   target="_blank"
                   :href="environment.S3_URL + '/' + bucket.name"
-                  >Show</a
+                  >Link</a
                 >
+                <span v-else>Disabled</span>
               </td>
             </tr>
           </tbody>