closes #60

laravel-enso · May 8, 2018 · 96ffa05 · 96ffa05
1 parent bf7d157
commit 96ffa05
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git a/src/config/datatable.php b/src/config/datatable.php
@@ -79,6 +79,8 @@
                 'action' => 'ajax',
                 'method' => 'PATCH',
                 'label' => 'Action',
+                'message' => 'Custom Action. Are you sure?',
+                'confirmation' => true,
             ],
         ],
         'row' => [

diff --git a/src/resources/assets/js/components/enso/vuedatatable/TableBody.vue b/src/resources/assets/js/components/enso/vuedatatable/TableBody.vue
@@ -197,7 +197,7 @@ export default {
         },
         doAction(button, row) {
             if (this.modal) {
-                this.modal = false;
+                this.closeModal();
             }
 
             if (button.event) {

diff --git a/src/resources/assets/js/components/enso/vuedatatable/TopControls.vue b/src/resources/assets/js/components/enso/vuedatatable/TopControls.vue
@@ -16,7 +16,7 @@
                     :class="button.class"
                     :key="button.label"
                     :href="button.action === 'href' ? button.path : null"
-                    @click="doAction(button)">
+                    @click="button.confirmation ? showModal(button) : doAction(button)">
                     <span class="is-hidden-mobile">
                         {{ i18n(button.label) }}
                     </span>
@@ -74,6 +74,12 @@
                 </p>
             </div>
         </div>
+        <modal v-if="modal"
+            :show="modal"
+            :i18n="i18n"
+            :message="button.message"
+            @close="closeModal()"
+            @commit="doAction(button)"/>
     </div>
 
 </template>
@@ -86,14 +92,15 @@ import LengthMenu from './topControls/LengthMenu.vue';
 import ColumnVisibility from './topControls/ColumnVisibility.vue';
 import Alignment from './topControls/Alignment.vue';
 import StyleSelector from './topControls/StyleSelector.vue';
+import Modal from './Modal.vue';
 
 fontawesome.library.add(faSync, faUndo, faSearch, faInfoCircle);
 
 export default {
     name: 'TopControls',
 
     components: {
-        LengthMenu, ColumnVisibility, Alignment, StyleSelector,
+        LengthMenu, ColumnVisibility, Alignment, StyleSelector, Modal,
     },
 
     props: {
@@ -127,11 +134,25 @@ export default {
         return {
             lengthMenu: false,
             columnVisibility: false,
+            modal: false,
+            button: null,
         };
     },
 
     methods: {
+        showModal(button) {
+            this.button = button;
+            this.modal = true;
+        },
+        closeModal() {
+            this.modal = false;
+            this.button = null;
+        },
         doAction(button) {
+            if (this.modal) {
+                this.closeModal();
+            }
+
             this.$emit(button.event);
 
             if (button.action === 'export') {