laravel-jstools
Version:
JS tools for building front-side of Laravel applications
312 lines (311 loc) • 12 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.JQueryForm = void 0;
const $ = require("jquery");
const Form_1 = require("./Form");
const JSToolsAbstractMap_1 = require("../../app/JSToolsAbstractMap");
const JQueryFormValidateService_1 = require("../../services/FormValidateService/JQueryFormValidateService");
const ContextTypeEnum_1 = require("../../types/ContextTypeEnum");
const JsTree_1 = require("../../components/tree/JsTree");
const QuillEditor_1 = require("../../components/editor/QuillEditor");
const FlatPickr_1 = require("../../components/datepicker/FlatPickr");
class JQueryForm extends Form_1.Form {
constructor(formId, formData, showNoty, componentsOptions) {
super(formId, formData, showNoty, componentsOptions, new JQueryFormValidateService_1.JQueryFormValidateService());
this.$form = $(`#${this.formId}`);
this.$fieldList = this.$form.find('input[data-jst-field],textarea[data-jst-field],select[data-jst-field],div[data-jst-field][data-jst-component]');
this.$spinner = this.$form.find('span[data-jst-spinner]');
this.$submit = this.$form.find('button[data-jst-submit]');
this.$alert = this.$form.find('div[data-jst-alert]');
this.initComponents();
if (this.isNoSubmitBtn()) {
this.hideSubmitBtn();
}
else {
this.setSubmitButton(this.$submit);
}
if (this.isSubmitOnEnter()) {
this.enableSubmitOnEnter();
}
else {
this.disableSubmitOnEnter();
}
this.saveDefaultValues();
}
disableSubmitOnEnter() {
this.$form.on('keydown', (e) => {
if (e.code === 'Enter') {
e.preventDefault();
}
});
}
// TODO omadonex: добавить возможность обычным textarea нажимать enter но не отправлять форму
enableSubmitOnEnter() {
this.$form.on('keydown', (e) => {
if (e.code === 'Enter') {
e.preventDefault();
this.submit();
}
});
}
initComponents() {
this.$fieldList.each((index, element) => {
const $field = $(element);
if ($field.data('jstComponent') === 'jstree') {
this.components[$field.attr('id')] = new JsTree_1.JsTree($field.attr('id'), this.componentsOptions.jstree);
}
if ($field.data('jstComponent') === 'quill') {
this.components[$field.attr('id')] = new QuillEditor_1.QuillEditor($field.attr('id'), this.componentsOptions.quill);
}
if ($field.data('jstComponent') === 'flatpickr') {
this.components[$field.attr('id')] = new FlatPickr_1.FlatPickr($field.attr('id'), this.componentsOptions.flatpickr);
}
});
}
setComponentValue($input, inputData, fieldName) {
if ($input.data('jstComponent') === 'jstree') {
const jstree = this.components[$input.attr('id')];
if (inputData[`${fieldName}__tree`]) {
jstree.setData(inputData[`${fieldName}__tree`], inputData[fieldName]);
return;
}
jstree.select(inputData[fieldName]);
}
if ($input.data('jstComponent') === 'quill') {
// TODO omadonex: continue work
const quill = this.components[$input.attr('id')];
console.log(inputData);
quill.setValue('dd');
}
if ($input.data('jstComponent') === 'flatpickr') {
const flatpickr = this.components[$input.attr('id')];
flatpickr.setValue(inputData[fieldName]);
}
}
getComponentValue($input) {
if ($input.data('jstComponent')) {
return this.components[$input.attr('id')].getValue();
}
return null;
}
showErrors(errorList) {
const translateService = this.getService(JSToolsAbstractMap_1.JSToolsAbstractMap.TranslateServiceContract);
this.clearErrors();
this.$fieldList.each((index, element) => {
const $input = $(element);
const field = $input.data('jstField');
if (!$input.data('jstNoValidate')) {
if (field in errorList) {
const $divError = this.$form.find(`.invalid-feedback[data-jst-field="${field}"]`);
const error = Object.values(errorList[field])[0];
$divError.text(error.toText(translateService));
$input.addClass('is-invalid');
if ($input.data('jstComponent') === 'flatpickr') {
this.$form.find(`#${$input.attr('id')}Input`).addClass('is-invalid');
}
else {
// Dashly Tom-Select
const $next = $input.next();
if ($next && $next.hasClass('ts-wrapper') && $next.hasClass('form-select')) {
$next.addClass('is-invalid');
}
}
}
else {
$input.addClass('is-valid');
}
}
});
}
clearErrors() {
this.$fieldList.each((index, element) => {
const $element = $(element);
$element.removeClass('is-valid is-invalid');
if ($element.data('jstComponent') === 'flatpickr') {
this.$form.find(`#${$element.attr('id')}Input`).removeClass('is-valid is-invalid');
}
});
}
showAlerts(alertList, contextType) {
if (this.$alert) {
const classList = [];
Object.keys(ContextTypeEnum_1.ContextTypeEnum).forEach((key) => {
classList.push(`alert-${key}`);
});
let html = '';
html += '<ul>';
alertList.forEach((alert) => {
html += `<li>${alert}</li>`;
});
html += '</ul>';
this.$alert.html(html);
this.$alert.removeClass(classList).addClass(`alert-${contextType}`);
this.$alert.removeClass('d-none');
}
}
clearAlerts() {
if (this.$alert) {
this.$alert.innerHTML = '';
this.$alert.addClass('d-none');
}
}
setInputsValues(data) {
for (const name of Object.keys(data)) {
const $input = this.$form.find(`input[data-jst-field="${name}"],textarea[data-jst-field="${name}"],select[data-jst-field="${name}"],div[data-jst-field="${name}"][data-jst-component]`);
const $inputBox = $input.closest(`div[data-jst-field-box="${name}"]`);
const hiddenFields = data['jstHiddenFields'] || [];
const readonlyFields = data['jstReadonlyFields'] || [];
const disabledFields = data['jstDisabledFields'] || [];
if (hiddenFields.includes(name)) {
$inputBox.hide();
}
else {
$inputBox.show();
}
$input.prop('readonly', readonlyFields.includes(name));
$input.prop('disabled', disabledFields.includes(name));
if ($input.is('select')) {
const el = $input[0];
if (el.tomselect) {
el.tomselect.setValue(data[name]);
}
else {
$input.val(data[name]).change();
}
}
else if ($input.is('textarea')) {
$input.val(data[name]);
}
else if ($input.is('div')) {
this.setComponentValue($input, data, name);
}
else {
switch ($input.attr('type')) {
case 'text':
case 'password':
$input.val(data[name]);
break;
case 'checkbox':
$input.prop('checked', data[name] === 'on');
break;
case 'radio':
$input.filter(`[value=${data[name]}]`).prop('checked', true);
break;
}
}
}
}
setMethod(method) {
// TODO omadonex: установить значение инпута
this.$form.attr('method', method);
}
setAction(action) {
this.$form.attr('action', action);
}
getMethod() {
const $method = this.$form.find('input[name=_method]');
if ($method.length) {
return $method.val();
}
return this.$form.attr('method');
}
getAction() {
return this.$form.attr('action');
}
getToken() {
return this.$form.find('input[name=_token]').val();
}
hide() {
this.$form.addClass('d-none');
}
show() {
this.$form.removeClass('d-none');
}
callFormSubmit() {
const form = document.getElementById(this.formId);
form.addEventListener('submit', (e) => {
e.preventDefault();
const formData = new FormData(form);
});
form.addEventListener('formdata', (e) => {
const formData = e.formData;
const data = this.serialize();
for (const field in data) {
if (data.hasOwnProperty(field)) {
formData.set(field, data[field]);
}
}
formData.set('_formid', this.formId);
});
form.submit();
}
showSubmitBtn() {
this.$submit.show();
}
hideSubmitBtn() {
this.$submit.hide();
}
disableSubmitBtn() {
this.$submit.attr('disabled', 'disabled');
}
enableSubmitBtn() {
this.$submit.prop('disabled', false);
}
showSpinner() {
this.$spinner.removeClass('d-none');
if (this.extraSpinners) {
this.extraSpinners.each((index, el) => {
$(el).removeClass('d-none');
});
}
}
hideSpinner() {
this.$spinner.addClass('d-none');
if (this.extraSpinners) {
this.extraSpinners.each((index, el) => {
$(el).addClass('d-none');
});
}
}
disableFieldsInput() {
this.$fieldList.attr('readonly', true);
}
enableFieldsInput() {
this.$fieldList.attr('readonly', false);
}
setSubmitButton(button) {
button.on('click', () => {
this.submit();
});
}
serialize() {
const data = {};
this.$fieldList.each((index, input) => {
const $input = $(input);
const name = $input.data('jstField');
if ($input.is('select') || $input.is('textarea')) {
data[name] = $input.val();
}
else if ($input.is('div')) {
data[name] = this.getComponentValue($input);
}
else {
switch ($input.attr('type')) {
case 'text':
case 'password':
case 'hidden':
data[name] = $input.val();
break;
case 'checkbox':
data[name] = $input.prop('checked') ? 'on' : 'off';
break;
case 'radio':
data[name] = $(`input[type="radio"][name="${name}"]:checked`).val();
break;
}
}
});
return data;
}
}
exports.JQueryForm = JQueryForm;