FancyGrid Edit Popup

by FancyGrid Inc.

HTML

<script src="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.js"></script>

<div id="container"></div>

CSS

.image-staff img {
  margin-top: -15px;
  border-radius: 2px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.fancy-grid-cell-inner {
  margin-top: 20px !important;
}

.fancy-grid-column-sparkline  .fancy-grid-cell-inner {
  margin-top: 9px !important;
}

JavaScript

function salaryInputFn(value) {
  value = value.toString().replace('$', '').replace(/\,/g, '').replace('-', '').replace('.', '');

  if (value.length === 0) {
    value = '';
  } else if (value.length > 6) {
    value = value.substr(0, 6);
    value = '$' + value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  } else {
    value = '$' + value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  }

  return value;
}

function phoneInputFn(value) {
  value = parseInt(value.replace(/\-/g, ''));

  if (isNaN(value)) {
    value = '';
  } else {
    value = String(value);
  }

  switch (value.length) {
    case 0:
    case 1:
    case 2:
      break;
    case 4:
    case 5:
    case 6:
      value = value.replace(/^(\d{3})/, "$1-");
      break;
    case 7:
    case 8:
    case 9:
      value = value.replace(/^(\d{3})(\d{3})/, "$1-$2-");
      break;
    case 10:
      value = value.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
      break;
    default:
      value = value.substr(0, 10);
      value = value.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
  }

  return value;
}

document.addEventListener("DOMContentLoaded", () => {
  Fancy.defineController('staffGridConrol', {
    onSelect: function(grid) {
      var selection = grid.getSelection(),
        editButton = grid.tbar[2];

      if (selection.length === 1) {
        editButton.enable();
      } else {
        editButton.disable();
      }
    },
    onClearSelect: function(grid) {
      grid.tbar[1].disable();
    },
    onRowDBLClick: function(grid, o) {
      grid.editUser(o.data);
    },
    editUser: function(item) {
      var me = this,
        staffEditForm = me.staffEditForm;
        
        console.log(staffEditForm);

      if (staffEditForm) {
        staffEditForm.set(item);
        staffEditForm.setTitle(item.name + ' ' + item.surname);

        staffEditForm.show();
      } else {
        staffEditForm = new FancyForm({
          title: {
            text: item.name + ' ' + item.surname,
            tools: [{
    ...