improve: some small tweaks to advanced search (#245)

* disable search when no conditions * show loader * default value selected in all the cases for operator select * default value selected in all the cases for value select * switch to old code * default value selected in all the cases for operator/value select
ChurchApps · Jan 17, 2024 · e866c45 · e866c45
1 parent 6b3dd08
commit e866c45
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git a/src/people/components/EditCondition.tsx b/src/people/components/EditCondition.tsx
@@ -1,6 +1,6 @@
 import { Button, FormControl, InputLabel, MenuItem, Select, SelectChangeEvent, TextField } from "@mui/material";
 import React from "react";
-import { ApiHelper, SearchCondition, Permissions, GroupInterface } from "@churchapps/apphelper";
+import { ApiHelper, SearchCondition, Permissions, GroupInterface, Loading } from "@churchapps/apphelper";
 
 interface Props {
   conditionAdded: (condition: any) => void
@@ -11,13 +11,16 @@ export function EditCondition(props: Props) {
   const [condition, setCondition] = React.useState<SearchCondition>({ field: "displayName", operator: "equals", value: "" });
   const [loadedOptions, setLoadedOptions] = React.useState<any[]>([]);
   const [loadedOptionsField, setLoadedOptionsField] = React.useState("");
+  const [loadingOptions, setLoadingOptions] = React.useState(false);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | SelectChangeEvent<string>) => {
     let c = { ...condition }
     switch (e.target.name) {
 
       case "field":
         c.field = e.target.value;
+        c.operator = "equals";
+        c.value = "";
         break;
       case "operator":
         c.operator = e.target.value;
@@ -64,12 +67,12 @@ export function EditCondition(props: Props) {
       case "birthMonth":
       case "anniversaryMonth":
         options = [<MenuItem key="January" value="1">January</MenuItem>, <MenuItem key="February" value="2">February</MenuItem>, <MenuItem key="March" value="3">March</MenuItem>, <MenuItem key="April" value="4">April</MenuItem>, <MenuItem key="May" value="5">May</MenuItem>, <MenuItem key="June" value="6">June</MenuItem>, <MenuItem key="July" value="7">July</MenuItem>, <MenuItem key="August" value="8">August</MenuItem>, <MenuItem key="September" value="9">September</MenuItem>, <MenuItem key="October" value="10">October</MenuItem>, <MenuItem key="November" value="11">November</MenuItem>, <MenuItem key="December" value="12">December</MenuItem>]
-        setDefaultValue("January");
+        setDefaultValue("1");
         result = getValueSelect(options);
         break;
       case "birthDate":
       case "anniversary":
-        result = <TextField fullWidth label="Value" type="date" style={{ marginBottom: 5 }} name="value" placeholder="Value" value={condition.value} onChange={handleChange} />
+        result = <TextField fullWidth label="Value" type="date" InputLabelProps={{ shrink: true }} style={{ marginBottom: 5 }} name="value" placeholder="Value" value={condition.value} onChange={handleChange} />
         break;
       case "age":
       case "yearsMarried":
@@ -86,10 +89,12 @@ export function EditCondition(props: Props) {
     if (condition.field !== loadedOptionsField) {
       setLoadedOptionsField(condition.field);
       if (condition.field === "groupMember") {
+        setLoadingOptions(true);
         ApiHelper.get("/groups", "MembershipApi").then((groups: GroupInterface[]) => {
           const options: any[] = [];
           groups.forEach(g => { options.push({ value: g.id, text: g.name }); });
           setLoadedOptions(options);
+          setLoadingOptions(false);
         });
       }
     }
@@ -103,17 +108,7 @@ export function EditCondition(props: Props) {
   </FormControl>)
 
   const getOperatorOptions = () => {
-    let result = [
-      <MenuItem key="/equals" value="equals">=</MenuItem>,
-      <MenuItem key="/contains" value="contains">contains</MenuItem>,
-      <MenuItem key="/startsWith" value="startsWith">starts with</MenuItem>,
-      <MenuItem key="/endsWith" value="endsWith">ends with</MenuItem>,
-      <MenuItem key="/greaterThan" value="greaterThan">&gt;</MenuItem>,
-      <MenuItem key="/greaterThanEqual" value="greaterThanEqual">&gt;=</MenuItem>,
-      <MenuItem key="/lessThan" value="lessThan">&lt;</MenuItem>,
-      <MenuItem key="/lessThanEqual" value="lessThanEqual">&lt;=</MenuItem>,
-      <MenuItem key="/notEquals" value="notEquals">!=</MenuItem>
-    ]
+    let result = [];
 
     switch (condition?.field) {
       case "gender":
@@ -133,6 +128,19 @@ export function EditCondition(props: Props) {
           <MenuItem key="/notIn" value="notIn">is not member of</MenuItem>
         ]
         break;
+      default:
+        result = [
+          <MenuItem key="/equals" value="equals">=</MenuItem>,
+          <MenuItem key="/contains" value="contains">contains</MenuItem>,
+          <MenuItem key="/startsWith" value="startsWith">starts with</MenuItem>,
+          <MenuItem key="/endsWith" value="endsWith">ends with</MenuItem>,
+          <MenuItem key="/greaterThan" value="greaterThan">&gt;</MenuItem>,
+          <MenuItem key="/greaterThanEqual" value="greaterThanEqual">&gt;=</MenuItem>,
+          <MenuItem key="/lessThan" value="lessThan">&lt;</MenuItem>,
+          <MenuItem key="/lessThanEqual" value="lessThanEqual">&lt;=</MenuItem>,
+          <MenuItem key="/notEquals" value="notEquals">!=</MenuItem>
+        ]
+        break;
     }
     return result;
   }
@@ -175,7 +183,7 @@ export function EditCondition(props: Props) {
       </Select>
     </FormControl>
 
-    {getValueField()}
+    {loadingOptions ? <Loading /> : <>{getValueField()}</>}
     <Button variant="outlined" fullWidth onClick={() => { props.conditionAdded(condition) }}>Save Condition</Button>
   </>
 }

diff --git a/src/people/components/PeopleSearch.tsx b/src/people/components/PeopleSearch.tsx
@@ -94,7 +94,7 @@ export function PeopleSearch(props: Props) {
     return result;
   }
 
-  const getAdvancedSearch = () => (<InputBox id="advancedSearch" headerIcon="person" headerText="Advanced Search" headerActionContent={<Button onClick={toggleAdvanced} sx={{ textTransform: "none" }}>Simple</Button>} saveFunction={handleAdvancedSearch} saveText="Search" help="chums/advanced-search">
+  const getAdvancedSearch = () => (<InputBox id="advancedSearch" headerIcon="person" headerText="Advanced Search" headerActionContent={<Button onClick={toggleAdvanced} sx={{ textTransform: "none" }}>Simple</Button>} saveFunction={handleAdvancedSearch} saveText="Search" isSubmitting={conditions.length < 1} help="chums/advanced-search">
     <p>All people where:</p>
     {getDisplayConditions()}
     {getAddCondition()}