Sync

.eslintignore

@@ -0,0 +1 @@
+

.eslintrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+    "root": true,
+    "extends": "standard",
+    "plugins": [
+        "standard",
+        "promise",
+        "you-dont-need-lodash-underscore"
+    ],
+    'rules': {
+        'you-dont-need-lodash-underscore/for-each': 1,
+        'you-dont-need-lodash-underscore/concat': 1
+    }
+};

README.md

@@ -0,0 +1,49 @@
+# Acacha forms
+
+Form objects pattern implementation for Javascript.
+
+# Installation
+
+```bash
+npm install acacha-forms --save
+```
+
+# Use
+
+TODO
+
+# Form objects pattern
+
+More info about this pattern at:
+
+- http://crushlovely.com/journal/7-patterns-to-refactor-javascript-applications-form-objects/
+- https://laracasts.com/series/learn-vue-2-step-by-step/episodes/19
+- https://laracasts.com/series/learn-vue-2-step-by-step/episodes/20
+- https://laracasts.com/series/learn-vue-2-step-by-step/episodes/21
+
+
+# Other similar packages or software
+
+- https://github.com/laracasts/Vue-Forms
+- https://github.com/edstevo/laravel-vue-form
+- [Laravel Spark](https://spark.laravel.com/) : see more info about forms at [docs](https://spark.laravel.com/docs/4.0/forms).
+
+# Laracasts
+
+This video series:
+
+- https://laracasts.com/series/learn-vue-2-step-by-step/episodes/19
+- https://laracasts.com/series/learn-vue-2-step-by-step/episodes/20
+- https://laracasts.com/series/learn-vue-2-step-by-step/episodes/21
+
+Inspired the creation of this package. Also [Laravel Spark](https://spark.laravel.com/) . 
+
+
+ # Resources
+
+- [Form Objects at acacha.org wiki](http://acacha.org/mediawiki/Form_objects): in Catalan Language
+- https://laracasts.com/series/learn-vue-2-step-by-step/episodes/19
+- https://laracasts.com/series/learn-vue-2-step-by-step/episodes/20
+- https://laracasts.com/series/learn-vue-2-step-by-step/episodes/21
+- https://github.com/laracasts/Vue-Forms
+- https://github.com/edstevo/laravel-vue-form

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "acacha-forms",
+  "version": "0.1.0",
+  "description": "Form Objects pattern implementation for Javascript",
+  "main": "src/acacha.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "eslint --ext .js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/acacha/forms.git"
+  },
+  "keywords": [
+    "Form",
+    "Javascript"
+  ],
+  "author": "Sergi Tur Badenas <sergiturbadenas@gmail.com> (http://acacha.org)",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/acacha/forms/issues"
+  },
+  "homepage": "https://github.com/acacha/forms#readme",
+  "devDependencies": {
+    "babel-cli": "^6.23.0",
+    "babel-preset-es2015": "^6.22.0",
+    "eslint": "^3.17.1",
+    "eslint-config-standard": "^7.0.1",
+    "eslint-plugin-promise": "^3.5.0",
+    "eslint-plugin-standard": "^2.1.1",
+    "eslint-plugin-you-dont-need-lodash-underscore": "^5.0.4"
+  },
+  "dependencies": {
+    "axios": "^0.15.3",
+    "babel-preset-es2015": "^6.24.0"
+  }
+}

src/Errors.js

@@ -0,0 +1,94 @@
+export default class Errors {
+
+  /**
+  * Constructor.
+  */
+  constructor () {
+    this.errors = {}
+  }
+
+  /**
+   * Determine if we have any errors.
+   */
+  any () {
+    return Object.keys(this.errors).length > 0
+  }
+
+  /**
+   * Determine if we have any errors.
+   */
+  hasErrors() {
+    return any()
+  }
+
+
+  /**
+   * Get all of the raw errors for the collection.
+   */
+  all() {
+    return this.errors
+  }
+
+  // API
+  has (field) {
+    // Undescore | Lodash
+    return this.errors.hasOwnProperty(field)
+  }
+
+  /**
+   * Retrieve the error message for a field.
+   *
+   * @param field
+   * @returns {*}
+   */
+  get (field) {
+    if (this.has[field]) {
+      return this.errors[field][0]
+    }
+  }
+
+  /**
+   * Get all of the errors for the collection in a flat array.
+   */
+  flatten() {
+    return _.flatten(_.toArray(this.errors))
+  }
+
+  /**
+   * Record the new errors
+   * @param errors
+   */
+  record (errors) {
+    this.set(errors)
+  }
+
+  /**
+   * Set the raw errors for the collection.
+   */
+  set(errors) {
+    this.errors = errors
+  }
+
+  /**
+   * Clear one or all error fields.
+   *
+   * @param {string|null} field
+   */
+  clear (field) {
+    if (field) {
+      delete this.errors[field]
+
+      return
+    }
+
+    this.errors = {}
+  }
+
+  /**
+   * Clear all errors if no field parameter is provided
+   * or clear only field if provided.
+   */
+  forget(field) {
+    this.clear(field)
+  }
+}

src/Form.js

@@ -0,0 +1,176 @@
+import Errors from './Errors'
+
+import axios from 'axios'
+
+export default class Form {
+
+  /**
+   * Constructor.
+   *
+   * @param fields
+   */
+  constructor (fields) {
+    // TODO?
+    // this.http       = axios.create({
+    //   headers: {
+    //     'X-Requested-With': 'XMLHttpRequest',
+    //     'X-CSRF-TOKEN': Laravel.csrfToken
+    //   }
+    // });
+
+    this.clearOnSubmit  = false
+
+    this.originalFields = fields
+
+    this.errors = new Errors()
+
+    this.resetStatus()
+
+    for (let field in fields) {
+      this[field] = fields[field]
+    }
+
+  }
+
+  /**
+   * Reset form.
+   *
+   */
+  reset () {
+    this.fields = {}
+
+    for (let field in this.originalFields) {
+      this[field] = ''
+    }
+
+    this.errors.clear()
+  }
+
+  /**
+   * Activates form clearing/reset after submit.
+   *
+   */
+  clearOnSubmit()
+  {
+    this.clearOnSubmit  = true;
+  }
+
+  /**
+   * Reset status.
+   *
+   */
+  resetStatus() {
+    this.errors.forget();
+    this.submitting = false;
+    this.submitted = false;
+    this.succeeded = false;
+  }
+
+  /**
+   * Get form data.
+   *
+   * @returns {{}}
+   */
+  data () {
+    let data = {}
+
+    for (let field in this.originalFields) {
+      data[field] = this[field]
+    }
+
+    return data
+  }
+
+  /**
+   * Start processing the form.
+   *
+   */
+  startProcessing() {
+    this.errors.forget();
+    this.submitting = true;
+    this.succeeded = false;
+  };
+
+  /**
+   * Finish processing the form.
+   *
+   */
+  finishProcessing() {
+    this.submitting = false;
+    this.submitted  = false;
+    this.succeeded  = true;
+  };
+
+  /**
+   * Send a POST request to the given URL.
+   * .
+   * @param {string} url
+   */
+  post (url) {
+    return this.submit('post', url)
+  }
+
+  /**
+   * Send a PUT request to the given URL.
+   * .
+   * @param {string} url
+   */
+  put (url) {
+    return this.submit('put', url)
+  }
+
+  /**
+   * Send a PATCH request to the given URL.
+   * .
+   * @param {string} url
+   */
+  patch (url) {
+    return this.submit('patch', url)
+  }
+
+  /**
+   * Send a DELETE request to the given URL.
+   * .
+   * @param {string} url
+   */
+  delete (url) {
+    return this.submit('delete', url)
+  }
+
+  /**
+   * Submit the form to the back-end api/server.
+   *
+   */
+  submit (requesType, url) {
+    return new Promise((resolve, reject) => {
+      axios[requesType](url, this.data())
+        .then(response => {
+          this.onSuccess(response)
+          resolve(response)
+        })
+        .catch(error => {
+          this.onFail(error.response.data)
+          reject(error)
+        })
+    })
+  }
+
+  onSuccess (data) {
+    //TODO form.finishProcessing();
+    this.reset()
+  }
+
+  onFail (errors) {
+    this.errors.record(errors)
+    //TODO form.finishProcessingOnErrors();
+  }
+
+  /**
+   * Set the errors on the form.
+   *
+   */
+  setErrors(errors) {
+    this.submitting = false;
+    this.errors.set(errors);
+  };
+}