IS3106 Lab6 (searchCustomers2.xhtml) script section

<script>
//<![CDATA[
//Add the CDATA tag so that JSF will not have issues when using sensitive
//symbols e.g. < and &

var selectedCId = null;
var dtable = $('#example1').DataTable({
  'paging': true,
  'lengthChange': false,
    'pageLength': 5, //5 entries per page
    'searching': true,
    'ordering': true,
    'info': true,
    'autoWidth': false,
    'ajax': {
      url: '/CRM-war/webresources/customers',
      dataFilter: function (data) {
        //add the 'data' attribute to the JSON response
        //so that it can be read properly with DataTable
        var json = jQuery.parseJSON(data);

        json.map(function (item) {
            //convert gender's value to 'Female' or 'Male'
            item.gender = (item.gender === 1) ? 'Female' : 'Male';

            //convert dob and created's date format
            //remove the [UTC] suffix
            item.created = moment(item.created.substring(0, item.created.length - 5)).format('DD/MM/YYYY');
            item.dob = moment(item.dob.substring(0, item.dob.length - 5)).format('DD/MM/YYYY');
          });

        //convert all the gender field to be male or female
        json = {'data': json};
        return JSON.stringify(json);
      }
    },
    "columnDefs": [{
      'targets': -1,
      'data': null,
      'defaultContent': '<div class="btn-group">\
      <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>\
      <button type="button" data-type="edit" class="btn btn-default"><i class="fa fa-fw fa-edit"></i></button>\
      <button type="button" data-type="delete" class="btn btn-default"><i class="fa fa-fw fa-trash"></i></button>\
      </div>'
    }],
    'columns': [
      {'data': 'id'},{'data': 'name'},{'data': 'gender'},{'data': 'dob'},
      {'data': 'created'},{'data': null}
    ]
  });

function reloadDataTable() {
  dtable.ajax.reload(function () {
    if (selectedCId !== null) {
      var data = dtable.data();
      for (var i = 0; i < data.length; i++) {
        if (data[i].id === selectedCId) {
          refreshDialog(data[i]);
          break;
        }
      }
    }
  });
} //end reloadDataTable

function addContact(cId) {
  var contact = $('#selectContact').val();
  var contactValue = $('#inputContactValue').val().trim();
  if (contactValue === ''){
    return;
  }

  var data = {};
  if (contact === 'PHONE') {
    data.phone = contactValue;
  }
  else if (contact === 'EMAIL') {
    data.email = contactValue;
  }

  $.ajax({
    url: '/CRM-war/webresources/customers/' + cId + '/contacts',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    type: 'POST',
    data: JSON.stringify(data),
    success: function(){
      reloadDataTable();
    }
  });
  } //end addContact

  function addField(cId) {
    var field = $('#inputField').val().trim();
    var fieldValue = $('#inputFieldValue').val().trim();
    if (field === '' || fieldValue === ''){
      return;
    }

    $.ajax({
      url: '/CRM-war/webresources/customers/' + cId + '/fields',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      type: 'POST',
      data: JSON.stringify({name: field, fieldValue: fieldValue}),
      success: function(){
        reloadDataTable();
      }
    });
} //end addField

function deleteContact(e) {
  var thisElement = $(e);
  var cId = thisElement.attr('data-contact-id');

  var choice = confirm("Do you want to delete?");

  if (choice) {
    $.ajax({
      url: '/CRM-war/webresources/contacts/' + cId,
      type: 'DELETE',
      success: function () {
        reloadDataTable();
      }
    });
  }
} //end deleteContact

function deleteField(e) {
  var thisElement = $(e);
  var fId = thisElement.attr('data-field-id');
  var cId = thisElement.attr('data-customer-id');

  var choice = confirm("Do you want to delete?");

  if (choice) {
    $.ajax({
      url: '/CRM-war/webresources/customers/' + cId + '/fields/' + fId,
      type: 'DELETE',
      success: function () {
        reloadDataTable();
      }
    });
  }
} //end deleteField

function refreshDialog(data) {
  var cId = data.id;
  var html = '<div class="row">\
  <div class="col-4"><b>Id</b></div>\
  <div class="col-8">' + cId + '</div>\
  <div class="col-4"><b>Name</b></div>\
  <div class="col-8">' + data.name + '</div>\
  <div class="col-4"><b>Gender</b></div>\
  <div class="col-8">' + data.gender + '</div>\
  <div class="col-4"><b>DOB</b></div>\
  <div class="col-8">' + data.dob + '</div>\
  <div class="col-4"><b>Created</b></div>\
  <div class="col-8">' + data.created + '</div>';

    //add list of fields
    var fields = data['fields'];
    fields.map(function (item) {
      html += '<div class="col-4"><b>' + item.name + '</b></div>';
      html += '<div class="col-4">' + item.fieldValue + '</div>';
      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>';
    });

    //add list of contacts
    var contacts = data.contacts;
    contacts.map(function (item) {
      if (item['phone']) {
        html += '<div class="col-4"><b>Phone</b></div>';
        html += '<div class="col-4">' + item.phone + '</div>';
        html += '<div class="col-4"><button class="btn btn-danger btn-sm" data-contact-id="' + item.id + '" onclick="deleteContact(this)">Delete</button></div>';
      }
      else if (item['email']) {
        html += '<div class="col-4"><b>Email</b></div>';
        html += '<div class="col-4">' + item.email + '</div>';
        html += '<div class="col-4"><button class="btn btn-danger btn-sm" data-contact-id="' + item.id + '" onclick="deleteContact(this)">Delete</button></div>';
      }
    });

    //add textbox for adding field
    html += '<div class="col-4"><input class="form-control" id="inputField" placeholder="field name" required/></div>';
    html += '<div class="col-4"><input class="form-control" id="inputFieldValue" placeholder="field value" required/></div>';
    html += '<div class="col-4"><button class="btn btn-primary" onclick="addField(' + cId + ')">Add Field</button></div>';

    //add textbox for adding contact
    html += '<div class="col-4"><select class="form-control" id="selectContact"><option value="PHONE">Phone</option><option value="EMAIL">Email</option></select></div>';
    html += '<div class="col-4"><input class="form-control" id="inputContactValue" required/></div>';
    html += '<div class="col-4"><button class="btn btn-success" onclick="addContact(' + cId + ')">Add Contact</button></div>';

    html += '</div>';
    $('#dialog-body').html(html);
} //end refreshDialog

$('#example1 tbody').on('click', 'button', function () {
  var button = $(this);
  var type = button.attr('data-type');
  var data = dtable.row($(this).parents('tr')).data();
  var id = data.id;

  if (type === 'view') {
    //load the dialog box
    refreshDialog(data);
    selectedCId = id;
  } //end if
  else if (type === 'edit') {
    window.location.href = "manageCustomer.xhtml?cId=" + id;
  } //end else if
  else if (type === 'delete') {
    //DO a DELETE request and refresh
    var choice = confirm("Do you want to delete?");

    if (choice) {
      $.ajax({
        url: '/CRM-war/webresources/customers/' + id,
        type: 'DELETE',
        success: function () {
          dtable.ajax.reload();
        }
      });
    } //end if
  } //end else if
});

$('#modal-default').on('hidden.bs.modal', function (e) {
  selectedCId = null;
})
//]]>
</script>