From a416114ce77048634dbb21c0b25a8ef19aed15e1 Mon Sep 17 00:00:00 2001
From: Szczepan Masny <szczepanmasny@gmail.com>
Date: Wed, 27 Feb 2019 19:28:51 +0100
Subject: [PATCH] crud customization

---
 examples/crm/main.js                          |   2 +-
 examples/simple-crud/main.js                  |   2 +-
 examples/simple-crud/routes/Crud.vue          | 175 ++++++++++++------
 src/utils/crud/components/Crud.vue            |  43 ++++-
 .../crud/components/DataTableClientSide.vue   |  21 ++-
 .../crud/components/DataTableControls.vue     |  26 ++-
 src/utils/crud/components/DataTableRow.vue    |  15 +-
 .../crud/components/DataTableServerSide.vue   |  21 ++-
 src/utils/crud/mixins/datatable-main.js       |  11 +-
 9 files changed, 221 insertions(+), 95 deletions(-)

diff --git a/examples/crm/main.js b/examples/crm/main.js
index acee4db..eee0cc0 100644
--- a/examples/crm/main.js
+++ b/examples/crm/main.js
@@ -10,7 +10,7 @@ import store from './store'
 import './register-service-worker'
 import { api } from './config/api'
 
-Vue.config.productionTip = false
+Vue.config.productionTip = true
 Vue.http.options.emulateJSON = true;
 Vue.http.options.root = api.url + api.path.default
 Vue.http.interceptors.push((request, next) => {
diff --git a/examples/simple-crud/main.js b/examples/simple-crud/main.js
index 45abf09..17c5b4d 100644
--- a/examples/simple-crud/main.js
+++ b/examples/simple-crud/main.js
@@ -10,7 +10,7 @@ import store from './store'
 import './register-service-worker'
 import { api } from './config/api'
 
-Vue.config.productionTip = false
+Vue.config.productionTip = true
 Vue.http.options.emulateJSON = true;
 Vue.http.options.root = api.url + api.path.default
 
diff --git a/examples/simple-crud/routes/Crud.vue b/examples/simple-crud/routes/Crud.vue
index 1492ef8..847918a 100644
--- a/examples/simple-crud/routes/Crud.vue
+++ b/examples/simple-crud/routes/Crud.vue
@@ -1,62 +1,121 @@
 <template>
-  <div>
-    <crud :prefix="prefix" :path="path" :pageTitle="pageTitle" :fieldsInfo="fieldsInfo" :detailsTitle="$t('detailsTitle')">
-    </crud>
-    <alert-box></alert-box>
-  </div>
-</template>
-
-<script>
-  import Crud from '@/utils/crud/components/Crud.vue'
-  import AlertBox from "@/utils/app/components/AlertBox.vue";
-
-  export default {
-    data() {
-      return {
-        prefix: 'demo',
-        path: 'tasks',
-        pageTitle: 'demo.tasks',
-      }
-    },
-    computed: {
-      fieldsInfo() {
-        return [{
-            text: this.$t('fields.id'),
-            name: 'id',
-            details: false,
-          },
-          {
-            type: 'input',
-            column: 'name',
-            text: this.$t('fields.name'),
-            name: 'name',
-            multiedit: false
-          },
-          {
-            type: 'input',
-            column: 'description',
-            text: this.$t('fields.description'),
-            name: 'description',
-            required: false
-          },
-        ]
+    <div style="margin:20px;">
+      <h1 style="text-align:center">CRUD confguration</h1>
+      <v-layout row wrap>
+        <v-flex xs12 md6 lg3 px-5>
+          <v-text-field label="detailsTitle" v-model="detailsTitle"></v-text-field>
+          <v-select label="deleteMode" :items="['none', 'soft', 'hard', 'both', 'filter']" v-model="deleteMode"></v-select>
+          <v-switch color="green" label="refreshButton" v-model="refreshButton"></v-switch>
+        </v-flex>
+  
+        <v-flex xs12 md6 lg3 px-5>
+          <v-switch color="green" label="exportButton" v-model="exportButton"></v-switch>
+          <v-switch color="green" label="fieldFilters" v-model="fieldFilters"></v-switch>
+          <v-switch color="green" label="mainFilter" v-model="mainFilter"></v-switch>
+        </v-flex>
+  
+        <v-flex xs12 md6 lg3 px-5>
+          <v-switch color="green" label="createMode" v-model="createMode"></v-switch>
+          <v-switch color="green" label="editMode" v-model="editMode"></v-switch>
+          <v-switch color="green" label="editButton" v-model="editButton"></v-switch>
+        </v-flex>
+  
+        <v-flex xs12 md6 lg3 px-5>
+          <v-switch color="green" label="selectManyMode" v-model="selectManyMode"></v-switch>
+          <v-switch color="green" label="updateManyMode" v-model="updateManyMode"></v-switch>
+          <v-switch color="green" label="removeManyMode" v-model="removeManyMode"></v-switch>
+        </v-flex>
+      </v-layout>
+      <h1 style="text-align:center">CRUD</h1>
+      <crud
+        :prefix="prefix"
+        :path="path"
+        :pageTitle="pageTitle"
+        :fieldsInfo="fieldsInfo"
+        :detailsTitle="detailsTitle"
+        :deleteMode="deleteMode"
+        :refreshButton="refreshButton"
+        :exportButton="exportButton"
+        :fieldFilters="fieldFilters"
+        :mainFilter="mainFilter"
+        :createMode="createMode"
+        :editMode="editMode"
+        :editButton="editButton"
+        :selectManyMode="selectManyMode"
+        :updateManyMode="updateManyMode"
+        :removeManyMode="removeManyMode"
+      >
+      </crud>
+      <alert-box></alert-box>
+    </div>
+  </template>
+  
+  <script>
+    import Crud from '@/utils/crud/components/Crud.vue'
+    import AlertBox from "@/utils/app/components/AlertBox.vue";
+  
+    export default {
+      data() {
+        return {
+          prefix: 'demo',
+          path: 'tasks',
+          pageTitle: 'demo.tasks',
+          detailsTitle: '',
+          deleteMode: 'soft',
+          refreshButton: true,
+          exportButton: true,
+          fieldFilters: true,
+          mainFilter: true,
+          createMode: true,
+          editMode: true,
+          editButton: true,
+          selectManyMode: true,
+          updateManyMode: true,
+          removeManyMode: true,
+        }
+      },
+      created() {
+        this.detailsTitle = this.$t('detailsTitle')
+      },
+      computed: {
+        fieldsInfo() {
+          return [{
+              text: this.$t('fields.id'),
+              name: 'id',
+              details: false,
+            },
+            {
+              type: 'input',
+              column: 'name',
+              text: this.$t('fields.name'),
+              name: 'name',
+              multiedit: false
+            },
+            {
+              type: 'input',
+              column: 'description',
+              text: this.$t('fields.description'),
+              name: 'description',
+              required: false
+            },
+          ]
+        },
       },
-    },
-    components: {
-      Crud,
-      AlertBox,
-    },
-    i18n: {
-      messages: {
-        en: {
-          detailsTitle: 'Task',
-          fields: {
-            id: 'Id',
-            name: 'Name',
-            description: 'Description'
+      components: {
+        Crud,
+        AlertBox,
+      },
+      i18n: {
+        messages: {
+          en: {
+            detailsTitle: 'Task',
+            fields: {
+              id: 'Id',
+              name: 'Name',
+              description: 'Description'
+            }
           }
         }
-      }
-    },
-  }
-</script>
\ No newline at end of file
+      },
+    }
+  </script>
\ No newline at end of file
diff --git a/src/utils/crud/components/Crud.vue b/src/utils/crud/components/Crud.vue
index 8e609a0..0b9dddc 100644
--- a/src/utils/crud/components/Crud.vue
+++ b/src/utils/crud/components/Crud.vue
@@ -11,8 +11,15 @@
         :tableFields="tableFields"
         :primaryKey="primaryKey"
         :activeColumnName="activeColumnName"
-        :creator="creator"
-        :editor="editor"
+        :createMode="createMode"
+        :editMode="editMode"
+        :mainFilter="mainFilter"
+        :fieldFilters="fieldFilters"
+        :refreshButton="refreshButton"
+        :exportButton="exportButton"
+        :selectManyMode="selectManyMode"
+        :updateManyMode="updateManyMode"
+        :removeManyMode="removeManyMode"
       ></component>
       <item-details :title="detailsTitle" :detailsFields="detailsFields"></item-details>
       <item-elements></item-elements>
@@ -99,11 +106,39 @@ export default {
       },
       default: 'ClientSide'
     },
-    creator: {
+    createMode: {
       type: Boolean,
       default: true
     },
-    editor: {
+    editMode: {
+      type: Boolean,
+      default: true
+    },
+    mainFilter: {
+      type: Boolean,
+      default: true
+    },
+    fieldFilters: {
+      type: Boolean,
+      default: true
+    },
+    exportButton: {
+      type: Boolean,
+      default: true
+    },
+    refreshButton: {
+      type: Boolean,
+      default: true
+    },
+    selectManyMode: {
+      type: Boolean,
+      default: true
+    },
+    updateManyMode: {
+      type: Boolean,
+      default: true
+    },
+    removeManyMode: {
       type: Boolean,
       default: true
     },
diff --git a/src/utils/crud/components/DataTableClientSide.vue b/src/utils/crud/components/DataTableClientSide.vue
index ede4585..ea0f429 100644
--- a/src/utils/crud/components/DataTableClientSide.vue
+++ b/src/utils/crud/components/DataTableClientSide.vue
@@ -2,6 +2,14 @@
   <v-card>
     <data-table-controls
       :deleteMode="deleteMode"
+      :createMode="createMode"
+      :editMode="editMode"
+      :mainFilter="mainFilter"
+      :fieldFilters="fieldFilters"
+      :refreshButton="refreshButton"
+      :selectManyMode="selectManyMode"
+      :updateManyMode="updateManyMode"
+      :removeManyMode="removeManyMode"
       @create="create"
       @editSelected="editSelected"
       @suspendSelected="suspendSelected"
@@ -9,12 +17,10 @@
       @destroySelected="destroySelected"
       @refreshTable="refreshTable"
       @clearFilters="clearFilters"
-      :creator="creator"
-      :editor="editor"
     >
       <template slot="center">
         <!-- Search by fields -->
-        <v-menu offset-y :close-on-content-click="false" style="margin-right:15px;margin-left:15px;">
+        <v-menu offset-y :close-on-content-click="false" style="margin-right:15px;margin-left:15px;" v-if="fieldFilters">
           <v-btn small fab dark slot="activator" class="primary">
             <v-icon>filter_list</v-icon>
           </v-btn>
@@ -40,7 +46,7 @@
         </v-menu>
 
         <!-- Search in table -->
-        <span  style="margin-right:15px;margin-left:15px;display:inline-block;width:250px;">
+        <span  style="margin-right:15px;margin-left:15px;display:inline-block;width:250px;" v-if="mainFilter">
           <v-text-field
             append-icon="search"
             :label="$t('global.datatable.search')"
@@ -68,7 +74,7 @@
         </template>
       </template>
       <template slot="right">
-        <v-tooltip left>
+        <v-tooltip left v-if="exportButton">
           <v-btn class="white--text" fab small color="green darken-4" @click="exportToExcel()" slot="activator" :loading="excelLoading">
             <v-icon>save_alt</v-icon>
           </v-btn>
@@ -82,7 +88,7 @@
       :disable-initial-sort="true"
       :must-sort="true"
       v-model="selected"
-      select-all="black"
+      :select-all="selectManyMode ? 'black' : false"
       :rows-per-page-items="[20, 50, { text: $t('global.datatable.all'), value: -1 }]"
       :pagination.sync="pagination"
       light
@@ -101,7 +107,8 @@
           :deleteMode='deleteMode'
           :itemElements="itemElements"
           :columnTextModes="columnTextModes"
-          :editor="editor"
+          :editMode="editMode"
+          :selectManyMode="selectManyMode"
           @edit="edit"
           @custom="custom"
           @suspend="suspend"
diff --git a/src/utils/crud/components/DataTableControls.vue b/src/utils/crud/components/DataTableControls.vue
index b4a8327..6d45f16 100644
--- a/src/utils/crud/components/DataTableControls.vue
+++ b/src/utils/crud/components/DataTableControls.vue
@@ -1,23 +1,24 @@
 <template>
   <v-card-title class="card-title table-controls">
     <v-layout row wrap>
+
       <v-flex xs12 lg3 text-xs-center>
         <!-- Dialog for creating item -->
-        <v-tooltip top v-if="creator">
+        <v-tooltip top v-if="createMode">
           <v-btn fab dark color="green" @click="create()" slot="activator">
             <v-icon>add</v-icon>
           </v-btn>
           <span>{{ $t('global.datatable.add') }}</span>
         </v-tooltip>
         <!-- Multiple edit -->
-        <v-tooltip top v-if="editor">
+        <v-tooltip top v-if="editMode && selectManyMode && updateManyMode">
           <v-btn fab small dark color="orange" @click="editSelected()" slot="activator">
             <v-icon>edit</v-icon>
           </v-btn>
           <span>{{ $t('global.datatable.buttons.editSelected') }}</span>
         </v-tooltip>
         <!-- suspend/restore record (if soft deletes are enabled) -->
-        <template v-if="['soft', 'both'].includes(deleteMode)">
+        <template v-if="['soft', 'both'].includes(deleteMode) && selectManyMode && updateManyMode">
           <v-tooltip top>
             <v-btn class="white--text" fab small color="red" @click="suspendSelected()" slot="activator">
               <v-icon>undo</v-icon>
@@ -32,7 +33,7 @@
           </v-tooltip>
         </template>
         <!-- hard delete -->
-        <v-tooltip top v-if="['hard', 'both'].includes(deleteMode)">
+        <v-tooltip top v-if="['hard', 'both'].includes(deleteMode) && selectManyMode && removeManyMode">
           <v-btn class="white--text" fab small color="red" @click="destroySelected()" slot="activator">
             <v-icon>delete</v-icon>
           </v-btn>
@@ -40,12 +41,14 @@
         </v-tooltip>
         <slot name="left"></slot>
       </v-flex>
+
       <v-flex xs12 lg6 text-xs-center>
         <slot name="center"></slot>
       </v-flex>
+
       <v-flex xs12 lg3 text-xs-center>
         <!-- Refresh table -->
-        <v-tooltip top>
+        <v-tooltip top v-if="refreshButton">
           <v-btn 
             class="white--text"
             fab
@@ -59,7 +62,7 @@
           <span>{{ $t('global.datatable.buttons.refreshTable') }}</span>
         </v-tooltip>
         <!-- Clear filters -->
-        <v-tooltip top>
+        <v-tooltip top v-if="mainFilter || fieldFilters">
           <v-btn 
             class="white--text"
             fab
@@ -74,6 +77,7 @@
         </v-tooltip>
         <slot name="right"></slot>
       </v-flex>
+
     </v-layout>
   </v-card-title>
         
@@ -83,8 +87,14 @@
 export default {
   props: [
     'deleteMode',
-    'creator',
-    'editor'
+    'createMode',
+    'editMode',
+    'mainFilter',
+    'fieldFilters',
+    'refreshButton',
+    'selectManyMode',
+    'updateManyMode',
+    'removeManyMode',
   ],
   methods: {
     create() {this.$emit('create')},
diff --git a/src/utils/crud/components/DataTableRow.vue b/src/utils/crud/components/DataTableRow.vue
index 004458b..1a4d366 100644
--- a/src/utils/crud/components/DataTableRow.vue
+++ b/src/utils/crud/components/DataTableRow.vue
@@ -1,6 +1,6 @@
 <template>
   <tr @dblclick="rowDblclickAction(props.item, props.index)" :class="[activityClass(props.item.meta.active), currentClass(props.item.meta.id)]">
-    <td>
+    <td v-if="selectManyMode">
       <v-checkbox
         hide-details
         v-model="props.selected"
@@ -10,7 +10,7 @@
     <!-- action buttons -->
     <td class="cell-nowrap">
       <!-- edit record -->
-      <v-tooltip top v-if="editButton && editor">
+      <v-tooltip top v-if="editButton && editMode">
         <v-btn fab small class="xs white--text" color="orange" @click="edit(props.item.meta.id, props.index)" slot="activator">
           <v-icon>edit</v-icon>
         </v-btn>
@@ -80,7 +80,8 @@ export default {
     'deleteMode',
     'itemElements',
     "columnTextModes",
-    "editor"
+    "editMode",
+    'selectManyMode'
   ],
   filters: {
     cropped(field) {
@@ -114,10 +115,7 @@ export default {
       return itemId == currentId ? 'current-row' : ''
     },
     rowDblclickAction(item, index) {
-      if(this.editButton){
-        this.edit(item.meta.id, index)
-      }
-      else {
+      if(this.editMode){
         let goToItemButton = false
         for(let button of this.customButtons) {
           if (button.name == 'goToItem') {
@@ -128,6 +126,9 @@ export default {
         if(goToItemButton){
           this.custom('goToItem', item, index)
         }
+        else {
+          this.edit(item.meta.id, index)
+        }
       }
     },
     edit(id, index) {this.$emit('edit', id, index)},
diff --git a/src/utils/crud/components/DataTableServerSide.vue b/src/utils/crud/components/DataTableServerSide.vue
index c363f67..ffbe035 100644
--- a/src/utils/crud/components/DataTableServerSide.vue
+++ b/src/utils/crud/components/DataTableServerSide.vue
@@ -2,6 +2,14 @@
   <v-card>
     <data-table-controls
       :deleteMode="deleteMode"
+      :createMode="createMode"
+      :editMode="editMode"
+      :mainFilter="mainFilter"
+      :fieldFilters="fieldFilters"
+      :refreshButton="refreshButton"
+      :selectManyMode="selectManyMode"
+      :updateManyMode="updateManyMode"
+      :removeManyMode="removeManyMode"
       @create="create"
       @editSelected="editSelected"
       @suspendSelected="suspendSelected"
@@ -9,12 +17,10 @@
       @destroySelected="destroySelected"
       @refreshTable="refreshTable"
       @clearFilters="clearFilters"
-      :creator="creator"
-      :editor="editor"
     >
       <template slot="center">
         <!-- Search by fields -->
-        <v-menu offset-y :close-on-content-click="false" style="margin-right:15px;margin-left:15px;">
+        <v-menu offset-y :close-on-content-click="false" style="margin-right:15px;margin-left:15px;" v-if="fieldFilters">
           <v-btn small fab dark slot="activator" class="primary">
             <v-icon>filter_list</v-icon>
           </v-btn>
@@ -35,7 +41,7 @@
         </v-menu>
 
         <!-- Search in table -->
-        <span style="margin-right:15px;margin-left:15px;display:inline-block;width:250px;">
+        <span style="margin-right:15px;margin-left:15px;display:inline-block;width:250px;" v-if="mainFilter">
           <v-text-field append-icon="search" :label="$t('global.datatable.search')" single-line hide-details v-model="search" min-width="200" @input="searchItems(true)"></v-text-field>
         </span>
 
@@ -47,7 +53,7 @@
         </template>
       </template>
       <template slot="right">
-        <v-tooltip left>
+        <v-tooltip left v-if="exportButton">
           <v-btn class="white--text" fab small color="green darken-4" @click="exportToExcel()" slot="activator" :loading="excelLoading">
             <v-icon>save_alt</v-icon>
           </v-btn>
@@ -62,7 +68,7 @@
       :disable-initial-sort="true"
       :must-sort="true"
       v-model="selected"
-      select-all="black"
+      :select-all="selectManyMode ? 'black' : false"
       :rows-per-page-items="[20, 50, 100]"
       :pagination.sync="pagination"
       light
@@ -82,7 +88,8 @@
           :deleteMode='deleteMode'
           :itemElements="itemElements"
           :columnTextModes="columnTextModes"
-          :editor="editor"
+          :editMode="editMode"
+          :selectManyMode="selectManyMode"
           @edit="edit"
           @custom="custom"
           @suspend="suspend"
diff --git a/src/utils/crud/mixins/datatable-main.js b/src/utils/crud/mixins/datatable-main.js
index 5270383..15be1aa 100644
--- a/src/utils/crud/mixins/datatable-main.js
+++ b/src/utils/crud/mixins/datatable-main.js
@@ -21,8 +21,15 @@ export default {
     "meta",
     "primaryKey",
     "activeColumnName",
-    "creator",
-    "editor"
+    "createMode",
+    "editMode",
+    'mainFilter',
+    'fieldFilters',
+    'exportButton',
+    'refreshButton',
+    'selectManyMode',
+    'updateManyMode',
+    'removeManyMode',
   ],
   data() {
     return {