Advertisement
Guest User

Untitled

a guest
Sep 15th, 2019
111
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.28 KB | None | 0 0
  1. UI -
  2. <aura:component controller="DatatableContrl">
  3. <aura:attribute name="selectedRows" type="List"/>
  4. <aura:attribute name="objectName" type="String"/>
  5. <aura:attribute name="fields" type="List" default=""/>
  6. <aura:attribute name="isEdit" type="Boolean"/>
  7. <aura:attribute name="rowsToUpd" type="List"/>
  8.  
  9. <aura:attribute name="msg" type="String"/>
  10. <aura:attribute name="msgType" type="String"/>
  11.  
  12. <aura:registerEvent name="inClsEnt" type="c:InputFormCloseEvent"/>
  13.  
  14. <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
  15. <div class="demo-only" style="height: 640px;">
  16. <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
  17. <div class="slds-modal__container">
  18. <header class="slds-modal__header">
  19. <div class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse">
  20. <lightning:buttonIcon iconName="utility:close" variant="bare-inverse" alternativeText="close" onclick="{!c.onClose}"/>
  21. </div>
  22. <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Input Form</h2>
  23. </header>
  24. <aura:if isTrue="{!v.msg}">
  25. <c:Message msg="{!v.msg}" msgType="{!v.msgType}"/>
  26. </aura:if>
  27. <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
  28. <table class="slds-table slds-table_bordered slds-table_cell-buffer">
  29. <thead>
  30. <tr class="slds-text-title_caps">
  31. <aura:iteration items="{!v.fields}" var="fld">
  32. <th scope="col">
  33. <div class="slds-truncate" title="{!fld.label}">{!fld.label}</div>
  34. </th>
  35. </aura:iteration>
  36. </tr>
  37. </thead>
  38. <tbody>
  39.  
  40. <aura:iteration items="{!v.selectedRows}" var="row" indexVar="index">
  41. <tr id="{!index}">
  42. <aura:iteration items="{!row.entries}" var="fldVal">
  43. <td data-label="{!fldVal.value}">
  44. <div class="slds-form-element">
  45. <div class="slds-form-element__control">
  46. <input type="text" id="{!fldVal.fieldName}" class="slds-input" placeholder="{!fldVal.type}" value="{!fldVal.value}"/>
  47. </div>
  48. </div>
  49. </td>
  50. </aura:iteration>
  51. </tr>
  52. </aura:iteration>
  53. </tbody>
  54. </table>
  55. </div>
  56. <footer class="slds-modal__footer">
  57. <button class="slds-button slds-button_neutral" disabled="{!!v.msg}" onclick="{!c.onClose}">Ok</button>
  58. <button class="slds-button slds-button_brand" onclick="{!c.onSave}">Save</button>
  59. </footer>
  60. </div>
  61. </section>
  62. <div class="slds-backdrop slds-backdrop_open"></div>
  63. </div>
  64. </aura:component>
  65.  
  66. Controller Js -
  67. ({
  68. doInit : function(cmp, event, helper) {
  69. var records = cmp.get("v.selectedRows");
  70. var fields = cmp.get("v.fields");
  71. for(var i = 0; i < records.length; i++) {
  72. records[i].entries = [];
  73. for(var j = 0; j < fields.length; j++) {
  74. records[i].entries.push({
  75. label : fields[j].label,
  76. fieldName : fields[j].fieldName,
  77. type : fields[j].type,
  78. value : records[i][fields[j].fieldName],
  79. });
  80. }
  81. }
  82. console.log('records: '+JSON.stringify(records));
  83. cmp.set("v.selectedRows",records);
  84. },
  85. onClose : function(cmp, event, helper) {
  86. cmp.set("v.msg",'');
  87. cmp.set("v.msgType",'');
  88. cmp.set("v.isEdit",false);
  89. var compEvent = cmp.getEvent("inClsEnt");
  90. // Optional: set some data for the event (also known as event shape)
  91. // A parameter’s name must match the name attribute
  92. // of one of the event’s <aura:attribute> tags
  93. // compEvent.setParams({"myParam" : myValue });
  94. compEvent.fire();
  95. },
  96. onSave : function(cmp, event, helper) {
  97. //var input = document.getElementById("0").getElementsByTagName("td")[0].getElementsByClassName("slds-input")[0];
  98. //alert(input.type);
  99. debugger;
  100. var records = cmp.get("v.selectedRows");
  101. var recSize = records.length;
  102. var recs = [];
  103. for(var i=0;i< recSize; i++) {
  104. var tds = document.getElementById(i).getElementsByTagName("td");
  105. var json = {};
  106. json['Id'] = records[i].Id;
  107. json['sObjectType'] = cmp.get("v.objectName");
  108. for(var j=0;j<tds.length;j++) {
  109. var type = tds[j].getElementsByClassName("slds-input")[0].placeholder;
  110. //console.log(type);
  111. var val = tds[j].getElementsByClassName("slds-input")[0].value;
  112. json[tds[j].getElementsByClassName("slds-input")[0].id] = (type == 'double' || type == 'currency') ? parseInt(val) : val;
  113. }
  114. console.log('*** json:** '+JSON.stringify(json));
  115. recs.push(json);
  116. }
  117. //console.log('### recs: '+JSON.stringify(recs));
  118. cmp.set("v.rowsToUpd",recs);
  119. helper.handleOnSave(cmp, event);
  120. }
  121. })
  122.  
  123. Helper Js -
  124. ({
  125. handleOnSave : function(cmp, event) {
  126. debugger;
  127. var records = cmp.get("v.rowsToUpd");
  128. console.log(JSON.stringify(records));
  129. var action = cmp.get("c.save");
  130. action.setParams({
  131. records : records
  132. });
  133. action.setCallback(this,function(response) {
  134. var state = response.getState();
  135. if(state == 'SUCCESS') {
  136. var res = response.getReturnValue();
  137. cmp.set("v.msg",res);
  138. if(res.startsWith('Error'))
  139. cmp.set("v.msgType",'error');
  140. else
  141. cmp.set("v.msgType",'success');
  142. }
  143. else {
  144. cmp.set("v.msg",'Error.');
  145. cmp.set("v.msgType",'error');
  146. }
  147. });
  148. $A.enqueueAction(action);
  149. }
  150. })
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement