diff --git a/package.json b/package.json index 0c397f4..69a08c4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react", - "version": "5.2.6", + "version": "5.2.7", "description": "This UI Kit allows you to build Bootstrap 5 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.", "author": "Tony Air ", "license": "BSD-2-Clause", diff --git a/src/js/ajax/form.js b/src/js/ajax/form.js index 4cd6e2b..8847681 100644 --- a/src/js/ajax/form.js +++ b/src/js/ajax/form.js @@ -21,6 +21,11 @@ const submitForm = (e) => { data.append('formid', id) data.append('ajax', '1') + + form.querySelectorAll('.field__alert').forEach((el) => { + el.remove() + }) + parent.classList.remove('loaded') parent.classList.add('loading') @@ -33,28 +38,97 @@ const submitForm = (e) => { body: data, }) .then(async (resp) => { + if (!resp.ok) { + console.error(`${NAME}: BAD RESPONSE`) + console.log(resp) + return + } const body = resp.text().then((html) => { - try { - let json = JSON.parse(html) - - if (typeof json.MainContent !== undefined) { - json = JSON.parse(json.MainContent) - } - - console.log(`${NAME}: JSON response`) - const status = json.status === 'good' ? 'success' : 'error' - - replaceForm(form, `
${json.message}
`) - } catch (e) { - console.log(`${NAME}: HTML response`) - replaceForm(form, html) - - parent.querySelector('form').addEventListener('submit', submitForm) + const result = processResponse(html) + if (result.json) { + return formProcessJson(form, result.data) } + + return replaceForm(form, result.data) }) }) } +const processResponse = (html) => { + try { + let json = JSON.parse(html) + + if (json.MainContent) { + try { + json = JSON.parse(json.MainContent) + + return { + json: true, + data: json + } + + } catch (e) { + return { + json: false, + data: json.MainContent + } + } + } + + return { + json: true, + data: json + } + } catch (e) { + return { + json: false, + data: html + } + } +} + +const formProcessJson = (form, json) => { + const status = json.status === 'good' ? 'success' : 'danger' + + if (json.msgs) { + json.msgs.forEach((i) => { + const field = form.querySelector('[name="' + i.fieldName + '"],[name^="' + i.fieldName + '["]') + if (field) { + field.classList.add('error') + + const fieldContainer = field.closest('.form__field') + if (fieldContainer) { + fieldContainer.classList.add('error') + + const msg = document.createElement('div') + msg.classList.add(...['field__alert', 'alert', `alert-${status}`, `alert-${i.messageCast}`, `${i.messageType}`]) + msg.innerHTML = i.message + + fieldContainer.appendChild(msg) + } + } + }) + + return setLoaded(form) + } + + return replaceForm(form, `
${json.message}
`) +} + +const setLoaded = (form) => { + const parent = form.parentElement; + + parent.classList.remove('loading') + parent.classList.add('loaded') + + const btns = form.querySelectorAll('input[type="submit"],button') + btns.forEach((el) => { + el.removeAttribute('disabled', 'disabled') + }) + + window.dispatchEvent(new Event(`${Events.AJAX}`)) +} + const replaceForm = (form, html) => { const parent = form.parentElement; @@ -62,8 +136,11 @@ const replaceForm = (form, html) => { parent.classList.remove('loading') parent.classList.add('loaded') - window.dispatchEvent(new Event(`${Events.AJAX}`)) - return + const newForm = parent.querySelector('form') + if (newForm) { + newForm.addEventListener('submit', submitForm) + return setLoaded(newForm) + } } const formInit = (form) => { diff --git a/src/scss/layout/forms/basics.scss b/src/scss/layout/forms/basics.scss index ccef52f..f5a2199 100644 --- a/src/scss/layout/forms/basics.scss +++ b/src/scss/layout/forms/basics.scss @@ -10,7 +10,7 @@ display: inline-flex; padding-right: $form-spacer-x; - & + .field__content { + &+.field__content { padding-left: $form-spacer-x; } @@ -52,5 +52,5 @@ } .form__fieldset { - margin-bottom: -1rem; -} + margin-bottom: -1rem; +} \ No newline at end of file diff --git a/src/scss/layout/main/alerts.scss b/src/scss/layout/main/alerts.scss index 09d35cd..d75e67e 100644 --- a/src/scss/layout/main/alerts.scss +++ b/src/scss/layout/main/alerts.scss @@ -29,6 +29,7 @@ } } -.alert-bad { +.alert-bad, +.alert-error { @extend .alert-danger; -} +} \ No newline at end of file