Merge pull request #4047 from LiteFarmOrg/LF-5170/List_the_locations_on_the_readonly_view

LF-5170: List the locations on the readonly view

Author: kathyavini

packages/webapp/src/components/Task/TaskReadOnly/LocationList.tsx

@@ -0,0 +1,67 @@
+/*
+ *  Copyright 2026 LiteFarm.org
+ *  This file is part of LiteFarm.
+ *
+ *  LiteFarm is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  LiteFarm 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 General Public License for more details, see <<https://www.gnu.org/licenses/>.>
+ */
+
+import { useTranslation } from 'react-i18next';
+import clsx from 'clsx';
+import { Location } from '../../../types';
+import styles from './styles.module.scss';
+import navStyles from '@navStyles';
+
+interface LocationListProps {
+  locations: Location[];
+  isTransplantTask: boolean;
+  selectedLocationIds?: Location['location_id'][];
+}
+
+export default function LocationList({
+  locations,
+  isTransplantTask,
+  selectedLocationIds,
+}: LocationListProps) {
+  const { t } = useTranslation();
+
+  if (!locations?.length) {
+    return null;
+  }
+
+  if (isTransplantTask) {
+    const transplantLocation = locations.find(
+      ({ location_id }) => location_id === selectedLocationIds?.[0],
+    );
+    // When transplanting to the same location, currentLocation becomes transplantLocation
+    const currentLocation =
+      locations.find(({ location_id }) => location_id !== selectedLocationIds?.[0]) ||
+      transplantLocation;
+
+    return (
+      <ul className={clsx(styles.locationList, navStyles.showWhenOffline)}>
+        <li>
+          {t('TASK.CURRENT')}: {currentLocation?.name}
+        </li>
+        <li>
+          {t('TASK.TRANSPLANT')}: {transplantLocation?.name}
+        </li>
+      </ul>
+    );
+  }
+
+  return (
+    <ul className={clsx(styles.locationList, navStyles.showWhenOffline)}>
+      {locations.map((location) => {
+        return <li key={location.location_id}>{location.name}</li>;
+      })}
+    </ul>
+  );
+}

packages/webapp/src/components/Task/TaskReadOnly/index.jsx

@@ -69,6 +69,7 @@ import PureDocumentTile from '../../../containers/Documents/DocumentTile';
 import PureDocumentTileContainer from '../../../containers/Documents/DocumentTile/DocumentTileContainer';
 import RevisionPrompt from '../RevisionPrompt';
 import RevisionInfoText from '../../RevisionInfoText';
+import LocationList from './LocationList';
 
 export default function PureTaskReadOnly({
   onGoBack,
@@ -163,9 +164,9 @@ export default function PureTaskReadOnly({
   const isCurrent = !isCompleted && !isAbandoned;
   const taskStatus = getTaskStatus(task);
   const isRevised = !!task.revision_date;
+  const isTransplantTask = isTaskType(taskType, 'TRANSPLANT_TASK');
 
-  const showTaskNotes =
-    !isTaskType(taskType, 'PLANT_TASK') && !isTaskType(taskType, 'TRANSPLANT_TASK');
+  const showTaskNotes = !isTaskType(taskType, 'PLANT_TASK') && !isTransplantTask;
 
   const [showTaskAssignModal, setShowTaskAssignModal] = useState(false);
   const [showDueDateModal, setShowDueDateModal] = useState(false);
@@ -300,7 +301,12 @@ export default function PureTaskReadOnly({
       {showLocations ? (
         <>
           <Semibold className={styles.taskLocationsTitle}>{t('TASK.LOCATIONS')}</Semibold>
-          {isTaskType(taskType, 'TRANSPLANT_TASK') && (
+          <LocationList
+            isTransplantTask={isTransplantTask}
+            locations={task.locations}
+            selectedLocationIds={task.selectedLocationIds}
+          />
+          {isTransplantTask && (
             <TransplantLocationLabel
               locations={task.locations}
               selectedLocationId={task.selectedLocationIds[0]}

packages/webapp/src/components/Task/TaskReadOnly/styles.module.scss

@@ -143,3 +143,8 @@
   font-style: italic;
   padding-top: 12px;
 }
+
+.locationList {
+  margin-bottom: 20px;
+  list-style-position: inside;
+}

packages/webapp/src/containers/Navigation/styles.module.scss

@@ -32,5 +32,13 @@
     .hideWhenOffline {
       display: none;
     }
+
+    .showWhenOffline {
+      display: block;
+    }
+  }
+
+  .showWhenOffline {
+    display: none;
   }
 }