From ef5ddfa4b5aaa9c29fa934f0030e5111873f21b6 Mon Sep 17 00:00:00 2001
From: Benjamin CHARMES <benjamin.charmes@gmail.com>
Date: Mon, 23 Sep 2024 16:14:32 +0100
Subject: [PATCH] Filter symbol green when filter is on

---
 pydatalab/pydatalab/routes/v0_1/items.py   | 12 +++++----
 webapp/src/components/CollectionSelect.vue |  8 +++---
 webapp/src/components/CollectionTable.vue  |  2 +-
 webapp/src/components/DynamicDataTable.vue | 31 +++++++++++++++++++---
 4 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/pydatalab/pydatalab/routes/v0_1/items.py b/pydatalab/pydatalab/routes/v0_1/items.py
index ad1890bdc..81d1e8983 100644
--- a/pydatalab/pydatalab/routes/v0_1/items.py
+++ b/pydatalab/pydatalab/routes/v0_1/items.py
@@ -129,6 +129,7 @@ def get_starting_materials():
                         "date": 1,
                         "chemform": 1,
                         "name": 1,
+                        "type": 1,
                         "chemical_purity": 1,
                         "supplier": 1,
                         "location": 1,
@@ -300,7 +301,8 @@ def search_items():
     nresults = request.args.get("nresults", default=100, type=int)
     types = request.args.get("types", default=None)
     if isinstance(types, str):
-        types = types.split(",")  # should figure out how to parse as list automatically
+        # should figure out how to parse as list automatically
+        types = types.split(",")
 
     match_obj = {
         "$text": {"$search": query},
@@ -428,10 +430,10 @@ def _create_sample(
         raise RuntimeError("Invalid type")
     model = ITEM_MODELS[type_]
 
-    ## the following code was used previously to explicitely check schema properties.
-    ## it doesn't seem to be necessary now, with extra = "ignore" turned on in the pydantic models,
-    ## and it breaks in instances where the models use aliases (e.g., in the starting_material model)
-    ## so we are taking it out now, but leaving this comment in case it needs to be reverted.
+    # the following code was used previously to explicitely check schema properties.
+    # it doesn't seem to be necessary now, with extra = "ignore" turned on in the pydantic models,
+    # and it breaks in instances where the models use aliases (e.g., in the starting_material model)
+    # so we are taking it out now, but leaving this comment in case it needs to be reverted.
     # schema = model.schema()
     # new_sample = {k: sample_dict[k] for k in schema["properties"] if k in sample_dict}
     new_sample = sample_dict
diff --git a/webapp/src/components/CollectionSelect.vue b/webapp/src/components/CollectionSelect.vue
index b3038eb53..2e3341d7e 100644
--- a/webapp/src/components/CollectionSelect.vue
+++ b/webapp/src/components/CollectionSelect.vue
@@ -9,7 +9,7 @@
     @search="debouncedAsyncSearch"
   >
     <template #no-options="{ searching }">
-      <span v-if="searching"> Sorry, no matches found. </span>
+      <span v-if="searching"> Collection already selected </span>
       <span v-else class="empty-search"> Search for a collection... </span>
     </template>
     <template #option="{ collection_id, title }">
@@ -20,7 +20,7 @@
         enable-modified-click
         :max-length="formattedItemNameMaxLength"
       />
-      <div v-else @click.prevent="handleCreateNewCollection">
+      <div v-else @click="handleCreateNewCollection">
         {{ title }}
       </div>
     </template>
@@ -77,7 +77,8 @@ export default {
     collectionOrNewCollection() {
       if (
         this.searchQuery &&
-        !this.collections.some((item) => item.collection_id === this.searchQuery)
+        !this.collections.some((item) => item.collection_id === this.searchQuery) &&
+        !this.value.some((item) => item.collection_id === this.searchQuery)
       ) {
         return [
           ...this.collections,
@@ -130,7 +131,6 @@ export default {
             },
           ];
         }
-        await this.debouncedAsyncSearch(this.searchQuery, () => {});
       } catch (error) {
         console.error("Error:", error);
         alert("An error occurred while creating the collection. Please try again.");
diff --git a/webapp/src/components/CollectionTable.vue b/webapp/src/components/CollectionTable.vue
index 0e4583b42..aa588e2db 100644
--- a/webapp/src/components/CollectionTable.vue
+++ b/webapp/src/components/CollectionTable.vue
@@ -16,7 +16,7 @@ export default {
   data() {
     return {
       collectionColumn: [
-        { field: "collection_id", header: "ID", body: "FormattedItemName", filter: true },
+        { field: "collection_id", header: "ID", body: "FormattedCollectionName", filter: true },
         { field: "title", header: "Title" },
         { field: "creators", header: "Creators", body: "Creators" },
       ],
diff --git a/webapp/src/components/DynamicDataTable.vue b/webapp/src/components/DynamicDataTable.vue
index e193188f9..6b726c259 100644
--- a/webapp/src/components/DynamicDataTable.vue
+++ b/webapp/src/components/DynamicDataTable.vue
@@ -7,9 +7,9 @@
     <DataTable
       v-model:filters="filters"
       v-model:selection="itemsSelected"
-      selection-mode="multiple"
       :value="data"
       :data-testid="computedDataTestId"
+      selection-mode="multiple"
       paginator
       :rows="20"
       :rows-per-page-options="[10, 20, 50, 100]"
@@ -47,6 +47,7 @@
         :field="column.field"
         :header="column.header"
         sortable
+        :class="{ 'filter-active': isFilterActive(column.field) }"
       >
         <!-- <template v-if="column.field === 'item_id'" #body="slotProps">
           <component
@@ -110,6 +111,7 @@ import AddToCollectionModal from "@/components/AddToCollectionModal";
 import { INVENTORY_TABLE_TYPES, EDITABLE_INVENTORY } from "@/resources.js";
 
 import FormattedItemName from "@/components/FormattedItemName";
+import FormattedCollectionName from "@/components/FormattedCollectionName";
 import ChemicalFormula from "@/components/ChemicalFormula";
 import CollectionList from "@/components/CollectionList";
 import Creators from "@/components/Creators";
@@ -132,6 +134,7 @@ export default {
     Column,
     InputText,
     FormattedItemName,
+    FormattedCollectionName,
     ChemicalFormula,
     CollectionList,
     Creators,
@@ -193,10 +196,14 @@ export default {
       return dataTestIdMap[this.dataType] || "default-table";
     },
   },
+  watch: {
+    itemsSelected(newSelection) {
+      console.log("Selected items:", newSelection);
+    },
+  },
   created() {
     this.editable_inventory = EDITABLE_INVENTORY;
   },
-
   methods: {
     goToEditPage(event) {
       const { item_id, collection_id } = event.data;
@@ -210,10 +217,14 @@ export default {
     getComponentProps(componentName, data) {
       const propsConfig = {
         FormattedItemName: {
-          item_id: data.item_id !== undefined ? "item_id" : "collection_id",
+          item_id: "item_id",
           itemType: "type",
           enableModifiedClick: true,
         },
+        FormattedCollectionName: {
+          collection_id: "collection_id",
+          enableModifiedClick: true,
+        },
         ChemicalFormula: {
           formula: "chemform",
         },
@@ -246,6 +257,13 @@ export default {
 
       return props;
     },
+    isFilterActive(field) {
+      const filter = this.filters[field];
+      if (filter && filter.constraints) {
+        return filter.constraints.some((constraint) => constraint.value);
+      }
+      return false;
+    },
     deleteSelectedItems() {
       this.itemsSelected = [];
     },
@@ -286,4 +304,11 @@ export default {
 .button-right {
   gap: 0.5em;
 }
+
+.p-datatable-header-cell.filter-active svg {
+  color: #10b981;
+}
+.p-datatable-header-cell.filter-active {
+  color: #047857;
+}
 </style>