export to excel

szczepanmasny · szczepanmasny · commit 6781ebe45a13 · 2019-01-04T12:33:35.000+01:00
diff --git a/src/crud/components/ChildrenTable.vue b/src/crud/components/ChildrenTable.vue
@@ -56,7 +56,7 @@
           </template>
 
           <v-tooltip left>
-            <v-btn class="white--text" fab small color="green darken-4" @click="exportToExcel()" slot="activator">
+            <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>
             <span>{{ $t('global.datatable.buttons.copyToExcel') }}</span>
@@ -155,6 +155,7 @@ import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
 export default {
   mixins: [ClientSideFilteringMixin, HelperMixin],
   props: {
+    title: String,
     fieldsInfo: Array,
     deleteMode: {
       type: String,
@@ -217,12 +218,17 @@ export default {
     }
   },
   computed: {
+    ...mapState(['page']),
+    ...mapState("crud", ["prefix", "path"]),
     tableFields() {
       return this.fieldsInfo.filter(field => field.table != false && field.type != 'divider');
     },
     items() {
       return this.tableData;
     },
+    excelName() {
+      return this.$t('global.routes.' + this.page) + ' - ' + this.title
+    }
   },
   methods: {
     ...mapMutations("crud", [
diff --git a/src/crud/components/DataTableClientSide.vue b/src/crud/components/DataTableClientSide.vue
@@ -70,7 +70,7 @@
           </template>
 
           <v-tooltip left>
-            <v-btn class="white--text" fab small color="green darken-4" @click="exportToExcel()" slot="activator">
+            <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>
             <span>{{ $t('global.datatable.buttons.copyToExcel') }}</span>
diff --git a/src/crud/components/DataTableServerSide.vue b/src/crud/components/DataTableServerSide.vue
@@ -50,6 +50,13 @@
             </span>
           </template>
 
+          <v-tooltip left>
+            <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>
+            <span>{{ $t('global.datatable.buttons.copyToExcel') }}</span>
+          </v-tooltip>
+
         </v-flex>
 
       </v-layout>
@@ -97,9 +104,11 @@
 </template>
 
 <script>
+import Vue from 'vue'
 import MainMixin from "../mixins/datatable-main.js";
 import HelperMixin from "../mixins/datatable-helper.js";
 import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
+import { getItemsList } from '@/helpers/functions.js'
 
 export default {
   mixins: [MainMixin, HelperMixin],
@@ -135,7 +144,8 @@ export default {
         filterColumns: this.filterColumns,
         selectedStatuses: this.selectedStatuses,
         deleteMode: this.deleteMode,
-        activeColumnName: this.activeColumnName
+        activeColumnName: this.activeColumnName,
+        mode: 'paginate'
       };
     },
   },
@@ -187,6 +197,43 @@ export default {
         }
       }, 500)
     },
+    exportToExcel() {
+      this.excelLoading = true
+      let headers = this.cleanHeaders.map(header => header.text)
+      let params = {}
+      for(let key in this.params){
+        params[key] = this.params[key]
+      }
+      params.mode = 'all'
+      let filteredItems
+      Vue.http.post(this.prefix + '/' + this.path + '/search', params)
+        .then((response) => {
+          let items = response.body
+          filteredItems = items.map(obj => {
+            return getItemsList(obj, this.tableFields, this.meta, this.primaryKey, this.customButtons, this.activeColumnName)
+          })
+          let data = filteredItems.map(item => {
+            let row = []
+            for(let header of this.cleanHeaders){
+              row.push(item[header.value])
+            }
+            return row
+          })
+          import('@/vendor/Export2Excel').then(excel => {
+            this.excelLoading = false
+            excel.export_json_to_excel({
+              header: headers,
+              data: data,
+              filename: this.excelName,
+              autoWidth: true,
+              bookType: 'xlsx'
+            })
+          })
+        }), error => {
+          this.excelLoading = false
+          commit('alertError', error.statusText, { root: true })
+        }
+    }
   }
 };
 </script>
diff --git a/src/crud/mixins/child.js b/src/crud/mixins/child.js
@@ -7,6 +7,7 @@ import {
 
 export default {
   props: {
+    title: String,
     path: String,
     childItemName: String,
     fkName: String,
@@ -27,7 +28,8 @@ export default {
   computed: {
     ...mapState('crud', [
       'childItems',
-      'itemIdColumn'
+      'itemIdColumn',
+      'childTitle'
     ]),
     ...mapGetters('crud', [
       'item',
@@ -49,6 +51,7 @@ export default {
       'resetChild',
       'editChildDialog',
       'createChildDialog',
+      'setChildTitle'
     ]),
     ...mapActions('crud', [
       "getItemDetails",
diff --git a/src/crud/mixins/datatable-client-side-filtering.js b/src/crud/mixins/datatable-client-side-filtering.js
@@ -1,112 +1,114 @@
 
 export default {
-    created() {
-      this.filterColumns = this.tableFields.map(field => {
-        let item = {};
-        item.mode = 'like'
-        item.text = field.text;
-        item.name = field.name.toLowerCase();
-        item.column = field.column
-        item.value = ''
-        return item;
-      });
-    },
-    watch: {
-      selectedStatuses(val) {
-         this.pagination.page = 1
-      },
+  created() {
+    this.filterColumns = this.tableFields.map(field => {
+      let item = {};
+      item.mode = 'like'
+      item.text = field.text;
+      item.name = field.name.toLowerCase();
+      item.column = field.column
+      item.value = ''
+      return item;
+    });
+  },
+  watch: {
+    selectedStatuses(val) {
+       this.pagination.page = 1
     },
-    computed: {
-      filteredItems() {
-  
-        let items = ['soft', 'both'].includes(this.deleteMode)
-          ? this.items.filter(item =>
-              this.selectedStatuses.includes(parseInt(item.meta.active))
-            )
-          : this.items;
-  
-        let filterColumns = this.filterColumns
-        items = items.filter(item => {
-          let found = true;
-          for (let i = 0; i < filterColumns.length; i++) {
-            if(filterColumns[i].value != ''){
-              found = false;
-              let colName = filterColumns[i].name
-              let field = item[colName];
-              if (typeof field === "string" || field instanceof String || typeof field === "number") {
-                field = field.toString().toLowerCase();
-                switch (filterColumns[i].mode) {
-                  case 'like':
-                    if (field.includes(filterColumns[i].value)) {
-                      found = true;
-                    }
-                    break;
-                  case 'equals':
-                    if (field == filterColumns[i].value) {
-                      found = true;
-                    }
-                    break;
-                  case 'list':
-                    let tmpList = filterColumns[i].value.split(';')
-                    if (tmpList.includes(field)) {
-                      found = true;
-                    }
+  },
+  computed: {
+    filteredItems() {
+
+      let items = ['soft', 'both'].includes(this.deleteMode)
+        ? this.items.filter(item =>
+            this.selectedStatuses.includes(parseInt(item.meta.active))
+          )
+        : this.items;
+
+      let filterColumns = this.filterColumns
+      items = items.filter(item => {
+        let found = true;
+        for (let i = 0; i < filterColumns.length; i++) {
+          if(filterColumns[i].value != ''){
+            found = false;
+            let colName = filterColumns[i].name
+            let field = item[colName];
+            if (typeof field === "string" || field instanceof String || typeof field === "number") {
+              field = field.toString().toLowerCase();
+              switch (filterColumns[i].mode) {
+                case 'like':
+                  if (field.includes(filterColumns[i].value)) {
+                    found = true;
+                  }
+                  break;
+                case 'equals':
+                  if (field == filterColumns[i].value) {
+                    found = true;
+                  }
+                  break;
+                case 'list':
+                  let tmpList = filterColumns[i].value.split(';')
+                  if (tmpList.includes(field)) {
+                    found = true;
+                  }
+                  break;
+                default:
                     break;
-                  default:
-                      break;
-                }
               }
-              if (!found) break;
             }
+            if (!found) break;
           }
-          return found;
-        });
-  
-        let phrases = this.search == "" ? [] : this.search.toLowerCase().split(" ");
-        items = items.filter(item => {
-          let found = true;
-          for (let i = 0; i < phrases.length; i++) {
-            found = false;
-            for (let key in item) {
-              let field = item[key];
-              if (
-                typeof field === "string" ||
-                field instanceof String ||
-                typeof field === "number"
-              ) {
-                field = field.toString().toLowerCase();
-                if (field.includes(phrases[i])) {
-                  found = true;
-                }
+        }
+        return found;
+      });
+
+      let phrases = this.search == "" ? [] : this.search.toLowerCase().split(" ");
+      items = items.filter(item => {
+        let found = true;
+        for (let i = 0; i < phrases.length; i++) {
+          found = false;
+          for (let key in item) {
+            let field = item[key];
+            if (
+              typeof field === "string" ||
+              field instanceof String ||
+              typeof field === "number"
+            ) {
+              field = field.toString().toLowerCase();
+              if (field.includes(phrases[i])) {
+                found = true;
               }
             }
-            if (!found) break;
-          }
-          return found;
-        });
-  
-        return items;
-      }
-    },
-    methods: {
-      exportToExcel() {
-        let headers = this.cleanHeaders.map(header => header.text)
-        let data = this.filteredItems.map(item => {
-          let row = []
-          for(let header of this.cleanHeaders){
-            row.push(item[header.value])
           }
-          return row
-        })
-        import('@/vendor/Export2Excel').then(excel => {
-          excel.export_json_to_excel({
-            header: headers,
-            data: data,
-            filename: 'excel-list',
-            autoWidth: true,
-            bookType: 'xlsx'
-          })
+          if (!found) break;
+        }
+        return found;
+      });
+
+      return items;
+    }
+  },
+  methods: {
+    exportToExcel() {
+      this.excelLoading = true
+      let headers = this.cleanHeaders.map(header => header.text)
+      let data = this.filteredItems.map(item => {
+        let row = []
+        for(let header of this.cleanHeaders){
+          row.push(item[header.value])
+        }
+        return row
+      })
+      import('@/vendor/Export2Excel').then(excel => {
+        this.excelLoading = false
+        excel.export_json_to_excel({
+          header: headers,
+          data: data,
+          filename: this.excelName,
+          autoWidth: true,
+          bookType: 'xlsx'
         })
-      }
+      })
     }
-  };
+  }
+};
diff --git a/src/crud/mixins/datatable-helper.js b/src/crud/mixins/datatable-helper.js
@@ -11,6 +11,7 @@ export default {
       tmp: "",
       search: "",
       pagination: {},
+      excelLoading: false
     };
   },
   computed: {
diff --git a/src/crud/mixins/datatable-main.js b/src/crud/mixins/datatable-main.js
@@ -28,7 +28,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(["filesPath"]),
+    ...mapState(["filesPath", 'page']),
     ...mapState("crud", ["prefix", "path"]),
     ...mapGetters("crud", ["itemsList"]),
     selectedIds() {
@@ -37,6 +37,9 @@ export default {
     items() {
       return this.itemsList(this.tableFields, this.meta, this.primaryKey, this.customButtons, this.activeColumnName);
     },
+    excelName() {
+      return this.$t('global.routes.' + this.page)
+    }
   },
   methods: {
     ...mapMutations(["alertError"]),
diff --git a/src/store/modules/crud/actions.js b/src/store/modules/crud/actions.js
