I have a huge Aura Component that I must convert into a Lightning Web Component. I need some help to start develop this new component.
One part of the Controller code:
({
doInit: function (component, event, helper) {
component.set('v.showSaveSuccess', false);
helper.ondoInitRender(component);
helper.addScroll(component);
if (event.getParam('newRequestReceived')) {
component.set('v.cmpCreated', true);
}
helper.getFilters(component);
},
getProducts: function (component, event, helper) {
helper.getProducts(component);
},
handleApplicationEvent: function (component, event, helper) {
helper.handleApplicationEventHelper(component, event);
helper.buildData(component);
},
selectAllFunc: function (component, event, helper) {
helper.selectAllHelper(component);
},
changeVal: function (component, event, helper) {
var fieldname = event.getSource().get('v.name');
var name = fieldname.slice(9);
var value = event.getSource().get('v.value');
if (value != null && value != '') {
helper.changeValHelper(component, name);
}
}
...
})
A part of the Helper code:
({
getFilters: function (component) {
this.showSpinner(component);
var action = component.get("c.initFilters");
var arrExisting = !$A.util.isUndefinedOrNull(component.get("v.productsAlreadyInCart")) ? component.get("v.productsAlreadyInCart") : [];
action.setParams({
oppId : component.get("v.recordId"),
doInit : true,
productsAlreadyInCart : JSON.stringify(arrExisting),
existingFiltersStr : null
});
action.setCallback(this, function(response) {
if (component.get('v.cmpCreated')) {
window.parent.location.reload(true);
} else {
this.hideSpinner(component);
}
var state = response.getState();
if (state === "SUCCESS") {
if(!$A.util.isUndefinedOrNull(response.getReturnValue().validatePage)) {
this.navigateToComponentHelper(component, response.getReturnValue().validatePage);
} else {
var vals = [$A.get("$Label.c.Label_CreateOpportunity"),
$A.get("$Label.c.Label_ProductSearch"),
$A.get("$Label.c.Sopping_cart_title"),
$A.get("$Label.c.Label_AdditionalInformation")];
component.set("v.indicatorElements", vals);
component.set("v.filterObjs", response.getReturnValue().filters);
component.set("v.mainObj", response.getReturnValue());
component.set("v.triggerGetProds", true);
if (localStorage.getItem("showSaveSuccess") != null) {
component.set('v.showSaveSuccess', true);
var mainObj = component.get("v.mainObj");
mainObj.messageType = 'success';
mainObj.messageToDisplay = $A.get("$Label.c.Saved_Date");
component.set("v.mainObj", mainObj);
}
localStorage.removeItem("showSaveSuccess")
}
} else if (state === "ERROR") {
var errors = response.getError();
if (errors) {
if (errors[0] && errors[0].message) {
this.showToast($A.get("$Label.c.ErrorMessage"), errors[0].message);
}
} else {
this.showToast($A.get("$Label.c.ErrorMessage"), $A.get("$Label.c.UnknownError"));
}
}
});
$A.enqueueAction(action);
}
...
})
The Handler code:
({
afterRender: function (component, helper) {
this.superAfterRender();
if($A.get("$Browser.isIPad")) {
document.querySelector(".slds-max-medium-table--stacked-horizontal").classList.add('tableIpadPro');
document.querySelector(".slds-max-medium-table--stacked-horizontal thead").classList.add('theadIpadPro');
var arr = document.getElementsByTagName("tr");
for(var a = 0; a < arr.length; a++){
arr[a].classList.add('trIpadPro');
}
arr = document.getElementsByTagName("td");
for(var a = 0; a < arr.length; a++){
arr[a].classList.add('tdIpadProSecondary');
}
arr = document.getElementsByTagName("td");
for(var a = 0; a < arr.length; a++){
arr[a].classList.add('tdBefore');
}
}
}
})
Please, I need help to start converting from Aura to LWC.
Thanks in advance, Renato