Added Create.vue

Author: alOneh

templates/vue/components/foo/Create.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <h1>New {{{ title }}}</h1>
+
+    <div v-if="loading" class="alert alert-info" role="status">Loading...</div>
+    <div v-if="error" class="alert alert-danger" role="alert"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> \{{ error }}</div>
+
+    <{{{titleUcFirst}}}Form :handle-submit="create" :values="item" :errors="violations"></{{{titleUcFirst}}}Form>
+    <router-link :to="{ name: '{{{titleUcFirst}}}List' }" class="btn btn-default">Back to list</router-link>
+  </div>
+</template>
+
+<script>
+  import {{{titleUcFirst}}}Form from './Form.vue';
+  import { createNamespacedHelpers } from 'vuex';
+
+  const { mapActions, mapGetters } = createNamespacedHelpers('{{{lc}}}/create');
+
+  export default {
+    components: {
+      {{{titleUcFirst}}}Form
+    },
+    data: function() {
+      return {
+        item: {}
+      }
+    },
+    computed: mapGetters([
+      'error',
+      'loading',
+      'created',
+      'violations'
+    ]),
+    methods: {
+      create: function(item) {
+        this.$store.dispatch('{{{lc}}}/create/create', item);
+      }
+    },
+    watch: {
+      created: function (created) {
+        if (created) {
+          this.$router.push({ name: '{{{titleUcFirst}}}Update', params: { id: created['@id']} });
+        }
+      }
+    }
+  }
+</script>

templates/vue/components/foo/Form.vue

@@ -0,0 +1,31 @@
+<template>
+  <form @submit.prevent="handleSubmit(values)">
+{{#each formFields}}
+    <div :class="{ 'form-group': true, 'has-error': (errors && errors.{{{ name }}}) }">
+      <label for="{{{ lc }}}_{{{ name }}}" class="control-label">{{{ name }}}</label>
+      <input v-model="values.{{{ name }}}" type="{{{ type }}}" {{#if step}} step="{{{ step }}}"{{/if}} placeholder="{{{ description }}}" {{#if required}}required="true"{{/if}} id="{{{ lc }}}_{{{ name }}}" class="form-control" />
+      <span v-if="errors && errors.{{{ name }}}" class="help-block" id="{{{ lc }}}_{{{ name }}}_helpBlock">\{{ errors.{{{ name }}} }}</span>
+    </div>
+{{/each}}
+
+    <button type="submit" class="btn btn-primary">Submit</button>
+  </form>
+</template>
+
+<script>
+  export default {
+    props: {
+      handleSubmit: {
+        type: Function,
+        required: true,
+      },
+      values: {
+        type: Object,
+        required: true
+      },
+      errors: {
+        type: Object
+      }
+    }
+  }
+</script>