Reacciones Dinámicas v3 en Oracle APEX

En esta nueva versión guardaremos los datos de las reaciones por usuario conectado.

Usaremos el diseño de la versión 2, en la que cargaremos las reacciones mediante un botón.

Ahora, modificaremos el estilo del botón, cambiándolo por un ícono de pulgar hacia arriba. Además, asignaremos una acción a cada reacción para que, cuando un usuario haga clic en ella, se registre su nombre junto con la reacción. Esta información se mostrará en una tabla.

El código JavaScript necesario sería: agregar un listerner

    reactionPanel.addEventListener('click', (e) => {
        const reactionItem = e.target.closest('.reaction-item');
        if (!reactionItem) return;
        
        const reactionId = reactionItem.dataset.reactionId;
        const reactionCode = reactionItem.dataset.reactionCode;
        const reactionTitle = reactionItem.title;
        
        // Ejecutar función cuando se hace clic en una reacción
        //handleReactionClick(reactionId, reactionCode, reactionTitle, currentTriggerButton);
        console.log('reactionId',reactionId);
        console.log('reactionCode',reactionCode);
        console.log('reactionTitle',reactionTitle);
        
        set_reaction(reactionId);

        // Ocultar el panel después del clic
        hidePanel();
    });

apex.server.process para hacer el update de datos en BD.

function set_reaction(reactionId) {
  apex.server.process("set_reaction",{ 
      x01: reactionId
    },
    {
      success: function(pData){
        if (pData.success){   
          apex.region('user_reactions').refresh(); 
          //apex.event.trigger( "#reposiciones_header", "apexrefresh" );
        } else { 
          //flash_indicator(false,'P40_SCAN_BARCODE'); 
          console.log(pData.error_msg);
        }
  
      }
    }
  );
}

La tabla para guardar las reacciones:

CREATE TABLE user_reactions (
    reaction_instance_id NUMBER GENERATED BY DEFAULT ON NULL AS IDENTITY,
    app_user VARCHAR2(255) NOT NULL,
    reaction_id NUMBER NOT NULL,
    created_date DATE DEFAULT SYSDATE NOT NULL
);

El código PLSQL seria:

declare
  l_exists          number; 
  l_reaction_id     user_reactions.reaction_id%type := apex_application.g_x01;
begin

  merge into user_reactions r
  using (
    select :APP_USER app_user
         , l_reaction_id reaction_id
      from dual
  ) u on (r.app_user = u.app_user)
  when matched then
    update set
           r.reaction_id = u.reaction_id
  when not matched then
    insert (
           r.app_user  
         , r.reaction_id
    )
    values (
           u.app_user
         , u.reaction_id
     );


  apex_json.open_object;
  apex_json.write('success',true);
  apex_json.close_object;
 
exception
  when others then 
    apex_json.open_object;
    apex_json.write('success',false); 
    apex_json.write('error_msg',sqlerrm); 
    apex_json.close_object;
end;

En la página creamos el boton con el like icon:

<button type="button" title="Reaction" aria-label="Reaction" 
  class="showReactions t-Button t-Button--noLabel t-Button--icon t-Button--link">
  <span aria-hidden="true" class="t-Icon fa fa-thumbs-o-up"></span>
</button>

Para esta demo usaremos siguientes archivos con el JS y CSS completo

reactions.css

reactions.js