API tools faq
paste
Advertisement
hsianghui

list_customers.ejs (lab5)

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