From 6f579728f713424bdda4895e3d250306e059fa97 Mon Sep 17 00:00:00 2001
From: Bill Radjewski <radjewwj@gmail.com>
Date: Sat, 17 Jul 2021 14:37:03 -0400
Subject: [PATCH] dynamic export fields

---
 src/components/Endpoint.vue | 40 +++++++++++++++++++++++++++++++++++--
 src/main.js                 |  5 +++++
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/src/components/Endpoint.vue b/src/components/Endpoint.vue
index c939c36..4e75a31 100644
--- a/src/components/Endpoint.vue
+++ b/src/components/Endpoint.vue
@@ -71,13 +71,27 @@
                         </b-form-group>
                     </b-col>
                     <b-col sm="2">
-                        <download-csv :data='items' :delimiter='selected' class='btn btn-info' @click='onExport'>
+                        <download-csv :data='items' :fields='selectedFields' :delimiter='selected' class='btn btn-info' @click='onExport'>
                             Download
                         </download-csv>
                     </b-col>
                     <b-col></b-col>
                 </b-row>
-                <b-table striped responsive hover small :items="items" :current-page="currentPage" :per-page="perPage">
+                <b-row class='mb-5'>
+                    <b-col/>
+                    <b-col md='8'>
+                        <b-row>
+                            <b-col><h5>Fields</h5></b-col>
+                        </b-row>
+                        <b-row>
+                            <b-col>
+                                <b-form-checkbox-group value-field='item' text-field='name' :options='allFields' v-model='selectedFields'></b-form-checkbox-group>
+                            </b-col>
+                        </b-row>
+                    </b-col>
+                    <b-col/>
+                </b-row>
+                <b-table striped responsive hover small :items="items" :fields="displayFields" :current-page="currentPage" :per-page="perPage">
                 </b-table>
             </div>
         </div>
@@ -115,6 +129,8 @@
                 selected: ',',
                 loading: false,
                 error: false,
+                allFields: [],
+                selectedFields: [],
                 options: [{
                         value: ',',
                         text: 'Comma (,)'
@@ -130,6 +146,21 @@
                 ]
             }
         },
+        computed: {
+            displayFields() {
+                // return this.selectedFields.map(f => ({
+                //         key: f,
+                //         sortable: true
+                //     }));
+
+                return this.allFields
+                        .filter(f => this.selectedFields.includes(f.item))
+                        .map(f => ({
+                            key: f.item,
+                            sortable: true
+                        }));
+            }
+        },
         methods: {
             onSubmit(e) {
                 e.preventDefault();
@@ -161,6 +192,11 @@
                             return f;
                         });
                     this.items = flattened;
+                    this.allFields = this.items && this.items.length ? Object.keys(this.items[0]).map(k => ({
+                        item: k,
+                        name: k.replace (/^[-_]*(.)/, (_, c) => c.toUpperCase()).replace (/[-_]+(.)/g, (_, c) => ' ' + c.toUpperCase())
+                    })) : [];
+                    this.selectedFields = this.allFields.map(f => f.item);
 
                     this.currentPage = 1;
                     this.totalRows = this.items.length;
diff --git a/src/main.js b/src/main.js
index 98b426d..f06b667 100644
--- a/src/main.js
+++ b/src/main.js
@@ -19,6 +19,11 @@ Vue.filter('capitalize', function (value) {
     return value.charAt(0).toUpperCase() + value.slice(1)
   });
 
+Vue.filter('titlecase', function(value) {
+  return value.replace (/^[-_]*(.)/, (_, c) => c.toUpperCase())
+              .replace (/[-_]+(.)/g, (_, c) => ' ' + c.toUpperCase());
+})
+
 new Vue({
     router,
     render: h => h(App)