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

Introduction

Ce tutoriel vous explique comment utiliser votre 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.

Prérequis

Tâche 1 : bouton Créer une suppression

  1. Accédez 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 en dessous. Définissez l'attribut onojAction sur {props.delete} et l'attribut disabled sur 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 d'enregistrements

Utilisez l'API Fetch 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. Accédez 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 le code précédent qui met à jour les enregistrements, créez une méthode appelée deleteItem.

    Cette méthode demande à l'utilisateur de confirmer la suppression d'un élément et, une fois la confirmation effectuée, crée une demande DELETE qu'il envoie au service REST. Si l'opération DELETE réussit, la méthode appelle un événement RESTDataProvider mutate pour informer les destinataires de 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'instruction 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 Virtual DOM 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 (Set of 4).

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

  4. Cliquez ensuite 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 le traitement batch des 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'archive téléchargé. Pour utiliser une application Oracle JET Virtual DOM "stripped and zippée", vous devez restaurer les dépendances de projet, y compris 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 vers 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 Oracle JET Virtual DOM. 
    npm install
  3. Attendez la confirmation. 
    Success: Restore complete

    L'application est prête à être exécutée.

  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 le traitement batch des outils Oracle JET.

Etape suivante

Ce tutoriel conclut le module Opérations CRUD à l'aide d'un service REST dans ce parcours pédagogique sur la création d'applications Web DOM virtuelles.

Vous pouvez passer au tutoriel suivant dans le parcours de formation, Configuration d'un environnement de test dans Oracle JET, dans le module Tests de bout en bout dans Oracle JET.

Vous pouvez également revenir à la page principale du parcours de formation DOM virtuel pour accéder à tous les modules sur la création d'applications DOM virtuelles, ainsi qu'à d'autres parcours de formation.

Ressources de formation supplémentaires

Explorez d'autres ateliers sur le site docs.oracle.com/learn ou accédez à d'autres contenus d'apprentissage gratuits sur le canal Oracle Learning YouTube. En outre, visitez le site education.oracle.com/learning-explorer pour devenir un explorateur Oracle Learning.

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