Skip to content

Commit 5b242a4

Browse files
alOnehmysiar
alOneh
authored and
mysiar
committed
Update Vue.js generator (#73)
1 parent be2d497 commit 5b242a4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+886
-766
lines changed

‎src/generators/VueGenerator.js

Lines changed: 63 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,31 @@ export default class extends BaseGenerator {
88
this.registerTemplates(`vue/`, [
99
// modules
1010
'store/modules/foo/index.js',
11-
'store/modules/foo/create.js',
12-
'store/modules/foo/delete.js',
13-
'store/modules/foo/list.js',
14-
'store/modules/foo/update.js',
15-
'store/modules/foo/show.js',
16-
'store/modules/foo/mutation-types.js',
11+
'store/modules/foo/create/actions.js',
12+
'store/modules/foo/create/getters.js',
13+
'store/modules/foo/create/index.js',
14+
'store/modules/foo/create/mutation_types.js',
15+
'store/modules/foo/create/mutations.js',
16+
'store/modules/foo/delete/actions.js',
17+
'store/modules/foo/delete/getters.js',
18+
'store/modules/foo/delete/index.js',
19+
'store/modules/foo/delete/mutation_types.js',
20+
'store/modules/foo/delete/mutations.js',
21+
'store/modules/foo/list/actions.js',
22+
'store/modules/foo/list/getters.js',
23+
'store/modules/foo/list/index.js',
24+
'store/modules/foo/list/mutation_types.js',
25+
'store/modules/foo/list/mutations.js',
26+
'store/modules/foo/show/actions.js',
27+
'store/modules/foo/show/getters.js',
28+
'store/modules/foo/show/index.js',
29+
'store/modules/foo/show/mutation_types.js',
30+
'store/modules/foo/show/mutations.js',
31+
'store/modules/foo/update/actions.js',
32+
'store/modules/foo/update/getters.js',
33+
'store/modules/foo/update/index.js',
34+
'store/modules/foo/update/mutation_types.js',
35+
'store/modules/foo/update/mutations.js',
1736

1837
// components
1938
'components/foo/Create.vue',
@@ -23,7 +42,7 @@ export default class extends BaseGenerator {
2342
'components/foo/Show.vue',
2443

2544
// routes
26-
'routes/foo.js',
45+
'router/foo.js',
2746

2847
// error
2948
'error/SubmissionError.js',
@@ -40,7 +59,7 @@ export default class extends BaseGenerator {
4059
console.log('Paste the following definitions in your application configuration:');
4160
console.log(chalk.green(`
4261
//import routes
43-
import ${titleLc}Routes from './routes/${titleLc}';
62+
import ${titleLc}Routes from './router/${titleLc}';
4463
4564
// Add routes to VueRouter
4665
const router = new VueRouter({
@@ -79,23 +98,50 @@ export const store = new Vuex.Store({
7998

8099
// Create directories
81100
// These directories may already exist
82-
for (let dir of [`${dir}/config`, `${dir}/error`, `${dir}/routes`, `${dir}/utils`]) {
101+
for (let dir of [`${dir}/config`, `${dir}/error`, `${dir}/router`, `${dir}/utils`]) {
83102
this.createDir(dir, false);
84103
}
85104

86-
for (let dir of [`${dir}/store/modules/${lc}`, `${dir}/components/${lc}`]) {
105+
for (let dir of [
106+
`${dir}/store/modules/${lc}`,
107+
`${dir}/store/modules/${lc}/create`,
108+
`${dir}/store/modules/${lc}/delete`,
109+
`${dir}/store/modules/${lc}/list`,
110+
`${dir}/store/modules/${lc}/show`,
111+
`${dir}/store/modules/${lc}/update`,
112+
`${dir}/components/${lc}`
113+
]) {
87114
this.createDir(dir);
88115
}
89116

90117
for (let pattern of [
91118
// modules
92119
'store/modules/%s/index.js',
93-
'store/modules/%s/create.js',
94-
'store/modules/%s/delete.js',
95-
'store/modules/%s/list.js',
96-
'store/modules/%s/update.js',
97-
'store/modules/%s/show.js',
98-
'store/modules/%s/mutation-types.js',
120+
'store/modules/%s/create/actions.js',
121+
'store/modules/%s/create/getters.js',
122+
'store/modules/%s/create/index.js',
123+
'store/modules/%s/create/mutation_types.js',
124+
'store/modules/%s/create/mutations.js',
125+
'store/modules/%s/delete/actions.js',
126+
'store/modules/%s/delete/getters.js',
127+
'store/modules/%s/delete/index.js',
128+
'store/modules/%s/delete/mutation_types.js',
129+
'store/modules/%s/delete/mutations.js',
130+
'store/modules/%s/list/actions.js',
131+
'store/modules/%s/list/getters.js',
132+
'store/modules/%s/list/index.js',
133+
'store/modules/%s/list/mutation_types.js',
134+
'store/modules/%s/list/mutations.js',
135+
'store/modules/%s/show/actions.js',
136+
'store/modules/%s/show/getters.js',
137+
'store/modules/%s/show/index.js',
138+
'store/modules/%s/show/mutation_types.js',
139+
'store/modules/%s/show/mutations.js',
140+
'store/modules/%s/update/actions.js',
141+
'store/modules/%s/update/getters.js',
142+
'store/modules/%s/update/index.js',
143+
'store/modules/%s/update/mutation_types.js',
144+
'store/modules/%s/update/mutations.js',
99145

100146
// components
101147
'components/%s/Create.vue',
@@ -105,7 +151,7 @@ export const store = new Vuex.Store({
105151
'components/%s/Show.vue',
106152

107153
// routes
108-
'routes/%s.js',
154+
'router/%s.js',
109155
]) {
110156
this.createFileFromPattern(pattern, dir, lc, context);
111157
}

‎src/generators/VueGenerator.test.js

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -29,25 +29,29 @@ test('Generate a Vue app', () => {
2929
});
3030
generator.generate(api, resource, tmpobj.name);
3131

32-
expect(fs.existsSync(tmpobj.name+'/components/abc/Create.vue'), true);
33-
expect(fs.existsSync(tmpobj.name+'/components/abc/Form.vue'), true);
34-
expect(fs.existsSync(tmpobj.name+'/components/abc/List.vue'), true);
35-
expect(fs.existsSync(tmpobj.name+'/components/abc/Show.vue'), true);
36-
expect(fs.existsSync(tmpobj.name+'/components/abc/Update.vue'), true);
32+
expect(fs.existsSync(tmpobj.name+'/components/foo/Create.vue')).toBe(true);
33+
expect(fs.existsSync(tmpobj.name+'/components/foo/Form.vue')).toBe(true);
34+
expect(fs.existsSync(tmpobj.name+'/components/foo/List.vue')).toBe(true);
35+
expect(fs.existsSync(tmpobj.name+'/components/foo/Show.vue')).toBe(true);
36+
expect(fs.existsSync(tmpobj.name+'/components/foo/Update.vue')).toBe(true);
3737

38-
expect(fs.existsSync(tmpobj.name+'/config/_entrypoint.js'), true);
38+
expect(fs.existsSync(tmpobj.name+'/config/_entrypoint.js')).toBe(true);
3939

40-
expect(fs.existsSync(tmpobj.name+'/error/SubmissionError.js'), true);
40+
expect(fs.existsSync(tmpobj.name+'/error/SubmissionError.js')).toBe(true);
4141

42-
expect(fs.existsSync(tmpobj.name+'/store/modules/abc/create.js'), true);
43-
expect(fs.existsSync(tmpobj.name+'/store/modules/abc/delete.js'), true);
44-
expect(fs.existsSync(tmpobj.name+'/store/modules/abc/index.js'), true);
45-
expect(fs.existsSync(tmpobj.name+'/store/modules/abc/list.js'), true);
46-
expect(fs.existsSync(tmpobj.name+'/store/modules/abc/mutation-types.js'), true);
47-
expect(fs.existsSync(tmpobj.name+'/store/modules/abc/show.js'), true);
48-
expect(fs.existsSync(tmpobj.name+'/store/modules/abc/update.js'), true);
42+
expect(fs.existsSync(tmpobj.name+'/router/foo.js')).toBe(true);
4943

50-
expect(fs.existsSync(tmpobj.name+'/utils/fetch.js'), true);
44+
expect(fs.existsSync(tmpobj.name+'/store/modules/foo/index.js')).toBe(true);
45+
46+
['create', 'delete', 'list', 'show', 'update'].forEach((action) => {
47+
expect(fs.existsSync(`${tmpobj.name}/store/modules/foo/${action}/actions.js`)).toBe(true);
48+
expect(fs.existsSync(`${tmpobj.name}/store/modules/foo/${action}/getters.js`)).toBe(true);
49+
expect(fs.existsSync(`${tmpobj.name}/store/modules/foo/${action}/index.js`)).toBe(true);
50+
expect(fs.existsSync(`${tmpobj.name}/store/modules/foo/${action}/mutation_types.js`)).toBe(true);
51+
expect(fs.existsSync(`${tmpobj.name}/store/modules/foo/${action}/mutations.js`)).toBe(true);
52+
});
53+
54+
expect(fs.existsSync(tmpobj.name+'/utils/fetch.js')).toBe(true);
5155

5256
tmpobj.removeCallback();
5357
});

‎templates/_entrypoint.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
export const API_HOST = '{{{host}}}';
2-
export const API_PATH = '{{{path}}}';
1+
export const API_HOST = '{{{host}}}'
2+
export const API_PATH = '{{{path}}}'

‎templates/vue/components/foo/Create.vue

Lines changed: 62 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,46 +2,78 @@
22
<div>
33
<h1>New {{{ title }}}</h1>
44

5-
<div v-if="loading" class="alert alert-info" role="status">Loading...</div>
6-
<div v-if="error" class="alert alert-danger" role="alert"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> \{{ error }}</div>
5+
<div
6+
v-if="isLoading"
7+
class="alert alert-info"
8+
role="status">Loading...</div>
9+
<div
10+
v-if="error"
11+
class="alert alert-danger"
12+
role="alert">
13+
<span
14+
class="fa fa-exclamation-triangle"
15+
aria-hidden="true" /> \{{ error }}
16+
</div>
717

8-
<{{{titleUcFirst}}}Form :handle-submit="create" :values="item" :errors="violations"></{{{titleUcFirst}}}Form>
9-
<router-link :to="{ name: '{{{titleUcFirst}}}List' }" class="btn btn-default">Back to list</router-link>
18+
<{{{titleUcFirst}}}Form
19+
:handle-submit="onSendForm"
20+
:handle-update-field="updateField"
21+
:values="item"
22+
:errors="violations" />
23+
24+
<router-link
25+
:to="{ name: '{{{titleUcFirst}}}List' }"
26+
class="btn btn-default">Back to list</router-link>
1027
</div>
1128
</template>
1229

1330
<script>
14-
import {{{titleUcFirst}}}Form from './Form.vue'
15-
import { createNamespacedHelpers } from 'vuex'
31+
import { createNamespacedHelpers } from 'vuex'
32+
import {{{titleUcFirst}}}Form from './Form'
1633
17-
const { mapGetters } = createNamespacedHelpers('{{{lc}}}/create')
34+
const { mapGetters, mapActions } = createNamespacedHelpers('{{{lc}}}/create')
1835
19-
export default {
20-
components: {
21-
{{{titleUcFirst}}}Form
22-
},
23-
data () {
24-
return {
25-
item: {}
36+
export default {
37+
components: {
38+
{{{titleUcFirst}}}Form
39+
},
40+
41+
data () {
42+
return {
43+
item: {}
44+
}
45+
},
46+
47+
computed: mapGetters([
48+
'error',
49+
'isLoading',
50+
'created',
51+
'violations'
52+
]),
53+
54+
watch: {
55+
// eslint-disable-next-line object-shorthand,func-names
56+
created: function (created) {
57+
if (!created) {
58+
return
2659
}
27-
},
28-
computed: mapGetters([
29-
'error',
30-
'loading',
31-
'created',
32-
'violations'
60+
61+
this.$router.push({ name: '{{{titleUcFirst}}}Update', params: { id: created['@id'] } })
62+
}
63+
},
64+
65+
methods: {
66+
...mapActions([
67+
'create'
3368
]),
34-
methods: {
35-
create: function(item) {
36-
this.$store.dispatch('{{{lc}}}/create/create', item)
37-
}
69+
70+
onSendForm () {
71+
this.create(this.item)
3872
},
39-
watch: {
40-
created: function (created) {
41-
if (created) {
42-
this.$router.push({ name: '{{{titleUcFirst}}}Update', params: { id: created['@id']} })
43-
}
44-
}
73+
74+
updateField (field, value) {
75+
Object.assign(this.item, { [field]: value })
4576
}
4677
}
78+
}
4779
</script>

‎templates/vue/components/foo/Form.vue

Lines changed: 65 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,79 @@
11
<template>
22
<form @submit.prevent="handleSubmit(item)">
33
{{#each formFields}}
4-
<div :class="{ 'form-group': true, 'has-error': (errors && errors.{{{ name }}}) }">
5-
<label for="{{{ lc }}}_{{{ name }}}" class="control-label">{{{ name }}}</label>
6-
<input v-model="item.{{{ name }}}" type="{{{ type }}}" {{#if step}} step="{{{ step }}}"{{/if}} placeholder="{{{ description }}}" {{#if required}}required="true"{{/if}} id="{{{ lc }}}_{{{ name }}}" class="form-control" />
7-
<span v-if="errors && errors.{{{ name }}}" class="help-block" id="{{{ lc }}}_{{{ name }}}_helpBlock">\{{ errors.{{{ name }}} }}</span>
4+
<div class="form-group">
5+
<label
6+
for="{{{ ../lc }}}_{{{ name }}}"
7+
class="form-control-label">{{{ name }}}</label>
8+
<input
9+
id="{{{ ../lc }}}_{{{ name }}}"
10+
v-model="item.{{{ name }}}"
11+
:class="['form-control', isInvalid('{{{ name }}}') ? 'is-invalid' : '']"
12+
type="{{{ type }}}"
13+
{{#if step}}
14+
step="{{{ step }}}"
15+
{{/if~}}
16+
{{#if required}}
17+
required="true"
18+
{{/if}}
19+
placeholder="{{{ description }}}"
20+
@input="handleUpdateField('{{{ name }}}', $event.target.value)">
21+
<div
22+
v-if="isInvalid('{{{ name }}}')"
23+
class="invalid-feedback">\{{ violations.{{{ name }}} }}</div>
824
</div>
925
{{/each}}
1026

11-
<button type="submit" class="btn btn-primary">Submit</button>
27+
<button
28+
type="submit"
29+
class="btn btn-success">Submit</button>
1230
</form>
1331
</template>
1432

1533
<script>
16-
export default {
17-
props: {
18-
handleSubmit: {
19-
type: Function,
20-
required: true
21-
},
22-
values: {
23-
type: Object,
24-
required: true
25-
},
26-
errors: {
27-
type: Object
28-
},
29-
initialValues: {
30-
type: Object
31-
}
34+
export default {
35+
props: {
36+
handleSubmit: {
37+
type: Function,
38+
required: true
3239
},
33-
computed: {
34-
item: function () {
35-
return this.initialValues ? this.initialValues : this.values
36-
}
40+
41+
handleUpdateField: {
42+
type: Function,
43+
required: true
44+
},
45+
46+
values: {
47+
type: Object,
48+
required: true
49+
},
50+
51+
errors: {
52+
type: Object,
53+
default: () => {}
54+
},
55+
56+
initialValues: {
57+
type: Object,
58+
default: () => {}
59+
}
60+
},
61+
62+
computed: {
63+
// eslint-disable-next-line
64+
item () {
65+
return this.initialValues || this.values
66+
},
67+
68+
violations () {
69+
return this.errors || {}
70+
}
71+
},
72+
73+
methods: {
74+
isInvalid (key) {
75+
return Object.keys(this.violations).length > 0 && this.violations[key]
3776
}
3877
}
78+
}
3979
</script>

0 commit comments

Comments
 (0)