Skip to content

Commit 1325d7b

Browse files
alOnehalOneh
authored
Merge pull request #191 from alOneh/vuetify-fixes
fix VuetifyGenerator
2 parents 968b70d + 9072848 commit 1325d7b

File tree

13 files changed

+215
-65
lines changed

13 files changed

+215
-65
lines changed

‎src/generators/VueBaseGenerator.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -285,6 +285,7 @@ export default class extends BaseGenerator {
285285
submit: "Submit",
286286
reset: "Reset",
287287
delete: "Delete",
288+
edit: "Edit",
288289
confirmDelete: "Are you sure you want to delete this item?",
289290
noresults: "No results",
290291
close: "Close",

‎src/generators/VuetifyGenerator.js‎

Lines changed: 10 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -44,22 +44,6 @@ export default class extends BaseVueGenerator {
4444
);
4545
console.log(
4646
chalk.green(`
47-
//Configure your Vuetify plugin
48-
// src/plugins/vuetify.js
49-
50-
import Vue from 'vue'
51-
import Vuetify from 'vuetify/lib'
52-
53-
Vue.use(Vuetify)
54-
55-
const opts = {
56-
icons: {
57-
iconfont: 'mdi'
58-
}
59-
};
60-
61-
export default new Vuetify(opts)
62-
6347
// Register the routes in you router
6448
// src/router/index.js
6549
import ${titleLc}Routes from './${titleLc}';
@@ -74,17 +58,18 @@ export default new VueRouter({
7458
7559
// Register the modules in the store
7660
// src/store/index.js
77-
import ${titleLc}Service from './services/${titleLc}';
61+
import ${titleLc}Service from '../services/${titleLc}';
7862
import makeCrudModule from './modules/crud';
7963
80-
// ...
81-
82-
store.registerModule(
83-
'${titleLc}',
84-
makeCrudModule({
85-
service: ${titleLc}Service
86-
})
87-
);
64+
export const store = new Vuex.Store({
65+
// ...
66+
modules: {
67+
// other modules
68+
${titleLc}: makeCrudModule({
69+
service: ${titleLc}Service
70+
})
71+
}
72+
});
8873
`)
8974
);
9075
}

‎src/generators/VuetifyGenerator.test.js‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { Api, Resource, Field } from "@api-platform/api-doc-parser";
2+
import fs from "fs";
3+
import tmp from "tmp";
4+
import VuetifyGenerator from "./VuetifyGenerator";
5+
6+
test("Generate a Vuetify app", () => {
7+
const generator = new VuetifyGenerator({
8+
hydraPrefix: "hydra:",
9+
templateDirectory: `${__dirname}/../../templates`
10+
});
11+
const tmpobj = tmp.dirSync({ unsafeCleanup: true });
12+
13+
const fields = [
14+
new Field("bar", {
15+
id: "http://schema.org/url",
16+
range: "http://www.w3.org/2001/XMLSchema#string",
17+
reference: null,
18+
required: true,
19+
description: "An URL"
20+
})
21+
];
22+
const resource = new Resource("abc", "http://example.com/foos", {
23+
id: "foo",
24+
title: "Foo",
25+
readableFields: fields,
26+
writableFields: fields,
27+
getParameters: function getParameters() {
28+
return Promise.resolve([]);
29+
}
30+
});
31+
const api = new Api("http://example.com", {
32+
entrypoint: "http://example.com:8080",
33+
title: "My API",
34+
resources: [resource]
35+
});
36+
generator.generate(api, resource, tmpobj.name).then(() => {
37+
[
38+
"/components/ActionCell",
39+
"/components/Breadcrumb",
40+
"/components/ConfirmDelete",
41+
"/components/DataFilter",
42+
"/components/foo/Filter",
43+
"/components/foo/Form.vue",
44+
"/components/foo/Layout",
45+
"/components/InputDate.vue",
46+
"/components/Loading.vue",
47+
"/components/Snackbar.vue",
48+
"/components/Toolbar.vue",
49+
"/config/entrypoint.js",
50+
"/error/SubmissionError.js",
51+
"/locales/en.js",
52+
"/router/foo.js",
53+
"/services/api.js",
54+
"/services/foo.js",
55+
"/utils/dates.js",
56+
"/utils/fetch.js",
57+
"/utils/hydra.js",
58+
"/views/foo/Create.vue",
59+
"/views/foo/List.vue",
60+
"/views/foo/Show.vue",
61+
"/views/foo/Update.vue"
62+
].forEach(file => {
63+
expect(fs.existsSync(tmpobj.name + file)).toBe(true);
64+
});
65+
66+
tmpobj.removeCallback();
67+
});
68+
});

‎templates/vue-common/mixins/ListMixin.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import isEmpty from 'lodash/isEmpty';
12
import { formatDateTime } from '../utils/dates';
23
import NotificationMixin from './NotificationMixin';
34

@@ -39,7 +40,8 @@ export default {
3940
if (itemsPerPage > 0) {
4041
params = { ...params, itemsPerPage, page };
4142
}
42-
if (sortBy) {
43+
44+
if (!isEmpty(sortBy)) {
4345
params[`order[${sortBy}]`] = descending ? 'desc' : 'asc';
4446
}
4547

‎templates/vue-common/mixins/ShowMixin.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,13 @@ export default {
2020
.catch(() => {});
2121
});
2222
},
23-
formatDateTime
23+
formatDateTime,
24+
editHandler() {
25+
this.$router.push({
26+
name: `${this.$options.servicePrefix}Update`,
27+
params: { id: this.item['@id'] }
28+
});
29+
}
2430
},
2531
watch: {
2632
error(message) {
@@ -29,5 +35,8 @@ export default {
2935
deleteError(message) {
3036
message && this.showError(message);
3137
}
38+
},
39+
beforeDestroy() {
40+
this.reset();
3241
}
3342
};

‎templates/vue-common/mixins/UpdateMixin.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ export default {
3131
formatDateTime,
3232
reset() {
3333
this.$refs.updateForm.$v.$reset();
34+
this.updateReset();
35+
this.delReset();
3436
this.createReset();
3537
},
3638

‎templates/vue-common/store/modules/crud.js‎

Lines changed: 72 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,21 @@ import { getField, updateField } from 'vuex-map-fields';
33
import remove from 'lodash/remove';
44
import SubmissionError from '../../error/SubmissionError';
55

6+
const initialState = () => ({
7+
allIds: [],
8+
byId: {},
9+
created: null,
10+
deleted: null,
11+
error: "",
12+
isLoading: false,
13+
resetList: false,
14+
selectItems: null,
15+
totalItems: 0,
16+
updated: null,
17+
view: null,
18+
violations: null
19+
});
20+
621
const handleError = (commit, e) => {
722
commit(ACTIONS.TOGGLE_LOADING);
823

@@ -11,19 +26,22 @@ const handleError = (commit, e) => {
1126
// eslint-disable-next-line
1227
commit(ACTIONS.SET_ERROR, e.errors._error);
1328

14-
return;
29+
return Promise.reject(e);
1530
}
1631

1732
// eslint-disable-next-line
1833
commit(ACTIONS.SET_ERROR, e.message);
34+
35+
return Promise.reject(e);
1936
};
2037

21-
const ACTIONS = {
38+
export const ACTIONS = {
2239
ADD: 'ADD',
23-
MERCURE_DELETED: 'MERCURE_DELETED',
24-
MERCURE_MESSAGE: 'MERCURE_MESSAGE',
25-
MERCURE_OPEN: 'MERCURE_OPEN',
40+
RESET_CREATE: 'RESET_CREATE',
41+
RESET_DELETE: 'RESET_DELETE',
2642
RESET_LIST: 'RESET_LIST',
43+
RESET_SHOW: 'RESET_SHOW',
44+
RESET_UPDATE: 'RESET_UPDATE',
2745
SET_CREATED: 'SET_CREATED',
2846
SET_DELETED: 'SET_DELETED',
2947
SET_ERROR: 'SET_ERROR',
@@ -61,7 +79,6 @@ export default function makeCrudModule({
6179

6280
service
6381
.del(item)
64-
.then(response => response.json())
6582
.then(() => {
6683
commit(ACTIONS.TOGGLE_LOADING);
6784
commit(ACTIONS.SET_DELETED, item);
@@ -71,10 +88,14 @@ export default function makeCrudModule({
7188
fetchAll: ({ commit, state }, params) => {
7289
if (!service) throw new Error('No service specified!');
7390

91+
commit(ACTIONS.TOGGLE_LOADING);
92+
7493
service
7594
.findAll({ params })
7695
.then(response => response.json())
7796
.then(retrieved => {
97+
commit(ACTIONS.TOGGLE_LOADING);
98+
7899
commit(
79100
ACTIONS.SET_TOTAL_ITEMS,
80101
retrieved['{{{hydraPrefix}}}totalItems']
@@ -123,6 +144,18 @@ export default function makeCrudModule({
123144
})
124145
.catch(e => handleError(commit, e));
125146
},
147+
resetCreate: ({ commit }) => {
148+
commit(ACTIONS.RESET_CREATE);
149+
},
150+
resetDelete: ({ commit }) => {
151+
commit(ACTIONS.RESET_DELETE);
152+
},
153+
resetShow: ({ commit }) => {
154+
commit(ACTIONS.RESET_SHOW);
155+
},
156+
resetUpdate: ({ commit }) => {
157+
commit(ACTIONS.RESET_UPDATE);
158+
},
126159
update: ({ commit }, item) => {
127160
commit(ACTIONS.SET_ERROR, '');
128161
commit(ACTIONS.TOGGLE_LOADING);
@@ -150,16 +183,48 @@ export default function makeCrudModule({
150183
updateField,
151184
[ACTIONS.ADD]: (state, item) => {
152185
Vue.set(state.byId, item['@id'], item);
186+
Vue.set(state, 'isLoading', false);
153187
if (state.allIds.includes(item['@id'])) return;
154188
state.allIds.push(item['@id']);
155189
},
190+
[ACTIONS.RESET_CREATE]: state => {
191+
Object.assign(state, {
192+
isLoading: false,
193+
error: '',
194+
created: null,
195+
violations: null
196+
});
197+
},
198+
[ACTIONS.RESET_DELETE]: state => {
199+
Object.assign(state, {
200+
isLoading: false,
201+
error: '',
202+
deleted: null
203+
});
204+
},
156205
[ACTIONS.RESET_LIST]: state => {
157206
Object.assign(state, {
158207
allIds: [],
159208
byId: {},
209+
error: '',
210+
isLoading: false,
160211
resetList: false
161212
});
162213
},
214+
[ACTIONS.RESET_SHOW]: state => {
215+
Object.assign(state, {
216+
error: '',
217+
isLoading: false
218+
});
219+
},
220+
[ACTIONS.RESET_UPDATE]: state => {
221+
Object.assign(state, {
222+
error: '',
223+
isLoading: false,
224+
updated: null,
225+
violations: null
226+
});
227+
},
163228
[ACTIONS.SET_CREATED]: (state, created) => {
164229
Object.assign(state, { created });
165230
},
@@ -203,19 +268,6 @@ export default function makeCrudModule({
203268
}
204269
},
205270
namespaced: true,
206-
state: {
207-
allIds: [],
208-
byId: {},
209-
created: null,
210-
deleted: null,
211-
error: '',
212-
isLoading: false,
213-
resetList: false,
214-
selectItems: null,
215-
totalItems: 0,
216-
updated: null,
217-
view: null,
218-
violations: null
219-
}
271+
state: initialState
220272
};
221273
}

‎templates/vue-common/utils/fetch.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,12 @@ export default function(id, options = {}) {
2222
options.headers.set('Content-Type', MIME_TYPE);
2323

2424
if (options.params) {
25-
let queryString = Object.keys(options.params)
25+
const params = normalize(options.params);
26+
let queryString = Object.keys(params)
2627
.map(key =>
27-
Array.isArray(options.params[key])
28-
? makeParamArray(key, options.params[key])
29-
: `${key}=${options.params[key]}`
28+
Array.isArray(params[key])
29+
? makeParamArray(key, params[key])
30+
: `${key}=${params[key]}`
3031
)
3132
.join('&');
3233
id = `${id}?${queryString}`;

‎templates/vuetify/components/Toolbar.vue‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,14 @@
33
<slot name="left"></slot>
44
<v-spacer />
55
<div>
6+
<v-btn
7+
v-if="handleEdit"
8+
:loading="isLoading"
9+
color="primary"
10+
@click="editItem"
11+
>
12+
\{{ $t('Edit') }}
13+
</v-btn>
614
<v-btn
715
v-if="handleSubmit"
816
:loading="isLoading"
@@ -55,6 +63,10 @@ export default {
5563
};
5664
},
5765
props: {
66+
handleEdit: {
67+
type: Function,
68+
required: false
69+
},
5870
handleSubmit: {
5971
type: Function,
6072
required: false
@@ -87,6 +99,11 @@ export default {
8799
this.handleAdd();
88100
}
89101
},
102+
editItem() {
103+
if (this.handleEdit) {
104+
this.handleEdit();
105+
}
106+
},
90107
submitItem() {
91108
if (this.handleSubmit) {
92109
this.handleSubmit();

0 commit comments

Comments
 (0)