Customize Labels Step 1

www/__tests__/commHelper.test.ts

@@ -47,4 +47,6 @@ it('fetches text from a URL and caches it so the next call is faster', async ()
   * - updateUser
   * - getUser
   * - putOne
+  * - getModes
+  * - updateMode
 */

www/i18n/en.json

@@ -8,7 +8,10 @@
   "trip-confirm": {
     "services-please-fill-in": "Please fill in the {{text}} not listed.",
     "services-cancel": "Cancel",
-    "services-save": "Save"
+    "services-save": "Save",
+    "default-mode": "Default Mode",
+    "custom-mode": "Custom Mode",
+    "default-purpose": "Default Purpose"
   },
 
   "control": {

www/js/diary/LabelTab.tsx

@@ -27,7 +27,7 @@ import { fillLocationNamesOfTrip, resetNominatimLimiter } from './addressNamesHe
 import { getLabelOptions } from '../survey/multilabel/confirmHelper';
 import { displayError, displayErrorMsg, logDebug, logWarn } from '../plugin/logger';
 import { useTheme } from 'react-native-paper';
-import { getPipelineRangeTs } from '../services/commHelper';
+import { getPipelineRangeTs, getUserCustomModes } from '../services/commHelper';
 import { mapInputsToTimelineEntries } from '../survey/inputMatcher';
 import { configuredFilters as multilabelConfiguredFilters } from '../survey/multilabel/infinite_scroll_filters';
 import { configuredFilters as enketoConfiguredFilters } from '../survey/enketo/infinite_scroll_filters';
@@ -56,6 +56,7 @@ const LabelTab = () => {
   const [displayedEntries, setDisplayedEntries] = useState(null);
   const [refreshTime, setRefreshTime] = useState(null);
   const [isLoading, setIsLoading] = useState<string | false>('replace');
+  const [customModes, setCustomModes] = useState<string[]>([]);
 
   const Timeline = getAngularService('Timeline');
 
@@ -65,7 +66,7 @@ const LabelTab = () => {
       if (!appConfig) return;
       showPlaces = appConfig.survey_info?.buttons?.['place-notes'];
       getLabelOptions(appConfig).then((labelOptions) => setLabelOptions(labelOptions));
-
+      getUserCustomModes().then((res) => setCustomModes(res['modes'] as string[]));
       // we will show filters if 'additions' are not configured
       // https://github.com/e-mission/e-mission-docs/issues/894
       if (appConfig.survey_info?.buttons == undefined) {
@@ -322,6 +323,8 @@ const LabelTab = () => {
     loadSpecificWeek,
     refresh,
     repopulateTimelineEntry,
+    customModes,
+    setCustomModes,
   };
 
   const Tab = createStackNavigator();

www/js/diary/LabelTabContext.ts

@@ -1,4 +1,4 @@
-import { createContext } from 'react';
+import { Dispatch, SetStateAction, createContext } from 'react';
 import { TimelineEntry, UserInputEntry } from '../types/diaryTypes';
 import { LabelOption } from '../survey/multilabel/confirmHelper';
 
@@ -34,6 +34,8 @@ type ContextProps = {
   loadSpecificWeek: any; // TODO
   refresh: any; // TODO
   repopulateTimelineEntry: any; // TODO
+  customModes: string[];
+  setCustomModes: Dispatch<SetStateAction<string[]>>;
 };
 
 export default createContext<ContextProps>(null);

www/js/services/commHelper.ts

@@ -229,3 +229,32 @@ export function putOne(key, data) {
     throw error;
   });
 }
+
+export function getUserCustomModes() {
+  return new Promise((rs, rj) => {
+    window['cordova'].plugins.BEMServerComm.getUserPersonalData('/mode/get', rs, rj);
+  }).catch((error) => {
+    error = 'While getting modes, ' + error;
+    throw error;
+  });
+}
+
+export function updateUserCustomMode(oldMode, newMode, isNewModeMustAdded) {
+  const updatedMode = {
+    old_mode: oldMode,
+    new_mode: newMode,
+    is_new_mode_must_added: isNewModeMustAdded,
+  };
+  return new Promise((rs, rj) => {
+    window['cordova'].plugins.BEMServerComm.postUserPersonalData(
+      '/mode/update',
+      'updated_mode',
+      updatedMode,
+      rs,
+      rj,
+    );
+  }).catch((error) => {
+    error = 'While putting one mode, ' + error;
+    throw error;
+  });
+}

www/js/survey/multilabel/MultiLabelButtonGroup.tsx

@@ -13,6 +13,7 @@ import {
   RadioButton,
   Button,
   TextInput,
+  Divider,
 } from 'react-native-paper';
 import DiaryButton from '../../components/DiaryButton';
 import { useTranslation } from 'react-i18next';
@@ -23,29 +24,29 @@ import {
   getLabelInputs,
   inferFinalLabels,
   labelInputDetailsForTrip,
+  labelKeyToReadable,
   labelKeyToRichMode,
   readableLabelToKey,
   verifiabilityForTrip,
 } from './confirmHelper';
 import useAppConfig from '../../useAppConfig';
+import { updateUserCustomMode } from '../../services/commHelper';
 
 const MultilabelButtonGroup = ({ trip, buttonsInline = false }) => {
   const { colors } = useTheme();
   const { t } = useTranslation();
   const appConfig = useAppConfig();
-  const { repopulateTimelineEntry, labelOptions, timelineLabelMap } = useContext(LabelTabContext);
+  const { repopulateTimelineEntry, labelOptions, timelineLabelMap, customModes, setCustomModes } =
+    useContext(LabelTabContext);
   const { height: windowHeight } = useWindowDimensions();
-
   // modal visible for which input type? (mode or purpose or replaced_mode, null if not visible)
   const [modalVisibleFor, setModalVisibleFor] = useState<
     'MODE' | 'PURPOSE' | 'REPLACED_MODE' | null
   >(null);
   const [otherLabel, setOtherLabel] = useState<string | null>(null);
-  const chosenLabel = useMemo<string>(() => {
-    if (otherLabel != null) return 'other';
+  const initialLabel = useMemo<string>(() => {
     return timelineLabelMap[trip._id.$oid]?.[modalVisibleFor]?.value;
-  }, [modalVisibleFor, otherLabel]);
-
+  }, [modalVisibleFor]);
   // to mark 'inferred' labels as 'confirmed'; turn yellow labels blue
   function verifyTrip() {
     const inferredLabelsForTrip = inferFinalLabels(trip, timelineLabelMap[trip._id.$oid]);
@@ -72,19 +73,34 @@ const MultilabelButtonGroup = ({ trip, buttonsInline = false }) => {
     setOtherLabel(null);
   }
 
-  function store(inputType, chosenLabel, isOther) {
-    if (!chosenLabel) return displayErrorMsg('Label is empty');
+  function store(inputType, newLabel, isOther) {
+    if (!newLabel) return displayErrorMsg('Label is empty');
     if (isOther) {
       /* Let's make the value for user entered inputs look consistent with our other values
        (i.e. lowercase, and with underscores instead of spaces) */
-      chosenLabel = readableLabelToKey(chosenLabel);
+      newLabel = readableLabelToKey(newLabel);
+    }
+    // If a user saves a new customized mode or makes changes to/from customized modes, the modes need to be updated.
+    if (isOther || customModes.indexOf(initialLabel) > -1 || customModes.indexOf(newLabel) > -1) {
+      if (inputType === 'MODE') {
+        updateUserCustomMode(initialLabel ?? '', newLabel, isOther)
+          .then((res) => {
+            setCustomModes(res['modes'] as string[]);
+            logDebug('Successfuly stored custom mode ' + JSON.stringify(res));
+          })
+          .catch((e) => {
+            displayErrorMsg(e, 'Create Mode Error');
+          });
+      }
+      if (inputType === 'PURPOSE') {
+        // TODO : update custom purpose
+      }
     }
     const inputDataToStore = {
       start_ts: trip.start_ts,
       end_ts: trip.end_ts,
-      label: chosenLabel,
+      label: newLabel,
     };
-
     const storageKey = getLabelInputDetails()[inputType].key;
     window['cordova'].plugins.BEMUserCache.putMessage(storageKey, inputDataToStore).then(() => {
       dismiss();
@@ -94,6 +110,7 @@ const MultilabelButtonGroup = ({ trip, buttonsInline = false }) => {
   }
 
   const tripInputDetails = labelInputDetailsForTrip(timelineLabelMap[trip._id.$oid], appConfig);
+
   return (
     <>
       <View style={{ flexDirection: 'row', alignItems: 'center' }}>
@@ -151,16 +168,46 @@ const MultilabelButtonGroup = ({ trip, buttonsInline = false }) => {
             </Dialog.Title>
             <Dialog.Content style={{ maxHeight: windowHeight / 2, paddingBottom: 0 }}>
               <ScrollView style={{ paddingBottom: 24 }}>
-                <RadioButton.Group onValueChange={(val) => onChooseLabel(val)} value={chosenLabel}>
-                  {labelOptions?.[modalVisibleFor]?.map((o, i) => (
-                    // @ts-ignore
-                    <RadioButton.Item
-                      key={i}
-                      label={t(o.text)}
-                      value={o.value}
-                      style={{ paddingVertical: 2 }}
-                    />
-                  ))}
+                <Text style={{ fontSize: 12, color: colors.onSurface, paddingVertical: 4 }}>
+                  {modalVisibleFor === 'MODE' && t('trip-confirm.default-mode')}
+                  {modalVisibleFor === 'PURPOSE' && t('trip-confirm.default-purpose')}
+                </Text>
+                <RadioButton.Group onValueChange={(val) => onChooseLabel(val)} value={initialLabel}>
+                  {labelOptions?.[modalVisibleFor]?.map((o, i) => {
+                    const radioItemForOption = (
+                      <RadioButton.Item
+                        key={i}
+                        label={t(o.text)}
+                        value={o.value}
+                        style={{ paddingVertical: 2 }}
+                      />
+                    );
+                    /* if this is the 'other' option and there are some custom modes,
+        show the custom modes section before 'other' */
+                    if (modalVisibleFor == 'MODE' && o.value == 'other' && customModes?.length) {
+                      return (
+                        <>
+                          <Divider style={{ marginVertical: 10 }} />
+                          <Text
+                            style={{ fontSize: 12, color: colors.onSurface, paddingVertical: 4 }}>
+                            {t('trip-confirm.custom-mode')}
+                          </Text>
+                          {customModes.map((key, i) => (
+                            <RadioButton.Item
+                              key={i}
+                              label={labelKeyToReadable(key)}
+                              value={key}
+                              style={{ paddingVertical: 2 }}
+                            />
+                          ))}
+                          <Divider style={{ marginVertical: 10 }} />
+                          {radioItemForOption}
+                        </>
+                      );
+                    }
+                    // otherwise, just show the radio item as normal
+                    return radioItemForOption;
+                  })}
                 </RadioButton.Group>
               </ScrollView>
             </Dialog.Content>
@@ -172,6 +219,7 @@ const MultilabelButtonGroup = ({ trip, buttonsInline = false }) => {
                   })}
                   value={otherLabel || ''}
                   onChangeText={(t) => setOtherLabel(t)}
+                  maxLength={25}
                 />
                 <Dialog.Actions>
                   <Button onPress={() => store(modalVisibleFor, otherLabel, true)}>