Lightning Iteration change <td> css

Question

I'm trying to change the css of a specific column of a specific row in an iteration while i'm using the drag and drop API. i have 2 tables, i drag an element of the first table in the second to populate a record field. This works but when it's done i'm checking in the JS controller some similarities and based on that, i need to change the "Fonction de Consommation" column of the modified row. here is my code: HTML:

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<aura:attribute name="mycolumnsFC" type="List"/>
<aura:attribute name="mycolumnsLC" type="List"/>
<aura:attribute name="listFCCmp" type="Object"/>
<aura:attribute name="listLCCmp" type="Object"/>
<aura:attribute name="isDataValid" type="Boolean" default="true"/>
<aura:attribute name="listError" type="List" />
<aura:attribute name="mapFcCmp" type="Map" default="{}"/>
<aura:attribute name="mapLcCmp" type="Map" default="{}"/>
<aura:attribute name="cssUOM" type="String"/>
<aura:attribute name="disableCoef" type="Boolean" default="false"/>
<aura:attribute name="messagePopover" type="String" default="Si l'unité comptage est la même entre la fonction de consommation et la ligne de contrat, le coefficient est égal à 1"/>


<aura:if isTrue="{!v.isDataValid}"> 
                                                                                        <!--FONCTIONS DE CONSOMMATION-->
    <div class="slds-box">
        <table class="slds-table slds-table_cell-buffer slds-table_bordered">
        <thead>
            <tr class="slds-line-height_reset">
              <th class="" scope="col">
                <div class="slds-truncate" title="Fonction de consommation">Fonction de consommation</div>
              </th>
              <th class="" scope="col">
                <div class="slds-truncate" title="Numéro de la fonction">Numéro de la fonction</div>
              </th>
              <th class="" scope="col">
                <div class="slds-truncate" title="Libellé court">Libellé court</div>
              </th>
              <th class="" scope="col">
                <div class="slds-truncate" title="Unité de comptage">Unité de comptage</div>
              </th>
              <th class="" scope="col">
                <div class="slds-truncate" title="Date de début">Date de début</div>
              </th>
              <th class="" scope="col">
                <div class="slds-truncate" title="Date de fin">Date de fin</div>
              </th>
              <th class="" scope="col">
                <div class="slds-truncate" title="Usage GIS">Usage GIS</div>
              </th>
              <th class="" scope="col">
                <div class="slds-truncate" title="Type usage GIS">Type usage GIS</div>
              </th>
            </tr>
        </thead>
         <tbody>
            <aura:iteration items="{!v.listFCCmp}" var="fc">

                    <tr class="slds-hint-parent" draggable="true" ondragstart="{!c.dragStart}" id="{!fc.Id}">
                       <td data-label="Fonction de consommation">
                        <lightning:formattedText value="{!fc.Name}"/>
                      </td>
                      <td data-label="Numéro de la fonction">
                        <lightning:formattedText value="{!fc.num_FC__c}"/>
                      </td>
                      <td data-label="Libellé court">
                        <lightning:formattedText value="{!fc.Code_Court__c}"/>
                      </td>
                      <td data-label="Unité de comptage">
                        <lightning:formattedText value="{!fc.unitOfMeasure__c}"/>
                      </td>
                      <td data-label="Date de début">
                        <lightning:formattedDateTime value="{!fc.StartDate__c}"/>
                      </td>
                      <td data-label="Date de fin">
                        <lightning:formattedDateTime value="{!fc.EndDate__c}"/>
                      </td>
                      <td data-label="Usage GIS">
                        <lightning:formattedText value="{!fc.Usage__c}"/>
                      </td>
                      <td data-label="Type usage GIS">
                        <lightning:formattedText value="{!fc.TypeUsageGIS__c}"/>
                      </td>
                    </tr>
                
            </aura:iteration>
        </tbody>
        </table>
    </div>
    <br/>
                                                                                                <!--LIGNE DE CONTRAT-->
    <div class="slds-box">
        <table class="slds-table slds-table_cell-buffer slds-table_bordered">
        <thead>
            <tr class="slds-line-height_reset">
              <th class="" scope="col">
                <div class="slds-truncate" title="Numéro">Numéro</div>
              </th>
              <th class="" scope="col">
                <div class="slds-truncate" title="Service">Service</div>
              </th>
              <th class="" scope="col">
                <div class="slds-truncate" title="Unité de facturation">Unité de facturation</div>
              </th>
              <th class="" scope="col">
                <div class="slds-truncate" title="Fonction de Consommation">Fonction de Consommation</div>
              </th>
              <th class="" scope="col">
                <div class="slds-truncate" title="Coefficient de conversion">
                    Coefficient de conversion <c:LC005_Popover message="{#v.messagePopover}"/>      
                </div>
              </th>
              <th class="" scope="col">
                <div class="slds-truncate" title="Coefficient de répartition">Coefficient de répartition</div>
              </th>
            </tr>
        </thead>
         <tbody>
            <aura:iteration indexVar="index" items="{!v.listLCCmp}" var="lc">

                    <tr class="slds-hint-parent"  data-id="{!lc.Id}" ondragover="{!c.allowDrop}" ondrop="{!c.onDrop}" data-index="{!index}">
                      <td data-label="Numéro">
                        <lightning:formattedText value="{!lc.Name}"/>
                      </td>
                      <td data-label="Service">
                        <lightning:formattedText value="{!lc.Service__r.Name}"/>
                      </td>
                      <td data-label="Unité de facturation">
                        <lightning:formattedText value="{!lc.Service__r.QuantityUnitOfMeasure}"/>
                      </td>
                      <td data-label="Fonction de Consommation" aura:id="{!lc.Id}" class="">
                        <lightning:formattedText value="{!lc.FonctionDeConsommation__c}" />
                      </td>
                      <td data-label="Coefficient de conversion" class="{!v.cssUOM}">
                        <lightning:input type="number" placeholder="Renseigner un coefficient" value="{!lc.Coefficient_de_conversion__c}" disabled="{!v.disableCoef}"/>
                      </td>
                      <td data-label="Coefficient de répartition">
                        <lightning:formattedNumber value="{!lc.Coefficient_de_r_partition__c}"/>
                      </td>
                    </tr>
                
            </aura:iteration>
        </tbody>
        </table>
    </div>
    <br/>
    <div class="slds-align_absolute-center">
        <lightning:button label="Sauvegarder" onclick="{!c.saveMapping}" variant="brand"/>
    </div>
    <aura:set attribute="else">
            
            <section role="alertdialog" tabindex="0" aria-labelledby="prompt-heading-id" aria-describedby="prompt-message-wrapper" class="slds-modal slds-fade-in-open slds-modal_prompt" aria-modal="true">
                <div class="slds-modal__container">
                    <header class="slds-modal__header slds-theme_warning slds-theme_alert-texture">
                        <h2 class="slds-text-heading_medium" id="prompt-heading-id">Mapping impossible</h2>
                    </header>
                    <div class="slds-modal__content slds-p-around_medium" style="text-align: center" id="prompt-message-wrapper">
                        <p>
                            
                                <aura:iteration items="{!v.listError}" var="item">
                                    <li><aura:unescapedHtml value="{!item}" /></li>
                                </aura:iteration>
                            
                        </p>
                    </div>
                    <footer class="slds-modal__footer slds-theme_default">
                        
                        <lightning:button label="Fermer" onclick="{!c.closeWindow}" variant="brand" disabled="{!v.isDisabled}"/>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
            
      </aura:set>
</aura:if>

JS CONTROLLER:

({
    doInit : function(component, event, helper) {
        debugger;

        helper.init(component);
    },

    
    handleSaveLC: function (component, event, helper) {
       
    },

    dragStart: function (component, event, helper) {
       //console.log('dragged = ' + event.target.id);

       event.dataTransfer.setData("text", event.target.id);
       
       let mapFc = component.get('v.mapFcCmp');
       console.log('Fc = ' + mapFc.get(event.target.id));
    },

    allowDrop: function (component, event, helper) {
       event.preventDefault();     
    },

    onDrop: function (component, event, helper) {
        
        let mapLc = component.get('v.mapLcCmp');
        let listLc = component.get('v.listLCCmp');
        let mapFc = component.get('v.mapFcCmp');

        console.log('onDrop mapLc = ' +  mapLc.size);
        console.log('onDrop mapFc = ' + mapFc.size);

        let lcId = event.target.closest("[data-id]").dataset.id;
        let lc = mapLc.get(lcId);

        let fcId = event.dataTransfer.getData("text", event.target.id);
        let fc = mapFc.get(fcId);
        let listLcToBeUpdated = [];
        let listLcUpdated = [];

        let rowIndex = event.target.closest("[data-index]").dataset.index;

        console.log('onDrop lcId = ' +  lcId);
        console.log('onDrop fcId = ' + fcId);
        console.log('onDrop lc = ' + JSON.stringify(lc));
        console.log('onDrop fc = ' + JSON.stringify(fc));
        console.log('onDrop Row Index = ' + JSON.stringify(rowIndex));
        

        lc.FonctionDeConsommation__c = fcId;
        listLcToBeUpdated.push(lc);

        if(lc.Service__r.QuantityUnitOfMeasure === fc.unitOfMeasure__c){
            //component.set('v.cssUOM', 'uomOK');
            var cmpTarget = component.find(lcId);
            console.log('onDrop cmpTarget = ' + JSON.stringify(cmpTarget));
            $A.util.addClass(cmpTarget, 'uomOK');
            //$A.util.addClass(listLc[rowIndex], 'uomOK');
            lc.Coefficient_de_conversion__c = 1;
            //component.set('v.disableCoef', true);
        }else{
            component.set('v.cssUOM', 'uomKO');
            $A.util.addClass(listLc[rowIndex], 'uomKO');
        }

        mapLc.forEach((value, key) => listLcUpdated.push(value));
        console.log('listLcUpdated = ' + listLcUpdated.length);


        component.set('v.listLCCmp', listLcUpdated);
    },

    saveMapping: function (component, event, helper) {
         debugger;

         let listLc = component.get('v.listLCCmp');
         helper.saveLcs(component, listLc);
    }
})

So in the onDrop method i want to get the row where i dropped the element and if lc.Service__r.QuantityUnitOfMeasure === fc.unitOfMeasure__c (or not) then change the css of the "Fonction de Consommation". I tried different solution but nothing works...could you help me please? Thanks a lot!

Answer 1

You can try an expression inside the class attribute somthing like this in div tag

class="{! ( v.CurrentValue == iteratorVar ? 'large-font' : 'small-font') }"

where "large-font" and "small-font" can be standard slds css or custom css attribute values and the iteratorVar is the aura itertion loop variable

<aura:iteration items='{!v.ListValues}' var="iteratorVar " indexVar="counterVar">

This only works with aura and not with lwc as lwc does not support expressions in markup.