Merge pull request #191 from alOneh/vuetify-fixes

alOneh · web-flow · commit 1325d7bbd9b3 · 2020-01-26T18:11:35.000+01:00
fix VuetifyGenerator
diff --git a/src/generators/VueBaseGenerator.js b/src/generators/VueBaseGenerator.js
@@ -285,6 +285,7 @@ export default class extends BaseGenerator {
       submit: "Submit",
       reset: "Reset",
       delete: "Delete",
+      edit: "Edit",
       confirmDelete: "Are you sure you want to delete this item?",
       noresults: "No results",
       close: "Close",
diff --git a/src/generators/VuetifyGenerator.js b/src/generators/VuetifyGenerator.js
@@ -44,22 +44,6 @@ export default class extends BaseVueGenerator {
     );
     console.log(
       chalk.green(`
-//Configure your Vuetify plugin
-// src/plugins/vuetify.js
-
-import Vue from 'vue'
-import Vuetify from 'vuetify/lib'
-
-Vue.use(Vuetify)
-
-const opts = {
-  icons: {
-    iconfont: 'mdi'
-  }
-};
-
-export default new Vuetify(opts)
-
 // Register the routes in you router
 // src/router/index.js
 import ${titleLc}Routes from './${titleLc}';
@@ -74,17 +58,18 @@ export default new VueRouter({
 
 // Register the modules in the store
 // src/store/index.js
-import ${titleLc}Service from './services/${titleLc}';
+import ${titleLc}Service from '../services/${titleLc}';
 import makeCrudModule from './modules/crud';
 
-// ...
-
-store.registerModule(
-  '${titleLc}',
-  makeCrudModule({
-    service: ${titleLc}Service
-  })
-);
+export const store = new Vuex.Store({
+  // ...
+  modules: {
+    // other modules
+    ${titleLc}: makeCrudModule({
+      service: ${titleLc}Service
+    })
+  }
+});
 `)
     );
   }
diff --git a/src/generators/VuetifyGenerator.test.js b/src/generators/VuetifyGenerator.test.js
@@ -0,0 +1,68 @@
+import { Api, Resource, Field } from "@api-platform/api-doc-parser";
+import fs from "fs";
+import tmp from "tmp";
+import VuetifyGenerator from "./VuetifyGenerator";
+
+test("Generate a Vuetify app", () => {
+  const generator = new VuetifyGenerator({
+    hydraPrefix: "hydra:",
+    templateDirectory: `${__dirname}/../../templates`
+  });
+  const tmpobj = tmp.dirSync({ unsafeCleanup: true });
+
+  const fields = [
+    new Field("bar", {
+      id: "http://schema.org/url",
+      range: "http://www.w3.org/2001/XMLSchema#string",
+      reference: null,
+      required: true,
+      description: "An URL"
+    })
+  ];
+  const resource = new Resource("abc", "http://example.com/foos", {
+    id: "foo",
+    title: "Foo",
+    readableFields: fields,
+    writableFields: fields,
+    getParameters: function getParameters() {
+      return Promise.resolve([]);
+    }
+  });
+  const api = new Api("http://example.com", {
+    entrypoint: "http://example.com:8080",
+    title: "My API",
+    resources: [resource]
+  });
+  generator.generate(api, resource, tmpobj.name).then(() => {
+    [
+      "/components/ActionCell",
+      "/components/Breadcrumb",
+      "/components/ConfirmDelete",
+      "/components/DataFilter",
+      "/components/foo/Filter",
+      "/components/foo/Form.vue",
+      "/components/foo/Layout",
+      "/components/InputDate.vue",
+      "/components/Loading.vue",
+      "/components/Snackbar.vue",
+      "/components/Toolbar.vue",
+      "/config/entrypoint.js",
+      "/error/SubmissionError.js",
+      "/locales/en.js",
+      "/router/foo.js",
+      "/services/api.js",
+      "/services/foo.js",
+      "/utils/dates.js",
+      "/utils/fetch.js",
+      "/utils/hydra.js",
+      "/views/foo/Create.vue",
+      "/views/foo/List.vue",
+      "/views/foo/Show.vue",
+      "/views/foo/Update.vue"
+    ].forEach(file => {
+      expect(fs.existsSync(tmpobj.name + file)).toBe(true);
+    });
+
+    tmpobj.removeCallback();
+  });
+});
diff --git a/templates/vue-common/mixins/ListMixin.js b/templates/vue-common/mixins/ListMixin.js
@@ -1,3 +1,4 @@
+import isEmpty from 'lodash/isEmpty';
 import { formatDateTime } from '../utils/dates';
 import NotificationMixin from './NotificationMixin';
 
@@ -39,7 +40,8 @@ export default {
       if (itemsPerPage > 0) {
         params = { ...params, itemsPerPage, page };
       }
-      if (sortBy) {
+
+      if (!isEmpty(sortBy)) {
         params[`order[${sortBy}]`] = descending ? 'desc' : 'asc';
       }
 
diff --git a/templates/vue-common/mixins/ShowMixin.js b/templates/vue-common/mixins/ShowMixin.js
@@ -20,7 +20,13 @@ export default {
           .catch(() => {});
       });
     },
-    formatDateTime
+    formatDateTime,
+    editHandler() {
+      this.$router.push({
+        name: `${this.$options.servicePrefix}Update`,
+        params: { id: this.item['@id'] }
+      });
+    }
   },
   watch: {
     error(message) {
@@ -29,5 +35,8 @@ export default {
     deleteError(message) {
       message && this.showError(message);
     }
+  },
+  beforeDestroy() {
+    this.reset();
   }
 };
diff --git a/templates/vue-common/mixins/UpdateMixin.js b/templates/vue-common/mixins/UpdateMixin.js
@@ -31,6 +31,8 @@ export default {
     formatDateTime,
     reset() {
       this.$refs.updateForm.$v.$reset();
+      this.updateReset();
+      this.delReset();
       this.createReset();
     },
 
diff --git a/templates/vue-common/store/modules/crud.js b/templates/vue-common/store/modules/crud.js
@@ -3,6 +3,21 @@ import { getField, updateField } from 'vuex-map-fields';
 import remove from 'lodash/remove';
 import SubmissionError from '../../error/SubmissionError';
 
+const initialState = () => ({
+  allIds: [],
+  byId: {},
+  created: null,
+  deleted: null,
+  error: "",
+  isLoading: false,
+  resetList: false,
+  selectItems: null,
+  totalItems: 0,
+  updated: null,
+  view: null,
+  violations: null
+});
+
 const handleError = (commit, e) => {
   commit(ACTIONS.TOGGLE_LOADING);
 
@@ -11,19 +26,22 @@ const handleError = (commit, e) => {
     // eslint-disable-next-line
     commit(ACTIONS.SET_ERROR, e.errors._error);
 
-    return;
+    return Promise.reject(e);
   }
 
   // eslint-disable-next-line
   commit(ACTIONS.SET_ERROR, e.message);
+
+  return Promise.reject(e);
 };
 
-const ACTIONS = {
+export const ACTIONS = {
   ADD: 'ADD',
-  MERCURE_DELETED: 'MERCURE_DELETED',
-  MERCURE_MESSAGE: 'MERCURE_MESSAGE',
-  MERCURE_OPEN: 'MERCURE_OPEN',
+  RESET_CREATE: 'RESET_CREATE',
+  RESET_DELETE: 'RESET_DELETE',
   RESET_LIST: 'RESET_LIST',
+  RESET_SHOW: 'RESET_SHOW',
+  RESET_UPDATE: 'RESET_UPDATE',
   SET_CREATED: 'SET_CREATED',
   SET_DELETED: 'SET_DELETED',
   SET_ERROR: 'SET_ERROR',
@@ -61,7 +79,6 @@ export default function makeCrudModule({
 
         service
           .del(item)
-          .then(response => response.json())
           .then(() => {
             commit(ACTIONS.TOGGLE_LOADING);
             commit(ACTIONS.SET_DELETED, item);
@@ -71,10 +88,14 @@ export default function makeCrudModule({
       fetchAll: ({ commit, state }, params) => {
         if (!service) throw new Error('No service specified!');
 
+        commit(ACTIONS.TOGGLE_LOADING);
+
         service
           .findAll({ params })
           .then(response => response.json())
           .then(retrieved => {
+            commit(ACTIONS.TOGGLE_LOADING);
+
             commit(
               ACTIONS.SET_TOTAL_ITEMS,
               retrieved['{{{hydraPrefix}}}totalItems']
@@ -123,6 +144,18 @@ export default function makeCrudModule({
           })
           .catch(e => handleError(commit, e));
       },
+      resetCreate: ({ commit }) => {
+        commit(ACTIONS.RESET_CREATE);
+      },
+      resetDelete: ({ commit }) => {
+        commit(ACTIONS.RESET_DELETE);
+      },
+      resetShow: ({ commit }) => {
+        commit(ACTIONS.RESET_SHOW);
+      },
+      resetUpdate: ({ commit }) => {
+        commit(ACTIONS.RESET_UPDATE);
+      },
       update: ({ commit }, item) => {
         commit(ACTIONS.SET_ERROR, '');
         commit(ACTIONS.TOGGLE_LOADING);
@@ -150,16 +183,48 @@ export default function makeCrudModule({
       updateField,
       [ACTIONS.ADD]: (state, item) => {
         Vue.set(state.byId, item['@id'], item);
+        Vue.set(state, 'isLoading', false);
         if (state.allIds.includes(item['@id'])) return;
         state.allIds.push(item['@id']);
       },
+      [ACTIONS.RESET_CREATE]: state => {
+        Object.assign(state, {
+          isLoading: false,
+          error: '',
+          created: null,
+          violations: null
+        });
+      },
+      [ACTIONS.RESET_DELETE]: state => {
+        Object.assign(state, {
+          isLoading: false,
+          error: '',
+          deleted: null
+        });
+      },
       [ACTIONS.RESET_LIST]: state => {
         Object.assign(state, {
           allIds: [],
           byId: {},
+          error: '',
+          isLoading: false,
           resetList: false
         });
       },
+      [ACTIONS.RESET_SHOW]: state => {
+        Object.assign(state, {
+          error: '',
+          isLoading: false
+        });
+      },
+      [ACTIONS.RESET_UPDATE]: state => {
+        Object.assign(state, {
+          error: '',
+          isLoading: false,
+          updated: null,
+          violations: null
+        });
+      },
       [ACTIONS.SET_CREATED]: (state, created) => {
         Object.assign(state, { created });
       },
@@ -203,19 +268,6 @@ export default function makeCrudModule({
       }
     },
     namespaced: true,
-    state: {
-      allIds: [],
-      byId: {},
-      created: null,
-      deleted: null,
-      error: '',
-      isLoading: false,
-      resetList: false,
-      selectItems: null,
-      totalItems: 0,
-      updated: null,
-      view: null,
-      violations: null
-    }
+    state: initialState
   };
 }
diff --git a/templates/vue-common/utils/fetch.js b/templates/vue-common/utils/fetch.js
@@ -22,11 +22,12 @@ export default function(id, options = {}) {
     options.headers.set('Content-Type', MIME_TYPE);
 
   if (options.params) {
-    let queryString = Object.keys(options.params)
+    const params = normalize(options.params);
+    let queryString = Object.keys(params)
       .map(key =>
-        Array.isArray(options.params[key])
-          ? makeParamArray(key, options.params[key])
-          : `${key}=${options.params[key]}`
+        Array.isArray(params[key])
+          ? makeParamArray(key, params[key])
+          : `${key}=${params[key]}`
       )
       .join('&');
     id = `${id}?${queryString}`;
diff --git a/templates/vuetify/components/Toolbar.vue b/templates/vuetify/components/Toolbar.vue
@@ -3,6 +3,14 @@
     <slot name="left"></slot>
     <v-spacer />
     <div>
+      <v-btn
+        v-if="handleEdit"
+        :loading="isLoading"
+        color="primary"
+        @click="editItem"
+      >
+        \{{ $t('Edit') }}
+      </v-btn>
       <v-btn
         v-if="handleSubmit"
         :loading="isLoading"
@@ -55,6 +63,10 @@ export default {
     };
   },
   props: {
+    handleEdit: {
+      type: Function,
+      required: false
+    },
     handleSubmit: {
       type: Function,
       required: false
@@ -87,6 +99,11 @@ export default {
         this.handleAdd();
       }
     },
+    editItem() {
+      if (this.handleEdit) {
+        this.handleEdit();
+      }
+    },
     submitItem() {
       if (this.handleSubmit) {
         this.handleSubmit();
diff --git a/templates/vuetify/components/foo/Filter.vue b/templates/vuetify/components/foo/Filter.vue
diff --git a/templates/vuetify/views/foo/List.vue b/templates/vuetify/views/foo/List.vue
diff --git a/templates/vuetify/views/foo/Show.vue b/templates/vuetify/views/foo/Show.vue
diff --git a/templates/vuetify/views/foo/Update.vue b/templates/vuetify/views/foo/Update.vue

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+import isEmpty from 'lodash/isEmpty';`
`1`	`2`	`import { formatDateTime } from '../utils/dates';`
`2`	`3`	`import NotificationMixin from './NotificationMixin';`
`3`	`4`
`@@ -39,7 +40,8 @@ export default {`
`39`	`40`	`if (itemsPerPage > 0) {`
`40`	`41`	`params = { ...params, itemsPerPage, page };`
`41`	`42`	`}`
`42`		`- if (sortBy) {`
	`43`	`+`
	`44`	`+ if (!isEmpty(sortBy)) {`
`43`	`45`	params[`order[${sortBy}]`] = descending ? 'desc' : 'asc';
`44`	`46`	`}`
`45`	`47`