feat/show description logo in list (#1703)

* feat(dashboard): affiche les Autres pseudos dans les tableaux de passages/rencontres/actions/consultations des comptes rendus * feat(dashboard): affiche une petite icône "description" lorsque une action/consultation a le champ "description" de renseigné
SocialGouv · Oct 5, 2023 · 2c1193a · 2c1193a
1 parent 89e2e93
commit 2c1193a
Show file tree

Hide file tree

Showing 10 changed files with 55 additions and 11 deletions.
diff --git a/dashboard/src/assets/icons/description-icon.svg b/dashboard/src/assets/icons/description-icon.svg
diff --git a/dashboard/src/components/ActionsCalendar.js b/dashboard/src/components/ActionsCalendar.js
@@ -14,6 +14,7 @@ import { CANCEL, DONE, sortActionsOrConsultations } from '../recoil/actions';
 import TagTeam from './TagTeam';
 import { useLocalStorage } from '../services/useLocalStorage';
 import TabsNav from './tailwind/TabsNav';
+import DescriptionIcon from './DescriptionIcon';
 
 const ActionsCalendar = ({ actions, isNightSession, columns = ['Heure', 'Nom', 'Personne suivie', 'Créée le', 'Statut', 'Équipe(s) en charge'] }) => {
   const history = useHistory();
@@ -118,6 +119,7 @@ const ActionsCalendar = ({ actions, isNightSession, columns = ['Heure', 'Nom', '
             return (
               <div className="tw-flex tw-items-center tw-justify-center tw-gap-1">
                 {!!actionOrConsult.urgent && <ExclamationMarkButton />}
+                {!!actionOrConsult.description && <DescriptionIcon />}
                 {!!organisation.groupsEnabled && !!actionOrConsult.group && (
                   <span className="tw-text-3xl" aria-label="Action familiale" title="Action familiale">
                     👪

diff --git a/dashboard/src/components/ActionsSortableList.js b/dashboard/src/components/ActionsSortableList.js
@@ -17,6 +17,7 @@ import TagTeam from './TagTeam';
 import { useLocalStorage } from '../services/useLocalStorage';
 import Page from './pagination';
 import useSearchParamState from '../services/useSearchParamState';
+import DescriptionIcon from './DescriptionIcon';
 
 const ActionsSortableList = ({ data, limit }) => {
   useTitle('Agenda');
@@ -72,6 +73,7 @@ const ActionsSortableList = ({ data, limit }) => {
               return (
                 <div className="tw-flex tw-items-center tw-justify-center tw-gap-1">
                   {!!actionOrConsult.urgent && <ExclamationMarkButton />}
+                  {!!actionOrConsult.description && <DescriptionIcon />}
                   {!!organisation.groupsEnabled && !!actionOrConsult.group && (
                     <span className="tw-text-3xl" aria-label="Action familiale" title="Action familiale">
                       👪

diff --git a/dashboard/src/components/ActionsWeekly.js b/dashboard/src/components/ActionsWeekly.js
@@ -12,6 +12,7 @@ import { organisationState, userState } from '../recoil/auth';
 import TagTeam from './TagTeam';
 import useSearchParamState from '../services/useSearchParamState';
 import { disableConsultationRow } from '../recoil/consultations';
+import DescriptionIcon from './DescriptionIcon';
 
 // TODO: remove inline style when UI is stabilized.
 

diff --git a/dashboard/src/components/DescriptionIcon.js b/dashboard/src/components/DescriptionIcon.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import openNewWindow from '../assets/icons/description-icon.svg';
+
+const DescriptionIcon = () => (
+  <div className="tw-ml-1 tw-inline-block tw-h-4 tw-w-4 tw-bg-contain tw-text-gray-300" style={{ backgroundImage: `url(${openNewWindow})` }} />
+);
+
+export default DescriptionIcon;
diff --git a/dashboard/src/components/PersonName.js b/dashboard/src/components/PersonName.js
@@ -6,7 +6,7 @@ import { personsObjectSelector } from '../recoil/selectors';
 export default function PersonName({ item, onClick = null, redirectToTab = 'Résumé' }) {
   const history = useHistory();
   const persons = useRecoilValue(personsObjectSelector);
-  const personName = item?.personPopulated?.name || persons[item.person]?.name;
+  const person = item?.personPopulated ?? persons[item.person];
   return (
     <span
       className="hover:tw-cursor-zoom-in hover:tw-bg-yellow-400"
@@ -15,7 +15,8 @@ export default function PersonName({ item, onClick = null, redirectToTab = 'Rés
         if (onClick) return onClick();
         if (item.person) history.push(`/person/${item.person}?tab=${redirectToTab}`);
       }}>
-      {personName}
+      {person.name}
+      {person.otherNames ? <small className="tw-text-main75"> - {person.otherNames}</small> : null}
     </span>
   );
 }
diff --git a/dashboard/src/scenes/person/components/Actions.js b/dashboard/src/scenes/person/components/Actions.js
@@ -14,6 +14,7 @@ import { AgendaMutedIcon } from './AgendaMutedIcon';
 import { FullScreenIcon } from './FullScreenIcon';
 import UserName from '../../../components/UserName';
 import { itemsGroupedByPersonSelector } from '../../../recoil/selectors';
+import DescriptionIcon from '../../../components/DescriptionIcon';
 
 const filteredPersonActionsSelector = selectorFamily({
   key: 'filteredPersonActionsSelector',
@@ -185,8 +186,10 @@ const ActionsTable = ({ filteredData }) => {
                     history.push(`?${searchParams.toString()}`);
                   }}>
                   <div className="tw-flex">
-                    <div className="tw-flex-1">
-                      {action.urgent ? <ExclamationMarkButton /> : null} {`${date}${time}`}
+                    <div className="tw-flex tw-flex-1 tw-items-center tw-gap-x-2">
+                      {action.urgent ? <ExclamationMarkButton /> : null}
+                      {action.description ? <DescriptionIcon /> : null}
+                      <span>{`${date}${time}`}</span>
                     </div>
                     <div>
                       <ActionStatus status={action.status} />

diff --git a/dashboard/src/scenes/person/components/Consultations.js b/dashboard/src/scenes/person/components/Consultations.js
@@ -15,6 +15,7 @@ import { AgendaMutedIcon } from './AgendaMutedIcon';
 import { disableConsultationRow } from '../../../recoil/consultations';
 import { FullScreenIcon } from './FullScreenIcon';
 import UserName from '../../../components/UserName';
+import DescriptionIcon from '../../../components/DescriptionIcon';
 
 export const Consultations = ({ person }) => {
   const [fullScreen, setFullScreen] = useState(false);
@@ -184,7 +185,10 @@ const ConsultationsTable = ({ filteredData, person }) => {
                       history.push(`?${searchParams.toString()}`);
                     }}>
                     <div className="tw-flex">
-                      <div className="tw-flex-1">{`${date}${time}`}</div>
+                      <div className="tw-flex-1">
+                        {!!consultation.description && <DescriptionIcon />}
+                        {`${date}${time}`}
+                      </div>
                       <div>
                         <ActionStatus status={consultation.status} />
                       </div>

diff --git a/dashboard/src/scenes/report/view.js b/dashboard/src/scenes/report/view.js
@@ -57,6 +57,7 @@ import { useLocalStorage } from '../../services/useLocalStorage';
 import { arrayOfitemsGroupedByActionSelector, arrayOfitemsGroupedByConsultationSelector, personsObjectSelector } from '../../recoil/selectors';
 import { treatmentsState } from '../../recoil/treatments';
 import { medicalFileState } from '../../recoil/medicalFiles';
+import DescriptionIcon from '../../components/DescriptionIcon';
 
 const getPeriodTitle = (date, nightSession) => {
   if (!nightSession) return `Journée du ${formatDateWithNameOfDay(date)}`;
@@ -1108,6 +1109,7 @@ const ActionCompletedAt = ({ date, status, actions, setSortOrder, setSortBy, sor
                 return (
                   <div className="tw-flex tw-items-center tw-justify-center tw-gap-1">
                     {!!action.urgent && <ExclamationMarkButton />}
+                    {!!action.description && <DescriptionIcon />}
                     {!!organisation.groupsEnabled && !!action.group && (
                       <span className="tw-text-3xl" aria-label="Action familiale" title="Action familiale">
                         👪
@@ -1150,7 +1152,7 @@ const ActionCompletedAt = ({ date, status, actions, setSortOrder, setSortBy, sor
               onSortBy: setSortBy,
               sortBy,
               sortOrder,
-              render: (action) => <PersonName item={action} />,
+              render: (action) => <PersonName showOtherNames item={action} />,
             },
             {
               title: 'Statut',
@@ -1214,6 +1216,7 @@ const ActionCreatedAt = ({ date, actions, setSortOrder, setSortBy, sortBy, sortO
                 return (
                   <div className="tw-flex tw-items-center tw-justify-center tw-gap-1">
                     {!!action.urgent && <ExclamationMarkButton />}
+                    {!!action.description && <DescriptionIcon />}
                     {!!organisation.groupsEnabled && !!action.group && (
                       <span className="tw-text-3xl" aria-label="Action familiale" title="Action familiale">
                         👪
@@ -1256,7 +1259,7 @@ const ActionCreatedAt = ({ date, actions, setSortOrder, setSortBy, sortBy, sortO
               onSortBy: setSortBy,
               sortBy,
               sortOrder,
-              render: (action) => <PersonName item={action} />,
+              render: (action) => <PersonName showOtherNames item={action} />,
             },
             {
               title: 'Statut',
@@ -1358,7 +1361,7 @@ const Consultations = ({ date, status, consultations, setSortOrder, setSortBy, s
               onSortBy: setSortBy,
               sortBy,
               sortOrder,
-              render: (consultation) => <PersonName item={consultation} />,
+              render: (consultation) => <PersonName showOtherNames item={consultation} />,
             },
             {
               title: 'Statut',
@@ -1423,7 +1426,7 @@ const ConsultationsCreatedAt = ({ date, consultations }) => {
             {
               title: 'Personne suivie',
               dataKey: 'person',
-              render: (action) => <PersonName item={action} />,
+              render: (action) => <PersonName showOtherNames item={action} />,
             },
             { title: 'Statut', dataKey: 'status', render: (action) => <ActionStatus status={action.status} /> },
           ]}
@@ -1643,7 +1646,7 @@ const PassagesCreatedAt = ({ date, passages, selectedTeams }) => {
                 title: 'Personne suivie',
                 dataKey: 'person',
                 render: (passage) =>
-                  passage.person ? <PersonName item={passage} /> : <span style={{ opacity: 0.3, fontStyle: 'italic' }}>Anonyme</span>,
+                  passage.person ? <PersonName showOtherNames item={passage} /> : <span style={{ opacity: 0.3, fontStyle: 'italic' }}>Anonyme</span>,
               },
               {
                 title: 'Enregistré par',
@@ -1723,7 +1726,11 @@ const RencontresCreatedAt = ({ date, rencontres, selectedTeams }) => {
                 title: 'Personne suivie',
                 dataKey: 'person',
                 render: (rencontre) =>
-                  rencontre.person ? <PersonName item={rencontre} /> : <span style={{ opacity: 0.3, fontStyle: 'italic' }}>Anonyme</span>,
+                  rencontre.person ? (
+                    <PersonName showOtherNames item={rencontre} />
+                  ) : (
+                    <span style={{ opacity: 0.3, fontStyle: 'italic' }}>Anonyme</span>
+                  ),
               },
               {
                 title: 'Enregistrée par',

diff --git a/dashboard/src/scenes/search/index.js b/dashboard/src/scenes/search/index.js
@@ -29,6 +29,7 @@ import ConsultationButton from '../../components/ConsultationButton';
 import { useLocalStorage } from '../../services/useLocalStorage';
 import { territoryObservationsState } from '../../recoil/territoryObservations';
 import TabsNav from '../../components/tailwind/TabsNav';
+import DescriptionIcon from '../../components/DescriptionIcon';
 
 const personsWithFormattedBirthDateSelector = selector({
   key: 'personsWithFormattedBirthDateSelector',
@@ -271,6 +272,7 @@ const Actions = ({ actions }) => {
             return (
               <div className="tw-flex tw-items-center tw-justify-center tw-gap-1">
                 {!!actionOrConsult.urgent && <ExclamationMarkButton />}
+                {!!actionOrConsult.description && <DescriptionIcon />}
                 {!!organisation.groupsEnabled && !!actionOrConsult.group && (
                   <span className="tw-text-3xl" aria-label="Action familiale" title="Action familiale">
                     👪