Enhancements UI and navigation

src/arena-mobile-ui/components/Button/index.js

@@ -15,7 +15,7 @@ const UiButton = ({
   icon = null,
   customContainerStyle = EMPTY_OBJECT,
   customTextStyle = EMPTY_OBJECT,
-  iconPosition = 'left',
+  iconPosition,
   allowMultipleLines = false,
   bold = true,
   ...props
@@ -52,8 +52,8 @@ const UiButton = ({
         icon={icon}
         buttonStyle={containerStyles}
         titleStyle={textStyles}
-        {...props}
         iconRight={iconPosition === 'right'}
+        {...props}
       />
     );
   }
@@ -65,6 +65,7 @@ const UiButton = ({
       disabled={disabled}
       buttonStyle={containerStyles}
       titleStyle={textStyles}
+      iconRight={iconPosition === 'right'}
       {...props}
     />
   );

src/arena-mobile-ui/components/Button/styles.js

@@ -6,7 +6,7 @@ const styles = ({colors, baseStyles}) =>
       padding: baseStyles.bases.BASE_2,
       paddingVertical: baseStyles.bases.BASE_4,
       marginVertical: baseStyles.bases.BASE_2,
-      flexDirection: 'row',
+
       alignItems: 'center',
       justifyContent: 'center',
       borderRadius: baseStyles.bases.BASE,

src/i18n/de/Common.json

@@ -38,5 +38,6 @@
     "button": "App-Version aktualisieren"
   },
   "view_more": "Mehr anzeigen",
-  "view_less": "Weniger anzeigen"
+  "view_less": "Weniger anzeigen",
+  "long_press": "Langes Drücken: Eintrag löschen"
 }

src/i18n/en/Common.json

@@ -38,5 +38,6 @@
     "button": "Update App version"
   },
   "view_more": "View more",
-  "view_less": "View less"
+  "view_less": "View less",
+  "long_press": "Long press: delete entry"
 }

src/i18n/es/Common.json

@@ -38,5 +38,6 @@
     "button": "Actualizar versión de la aplicación"
   },
   "view_more": "Ver más",
-  "view_less": "Ver menos"
+  "view_less": "Ver menos",
+  "long_press": "Mantener pulsado: eliminar entrada"
 }

src/i18n/fr/Common.json

@@ -38,5 +38,6 @@
     "button": "Mettre à jour la version de l'application"
   },
   "view_more": "Voir plus",
-  "view_less": "Voir moins"
+  "view_less": "Voir moins",
+  "long_press": "Appui long: supprimer l'entrée"
 }

src/i18n/pt/Common.json

@@ -38,5 +38,6 @@
     "button": "Atualizar versão do aplicativo"
   },
   "view_more": "Ver mais",
-  "view_less": "Ver menos"
+  "view_less": "Ver menos",
+  "long_press": "Pressione e segure: excluir entrada"
 }

src/screens/Form/components/EntityPage/components/TableEntity/component.js

@@ -30,7 +30,7 @@ const TableEntity = () => {
     return (
       <View style={styles.container}>
         <MultipleEntityHome />
-        <EntityPanel />
+        <EntityPanel allowCollapse={false} longPressInfo={true} />
       </View>
     );
   }

src/screens/Form/components/EntityPage/components/common/EntityPanel/CurrentPageInfo/component.js

@@ -26,8 +26,8 @@ const CurrentPageInfo = () => {
   );
 
   return (
-    <>
-      <TextBase size="s" style={styles.headerTextInfo}>
+    <View style={styles.headerContainer}>
+      <TextBase style={styles.headerTextInfo}>
         {t('Form:navigation_panel.current_page')}:
       </TextBase>
       <View style={styles.container}>
@@ -38,7 +38,7 @@ const CurrentPageInfo = () => {
           </View>
         )}
       </View>
-    </>
+    </View>
   );
 };
 

src/screens/Form/components/EntityPage/components/common/EntityPanel/CurrentPageInfo/styles.js

@@ -4,24 +4,29 @@ import * as colors from 'arena-mobile-ui/colors';
 import baseStyles from 'arena-mobile-ui/styles';
 
 const styles = StyleSheet.create({
+  headerContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
   headerTextInfo: {
     color: colors.neutralLight,
-    paddingBottom: baseStyles.bases.BASE,
     textAlign: 'left',
+    alignItems: 'flex-end',
+    justifyContent: 'flex-end',
   },
   container: {
     flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'center',
     maxWidth: 300,
+    paddingLeft: baseStyles.bases.BASE,
   },
-  label: {
-    maxWidth: 150,
-  },
+  label: {},
   selectorContainer: {
     flexDirection: 'column',
     alignItems: 'center',
     marginLeft: baseStyles.bases.BASE,
-    maxWidth: 120,
   },
 });
 

src/screens/Form/components/EntityPage/components/common/EntityPanel/DeleteNodeEntity/styles.js

@@ -3,6 +3,8 @@ import {StyleSheet} from 'react-native';
 const styles = StyleSheet.create({
   buttonContainer: {
     paddingRight: 0,
+    marginTop: 0,
+    marginBottom: 0,
   },
 });
 

src/screens/Form/components/EntityPage/components/common/EntityPanel/MultipleEntityOptions/styles.js

@@ -9,11 +9,12 @@ const styles = ({colors, baseStyles}) =>
     button: {
       borderRadius: baseStyles.bases.BASE,
       backgroundColor: colors.neutralLightest,
-      padding: baseStyles.bases.BASE_2,
+      padding: baseStyles.bases.BASE_4,
       flexDirection: 'row',
-      justifyContent: 'center',
+      justifyContent: 'flex-start',
       alignItems: 'center',
       borderWidth: 0,
+      backgroundColor: '#b6ff00',
     },
   });
 

src/screens/Form/components/EntityPage/components/common/EntityPanel/Navigation/component.js

@@ -89,6 +89,7 @@ const NavigationButton = ({node, nodeDef, align = 'right', keyToShow}) => {
         customTextStyle={customTextStyle}
         icon={align === 'left' ? ChevronLeft : ChevronRight}
         iconPosition={align === 'left' ? 'left' : 'right'}
+        iconRight={align === 'right'}
         bold={false}
         hitSlop={hitSlop}
       />
@@ -114,9 +115,11 @@ export const getPrevNodeDef = ({
 
   // check sibilings applicability
   const prevSibilings = sibilings?.slice(0, currentIndex);
-  const validSibiling = prevSibilings?.find(sibilingUuid =>
-    Nodes.isChildApplicable(parentNodeInHierarchy, sibilingUuid),
-  );
+  const validSibiling = prevSibilings
+    ?.reverse()
+    .find(sibilingUuid =>
+      Nodes.isChildApplicable(parentNodeInHierarchy, sibilingUuid),
+    );
 
   if (validSibiling) {
     return survey.nodeDefs[validSibiling];
@@ -382,13 +385,12 @@ const Next = ({parent}) => {
   const currentEntityNodeDef = useSelector(
     formSelectors.getParentEntityNodeDef,
   );
+  const isEntityShowAsTable = useSelector(formSelectors.isEntityShowAsTable);
 
   const showMultipleEntityHome = useSelector(
     formSelectors.showMultipleEntityHome,
   );
 
-  const isEntityShowAsTable = useSelector(formSelectors.isEntityShowAsTable);
-
   if (nextNodeDef?.uuid) {
     return <NavigationButton nodeDef={nextNodeDef} />;
   }

src/screens/Form/components/EntityPage/components/common/EntityPanel/Navigation/styles.js

@@ -18,6 +18,7 @@ const styles = ({colors, baseStyles}) =>
 
     optionsContainer: {
       padding: baseStyles.bases.BASE_4,
+      paddingTop: 0,
 
       flexDirection: 'row',
     },

src/screens/Form/components/EntityPage/components/common/EntityPanel/NewItemButton/component.js

@@ -68,11 +68,7 @@ const NewItemButton = ({
             ? t('Form:add_new', {label})
             : t(isTable ? 'Form:add_new_row' : 'Form:add_new_item')
         }
-        customContainerStyle={[
-          styles.buttonContainer,
-          styles.addItem,
-          customContainerStyle,
-        ]}
+        customContainerStyle={[styles.buttonContainer, customContainerStyle]}
         customTextStyle={styles.button}
         onPress={handleCreateNewNodeEntity}
         allowMultipleLines={true}

src/screens/Form/components/EntityPage/components/common/EntityPanel/NewItemButton/styles.js

@@ -7,11 +7,9 @@ const styles = ({colors, baseStyles}) =>
       marginVertical: 0,
       borderColor: colors.neutral,
       borderWidth: 1,
-    },
-    addItem: {
-      width: 90,
       paddingHorizontal: baseStyles.bases.BASE_3,
     },
+
     button: {
       fontWeight: 'normal',
     },

src/screens/Form/components/EntityPage/components/common/EntityPanel/TableOption/component.js

@@ -35,6 +35,7 @@ const TableOption = ({withIcon = false}) => {
         }`,
       )} - (${nodes.length})`}
       customContainerStyle={styles.buttonContainer}
+      customTextStyle={styles.buttonText}
       onPress={handleToggleTable}
       icon={
         withIcon ? (

src/screens/Form/components/EntityPage/components/common/EntityPanel/TableOption/styles.js

@@ -3,7 +3,11 @@ import {StyleSheet} from 'react-native';
 const styles = () =>
   StyleSheet.create({
     buttonContainer: {
-      paddingLeft: 0,
+      textAlign: 'right',
+      padding: 0,
+    },
+    buttonText: {
+      textAlign: 'left',
     },
   });
 

src/screens/Form/components/EntityPage/components/common/EntityPanel/component.js

@@ -1,6 +1,6 @@
 import {NodeDefs} from '@openforis/arena-core';
 import React, {useMemo, useEffect, useCallback} from 'react';
-import {View, StyleSheet} from 'react-native';
+import {View, StyleSheet, Text} from 'react-native';
 import {isTablet} from 'react-native-device-info';
 import {useSelector, useDispatch} from 'react-redux';
 
@@ -17,15 +17,18 @@ import {useGetHasNavigation} from './Navigation/component';
 import _styles from './styles';
 import TableOption from './TableOption';
 
-const MULTILEVEL_COLLAPSE = true;
+import {useTranslation} from 'react-i18next';
 
+const MULTILEVEL_COLLAPSE = true;
+const SHOW_CURRENT_PAGE = false;
 const hitSlop = {
   top: 0,
   right: 80,
   bottom: 20,
   left: 80,
 };
-const EntityPanel = () => {
+const EntityPanel = ({allowCollapse = true, longPressInfo = false}) => {
+  const {t} = useTranslation();
   const entityPanelCollapseLevel = useSelector(
     formSelectors.getEntityPanelCollapseLevel,
   );
@@ -66,8 +69,9 @@ const EntityPanel = () => {
           : {},
       ),
       StyleSheet.compose(
-        entityPanelCollapseLevel === 1 ? styles.containerCollapsed : {},
-        entityPanelCollapseLevel === 2 ? styles.containerCollapsedSuper : {},
+        allowCollapse && entityPanelCollapseLevel === 1
+          ? styles.containerCollapsedSuper
+          : {},
       ),
     );
   }, [styles, _isTablet, isEntitySelectorOpened, entityPanelCollapseLevel]);
@@ -81,40 +85,51 @@ const EntityPanel = () => {
   const handleCollapse = useCallback(() => {
     setCollapseLevel(
       MULTILEVEL_COLLAPSE && hasNavigation
-        ? (entityPanelCollapseLevel + 1) % 3
-        : entityPanelCollapseLevel === 2
+        ? (entityPanelCollapseLevel + 1) % 2
+        : entityPanelCollapseLevel === 1
           ? 0
-          : 2,
+          : 1,
     );
   }, [entityPanelCollapseLevel, hasNavigation, setCollapseLevel]);
 
   return (
     <View style={panelContainer}>
-      <View style={styles.collapseButtonContainer}>
-        <TouchableIcon
-          customStyle={styles.collapseButton}
-          iconName={
-            entityPanelCollapseLevel === 2 ? 'chevron-up' : 'chevron-down'
-          }
-          onPress={handleCollapse}
-          hitSlop={hitSlop}
-        />
-      </View>
+      {allowCollapse && (isTable || isMultiple) && (
+        <View style={styles.collapseButtonContainer}>
+          <TouchableIcon
+            customStyle={styles.collapseButton}
+            iconName={
+              entityPanelCollapseLevel === 1 ? 'chevron-up' : 'chevron-down'
+            }
+            onPress={handleCollapse}
+            hitSlop={hitSlop}
+          />
+        </View>
+      )}
       {entityPanelCollapseLevel === 0 && (
         <>
           <View style={styles.header}>
-            <View style={styles.textContainer}>
-              <CurrentPageInfo />
+            {SHOW_CURRENT_PAGE && (
+              <View style={styles.textContainer}>
+                <CurrentPageInfo />
+              </View>
+            )}
+            <View style={styles.actionsContainer}>
               {(isTable || isMultiple) && !showMultipleEntityHome && (
                 <TableOption />
               )}
+              {!showMultipleEntityHome && <MultipleEntityOptions />}
             </View>
-            {!showMultipleEntityHome && <MultipleEntityOptions />}
           </View>
         </>
       )}
-      {entityPanelCollapseLevel <= 1 && <Navigation />}
+      {(!allowCollapse || entityPanelCollapseLevel <= 0) && <Navigation />}
       {entityPanelCollapseLevel === 0 && <AutomaticallyStoredInfo />}
+      {longPressInfo && (
+        <View style={styles.longPressStyle}>
+          <Text>{t('Common:long_press')}</Text>
+        </View>
+      )}
     </View>
   );
 };