Merge pull request #3201 from Countly/feat/export_file_name_datatable

[SER-78]custom file name for export functionality in the datatable

Author: kanwarujjaval

frontend/express/public/javascripts/countly/vue/components/datatable.js

@@ -1,4 +1,4 @@
-/* global jQuery, Vue, _, CV, countlyCommon, countlyGlobal, CountlyHelpers, moment, countlyTaskManager, _merge */
+/* global jQuery, Vue, _, CV, countlyCommon, countlyGlobal, CountlyHelpers, countlyTaskManager, _merge */
 
 (function(countlyVue, $) {
 
@@ -588,6 +588,11 @@
                 type: Boolean,
                 default: true,
                 required: false
+            },
+            customExportFileName: {
+                type: Boolean,
+                default: true,
+                required: false
             }
         },
         data: function() {
@@ -599,7 +604,8 @@
                     {'name': '.JSON', value: 'json'},
                     {'name': '.XLSX', value: 'xlsx'}
                 ],
-                searchQuery: ''
+                searchQuery: '',
+                exportFileName: this.getDefaultFileName(),
             };
         },
         methods: {
@@ -608,20 +614,20 @@
                     type: this.selectedExportType
                 });
             },
-            getDefaultFileName: function(params) {
-                var name = "countly";
-                if (params.title) {
-                    name = params.title.replace(/[\r\n]+/g, "");
-                }
-                if (params.timeDependent) {
-                    //include export range
-                    name += "_for_" + countlyCommon.getDateRange();
+            getDefaultFileName: function() {
+                var siteName = countlyGlobal.countlyTitle;
+                var sectionName = "";
+                var selectedMenuItem = this.$store.getters["countlySidebar/getSelectedMenuItem"];
+                if (selectedMenuItem && selectedMenuItem.item && selectedMenuItem.item.title) {
+                    sectionName = this.i18n(selectedMenuItem.item.title);
                 }
-                else {
-                    //include export date
-                    name += "_on_" + moment().format("DD-MMM-YYYY");
+                var appName = "";
+                if (this.$store.getters["countlyCommon/getActiveApp"]) {
+                    appName = this.$store.getters["countlyCommon/getActiveApp"].name;
                 }
-                return (name.charAt(0).toUpperCase() + name.slice(1).toLowerCase());
+                var date = countlyCommon.getDateRange();
+
+                return siteName + " " + appName + " " + sectionName + " " + date;
             },
             getLocalExportContent: function() {
                 if (this.exportFormat) {
@@ -630,7 +636,6 @@
                 return this.rows;
             },
             initiateExport: function(params) {
-
                 var formData = null,
                     url = null;
 
@@ -666,7 +671,7 @@
                         type: params.type,
                         path: path,
                         prop: "aaData",
-                        filename: this.getDefaultFileName(params),
+                        filename: this.exportFileName,
                         api_key: countlyGlobal.member.api_key
                     };
                 }
@@ -675,10 +680,13 @@
                     formData = {
                         type: params.type,
                         data: JSON.stringify(this.getLocalExportContent()),
-                        filename: this.getDefaultFileName(params),
+                        filename: this.exportFileName,
                         api_key: countlyGlobal.member.api_key
                     };
                 }
+                if (!formData.filename) {
+                    formData.filename = this.exportFileName;
+                }
 
                 if (formData.url === "/o/export/requestQuery") {
                     if (Array.isArray(formData.prop)) {
@@ -714,7 +722,6 @@
                 }
                 else {
                     var form = $('<form method="POST" action="' + url + '">');
-
                     $.each(formData, function(k, v) {
                         if (CountlyHelpers.isJSON(v)) {
                             form.append($('<textarea style="visibility:hidden;position:absolute;display:none;" name="' + k + '">' + v + '</textarea>'));

frontend/express/public/javascripts/countly/vue/templates/datatable.html

@@ -34,11 +34,11 @@
                         <template>
                             <div class="bu-mx-4 bu-mt-4">
                                 <p class="bu-mb-4 color-cool-gray-100">{{i18n('export.export-as')}}</p>
-                                <el-radio-group
-                                    class="bu-mb-5"
-                                    v-model="selectedExportType">
-                                    <el-radio-button v-for="exportType in availableExportTypes" :key="exportType.value" :label="exportType.value" style="width: 99px; display: inline-grid;">{{exportType.name}}</el-radio-button>
-                                </el-radio-group>
+                                <div  class="cly-vue-eldatatable__export--radio-button bu-mb-5">
+                                    <el-radio-group v-model="selectedExportType">
+                                        <el-radio-button v-for="exportType in availableExportTypes" :key="exportType.value" :label="exportType.value">{{exportType.name}}</el-radio-button>
+                                    </el-radio-group>
+                                </div>
                             </div>
                             <div v-if="exportColumnSelection" class="cly-vue-eldatatable__export--extended">
                                 <div class="bu-mx-4 bu-mb-3">
@@ -74,8 +74,14 @@
                                     :options.sync="getMatching(availableDynamicCols)">
                                     </cly-checklistbox>
                                 </div>
-                                <slot name="export-config"></slot>
                             </div>
+                            <div v-if="customExportFileName" :class="{'cly-vue-eldatatable__export--fileExport': exportColumnSelection}">
+                                <div class="bu-my-4 bu-mx-4">
+                                    <p class="bu-mb-1 text-medium"> {{i18n('export.file-name')}} </p>
+                                    <el-input v-model="exportFileName"></el-input>
+                                </div>
+                            </div>
+                            <slot name="export-config"></slot>
                             <div class="bu-mx-4 bu-mb-4">
                                 <el-button size="medium" @click="onExportClick" type="success" style="width: 100%">{{i18n('export.export')}}</el-button>
                             </div>

frontend/express/public/localization/dashboard/dashboard.properties

@@ -717,6 +717,7 @@ export.export-started = Export file is being generated. When ready you will see
 export.export-failed = Error upon attempting to export table data.
 export.export-finished = Export completed.
 export.export-finished-click = Click to download exported file.
+export.file-name = File name
 
 #management-applications
 management-applications.title = Application Management

frontend/express/public/stylesheets/styles/blocks/_table.scss

@@ -43,6 +43,15 @@
                 opacity: 0.12;
             }
         }
+		&--fileExport {
+			border-top: 1px solid #E2E4E8;
+		}
+		&--radio-button {
+			.el-radio-button {
+				width: 99px;
+				display: inline-grid;
+			}
+		}
         &--search {
             input[type=text] {
                 background-color: #F6F6F6;