From 3de2dd0bd8b017e2f3abd0ec839f50e3292034e1 Mon Sep 17 00:00:00 2001 From: Paul Schreiber Date: Thu, 2 May 2024 13:47:41 -0400 Subject: [PATCH] fix: update location details screen (#1212) * fix: round GPS accuracy to whole numbers * fix: remove + button from location dashboard app bar * fix: site dashboard improvements - remove divider - remove accordion - remove last modified - remove accuracy placeholder - add "create site here" button * fix: change ""more info" to "learn more" * fix: remove last updated strings * fix: add create site button label and description * fix: improve button label name * fix: add people badge to project * fix: use pushpin icon * fix: remove unused code * fix: fix create site here button alignment * fix: use member count on people badge * fix: shrink note button to closer match badge * fix: remove "learn more" from tooltip * fix: correct color for note button * refactor: use PeopleBadge component --- dev-client/src/components/PeopleBadge.tsx | 31 ++++ dev-client/src/components/SiteCard.tsx | 9 +- .../components/CreateSiteForm.tsx | 2 +- .../src/screens/LocationDashboardScreen.tsx | 17 +- .../components/ProjectPreviewCard.tsx | 5 +- .../src/screens/SiteScreen/SiteScreen.tsx | 174 +++++++++--------- .../components/ProjectInstructionsButton.tsx | 6 +- .../SiteSettingsScreen/SiteSettingsScreen.tsx | 2 +- dev-client/src/translations/en.json | 10 +- 9 files changed, 133 insertions(+), 123 deletions(-) create mode 100644 dev-client/src/components/PeopleBadge.tsx diff --git a/dev-client/src/components/PeopleBadge.tsx b/dev-client/src/components/PeopleBadge.tsx new file mode 100644 index 000000000..d58f70444 --- /dev/null +++ b/dev-client/src/components/PeopleBadge.tsx @@ -0,0 +1,31 @@ +/* + * Copyright © 2024 Technology Matters + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published + * by the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see https://www.gnu.org/licenses/. + */ + +import {Badge} from 'terraso-mobile-client/components/NativeBaseAdapters'; +import {Icon} from 'terraso-mobile-client/components/icons/Icon'; + +type Props = { + count: number; +}; + +export const PeopleBadge = ({count}: Props) => { + return ( + }> + {count} + + ); +}; diff --git a/dev-client/src/components/SiteCard.tsx b/dev-client/src/components/SiteCard.tsx index 5f9d531e0..c39f458c2 100644 --- a/dev-client/src/components/SiteCard.tsx +++ b/dev-client/src/components/SiteCard.tsx @@ -21,7 +21,6 @@ import {Site} from 'terraso-client-shared/site/siteSlice'; import {useSelector} from 'terraso-mobile-client/store'; import {useTranslation} from 'react-i18next'; import {StyleSheet} from 'react-native'; -import {Icon} from 'terraso-mobile-client/components/icons/Icon'; import {IconButton} from 'terraso-mobile-client/components/icons/IconButton'; import {StaticMapView} from 'terraso-mobile-client/components/StaticMapView'; import {Card} from 'terraso-mobile-client/components/Card'; @@ -30,8 +29,8 @@ import { Row, Heading, Text, - Badge, } from 'terraso-mobile-client/components/NativeBaseAdapters'; +import {PeopleBadge} from 'terraso-mobile-client/components/PeopleBadge'; const TEMP_MODIFIED_DATE = '8/15/23'; const TEMP_MODIFIED_NAME = 'Sample Sam'; @@ -83,9 +82,9 @@ export const SiteCard = ({ - }> - 1 - + {project && ( + + )} {onShowSiteOnMap && ( {t('site.create.location_label')} {t('site.create.location_accuracy', { - accuracyM: accuracyM?.toFixed(5), + accuracyM: accuracyM?.toFixed(0), })} diff --git a/dev-client/src/screens/LocationDashboardScreen.tsx b/dev-client/src/screens/LocationDashboardScreen.tsx index fb5e2428a..d531f6756 100644 --- a/dev-client/src/screens/LocationDashboardScreen.tsx +++ b/dev-client/src/screens/LocationDashboardScreen.tsx @@ -51,18 +51,9 @@ export const LocationDashboardScreen = ({siteId, coords}: Props) => { ); const appBarRightButton = useMemo(() => { - // display add button if no site associated with location - if (!siteId) { - return ( - navigation.navigate('CREATE_SITE', {coords})} - /> - ); - } - - // display nothing if user does not own the site / is not manager - if (userRole === null || !isSiteManager(userRole)) { + // display nothing if no site associated with location or + // user does not own the site / is not manager + if (!siteId || userRole === null || !isSiteManager(userRole)) { return undefined; } @@ -73,7 +64,7 @@ export const LocationDashboardScreen = ({siteId, coords}: Props) => { onPress={() => navigation.navigate('SITE_SETTINGS', {siteId})} /> ); - }, [siteId, coords, navigation, userRole]); + }, [siteId, navigation, userRole]); const onInfoPress = useCallback( () => infoModalRef.current?.present(), diff --git a/dev-client/src/screens/ProjectListScreen/components/ProjectPreviewCard.tsx b/dev-client/src/screens/ProjectListScreen/components/ProjectPreviewCard.tsx index 46d4dc0c3..a5010f863 100644 --- a/dev-client/src/screens/ProjectListScreen/components/ProjectPreviewCard.tsx +++ b/dev-client/src/screens/ProjectListScreen/components/ProjectPreviewCard.tsx @@ -27,6 +27,7 @@ import { Heading, Text, } from 'terraso-mobile-client/components/NativeBaseAdapters'; +import {PeopleBadge} from 'terraso-mobile-client/components/PeopleBadge'; type Props = { project: Project; @@ -63,9 +64,7 @@ export const ProjectPreviewCard = ({project}: Props) => { }> {Object.keys(project.sites).length} - }> - {Object.keys(project.memberships).length} - + ); diff --git a/dev-client/src/screens/SiteScreen/SiteScreen.tsx b/dev-client/src/screens/SiteScreen/SiteScreen.tsx index 4ed46c1b8..d416edd51 100644 --- a/dev-client/src/screens/SiteScreen/SiteScreen.tsx +++ b/dev-client/src/screens/SiteScreen/SiteScreen.tsx @@ -18,12 +18,12 @@ import {useCallback} from 'react'; import {StyleSheet, ScrollView} from 'react-native'; import {useTranslation} from 'react-i18next'; -import {Button, Divider} from 'native-base'; +import {Button} from 'native-base'; +import {useNavigation} from 'terraso-mobile-client/navigation/hooks/useNavigation'; import {SitePrivacy, updateSite} from 'terraso-client-shared/site/siteSlice'; import {useDispatch, useSelector} from 'terraso-mobile-client/store'; import {RadioBlock} from 'terraso-mobile-client/components/RadioBlock'; -import {Accordion} from 'terraso-mobile-client/components/Accordion'; import {StaticMapView} from 'terraso-mobile-client/components/StaticMapView'; import {Coords} from 'terraso-mobile-client/model/map/mapSlice'; import {ProjectInstructionsButton} from 'terraso-mobile-client/screens/SiteScreen/components/ProjectInstructionsButton'; @@ -40,12 +40,9 @@ import { } from 'terraso-mobile-client/components/NativeBaseAdapters'; import StackedBarChart from 'terraso-mobile-client/assets/stacked-bar.svg'; +import {PeopleBadge} from 'terraso-mobile-client/components/PeopleBadge'; const TEMP_ELEVATION = '1900 ft'; -const TEMP_ACCURACY = '20 ft'; -const TEMP_MODIFIED_DATE = '8/15/23'; -const TEMP_MODIFIED_NAME = 'Sample Sam'; -const TEMP_NOT_FOUND = 'not found'; const TEMP_SOIL_ID_VALUE = 'Clifton'; const TEMP_ECO_SITE_PREDICTION = 'Loamy Upland'; @@ -55,7 +52,7 @@ type Props = { }; const LocationDetail = ({label, value}: {label: string; value: string}) => ( - + {label}: {value} @@ -110,6 +107,11 @@ export const SiteScreen = ({siteId, coords}: Props) => { const {t} = useTranslation(); const dispatch = useDispatch(); const onInfoPress = useInfoPress(); + const navigation = useNavigation(); + + const onCreate = useCallback(() => { + navigation.navigate('CREATE_SITE', {coords}); + }, [navigation, coords]); const site = useSelector(state => siteId === undefined ? undefined : state.site.sites[siteId], @@ -135,92 +137,82 @@ export const SiteScreen = ({siteId, coords}: Props) => { style={styles.mapView} displayCenterMarker={true} /> - - {t('general.details')} - - }> - - {project && ( - - )} - {project && ( - - )} - {site && !project && ( - - - - {t('site.dashboard.privacy')} - - - - } - options={{ - PUBLIC: {text: t('privacy.public.title')}, - PRIVATE: {text: t('privacy.private.title')}, - }} - groupProps={{ - name: 'site-privacy', - onChange: onSitePrivacyChanged, - value: site.privacy, - ml: '0', - }} - /> - - )} - - + + + + + {!site && ( + + + + {t('site.create.description')} + + + )} + {project && ( + + )} + {project && ( - {site && ( - <> - - - - - )} - {project?.siteInstructions && ( - - )} - - - + )} + {site && !project && ( + + + + {t('site.dashboard.privacy')} + + + + } + options={{ + PUBLIC: {text: t('privacy.public.title')}, + PRIVATE: {text: t('privacy.private.title')}, + }} + groupProps={{ + name: 'site-privacy', + onChange: onSitePrivacyChanged, + value: site.privacy, + ml: '0', + }} + /> + + )} + {project && ( + + + {project?.siteInstructions && ( + + )} + + )} + { mt={2} pl={4} pr={4} - size="lg" - backgroundColor="primary.dark" + size="md" + backgroundColor="primary.main" shadow={5} onPress={onShowNote()}> - + {t('projects.inputs.instructions.add_label')} diff --git a/dev-client/src/screens/SiteSettingsScreen/SiteSettingsScreen.tsx b/dev-client/src/screens/SiteSettingsScreen/SiteSettingsScreen.tsx index 9debb0501..2e9316cc7 100644 --- a/dev-client/src/screens/SiteSettingsScreen/SiteSettingsScreen.tsx +++ b/dev-client/src/screens/SiteSettingsScreen/SiteSettingsScreen.tsx @@ -84,7 +84,7 @@ export const SiteSettingsScreen = ({siteId}: Props) => { size="container" alignItems="center" justifyContent="space-around"> - + {t('site.dashboard.team_button')} diff --git a/dev-client/src/translations/en.json b/dev-client/src/translations/en.json index 4fee2114f..1bbea0bee 100644 --- a/dev-client/src/translations/en.json +++ b/dev-client/src/translations/en.json @@ -20,7 +20,7 @@ "last_updated": "Last Modified: {{date}} by {{name}}", "progress": "Progress: {{progress}}", "members": "{{members}} Members", - "more_info": "More info", + "more_info": "Learn more", "soil_id_prediction": "Soil ID prediction", "ecological_site_prediction": "Ecological site prediction", "annual_precip_avg": "Annual precipitation avg", @@ -33,6 +33,8 @@ }, "create": { "title": "Create Site", + "description": "Create a site here to save this location, collect data, and see more detailed reports.", + "button_label": "Create Site Here", "gps": "Use my current location (GPS)", "pin": "Use map pin", "manual": "Enter coordinates", @@ -74,10 +76,6 @@ "action_name": "Delete" }, "location_accuracy": "Location Accuracy", - "last_modified": { - "label": "Last Modified", - "value": "{{date}} {{name}}" - }, "default_title": "Location Information", "speed_dial": { "note_label": "NOTE", @@ -261,7 +259,7 @@ "heading": "Transfer existing sites", "description": "Choose existing LandPKS sites you manage to transfer to this project. Note that only those who have access to the project will be able to access the sites in the project.", "unaffiliated": "Unaffiliated", - "tooltip": "Sites you transfer to this project will inherit this project’s data settings, input requirements, and team members. Learn more..." + "tooltip": "Sites you transfer to this project will inherit this project’s data settings, input requirements, and team members." }, "form": { "name_min_length_error": "Project name must be at least {{min}} characters",