diff --git a/src/components/Modals/BucketDetailModal.vue b/src/components/Modals/BucketDetailModal.vue index 31b71847312d9c51eb8963a5b2a9ebd9e4be7bd6..6d0a510569ffc513611629ca89d29855436dba90 100644 --- a/src/components/Modals/BucketDetailModal.vue +++ b/src/components/Modals/BucketDetailModal.vue @@ -48,7 +48,7 @@ const props = defineProps<{ </tr> <tr> <th scope="row">Description</th> - <td>{{ props.bucket.description }}</td> + <td class="text-break">{{ props.bucket.description }}</td> </tr> </tbody> </table> diff --git a/src/components/Modals/CreateBucketModal.vue b/src/components/Modals/CreateBucketModal.vue index e173a4b39e6b9ac43c2dabc368c4aaf14c9270c0..2e9dec8d66ebca90909dbf14bc5d66e0ff40848d 100644 --- a/src/components/Modals/CreateBucketModal.vue +++ b/src/components/Modals/CreateBucketModal.vue @@ -34,6 +34,8 @@ function createBucket() { // eslint-disable-next-line @typescript-eslint/no-non-null-assertion const form = document.getElementById("bucketCreateForm")! as HTMLFormElement; formState.bucketNameTaken = false; + bucket.description = bucket.description.trim(); + bucket.name = bucket.name.trim(); if (form.checkValidity()) { formState.loading = true; BucketService.bucketCreateBucket(bucket) @@ -94,7 +96,7 @@ function modalClosed() { minlength="3" maxlength="63" pattern="(?!(^((2(5[0-5]|[0-4]\d)|[01]?\d{1,2})\.){3}(2(5[0-5]|[0-4]\d)|[01]?\d{1,2})$))^[a-z\d][a-z\d.-]{1,61}[a-z\d]$" - v-model.trim="bucket.name" + v-model="bucket.name" /> <div class="invalid-feedback"> Requirements @@ -109,7 +111,7 @@ function modalClosed() { </div> <div class="mb-3"> <label for="bucketDescriptionInput" class="form-label"> - Description + Description {{ bucket.description.length }} / 126 </label> <div class="input-group"> <textarea @@ -119,7 +121,7 @@ function modalClosed() { rows="5" minlength="126" maxlength="65536" - v-model.trim="bucket.description" + v-model="bucket.description" placeholder="Describe the purpose of the bucket" ></textarea> <div class="invalid-feedback"> diff --git a/src/views/object-storage/BucketsView.vue b/src/views/object-storage/BucketsView.vue index 93d000e5becfa021b9fa7d1e25071ddcf3366932..572e517740c4dfed915e2292e95ee9ecc22907d3 100644 --- a/src/views/object-storage/BucketsView.vue +++ b/src/views/object-storage/BucketsView.vue @@ -74,6 +74,9 @@ const filteredBuckets: ComputedRef<BucketOut[]> = computed(() => { function addBucket(bucket: BucketOut) { bucketsState.buckets.push(bucket); + bucketsState.buckets.sort((bucketA, bucketB) => + bucketA.name >= bucketB.name ? 1 : -1 + ); } function deleteBucket(bucketName: string) {