Skip to content

Commit 3a4d928

Browse files
alOnehalOneh
committed
Added Update.vue
1 parent a1b37c1 commit 3a4d928

File tree

5 files changed

+166
-6
lines changed

5 files changed

+166
-6
lines changed

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
2-
<form @submit.prevent="handleSubmit(values)">
2+
<form @submit.prevent="handleSubmit(item)">
33
{{#each formFields}}
44
<div :class="{ 'form-group': true, 'has-error': (errors && errors.{{{ name }}}) }">
55
<label for="{{{ lc }}}_{{{ name }}}" class="control-label">{{{ name }}}</label>
6-
<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" />
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" />
77
<span v-if="errors && errors.{{{ name }}}" class="help-block" id="{{{ lc }}}_{{{ name }}}_helpBlock">\{{ errors.{{{ name }}} }}</span>
88
</div>
99
{{/each}}
@@ -25,6 +25,14 @@
2525
},
2626
errors: {
2727
type: Object
28+
},
29+
initialValues: {
30+
type: Object
31+
}
32+
},
33+
computed: {
34+
item: function () {
35+
return this.initialValues ? this.initialValues : this.values;
2836
}
2937
}
3038
}

‎templates/vue/components/foo/Update.vue

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<template>
2+
<div>
3+
<h1>Edit \{{ item && item['@id'] }}</h1>
4+
5+
<div v-if="created" class="alert alert-success" role="status">\{{ created['@id'] }} created.</div>
6+
<div v-if="updated" class="alert alert-success" role="status">\{{ updated['@id'] }} updated.</div>
7+
<div v-if="retrieveLoading || updateLoading || deleteLoading"class="alert alert-info" role="status">Loading...</div>
8+
<div v-if="retrieveError" class="alert alert-danger" role="alert"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> \{{ retrieveError }}</div>
9+
<div v-if="updateError" class="alert alert-danger" role="alert"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> \{{ updateError }}</div>
10+
<div v-if="deleteError" class="alert alert-danger" role="alert"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> \{{ deleteError }}</div>
11+
12+
<{{{titleUcFirst}}}Form v-if="item" :handle-submit="update" :values="item" :errors="violations" :initialValues="retrieved"></GatewayForm>
13+
<router-link v-if="item" :to="{ name: '{{{titleUcFirst}}}List' }" class="btn btn-default">Back to list</router-link>
14+
<button @click="del" class="btn btn-danger">Delete</button>
15+
</div>
16+
</template>
17+
18+
<script>
19+
import {{{titleUcFirst}}}Form from './Form.vue';
20+
import { mapGetters } from 'vuex';
21+
22+
export default {
23+
created () {
24+
this.$store.dispatch('{{{lc}}}/update/retrieve', decodeURIComponent(this.$route.params.id));
25+
},
26+
components: {
27+
{{{titleUcFirst}}}Form
28+
},
29+
computed: {
30+
...mapGetters({
31+
retrieveError: '{{{lc}}}/update/retrieveError',
32+
retrieveLoading: '{{{lc}}}/update/retrieveLoading',
33+
updateError: '{{{lc}}}/update/updateError',
34+
updateLoading: '{{{lc}}}/update/updateLoading',
35+
deleteError: '{{{lc}}}/del/error',
36+
deleteLoading: '{{{lc}}}/del/loading',
37+
created: '{{{lc}}}/create/created',
38+
deleted: '{{{lc}}}/del/deleted',
39+
retrieved: '{{{lc}}}/update/retrieved',
40+
updated: '{{{lc}}}/update/updated',
41+
violations: '{{{lc}}}/update/violations'
42+
})
43+
},
44+
data: function() {
45+
return {
46+
item: {}
47+
}
48+
},
49+
methods: {
50+
update (values) {
51+
this.$store.dispatch('{{{lc}}}/update/update', {item: this.retrieved, values: values });
52+
},
53+
del () {
54+
if (window.confirm('Are you sure you want to delete this item?'))
55+
this.$store.dispatch('{{{lc}}}/del/delete', this.retrieved);
56+
},
57+
reset () {
58+
this.$store.dispatch('{{{lc}}}/update/reset');
59+
this.$store.dispatch('{{{lc}}}/del/reset');
60+
this.$store.dispatch('{{{lc}}}/create/reset');
61+
62+
}
63+
},
64+
watch: {
65+
deleted: function (deleted) {
66+
if (deleted) {
67+
this.$router.push({ name: '{{{titleUcFirst}}}List' });
68+
}
69+
}
70+
},
71+
beforeDestroy() {
72+
this.reset();
73+
}
74+
}
75+
</script>

‎templates/vue/store/modules/foo/create.js

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import {{{ lc }}}Fetch from '../../../api/{{{ lc }}}Fetch';
33
const {{{ uc }}}_CREATE_ERROR = '{{{ uc }}}_CREATE_ERROR';
44
const {{{ uc }}}_CREATE_LOADING = '{{{ uc }}}_CREATE_LOADING';
55
const {{{ uc }}}_CREATE_SUCCESS = '{{{ uc }}}_CREATE_SUCCESS';
6+
const {{{ uc }}}_CREATE_VIOLATIONS = '{{{ uc }}}_CREATE_VIOLATIONS';
7+
const {{{ uc }}}_CREATE_RESET = '{{{ uc }}}_CREATE_RESET';
68

79
const state = {
810
loading: false,
@@ -22,7 +24,20 @@ function success(commit, created) {
2224
return commit({{{ uc }}}_CREATE_SUCCESS, created);
2325
}
2426

25-
const getters = {};
27+
function violations(commit, violations) {
28+
return commit({{{ uc }}}_CREATE_VIOLATIONS, violations);
29+
}
30+
31+
function reset(commit) {
32+
return commit({{{ uc }}}_CREATE_RESET);
33+
}
34+
35+
const getters = {
36+
created: state => state.created,
37+
error: state => state.error,
38+
loading: state => state.loading,
39+
violations: state => state.violations,
40+
};
2641

2742
const actions = {
2843
create({ commit }) {
@@ -41,6 +56,9 @@ const actions = {
4156
loading(commit, false);
4257
error(commit, e.message);
4358
});
59+
},
60+
reset({ commit }) {
61+
reset(commit);
4462
}
4563
};
4664

@@ -53,6 +71,15 @@ const mutations = {
5371
},
5472
[{{{ uc }}}_CREATE_SUCCESS] (state, created) {
5573
state.created = created;
74+
},
75+
[{{{ uc }}}_CREATE_VIOLATIONS] (state, violations) {
76+
state.violations = violations;
77+
},
78+
[{{{ uc }}}_CREATE_RESET] (state) {
79+
state.loading = false;
80+
state.error = '';
81+
state.created = null;
82+
state.violations = null;
5683
}
5784
};
5885

‎templates/vue/store/modules/foo/delete.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {{{ lc }}}Fetch from '../../../api/{{{ lc }}}Fetch';
33
const {{{ uc }}}_DELETE_ERROR = '{{{ uc }}}_DELETE_ERROR';
44
const {{{ uc }}}_DELETE_LOADING = '{{{ uc }}}_DELETE_LOADING';
55
const {{{ uc }}}_DELETE_SUCCESS = '{{{ uc }}}_DELETE_SUCCESS';
6+
const {{{ uc }}}_DELETE_RESET = '{{{ uc }}}_DELETE_RESET';
67

78
const state = {
89
loading: false,
@@ -22,6 +23,10 @@ function success(commit, deleted) {
2223
return commit({{{ uc }}}_DELETE_SUCCESS, deleted);
2324
}
2425

26+
function reset(commit) {
27+
return commit({{{ uc }}}_DELETE_RESET);
28+
}
29+
2530
const getters = {
2631
error: state => state.error,
2732
deleted: state => state.deleted,
@@ -41,6 +46,9 @@ const actions = {
4146
loading(commit, false);
4247
error(commit, e.message);
4348
});
49+
},
50+
reset({ commit }) {
51+
reset(commit);
4452
}
4553
};
4654

@@ -53,6 +61,11 @@ const mutations = {
5361
},
5462
[{{{ uc }}}_DELETE_SUCCESS] (state, deleted) {
5563
state.deleted = deleted;
64+
},
65+
[{{{ uc }}}_DELETE_RESET] (state) {
66+
state.error = '';
67+
state.loading = false;
68+
state.deleted = null;
5669
}
5770
};
5871

‎templates/vue/store/modules/foo/update.js

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import SubmissionError from '../../../error/SubmissionError';
12
import {{{ lc }}}Fetch from '../../../api/{{{ lc }}}Fetch';
23

34
const {{{ uc }}}_UPDATE_RESET = '{{{ uc }}}_UPDATE_RESET';
@@ -7,6 +8,7 @@ const {{{ uc }}}_UPDATE_UPDATE_SUCCESS = '{{{ uc }}}_UPDATE_UPDATE_SUCCESS';
78
const {{{ uc }}}_UPDATE_RETRIEVE_ERROR = '{{{ uc }}}_UPDATE_RETRIEVE_ERROR';
89
const {{{ uc }}}_UPDATE_RETRIEVE_LOADING = '{{{ uc }}}_UPDATE_RETRIEVE_LOADING';
910
const {{{ uc }}}_UPDATE_RETRIEVE_SUCCESS = '{{{ uc }}}_UPDATE_RETRIEVE_SUCCESS';
11+
const {{{ uc }}}_UPDATE_UPDATE_VIOLATIONS = '{{{ uc }}}_UPDATE_UPDATE_VIOLATIONS';
1012

1113
const state = {
1214
loading: false,
@@ -15,7 +17,8 @@ const state = {
1517
retrieved: null,
1618
updated: null,
1719
updateError: '',
18-
updateLoading: false
20+
updateLoading: false,
21+
violations: null
1922
};
2023

2124
function retrieveError(commit, retrieveError) {
@@ -46,7 +49,20 @@ export function reset(commit) {
4649
return commit({{{ uc }}}_UPDATE_RESET);
4750
}
4851

49-
const getters = {};
52+
function violations(commit, violations) {
53+
return commit({{{ uc }}}_UPDATE_UPDATE_VIOLATIONS, violations);
54+
}
55+
56+
const getters = {
57+
loading: state => state.loading,
58+
retrieveError: state => state.retrieveError,
59+
retrieveLoading: state => state.retrieveLoading,
60+
retrieved: state => state.retrieved,
61+
updated: state => state.updated,
62+
updateError: state => state.updateError,
63+
updateLoading: state => state.updateLoading,
64+
violations: state => state.violations
65+
};
5066

5167
const actions = {
5268
retrieve({ commit }, id) {
@@ -63,7 +79,7 @@ const actions = {
6379
retrieveError(commit, e.message);
6480
});
6581
},
66-
update({ commit, state }, item) {
82+
update({ commit, state }, { item, values }) {
6783
updateError(commit, null);
6884
updateLoading(commit, true);
6985

@@ -80,8 +96,18 @@ const actions = {
8096
})
8197
.catch(e => {
8298
updateLoading(commit, false);
99+
100+
if (e instanceof SubmissionError) {
101+
violations(commit, e.errors);
102+
updateError(commit, e.errors._error);
103+
return;
104+
}
105+
83106
updateError(commit, e.message);
84107
});
108+
},
109+
reset({ commit }) {
110+
reset(commit);
85111
}
86112
};
87113

@@ -106,9 +132,20 @@ const mutations = {
106132
},
107133
[{{{ uc }}}_UPDATE_UPDATE_SUCCESS] (state, updated) {
108134
state.updated = updated;
135+
state.violations = null;
136+
},
137+
[{{{ uc }}}_UPDATE_UPDATE_VIOLATIONS] (state, violations) {
138+
state.violations = violations;
109139
},
110140
[{{{ uc }}}_UPDATE_RESET] (state) {
141+
state.loading = false;
142+
state.retrieveError = '';
143+
state.retrieveLoading = false;
144+
state.retrieved = null;
111145
state.updated = null;
146+
state.updateError = '';
147+
state.updateLoading = false;
148+
state.violations = null;
112149
}
113150
};
114151

0 commit comments

Comments
 (0)