Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- UI -
- <aura:component controller="DataTableServerContrl">
- <aura:attribute name="isPaginationEnabled" type="Boolean" default="true"/>
- <aura:attribute name="opportunities" type="Sobject[]"/>
- <aura:attribute name="fieldApiNames" type="String[]"/>
- <aura:attribute name="fieldLabels" type="String[]"/>
- <aura:attribute name="limitSize" type="String" description="Records limit per page."/>
- <aura:attribute name="offsetSize" type="String" description="Records needs to be skipped." default="0"/>
- <aura:attribute name="totalSize" type="String" description="Total records in the object." default="0"/>
- <aura:attribute name="hasPrevious" type="Boolean" description="To disable First and Previous buttons." default="false"/>
- <aura:attribute name="hasNext" type="Boolean" description="To disable First and Previous buttons." default="true"/>
- <aura:handler name="init" value="{!this}" action="{!c.onInit}"/>
- <aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
- <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
- <aura:handler name="oppCloseEvnt" event="c:OppPopupCloseEvent" action="{!c.closePopup}"/>
- <aura:handler name="popEvent" event="c:PopupAppEvent" action="{!c.createOppPopup}"/>
- <div class="demo-only demo--inverse" id="loadingStat" style="display:block;">
- <!--<div class="slds-spinner_container slds-is-fixed">
- <div role="status" class="slds-spinner slds-spinner_medium">
- <span class="slds-assistive-text">Loading</span>
- <div class="slds-spinner__dot-a"></div>
- <div class="slds-spinner__dot-b"></div>
- </div>
- </div>-->
- </div>
- <div class="slds-grid slds-m-top--xx-small">
- <div class="slds-form--inline slds-col"/>
- <div class="slds-form--inline slds-col">
- <div class="slds-form-element__control">
- <div class="slds-form-element__control">
- <div class="slds-form-element">
- <ui:spinner aura:id="dataTableSpinner" />
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="slds-grid">
- <div class="slds-col slds-scrollable--x slds-m-top--x-small" aura:id="dataTableId">
- <table class="slds-table slds-table_bordered slds-table_cell-buffer">
- <thead class="slds-theme--shade">
- <tr class="slds-text-title_caps">
- <aura:iteration items="{!v.fieldLabels}" var="theLabel">
- <th scope="col" class="">
- <div class="slds-truncate" title="{!theLabel}">{!theLabel}</div>
- </th>
- </aura:iteration>
- </tr>
- </thead>
- <tbody>
- <aura:iteration items="{!v.opportunities}" var="opp">
- <tr>
- <aura:iteration items="{!v.fieldApiNames}" var="theFieldApi">
- <td>
- <div class="slds-truncate" title="Cloudhub"><c:RecordComp record="{!opp}" fldApiName="{!theFieldApi}"/></div>
- </td>
- </aura:iteration>
- </tr>
- </aura:iteration>
- </tbody>
- </table>
- </div>
- </div>
- <aura:if isTrue="{!v.totalSize > 0}">
- <div class="slds-grid slds-m-top--x-small slds-scrollable--x">
- <div class="slds-button-group slds-align_absolute-center" role="group">
- <button type="button" class="slds-button slds-button_neutral" disabled="{!!(v.isPaginationEnabled && v.hasPrevious)}" onclick="{!c.onFirst}">First</button>
- <button class="slds-button slds-button_neutral" disabled="{!!(v.isPaginationEnabled && v.hasPrevious)}" onclick="{!c.onPrevious}">Previous</button>
- <button class="slds-button slds-button_neutral" disabled="{!!(v.isPaginationEnabled && v.hasNext)}" onclick="{!c.onNext}">Next</button>
- <button class="slds-button slds-button_neutral" disabled="{!!(v.isPaginationEnabled && v.hasNext)}" onclick="{!c.onLast}">Last</button>
- </div>
- </div>
- </aura:if>
- <div id="oppDialog">
- {!v.body}
- </div>
- </aura:component>
- Controller JS -
- ({
- onInit : function(component, event, helper) {
- helper.doInit(component, event);
- },
- onFirst : function(component, event, helper) {
- helper.handleOnFirst(component, event);
- },
- onPrevious : function(component, event, helper) {
- helper.handleOnPrevious(component, event);
- },
- onNext : function(component, event, helper) {
- helper.handleOnNext(component, event);
- },
- onLast : function(component, event, helper) {
- helper.handleOnLast(component, event);
- },
- showSpinner : function (component, event, helper) {
- helper.handleShowSpinner(component, event);
- },
- hideSpinner : function (component, event, helper) {
- helper.handleHideSpinner(component, event);
- },
- createOppPopup : function (component, event, helper) {
- helper.handleCreateOppPopup(component, event);
- },
- closePopup : function(cmp, event, helper) {
- helper.handleClosePopup(cmp, event);
- }
- })
- Helper JS -
- ({
- doInit : function(cmp, event) {
- this.handleFetchOpps(cmp);
- },
- handleFetchOpps : function(cmp) {
- var action = cmp.get("c.fetchOpportunities");
- action.setParams({ limitSize : cmp.get("v.limitSize"), offsetSize : cmp.get("v.offsetSize")});
- action.setCallback(this, function(response) {
- var state = response.getState();
- console.log('***state: '+state);
- if (state === "SUCCESS") {
- // Alert the user with the value returned
- // from the server
- console.log("From server: " + JSON.stringify(response.getReturnValue()));
- var res = response.getReturnValue();
- console.log(res.records);
- //alert(JSON.stringify(res.records));
- cmp.set("v.opportunities",JSON.parse(JSON.stringify(res.records)));
- //alert(cmp.get("v.opportunities").length);
- console.log(JSON.stringify(res.fieldApiAndDataTypes));
- cmp.set("v.fieldApiNames",res.fieldApiAndDataTypes);
- console.log(res.fieldLabels);
- cmp.set("v.fieldLabels",res.fieldLabels);
- console.log('totalSize: '+res.totalSize);
- cmp.set("v.totalSize",res.totalSize);
- }
- else if (state === "INCOMPLETE") {
- // do something
- }
- else if (state === "ERROR") {
- var errors = response.getError();
- if (errors) {
- if (errors[0] && errors[0].message) {
- console.log("Error message: " +
- errors[0].message);
- }
- } else {
- console.log("Unknown error");
- }
- }
- });
- $A.enqueueAction(action);
- },
- handleOnFirst : function(cmp, event) {
- cmp.set("v.offsetSize","0")
- this.disableEnableButtons(cmp);
- this.handleFetchOpps(cmp);
- },
- handleOnPrevious : function(cmp, event) {
- var offsetSize = cmp.get("v.offsetSize");
- var limitSize = cmp.get("v.limitSize");
- var newOffsetSize = Number(offsetSize) - Number(limitSize);
- cmp.set("v.offsetSize",newOffsetSize.toString());
- console.log(cmp.get("v.offsetSize"));
- this.disableEnableButtons(cmp);
- this.handleFetchOpps(cmp);
- },
- handleOnNext : function(cmp, event) {
- var offsetSize = cmp.get("v.offsetSize");
- var limitSize = cmp.get("v.limitSize");
- var newOffsetSize = Number(offsetSize) + Number(limitSize);
- cmp.set("v.offsetSize",newOffsetSize.toString())
- console.log(cmp.get("v.offsetSize"));
- this.disableEnableButtons(cmp);
- this.handleFetchOpps(cmp);
- },
- handleOnLast : function(cmp, event) {
- var offsetSize = cmp.get("v.offsetSize");
- var limitSize = cmp.get("v.limitSize");
- var totalSize = cmp.get("v.totalSize");
- var reminder = Number(totalSize) % Number(limitSize);
- if(Number(reminder) == 0) {
- var newOffsetSize = Number(totalSize) - Number(limitSize);
- cmp.set("v.offsetSize",newOffsetSize.toString());
- }
- else {
- var newOffsetSize = Number(totalSize) - Number(reminder);
- cmp.set("v.offsetSize",newOffsetSize.toString());
- }
- this.disableEnableButtons(cmp);
- this.handleFetchOpps(cmp);
- },
- disableEnableButtons : function(cmp) {
- var offsetSize = cmp.get("v.offsetSize");
- var limitSize = cmp.get("v.limitSize");
- var totalSize = cmp.get("v.totalSize");
- var reminder = Number(totalSize) % Number(limitSize)
- console.log('offsetSize: '+offsetSize);
- console.log('limitSize: '+limitSize);
- console.log('totalSize: '+totalSize);
- console.log('reminder: '+reminder);
- if(Number(offsetSize) > 0) {
- cmp.set("v.hasPrevious",true);
- }
- if(Number(offsetSize) + Number(limitSize) >= Number(totalSize)) {
- cmp.set("v.hasNext",false);
- }
- if(Number(offsetSize) == 0) {
- cmp.set("v.hasPrevious",false);
- }
- if(Number(offsetSize) + Number(limitSize) < Number(totalSize)) {
- cmp.set("v.hasNext",true);
- }
- },
- handleShowSpinner : function (component, event) {
- var spinner = component.find('dataTableSpinner');
- var evt = spinner.get("e.toggle");
- evt.setParams({ isVisible : true });
- evt.fire();
- $A.util.toggleClass(component.find('dataTableId'), "waitingDatatable");
- component.set("v.isPaginationEnabled",false);
- document.getElementById("loadingStat").style.display = "block";
- },
- handleHideSpinner : function (component, event) {
- var spinner = component.find('dataTableSpinner');
- var evt = spinner.get("e.toggle");
- evt.setParams({ isVisible : false });
- evt.fire();
- $A.util.toggleClass(component.find('dataTableId'), "waitingDatatable");
- component.set("v.isPaginationEnabled",true);
- document.getElementById("loadingStat").style.display = "none";
- },
- handleCreateOppPopup : function (cmp, event) {
- console.log(event.getParam("oppId"));
- $A.createComponent(
- "c:OpportunityForm",
- {
- "oppId": event.getParam("oppId")
- },
- function(res){
- if (cmp.isValid()) {
- cmp.set("v.body", res);
- }
- }
- );
- },
- handleClosePopup : function(cmp, event) {
- cmp.set("v.body", null);
- this.handleFetchOpps(cmp);
- }
- })
- CSS -
- .THIS {
- }
- .THIS .waitingDatatable {
- opacity: t(dataTableOpacity);
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement