Add icons in survey advanced search status filter (#1821)

* Add icons to status filter in survey advances search * Fix bug in search by status to be _or(...chosen statuses)
bcgov · Jul 11, 2023 · 1c91d1e · 1c91d1e
1 parent c3bbe4b
commit 1c91d1e
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 13 deletions.
diff --git a/met-api/src/met_api/models/survey.py b/met-api/src/met_api/models/survey.py
@@ -84,17 +84,18 @@ def filter_by_search_options(cls, survey_search_options: SurveySearchOptions, qu
         if survey_search_options.exclude_template:
             query = query.filter(Survey.is_template.is_(False))
 
-        if survey_search_options.is_unlinked:
-            query = query.filter(Survey.engagement_id.is_(None))
-
+        # filter by status
+        status_filters = []
         if survey_search_options.is_linked:
-            query = query.filter(Survey.engagement_id.isnot(None))
-
-        if survey_search_options.is_hidden:
-            query = query.filter(Survey.is_hidden.is_(True))
-
+            status_filters.append(Survey.engagement_id.isnot(None))
+        if survey_search_options.is_unlinked:
+            status_filters.append(Survey.engagement_id.is_(None))
         if survey_search_options.is_template:
-            query = query.filter(Survey.is_template.is_(True))
+            status_filters.append(Survey.is_template.is_(True))
+        if survey_search_options.is_hidden:
+            status_filters.append(Survey.is_hidden.is_(True))
+        if status_filters:
+            query = query.filter(or_(*status_filters))
 
         query = cls._filter_by_created_date(query, survey_search_options)
 

diff --git a/met-web/src/components/survey/listing/AdvancedSearch.tsx b/met-web/src/components/survey/listing/AdvancedSearch.tsx
@@ -12,6 +12,11 @@ import {
 } from '@mui/material';
 import { MetLabel, PrimaryButton, SecondaryButton } from 'components/common';
 import { AdvancedSearchFilters, SurveyListingContext } from './SurveyListingContext';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import CheckIcon from '@mui/icons-material/Check';
+import LinkIcon from '@mui/icons-material/Link';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import { Palette } from 'styles/Theme';
 
 export const AdvancedSearch = () => {
     const isMediumScreen = useMediaQuery((theme: Theme) => theme.breakpoints.down('lg'));
@@ -58,21 +63,48 @@ export const AdvancedSearch = () => {
                     <FormGroup row={isMediumScreen}>
                         <FormControlLabel
                             control={<Checkbox checked={status.hidden} onChange={handleStatusChange} name="hidden" />}
-                            label="Hidden"
+                            label={
+                                <Stack direction="row" alignItems="center" spacing={1}>
+                                    <VisibilityOffIcon fontSize="small" />
+                                    <span>Hidden</span>
+                                </Stack>
+                            }
                         />
                         <FormControlLabel
                             control={
                                 <Checkbox checked={status.template} onChange={handleStatusChange} name="template" />
                             }
-                            label="Template"
+                            label={
+                                <Stack direction="row" alignItems="center" spacing={1}>
+                                    <DashboardIcon fontSize="small" />
+                                    <span>Template</span>
+                                </Stack>
+                            }
                         />
                         <FormControlLabel
                             control={<Checkbox checked={status.ready} onChange={handleStatusChange} name="ready" />}
-                            label="Ready"
+                            label={
+                                <>
+                                    <Stack direction="row" alignItems="center" spacing={1}>
+                                        <CheckIcon
+                                            fontSize="small"
+                                            sx={{ stroke: Palette.icons.surveyReady, strokeWidth: '2' }}
+                                        />
+                                        <span>Ready</span>
+                                    </Stack>
+                                </>
+                            }
                         />
                         <FormControlLabel
                             control={<Checkbox checked={status.linked} onChange={handleStatusChange} name="linked" />}
-                            label="Linked"
+                            label={
+                                <>
+                                    <Stack direction="row" alignItems="center" spacing={1}>
+                                        <LinkIcon fontSize="small" />
+                                        <span>Linked</span>
+                                    </Stack>
+                                </>
+                            }
                         />
                     </FormGroup>
                 </FormControl>