feat: add session filter to captures page'

gwynndp · Jan 10, 2024 · 312f3da · 312f3da
1 parent 6cd4e3c
commit 312f3da
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 29 deletions.
diff --git a/src/api/treeTrackerApi.js b/src/api/treeTrackerApi.js
@@ -526,18 +526,6 @@ export default {
   getSessions() {
     try {
       const query = `${FIELD_DATA_API}/session`;
-      // Will want to limit results to the orgs/user's sessions only...
-      // Which is best field to query by?
-      // orgList &&...
-      //    device_configuration_id
-      //    originating_wallet_registration_id
-      //    target_wallet
-      //    organization
-      //    organization_id
-      //    device_identifier
-      //    grower_account_id
-
-      log.debug('GET SESSIONS -----', query);
 
       return fetch(query, {
         method: 'GET',

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/FilterTop.js b/src/components/FilterTop.js
@@ -12,7 +12,6 @@ import FilterModel, {
   TAG_NOT_SET,
   ANY_TAG_SET,
   ALL_SESSIONS,
-  // SESSION_NOT_SET,
 } from '../models/Filter';
 import DateFnsUtils from '@date-io/date-fns';
 import {

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>

diff --git a/src/context/AppContext.js b/src/context/AppContext.js
@@ -221,7 +221,6 @@ export const AppProvider = (props) => {
   const [orgList, setOrgList] = useState([]);
   const [sessionList, setSessionList] = useState([]);
   const [orgId, setOrgId] = useState(undefined);
-  const [sessionList, setSessionList] = useState([]);
 
   // TODO: The below `selectedFilters` state would be better placed under a
   // separate FilterContext in the future iterations when the need to share
@@ -318,16 +317,6 @@ export const AppProvider = (props) => {
   }
 
   async function loadSessions() {
-    // Will want to limit results to the orgs/user's sessions only...
-    // Which is best field to query by?
-    // orgList &&...
-    //    device_configuration_id
-    //    originating_wallet_registration_id
-    //    target_wallet
-    //    organization
-    //    organization_id
-    //    device_identifier
-    //    grower_account_id
     const { sessions } = await api.getSessions();
     setSessionList(sessions);
   }