Merge branch 'bugfix/7-bucket-description-input-validation' into 'development'

Resolve "Bucket description input validation"

Closes #7

See merge request denbi/object-storage-access-ui!20

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>

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">

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) {