Add addition filter features

frontend/components/Search/AdvancedSearch/AdditionalFilter.js

@@ -9,40 +9,59 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTimesCircle } from '@fortawesome/free-solid-svg-icons';
 
 export default function AdditionalFilter(properties) {
-  const [selectedPredicate, setSelectedPredicate] = useState();
-  const [selectedValue, setSelectedValue] = useState();
-  const [hidden, setHidden] = useState(false);
+  const [selectedPredicate, setSelectedPredicate] = useState("");
+  const [selectedValue, setSelectedValue] = useState("");
 
   useEffect(() => {
     const newFilters = [...properties.extraFilters];
     newFilters[properties.index] = {
       filter: selectedPredicate,
-      value: selectedPredicate ? selectedValue : undefined
+      value: selectedPredicate ? selectedValue : "",
     };
-    properties.setExtraFilters(newFilters);
-  }, [selectedPredicate, selectedValue, properties.index]);
 
-  if (hidden) return null;
+    if(newFilters[properties.index].filter != '')
+      properties.setExtraFilters(newFilters);
+  }, [selectedPredicate, selectedValue]);
+
+  useEffect(() => {
+    if (properties.index < properties.extraFilters.length) {
+      const currentFilter = properties.extraFilters[properties.index];
+      setSelectedPredicate(currentFilter.filter || "");
+      setSelectedValue(currentFilter.value || "");
+    } else {
+      // Reset local state if this filter no longer exists
+      setSelectedPredicate("");
+      setSelectedValue("");
+    }
+  }, [properties.extraFilters.length, properties.index]);
 
   return (
     <div className={styles.inputsection}>
-      <SelectLoader
-        result={properties.predicates}
-        placeholder="Select filter type..."
-        parseResult={result => {
-          return {
-            value: result.predicate.value,
-            label: shortName(result.predicate.value)
-          };
-        }}
-        onChange={option => {
-          setSelectedPredicate(option ? option.label : undefined);
-        }}
-      />
-      {selectedPredicate && (
-        <SelectLoader
+      {<div className={styles.labelsection}>
+        <span>{shortName(properties.extraFilters[properties.index].filter)}</span>
+      </div>}
+      {<div className={styles.inputsection2}>
+        <div className={styles.containerLeft}>
+        {!properties.extraFilters[properties.index].filter && 
+        (<SelectLoader 
+          result={properties.predicates}
+          placeholder="Select filter type..."
+          parseResult={result => {
+            return {
+              value: result.predicate.value,
+              label: shortName(result.predicate.value)
+            };
+          }}
+          onChange={option => {
+            setSelectedPredicate(option ? option.label : "");
+          }}
+          />
+        )}
+      {properties.extraFilters[properties.index].filter && 
+        (<SelectLoader
+          placeholder={shortName(properties.extraFilters[properties.index].value)}//{selectedValue}
           sparql={configureQuery(searchObject, {
-            predicate: selectedPredicate
+            predicate: properties.extraFilters[properties.index].filter //selectedPredicate
           })}
           parseResult={result => {
             return {
@@ -51,28 +70,25 @@ export default function AdditionalFilter(properties) {
             };
           }}
           onChange={option => {
-            setSelectedValue(option ? option.value : undefined);
+            setSelectedValue(option ? option.value : "");
           }}
         />
       )}
-      <div
-        style={{
-          padding: '0.6rem 0.5rem 0.6rem 0.7rem',
-          marginLeft: '0.3rem',
-          cursor: 'pointer'
-        }}
-        onClick={() => {
-          const newFilters = [...properties.extraFilters];
-          newFilters[properties.index] = {
-            filter: selectedPredicate,
-            value: undefined
-          };
-          properties.setExtraFilters(newFilters);
-          setHidden(true);
-        }}
-      >
-        <FontAwesomeIcon icon={faTimesCircle} size="1x" color="red" />
-      </div>
+        </div>
+        <div className={styles.containerRight}>
+          <div
+          style={{
+            padding: '0.6rem 0.5rem 0.1rem 0.5rem',
+            cursor: 'pointer'
+          }}
+          onClick={() => { 
+            properties.handleDelete(properties.index); 
+          }}
+        >
+          <FontAwesomeIcon icon={faTimesCircle} size="1x" color="red" />
+          </div>
+        </div>
+      </div>}
     </div>
   );
 }

frontend/components/Search/AdvancedSearch/Options.js

@@ -36,10 +36,11 @@ export default function Options(properties) {
     return (
       <AdditionalFilter
         predicates={predicates}
-        key={index}
+        key={element.filter + element.value}
         index={index}
         extraFilters={properties.extraFilters}
         setExtraFilters={properties.setExtraFilters}
+        handleDelete={properties.handleDelete}
       />
     );
   });
@@ -118,20 +119,22 @@ export default function Options(properties) {
           <span>Select Collections</span>
         </div>
         <SelectLoader
+          className={styles.optionselectW}
           sparql={getCollections}
-          placeholder="Select Collections..."
+          placeholder={properties.collections.map(collection => collection.label)}//"Select Collections..."
           isMulti={true}
           parseResult={result => {
             return !result.name
               ? { value: result.subject.value, label: result.displayId.value }
               : { value: result.subject.value, label: result.name.value };
           }}
-          onChange={collections => properties.setCollections(collections)}
+          onChange={collections => properties.setCollections(collections)
+          }
         />
       </div>
-      <div className={styles.inputsection}>
+      {/*<div className={styles.inputsection}>
 
-      </div>
+        </div>*/}
 
       {/* <div className={styles.calendarinputsection}>
         <label>Created Between</label>
@@ -158,7 +161,7 @@ export default function Options(properties) {
         className={styles.newfilterbutton}
         role="button"
         onClick={() =>
-          properties.setExtraFilters(addFilter(properties.extraFilters))
+          properties.setExtraFilters(properties.addFilter(properties.extraFilters))
         }
       >
         <div className={styles.addfiltericon}>
@@ -170,15 +173,7 @@ export default function Options(properties) {
   );
 }
 
-const addFilter = filters => {
-  return [
-    ...filters,
-    {
-      filter: undefined,
-      value: undefined
-    }
-  ];
-};
+
 
 const loadPredicates = async (setPredicates, dispatch) => {
   const results = await fetchPredicates(dispatch);

frontend/components/Search/StandardSearch/ResultTable/ResultTable.js

@@ -53,7 +53,7 @@ export default function ResultTable(properties) {
     />
   ));
   if (properties.data.length === 0) {
-    return <div className={styles.resultcontainer}>No results found</div>;
+    return <div className={styles.tablecontainer2}>No results found</div>;
   }
   return (
     <div className={styles.resultcontainer}>
@@ -65,8 +65,6 @@ export default function ResultTable(properties) {
         count={properties.count}
         submissionsPage={properties.submissionsPage}
       />
-
-      <div className={styles.tablecontainer}>
         <table className={styles.table} id={styles.results}>
           <thead>
             <tr>
@@ -99,6 +97,5 @@ export default function ResultTable(properties) {
           <tbody>{rows}</tbody>
         </table>
       </div>
-    </div>
   );
 }

frontend/components/Search/StandardSearch/StandardSearch.js

@@ -24,6 +24,7 @@ import {
 import viewStyles from '../../../styles/view.module.css';
 import advStyles from '../../../styles/advancedsearch.module.css';
 import ResultTable from './ResultTable/ResultTable';
+import { filter } from 'jszip';
 
 /**
  * This component handles a basic 'string search' from users on sbh,
@@ -91,6 +92,23 @@ export default function StandardSearch() {
     )}${constructExtraFilters()}`;
     setUrl(url);
   };
+
+  const handleDelete = (delFilterIndex) => { 
+    setExtraFilters(prevFilters => { 
+      return prevFilters.filter((_, index) => index !== delFilterIndex); 
+    }); 
+  }; 
+
+
+  const addFilter = filters => {
+    return [
+      ...filters,
+      {
+        filter: '',
+        value: ''
+      }
+    ];
+  };
 
   const constructExtraFilters = () => {
     let url = '';
@@ -137,7 +155,7 @@ export default function StandardSearch() {
     } else {
       setCount(newCount);
     }
-  }, [isCountLoading, isCountError, query]);
+  }, [isCountLoading, isCountError, query, extraFilters]);
 
   // get search results
   const { results, isLoading, isError } = useSearchResults(
@@ -158,11 +176,9 @@ if (isError) {
   }
   if (isLoading) {
     return (
-      <div className={standardcontainer}>
         <div className={standardresultsloading}>
           <Loader color="#D25627" type="ThreeDots" />
         </div>
-      </div>
     );
   }
   for (const result of results) {
@@ -225,6 +241,9 @@ if (isError) {
 
               extraFilters={extraFilters}
               setExtraFilters={setExtraFilters}
+
+              addFilter={addFilter}
+              handleDelete={handleDelete}
             />
             <div
               className={advStyles.searchbutton}
@@ -255,7 +274,6 @@ if (isError) {
   </div>
   );
 }
-
 const useSearchResults = (query, url, offset, limit, token, dispatch) => {
   query = url + query;
   const { data, error } = useSWR(

frontend/styles/advancedsearch.module.css

@@ -9,6 +9,28 @@
 
 }
 
+.inputsection2 {
+   display: flex;
+   flex-direction: row;
+   justify-content: space-between;
+   align-items: left;
+   padding: 0.4rem 0.5rem;
+   box-shadow: 0px 0px 5px #c5c5c5;
+   border-radius: 0.4rem;
+   margin: 0.4rem 0;
+   font-size: 0.9rem;
+   min-height: 45px;
+   min-width: 250px;
+}
+
+.containerLeft {
+   width: 90%;
+}
+
+.containerRight {
+   width: 10%;
+}
+
 .calendarinputsection {
    display: flex;
    flex-direction: column;
@@ -81,6 +103,12 @@
    font-size: 0.8rem;
 }
 
+.optionselectW {
+   width: 100%;
+   flex-direction: row;
+   font-size: 0.8rem;
+}
+
 /**STANDARD SEARCH CSS**/
 .standardcontainer {
    width: 100%;

frontend/styles/resulttable.module.css

@@ -2,14 +2,20 @@
    min-width: 100%;
    margin-top: 0.3rem;
    font-size: 0.9rem;
+   padding: 0 0rem 0 1.7rem;
 }
 
 .tablecontainer {
    display: flex;
    width: 100%;
-   overflow: scroll;
    max-height: calc(100vh - 11rem);
-   padding: 0 1rem 0 1rem;
+   padding: 0 1rem 0 1.7rem;
+}
+
+.tablecontainer2 {
+   width: 100%;
+   height: calc(100vh - 9rem);
+   padding: 0 1rem 0 1.7rem;
 }
 
 .table {
@@ -63,7 +69,6 @@
    justify-content: space-between;
    padding: 0 1rem 0 1rem;
    max-width: 100vw;
-   overflow: scroll;
 }
 
 .rightspace {

frontend/styles/standardsearch.module.css

@@ -15,7 +15,6 @@
    width: 100%;
    align-items: center;
    max-height: calc(100vh - 10rem);
-   overflow-y: scroll;
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;

frontend/styles/view.module.css

@@ -2,7 +2,6 @@
   display: flex;
   padding: 0;
   margin: 0;
-  min-height: 100vh;
 }
 
 .emptySpace {
@@ -307,7 +306,6 @@
 
 .searchContent {
   margin: 0rem 0 0 0;
-  padding: 0 1rem;
   width: 100%;
   overflow: scroll;
 }