display error message in collection options in vSelect

Fix all-select checkbox
datalab-org · Sep 26, 2024 · ccb8f17 · ccb8f17
1 parent dffd7b5
commit ccb8f17
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 26 deletions.
diff --git a/webapp/src/components/CollectionSelect.vue b/webapp/src/components/CollectionSelect.vue
@@ -9,7 +9,8 @@
     @search="debouncedAsyncSearch"
   >
     <template #no-options="{ searching }">
-      <span v-if="searching"> Collection already selected </span>
+      <span v-if="validationMessage" class="form-error">{{ validationMessage }}</span>
+      <span v-else-if="searching"> Collection already selected </span>
       <span v-else class="empty-search"> Search for a collection... </span>
     </template>
     <template #option="{ collection_id, title }">
@@ -80,7 +81,8 @@ export default {
       if (
         this.searchQuery &&
         !this.collections.some((item) => item.collection_id === this.searchQuery) &&
-        !valueSafe.some((item) => item.collection_id === this.searchQuery)
+        !valueSafe.some((item) => item.collection_id === this.searchQuery) &&
+        !this.IDValidationMessage()
       ) {
         return [
           ...this.collections,
@@ -92,6 +94,9 @@ export default {
       }
       return this.collections;
     },
+    validationMessage() {
+      return this.IDValidationMessage();
+    },
   },
   methods: {
     async debouncedAsyncSearch(query, loading) {
@@ -121,23 +126,47 @@ export default {
         loading(false);
       }, debounceTime);
     },
+    IDValidationMessage() {
+      if (this.searchQuery && !/^[a-zA-Z0-9_-]+$/.test(this.searchQuery)) {
+        return "ID can only contain alphanumeric characters, dashes ('-'), and underscores ('_').";
+      }
+      if ((this.searchQuery && this.searchQuery.length < 1) || this.searchQuery.length > 40) {
+        return "ID must be between 1 and 40 characters.";
+      }
+      return "";
+    },
     async handleCreateNewCollection() {
-      try {
-        let collection_id = this.searchQuery;
-        const newCollection = await createNewCollection(this.searchQuery);
-        if (newCollection) {
-          this.value = [
-            ...this.value.filter((item) => item.collection_id !== null),
-            {
-              collection_id: collection_id,
-            },
-          ];
+      if (this.IDValidationMessage()) {
+        return;
+      } else {
+        try {
+          let collection_id = this.searchQuery;
+          const newCollection = await createNewCollection(this.searchQuery);
+          if (newCollection) {
+            this.value = [
+              ...this.value.filter((item) => item.collection_id !== null),
+              {
+                collection_id: collection_id,
+              },
+            ];
+          }
+        } catch (error) {
+          console.error("Error:", error);
+          alert("An error occurred while creating the collection. Please try again.");
         }
-      } catch (error) {
-        console.error("Error:", error);
-        alert("An error occurred while creating the collection. Please try again.");
       }
     },
   },
 };
 </script>
+
+<style scoped>
+.form-error {
+  color: red;
+}
+
+:deep(.form-error a) {
+  color: #820000;
+  font-weight: 600;
+}
+</style>
diff --git a/webapp/src/components/DynamicDataTable.vue b/webapp/src/components/DynamicDataTable.vue
@@ -189,7 +189,7 @@ export default {
       allowedTypes: INVENTORY_TABLE_TYPES,
       allSelected: false,
       page: 0,
-      rows: 20,
+      rows: 5,
     };
   },
   computed: {
@@ -206,12 +206,6 @@ export default {
       return this.itemsSelected.length === this.data.length;
     },
   },
-  watch: {
-    itemsSelected(newSelection) {
-      console.log("Selected items:", newSelection);
-      console.log("Selected items:", newSelection.length);
-    },
-  },
   created() {
     this.editable_inventory = EDITABLE_INVENTORY;
   },
@@ -287,11 +281,16 @@ export default {
       if (event.checked) {
         this.allSelected = event.checked;
         const newItems = this.data.slice(this.page * this.rows, (this.page + 1) * this.rows);
-        this.itemsSelected.push(...newItems);
+        newItems.forEach((item) => {
+          if (!this.itemsSelected.includes(item)) {
+            this.itemsSelected.push(item);
+          }
+        });
       } else {
-        const itemsToRemove = this.data.slice(this.page * this.rows, (this.page + 1) * this.rows);
-        this.itemsSelected = this.itemsSelected.filter((item) => !itemsToRemove.includes(item));
         this.allSelected = event.checked;
+        const itemsToRemove = this.data.slice(this.page * this.rows, (this.page + 1) * this.rows);
+        const idsToRemove = new Set(itemsToRemove.map((item) => item.item_id));
+        this.itemsSelected = this.itemsSelected.filter((item) => !idsToRemove.has(item.item_id));
       }
     },
     deleteSelectedItems() {
@@ -303,7 +302,10 @@ export default {
     onPageChange(event) {
       this.page = event.page;
       this.rows = event.rows;
-      this.allSelected = false;
+      const currentItems = this.data.slice(this.page * this.rows, (this.page + 1) * this.rows);
+      this.allSelected = currentItems.every((currentItem) =>
+        this.itemsSelected.some((selectedItem) => selectedItem.item_id === currentItem.item_id),
+      );
     },
   },
 };