API tools faq
paste
Advertisement
hsianghui

searchCustomers2.xhtml (without AJAX)

hsianghui
Apr 10th, 2024
92
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.29 KB | None | 0 0
raw download clone embed print report
  1. <?xml version='1.0' encoding='UTF-8' ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml"
  4. xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
  5.  
  6. <body>
  7.  
  8. <ui:composition template="./layout/default2.xhtml">
  9.  
  10. <ui:define name="title">
  11. title
  12. </ui:define>
  13.  
  14. <ui:define name="content">
  15. <!-- Content Header (Page header) -->
  16. <div class="content-header">
  17. <div class="container-fluid">
  18. <div class="row mb-2">
  19. <div class="col-sm-6">
  20. <h1 class="m-0 text-dark">Search Customers</h1>
  21. </div>
  22. <!-- /.col -->
  23. <div class="col-sm-6">
  24. <ol class="breadcrumb float-sm-right">
  25. <li class="breadcrumb-item">
  26. <a href="#{request.contextPath}">Home</a>
  27. </li>
  28. <li class="breadcrumb-item active">
  29. List Customers
  30. </li>
  31. </ol>
  32. </div>
  33. <!-- /.col -->
  34. </div>
  35. <!-- /.row -->
  36. </div>
  37. <!-- /.container-fluid -->
  38. </div>
  39. <!-- /.content-header -->
  40.  
  41. <!-- Main content -->
  42. <section class="content">
  43. <div class="row">
  44. <div class="col-12">
  45. <div class="card">
  46. <div class="card-header">
  47. <h3 class="card-title">Search Customers</h3>
  48. </div>
  49. <div class="card-body">
  50. <table id="example1" class="table table-bordered table-striped">
  51. <thead>
  52. <tr>
  53. <th>Id</th>
  54. <th>Name</th>
  55. <th>Gender</th>
  56. <th>DOB</th>
  57. <th>Created</th>
  58. <th></th>
  59. </tr>
  60. </thead>
  61. <tbody>
  62. </tbody>
  63. <tfoot>
  64. <tr>
  65. <th>Id</th>
  66. <th>Name</th>
  67. <th>Gender</th>
  68. <th>DOB</th>
  69. <th>Created</th>
  70. <th></th>
  71. </tr>
  72. </tfoot>
  73. </table>
  74. </div>
  75. </div>
  76. <!-- /.card -->
  77. </div>
  78. <!-- /.col -->
  79. </div>
  80. <div class="modal fade" id="modal-default">
  81. <div class="modal-dialog">
  82. <div class="modal-content">
  83. <div class="modal-header">
  84. <h5 class="modal-title" id="exampleModalLabel">Customer Details</h5>
  85. <button type="button" class="close" data-dismiss="modal">
  86. <span aria-hidden="true">&times;</span>
  87. </button>
  88. </div>
  89. <div class="modal-body" id="dialog-body">
  90. </div>
  91. <div class="modal-footer">
  92. <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  93. </div>
  94. </div>
  95. <!-- /.modal-content -->
  96. </div>
  97. <!-- /.modal-dialog -->
  98. </div>
  99. <!-- /.modal -->
  100. </section>
  101. <!-- /.content -->
  102. </ui:define>
  103.  
  104. <ui:define name="script">
  105. <script>
  106. //<![CDATA[
  107. //Add the CDATA tag so that JSF will not have issues when using sensitive
  108. //symbols e.g. < and &
  109.  
  110. //get the JSON String from a managed bean function instead
  111. const dataset = JSON.parse('#{customerManagedBean.getAllCustomersJSON()}');
  112.  
  113. //perform the filtering like before
  114. const filteredData = dataset.map(function (item) {
  115. //convert gender's value to 'Female' or 'Male'
  116. item.gender = (item.gender === 1) ? 'Female' : 'Male';
  117.  
  118. //convert dob and created's date format
  119. //remove the [UTC] suffix
  120. item.created = moment(item.created.substring(0, item.created.length - 5)).format('DD/MM/YYYY');
  121. item.dob = moment(item.dob.substring(0, item.dob.length - 5)).format('DD/MM/YYYY');
  122. return item;
  123. });
  124.  
  125. console.log(filteredData);
  126.  
  127. var selectedCId = null;
  128. var dtable = $('#example1').DataTable({
  129. 'paging': true,
  130. 'lengthChange': false,
  131. 'pageLength': 5, //5 entries per page
  132. 'searching': true,
  133. 'ordering': true,
  134. 'info': true,
  135. 'autoWidth': false,
  136. data: filteredData,
  137. //no more ajax calls
  138. // 'ajax': {
  139. // url: '/CRM-war/webresources/customers',
  140. // dataFilter: function (data) {
  141. // //add the 'data' attribute to the JSON response
  142. // //so that it can be read properly with DataTable
  143. // var json = jQuery.parseJSON(data);
  144. //
  145. // json.map(function (item) {
  146. // //convert gender's value to 'Female' or 'Male'
  147. // item.gender = (item.gender === 1) ? 'Female' : 'Male';
  148. //
  149. // //convert dob and created's date format
  150. // //remove the [UTC] suffix
  151. // item.created = moment(item.created.substring(0, item.created.length - 5)).format('DD/MM/YYYY');
  152. // item.dob = moment(item.dob.substring(0, item.dob.length - 5)).format('DD/MM/YYYY');
  153. // });
  154. //
  155. // //convert all the gender field to be male or female
  156. // json = {'data': json};
  157. // return JSON.stringify(json);
  158. // }
  159. // },
  160. "columnDefs": [{
  161. 'targets': -1,
  162. 'data': null,
  163. 'defaultContent': '<div class="btn-group">\
  164. <button type="button" data-type="view" class="search btn btn-default" data-toggle="modal" data-target="#modal-default"><i class="fa fa-fw fa-search"></i></button>\
  165. <button type="button" data-type="edit" class="btn btn-default"><i class="fa fa-fw fa-edit"></i></button>\
  166. <button type="button" data-type="delete" class="btn btn-default"><i class="fa fa-fw fa-trash"></i></button>\
  167. </div>'
  168. }],
  169. 'columns': [
  170. {'data': 'id'}, {'data': 'name'}, {'data': 'gender'}, {'data': 'dob'},
  171. {'data': 'created'}, {'data': null}
  172. ]
  173. });
  174.  
  175. function reloadDataTable() {
  176. dtable.ajax.reload(function () {
  177. if (selectedCId !== null) {
  178. var data = dtable.data();
  179. for (var i = 0; i < data.length; i++) {
  180. if (data[i].id === selectedCId) {
  181. refreshDialog(data[i]);
  182. break;
  183. }
  184. }
  185. }
  186. });
  187. } //end reloadDataTable
  188.  
  189. function addContact(cId) {
  190. var contact = $('#selectContact').val();
  191. var contactValue = $('#inputContactValue').val().trim();
  192. if (contactValue === '') {
  193. return;
  194. }
  195.  
  196. var data = {};
  197. if (contact === 'PHONE') {
  198. data.phone = contactValue;
  199. } else if (contact === 'EMAIL') {
  200. data.email = contactValue;
  201. }
  202.  
  203. $.ajax({
  204. url: '/CRM-war/webresources/customers/' + cId + '/contacts',
  205. headers: {
  206. 'Accept': 'application/json',
  207. 'Content-Type': 'application/json'
  208. },
  209. type: 'POST',
  210. data: JSON.stringify(data),
  211. success: function () {
  212. reloadDataTable();
  213. }
  214. });
  215. } //end addContact
  216.  
  217. function addField(cId) {
  218. var field = $('#inputField').val().trim();
  219. var fieldValue = $('#inputFieldValue').val().trim();
  220. if (field === '' || fieldValue === '') {
  221. return;
  222. }
  223.  
  224. $.ajax({
  225. url: '/CRM-war/webresources/customers/' + cId + '/fields',
  226. headers: {
  227. 'Accept': 'application/json',
  228. 'Content-Type': 'application/json'
  229. },
  230. type: 'POST',
  231. data: JSON.stringify({name: field, fieldValue: fieldValue}),
  232. success: function () {
  233. reloadDataTable();
  234. }
  235. });
  236. } //end addField
  237.  
  238. function deleteContact(e) {
  239. var thisElement = $(e);
  240. var cId = thisElement.attr('data-contact-id');
  241.  
  242. var choice = confirm("Do you want to delete?");
  243.  
  244. if (choice) {
  245. $.ajax({
  246. url: '/CRM-war/webresources/contacts/' + cId,
  247. type: 'DELETE',
  248. success: function () {
  249. reloadDataTable();
  250. }
  251. });
  252. }
  253. } //end deleteContact
  254.  
  255. function deleteField(e) {
  256. var thisElement = $(e);
  257. var fId = thisElement.attr('data-field-id');
  258. var cId = thisElement.attr('data-customer-id');
  259.  
  260. var choice = confirm("Do you want to delete?");
  261.  
  262. if (choice) {
  263. $.ajax({
  264. url: '/CRM-war/webresources/customers/' + cId + '/fields/' + fId,
  265. type: 'DELETE',
  266. success: function () {
  267. reloadDataTable();
  268. }
  269. });
  270. }
  271. } //end deleteField
  272.  
  273. function refreshDialog(data) {
  274. var cId = data.id;
  275. var html = '<div class="row">\
  276. <div class="col-4"><b>Id</b></div>\
  277. <div class="col-8">' + cId + '</div>\
  278. <div class="col-4"><b>Name</b></div>\
  279. <div class="col-8">' + data.name + '</div>\
  280. <div class="col-4"><b>Gender</b></div>\
  281. <div class="col-8">' + data.gender + '</div>\
  282. <div class="col-4"><b>DOB</b></div>\
  283. <div class="col-8">' + data.dob + '</div>\
  284. <div class="col-4"><b>Created</b></div>\
  285. <div class="col-8">' + data.created + '</div>';
  286.  
  287. //add list of fields
  288. var fields = data['fields'];
  289. fields.map(function (item) {
  290. html += '<div class="col-4"><b>' + item.name + '</b></div>';
  291. html += '<div class="col-4">' + item.fieldValue + '</div>';
  292. html += '<div class="col-4"><button class="btn btn-danger btn-sm" data-customer-id="' + data.id + '" data-field-id="' + item.id + '" onclick="deleteField(this)">Delete</button></div>';
  293. });
  294.  
  295. //add list of contacts
  296. var contacts = data.contacts;
  297. contacts.map(function (item) {
  298. if (item['phone']) {
  299. html += '<div class="col-4"><b>Phone</b></div>';
  300. html += '<div class="col-4">' + item.phone + '</div>';
  301. html += '<div class="col-4"><button class="btn btn-danger btn-sm" data-contact-id="' + item.id + '" onclick="deleteContact(this)">Delete</button></div>';
  302. } else if (item['email']) {
  303. html += '<div class="col-4"><b>Email</b></div>';
  304. html += '<div class="col-4">' + item.email + '</div>';
  305. html += '<div class="col-4"><button class="btn btn-danger btn-sm" data-contact-id="' + item.id + '" onclick="deleteContact(this)">Delete</button></div>';
  306. }
  307. });
  308.  
  309. //add textbox for adding field
  310. html += '<div class="col-4"><input class="form-control" id="inputField" placeholder="field name" required/></div>';
  311. html += '<div class="col-4"><input class="form-control" id="inputFieldValue" placeholder="field value" required/></div>';
  312. html += '<div class="col-4"><button class="btn btn-primary" onclick="addField(' + cId + ')">Add Field</button></div>';
  313.  
  314. //add textbox for adding contact
  315. html += '<div class="col-4"><select class="form-control" id="selectContact"><option value="PHONE">Phone</option><option value="EMAIL">Email</option></select></div>';
  316. html += '<div class="col-4"><input class="form-control" id="inputContactValue" required/></div>';
  317. html += '<div class="col-4"><button class="btn btn-success" onclick="addContact(' + cId + ')">Add Contact</button></div>';
  318.  
  319. html += '</div>';
  320. $('#dialog-body').html(html);
  321. } //end refreshDialog
  322.  
  323. $('#example1 tbody').on('click', 'button', function () {
  324. var button = $(this);
  325. var type = button.attr('data-type');
  326. var data = dtable.row($(this).parents('tr')).data();
  327. var id = data.id;
  328.  
  329. if (type === 'view') {
  330. //load the dialog box
  331. refreshDialog(data);
  332. selectedCId = id;
  333. } //end if
  334. else if (type === 'edit') {
  335. window.location.href = "manageCustomer.xhtml?cId=" + id;
  336. } //end else if
  337. else if (type === 'delete') {
  338. //DO a DELETE request and refresh
  339. var choice = confirm("Do you want to delete?");
  340.  
  341. if (choice) {
  342. $.ajax({
  343. url: '/CRM-war/webresources/customers/' + id,
  344. type: 'DELETE',
  345. success: function () {
  346. dtable.ajax.reload();
  347. }
  348. });
  349. } //end if
  350. } //end else if
  351. });
  352.  
  353. $('#modal-default').on('hidden.bs.modal', function (e) {
  354. selectedCId = null;
  355. })
  356. //]]>
  357. </script>
  358. </ui:define>
  359.  
  360. </ui:composition>
  361.  
  362. </body>
  363. </html>
  364.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!