v2 first commit

resources/assets/js/plugins/form.js

@@ -0,0 +1,179 @@
+import Errors from './error';
+import axios from "axios";
+
+export default class Form {
+    constructor(form_id) {
+        let form = document.getElementById(form_id);
+
+        if (!form) {
+            return;
+        }
+
+        this['method'] = form.getAttribute('method').toLowerCase();
+        this['action'] = form.getAttribute('action');
+
+        for (let form_element of document.getElementById(form_id).getElementsByTagName("input")) {
+            if (form_element.getAttribute('id') == 'global-search') {
+                continue;
+            }
+
+            var name = form_element.getAttribute('name');
+            var type = form_element.getAttribute('type');
+
+            if (name == 'method') {
+                continue;
+            }
+
+            if (form_element.getAttribute('data-item')) {
+                if (!this['items']) {
+                    var item = {};
+                    var row = {};
+
+                    item[0] = row;
+                    this['items'] = item;
+                }
+
+                if (!this['items'][0][form_element.getAttribute('data-item')]) {
+                    this['items'][0][form_element.getAttribute('data-item')] = '';
+                }
+
+                this['item_backup'] = this['items'];
+
+                continue;
+            }
+
+            if (type == 'radio') {
+                if (!this[name]) {
+                    this[name] = form_element.getAttribute('value') || '';
+                }
+            } else if (type == 'checkbox') {
+                if (this[name]) {
+                    if (!this[name].push) {
+                        this[name] = [this[name]];
+                    }
+
+                    if (form_element.checked) {
+                        this[name].push(form_element.value);
+                    }
+                } else {
+                    if (form_element.checked) {
+                        this[name] = form_element.value;
+                    } else {
+                        this[name] = [];
+                    }
+                }
+            } else {
+                this[name] = form_element.getAttribute('value') || '';
+            }
+        }
+
+        for (let form_element of document.getElementById(form_id).getElementsByTagName("textarea")) {
+            var name = form_element.getAttribute('name');
+
+            if (name == 'method') {
+                continue;
+            }
+
+            if (this[name]) {
+                if (!this[name].push) {
+                    this[name] = [this[name]];
+                }
+
+                this[name].push(form_element.value || '');
+            } else {
+                this[name] = form_element.value || '';
+            }
+        }
+
+        for (let form_element of document.getElementById(form_id).getElementsByTagName("select")) {
+            var name = form_element.getAttribute('name');
+
+            if (name == 'method') {
+                continue;
+            }
+
+            if (this[name]) {
+                if (!this[name].push) {
+                    this[name] = [this[name]];
+                }
+
+                this[name].push(form_element.getAttribute('value') || '');
+            } else {
+                this[name] = form_element.getAttribute('value') || '';
+            }
+        }
+
+        this.errors = new Errors();
+
+        this.loading = false;
+
+        this.response = {};
+    }
+
+    data() {
+        let data = Object.assign({}, this);
+
+        delete data.method;
+        delete data.action;
+        delete data.errors;
+        delete data.loading;
+        delete data.response;
+
+        return data;
+    }
+
+    reset() {
+        for (let form_element of document.getElementsByTagName("input")) {
+            var name = form_element.getAttribute('name');
+
+            if (this[name]) {
+                this[name] = '';
+            }
+        }
+
+        for (let form_element of document.getElementsByTagName("textarea")) {
+            var name = form_element.getAttribute('name');
+
+            if (this[name]) {
+                this[name] = '';
+            }
+        }
+
+        for (let form_element of document.getElementsByTagName("select")) {
+            var name = form_element.getAttribute('name');
+
+            if (this[name]) {
+                this[name] = '';
+            }
+        }
+    }
+
+    submit() {
+        this.loading = true;
+
+        axios[this.method](this.action, this.data())
+        .then(this.onSuccess.bind(this))
+        .catch(this.onFail.bind(this));
+    }
+
+    onSuccess(response) {
+        this.errors.clear();
+
+        this.loading = false;
+
+        if (response.data.redirect) {
+            this.loading = true;
+
+            window.location.href = response.data.redirect;
+        }
+
+        this.response = response.data;
+    }
+
+    // Form fields check validation issue
+    onFail(error) {
+        this.errors.record(error.response.data.errors);
+
+        this.loading = false;
+    }
+}