feat(dashboard): affiche une petite icône "description" lorsque une a…

…ction/consultation a le champ "description" de renseigné
SocialGouv · Oct 5, 2023 · 365767a · 365767a
1 parent a918023
commit 365767a
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 3 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/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">
                         👪
@@ -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">
                         👪

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">
                     👪