Simplifying Activity List Ordering Mechanism Topic is solved

[yvesf]

Hi,

I have finally found an approach to build the sorting in the iframe. Thx to Kev1n.
The video below :

OrderActivitewithoutselector.gif

I would like to have the selector following the selected line originally to better follow the action.
How can I select completely the row when moving down or moving up.
He is the code behind the related form in the iframe

Code: Select all

$(function () {
  const highlightableDivs = document.querySelectorAll('.nuCell');

  highlightableDivs.forEach((divElement) => {
    divElement.addEventListener('mousedown', () => {
      // Remove highlight from all divs
      highlightableDivs.forEach((div) => div.classList.remove('highlight'));

      // Get the data-nu-row attribute value of the clicked cell
      const rowValue = divElement.getAttribute('data-nu-row');

      // Get the primary key of the clicked cell
      const primaryKey = divElement.getAttribute('data-nu-primary-key');
      
      // Add highlight to all cells with the same data-nu-row value
      highlightableDivs.forEach((div) => {
        if (div.getAttribute('data-nu-row') === rowValue) {
          div.classList.add('highlight');
        }
      });
    });
  });

  $('.nuCell')
    .off('mouseenter', nuBrowseTableHoverIn)
    .off('mouseleave', nuBrowseTableHoverOut);

});

function nuSelectBrowse(event, element) {
    const primaryKey = $(element).attr('data-nu-primary-key');

parent.nuSetProperty('primary_Key',  primaryKey);
 
}

and the procedure behind the button

Code: Select all

$activityid1='#primary_Key#';

$query="select act_order from activite where activite_id='".$activityid1."';"; // on recupère ordre l'activité qu'on veut descendre d'un cran.
$order_ori=nuRunquery($query);
$r  = db_fetch_object($order_ori);
$order=$r->act_order;
$order_new=$order+1; //nouvel ordre de l'activité récupérée

$update = "Update activite set act_order=".$order." where act_order =".$order_new.";";// l'activité ayant l'ordre en dessous remonte vers le haut
$result = nuRunQuery($update);
$update2 = "Update activite set act_order=".$order_new." where activite_id='".$activityid1."';"; //affectation du nouvel ordre à l'activité sélectionnée
$result2 = nuRunQuery($update2);
$js = " nuGetBreadcrumb();";
nuJavaScriptCallback($js);

Comments are welcome if this code needs to be improved.

Many thx,

Yves

[kev1n]

Would you like to select the previously selected line again after the iframe has been refreshed?

[yvesf]

When I select a row and press down, I want the next full row to be selected, following the currently selected one

Yves

[kev1n]

When the form is loaded, check if there is a previously set primary_Key property (use nuGetProperty(...) ) and pass the PK to the function below to highlight a row by PK:

Code: Select all

function highlightCellsByPrimaryKey(primaryKey) {
 
  const highlightableDivs = document.querySelectorAll(`.nuCell[data-nu-primary-key="${primaryKey}"]`);


  highlightableDivs.forEach((divElement) => {
    divElement.classList.add('highlight');
  });
}

[yvesf]

thx Kev1n,

it works like a charm !!

Code: Select all

function highlightCellsByPrimaryKey(primaryKey) {
 
  const highlightableDivs = document.querySelectorAll(`.nuCell[data-nu-primary-key="${primaryKey}"]`);


  highlightableDivs.forEach((divElement) => {
    divElement.classList.add('highlight');
  });
}

function nuOnLoad(){


   if(parent.nuGetProperty('primary_Key') != ''){

      highlightCellsByPrimaryKey(parent.nuGetProperty('primary_Key'));
   }
}

You are my guru.

Yves