Merge pull request #71 from what-crud/70_add-onChange-method-support-to-crud-fields

70 add on change method support to crud fields

Author: szczepanmasny

README.md

@@ -4,7 +4,7 @@
 <h1 align="center">Vue CRUD</h1>
 <div align="center">
   <a><img alt="license" src="https://img.shields.io/badge/license-MIT-brightgreen.svg"></a>
-  <a><img alt="version" src="https://img.shields.io/badge/version-v0.14.0-yellow.svg"></a>
+  <a><img alt="version" src="https://img.shields.io/badge/version-v0.14.1-yellow.svg"></a>
   <a><img alt="build" src="https://travis-ci.org/what-crud/vue-crud.svg?branch=master"></a>
   <a><img alt="PRs" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg"></a>
 </div>

docs/guide/crud/field-options.md

@@ -141,3 +141,113 @@ fieldsInfo () {
 ::: tip INFO
 If `url` and `path.default` property has been set in **src/config/api.js** file, only the rest of path is required.
 :::
+
+## `onChange`
+*Function*, optional. Function will be triggered after field value change in item details form. Function should have 2 arguments:
+- field value after change,
+- list with fields configuration
+
+Example (slugify title od post):
+
+```vue
+<template>
+  <crud
+    :prefix="prefix"
+    :path="path"
+    :paths="paths"
+    :page-title="pageTitle"
+    :fields-info="fieldsInfo"
+    :details-title="$t('detailsTitle')"
+  >
+  </crud>
+</template>
+
+<script>
+import Crud from '@/utils/crud/components/Crud.vue'
+
+const slugify = (text) => {
+  const a = 'ąàáäâćęèéëêìíïîłńòóöôśùúüûźżñçßÿœæŕśńṕẃǵǹḿǘẍźḧ·/_,:;'
+  const b = 'aaaaaceeeeeiiiilnoooosuuuuzzncsyoarsnpwgnmuxzh------'
+  const p = new RegExp(a.split('').join('|'), 'g')
+
+  return text.toString().toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(p, c => b.charAt(a.indexOf(c)))
+    .replace(/&/g, '-and-')
+    .replace(/[^\w-]+/g, '')
+    .replace(/--+/g, '-')
+    .replace(/^-+/, '')
+    .replace(/-+$/, '')
+}
+
+export default {
+  data () {
+    return {
+      prefix: 'crud/blog',
+      path: 'posts',
+      paths: {
+        i: 'blog/posts',
+        st: 'blog/posts',
+        u: 'blog/posts'
+      },
+      pageTitle: 'blog.posts'
+    }
+  },
+  computed: {
+    fieldsInfo () {
+      return [
+        {
+          text: this.$t('fields.id'),
+          name: 'id',
+          details: false
+        },
+        {
+          type: 'input',
+          column: 'title',
+          text: this.$t('fields.title'),
+          name: 'title',
+          multiedit: false,
+          onChange: (value, fields) => {
+            fields.find(field => field.name === 'slug').value = slugify(value)
+          }
+        },
+        {
+          type: 'input',
+          column: 'slug',
+          text: this.$t('fields.slug'),
+          name: 'slug',
+          multiedit: false,
+          required: false,
+          table: false
+        }
+      ]
+    }
+  },
+  components: {
+    Crud
+  },
+  i18n: {
+    messages: {
+      pl: {
+        detailsTitle: 'Post',
+        fields: {
+          id: 'Id',
+          title: 'Tytuł',
+          slug: 'Slug'
+        }
+      },
+      en: {
+        detailsTitle: 'Post',
+        fields: {
+          id: 'Id',
+          title: 'Title',
+          slug: 'Slug'
+        }
+      }
+    }
+  }
+}
+
+</script>
+
+```

examples/cms/routes/app/routes/blog/routes/posts/Index.vue

@@ -14,6 +14,21 @@
 <script>
 import Crud from '@/utils/crud/components/Crud.vue'
 
+const slugify = (text) => {
+  const a = 'ąàáäâćęèéëêìíïîłńòóöôśùúüûźżñçßÿœæŕśńṕẃǵǹḿǘẍźḧ·/_,:;'
+  const b = 'aaaaaceeeeeiiiilnoooosuuuuzzncsyoarsnpwgnmuxzh------'
+  const p = new RegExp(a.split('').join('|'), 'g')
+
+  return text.toString().toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(p, c => b.charAt(a.indexOf(c)))
+    .replace(/&/g, '-and-')
+    .replace(/[^\w-]+/g, '')
+    .replace(/--+/g, '-')
+    .replace(/^-+/, '')
+    .replace(/-+$/, '')
+}
+
 export default {
   data () {
     return {
@@ -62,7 +77,10 @@ export default {
           column: 'title',
           text: this.$t('fields.title'),
           name: 'title',
-          multiedit: false
+          multiedit: false,
+          onChange: (value, fields) => {
+            fields.find(field => field.name === 'slug').value = slugify(value)
+          }
         },
         {
           type: 'input',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-crud",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Vue CRUD",
   "author": "Szczepan Masny <[email protected]>",
   "license": "MIT",

src/utils/crud/components/ChildDetails.vue

@@ -156,7 +156,11 @@ export default {
       this.$set(this, 'fields', result)
     },
     valueChanged (val, fieldColumn) {
-      this.$set(this.fields[this.fields.findIndex(el => el.column === fieldColumn)], 'value', val)
+      const field = this.fields[this.fields.findIndex(el => el.column === fieldColumn)]
+      this.$set(field, 'value', val)
+      if (field.onChange) {
+        field.onChange(val, this.fields)
+      }
     },
     fieldRules (field) {
       const rules = []

src/utils/crud/components/ItemDetails.vue

@@ -171,7 +171,11 @@ export default {
       return refField ? refField.value : undefined
     },
     valueChanged (val, fieldColumn) {
-      this.$set(this.fields[this.fields.findIndex(el => el.column === fieldColumn)], 'value', val)
+      const field = this.fields[this.fields.findIndex(el => el.column === fieldColumn)]
+      this.$set(field, 'value', val)
+      if (field.onChange) {
+        field.onChange(val, this.fields)
+      }
     },
     close () {
       this.details.show = false