Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Fred13Fred13 

Component with Multiple filters

Hi.  I am trying to build a component that has several select fields where the user can filter down the list of records that were returned.  On the component I have three select fields.  Here is an example of one of those fields:

           <lightning:layoutItem padding="horizontal-medium" size="4">
            <!-- Create a dropdown menu with options for Status-->
            <lightning:select aura:id="selectStatus" label="Status" name="sourceHP" 
                              onchange="{!c.handleSelect}" class="slds-m-bottom_small">
                 <option value="">-- Select a Status --</option>
                <option value="All" text="All"/>
                <option value="Draft" text="Draft"/>
                <option value="Final" text="Final"/>
            </lightning:select>
     </lightning:layoutItem>
In the controller I am trying to figure out the best way to updte the list to apply the filters.  Right now, this is what I have.  Its certainly not ideal as I add more select fields the code will become unmanageable.  Looking for help on the best way to refactor the code to account for several filters.

Here is the Controller:
   handleSelect : function(component, event, helper) {
        var groupstructures = component.get("v.groupstructures");
  //The groupstructureList is getting populated correctly in the below line of code
        var groupstructureList = component.get("v.groupstructureList");
          var selectedActive = component.find("select").get('v.value');
          var selectedHP = component.find("selectHP").get('v.value');
          var selectedStatus = component.find("selectstatus").get('v.value')
        var filter = [];
        var k = 0;
        for (var i=0; i<groupstructureList.length; i++){
            var c = groupstructureList[i];
              if (selectedActive == "All" && selectedHP == "All"){
                  filter = groupstructureList
              }
            else if (selectedActive != "All" && selectedHP == "All"){
                     if(c.Active__c == selectedActive){
                           filter[k] = c;
                            k++; 
                    }
            }
             else if (selectedActive == "All" && selectedHP != "All"){
                     if(c.Health_Product__c == selectedHP){
                           filter[k] = c;
                            k++; 
                    }
            }
            else if (selectedActive != "All" && selectedHP != "All"){
                     if(c.Health_Product__c == selectedHP && c.Active__c == selectedActive){
                           filter[k] = c;
                            k++; 
                    }
            }
         }
      
   
        //Set the filtered list of contacts based on the selected option
        component.set("v.groupstructures", filter);
        helper.updateTotal(component);
        console.log(component.find("select").get('v.value'));
    }

And one more question, can I create a select list that dynamically contains values based on the current list.  For example, the current list of group structures may have a total of 3 unique values in the "Section__c" field  I want a select list to show just those options so the user can filter that field if needed.  That field holds a 4 digit number so it would be impossible for me to pre-populate the values.

Thank you!!!!

Fred