Excluir registros de dados em um aplicativo DOM virtual do Oracle JET

Introdução

Este tutorial mostra como usar o aplicativo DOM virtual Oracle JavaScript Extension Toolkit (Oracle JET) para excluir um registro de dados existente e enviar a alteração para um serviço REST.

Objetivos

Neste tutorial, você aprenderá a excluir um registro de dados existente e enviar a alteração para um serviço REST.

Pré-requisitos

Tarefa 1: Criar um Botão Excluir

  1. Navegue até o diretório JET-Virtual-DOM-app/src/components/ActivityItem e abra o arquivo ItemActionsContainer.tsx em um editor.

  2. No alias do tipo Props, defina uma propriedade delete adicional.

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

  3. Localize o elemento <oj-button id="updateButton" e adicione um elemento oj-button abaixo dele. Defina o atributo onojAction como {props.delete} e o atributo disabled como 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. Salve o arquivo ItemActionsContainer.tsx.

    Seu código deve ser semelhante a este arquivo final-ItemActionsContainer.tsx.txt.

Tarefa 2: Tratar a exclusão de registros

Use a API de Extração e o método HTTP DELETE para excluir um registro do serviço REST. Use o método mutate do RESTDataProvider para atualizar sua instância do RESTDataProvider.

  1. Navegue até o diretório JET-Virtual-DOM-app/src/components/ActivityItem e abra o arquivo ActivityItemContainer.tsx em um editor.

  2. Na função ActivityItemContainer, abaixo do código anterior que atualiza registros, crie um método chamado deleteItem.

    Esse método solicita a confirmação do usuário para excluir um item e, após a confirmação bem-sucedida, cria uma solicitação DELETE que ele envia ao serviço REST. Se a operação DELETE for bem-sucedida, o método chamará um evento RESTDataProvider mutate para notificar os consumidores do provedor de dados de que um item foi excluído.

    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. No comando return, atualize o elemento ItemActionsContainer com um atributo delete.

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

  4. Salve o arquivo ActivityItemContainer.tsx.

    Seu código deve ser semelhante a este arquivo final-delete-ActivityItemContainer.tsx.txt.

Tarefa 3: Executar o Aplicativo DOM Virtual e Excluir um Registro

  1. Na janela do terminal, execute seu aplicativo DOM virtual. 
    npx ojet serve

  2. No aplicativo, clique na atividade Baseball e, em seguida, clique no item SureFire Ball (Conjunto de 4).

  3. Clique no botão Deletar. Uma janela de confirmação é aberta.

  4. Clique em OK.

    A seção é atualizada e o item foi excluído.

  5. Feche a janela ou guia do navegador que exibe seu aplicativo DOM virtual em execução.

  6. Na janela do terminal, pressione Ctrl+C e, se solicitado, digite y para sair da tarefa em batch de ferramentas do Oracle JET.

Tarefa 4: (Opcional) Executar um Aplicativo DOM Virtual de um Aplicativo Restaurado

Se quiser executar o aplicativo DOM virtual do Oracle JET concluído com base no código fornecido, você poderá restaurar o aplicativo do arquivo compactado submetido a download. Para trabalhar com um aplicativo DOM virtual do Oracle JET "desmontado e compactado", restaure dependências de projeto, incluindo ferramentas do Oracle JET e as bibliotecas e módulos necessários, dentro do aplicativo extraído.

  1. Faça download do arquivo JET-Virtual-DOM-app-final.zip e extraia o conteúdo do aplicativo concluído para o diretório JET-Virtual-DOM-app-final.
  2. Na janela do terminal, navegue até o diretório JET-Virtual-DOM-app-final e restaure o aplicativo DOM virtual do Oracle JET. 
    npm install
  3. Aguarde a confirmação. 
    Success: Restore complete

    O aplicativo está pronto para ser executado.

  4. Execute o aplicativo DOM virtual e teste no navegador. 
    npx ojet serve

  5. Feche a janela ou guia do navegador que exibe seu aplicativo DOM virtual em execução.

  6. Na janela do terminal, pressione Ctrl+C e, se solicitado, digite y para sair da tarefa em batch de ferramentas do Oracle JET.

Próxima Etapa

Este tutorial conclui o módulo Operações CRUD Usando um Serviço REST nesta programação de estudo sobre a criação de aplicativos Web DOM virtuais.

Você pode prosseguir para o próximo tutorial na programação de estudo, Configurar um Ambiente de Teste no Oracle JET, no módulo Teste Ponta a Ponta no Oracle JET.

Você também pode retornar à página principal da programação de estudo do DOM virtual para acessar todos os módulos na criação de aplicativos DOM virtuais, bem como outras programações de estudo.

Mais Recursos de Aprendizado

Explore outros laboratórios em docs.oracle.com/learn ou acesse mais conteúdo de aprendizado gratuito no canal do Oracle Learning YouTube. Além disso, acesse education.oracle.com/learning-explorer para se tornar um Oracle Learning Explorer.

Para obter a documentação do produto, visite o Oracle Help Center.