SHARE
TWEET

Untitled

a guest Sep 16th, 2019 92 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. UI -
  2. <aura:component controller="DataTableServerContrl">
  3.     <aura:attribute name="isPaginationEnabled" type="Boolean" default="true"/>
  4.     <aura:attribute name="opportunities" type="Sobject[]"/>
  5.     <aura:attribute name="fieldApiNames" type="String[]"/>
  6.     <aura:attribute name="fieldLabels" type="String[]"/>
  7.     <aura:attribute name="limitSize" type="String" description="Records limit per page."/>
  8.     <aura:attribute name="offsetSize" type="String" description="Records needs to be skipped." default="0"/>
  9.     <aura:attribute name="totalSize" type="String" description="Total records in the object." default="0"/>
  10.     <aura:attribute name="hasPrevious" type="Boolean" description="To disable First and Previous buttons." default="false"/>
  11.     <aura:attribute name="hasNext" type="Boolean" description="To disable First and Previous buttons." default="true"/>
  12.     <aura:handler name="init" value="{!this}" action="{!c.onInit}"/>
  13.     <aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
  14.     <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>    
  15.     <aura:handler name="oppCloseEvnt" event="c:OppPopupCloseEvent" action="{!c.closePopup}"/>
  16.     <aura:handler name="popEvent" event="c:PopupAppEvent" action="{!c.createOppPopup}"/>    
  17.     <div class="demo-only demo--inverse" id="loadingStat" style="display:block;">
  18.       <!--<div class="slds-spinner_container slds-is-fixed">
  19.         <div role="status" class="slds-spinner slds-spinner_medium">
  20.           <span class="slds-assistive-text">Loading</span>
  21.           <div class="slds-spinner__dot-a"></div>
  22.           <div class="slds-spinner__dot-b"></div>
  23.         </div>
  24.       </div>-->
  25.     </div>    
  26.     <div class="slds-grid slds-m-top--xx-small">
  27.         <div class="slds-form--inline slds-col"/>
  28.         <div class="slds-form--inline slds-col">
  29.             <div class="slds-form-element__control">
  30.                 <div class="slds-form-element__control">
  31.                     <div class="slds-form-element">
  32.                         <ui:spinner aura:id="dataTableSpinner" />
  33.                     </div>
  34.                 </div>
  35.             </div>
  36.         </div>
  37.     </div>
  38.     <div class="slds-grid">
  39.         <div class="slds-col slds-scrollable--x slds-m-top--x-small" aura:id="dataTableId">
  40.             <table class="slds-table slds-table_bordered slds-table_cell-buffer">
  41.               <thead class="slds-theme--shade">
  42.                 <tr class="slds-text-title_caps">
  43.                   <aura:iteration items="{!v.fieldLabels}" var="theLabel">
  44.                       <th scope="col" class="">
  45.                         <div class="slds-truncate" title="{!theLabel}">{!theLabel}</div>
  46.                       </th>
  47.                   </aura:iteration>
  48.                 </tr>
  49.               </thead>
  50.               <tbody>
  51.               <aura:iteration items="{!v.opportunities}" var="opp">
  52.                     <tr>
  53.                       <aura:iteration items="{!v.fieldApiNames}" var="theFieldApi">
  54.                           <td>
  55.                             <div class="slds-truncate" title="Cloudhub"><c:RecordComp record="{!opp}" fldApiName="{!theFieldApi}"/></div>
  56.                           </td>      
  57.                       </aura:iteration>
  58.                     </tr>
  59.               </aura:iteration>
  60.               </tbody>
  61.             </table>
  62.         </div>
  63.     </div>    
  64.     <aura:if isTrue="{!v.totalSize > 0}">
  65.         <div class="slds-grid slds-m-top--x-small slds-scrollable--x">
  66.             <div class="slds-button-group slds-align_absolute-center" role="group">
  67.               <button type="button" class="slds-button slds-button_neutral" disabled="{!!(v.isPaginationEnabled && v.hasPrevious)}" onclick="{!c.onFirst}">First</button>
  68.               <button class="slds-button slds-button_neutral" disabled="{!!(v.isPaginationEnabled && v.hasPrevious)}" onclick="{!c.onPrevious}">Previous</button>
  69.               <button class="slds-button slds-button_neutral" disabled="{!!(v.isPaginationEnabled && v.hasNext)}" onclick="{!c.onNext}">Next</button>
  70.               <button class="slds-button slds-button_neutral" disabled="{!!(v.isPaginationEnabled && v.hasNext)}" onclick="{!c.onLast}">Last</button>
  71.             </div>
  72.         </div>
  73.     </aura:if>
  74.     <div id="oppDialog">
  75.         {!v.body}
  76.     </div>
  77. </aura:component>
  78.  
  79. Controller JS -
  80. ({
  81.     onInit : function(component, event, helper) {
  82.         helper.doInit(component, event);
  83.     },
  84.     onFirst : function(component, event, helper) {
  85.         helper.handleOnFirst(component, event);
  86.     },
  87.     onPrevious : function(component, event, helper) {
  88.         helper.handleOnPrevious(component, event);
  89.     },
  90.     onNext : function(component, event, helper) {
  91.         helper.handleOnNext(component, event);
  92.     },
  93.     onLast : function(component, event, helper) {
  94.         helper.handleOnLast(component, event);
  95.     },
  96.     showSpinner : function (component, event, helper) {
  97.         helper.handleShowSpinner(component, event);
  98.     },
  99.     hideSpinner : function (component, event, helper) {
  100.         helper.handleHideSpinner(component, event);
  101.     },
  102.     createOppPopup : function (component, event, helper) {
  103.         helper.handleCreateOppPopup(component, event);
  104.     },
  105.     closePopup : function(cmp, event, helper) {
  106.         helper.handleClosePopup(cmp, event);
  107.     }
  108. })
  109.  
  110. Helper JS -
  111. ({
  112.     doInit : function(cmp, event) {
  113.         this.handleFetchOpps(cmp);
  114.     },
  115.     handleFetchOpps : function(cmp) {        
  116.         var action = cmp.get("c.fetchOpportunities");
  117.         action.setParams({ limitSize : cmp.get("v.limitSize"), offsetSize :  cmp.get("v.offsetSize")});
  118.         action.setCallback(this, function(response) {
  119.             var state = response.getState();
  120.             console.log('***state: '+state);
  121.             if (state === "SUCCESS") {
  122.                 // Alert the user with the value returned
  123.                 // from the server
  124.                 console.log("From server: " + JSON.stringify(response.getReturnValue()));
  125.                 var res = response.getReturnValue();
  126.                 console.log(res.records);
  127.                 //alert(JSON.stringify(res.records));
  128.                 cmp.set("v.opportunities",JSON.parse(JSON.stringify(res.records)));
  129.                 //alert(cmp.get("v.opportunities").length);
  130.                 console.log(JSON.stringify(res.fieldApiAndDataTypes));            
  131.                 cmp.set("v.fieldApiNames",res.fieldApiAndDataTypes);
  132.                 console.log(res.fieldLabels);
  133.                 cmp.set("v.fieldLabels",res.fieldLabels);
  134.                 console.log('totalSize: '+res.totalSize);
  135.                 cmp.set("v.totalSize",res.totalSize);
  136.             }
  137.             else if (state === "INCOMPLETE") {
  138.                 // do something
  139.             }
  140.             else if (state === "ERROR") {
  141.                 var errors = response.getError();
  142.                 if (errors) {
  143.                     if (errors[0] && errors[0].message) {
  144.                         console.log("Error message: " +
  145.                                  errors[0].message);
  146.                     }
  147.                 } else {
  148.                     console.log("Unknown error");
  149.                 }
  150.             }            
  151.         });
  152.         $A.enqueueAction(action);
  153.     },
  154.     handleOnFirst : function(cmp, event) {
  155.         cmp.set("v.offsetSize","0")
  156.         this.disableEnableButtons(cmp);
  157.         this.handleFetchOpps(cmp);
  158.     },
  159.     handleOnPrevious : function(cmp, event) {
  160.         var offsetSize = cmp.get("v.offsetSize");
  161.         var limitSize = cmp.get("v.limitSize");
  162.         var newOffsetSize = Number(offsetSize) - Number(limitSize);    
  163.         cmp.set("v.offsetSize",newOffsetSize.toString());
  164.         console.log(cmp.get("v.offsetSize"));
  165.         this.disableEnableButtons(cmp);
  166.         this.handleFetchOpps(cmp);
  167.     },
  168.     handleOnNext : function(cmp, event) {
  169.         var offsetSize = cmp.get("v.offsetSize");
  170.         var limitSize = cmp.get("v.limitSize");
  171.         var newOffsetSize = Number(offsetSize) + Number(limitSize);    
  172.         cmp.set("v.offsetSize",newOffsetSize.toString())
  173.         console.log(cmp.get("v.offsetSize"));
  174.         this.disableEnableButtons(cmp);
  175.         this.handleFetchOpps(cmp);
  176.     },
  177.     handleOnLast : function(cmp, event) {      
  178.         var offsetSize = cmp.get("v.offsetSize");
  179.         var limitSize = cmp.get("v.limitSize");
  180.         var totalSize = cmp.get("v.totalSize");
  181.         var reminder = Number(totalSize) % Number(limitSize);
  182.         if(Number(reminder) == 0) {
  183.             var newOffsetSize = Number(totalSize) - Number(limitSize);
  184.             cmp.set("v.offsetSize",newOffsetSize.toString());
  185.         }
  186.         else {
  187.             var newOffsetSize = Number(totalSize) - Number(reminder);
  188.             cmp.set("v.offsetSize",newOffsetSize.toString());
  189.         }
  190.         this.disableEnableButtons(cmp);
  191.         this.handleFetchOpps(cmp);
  192.     },
  193.     disableEnableButtons : function(cmp) {
  194.         var offsetSize = cmp.get("v.offsetSize");
  195.         var limitSize = cmp.get("v.limitSize");
  196.         var totalSize = cmp.get("v.totalSize");
  197.         var reminder = Number(totalSize) % Number(limitSize)
  198.         console.log('offsetSize: '+offsetSize);
  199.         console.log('limitSize: '+limitSize);
  200.         console.log('totalSize: '+totalSize);
  201.         console.log('reminder: '+reminder);
  202.         if(Number(offsetSize) > 0) {
  203.             cmp.set("v.hasPrevious",true);
  204.         }
  205.         if(Number(offsetSize) + Number(limitSize) >= Number(totalSize)) {
  206.             cmp.set("v.hasNext",false);
  207.         }
  208.         if(Number(offsetSize) == 0) {
  209.             cmp.set("v.hasPrevious",false);
  210.         }
  211.         if(Number(offsetSize) + Number(limitSize) < Number(totalSize)) {
  212.             cmp.set("v.hasNext",true);
  213.         }
  214.     },
  215.     handleShowSpinner : function (component, event) {
  216.         var spinner = component.find('dataTableSpinner');
  217.         var evt = spinner.get("e.toggle");
  218.         evt.setParams({ isVisible : true });
  219.         evt.fire();
  220.         $A.util.toggleClass(component.find('dataTableId'), "waitingDatatable");
  221.         component.set("v.isPaginationEnabled",false);
  222.         document.getElementById("loadingStat").style.display = "block";
  223.     },
  224.     handleHideSpinner : function (component, event) {
  225.         var spinner = component.find('dataTableSpinner');
  226.         var evt = spinner.get("e.toggle");
  227.         evt.setParams({ isVisible : false });
  228.         evt.fire();
  229.         $A.util.toggleClass(component.find('dataTableId'), "waitingDatatable");
  230.         component.set("v.isPaginationEnabled",true);
  231.         document.getElementById("loadingStat").style.display = "none";
  232.     },
  233.     handleCreateOppPopup : function (cmp, event) {
  234.         console.log(event.getParam("oppId"));
  235.         $A.createComponent(
  236.             "c:OpportunityForm",
  237.             {
  238.                 "oppId": event.getParam("oppId")
  239.             },
  240.             function(res){                
  241.                 if (cmp.isValid()) {
  242.                     cmp.set("v.body", res);
  243.                 }
  244.             }
  245.         );
  246.     },
  247.     handleClosePopup : function(cmp, event) {
  248.         cmp.set("v.body", null);
  249.         this.handleFetchOpps(cmp);
  250.     }
  251. })
  252.  
  253. CSS -
  254. .THIS {
  255. }
  256. .THIS .waitingDatatable {
  257.     opacity: t(dataTableOpacity);
  258. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top