Mettre à jour les 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 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.

Conditions requises

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.

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

  2. Ajoutez les entrées de paramètre fictif 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 de la boîte de dialogue

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

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

  2. En haut du fichier, importez les crochets useState et useEffect Preact, définissez les propriétés supplémentaires d'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;
 };

  3. Avant l'énoncé return, utilisez les crochets 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 (

  4. Dans l'énoncé 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

  5. En haut du fichier EditItemDialog.tsx, importez les modules pour le composant Oracle JET Dialog, ainsi que les crochets Preact useRef, useEffect, MutableRef et useState.

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

  6. 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>;
 };

  7. Dans l'énoncé 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>
 );

  8. Avant l'énoncé return, ajoutez les méthodes que les valeurs d'attribut dans les éléments personnalisés enfants 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 au moyen de 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 (

  9. 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 : Utiliser le composant EditItemDialog

  1. Ouvrez le fichier ActivityItemContainer.tsx et importez le composant EditItemDialog que vous avez créé lors de la dernière tâche, ainsi que le crochet MutableRef de Preact et le module Oracle JET pour le composant Dialog.

     import { useState, useCallback, MutableRef, useRef } from "preact/hooks";
 import EditItemDialog from "./EditItemDialog";

  2. 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;
 // };

  3. Dans l'énoncé 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} />
  . . .

  4. Avant l'énoncé 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

  1. 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
  2. Dans le navigateur, affichez les modifications dynamiques de votre application DOM virtuelle.
  3. Dans l'application DOM virtuelle, cliquez sur l'activité Baseball, puis sur l'élément SureFire Ball (Jeu de 4).

  4. Cliquez sur le bouton Mettre à jour.

    La boîte de dialogue Mettre à jour les détails de l'élément s'affiche.

  5. Remplacez le prix de 20.5 par 21 et cliquez sur Soumettre.

    La section est actualisée et le prix de l'article a été mis à jour.

    Mettre à jour les détails de l'article

  6. Fermez la fenêtre ou l'onglet du navigateur qui affiche votre application DOM virtuelle en cours d'exécution.
  7. 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

Passez au tutoriel suivant dans ce module.

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

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

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.