Resolve "Add checkbox for public buckets"

Closes #111 (closed)

src/components/object-storage/BucketListItem.vue

@@ -5,14 +5,17 @@ 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 { filesize } from "filesize";
-import { computed, onMounted } 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";
 import type { FolderTree } from "@/types/PseudoFolder";
 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;
@@ -21,12 +24,26 @@ const props = defineProps<{
   deletable: boolean;
 }>();
 
+const publicCheckbox = ref<HTMLInputElement | undefined>(undefined);
 const randomIDSuffix = Math.random().toString(16).substring(2, 8);
 const permissionRepository = useBucketStore();
 const userRepository = useAuthStore();
 const nameRepository = useNameStore();
+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],
 );
@@ -38,6 +55,10 @@ const subFolder = computed<FolderTree>(() => {
   return { subFolders: subFolders, files: [] };
 });
 
+const bucketMeta = computed<[number, number]>(() =>
+  objectRepository.getMeta(props.bucket.name),
+);
+
 const emit = defineEmits<{
   (e: "delete-bucket", bucketName: string): void;
 }>();
@@ -46,16 +67,52 @@ function permissionDeleted() {
   router.push({ name: "buckets" });
 }
 
+function toggleBucketPublicState() {
+  requestState.loading = true;
+  bucketRepository
+    .togglePublicState(props.bucket.name, !props.bucket.public)
+    .then(() => {
+      successToast?.show();
+    })
+    .catch((err) => {
+      requestState.error = err.toString();
+      if (publicCheckbox.value) {
+        publicCheckbox.value.checked = props.bucket.public;
+      }
+      errorToast?.show();
+    })
+    .finally(() => {
+      requestState.loading = false;
+    });
+}
+
 onMounted(() => {
   if (!props.loading) {
     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"
@@ -207,12 +264,45 @@ onMounted(() => {
             </tr>
             <tr>
               <th scope="row" class="fw-bold">Objects:</th>
-              <td>{{ bucket.num_objects }}</td>
+              <td>{{ bucketMeta[0] }}</td>
             </tr>
             <tr>
               <th scope="row" class="fw-bold">Size:</th>
               <td>
-                {{ filesize(bucket.size, { base: 2, standard: "jedec" }) }}
+                {{ filesize(bucketMeta[1], { base: 2, standard: "jedec" }) }}
+              </td>
+            </tr>
+            <tr v-if="bucket.owner_constraint == undefined">
+              <th scope="row">
+                <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>
+                <a
+                  v-if="bucket.public"
+                  target="_blank"
+                  :href="environment.S3_URL + '/' + bucket.name"
+                  >Link</a
+                >
+                <span v-else>Disabled</span>
               </td>
             </tr>
           </tbody>