Création d’espaces de travail

Pour créer un espace de travail, implémentez un composant React et enregistrez-le dans le système Workspace v2 dans routes.json.

Composant d’espace de travail

Les composants Workspace v2 reçoivent Workspace2DefinitionProps depuis @openmrs/esm-framework. Les props personnalisées passées au lancement sont disponibles dans workspaceProps; les contextes partagés de fenêtre et de groupe sont disponibles dans windowProps et groupProps; et le composant peut se fermer avec closeWorkspace.

Le même objet de props inclut aussi launchChildWorkspace, workspaceName, windowName, isRootWorkspace et showActionMenu. Utilisez launchChildWorkspace uniquement depuis un espace de travail ouvert lorsque vous voulez pousser un autre espace de travail dans la même pile de fenêtre. Utilisez launchWorkspace2 pour les lancements de premier niveau depuis des boutons, des pages ou d’autres parties de l’app.

Enveloppez le contenu de l’espace de travail dans <Workspace2>. Ce composant gère l’en-tête, le titre, les contrôles d’agrandissement et de fermeture, ainsi que l’état des changements non enregistrés.

// gastrodynamics.workspace.tsx
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, ButtonSet, Form, TextInput } from '@carbon/react';
import { Workspace2, type Workspace2DefinitionProps } from '@openmrs/esm-framework';
import { postGastrodynamicsForm } from './gastrodynamics.resource';
import styles from './gastrodynamics-form.module.scss';
 
interface GastrodynamicsWorkspaceProps {
  patientUuid: string;
}
 
export default function GastrodynamicsWorkspace({
  workspaceProps,
  closeWorkspace,
}: Workspace2DefinitionProps<GastrodynamicsWorkspaceProps>) {
  const { t } = useTranslation();
  const [textValue, setTextValue] = useState('');
  const patientUuid = workspaceProps?.patientUuid;
 
  if (!patientUuid) {
    return null;
  }
 
  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    await postGastrodynamicsForm(patientUuid, textValue, new AbortController());
    await closeWorkspace({ discardUnsavedChanges: true });
  };
 
  return (
    <Workspace2 title={t('gastrodynamics', 'Gastrodynamics')} hasUnsavedChanges={textValue.length > 0}>
      <Form className={styles.form} onSubmit={handleSubmit}>
        <TextInput
          id="howsThePlumbing"
          labelText={t('howsThePlumbing', "How's the plumbing?")}
          onChange={(event) => setTextValue(event.target.value)}
          value={textValue}
        />
        <ButtonSet>
          <Button
            className={styles.button}
            kind="secondary"
            onClick={() => void closeWorkspace({ discardUnsavedChanges: true })}
          >
            {t('discard', 'Discard')}
          </Button>
          <Button className={styles.button} kind="primary" type="submit">
            {t('submit', 'Submit')}
          </Button>
        </ButtonSet>
      </Form>
    </Workspace2>
  );
}

Enregistrement

Enregistrez l’espace de travail dans routes.json avec workspaces2. Chaque espace de travail doit appartenir à une fenêtre d’espace de travail, et chaque fenêtre doit appartenir à un groupe.

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

Si votre application possède le groupe, déclarez-le dans workspaceGroups2 :

{
  "workspaceGroups2": [
    {
      "name": "gastrodynamics",
      "scopePattern": "^/home/gastrodynamics",
      "overlay": true,
      "persistence": "closable"
    }
  ]
}

La valeur width d’une fenêtre peut être narrow, wider ou extra-wide. Ajouter icon à une fenêtre active le menu d’actions du groupe d’espaces de travail et enregistre le composant d’icône comme extension dans l’emplacement nommé d’après le groupe.

La propriété persistence du groupe contrôle la durée d’ouverture du groupe et le comportement du menu d’actions. Le comportement par défaut est app-wide : le groupe peut garder plusieurs fenêtres ouvertes et se ferme lors d’un changement d’app ou de portée. Utilisez persistence: "closable" pour les flux ciblés qui doivent afficher un bouton de fermeture du groupe; lorsqu’une autre fenêtre d’un groupe closable est lancée, O3 vérifie les changements non enregistrés puis ferme les autres fenêtres de ce groupe.

scopePattern est une expression régulière comparée aux pathnames de l’ancienne et de la nouvelle URL lors d’une navigation dans la même app. S’il est omis, le groupe ne se ferme que lors de la navigation vers une autre app. S’il est défini, O3 ferme le groupe lorsque l’une des deux URL ne correspond plus au pattern ; si le pattern contient des groupes de capture, O3 ferme aussi le groupe lorsque les valeurs capturées changent. Ancrez le pattern avec ^ lorsque le pattern ne doit correspondre qu’à un préfixe de route.

Exportez ensuite le composant d’espace de travail depuis index.ts :

import { getAsyncLifecycle } from '@openmrs/esm-framework';
 
const moduleName = '@myorg/esm-gastrodynamics-app';
 
const options = {
  featureName: 'gastrodynamics',
  moduleName,
};
 
export const gastrodynamicsWorkspace = getAsyncLifecycle(
  () => import('./gastrodynamics.workspace'),
  options,
);

Après l’enregistrement, lancez l’espace de travail avec launchWorkspace2('gastrodynamics-form-workspace', props).