Merge branch 'master' into feature/can-delete-edit-per-line

src/VuetifyResource.vue

@@ -114,7 +114,7 @@
                             slot="activator"
                             small
                             v-if="canDeleteResources(selected) && selected.length >= 1"
-                            v-on:click="deleteHandler()"
+                            v-on:click="showDeleteConfirmation()"
                         >
                             <v-icon>$vuetify.icons.delete</v-icon>
                         </v-btn>
@@ -160,10 +160,10 @@
                         <td v-for="item in tableContent">
                             <component
                                 :content="props.item[item.value]"
-                                :is="item.columnType"
-                                v-if="typeof item.columnType === 'object'"
+                                :is="getColumnType(item.columnType)"
+                                :item="props.item"
+                                :table-column="item"
                             ></component>
-                            <span v-if="typeof item.columnType !== 'object'">{{ props.item[item.value] }}</span>
                         </td>
                         <td class="crud-actions">
                             <v-tooltip left v-if="canUpdateResources([props.item])">
@@ -184,7 +184,7 @@
                                     flat
                                     icon
                                     slot="activator"
-                                    v-on:click="deleteHandler([props.item[resourceKeyName]])"
+                                    @click="showDeleteConfirmation([props.item[resourceKeyName]])"
                                 >
                                     <v-icon>$vuetify.icons.delete</v-icon>
                                 </v-btn>
@@ -210,16 +210,22 @@
                 </v-data-table>
             </v-flex>
         </v-layout>
+        <delete-confirmation :texts="texts" ref="deleteConfirmation" :callback="deleteHandler"></delete-confirmation>
     </div>
 </template>
 
 <script>
-    import texts from './texts.js';
     import ActivityOverlay from './components/ActivityOverlay.vue';
+    import Text from './columnTypes/Text.vue';
+    import Checkbox from './columnTypes/Checkbox.vue';
+    import DeleteConfirmation from './components/DeleteConfirmation.vue';
+    import Language from './mixins/Language.js';
+
 
     export default {
         name: 'vuetify-resource',
-        components: {ActivityOverlay},
+        components: {DeleteConfirmation, ActivityOverlay},
+        mixins: [Language],
         data() {
             return {
                 fab: false,
@@ -388,7 +394,7 @@
              *                  align:      string
              *                  sortable:   coolean
              *                  value:      string
-             *                  columnType: object/component
+             *                  columnType: object/component or string
              *              }
              */
             tableContent: {required: true, type: Array},
@@ -577,17 +583,20 @@
                         });
                 }
             },
-
+            showDeleteConfirmation(ids) {
+                if (typeof ids === 'undefined') {
+                    ids = this.selected.map(item => item[this.resourceKeyName]);
+                }
+                this.$refs.deleteConfirmation.ids = ids;
+                this.$refs.deleteConfirmation.dialog = true;
+            },
             /**
              * deleteHandler
              * Handles the delete action and calls the deleteCallback and handles the promise
              *
              * @return void
              */
             deleteHandler(ids) {
-                if (typeof ids === 'undefined') {
-                    ids = this.selected.map(item => item[this.resourceKeyName]);
-                }
                 if (!this.activity.isDeleting) {
                     this.activity.isDeleting = true;
                     this.deleteCallback(ids)
@@ -725,6 +734,21 @@
                 }
             },
 
+            getColumnType(columnType) {
+                if (typeof columnType === 'object') {
+                    return columnType;
+                } else if(typeof columnType === 'string') {
+                    switch (columnType.toLowerCase()) {
+                        case 'checkbox':
+                            return Checkbox;
+                        default:
+                        case 'text':
+                            return Text;
+                    }
+                }
+                return Text;
+            },
+
             /**
              * onSelectedChange
              * When the selected in the vuetify table changes, emit the v-model
@@ -733,14 +757,6 @@
                 this.$emit('input', this.selected);
             },
 
-            lang(t) {
-                if (typeof this.texts === 'undefined' || typeof this.texts[t] === 'undefined') {
-                    return texts[t];
-                } else {
-                    return this.texts[t];
-                }
-            },
-
             canDeleteResources(selected) {
                 let canDelete = this.canDelete;
                 if (this.canDeleteResourceKey !== '') {
@@ -765,7 +781,6 @@
                     });
                 }
                 return canUpdate;
-
             },
         },
     };

src/columnTypes/Checkbox.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="column type-checkbox">
-        <i class="material-icons icon icon--selection-control icon--checkbox">{{isTrue() ? 'check_circle' : ''}}</i>
+        <v-icon v-if="isTrue()">{{ $vuetify.icons.checkboxOn }}</v-icon>
     </div>
 </template>
 

src/columnTypes/Text.vue

@@ -1,17 +1,23 @@
 <template>
     <div class="column type-text">
-        {{ content }}
+        <v-tooltip right v-if="typeof tableColumn.tooltip !== 'undefined'">
+            <template v-slot:activator="{ on }">
+                <span v-on="on">{{ content }}</span>
+            </template>
+            <span>{{item[tableColumn.tooltip]}}</span>
+        </v-tooltip>
+
+        <span v-else>{{ content }}</span>
     </div>
 </template>
 
 <script>
     export default {
         name: 'TextType',
-        props: ['content'],
-        data () {
-            return {
+        props: ['content', 'item', 'tableColumn'],
 
-            }
-        }
-    }
+        data() {
+            return {};
+        },
+    };
 </script>

src/components/DeleteConfirmation.vue

@@ -0,0 +1,39 @@
+<template>
+    <v-dialog v-model="dialog" persistent max-width="290">
+        <v-card>
+            <v-card-title class="headline">{{lang('delete-confirmation-title')}}</v-card-title>
+            <v-card-text>{{lang('delete-confirmation-content')}}</v-card-text>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="grey" flat @click="dialog = false">{{lang('cancel')}}</v-btn>
+                <v-btn color="priamry darken-1" flat @click="handleDelete">{{lang('delete')}}</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+    import Language from './../mixins/Language.js';
+
+    export default {
+        props: ['callback', 'texts'],
+        name: 'delete-confirmation',
+        mixins: [Language],
+        data() {
+            return {
+                ids: [],
+                dialog: false,
+            }
+        },
+        methods: {
+            handleDelete() {
+                this.callback(this.ids);
+                this.dialog=false;
+            }
+        }
+    };
+</script>
+
+<style scoped>
+
+</style>

src/mixins/Language.js

@@ -0,0 +1,14 @@
+
+import texts from './../texts.js';
+export default {
+
+    methods: {
+        lang(t) {
+            if (typeof this.texts === 'undefined' || typeof this.texts[t] === 'undefined') {
+                return texts[t];
+            } else {
+                return this.texts[t];
+            }
+        },
+    },
+};

src/texts.js

@@ -6,6 +6,7 @@ export default {
     create: 'Create',
     update: 'Update',
     delete: 'Delete',
+    cancel: 'Cancel',
     'no-data': 'There is nothing found',
     'no-results': 'There is nothing found for this filter',
     'rows-per-page-text': 'Rows per page',
@@ -15,5 +16,7 @@ export default {
     'snackbar-deleted': 'It\'s successfully deleted!',
     'snackbar-delete-error': 'Something went wrong, please try again later',
     'search': 'Search',
-    'loading': 'Loading..'
+    'loading': 'Loading..',
+    'delete-confirmation-title': 'Are you sure?',
+    'delete-confirmation-content': 'Are you sure you want to delete these item(s)?',
 };