Handle delete confirmation cancel.

devel-pa · devel-pa · commit 793934040c1c · 2019-10-28T13:43:06.000+02:00
Fix state issues and better naming.
Fix update error.
Allow overriding action when item created.
Always return fetch promise from action.
diff --git a/templates/quasar/common/components/ActionCell.vue b/templates/quasar/common/components/ActionCell.vue
@@ -19,36 +19,41 @@
       color="secondary"
       @click="confirmDelete = true"
     />
-    <ConfirmDelete v-if="handleDelete" :show="confirmDelete" :handle-delete="handleDelete" />
+    <ConfirmDelete
+      v-if="handleDelete"
+      :show="confirmDelete"
+      :handle-delete="handleDelete"
+      :handle-cancel="() => (confirmDelete = false)"
+    />
   </q-td>
 </template>
 
 <script>
-import ConfirmDelete from './ConfirmDelete';
+import ConfirmDelete from "./ConfirmDelete";
 
 export default {
-  name: 'ActionCell',
+  name: "ActionCell",
   components: {
-    ConfirmDelete,
+    ConfirmDelete
   },
   data() {
     return {
-      confirmDelete: false,
+      confirmDelete: false
     };
   },
   props: {
     handleShow: {
       type: Function,
-      required: false,
+      required: false
     },
     handleEdit: {
       type: Function,
-      required: false,
+      required: false
     },
     handleDelete: {
       type: Function,
-      required: false,
-    },
-  },
+      required: false
+    }
+  }
 };
 </script>
diff --git a/templates/quasar/common/components/ConfirmDelete.vue b/templates/quasar/common/components/ConfirmDelete.vue
@@ -7,7 +7,7 @@
       </q-card-section>
 
       <q-card-actions align="right">
-        <q-btn flat label="{{{labels.cancel}}}" color="primary" v-close-popup />
+        <q-btn flat label="{{{labels.cancel}}}" color="primary" v-close-popup @click="handleCancel" />
         <q-btn flat label="{{{labels.delete}}}" color="primary" v-close-popup @click="handleDelete" />
       </q-card-actions>
     </q-card>
@@ -26,6 +26,10 @@ export default {
       type: Function,
       required: true,
     },
+    handleCancel: {
+      type: Function,
+      required: false,
+    },
   },
 };
 </script>
diff --git a/templates/quasar/common/components/Toolbar.vue b/templates/quasar/common/components/Toolbar.vue
@@ -3,7 +3,12 @@
     <slot name="left"></slot>
     <q-space />
     <div>
-      <q-btn v-if="handleSubmit" :label="$t('{{{labels.submit}}}')" color="primary" @click="submitItem" />
+      <q-btn
+        v-if="handleSubmit"
+        :label="$t('{{{labels.submit}}}')"
+        color="primary"
+        @click="submitItem"
+      />
       <q-btn
         v-if="handleReset"
         :label="$t('{{{labels.reset}}}')"
@@ -22,40 +27,45 @@
       />
       <q-btn v-if="handleAdd" flat round dense icon="add" @click="addItem" />
     </div>
-    <ConfirmDelete v-if="handleDelete" :show="confirmDelete" :handle-delete="handleDelete" />
+    <ConfirmDelete
+      v-if="handleDelete"
+      :show="confirmDelete"
+      :handle-delete="handleDelete"
+      :handle-cancel="() => (confirmDelete = false)"
+    />
   </q-toolbar>
 </template>
 
 <script>
-import ConfirmDelete from './ConfirmDelete';
+import ConfirmDelete from "./ConfirmDelete";
 
 export default {
-  name: 'Toolbar',
+  name: "Toolbar",
   components: {
-    ConfirmDelete,
+    ConfirmDelete
   },
   data() {
     return {
-      confirmDelete: false,
+      confirmDelete: false
     };
   },
   props: {
     handleSubmit: {
       type: Function,
-      required: false,
+      required: false
     },
     handleReset: {
       type: Function,
-      required: false,
+      required: false
     },
     handleDelete: {
       type: Function,
-      required: false,
+      required: false
     },
     handleAdd: {
       type: Function,
-      required: false,
-    },
+      required: false
+    }
   },
   methods: {
     addItem() {
@@ -72,7 +82,7 @@ export default {
       if (this.handleReset) {
         this.handleReset();
       }
-    },
-  },
+    }
+  }
 };
 </script>
diff --git a/templates/quasar/common/mixins/CreateMixin.js b/templates/quasar/common/mixins/CreateMixin.js
@@ -3,11 +3,9 @@ import { error } from '../../utils/notify';
 export default {
   watch: {
     created(created) {
-      if (!created) {
-        return;
+      if (created) {
+        this.onCreated(created);
       }
-
-      this.$router.push({ name: `${this.$options.servicePrefix}Update`, params: { id: created['@id'] } });
     },
 
     error(message) {
@@ -16,6 +14,13 @@ export default {
   },
 
   methods: {
+    onCreated(item) {
+      this.$router.push({ 
+        name: `${this.$options.servicePrefix}Update`,
+        params: { id: item['@id'] },
+      });
+    },
+
     onSendForm() {
       this.$refs.createForm.$children[0].validate().then(success => {
         if (success) {
diff --git a/templates/quasar/common/store/create/state.js b/templates/quasar/common/store/create/state.js
@@ -1,6 +1,6 @@
-export default {
+export default () => ({
   isLoading: false,
   error: '',
   created: null,
   violations: null,
-};
+});
diff --git a/templates/quasar/common/store/delete/state.js b/templates/quasar/common/store/delete/state.js
@@ -1,5 +1,5 @@
-export default {
+export default () => ({
   isLoading: false,
   error: '',
   deleted: null,
-};
+});
diff --git a/templates/quasar/common/store/list/actions.js b/templates/quasar/common/store/list/actions.js
@@ -2,7 +2,7 @@ import fetch from '../../../utils/fetch';
 
 export const getItemsCommon = ({ commit }, { page, params }, { types, hydraPrefix }) => {
   commit(types.TOGGLE_LOADING);
-  fetch(page, { params })
+  return fetch(page, { params })
     .then(response => response.json())
     .then(data => {
       commit(types.TOGGLE_LOADING);
@@ -18,7 +18,7 @@ export const getItemsCommon = ({ commit }, { page, params }, { types, hydraPrefi
 
 export const getSelectItemsCommon = ({ commit }, { page, params }, { types, hydraPrefix }) => {
   commit(types.TOGGLE_LOADING);
-  fetch(page, { params })
+  return fetch(page, { params })
     .then(response => response.json())
     .then(data => {
       commit(types.TOGGLE_LOADING);
diff --git a/templates/quasar/common/store/list/state.js b/templates/quasar/common/store/list/state.js
@@ -1,9 +1,9 @@
-export default {
+export default () => ({
   error: '',
   isLoading: false,
   items: [],
   view: [],
   totalItems: 10,
   selectItems: null,
   selectItemsTemplate: '',
-};
+});
diff --git a/templates/quasar/common/store/show/state.js b/templates/quasar/common/store/show/state.js
@@ -1,5 +1,5 @@
-export default {
+export default () => ({
   error: '',
   isLoading: false,
   retrieved: null,
-};
+});
diff --git a/templates/quasar/common/store/update/actions.js b/templates/quasar/common/store/update/actions.js
@@ -24,7 +24,7 @@ export const updateCommon = ({ commit, state }, values, { types }) => {
   commit(types.SET_ERROR, '');
   commit(types.TOGGLE_LOADING);
 
-  return fetch(state.retrieved['@id'], {
+  return fetch((state.retrieved && state.retrieved['@id']) || values['@id'], {
     method: 'PUT',
     headers: new Headers({ 'Content-Type': 'application/ld+json' }),
     body: JSON.stringify(values),
@@ -46,6 +46,6 @@ export const updateCommon = ({ commit, state }, values, { types }) => {
       }
 
       // eslint-disable-next-line
-      commit(types.SET_ERROR, e.errors._error);
+      commit(types.SET_ERROR, e.message);
     });
 };
diff --git a/templates/quasar/common/store/update/state.js b/templates/quasar/common/store/update/state.js
@@ -1,7 +1,7 @@
-export default {
+export default () => {
   error: '',
   isLoading: false,
   retrieved: null,
   updated: null,
   violations: null,
-};
+});
diff --git a/templates/quasar/components/foo/Filter.vue b/templates/quasar/components/foo/Filter.vue
@@ -162,7 +162,7 @@ export default {
     {{{name}}}FilterFn(val, update /* , abort */) {
       return this.{{{name}}}SelectItems !== null
         ? update()
-        : this.{{{name}}}GetSelectItems({}).then(update());
+        : this.{{{name}}}GetSelectItems({}).then(update);
     },
     {{/if}}
     {{/compare}}
diff --git a/templates/quasar/components/foo/Form.vue b/templates/quasar/components/foo/Form.vue
@@ -193,17 +193,15 @@ export default {
     {{#if reference}}
     {{{name}}}FilterFn(val, update /* , abort */) {
       const params = {
-        '{{{name}}}[exists]': false,
+        'exists[{{{name}}}]': false,
       };
       const template = JSON.stringify(params);
 
       return this.{{{name}}}SelectItems !== null && this.{{{name}}}SelectItemsTemplate === template
         ? update()
         : this.{{{name}}}GetSelectItems({ params }).then(() => {
             this.{{{name}}}SetSelectItemsTemplate(template);
-            setTimeout(() => {
-              update();
-            }, 500);
+            update();
           });
     },
     {{/if}}
diff --git a/templates/quasar/store/modules/foo/create/actions.js b/templates/quasar/store/modules/foo/create/actions.js
@@ -1,9 +1,9 @@
 import { types } from './mutation_types';
 import { createCommon, resetCommon } from '../../../../common/store/create/actions';
 
-export const create = (state, values) =>
-  createCommon(state, { page: '{{{name}}}', values }, { types });
+export const create = (context, values) =>
+  createCommon(context, { page: '{{{name}}}', values }, { types });
 
-export const reset = state => {
-  resetCommon(state, { types });
+export const reset = context => {
+  resetCommon(context, { types });
 };
diff --git a/templates/quasar/store/modules/foo/create/mutations.js b/templates/quasar/store/modules/foo/create/mutations.js
@@ -1,5 +1,5 @@
 import { types } from './mutation_types';
 import initState from './state';
-import makeState from '../../../../common/store/create/mutations';
+import makeMutations from '../../../../common/store/create/mutations';
 
-export default makeState(initState, types, 'CREATE');
+export default makeMutations(initState, types, 'CREATE');
diff --git a/templates/quasar/store/modules/foo/create/state.js b/templates/quasar/store/modules/foo/create/state.js
@@ -1 +1,3 @@
-export { default } from '../../../../common/store/create/state';
+import makeState from '../../../../common/store/create/state';
+const stateExport = makeState();
+export default stateExport;
diff --git a/templates/quasar/store/modules/foo/delete/actions.js b/templates/quasar/store/modules/foo/delete/actions.js
@@ -1,8 +1,8 @@
 import { types } from './mutation_types';
 import { delCommon, resetCommon } from '../../../../common/store/delete/actions';
 
-export const del = (state, item) => delCommon(state, item, { types });
+export const del = (context, item) => delCommon(context, item, { types });
 
-export const reset = state => {
-  resetCommon(state, { types });
+export const reset = context => {
+  resetCommon(context, { types });
 };
diff --git a/templates/quasar/store/modules/foo/delete/mutations.js b/templates/quasar/store/modules/foo/delete/mutations.js
@@ -1,5 +1,5 @@
 import { types } from './mutation_types';
 import initState from './state';
-import makeState from '../../../../common/store/delete/mutations';
+import makeMutations from '../../../../common/store/delete/mutations';
 
-export default makeState(initState, types, 'DELETE');
+export default makeMutations(initState, types, 'DELETE');
diff --git a/templates/quasar/store/modules/foo/delete/state.js b/templates/quasar/store/modules/foo/delete/state.js
@@ -1 +1,3 @@
-export { default } from '../../../../common/store/delete/state';
+import makeState from '../../../../common/store/delete/state';
+const stateExport = makeState();
+export default stateExport;
diff --git a/templates/quasar/store/modules/foo/list/actions.js b/templates/quasar/store/modules/foo/list/actions.js
@@ -3,16 +3,16 @@ import { getItemsCommon, getSelectItemsCommon } from '../../../../common/store/l
 
 const hydraPrefix = '{{{hydraPrefix}}}';
 
-export const getItems = (state, options) =>
+export const getItems = (context, options) =>
   getItemsCommon(
-    state,
+    context,
     { ...{ page: '{{{name}}}', params: {} }, ...options },
     { types, hydraPrefix },
   );
 
-export const getSelectItems = (state, options) =>
+export const getSelectItems = (context, options) =>
   getSelectItemsCommon(
-    state,
+    context,
     { ...{ page: '{{{name}}}', params: { properties: ['id', 'name'] } }, ...options },
     { types, hydraPrefix },
   );
diff --git a/templates/quasar/store/modules/foo/list/mutations.js b/templates/quasar/store/modules/foo/list/mutations.js
@@ -1,7 +1,7 @@
 import { types } from './mutation_types';
 import initState from './state';
-import makeState from '../../../../common/store/list/mutations';
+import makeMutations from '../../../../common/store/list/mutations';
 
-const mutations = makeState(initState, types);
+const mutations = makeMutations(initState, types);
 
 export default mutations;
diff --git a/templates/quasar/store/modules/foo/list/state.js b/templates/quasar/store/modules/foo/list/state.js
@@ -1 +1,3 @@
-export { default } from '../../../../common/store/list/state';
+import makeState from '../../../../common/store/list/state';
+const stateExport = makeState();
+export default stateExport;
diff --git a/templates/quasar/store/modules/foo/show/actions.js b/templates/quasar/store/modules/foo/show/actions.js
@@ -1,8 +1,8 @@
 import { types } from './mutation_types';
 import { retrieveCommon, resetCommon } from '../../../../common/store/show/actions';
 
-export const retrieve = (state, id) => retrieveCommon(state, id, { types });
+export const retrieve = (context, id) => retrieveCommon(context, id, { types });
 
-export const reset = state => {
-  resetCommon(state, { types });
+export const reset = context => {
+  resetCommon(context, { types });
 };
diff --git a/templates/quasar/store/modules/foo/show/mutations.js b/templates/quasar/store/modules/foo/show/mutations.js
@@ -1,5 +1,5 @@
 import { types } from './mutation_types';
 import initState from './state';
-import makeState from '../../../../common/store/show/mutations';
+import makeMutations from '../../../../common/store/show/mutations';
 
-export default makeState(initState, types, 'SHOW');
+export default makeMutations(initState, types, 'SHOW');
diff --git a/templates/quasar/store/modules/foo/show/state.js b/templates/quasar/store/modules/foo/show/state.js
diff --git a/templates/quasar/store/modules/foo/update/actions.js b/templates/quasar/store/modules/foo/update/actions.js
diff --git a/templates/quasar/store/modules/foo/update/mutations.js b/templates/quasar/store/modules/foo/update/mutations.js
diff --git a/templates/quasar/store/modules/foo/update/state.js b/templates/quasar/store/modules/foo/update/state.js
