feat: add campus filter to advanced search (#247)

ChurchApps · Feb 8, 2024 · 098ca00 · 098ca00
1 parent 641e1d3
commit 098ca00
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 9 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 { Button, FormControl, InputLabel, MenuItem, Select, SelectChangeEvent, Stack, TextField } from "@mui/material";
 import React from "react";
-import { ApiHelper, SearchCondition, Permissions, GroupInterface, Loading, FundInterface } from "@churchapps/apphelper";
+import { ApiHelper, SearchCondition, Permissions, GroupInterface, Loading, FundInterface, CampusInterface } from "@churchapps/apphelper";
 
 interface Props {
   conditionAdded: (condition: any) => void
@@ -26,8 +26,33 @@ export function EditCondition(props: Props) {
         c.operator = e.target.value;
         break;
       case "value":
+        const parsedValue = c.field === "campus" && JSON.parse(c?.value);
         c.value = e.target.value;
+        if (parsedValue && Array.isArray(parsedValue)) {
+          const newValue = [JSON.parse(e.target.value), parsedValue[1]];
+          c.value = JSON.stringify(newValue);
+        }
+        break;
+      case "from":
+        const parsed = JSON.parse(c?.value);
+        let newObj;
+        if (Array.isArray(parsed)) {
+          newObj = [{ value: parsed[0].value, text: parsed[0].text }, { from: e.target.value, to: parsed[1]?.to }];
+        } else {
+          newObj = [{ value: parsed.value, text: parsed.text }, { from: e.target.value, to: parsed.to }];
+        }
+        c.value = JSON.stringify(newObj);
         break;
+      case "to":
+        const parsedObj = JSON.parse(c?.value);
+        let obj;
+        if (Array.isArray(parsedObj)) {
+          obj = [{ value: parsedObj[0].value, text: parsedObj[0].text }, { from: parsedObj[1]?.from, to: e.target.value }];
+        } else {
+          obj = [{ value: parsedObj.value, text: parsedObj.text }, { from: parsedObj?.from, to: e.target.value }];
+        }
+        c.value = JSON.stringify(obj);
+      break;
     }
     setCondition(c);
   }
@@ -83,6 +108,17 @@ export function EditCondition(props: Props) {
         setDefaultValue((loadedOptions?.length > 0) ? JSON.stringify(loadedOptions[0]) : "");
         result = getValueSelect(options);
         break;
+      case "campus":
+        loadedOptions.forEach((o, i) => { options.push(<MenuItem key={i} value={JSON.stringify(o)}>{o.text}</MenuItem>); });
+        setDefaultValue((loadedOptions?.length > 0) ? JSON.stringify(loadedOptions[0]) : "");
+        result = <>
+          {getValueSelect(options)}
+          <Stack direction="row" spacing={2} sx={{ marginTop: "16px", marginBottom: "8px" }}>
+            <TextField fullWidth label="From" name="from" type="date" InputLabelProps={{ shrink: true }} onChange={handleChange} />
+            <TextField fullWidth label="To" name="to" type="date" InputLabelProps={{ shrink: true }} onChange={handleChange} />
+          </Stack>
+        </>;
+        break;  
       default:
         result = <TextField fullWidth label="Value" style={{ marginBottom: 5 }} name="value" type="text" placeholder="Value" value={condition.value} onChange={handleChange} />
         break;
@@ -111,15 +147,28 @@ export function EditCondition(props: Props) {
           setLoadingOptions(false);
         })
       }
+      if (condition.field === "campus") {
+        setLoadingOptions(true);
+        ApiHelper.get("/campuses", "AttendanceApi").then((data: CampusInterface[]) => {
+          const options: any[] = [];
+          data.forEach(c => { options.push({ value: c.id, text: c.name }); });
+          setLoadedOptions(options);
+          setLoadingOptions(false);
+        });
+      }
     }
   }, [condition?.field.toString()]); //eslint-disable-line
 
-  const getValueSelect = (options: JSX.Element[]) => (<FormControl fullWidth>
-    <InputLabel>Value</InputLabel>
-    <Select name="value" label="Value" type="text" placeholder="Value" value={condition.value} onChange={handleChange}>
-      {options}
-    </Select>
-  </FormControl>)
+  const getValueSelect = (options: JSX.Element[]) => {
+    const parsedValue = condition.field === "campus" && condition.value !== "" && JSON.parse(condition.value);
+    const selectValue = (parsedValue && Array.isArray(parsedValue)) ? JSON.stringify(parsedValue[0]) : condition.value;
+    return (<FormControl fullWidth>
+      <InputLabel>Value</InputLabel>
+      <Select name="value" label="Value" type="text" placeholder="Value" value={selectValue} onChange={handleChange}>
+        {options}
+      </Select>
+    </FormControl>)
+  }
 
   const getOperatorOptions = () => {
     let result = [];
@@ -152,6 +201,16 @@ export function EditCondition(props: Props) {
           <MenuItem key="/donatedTo" value="donatedTo">has donated to</MenuItem>
         ];
         break;
+      case "campus":
+        if (condition.operator !== "attenedCampus") {
+          const c = { ...condition };
+          c.operator = "attenedCampus";
+          setCondition(c);
+        }
+        result = [
+          <MenuItem key="/attenedCampus" value="attenedCampus">has attended</MenuItem>
+        ]
+        break;
       default:
         result = [
           <MenuItem key="/equals" value="equals">=</MenuItem>,
@@ -200,6 +259,8 @@ export function EditCondition(props: Props) {
         {(Permissions.membershipApi.groupMembers) && <MenuItem key="/groupMember" value="groupMember">Group Member</MenuItem>}
         <MenuItem key="/donation" value="donation" disabled>Donation</MenuItem>
         {(Permissions.givingApi.donations) && <MenuItem key="/donationMember" value="donationMember">Member</MenuItem>}
+        <MenuItem key="/attendance" value="attendance" disabled>Attendance</MenuItem>
+        {(Permissions.attendanceApi.attendance) && <MenuItem key="/campus" value="campus">Campus</MenuItem>}
       </Select>
     </FormControl>
     <FormControl fullWidth>

diff --git a/src/people/components/PeopleSearch.tsx b/src/people/components/PeopleSearch.tsx
@@ -45,6 +45,12 @@ export function PeopleSearch(props: Props) {
           const memberIds = ArrayHelper.getUniqueValues(donationMember, "donation.personId").filter(f => f !== null);
           result.push({ field: "id", operator: c.operator, value: memberIds.join(",") });
           break;
+        case "campus":
+          const campusVal = JSON.parse(c.value);
+          const campusAttendees = await ApiHelper.get(`/attendancerecords/search?campusId=${campusVal[0].value}&from=${campusVal[1].from}&to=${campusVal[1].to}`, "AttendanceApi");
+          const attendeeIds = ArrayHelper.getIds(campusAttendees, "personId");
+          result.push({ field: "id", operator: c.operator, value: attendeeIds.join(",") });
+          break;
         default:
           result.push(c);
           break;
@@ -88,9 +94,13 @@ export function PeopleSearch(props: Props) {
     let idx = 0;
     for (let c of conditions) {
       const displayField = c.field.split(/(?=[A-Z])/).map(word => (word.charAt(0).toUpperCase() + word.slice(1))).join(" ");
-      const displayOperator = c.operator.replace("lessThanEqual", "<=").replace("greaterThan", ">").replace("equals", "=").replace("lessThan", "<").replace("greaterThanEqual", ">=").replace("notIn", "not in").replace("donatedTo", "donated to");
+      const displayOperator = c.operator.replace("lessThanEqual", "<=").replace("greaterThan", ">").replace("equals", "=").replace("lessThan", "<").replace("greaterThanEqual", ">=").replace("notIn", "not in").replace("donatedTo", "donated to").replace("attenedCampus", "attendees at");
       const index = idx;
       let displayValue = (c.value.indexOf('"value":') > -1) ? JSON.parse(c.value).text : c.value;
+      if (c.field === "campus") {
+        const parsedValue = JSON.parse(c.value);
+        displayValue = `${parsedValue[0].text} [${parsedValue[1]?.from} - ${parsedValue[1]?.to}]`;
+      }
       result.push(<Box key={index} sx={{display: "flex", alignItems: "center"}} mb={1}>
         <a href="about:blank" style={{display: "flex"}} onClick={(e) => { e.preventDefault(); removeCondition(index) }}><Icon sx={{ marginRight: "5px" }}>delete</Icon></a>
         <Box><b>{displayField}</b> {displayOperator} <i>{displayValue}</i></Box>