add: header labels and filter

frontend/src/components/OverviewScreen.vue

@@ -4,12 +4,8 @@
             <map-component @mapClick="$emit('mapClick', $event)" />
         </va-card>
         <va-card class="content-container">
-            <va-data-table
+            <va-data-table :items="items" :columns="columns" :hoverable="true" :clickable="true"
-                :items="items"
+                @row:click="(e) => $router.push(`/items/${e.item.id}`)" />
-                :hoverable="true"
-                :clickable="true"
-                @row:click="(e) => $router.push(`/items/${e.item.id}`)"
-            />
         </va-card>
     </div>
 </template>
@@ -24,15 +20,14 @@ export default {
         items: {
             type: Array,
             required: true,
-        }
+        },
+        columns: {
+            type: Array,
+            required: true,
+        },
     },
     data() {
-        return {
+        return {}
-            // columns: [
-            //     { key: 'gis_category', label: 'cat4gis', sortable: true },
-            //     { key: 'category', sortable: true },
-            // ],
-        }
     },
     methods: {},
 

frontend/src/views/FrontView.vue

@@ -6,7 +6,7 @@
         </sidebar>
         <div class="main-view">
             <va-input v-model="searchQuery"></va-input>
-            <overview-screen :items="filteredAndSearchedItems" @mapClick="applyFilters" />
+            <overview-screen :items="filteredAndSearchedItems" :columns="filteredColumns" @mapClick="applyFilters" />
         </div>
     </div>
 </template>
@@ -23,6 +23,7 @@ export default {
     data() {
         return {
             items: [],
+            columns: [],
             currentFilters: {},
             searchQuery: '',
             searchColumns: [
@@ -37,10 +38,19 @@ export default {
                 "datalist",
                 "resolution",
             ],
+            showColumns: [
+                "basin",
+                "category",
+                "description",
+                "deposit",
+                "well",
+                "stratum",
+                "org",
+            ],
         }
     },
     methods: {
-        fetchAllItems() {
+        async fetchAllItems() {
             const baseURL = "http://localhost:8080/api/v1";
 
             fetch(`${baseURL}/items/?limit=10000`)
@@ -49,6 +59,16 @@ export default {
                 .catch((e) => console.log(e))
         },
 
+        async fetchColumns(){
+            const baseURL = "http://localhost:8080/api/v1";
+
+            fetch(`${baseURL}/headers/`)
+                .then(res => res.json())
+                .then(data => this.columns = data)
+                .catch((e) => console.log(e))
+
+        },
+
         applyFilters(filter) {
             for (let key in filter) {
                 if (Array.isArray(filter[key]) && filter[key].length) {
@@ -60,7 +80,8 @@ export default {
         },
     },
     mounted () {
-        this.fetchAllItems()
+        this.fetchAllItems();
+        this.fetchColumns();
     },
     computed: {
         filteredItems() {
@@ -96,6 +117,18 @@ export default {
                 return result;
             })
         },
+
+        filteredColumns(){
+            return this.columns
+                .filter(header => this.showColumns.includes(header.database))
+                .map(header => {
+                    return {
+                        key: header.database,
+                        label: header.spreadsheet,
+                        sortable: true,
+                    }
+                })
+        },
     },
 }