Edit file File name : create_forms.js Content :(function () { "use strict"; $(document).ready(function () { const style = getComputedStyle(document.body); const primaryColor = style.getPropertyValue('--primary'); function updateToDatabase(path, idString) { console.log(idString) $.post(path, {items: idString}, function (result) { if (result && result.title && result.msg) { $.toast({ heading: result.title, text: result.msg, bgColor: primaryColor, textColor: 'white', hideAfter: 10000, position: 'bottom-right', icon: 'success' }); } }) } function setSortable(target, moveClass) { if (target.length) { target.sortable({ group: 'no-drop', handle: '.' + moveClass, axis: "y", update: function (e, ui) { var sortData = target.sortable('toArray', {attribute: 'data-id'}); var path = e.target.getAttribute('data-path'); updateToDatabase(path, sortData.join(',')) } }); } } const items = []; var draggableContentLists = $('.draggable-content-lists'); if (draggableContentLists.length) { for (let item of draggableContentLists) { items.push($(item).attr('data-drag-class')) } } if (items.length) { for (let item of items) { const tag = $('.' + item); const moveClass = tag.attr('data-move-class') if (tag.length) { setSortable(tag, moveClass); } } } }); $('body').on('change', '#enableLoginSwitch', function () { const $card = $('.js-enable-login-fields'); if (this.checked) { $card.removeClass('d-none') } else { $card.addClass('d-none') } }); $('body').on('change', '#enable_welcome_messageSwitch', function () { const $card = $('.js-enable-welcome-message-fields'); if (this.checked) { $card.removeClass('d-none') } else { $card.addClass('d-none') } }); $('body').on('change', '#enable_tank_you_messageSwitch', function () { const $card = $('.js-enable-tank-you-message-fields'); if (this.checked) { $card.removeClass('d-none') } else { $card.addClass('d-none') } }); $('body').on('change', '.js-form-field-type', function () { const value = $(this).val(); const $titleCard = $('.js-form-field-title-card'); const $optionsCard = $('.js-field-options'); $titleCard.addClass('d-none'); $optionsCard.addClass('d-none'); if (value) { $titleCard.removeClass('d-none') } if ($.inArray(value, ['dropdown', 'checkbox', 'radio']) !== -1) { $optionsCard.removeClass('d-none'); } }); $('body').on('click', '.js-add-form-field', function (e) { e.preventDefault(); const newFormField = $('#newFormField'); const key = randomString(); let html = newFormField.html(); html = html.replace(/record/g, key); $("#formFieldsCard").prepend(html); }) $('body').on('click', '.js-save-form-field', function (e) { e.preventDefault(); const $this = $(this); let form = $this.closest('.js-field-form'); let data = serializeObjectByTag(form); let action = form.attr('data-action'); $this.addClass('loadingbar primary').prop('disabled', true); form.find('input').removeClass('is-invalid'); form.find('textarea').removeClass('is-invalid'); $.post(action, data, function (result) { if (result && result.code === 200) { //window.location.reload(); Swal.fire({ icon: 'success', html: '<h3 class="font-20 text-center text-dark-blue py-25">' + fieldSaveSuccessLang + '</h3>', showConfirmButton: false, width: '25rem', }); setTimeout(() => { window.location.reload(); }, 500); } }).fail(function (err) { $this.removeClass('loadingbar primary').prop('disabled', false); var errors = err.responseJSON; if (errors && errors.errors) { Object.keys(errors.errors).forEach((key) => { const error = errors.errors[key]; let element = form.find('.js-ajax-' + key); element.addClass('is-invalid'); element.parent().find('.invalid-feedback').text(error[0]); }); } }) }) $('body').on('click', '.add-field-option-btn', function (e) { e.preventDefault(); const key = randomString(); const $parent = $(this).closest('.js-field-options'); let html = `<li class="form-group list-group"> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text cursor-pointer move-icon2"> <i class="fa fa-arrows-alt"></i> </div> </div> <input type="text" name="ajax[options][${key}][title]" class="form-control w-auto flex-grow-1" placeholder="${chooseTitleLang}"/> <div class="input-group-append"> <button type="button" class="btn remove-field-option-btn btn-danger"><i class="fa fa-times"></i></button> </div> </div> </li>`; $parent.find('.js-field-options-lists').append(html); }); $('body').on('click', '.remove-field-option-btn', function (e) { e.preventDefault(); $(this).closest('.form-group').remove(); }); function handleGetTitleFromTranslations(translations, defaultLocale) { let title = null; if (Object.keys(translations).length) { Object.keys(translations).forEach(key => { const translation = translations[key]; if (translation.locale === defaultLocale) { title = translation.title } }) } return title; } $('body').on('change', '.js-form-field-locale', function (e) { e.preventDefault(); const $this = $(this); const $form = $(this).closest('.js-field-form'); const locale = $this.val(); const path = $this.attr('data-path') + '?locale=' + locale; $this.addClass('loadingbar gray'); $.get(path, function (result) { $this.removeClass('loadingbar gray'); if (result.code === 200) { let field = result.field; const locale = result.locale; let fieldTitle = ''; if (field.translations) { fieldTitle = handleGetTitleFromTranslations(field.translations, locale); } $form.find(`.js-title-field-${field.id}`).val(fieldTitle) if (field.options && field.options.length) { Object.keys(field.options).forEach(index => { let option = field.options[index]; let optionTitle = ''; if (option.translations) { optionTitle = handleGetTitleFromTranslations(option.translations, locale); } $form.find(`.js-title-option-${option.id}`).val(optionTitle) }); } } }).fail(err => { $this.removeClass('loadingbar gray'); }); }); /* feather icons */ // ** // ** feather.replace(); })(jQuery); Save