Frontend - truncate overflowying text for timeline notes and status i…

…n a more dynamic way
MTES-MCT · Mar 1, 2024 · 52ac504 · 52ac504
1 parent 5d90856
commit 52ac504
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 42 deletions.
diff --git a/frontend/src/pam/mission/actions/action-note-form.tsx b/frontend/src/pam/mission/actions/action-note-form.tsx
@@ -62,7 +62,7 @@ const ActionNoteForm: React.FC<ActionNoteFormProps> = ({action}) => {
             const updatedData = {
                 missionId: missionId,
                 ...omit(note, '__typename'),
-                [field]: value
+                [field]: value?.trim()
             }
             await mutateNote({variables: {freeNoteAction: updatedData}})
         }

diff --git a/frontend/src/pam/mission/timeline/item/timeline-item-note.tsx b/frontend/src/pam/mission/timeline/item/timeline-item-note.tsx
@@ -24,10 +24,15 @@ const ActionNote: React.FC<MissionTimelineItemProps> = ({action, onClick}) => {
                     <Stack.Item alignSelf="flex-start">
                         <Icon.Note color={THEME.color.charcoal} size={20}/>
                     </Stack.Item>
-                    <Stack.Item alignSelf="flex-start" style={{width: '100%'}}>
-                        <Text as="h3" weight="medium" color={THEME.color.gunMetal}>
+                    <Stack.Item alignSelf="flex-start" style={{maxWidth: 'calc(100% - 3rem)'}}>
+                        <Text as="h3" weight="medium" color={THEME.color.gunMetal} style={{
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                        }}>
                             {capitalize(actionData?.observations) || 'Note libre'}
                         </Text>
+
                     </Stack.Item>
                 </Stack>
             </FlexboxGrid.Item>

diff --git a/frontend/src/pam/mission/timeline/item/timeline-item-status.tsx b/frontend/src/pam/mission/timeline/item/timeline-item-status.tsx
@@ -9,44 +9,39 @@ import { useParams } from 'react-router-dom'
 import { TimelineItemWrapper } from "./timeline-item.tsx";
 
 const ActionStatus: React.FC<{ action: Action; onClick: any }> = ({action, onClick}) => {
-  const {actionId} = useParams()
-  const isSelected = action.id === actionId
-  const actionData = action.data as unknown as NavActionStatus
-  return (
-    <TimelineItemWrapper onClick={onClick} borderWhenSelected={false}>
-      <Stack alignItems="center" spacing="0.5rem">
-        <Stack.Item>
-          <StatusColorTag status={actionData?.status}/>
-        </Stack.Item>
-        <Stack.Item>
-
-          <div
-            style={{
-              whiteSpace: 'nowrap',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              maxWidth: '500px'
-            }}
-          >
-            <Text
-              as="h3"
-              weight="normal"
-              color={isSelected ? THEME.color.charcoal : THEME.color.slateGray}
-              decoration={isSelected ? 'underline' : 'normal'}
-            >
-              <b>{`${mapStatusToText(actionData?.status)} - début${
-                !!actionData?.reason ? ' - ' + statusReasonToHumanString(actionData?.reason) : ''
-              }`}</b>
-              {!!actionData?.observations ? ' - ' + actionData?.observations : ''}
-            </Text>
-          </div>
-        </Stack.Item>
-        <Stack.Item>
-          <Icon.EditUnbordered size={20} color={THEME.color.slateGray}/>
-        </Stack.Item>
-      </Stack>
-    </TimelineItemWrapper>
-  )
+    const {actionId} = useParams()
+    const isSelected = action.id === actionId
+    const actionData = action.data as unknown as NavActionStatus
+    return (
+        <TimelineItemWrapper onClick={onClick} borderWhenSelected={false}>
+            <Stack alignItems="center" spacing="0.5rem" style={{width: '100%'}}>
+                <Stack.Item>
+                    <StatusColorTag status={actionData?.status}/>
+                </Stack.Item>
+                <Stack.Item style={{maxWidth: 'calc(100% - 3rem)'}}>
+                    <Text
+                        as="h3"
+                        weight="normal"
+                        color={isSelected ? THEME.color.charcoal : THEME.color.slateGray}
+                        decoration={isSelected ? 'underline' : 'normal'}
+                        style={{
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                        }}
+                    >
+                        <b>{`${mapStatusToText(actionData?.status)} - début${
+                            !!actionData?.reason ? ' - ' + statusReasonToHumanString(actionData?.reason) : ''
+                        }`}</b>
+                        {!!actionData?.observations ? ' - ' + actionData?.observations : ''}
+                    </Text>
+                </Stack.Item>
+                <Stack.Item>
+                    <Icon.EditUnbordered size={20} color={THEME.color.slateGray}/>
+                </Stack.Item>
+            </Stack>
+        </TimelineItemWrapper>
+    )
 }
 
 export default ActionStatus
diff --git a/frontend/src/pam/mission/timeline/timeline.tsx b/frontend/src/pam/mission/timeline/timeline.tsx
@@ -104,7 +104,8 @@ const MissionTimeline: React.FC<MissionTimelineProps> = ({missionId, onSelectAct
                                                                     </Stack.Item>
                                                                 </Stack>
                                                             </Stack.Item>
-                                                            <Stack.Item style={{width: '100%'}}>
+                                                            <Stack.Item
+                                                                style={{width: '100%', maxWidth: 'calc(100% - 5rem'}}>
                                                                 <MissionTimelineItemContainer
                                                                     actionSource={action.source}
                                                                     actionType={action.type as any}