Supprimer des enregistrements de données dans une application DOM virtuelle Oracle JET

Présentation

Ce tutoriel explique comment utiliser l'application DOM virtuelle Oracle JavaScript Extension Toolkit (Oracle JET) pour supprimer un enregistrement de données existant et soumettre la modification à un service REST.

Objectifs

Dans ce tutoriel, vous apprendrez à supprimer un enregistrement de données existant et à soumettre la modification à un service REST.

Conditions requises

Tâche 1 : Créer un bouton Supprimer

  1. Naviguez jusqu'au répertoire JET-Virtual-DOM-app/src/components/ActivityItem et ouvrez le fichier ItemActionsContainer.tsx dans un éditeur.

  2. Dans l'alias de type Props, définissez une propriété delete supplémentaire.

    type Props = {
    create: () => void;
    edit: () => void;
    itemSelected: Partial<Item>;
    delete: () => void;
 };

  3. Recherchez l'élément <oj-button id="updateButton" et ajoutez un élément oj-button au-dessous. Réglez l'attribut onojAction à {props.delete} et l'attribut disabled à hideActions.

    return (
   <div>
      <oj-button id="createButton" onojAction={props.create}>Create</oj-button>
      <oj-button id="updateButton" disabled={hideActions} onojAction={props.edit}>Update</oj-button>
      <oj-button id="deleteButton" disabled={hideActions} onojAction={props.delete}>Delete</oj-button>
   </div>

  4. Enregistrez le fichier ItemActionsContainer.tsx.

    Votre code doit ressembler à ce fichier final-ItemActionsContainer.tsx.txt.

Tâche 2 : Gérer la suppression des enregistrements

Utilisez l'API d'extraction et la méthode HTTP DELETE pour supprimer un enregistrement du service REST. Utilisez la méthode mutate de RESTDataProvider pour mettre à jour votre instance RESTDataProvider.

  1. Naviguez jusqu'au répertoire JET-Virtual-DOM-app/src/components/ActivityItem et ouvrez le fichier ActivityItemContainer.tsx dans un éditeur.

  2. Dans la fonction ActivityItemContainer, sous votre code précédent qui met à jour les enregistrements, créez une méthode nommée deleteItem.

    Cette méthode demande à l'utilisateur de confirmer la suppression d'un article et, une fois la confirmation réussie, crée une demande DELETE qu'il envoie au service REST. Si l'opération DELETE réussit, la méthode appelle alors un événement RESTDataProvider mutate pour aviser les consommateurs du fournisseur de données qu'un élément a été supprimé.

    const deleteItem = async () => {
  const really = confirm("Do you really want to delete this item?");
  if (really) {
    // Create and send request to REST service to delete item
    const request = new Request(`${restServerURLItems}${itemData.id}`, {
       method: "DELETE",
     });
    const response = await fetch(request);
    // Call  mutate method to notify dataprovider consumers that an 
    // item has been removed
    if (response.status === 200) {
      const removedRowKey = itemData.id;
      const removedRowMetaData = { key: removedRowKey };

      props.data?.mutate({
        remove: {
          data: [itemData.id],
          keys: new Set([removedRowKey]),
          metadata: [removedRowMetaData],
         },
       });
      } 
      else {
          alert(
             "Delete failed with status " 
             + response.status + " : " + response.statusText
          );
     }
  console.log("Deleted item.");
  } 
  else {
    console.log("OK, we canceled that delete.");
   }
  };

  3. Dans l'énoncé return, mettez à jour l'élément ItemActionsContainer avec un attribut delete.

     <div id="container">
     <h3>Activity Items</h3>
       <ItemActionsContainer edit={openEditDialog} delete={deleteItem} itemSelected={activityItemValue} create={openCreateDialog} />
       . . . 
 </div>

  4. Enregistrez le fichier ActivityItemContainer.tsx.

    Votre code doit ressembler à ce fichier final-delete-ActivityItemContainer.tsx.txt.

Tâche 3 : Exécuter l'application DOM virtuelle et supprimer un enregistrement

  1. Dans la fenêtre de terminal, exécutez votre application DOM virtuelle. 
    npx ojet serve

  2. Dans l'application, cliquez sur l'activité Baseball, puis sur l'élément SureFire Ball (Jeu de 4).

  3. Cliquez sur le bouton Supprimer. Une fenêtre de confirmation s'ouvre.

  4. Cliquez sur OK.

    La section est actualisée et l'élément a été supprimé.

  5. Fermez la fenêtre ou l'onglet du navigateur qui affiche votre application DOM virtuelle en cours d'exécution.

  6. Dans la fenêtre de terminal, appuyez sur Ctrl+C et, si vous y êtes invité, entrez y pour quitter la tâche par lots d'outils Oracle JET.

Tâche 4 : (Facultatif) Exécuter une application DOM virtuelle à partir d'une application restaurée

Si vous souhaitez exécuter l'application DOM virtuelle Oracle JET terminée à partir du code fourni, vous pouvez restaurer l'application à partir du fichier d'archives téléchargé. Pour utiliser une application DOM virtuelle Oracle JET "bloquée et compressée", vous devez restaurer les dépendances de projet, notamment les outils Oracle JET et les bibliothèques et modules requis, dans l'application extraite.

  1. Téléchargez le fichier JET-Virtual-DOM-app-final.zip et extrayez le contenu de l'application terminée dans le répertoire JET-Virtual-DOM-app-final.
  2. Dans la fenêtre de terminal, accédez au répertoire JET-Virtual-DOM-app-final et restaurez l'application DOM virtuelle Oracle JET. 
    npm install
  3. Attendez la confirmation. 
    Success: Restore complete

    L'application est prête à fonctionner.

  4. Exécutez l'application DOM virtuelle et testez-la dans le navigateur. 
    npx ojet serve

  5. Fermez la fenêtre ou l'onglet du navigateur qui affiche votre application DOM virtuelle en cours d'exécution.

  6. Dans la fenêtre de terminal, appuyez sur Ctrl+C et, si vous y êtes invité, entrez y pour quitter la tâche par lots d'outils Oracle JET.

Étape suivante

Ce tutoriel termine le module Opérations CRUD à l'aide d'un service REST dans ce cheminement d'apprentissage sur la création d'applications Web DOM virtuelles.

Vous pouvez passer au tutoriel suivant dans le cheminement d'apprentissage, Configurer un environnement de test dans Oracle JET, dans le module Tests de bout en bout dans Oracle JET.

Vous pouvez également retourner à la page principale du cheminement d'apprentissage DOM virtuel pour accéder à tous les modules de création d'applications DOM virtuelles, ainsi qu'à d'autres cheminements d'apprentissage.

Ressources d'apprentissage supplémentaires

Explorez d'autres laboratoires sur le site docs.oracle.com/learn ou accédez à plus de contenu d'apprentissage gratuit sur le canal Oracle Learning YouTube. De plus, visitez education.oracle.com/learning-explorer pour devenir un explorateur Oracle Learning.

Pour obtenir la documentation sur le produit, visitez Oracle Help Center.