// Controller Apex


public with sharing class CampaignController {
    
    @AuraEnabled
    public static List<Campaign> getCampaign(Id CampaignId) {
        return [SELECT Id, cel_ext_id_campaign__c, Name, cel_category__c, cel_SubCatergory__c, IsActive, cel_Countries__c, BudgetedCost, StartDate, EndDate, cel_Format__c, cel_MenWomen__c,
                NumberSent, cel_Reason__c, NumberOfResponses,cel_Stores__c, cel_AmountTotal__c, cel_TotalConfirmed__c, cel_TotalDirectSales__c, cel_TotalInvited__c,
                cel_TotalPurchasing__c, cel_TotalSales__c, cel_TotalShowUp__c, cel_Total__c, cel_BudgetEuro__c, cel_SalesTargetResWDeposit__c, cel_SalesTargetResWODeposit__c,
                cel_TotalSLG__c, cel_TotalRTW__c, cel_TotalShoes__c, cel_TotalBags__c, cel_TotalACC__c
                FROM Campaign where Id=:CampaignId];
    }   
    @AuraEnabled
    public static Campaign saveCampaign(Campaign campaign) {
        upsert campaign;
        return campaign;
    }     
}

// Componant 1 


<aura:component controller="CampaignController" implements="lightning:isUrlAddressable,force:hasSObjectName,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global">                                                           
	<aura:attribute name="recordId" type="String" />
    <aura:attribute name="campaigns" type="Campaign[]"/>     
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>  
        <lightning:layoutItem >
            <c:CEL_CampaignDetailList campaigns="{!v.campaigns}"/>
        </lightning:layoutItem>
</aura:component>

//componant 2


<aura:component controller="CampaignController" access="global" >
   <aura:attribute name="recordId" type="String" />
   <aura:attribute name="campaigns" type="Campaign[]"/>
	 <lightning:card title="">
        <p class="slds-p-horizontal--small">
            <aura:iteration items="{!v.campaigns}" var="campaign">
                <c:CEL_CampaignItem campaign="{!campaign}"/>
            </aura:iteration>
        </p>
    </lightning:card>
</aura:component>

// Componant 3

<aura:component controller="CampaignController" access="global"> 
   <aura:attribute name="recordId" type="String" />
   <aura:attribute name="campaign" type="Campaign[]"/>
   
    <div class=" slds-grid slds-grid_vertical " style="height:auto width:auto;" >    
         <h1 style="font-weight: bold; color:white; text-align:center;"> Campaign Details </h1> 
        	<table class="slds-table slds-table_bordered slds-table_cell-buffer">            
                     <tr>                     
                      <td data-label="Category">
                        <div class="slds-truncate" title="Category">Category</div>
                      </td>
                      <td>
                        <div class="slds-truncate" > 
                            <lightning:formattedText value="{!v.campaign.cel_Category__c}" style="string"/>
                        </div>
                      </td>
                      <td data-label="Invited">
                        <div class="slds-truncate" title="Invited">Invited</div>
                      </td>
                      <td>
                        <div class="slds-truncate">                           
                           <lightning:formattedNumber value="{!v.campaign.cel_TotalInvited__c}"/></div>
                      </td>
                      <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                      <td >
                        <div class="slds-truncate" title="tot_pot_sales">Total Direct Sales</div>
                      </td>                       
                      <td>
                        <div class="slds-truncate">
                           <lightning:formattedNumber value="{!v.campaign.cel_TotalDirectSales__c}" style="currency"/>
                        </div>
                      </td>
                      <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                      <td data-label="Clienteling_rate">
                        <div class="slds-truncate" title="Clienteling_rate">Total Confirmed</div>
                      </td>                        
                      <td data-label="Clienteling_rate_val">
                        	<div class="slds-truncate" >
                               <lightning:formattedNumber value="{!v.campaign.cel_TotalConfirmed__c}"/>
                            </div>
                      </td>
                      <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                    </tr>              
                <!--*********************** -->
                    <tr>  
                      <td data-label="Sub Category">
                        <div class="slds-truncate" title="Bub Category">Sub Category</div>
                      </td>
                      <td>
                        <div class="slds-truncate" > 
                            <lightning:formattedText value="{!v.campaign.cel_SubCatergory__c}" style="string"/>
                        </div>
                      </td>
                      <td data-label="PERIOD">
                        <div class="slds-truncate" title="Period">Star date</div>
                      </td>
                      <td data-label="Period_Plage">
                        <div class="slds-truncate" title="Period_Plage">
                            <lightning:formattedDateTime value="{!v.campaign.StartDate}" style="Date"/>
                        </div>
                      </td> 
                      <td data-label="emp">
                      </td>
                      <td >
                        <div class="slds-truncate" title="Period">End date</div>
                      </td>
                      <td data-label="Period_Plage">
                        <div class="slds-truncate" title="Period_Plage">
                            <lightning:formattedDateTime value="{!v.campaign.EndDate}" style="Date"/>
                        </div>
                      </td>
                      <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                      <td data-label="Contacted">
                        <div class="slds-truncate" title="Contacted">Country</div>
                      </td>
                      <td data-label="Val_Contacted">
                        <div class="slds-truncate" title="Val_Contacted">
                         <lightning:formattedText value="{!v.campaign.cel_Countries__c}" style="string"/>
                        </div>
                      </td>    
                       <td data-label="Activation_rate_val">
                        	<div class="slds-truncate" title="Activation_rate_val"></div>
                      </td>
                      <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                    </tr>                          
                 <!-- ************** -->
                    <tr>                  
                      <td>
                        <div class="slds-truncate">Budget(€)</div>
                      </td>
                      <td >
                        <div class="slds-truncate">
                        	<lightning:formattedNumber value="{!v.campaign.cel_BudgetEuro__c}" style="currency"/>
                        </div>
                      </td>                      
                      <td data-label="Resa_whith_deposit">
                        <div class="slds-truncate" title="tot_pot_sales">Sales Target Res W Deposit</div>
                      </td>          
                      <td data-label="Resa_whith_deposit_amount">
                        <div class="slds-truncate" title="Resa_whith_deposit_amount">
                        	<lightning:formattedNumber value="{!v.campaign.cel_SalesTargetResWDeposit__c}" style="currency"/>  
                        </div>
                      </td>
                        <td data-label="Resa_whith_deposit_amount_percent">
                        <div class="slds-truncate" title="Resa_whith_deposit_amount_percent"></div>
                      </td>
                        <td data-label="Cross_selling_rate">
                        <div class="slds-truncate" title="Cross_selling_rate">Sales Target Res W/O Deposit</div>
                      </td>
                         <td data-label="Cross_selling_rate_val">
                        	<div class="slds-truncate" title="Cross_selling_rate_val">
                             	<lightning:formattedNumber value="{!v.campaign.cel_SalesTargetResWODeposit__c}" style="currency"/>  
                            </div>
                      	</td>
                       <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                        
                       <td data-label="Total_SLG">
                        <div class="slds-truncate" title="Total SLG">Total SLG</div>
                      </td>
                      <td>
                        <div class="slds-truncate">                           
                           <lightning:formattedNumber value="{!v.campaign.cel_TotalSLG__c}" style="currency"/></div>
                      </td>
                    </tr>                              
                 <!-- *************** -->
                    <tr>
                      <td data-label="Show_up">
                        <div class="slds-truncate" title="Show_up">Total show-up</div>
                      </td>
                      <td data-label="Val_Show_up">
                        <div class="slds-truncate" title="Val_Show_up">
                        	 <lightning:formattedNumber value="{!v.campaign.cel_TotalShowUp__c}"/>
                       </div>
                      </td>
                      <td>
                        <div class="slds-truncate" >Total purchasing</div>
                      </td>                   
                      <td data-label="Resa_whithout_deposit_amount">
                        <div class="slds-truncate" >
                          	 <lightning:formattedNumber value="{!v.campaign.cel_TotalPurchasing__c}" style="currency"/>
                        </div>
                      </td>
                      <td >
                        <div class="slds-truncate" ></div>
                      </td>
                      <td data-label="Target_achieved">
                        <div class="slds-truncate" title="Target_achieved">Store(s)</div>
                      </td>                        
                      <td data-label="Target_achieved_val">
                       	<div class="slds-truncate" >                           
                        	<lightning:formattedText value="{!v.campaign.cel_Stores__c}" style="string"/>
                        </div>
                      </td> 
                        
                      <td data-label="Target_achieved_val_euro">
                        <div class="slds-truncate" title="Target_achieved_val_euro"></div>
                      </td>
                        
                      <td data-label="Show_up">
                        <div class="slds-truncate" title="Show_up">Total RTW</div>
                      </td>
                      <td data-label="TotalRTw">
                        <div class="slds-truncate" title="TotalRTW">
                        	 <lightning:formattedNumber value="{!v.campaign.cel_TotalRTW__c}"/>
                       </div>
                      </td>  
                        
                      <td data-label="Target_achieved_val_euro">
                        <div class="slds-truncate" title="Target_achieved_val_euro"></div>
                      </td>
                    </tr>
          
                 <!-- Store -->
                 <tr >                    
                      <td data-label="Show_up">
                        <div class="slds-truncate" title="Show_up"> total Shoes</div>
                      </td>
                      <td data-label="TotalShoes">
                       <div class="slds-truncate" title="TotalShoes">
                        	 <lightning:formattedNumber value="{!v.campaign.cel_TotalShoes__c}"/>
                       </div>
                      </td>                                      
                      <td data-label="Show_up">
                        <div class="slds-truncate" title="Show_up"> total Bags</div>
                      </td>
                      <td data-label="TotalBags">
                       <div class="slds-truncate" title="TotalBags">
                        	 <lightning:formattedNumber value="{!v.campaign.cel_TotalBags__c}"/>
                       </div>
                      </td> 
                      <td data-label="Val_Purchasing_percent">
                        <div class="slds-truncate" title="Val_Purchasing_percent"></div>
                      </td>
                      <td data-label="TotalACC">
                        <div class="slds-truncate" title="TotalACC">Total ACC</div>
                      </td> 
                      <td data-label="Total ACC">
                        <div class="slds-truncate" title="otal ACC">
                           <lightning:formattedNumber value="{!v.campaign.cel_TotalACC__c}" style="currency"/>
                        </div>
                      </td>
                        <td data-label="emp">
                        <div class="slds-truncate" title="emp"></div>
                      </td>
                      <td data-label="Men/Women">
                        <div class="slds-truncate" title="Men/Women">Men/Women</div>
                      </td>                        
                      <td data-label="Men/Women">
                       	<div class="slds-truncate" >                           
                        	<lightning:formattedText value="{!v.campaign.cel_MenWomen__c}" style="string"/>
                        </div>
                      </td>    
                 </tr>
        </table>
    </div>
</aura:component>

// Controller JS 


({
    doInit: function(component, event, helper) {
      var action = component.get("c.getCampaign");
          action.setParams({ CampaignId : component.get("v.recordId") }); 
          action.setCallback(this, function(response){
      var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.campaigns", response.getReturnValue());
            }
            else {
                console.log("Failed with state: " + state);
            }
        });
        $A.enqueueAction(action);
    },
    
     clickActive: function(component, event, helper) {
        var campaign = component.get("v.recordId");
        campaign.setParams({ "campaign": campaign });
        campaign.fire();
    }
})

// Controller Js helper

({ 
   doInit: function(component, event, helper) {
      var action = component.get("c.recordId");         
          action.setParams({recordId : component.get("v.recordId")});            
          action.setCallback(this, function(response) {
      var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.recordId", response.getReturnValue());
            }
            else {
                console.log("Failed with state: " + state);
            }
        });
        $A.enqueueAction(action);
    },  
    clickActive: function(component, event, helper) {
        var campaign = component.get("v.recordId");
        campaign.setParams({ "campaign": campaign });
        campaign.fire();
    }
})