feat: add session filter to captures page'

gwynndp · Dec 12, 2023 · 8f8ffc0 · 8f8ffc0
1 parent 05c2c92
commit 8f8ffc0
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/src/components/CaptureFilter.js b/src/components/CaptureFilter.js
@@ -6,8 +6,10 @@ import TextField from '@material-ui/core/TextField';
 import MenuItem from '@material-ui/core/MenuItem';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import SelectOrg from './common/SelectOrg';
+import SelectSession from './common/SelectSession';
 import FilterModel, {
   ALL_SPECIES,
+  ALL_SESSIONS,
   SPECIES_ANY_SET,
   SPECIES_NOT_SET,
   ALL_ORGANIZATIONS,
@@ -94,6 +96,9 @@ function Filter(props) {
   const [tag, setTag] = useState(null);
   const [tagSearchString, setTagSearchString] = useState('');
   const [organizationId, setOrganizationId] = useState(ALL_ORGANIZATIONS);
+  const [sessionId, setSessionId] = useState(
+    filter?.session_id || ALL_SESSIONS
+  );
   const [tokenId, setTokenId] = useState(filter?.tokenId || filterOptionAll);
 
   const handleStartDateChange = (date) => {
@@ -123,6 +128,7 @@ function Filter(props) {
       species_id: speciesId,
       tag_id: tag ? tag.id : undefined,
       organization_id: organizationId,
+      session_id: sessionId,
       tokenId: tokenId.trim(),
     };
     const filter = new FilterModel(test);
@@ -144,6 +150,7 @@ function Filter(props) {
     setTag(null);
     setTagSearchString('');
     setOrganizationId(ALL_ORGANIZATIONS);
+    setSessionId(ALL_SESSIONS);
     setTokenId(filterOptionAll);
     const filter = new FilterModel();
     props.onSubmit && props.onSubmit(filter);
@@ -338,6 +345,12 @@ function Filter(props) {
                   setOrganizationId(org.stakeholder_uuid);
                 }}
               />
+              <SelectSession
+                sessionId={sessionId}
+                handleSelection={(session) => {
+                  setSessionId(session.id);
+                }}
+              />
             </Grid>
             <Grid className={classes.inputContainer}>
               <Button

diff --git a/src/components/common/SelectSession.js b/src/components/common/SelectSession.js
@@ -21,12 +21,13 @@ function SelectSession({ sessionId, defaultSessions, handleSelection }) {
     // format the session data for the dropdown
     const sesh = sessionList.map((s) => ({
       id: s.id,
-      name: `${getDateTimeStringLocale(s.created_at)} : ${s.wallet} : ${
-        s.organization
-      }`,
+      org: s.organization,
+      name: `${s.wallet} ${s.organization ? ` / ${s.organization}  ` : ''}`,
+      date: getDateTimeStringLocale(s.created_at),
       value: s.id,
     }));
-    setSessions((s) => [...s, ...sesh]);
+
+    setSessions(() => [...defaultList, ...sesh]);
   }, [sessionList]);
 
   const handleChange = (e) => {
@@ -51,7 +52,8 @@ function SelectSession({ sessionId, defaultSessions, handleSelection }) {
           key={session.id}
           value={session.id}
         >
-          {session.name}
+          {session.date} -- {session.name}{' '}
+          {session.organization ? ` / ${session.organization}` : ''}
         </MenuItem>
       ))}
     </TextField>