From 4f013fc5d65e96a7b45926c6a0ad3870c28e1b1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20G=C3=B6bel?= <dgoebel@techfak.uni-bielefeld.de>
Date: Fri, 18 Nov 2022 14:25:58 +0100
Subject: [PATCH] Remove trim function from v-model to allow input validation
of bucket
#7
---
src/components/Modals/BucketDetailModal.vue | 2 +-
src/components/Modals/CreateBucketModal.vue | 8 +++++---
src/views/object-storage/BucketsView.vue | 3 +++
3 files changed, 9 insertions(+), 4 deletions(-)
diff --git a/src/components/Modals/BucketDetailModal.vue b/src/components/Modals/BucketDetailModal.vue
index 31b7184..6d0a510 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 e173a4b..2e9dec8 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 93d000e..572e517 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) {
--
GitLab