case for button download csv

plugins/workflow_report/app/views/workflow_report/_table_workflow_report.html.slim

-- if result[0].size > 0
+- if result.present?
   table[border="1"]
   table[border="1"]
     tr.header_table--visible
     tr.header_table--visible
       th.green[colspan="8"] Task information
       th.green[colspan="8"] Task information
@@ -7,7 +7,7 @@
       th.gray[colspan="7"] Actual time detail
       th.gray[colspan="7"] Actual time detail
       th.yellow[colspan="4"] Bugs
       th.yellow[colspan="4"] Bugs
       th.pink[colspan="8"] Github
       th.pink[colspan="8"] Github
-    tr.header_table--visible
+    tr.header_table--visible.none_colspan
       - thead.each_with_index do |head, index|
       - thead.each_with_index do |head, index|
         - if (0..7).include?(index)
         - if (0..7).include?(index)
           th.green = head
           th.green = head
@@ -31,4 +31,4 @@
           - else
           - else
             td = result[i][index]
             td = result[i][index]
 - else
 - else
-  h1 There is no data for the 'workflow report' table.
+  h1.text-center There is no data for the 'workflow report' table.
\ No newline at end of file

plugins/workflow_report/app/views/workflow_report/index.html.slim

@@ -9,5 +9,5 @@ fieldset.box.tabular
     = select_tag :year  ,options_for_select((Time.now.year - 5)..(Time.now.year + 1), Time.now.year),{ prompt: "Select year" }
     = select_tag :year  ,options_for_select((Time.now.year - 5)..(Time.now.year + 1), Time.now.year),{ prompt: "Select year" }
     = select_tag :team, options_for_select(@team_options), { prompt: "Select team" }
     = select_tag :team, options_for_select(@team_options), { prompt: "Select team" }
     = submit_tag 'export', id: 'export'
     = submit_tag 'export', id: 'export'
-button.export-button Download .CSV
+button.export-button.d-none Download .CSV
 #data_workflow
 #data_workflow

plugins/workflow_report/assets/javascripts/application.js

@@ -14,6 +14,11 @@ window.addEventListener('load', function () {
                 data: {month: month, year: year, team: team},
                 data: {month: month, year: year, team: team},
                 success: function (response) {
                 success: function (response) {
                     $('#data_workflow').html(response)
                     $('#data_workflow').html(response)
+                    if ($('#data_workflow').has('table').length > 0 && $('button.export-button').hasClass("d-none")) {
+                        $('button.export-button').removeClass('d-none')
+                    } else {
+                        $('button.export-button').addClass('d-none')
+                    }
                 },
                 },
                 error: function (error) {
                 error: function (error) {
                     console.log(error)
                     console.log(error)
@@ -24,33 +29,35 @@ window.addEventListener('load', function () {
     })
     })
 
 
     const download = function (data) {
     const download = function (data) {
-        const blob = new Blob([data], {type: 'text/csv'});
+        const blob = new Blob([data], {type: 'text/csv'})
         const url = window.URL.createObjectURL(blob)
         const url = window.URL.createObjectURL(blob)
-        const a = document.createElement('a')
-        a.setAttribute('href', url)
-        a.setAttribute('download', "download.csv");
-        a.click()
+        const aTag = document.createElement('a')
+        const fileName = $('#year').val() + $('#month').val() + $('#team').val()
+        aTag.setAttribute('href', url)
+        aTag.setAttribute('download', `${$('#year').val()}-${$('#month').val()}-${$('#team').val()}.csv`)
+        aTag.click()
     }
     }
 
 
     $(".export-button").on("click", function () {
     $(".export-button").on("click", function () {
         exportToCSV();
         exportToCSV();
+
     });
     });
 
 
     function exportToCSV() {
     function exportToCSV() {
-        const table = $("table");
-        const rows = table.find("tr");
-        let csv = [];
+        const table = $("table")
+        const rows = table.find("tr")
+        let csv = []
 
 
         rows.each(function (index) {
         rows.each(function (index) {
-            const cols = $(this).find("td, th");
-            let rowText = [];
-            let currentColspan = 1;
+            const cols = $(this).find("td, th")
+            let rowText = []
+            let currentColspan = 1
 
 
             cols.each(function () {
             cols.each(function () {
-                const text_report = $(this).text();
+                const text_report = $(this).text()
 
 
                 if ($(this).attr("colspan")) {
                 if ($(this).attr("colspan")) {
-                    currentColspan = parseInt($(this).attr("colspan"), 10);
+                    currentColspan = parseInt($(this).attr("colspan"), 10)
                 }
                 }
 
 
                 if (currentColspan > 1) {
                 if (currentColspan > 1) {
@@ -58,14 +65,14 @@ window.addEventListener('load', function () {
                         i === 0 ? rowText.push(text_report) : rowText.push('')
                         i === 0 ? rowText.push(text_report) : rowText.push('')
                     }
                     }
                 } else {
                 } else {
-                    text_report.includes(',') ? rowText.push(`"${text_report}"`) : rowText.push(text_report);
+                    text_report.includes(',') ? rowText.push(`"${text_report}"`) : rowText.push(text_report)
                 }
                 }
-                currentColspan = Math.max(1, currentColspan - 1);
+                currentColspan = Math.max(1, currentColspan - 1)
             });
             });
-            csv.push(rowText.join(","));
+            csv.push(rowText.join(","))
         });
         });
 
 
-        const csvContent = csv.join("\n");
-        download(csvContent);
+        const csvContent = csv.join("\n")
+        download(csvContent)
     }
     }
-});
+})

plugins/workflow_report/assets/stylesheets/style.css

@@ -11,16 +11,21 @@ table {
 
 
 .header_table--visible {
 .header_table--visible {
     position: sticky;
     position: sticky;
-    top: 0;
+    top: -1px;
     z-index: 2;
     z-index: 2;
 }
 }
 
 
+.none_colspan {
+    top: 29px;
+}
+
 .sidebar_visible {
 .sidebar_visible {
     position: sticky;
     position: sticky;
     background: #dacbcb;
     background: #dacbcb;
     left: 0;
     left: 0;
     z-index: 1;
     z-index: 1;
 }
 }
+
 .green {
 .green {
     background-color: #92ce92;
     background-color: #92ce92;
 }
 }
@@ -49,6 +54,18 @@ table {
     background-color: pink;
     background-color: pink;
 }
 }
 
 
-#date_from, #date_to, #team, #export {
-    margin-right: 24px;
+#year, #month, #team, #export {
+    margin: 8px 24px 0 0;
+}
+
+button.export-button {
+    margin-bottom: 35px;
+}
+
+.d-none {
+    display: none;
+}
+
+.text-center {
+    text-align: center;
 }
 }