change encounter search schemas regarding new design

WildMeOrg · Jan 22, 2025 · 2b678d1 · 2b678d1
1 parent 00f0af7
commit 2b678d1
Show file tree

Hide file tree

Showing 12 changed files with 179 additions and 135 deletions.
diff --git a/frontend/src/components/FilterPanel.jsx b/frontend/src/components/FilterPanel.jsx
@@ -146,40 +146,48 @@ export default function FilterPanel({
             }}
           >
             {safeSchemas.map((schema, index) => {
-              return (
-                <div
-                  key={index}
-                  className={`d-flex justify-content-between align-items-center rounded-3 p-2 mt-2 ${clicked === schema.id ? "bg-white" : "text-white"} cursor-pointer`}
-                  style={{
-                    color:
-                      clicked === schema.id
-                        ? theme.primaryColors.primary700
-                        : "white",
-                    minHeight: "50px",
-                    cursor: "pointer",
-                  }}
-                  onClick={() => {
-                    setClicked(schema.id);
-                    handleClick(schema.id);
-                  }}
-                >
-                  <Text
-                    id={schema.labelId}
-                    className="m-3"
+              if (schema.FilterComponent) {
+                return (
+                  <div
+                    key={index}
+                    className={`d-flex justify-content-between ms-4 align-items-center rounded-3 p-2 ${clicked === schema.id ? "bg-white" : "text-white"} cursor-pointer`}
                     style={{
-                      fontWeight: "500",
-                      marginRight: "20px",
+                      color:
+                        clicked === schema.id
+                          ? theme.primaryColors.primary700
+                          : "white",
+                      minHeight: "50px",
+                      cursor: "pointer",
                     }}
-                  ></Text>
-                  <span>
-                    {" "}
-                    <i
-                      className="bi bi-chevron-right"
-                      style={{ fontSize: "14px" }}
-                    ></i>{" "}
-                  </span>
-                </div>
-              );
+                    onClick={() => {
+                      setClicked(schema.id);
+                      handleClick(schema.id);
+                    }}
+                  >
+                    <Text
+                      id={schema.labelId}
+                      className="m-3"
+                      style={{
+                        fontWeight: "500",
+                        marginRight: "20px",
+                      }}
+                    ></Text>
+                    <span>
+                      {" "}
+                      <i
+                        className="bi bi-chevron-right"
+                        style={{ fontSize: "14px" }}
+                      ></i>{" "}
+                    </span>
+                  </div>
+                );
+              } else {
+                return (
+                  <div className="mt-2 mb-2" key={index}>
+                    {schema.id}
+                  </div>
+                );
+              }
             })}
             <div className="mt-2 d-flex flex-wrap justify-content-center align-items-center w-100 gap-3">
               <BrutalismButton
@@ -259,17 +267,23 @@ export default function FilterPanel({
                   key={index}
                   ref={schemaRefs.current[index]}
                 >
-                  <schema.FilterComponent
-                    key={schema.id}
-                    labelId={schema.labelId}
-                    onChange={handleFilterChange}
-                    onClearFilter={clearFilter}
-                    {...schema.filterComponentProps}
-                    data={data}
-                    tempFormFilters={tempFormFilters}
-                    setFormFilters={setFormFilters}
-                    formFilters={formFilters}
-                  />
+                  {schema.FilterComponent ? (
+                    <schema.FilterComponent
+                      key={schema.id}
+                      labelId={schema.labelId}
+                      onChange={handleFilterChange}
+                      onClearFilter={clearFilter}
+                      {...schema.filterComponentProps}
+                      data={data}
+                      tempFormFilters={tempFormFilters}
+                      setFormFilters={setFormFilters}
+                      formFilters={formFilters}
+                    />
+                  ) : (
+                    <div>
+                      <h2>{schema.id}</h2>
+                    </div>
+                  )}
                 </div>
               );
             })}

diff --git a/frontend/src/components/filterFields/ApplyQueryFilter.jsx b/frontend/src/components/filterFields/ApplyQueryFilter.jsx
@@ -10,9 +10,9 @@ export default function ApplyQueryFilter() {
   const [queryId, setQueryId] = React.useState("");
   return (
     <div>
-      <h3>
+      <h4>
         <FormattedMessage id="APPLY_SEARCH_ID" />
-      </h3>
+      </h4>
       {/* <Description>
                 <FormattedMessage id="FILTER_METADATA_DESC" />
             </Description> */}

diff --git a/frontend/src/components/filterFields/BiologicalSamplesAndAnalysesFilter.jsx b/frontend/src/components/filterFields/BiologicalSamplesAndAnalysesFilter.jsx
@@ -111,9 +111,9 @@ export default function BiologicalSamplesAndAnalysesFilter({ onChange, data }) {
 
   return (
     <div>
-      <h3>
+      <h4>
         <FormattedMessage id="FILTER_BIOLOGICAL_SAMPLE" />
-      </h3>
+      </h4>
       <Description>
         <FormattedMessage id="FILTER_BIOLOGICAL_SAMPLE_DESC" />
       </Description>

diff --git a/frontend/src/components/filterFields/DateFilter.jsx b/frontend/src/components/filterFields/DateFilter.jsx
@@ -86,9 +86,9 @@ export default function DateFilter({ onChange, data }) {
 
   return (
     <div>
-      <h3>
+      <h4>
         <FormattedMessage id="FILTER_DATE" />
-      </h3>
+      </h4>
       <Description>
         <FormattedMessage id="FILTER_DATE_DESC" />
       </Description>

diff --git a/frontend/src/components/filterFields/IdentityFilter.jsx b/frontend/src/components/filterFields/IdentityFilter.jsx
@@ -15,9 +15,9 @@ export default function IdentityFilter({ onChange }) {
 
   return (
     <div>
-      <h3>
+      <h4>
         <FormattedMessage id="FILTER_IDENTITY" />
-      </h3>
+      </h4>
       <Description>
         <FormattedMessage id="FILTER_IDENTITY_DESC" />
       </Description>

diff --git a/frontend/src/components/filterFields/ImageLabelFilter.jsx b/frontend/src/components/filterFields/ImageLabelFilter.jsx
@@ -58,9 +58,9 @@ export default function ImageLabelFilter({ data, onChange }) {
 
   return (
     <div>
-      <h3>
+      <h4>
         <FormattedMessage id="FILTER_IMAGE_LABEL" />
-      </h3>
+      </h4>
       <Description>
         <FormattedMessage id="FILTER_IMAGE_LABEL_DESC" />
       </Description>

diff --git a/frontend/src/components/filterFields/LocationFilterMap.jsx b/frontend/src/components/filterFields/LocationFilterMap.jsx
@@ -74,9 +74,9 @@ export default function LocationFilterMap({ onChange, data }) {
 
   return (
     <div>
-      <h3>
+      <h4>
         <FormattedMessage id="FILTER_LOCATION" />
-      </h3>
+      </h4>
       <Description>
         <FormattedMessage id="FILTER_LOCATION_DESC" />
       </Description>

diff --git a/frontend/src/components/filterFields/MetadataFilter.jsx b/frontend/src/components/filterFields/MetadataFilter.jsx
@@ -1,52 +1,54 @@
-
 import React from "react";
 import Description from "../Form/Description";
 import { FormattedMessage } from "react-intl";
 import FormGroupMultiSelect from "../Form/FormGroupMultiSelect";
 import FormGroupText from "../Form/FormGroupText";
 
-
 export default function MetadataFilter({
   data,
   onChange,
   setFormFilters,
-  formFilters
+  formFilters,
 }) {
-  const encounterStatusOptions = data?.encounterState?.map((item) => {
-    return {
-      value: item,
-      label: item
-    };
-  }
-  ) || [];
+  const encounterStatusOptions =
+    data?.encounterState?.map((item) => {
+      return {
+        value: item,
+        label: item,
+      };
+    }) || [];
 
-  const organizationOptions = Object.entries(data?.organizations || {})?.map((item) => {
-    return {
-      value: item[0],
-      label: item[1]
-    };
-  }
-  ) || [];
+  const organizationOptions =
+    Object.entries(data?.organizations || {})?.map((item) => {
+      return {
+        value: item[0],
+        label: item[1],
+      };
+    }) || [];
 
-  const projectOptions = Object.entries(data?.projectsForUser || {})?.map((item) => {
-    return {
-      value: item[0],
-      label: item[1]
-    };
-  }
-  ) || [];
+  const projectOptions =
+    Object.entries(data?.projectsForUser || {})?.map((item) => {
+      return {
+        value: item[0],
+        label: item[1],
+      };
+    }) || [];
 
-  const assignedUserOptions = (data?.users?.filter(item => item.username).map((item) => {
-    return {
-      value: item.username,
-      label: item.username
-    };
-  })) || [];
-
+  const assignedUserOptions =
+    data?.users
+      ?.filter((item) => item.username)
+      .map((item) => {
+        return {
+          value: item.username,
+          label: item.username,
+        };
+      }) || [];
 
   return (
     <div>
-      <h3><FormattedMessage id="FILTER_METADATA" /></h3>
+      <h4>
+        <FormattedMessage id="FILTER_METADATA" />
+      </h4>
       <Description>
         <FormattedMessage id="FILTER_METADATA_DESC" />
       </Description>
@@ -109,7 +111,5 @@ export default function MetadataFilter({
         filterKey={"Assigned User"}
       />
     </div>
-
-
   );
-}
+}
diff --git a/frontend/src/components/filterFields/ObservationAttributeFilter.jsx b/frontend/src/components/filterFields/ObservationAttributeFilter.jsx
@@ -58,9 +58,9 @@ export default function ObservationAttributeFilter({ onChange, data }) {
         overflow: "visible",
       }}
     >
-      <h3>
+      <h4>
         <FormattedMessage id="FILTER_OBSERVATION_ATTRIBUTE" />
-      </h3>
+      </h4>
       <Description>
         <FormattedMessage id="FILTER_OBSERVATION_ATTRIBUTE_DESC" />
       </Description>

diff --git a/frontend/src/components/filterFields/SocialFilter.jsx b/frontend/src/components/filterFields/SocialFilter.jsx
@@ -26,9 +26,9 @@ export default function SocialFilter({ data, onChange }) {
 
   return (
     <div>
-      <h3>
+      <h4>
         <FormattedMessage id="FILTER_SOCIAL" />
-      </h3>
+      </h4>
       <Description>
         <FormattedMessage id="FILTER_SOCIAL_DESC" />
       </Description>

diff --git a/frontend/src/components/filterFields/TagsFilter.jsx b/frontend/src/components/filterFields/TagsFilter.jsx
@@ -16,9 +16,9 @@ export default function TagsFilter({ data, onChange }) {
   const intl = useIntl();
   return (
     <div>
-      <h3>
+      <h4>
         <FormattedMessage id="FILTER_TAGS" />
-      </h3>
+      </h4>
       <Description>
         <FormattedMessage id="FILTER_TAGS_DESC" />
       </Description>