Espaces de travail

Les espaces de travail sont des panneaux latéraux qui glissent depuis le côté droit de l’écran, généralement utilisés pour les formulaires et les vues détaillées dans le dossier patient. Ils fournissent un moyen cohérent d’afficher des informations contextuelles et des formulaires sans naviguer loin de la page actuelle.

• Les nouveaux espaces de travail doivent utiliser Workspace v2. Pour les espaces de travail généraux, typez le composant avec Workspace2DefinitionProps de @openmrs/esm-framework. Pour les espaces de travail du dossier patient, utilisez PatientWorkspace2DefinitionProps de @openmrs/esm-patient-common-lib afin que le composant reçoive les props de groupe du dossier patient :

  import { Workspace2 } from '@openmrs/esm-framework';
  import { type PatientWorkspace2DefinitionProps } from '@openmrs/esm-patient-common-lib';
   
  interface MyWorkspaceProps {
    itemId?: string;
  }
   
  export default function MyWorkspace({
    closeWorkspace,
    workspaceProps,
    groupProps,
  }: PatientWorkspace2DefinitionProps<MyWorkspaceProps, object>) {
    const { itemId } = workspaceProps ?? {};
    const patientUuid = groupProps?.patientUuid;
    const hasUnsavedChanges = false;
   
    return (
      <Workspace2 title={t('myWorkspace', 'Mon espace de travail')} hasUnsavedChanges={hasUnsavedChanges}>
        {/* Utilisez patientUuid et itemId pour afficher le contenu de l'espace de travail */}
      </Workspace2>
    );
  }

• Utilisez la prop hasUnsavedChanges de Workspace2 pour avertir les utilisateurs avant de fermer un espace de travail avec des modifications non enregistrées. Pour les formulaires, reliez-la à l’état isDirty de React Hook Form :

  const {
    formState: { isDirty },
  } = useForm(...);
   
  return (
    <Workspace2 title={t('editItem', 'Modifier l'élément')} hasUnsavedChanges={isDirty}>
      {/* Contenu du formulaire */}
    </Workspace2>
  );

  Pour les espaces de travail non-formulaires, vous pouvez utiliser n’importe quelle condition qui indique des modifications non enregistrées :

  <Workspace2 title={t('editFlags', 'Modifier les indicateurs')} hasUnsavedChanges={pendingChanges.size > 0}>
    {/* Contenu de l'espace de travail */}
  </Workspace2>

• Utilisez closeWorkspace({ discardUnsavedChanges: true }) après un enregistrement réussi, et closeWorkspace() lorsque l’utilisateur annule ou ferme sans enregistrer :

  const handleSave = async () => {
    try {
      await saveData();
      await mutate(); // Mettre à jour le cache SWR
      await closeWorkspace({ discardUnsavedChanges: true });
      showSnackbar({ title: t('saved', 'Enregistré avec succès') });
    } catch (error) {
      showSnackbar({
        kind: 'error',
        title: t('errorSaving', 'Erreur lors de l'enregistrement'),
        subtitle: error instanceof Error ? error.message : t('unknownError', 'Erreur inconnue'),
      });
    }
  };
   
  // Bouton d'annulation
  <Button kind="secondary" onClick={() => closeWorkspace()}>
    {t('cancel', 'Annuler')}
  </Button>

• Exportez le cycle de vie de l’espace de travail depuis index.ts, puis enregistrez l’espace de travail et sa fenêtre dans routes.json. La valeur component dans routes.json doit correspondre au nom du cycle de vie exporté :

  export const myWorkspace = getAsyncLifecycle(
    () => import('./my-workspace.workspace'),
    options
  );

  {
    "workspaces2": [
      {
        "name": "my-workspace",
        "component": "myWorkspace",
        "window": "my-workspace-window"
      }
    ],
    "workspaceWindows2": [
      {
        "name": "my-workspace-window",
        "group": "patient-chart",
        "width": "narrow",
        "canMaximize": true
      }
    ]
  }

• Utilisez launchWorkspace2 pour ouvrir les espaces de travail Workspace v2. Si l’espace de travail nécessite une visite active, utilisez les helpers patient communs comme useLaunchWorkspaceRequiringVisit lorsque c’est approprié :

  import { launchWorkspace2 } from '@openmrs/esm-framework';
   
  launchWorkspace2('my-workspace', { itemId });

• Les fichiers d’espace de travail doivent utiliser le suffixe .workspace.tsx pour indiquer clairement leur objectif. Si l’espace de travail contient des chaînes traduisibles, vérifiez que le script extract-translations du package inclut src/**/*.workspace.tsx.

• Vous pouvez utiliser des composants ExtensionSlot dans les espaces de travail pour permettre à d’autres modules d’étendre l’espace de travail avec des fonctionnalités supplémentaires :

  import { ExtensionSlot } from '@openmrs/esm-framework';
   
  <ExtensionSlot 
    name="my-workspace-header-slot" 
    state={{ patientUuid, formData }} 
  />

• Les formulaires d’espace de travail doivent gérer à la fois les modes de création et d’édition lorsque c’est approprié. Utilisez une logique conditionnelle basée sur le fait qu’un ID ou des données existantes sont fournis :

  const isEditMode = Boolean(itemId);
  const existingItem = isEditMode 
    ? data?.find(item => item.id === itemId)
    : null;
   
  const defaultValues = isEditMode && existingItem
    ? { name: existingItem.name, ...existingItem }
    : { name: '', ...emptyDefaults };