Now using proper emit/props for dataflow

YTManager/frontend/src/components/Channel_Table.vue

@@ -20,20 +20,16 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import Vue, {PropOptions} from "vue";
 import * as Dyt from "../dumbyt";
 
 // Vue class for keeping state of the videos.
 export default Vue.extend({
-    data() {
-        return {
-            Channels: Array<Dyt.Channel>()
-        }
-    },
-    
-    mounted(){
-        Dyt.search_channels("").then(v => this.Channels = v);
-    },
+    props: {
+        Channels: {
+            type: Array,
+        } as PropOptions<Dyt.Channel[]>,
+    }
 });
 </script>
 

YTManager/frontend/src/components/Search.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import Vue, {PropOptions} from "vue";
 import * as _ from "lodash";
 import * as Dyt from "../dumbyt";
 
@@ -16,16 +16,17 @@ export default Vue.extend({
     data() {
         return {
             searchbox_str: "",
-            Videos: Array<Dyt.Video>()
         }
     },
 
     // Manually attaching functions to watchers of data.
     watch: {
-        // Searchbox updater.
+        // Searchbox updater with debouncing.
         searchbox_str (s: string) {
             var v = _.debounce((s) => {
-                Dyt.search_videos(s).then(e => this.Videos = e);
+                Dyt.search_videos(s).then(videos => {
+                    this.$emit('search_complete', videos)
+                });
             }, 400)
             v(s);
         }
@@ -36,7 +37,7 @@ export default Vue.extend({
 <style scoped>
     .searchbox {
         font-size: 1.2em;
-        max-width: 70em;
+        max-width: 40em;
         margin-left: auto;
         margin-right: auto;
         margin-top: 2em;

YTManager/frontend/src/components/Video_Grid.vue

@@ -1,6 +1,5 @@
 <template>
     <div>
-        <input id="searchbox0" class="searchbox" type="text" v-model="searchbox_str" placeholder="Search String goes here, for example: >5m,c++"/>
         <div class="grid-x large-up-6">
             <div v-for="video in Videos" :key="video.ID" class="cell">
                 <div class="card ytcard">
@@ -16,32 +15,16 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
-import * as _ from "lodash";
+import Vue, {PropOptions} from "vue";
 import * as Dyt from "../dumbyt";
 
 // Vue class for keeping state of the videos.
 export default Vue.extend({
-    data() {
-        return {
-            searchbox_str: "",
-            Videos: Array<Dyt.Video>()
-        }
-    },
-
-    // Manually attaching functions to watchers of data.
-    watch: {
-        // Searchbox updater.
-        searchbox_str (s: string) {
-            var v = _.debounce((s) => {
-                Dyt.search_videos(s).then(e => this.Videos = e);
-            })
-            v(s);
-        }
-    },
-
-    // Ugh, vue doesn't have async support for computed, wow ...
-    mounted() { Dyt.search_videos("").then(e => this.Videos = e ); }
+    props: {
+        Videos: {
+            type: Array,
+        } as PropOptions<Dyt.Video[]>,
+    }
 });
 </script>
 
@@ -66,12 +49,4 @@ export default Vue.extend({
         font-size: 10px;
         text-align: right;
     }
-
-    .searchbox {
-        font-size: 1.2em;
-        max-width: 70em;
-        margin-left: auto;
-        margin-right: auto;
-        margin-top: 2em;
-    }
 </style>

YTManager/frontend/src/components/Video_Table.vue

@@ -22,20 +22,16 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import Vue, {PropOptions} from "vue";
 import * as Dyt from "../dumbyt";
 
 // Vue class for keeping state of the videos.
 export default Vue.extend({
-    data() {
-        return {
-            Videos: Array<Dyt.Video>()
-        }
-    },
-
-    mounted (){
-        Dyt.search_videos("").then(v => this.Videos = v);
-    },
+    props: {
+        Videos: {
+            type: Array,
+        } as PropOptions<Dyt.Video[]>,
+    }
 });
 </script>
 

YTManager/frontend/src/dumbyt.ts

@@ -1,7 +1,7 @@
 import Axios from "axios";
 
 // Base URL for API queries.
-const API_BASE_URL = "http://localhost:62214/api";
+const API_BASE_URL = "/api";
 
 // How many chars at most for the description.
 const max_description_length = 100;

YTManager/frontend/src/index.ts

@@ -5,16 +5,30 @@ import VTBL from "./components/Video_Table.vue";
 import CTBL from "./components/Channel_Table.vue";
 import CADD from "./components/Channel_Add.vue";
 import './index.css';
+import { Video, search_videos, Channel, search_channels } from "./dumbyt";
 
 let MainApp = new Vue({
     el: "#app",
     template: `
     <div>
-        <VGC/>
+        <SCH v-on:search_complete="search_completed"/>
+        <VGC v-bind:Videos="Videos"/>
     </div>
     `,
     components: {
+        SCH,
         VGC
+    },
+    data() {
+        return {
+            Videos: Array<Video>()
+        }
+    },
+    methods: {
+        // Callback for when the search component got results back.
+        search_completed(videos : Array<Video>) : void {
+            this.Videos = videos;
+        }
     }
 });
 
@@ -22,10 +36,10 @@ let AdminApp = new Vue({
     el: "#admin_app",
     template: `
     <div>
-        <SCH style="max-width:800px; padding-left:100px;" />
+        <SCH v-on:search_complete="search_completed"/>
         <CADD/>
-        <CTBL/>
-        <VTBL/>
+        <CTBL v-bind:Channels="Channels"/>
+        <VTBL v-bind:Videos="Videos"/>
     </div>
     `,
     components: {
@@ -34,7 +48,20 @@ let AdminApp = new Vue({
         CTBL,
         VTBL
     },
+    data() {
+        return {
+            Videos: Array<Video>(),
+            Channels: Array<Channel>()
+        }
+    },
     methods: {
-        
+        // Callback for when the search component got results back.
+        search_completed(videos : Array<Video>) : void {
+            this.Videos = videos;
+        }
+    },
+    mounted(){
+        // Populate the channels field immediatly on start up.
+        search_channels("").then(channels => this.Channels = channels);
     }
 });