Merge pull request #173 from SolidLabResearch/172-query-search

Templated queries variables selection made easier with filters

Author: axellorreyne

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+- Templated queries variables selection made easier with filters (#172).
+
 ## [1.4.1] - 2024-10-16
 
 ### Fixed

main/src/components/InteractionLayout/SelectionMenu/SelectionMenu.jsx

@@ -28,7 +28,7 @@ const SelectionMenu = () => {
   useEffect(() => {
     const handleGroupChange = (newConfig) => {
       setConfig(newConfig);
-      
+
       // Open the cstm group when a new custom query is created
       if(newConfig.queryGroups.find(group => group.id === 'cstm')){
         setOpenGroups(prevOpenGroups => ({

main/src/components/ListResultTable/TemplatedQueryForm.jsx

@@ -1,12 +1,12 @@
-import {Toolbar, SaveButton, SelectInput, SimpleForm, required, useResourceDefinition} from "react-admin";
+import {AutocompleteInput, required, SaveButton, SimpleForm, Toolbar, useResourceDefinition} from "react-admin";
 import DoneIcon from '@mui/icons-material/Done';
 import {Component, useEffect} from "react";
 import PropTypes from "prop-types";
 import CustomQueryEditButton from "../CustomQueryEditor/customQueryEditButton";
 
 const MyToolbar = () => (
   <Toolbar>
-    <SaveButton icon={<DoneIcon />} label="Query"/>
+    <SaveButton icon={<DoneIcon/>} label="Query"/>
   </Toolbar>
 );
 
@@ -26,21 +26,29 @@ const TemplatedQueryForm = (props) => {
   const resourceDef = useResourceDefinition();
 
   useEffect(() => {
-    if (submitted){
+    if (submitted) {
       onSubmit(searchPar);
     }
   }, [submitted])
-  
+
   return (
-    <SimpleForm toolbar={<MyToolbar />} onSubmit={onSubmit}>
-       {!!resourceDef.options && resourceDef.options.queryGroupId === 'cstm' && <CustomQueryEditButton queryID={resourceDef.name}/>}
+    <SimpleForm toolbar={<MyToolbar/>} onSubmit={onSubmit}>
+      {!!resourceDef.options && resourceDef.options.queryGroupId === 'cstm' &&
+        <CustomQueryEditButton queryID={resourceDef.name}/>}
       {Object.entries(variableOptions).map(([name, options]) => (
-        <SelectInput key={name} source={name} name={name} label={name} validate={required()} choices={
-          options.map((option) => ({
-            id: option,
-            name: option
-          }))
-        }/>
+        <AutocompleteInput
+          key={name}
+          source={name}
+          name={name}
+          label={name}
+          validate={required()}
+          fullWidth={true}
+          choices={
+            options.map((option) => ({
+              id: option,
+              name: option
+            }))}
+        />
       ))}
     </SimpleForm>
   );