0

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!

0

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.

5
  • Thanks Shubham, i'm going to try and let you know. Mar 30 '21 at 7:15
  • Hello Shubham, how do you populate v.CurrentValue? i'm not sure to understand... thanks! Mar 30 '21 at 13:41
  • The currentValue is an aura attribute, you can set the value to this attribute through javascript controller methods as component.set("v.currentValue", "anyStringValue"); where anyStringValue is the value you want to set. Please refer aura attributes any their usage for more info. Thanks.
    – Shubham
    Mar 30 '21 at 17:16
  • Ok, it works, thanks! Apr 1 '21 at 15:45
  • Thats great, enjoy!
    – Shubham
    Apr 2 '21 at 0:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.