Mettre à jour les 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 mettre à jour un enregistrement de données existant et le soumettre à un service REST.

Objectifs

Dans ce tutoriel, vous apprendrez à mettre à jour un enregistrement de données existant et à le soumettre à un service REST.

Prérequis

Environnement de développement configuré pour créer des applications Oracle JET Virtual DOM incluant une installation de Node.js
Achèvement du tutoriel précédent dans ce parcours de formation, Créer un formulaire pour créer des enregistrements de données dans une application Oracle JET Virtual DOM

Tâche 1 : Créer des composants pour gérer les informations de formulaire

Créez un composant qui affichera une boîte de dialogue pour appeler la fonctionnalité de mise à jour d'un enregistrement.

Accédez au répertoire JET-Virtual-DOM-app/src/components/ActivityItem, créez un fichier EditItemDialog.tsx et ouvrez-le dans un éditeur.

Ajoutez les entrées d'espace réservé qui définissent un nom de fonction (EditItemDialog) pour le nouveau composant.

import { h } from "preact";

type Props = {
  message?: string;
};

const EditItemDialog = (props: Props) => {
  return (
    <div class="oj-web-applayout-max-width oj-web-applayout-content">
      <p>content</p>
    </div>
  );
};

export default EditItemDialog;

Tâche 2 : Gérer l'ouverture du dialogue

Déclarez le type et la fonction du composant ItemActionsContainer pour appeler le composant EditItemDialog qui contient la fonctionnalité permettant de mettre à jour un enregistrement.

Accédez au répertoire JET-Virtual-DOM-app/src/components/ActivityItem et ouvrez le fichier ItemActionsContainer.tsx.

En haut du fichier, importez les hooks useState et useEffect Preact, définissez les propriétés supplémentaires dans un alias de type Props dont vous avez besoin pour utiliser le composant EditItemDialog, puis définissez un alias de type Item.

 import { h } from "preact";
 import "ojs/ojbutton";
 import { useState, useEffect } from "preact/hooks";

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

 type Item = {
     id: number;
     name: string;
     short_desc?: string;
     price?: number;
     quantity?: number;
     quantity_shipped?: number;
     quantity_instock?: number;
     activity_id?: number;
     image?: string;
 };

Avant l'instruction return, utilisez les points d'accrochage Preact que vous avez importés pour déterminer si un élément d'activité est sélectionné.

 const ItemActionsContainer = (props: Props) => {
     const [hideActions, setHideActions] = useState<boolean>(true);

         if (props.itemSelected?.id) {
     console.log("Selected: " + JSON.stringify(props.itemSelected));
     }

     useEffect(() => {
     if (props.itemSelected?.id) {
         setHideActions(false);
     } else {
         setHideActions(true);
     }
     }, [props.itemSelected]);

     return (

Dans l'instruction return, ajoutez un nouvel élément oj-button avec un attribut onojAction qui référence la propriété edit.

const ItemActionsContainer = (props: Props) => {
 return (
   <div>
     <oj-button id="createButton" onojAction={props.create}>Create</oj-button>
     <oj-button id="updateButton" disabled={hideActions} onojAction={props.edit}>Update</oj-button>
   </div>

Enregistrez le fichier ItemActionsContainer.tsx. Votre code doit être similaire à ItemActionsContainer.tsx.txt

En haut du fichier EditItemDialog.tsx, importez les modules du composant de dialogue Oracle JET, ainsi que les hooks useRef, useEffect, MutableRef et useState Preact.

import { h } from "preact";
import { useRef, useEffect, useState, MutableRef  } from "preact/hooks";
import "ojs/ojdialog";
import { ojDialog } from "ojs/ojdialog";

Dans l'alias de type Props, créez les propriétés suivantes.

type Props = {
   isOpened: boolean;
   closeDialog: (ref: MutableRef<ojDialog>, type: string) => void;
   editItem: (data: Partial<Item>, ref: MutableRef<ojDialog>) => void;
   itemData: Partial<Item>;
 };

Dans l'instruction return, remplacez l'élément div existant par un élément span qui encapsule l'élément personnalisé oj-dialog.

 return (
     <span>
     <oj-dialog id="editDialog" ref={editDialogRef as MutableRef<ojDialog>} 
                 dialogTitle="Update Item Details" onojClose={closeDialog} cancelBehavior="icon">
         <div slot="body">
         <oj-label-value labelEdge="inside">
             <oj-label for="itemid" slot="label">
             Item ID
             </oj-label>
             <div id="itemid" slot="value" class="slot-line">
             {editFormData?.id}
             </div>
         </oj-label-value>
     <oj-form-layout>
         <oj-input-text id="name" labelHint="Name" onvalueChanged={onChangeHandler} value={editFormData?.name}></oj-input-text>
         <oj-input-text id="price" labelHint="Price" onvalueChanged={onChangeHandler} value={editFormData?.price}></oj-input-text>
         <oj-input-text id="short_desc" labelHint="Description" 
                     onvalueChanged={onChangeHandler} value={editFormData?.short_desc}></oj-input-text>
         </oj-form-layout>
         </div>
         <div slot="footer">
         <oj-button id="submitBtn" onojAction={editItem}>
             Submit
         </oj-button>
         </div>
     </oj-dialog>
 </span>
 );

Avant l'instruction return, ajoutez les méthodes dont les valeurs d'attribut figurent dans les éléments personnalisés enfant de la référence d'élément personnalisé oj-dialog. Par exemple, la méthode onChangeHandler est appelée lorsqu'un composant oj-input-text détecte une modification via son attribut onvalueChanged.

 const EditItemDialog = (props: Props) => {
     const editDialogRef = useRef<ojDialog>();
     const [editFormData, setEditFormData] = useState<Partial<Item>>({});

     const onChangeHandler = (event: any) => {
     if (event.detail.updatedFrom === "internal") {
         setEditFormData({
         ...editFormData,
         [event.currentTarget.id]: event.detail.value,
         });
     }
     };

     const closeDialog = () => {
     props.closeDialog(editDialogRef as MutableRef<ojDialog>, "edit");
     };

     const editItem = () => {
     console.log("data: " + JSON.stringify(editFormData));
     props.editItem(editFormData, editDialogRef as MutableRef<ojDialog>);
     };

     useEffect(() => {
     setEditFormData(props.itemData);
     props.isOpened ? editDialogRef.current?.open() : editDialogRef.current?.close();
     }, [props.isOpened]);

     return (

Avant la déclaration de la fonction EditItemDialog, définissez un alias de type Item qui inclut des champs pour les données que vous mettez à jour et envoyez au service REST.

type Item = {
  id: number;
  name: string | undefined;
  short_desc?: string;
  price?: number;
  quantity?: number;
  quantity_shipped?: number;
  quantity_instock?: number;
  activity_id?: number;
  image?: string;
 };

 const EditItemDialog = (props: Props) => {

Enregistrez le fichier EditItemDialog.tsx. Votre code doit être similaire à EditItemDialog.tsx.txt

Tâche 3 : Consommer le composant EditItemDialog

Ouvrez le fichier ActivityItemContainer.tsx et importez le composant EditItemDialog que vous avez créé dans la dernière tâche, plus le hook MutableRef de Preact et le module Oracle JET pour le composant de dialogue.
```
 import { useState, useCallback, MutableRef, useRef } from "preact/hooks";
 import EditItemDialog from "./EditItemDialog";
```

Dans l'alias de type Props, mettez à jour l'entrée pour data afin de prendre en charge le type any pour RESTDataProvider, et supprimez ou mettez en commentaire le type ActivityItem que le composant n'utilise plus.

 type Props = {
   data?: RESTDataProvider<any, any>;
   selectedActivity: Item | null;
  	  onItemChanged: (item: Item) => void;
 };

// type ActivityItem = {
 //   id: number;
 //   name: string;
 //   items: Array<Item>;
 //   short_desc: string;
 //   image: string;
 // };

Dans l'instruction return, mettez à jour l'élément ItemActionsContainer avec les valeurs d'attribut itemSelected et edit. Après l'élément CreateNewItemDialog, ajoutez un nouvel élément pour le composant EditItemDialog que vous avez importé.

 <div id="container">
     <h3>Activity Items</h3>
       <ItemActionsContainer create={openCreateDialog} itemSelected={activityItemValue} edit={openEditDialog} />
       . . . 
</div>
 <CreateNewItemDialog isOpened={isCreateOpened} createNewItem={createItem} closeDialog={handleDialogClose} />
 <EditItemDialog isOpened={isEditOpened} editItem={editItem} closeDialog={handleDialogClose} itemData={itemData} />
  . . . 

Avant l'instruction return, ajoutez la fonction openEditDialog pour ouvrir la boîte de dialogue de modification et la fonction editItem pour envoyer l'élément d'activité mis à jour au service REST.

 const openEditDialog = () => {
     console.log("Item: " + JSON.stringify(itemData));
     setIsEditOpened(true);
     console.log("Edit dialog opened");
     };

 const editItem = async (newItemData:Partial<Item>, editDialogRef = useRef<ojDialog>()) => {
     if (newItemData != null) {
     const row = {
         itemId: newItemData.id,
         name: newItemData.name,
         price: newItemData.price,
         short_desc: newItemData.short_desc,
     };

     // Create and send request to update row on rest service
     const request = new Request(`${restServerURLItems}${itemData.id}`, {
         headers: new Headers({
         "Content-type": "application/json; charset=UTF-8",
         }),
         body: JSON.stringify(row),
         method: "PUT",
     });
     const response = await fetch(request);
     const updatedRow = await response.json();

     // Create update mutate event and call mutate method
     // to notify dataprovider consumers that a row has been
     // updated
     const updatedRowKey = itemData.id;
     const updatedRowMetaData = { key: updatedRowKey };
     props.data?.mutate({
         update: {
         data: [updatedRow],
         keys: new Set([updatedRowKey]),
         metadata: [updatedRowMetaData],
         },
     });
     } // End if statement
     console.log("Edited item");
     editDialogRef.current?.close();
     };

Enregistrez le fichier ActivityItemContainer.tsx. Votre code doit être similaire à ActivityItemContainer.tsx.txt

Tâche 4 : tester le code et mettre à jour un enregistrement

Dans la fenêtre de terminal, accédez au répertoire JET-Virtual-DOM-app et exécutez l'application DOM virtuelle.
```
 npx ojet serve
```
Dans le navigateur, affichez les modifications dynamiques dans votre application DOM virtuelle.
Dans l'application DOM virtuelle, cliquez sur l'activité Baseball, puis sur l'élément SureFire Ball (Ensemble de 4).
Cliquez sur le bouton Mettre à jour.

La boîte de dialogue Mettre à jour les détails de l'élément apparaît.
Remplacez le prix 20.5 par 21, puis cliquez sur Soumettre.

La section est actualisée et le prix de l'article a été mis à jour.
Fermez la fenêtre ou l'onglet du navigateur qui affiche votre application DOM virtuelle en cours d'exécution.
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

Passez au tutoriel suivant de ce module.

Ce tutoriel fait partie du module Opérations CRUD à l'aide d'un service REST.

Extraire des données à partir de l'API REST dans Oracle JET
Créer un formulaire pour créer des enregistrements de données dans une application Oracle JET Virtual DOM
Mettre à jour les enregistrements de données dans une application Oracle JET Virtual DOM
Supprimer des enregistrements de données dans une application Oracle JET Virtual DOM

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

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.

Informations relatives au titre et au copyright

Update data records in an Oracle JET virtual DOM app

F70658-02

Oracle et/ou ses affiliés.