improved data search

src/components/Endpoint.vue

@@ -54,7 +54,8 @@
                 <b-row v-if="endpoint.key === '/game/box/advanced'">
                     <b-col />
                     <b-col>
-                        <b-form-select v-model="boxSelected" :options="boxOptions" @change="updateBoxSelected"></b-form-select>
+                        <b-form-select v-model="boxSelected" :options="boxOptions" @change="updateBoxSelected">
+                        </b-form-select>
                     </b-col>
                     <b-col />
                 </b-row>
@@ -328,7 +329,8 @@
                             });
                         } else {
                             flattened = data.players.usage.map(p => {
-                                let ppa = data.players.ppa.find(s => p.player == s.player && p.team == s.team && p.position == s.position);
+                                let ppa = data.players.ppa.find(s => p.player == s.player && p.team == s.team &&
+                                    p.position == s.position);
                                 return {
                                     player: p.player,
                                     team: p.team,
@@ -399,6 +401,25 @@
                     });
                 }
             }
+        },
+        watch: {
+            endpoint: function (to, from) {
+                if (to.key != from.key) {
+                    this.queryParams = [];
+                    this.results = [];
+                    this.items = [];
+                    if (to && to.path && to.path.get && to.path.get
+                        .parameters) {
+                        for (let parameter of to.path.get.parameters) {
+                            let value = parameter.default ? parameter.default : null;
+                            this.queryParams.push({
+                                parameter,
+                                value
+                            });
+                        }
+                    }
+                }
+            }
         }
     }
 

src/components/Navigation.vue

@@ -12,7 +12,7 @@
                         <router-link to="/" class='nav-link'>Home</router-link>
                     </b-nav-item>
                     <b-nav-item>
-                        <router-link to='/data' class='nav-link'>Data</router-link>
+                        <router-link to='/exporter' class='nav-link'>Data</router-link>
                     </b-nav-item>
                     <b-nav-item>
                         <router-link to='/boxscore' class='nav-link'>Box Scores</router-link>

src/router.js

@@ -17,6 +17,7 @@ import MeanPassingPPA from './views/MeanPassingPPA.vue';
 import PPAUsage from './views/PPAUsage.vue';
 import SeasonMetrics from './views/SeasonMetrics.vue';
 import BoxScore from './views/BoxScore.vue';
+import ExportPage from './views/ExportPage.vue';
 
 Vue.use(Router)
 
@@ -38,6 +39,12 @@ const router = new Router({
             component: Category,
             props: true
         },
+        {
+            path: '/exporter/:path([\\w\\/]+)?',
+            name: 'exporter',
+            component: ExportPage,
+            props: true
+        },
         {
             path: '/contribute',
             name: 'contribute',

src/views/ExportPage.vue

@@ -0,0 +1,82 @@
+<template>
+    <b-container id='ExportContainer' class='page-container pt-3'>
+            <h3>Data Search</h3>
+            <p class='muted'>What data are you trying to find?</p>
+            <autocomplete :items='endpoints' displayProp='summary' valueProp='key' @selection='selectPath' />
+            <hr class='my-4'>
+        <endpoint :endpoint='endpoint' :teams='teams' :conferences='conferences' :play-types='playTypes' v-if='endpoint'></endpoint>
+    </b-container>
+</template>
+
+<script>
+    import Endpoint from '@/components/Endpoint.vue';
+    import Autocomplete from '@/components/Autocomplete.vue';
+
+    export default {
+        components: {
+            Endpoint,
+            Autocomplete
+        },
+        data() {
+            return {
+                endpoints: [],
+                endpoint: null,
+                teams: [],
+                conferences: [],
+                playTypes: [],
+                paths: []
+            }
+        },
+        methods: {
+            setData(data) {
+                this.paths = Object.keys(data.paths);
+                let endpoints = this.paths
+                    .map(p => {
+                        return {
+                            path: data.paths[p],
+                            summary: data.paths[p].get.summary,
+                            key: p
+                        }
+                    });
+                this.endpoints = endpoints;
+            },
+            updatePath(path) {
+                this.endpoint = this.endpoints.find(e => e.key === `/${path}`);
+            },
+            selectPath(path) {
+                this.$router.push({ path: `/exporter${path}`});
+            },
+            getDocs() {
+                return this.$axios.get('/api-docs.json');
+            },
+            getTeams() {
+                return this.$axios.get('/teams');
+            },
+            getConferences() {
+                return this.$axios.get('/conferences');
+            },
+            getPlayTypes() {
+                return this.$axios.get('/play/types');
+            }
+        },
+        created() {
+            this.getDocs().then(result => {
+                this.setData(result.data);
+                this.updatePath(this.$route.params.path);
+            });
+        },
+        watch: {
+            '$route': function (to, from) {
+                if (to.params.path !== from.params.path) {
+                    this.updatePath(to.params.path);
+                }
+            }
+        }
+    }
+</script>
+
+<style lang='scss'>
+    #ExportContainer {
+        background: rgba(255, 255, 255, .9);
+    }
+</style>