validate.js

import Codebase from '../codebase';
import '../plugins/datatables/jquery.dataTables';
import 'datatables.net-select'; // eslint-disable-line
import '../plugins/datatables/dataTables.bootstrap4';
import swal from '../plugins/sweetalert2/sweetalert2';
import '../plugins/select2/select2.full';
import '../plugins/jquery-validation/jquery.validate';
import '../plugins/jquery-validation/additional-methods';
import '../plugins/masked-inputs/jquery.maskedinput';
import dtSettings from './shared/dataTables.settings';
import modalSwitcher from './shared/modalSwitcher';
import dataTablesSelectable from './shared/dataTables.select';
import makeForm from '../Api/shared/jsonFromJqueryForm';
import ServicesApi from '../Api/Services';

const formSaveBt = document.getElementsByClassName('form__save-bt')[0];

jQuery(() => {
  // Init page helpers (Table Tools helper)
  Codebase.helpers(['table-tools', 'masked-inputs']);
  formSaveBt.onclick = (e) => {
    e.preventDefault();
    console.log('Yes');
  };
});
//
// initialization of Datatable
//
const dataTables = (function () {
  const initDataTableFull = () => {
    const category = {
      1: 'Web app',
      2: 'Mobile app',
      3: 'Consulting'
    };
    const table = jQuery('.js-table').DataTable(dtSettings({
      columns: [
        {data: 'id'},
        {data: 'name'},
        {
          data: 'category',
          render(data) {
            return category[data];
          }
        },
      ]
    }));
    modalSwitcher(table);
    dataTablesSelectable(table);
    return table;
  };
  return {
    init(table) {
      // Init Datatables
      return initDataTableFull(table);
    }
  };
}());

const delItemModal = (function () {
  const modalLaunch = (table) => {
    $('.js-delItemBtn').click(() => {
      swal({
        title: 'Вы уверены?',
        text: 'Удаленую запись нельзя вернуть!',
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Удалить!',
        html: false,
      }).then(() => {
        swal(
          'Удалено!',
          'Запись удалена.',
          'success'
        );
        table.rows({selected: true}).remove().draw(false);
        $('[data-edit]').prop('disabled', true);
      });
    });
  };
  return {
    init(table) {
      return modalLaunch(table);
    }
  };
}());

const userValidation = (() => {
  const initValidationAdd = function (table) {
    jQuery('#form').validate({
      errorClass: 'invalid-feedback animated fadeInDown',
      errorElement: 'div',
      errorPlacement(error, e) {
        jQuery(e).parents('.form-group > div').append(error);
      },
      highlight(e) {
        jQuery(e).closest('.form-group > div').removeClass('is-invalid').addClass('is-invalid');
      },
      success(e) {
        jQuery(e).closest('.form-group > div').removeClass('is-invalid');
        jQuery(e).remove();
      },
      submitHandler(form) {
        $(form).addClass('is-loading');
        const id = $(form).find('[name=id]').val().trim();
        // fake object as a substitution to customer input
        const fakeObj = {
          data: {
            id: 1,
            name: 'response.data.name',
            category: 'response.data.cat',
          }
        };
        const promise = id.length ? ServicesApi.store(id, form) : ServicesApi;
        promise
          .then((response) => {
            $('#modalItem').modal('hide');
            if (id.length) {
              table.row({selected: true}).data(response.data).draw(true);
            } else {
              table.rows.add([
                {
                  ...fakeObj.data,
                  ...makeForm(form),
                }
              ]).draw(true);
            }
            swal('Удача!', 'Запись успешно добавлена.', 'success');
          }).catch(() => {
            $(form).removeClass('is-loading');
            swal('Ошибка!', 'Попробоуйте еще раз, позже', 'error');
          });
      },
      rules: {
        name: { required: true},
        category: { required: true}
      },
      messages: {
        name: {
          required: 'Пожалуйста, введите имя'
        },
        category: {
          required: 'Пожалуйста, добавьте категорию'
        }
      }
    });
  };
  return {
    init(table) {
      // Init Add Form Validation
      initValidationAdd(table);
    }
  };
})();

$(() => {
  const table = dataTables.init();
  userValidation.init(table);
  delItemModal.init(table);
});