IMPR: AJAX processing

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 <tony@twma.pro>",
   "license": "BSD-2-Clause",

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,26 +38,95 @@ 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) => {
+        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 (typeof json.MainContent !== undefined) {
+    if (json.MainContent) {
+      try {
         json = JSON.parse(json.MainContent)
+
+        return {
+          json: true,
+          data: json
         }
 
-          console.log(`${NAME}: JSON response`)
-          const status = json.status === 'good' ? 'success' : 'error'
-
-          replaceForm(form, `<div class="alert alert-${status}">${json.message}</div>`)
       } catch (e) {
-          console.log(`${NAME}: HTML response`)
+        return {
-          replaceForm(form, html)
+          json: false,
+          data: json.MainContent
+        }
+      }
+    }
 
-          parent.querySelector('form').addEventListener('submit', submitForm)
+    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, `<div class="alert alert-${status}">${json.message}</div>`)
+}
+
+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) => {
@@ -62,8 +136,11 @@ const replaceForm = (form, html) => {
   parent.classList.remove('loading')
   parent.classList.add('loaded')
 
-  window.dispatchEvent(new Event(`${Events.AJAX}`))
+  const newForm = parent.querySelector('form')
-  return
+  if (newForm) {
+    newForm.addEventListener('submit', submitForm)
+    return setLoaded(newForm)
+  }
 }
 
 const formInit = (form) => {

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;
     }
 

src/scss/layout/main/alerts.scss

@@ -29,6 +29,7 @@
   }
 }
 
-.alert-bad {
+.alert-bad,
+.alert-error {
   @extend .alert-danger;
 }