From c823c6f1e30c3faa1efb1f00a6edafef21cd84ea Mon Sep 17 00:00:00 2001
From: Casey Hill <bignamehere@gmail.com>
Date: Mon, 29 Aug 2022 13:30:28 -0500
Subject: [PATCH] built video results page [appends #27]

---
 public/api/training-videos.json           |  15 +-
 src/Dashboard/_views/Dashboard.vue        |   2 +-
 src/Search/_routes/search.routes.js       |   8 +
 src/Search/_views/Search.vue              | 266 ++++++++++++++++++++++
 src/Shared/_views/NotFound.vue            |  25 +-
 src/Video/_views/Prototype-Kit.vue        | 188 ---------------
 src/Video/_views/Video.vue                |   3 +-
 src/_components/global-nav/global-nav.vue |   2 +-
 src/_partials/BaseHeader.vue              |   5 +-
 src/_router.js                            |   2 +
 10 files changed, 316 insertions(+), 200 deletions(-)
 create mode 100644 src/Search/_routes/search.routes.js
 create mode 100644 src/Search/_views/Search.vue
 delete mode 100644 src/Video/_views/Prototype-Kit.vue

diff --git a/public/api/training-videos.json b/public/api/training-videos.json
index 922c8a1..ca0b21c 100644
--- a/public/api/training-videos.json
+++ b/public/api/training-videos.json
@@ -10,7 +10,7 @@
       "relatedVideos": [
         "ABCxyz1234", "XYZabc4321"
       ],
-      "searchTerms": ["prototype kit","prototype kit installation","design toolkit","installation"],
+      "searchTerms": ["prototype kit","prototype kit installation","design toolkit","installation","prototype"],
       "desc": "This training video will show how to download, install, and setup he Prototype Kit. The Prototype Kit is an FPAC UX toolkit designed to allow for highly efficient High-fidelity HTML prototype development with the FPAC Design System.",
       "transcript_url": "/training/transcripts/RGurnlgbuQ4-prototype-kit-training.pdf",
       "transcript": "<h2>Prototype Kit Training</h2><br>1. Hello, my name is Casey Hill. I am a User Experience Architect for FBCSS, and today’s training will show you how to download and install the Prototype Kit version 1.<br><br>2. Before you get started, you will need to have Node version 12 or above and Node Package Manager, version 6 or above, installed on your computer.<br><br>3. Node Package Manager, also known as NPM, is used to manage the installation and build process for the Prototype Kit.<br><br>4. Feel free to hit pause on the video now, Once Node is installed on your machine, you are ready to continue.<br><br>5. The Prototype Kit is a design tool kit that can be used to quickly build high-fidelity HTML prototypes that run in your browser.<br><br>6. The Prototype Kit uses the FPAC Design System as a dependency, which will allow your prototypes to utilize the same look and feel as production ready applications.<br><br>7. Let’s get started.<br><br>8. Open a web browser and navigate to github.com/usda-fsa.<br><br>9. Within the list of repositories, click on the fsa prototype kit.<br><br>10. On the right side of the screen you will see a green dropdown button with a label that reads Clone or Download.<br><br>11. Click the button to open the dropdown panel, and either highlight or click on the Copy to Clipboard button.<br><br>12. Either within your IDE or with a Command Prompt, change directories to where you store the source files for your projects. <br><br>13. Clone the Prototype Kit repo into a new directory by typing<br><br>14. git clone Paste the URL from the clipboard and then provide a directory name for your application and hit enter.<br><br>15. The Prototype Kit project files will be downloaded to your computer<br><br>16. Back in Terminal change directories into the newly created application project directory by typing cd and the name you provided<br><br>17. Next, type npm install and hit enter.<br><br>18. It can take between 2 and 15 minutes to install all of the dependencies, so feel free to pause the video until they are completely installed.<br><br>19. A directory was added with the name of node_modules, which contains all of the required dependencies.<br><br>20. If no errors occur during this process, you are ready to build the application.<br><br>21. Type npm run build<br><br>22. This will run webpack’s build process which creates a new directory named dist.<br><br>23. Dist contains all of the files that are required to run the Prototype locally on a web server.<br><br>24. This process could take a couple minutes to complete.<br><br>25. Once built, you can type npm run start to enable and run a local web server.<br><br>26. This will automatically launch a new browser and the Sample application at localhost and running on port 8888.<br><br>27. As you can see, the application is now fully functional and you can begin building your own prototype applications."
@@ -47,18 +47,21 @@
     },
     {
       "uid": "987def1234",
-      "title": "Color",
-      "category": "Visual Style",
-      "routePath": "/video/color",
+      "title": "Checkbox, Radio, & Switch",
+      "category": "UI Components",
+      "routePath": "/video/checkbox-radio-switch",
       "url": "https://www.youtube.com/embed/RGurnlgbuQ4?rel=0&showinfo=0",
-      "videoTitleImage": "/img/video-titles/visual-style/color-title.png",
+      "videoTitleImage": "/img/video-titles/ui-components/checkbox-title.png",
       "relatedVideos": [
         "ABCxyz1234"
       ],
-      "searchTerms": ["color","colors","primary","secondary","tertiary","text color"],
+      "searchTerms": ["checkbox","check","checkbox group","radio","radio button","radio group","switch","toggle","toggle switch"],
       "desc": "We love color, and we should make a video that talks about it.",
       "transcript_url": "/training/transcripts/RGurnlgbuQ4-prototype-kit-training.pdf",
       "transcript": "<h2>Color</h2><br>1. Hello, my name is Casey Hill. I am a User Experience Architect for FBCSS, and today’s training will show you how to download and install the Prototype Kit version 1.<br><br>2. Before you get started, you will need to have Node version 12 or above and Node Package Manager, version 6 or above, installed on your computer.<br><br>3. Node Package Manager, also known as NPM, is used to manage the installation and build process for the Prototype Kit.<br><br>4. Feel free to hit pause on the video now, Once Node is installed on your machine, you are ready to continue.<br><br>5. The Prototype Kit is a design tool kit that can be used to quickly build high-fidelity HTML prototypes that run in your browser.<br><br>6. The Prototype Kit uses the FPAC Design System as a dependency, which will allow your prototypes to utilize the same look and feel as production ready applications.<br><br>7. Let’s get started.<br><br>8. Open a web browser and navigate to github.com/usda-fsa.<br><br>9. Within the list of repositories, click on the fsa prototype kit.<br><br>10. On the right side of the screen you will see a green dropdown button with a label that reads Clone or Download.<br><br>11. Click the button to open the dropdown panel, and either highlight or click on the Copy to Clipboard button.<br><br>12. Either within your IDE or with a Command Prompt, change directories to where you store the source files for your projects. <br><br>13. Clone the Prototype Kit repo into a new directory by typing<br><br>14. git clone Paste the URL from the clipboard and then provide a directory name for your application and hit enter.<br><br>15. The Prototype Kit project files will be downloaded to your computer<br><br>16. Back in Terminal change directories into the newly created application project directory by typing cd and the name you provided<br><br>17. Next, type npm install and hit enter.<br><br>18. It can take between 2 and 15 minutes to install all of the dependencies, so feel free to pause the video until they are completely installed.<br><br>19. A directory was added with the name of node_modules, which contains all of the required dependencies.<br><br>20. If no errors occur during this process, you are ready to build the application.<br><br>21. Type npm run build<br><br>22. This will run webpack’s build process which creates a new directory named dist.<br><br>23. Dist contains all of the files that are required to run the Prototype locally on a web server.<br><br>24. This process could take a couple minutes to complete.<br><br>25. Once built, you can type npm run start to enable and run a local web server.<br><br>26. This will automatically launch a new browser and the Sample application at localhost and running on port 8888.<br><br>27. As you can see, the application is now fully functional and you can begin building your own prototype applications."
     }
+  ],
+  "excludedWords": [
+    "I", "a", "an", "and", "are", "as", "at", "be", "been", "but", "by", "call", "can", "come", "could", "did", "do", "each", "for", "from", "get", "go", "had", "has", "have", "he", "her", "him", "his", "how", "if", "in", "is", "it", "its", "like", "made", "make", "may", "my", "no", "now", "of", "on", "one", "or", "other", "said", "she", "so", "some", "than", "that", "the", "their", "them", "then", "there", "these", "they", "this", "to", "two", "up", "use", "was", "water", "way", "we", "were", "what", "when", "which", "who", "will", "with", "would", "you", "your"
   ]
 }
\ No newline at end of file
diff --git a/src/Dashboard/_views/Dashboard.vue b/src/Dashboard/_views/Dashboard.vue
index 1ae9d4f..72db9eb 100644
--- a/src/Dashboard/_views/Dashboard.vue
+++ b/src/Dashboard/_views/Dashboard.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <baseHeader @emitSearch="submitSearch"></baseHeader>
+    <baseHeader></baseHeader>
 
     <main id="main-content" tabindex="-1">
       <div class="fsa-section">
diff --git a/src/Search/_routes/search.routes.js b/src/Search/_routes/search.routes.js
new file mode 100644
index 0000000..f4a3bf2
--- /dev/null
+++ b/src/Search/_routes/search.routes.js
@@ -0,0 +1,8 @@
+
+export const searchRoutes = [
+  { 
+    path: '/search/:id',
+    component: () => import('@/Search/_views/Search.vue'),
+    props: true
+  },
+]
\ No newline at end of file
diff --git a/src/Search/_views/Search.vue b/src/Search/_views/Search.vue
new file mode 100644
index 0000000..fad9022
--- /dev/null
+++ b/src/Search/_views/Search.vue
@@ -0,0 +1,266 @@
+<template>
+  <div>
+    <baseHeader></baseHeader>
+
+    <main id="main-content" tabindex="-1">
+      <div class="fsa-section">
+        <div class="fsa-section__bd">
+          <div class="fsa-m-t--l">
+            <div class="fsa-level@m fsa-level--justify-between">
+              <h1 class="fsa-m--none">Search Results</h1>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="fsa-section">
+        <div class="fsa-section__bd">
+
+          <div class="ds-l-page">
+
+            <!-- Adjacent - START -->
+            <div class="ds-l-page__adjacent">
+
+              <!-- Jump Menu - START -->
+              <div id="jump-target">
+                <div class="ds-jump">
+                  <ul class="ds-jump__list">
+                    
+                    <li class="ds-jump__item ds-jump__item--active">
+                      <a class="ds-jump__link" href="#main-content">Overview</a>
+                    </li>
+                    <li class="ds-jump__item">
+                      <a class="ds-jump__link" href="#most-recent">Search Results</a>
+                    </li>
+                    <li class="ds-jump__item">
+                      <a class="ds-jump__link" href="#popular-videos">Popular Videos</a>
+                    </li>
+                   
+                  </ul>
+                </div>
+              </div>
+              <!-- Jump Menu - END -->
+
+            </div>
+            <!-- Adjacent - END -->
+            
+            <!-- Page Body - START -->
+            <div class="ds-l-page__body">
+              <article class="ds-article">
+
+                <div v-if="!videoResults" class="fsa-text--lead fsa-m-b--xl">
+                  No videos were found related to <strong>'{{ searchPhrase }}'</strong>.
+                </div>
+                <div v-if="videoResults" class="fsa-text--lead fsa-m-b--xl">
+                  Your search for <strong>'{{ searchPhrase }}'</strong> returned <strong>{{ totalResults }}</strong> videos.
+                </div>
+
+                <div v-if="videoResults" class="fsa-m-b--xl">
+                  <div  class="ds-subcat-list">
+                    <ul class="ds-subcat-list__list">
+                      
+                      <li v-for="video in videoResults" :key="video.uid" class="ds-subcat-list__list-item ds-subcat-list__list-item--thirds">
+                        <a @click.prevent="goto( getPathFromId(video.uid) )" class="ds-subcat-list__link" :href="'/training'+ getPathFromId(video.uid)">
+                          <span class="ds-subcat-list__text">{{ video.title }}</span>
+                          <img :src="video.videoTitleImage" :alt="video.title" class="ds-subcat-list__img" />
+                        </a>
+                      </li>
+
+                    </ul>
+                  </div>
+                </div>
+
+
+
+                <h2 id="popular-videos" class="fsa-m-t--l">Popular Videos</h2>
+                <div class="ds-subcat-list">
+                  <ul class="ds-subcat-list__list">
+                    <li class="ds-subcat-list__list-item ds-subcat-list__list-item--thirds">
+                      <a @click.prevent="goto('/video/buttons')" class="ds-subcat-list__link" href="/training/video/buttons">
+                        <span class="ds-subcat-list__text">Buttons</span>
+
+                        <img
+                          class="ds-subcat-list__img"
+                          src="/img/video-titles/ui-components/buttons-title.png"
+                          alt
+                        />
+                      </a>
+                    </li>
+
+                    <li class="ds-subcat-list__list-item ds-subcat-list__list-item--thirds">
+                      <a @click.prevent="goto('/video/date-picker')" class="ds-subcat-list__link" href="/training/video/date-picker">
+                        <span class="ds-subcat-list__text">Date Picker</span>
+
+                        <img
+                          class="ds-subcat-list__img"
+                          src="/img/video-titles/ui-components/date-picker-title.png"
+                          alt
+                        />
+                      </a>
+                    </li>
+
+                    <li class="ds-subcat-list__list-item ds-subcat-list__list-item--thirds">
+                      <a @click.prevent="goto('/video/stepped-tabs')" class="ds-subcat-list__link" href="/training/video/stepped-tabs">
+                        <span class="ds-subcat-list__text">Stepped Tabs</span>
+
+                        <img
+                          class="ds-subcat-list__img"
+                          src="/img/video-titles/ui-components/stepped-tabs-title.png"
+                          alt
+                        />
+                      </a>
+                    </li>
+
+                    <li class="ds-subcat-list__list-item ds-subcat-list__list-item--thirds">
+                      <a @click.prevent="goto('/video/stepped-control')" class="ds-subcat-list__link" href="/training/video/stepped-control">
+                        <span class="ds-subcat-list__text">Stepped Control</span>
+
+                        <img
+                          class="ds-subcat-list__img"
+                          src="/img/video-titles/ui-components/stepped-controls-title.png"
+                          alt
+                        />
+                      </a>
+                    </li>
+
+                    <li class="ds-subcat-list__list-item ds-subcat-list__list-item--thirds">
+                      <a @click.prevent="goto('/video/button-group')" class="ds-subcat-list__link" href="/training/video/button-group">
+                        <span class="ds-subcat-list__text">Button Group</span>
+
+                        <img
+                          class="ds-subcat-list__img"
+                          src="/img/video-titles/ui-components/button-group-title.png"
+                          alt
+                        />
+                      </a>
+                    </li>
+
+                    <li class="ds-subcat-list__list-item ds-subcat-list__list-item--thirds">
+                      <a @click.prevent="goto('/video/508-accessibility')" class="ds-subcat-list__link" href="/training/video/508-accessibility">
+                        <span class="ds-subcat-list__text">508 Accessibility</span>
+
+                        <img
+                          class="ds-subcat-list__img"
+                          src="/img/video-titles/guides/508-title.png"
+                          alt
+                        />
+                      </a>
+                    </li>
+
+                  </ul>
+                </div>
+              </article>
+            </div>
+            <!-- Page Body - END -->
+          </div>
+
+        </div>
+      </div>
+    </main>
+
+    <baseFooter></baseFooter>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted, computed, watch } from "vue";
+import { useStore } from "vuex";
+import { useRoute } from 'vue-router';
+import { useNavigation } from "@/_composables/useNavigation";
+
+import baseHeader from "@/_partials/BaseHeader.vue";
+import baseFooter from "@/_partials/BaseFooter.vue";
+
+export default {
+  components: {
+    baseHeader,
+    baseFooter
+  },
+
+  setup(props) {
+    const store = useStore();
+    const route = useRoute();
+    const { goto } = useNavigation();
+
+
+    const videosData = computed(() => {
+      let data = store.getters["videos/getVideos"];
+      if(data) return data;
+      else return null;
+    });
+    const videos = ref(null);
+    const excludedWords = ref([]);
+
+    const videoResults = ref(null);
+    const searchPhrase = ref(null);
+    const totalResults = ref(0);
+
+    const setSearchResults = (_phrase) => {
+      searchPhrase.value = _phrase;
+      let results = videos.value.filter( (_o) => {
+        let isFound = false;
+        isFound = isFound ? true : checkSearchTeams(_phrase, _o);
+        isFound = isFound ? true : checkDescription(_phrase, _o);
+        return isFound;
+      });
+      if( results.length > 0 ){
+        videoResults.value = results;
+        totalResults.value = results.length;
+      } else {
+         videoResults.value = null;
+         totalResults.value = 0;
+      }
+    }
+
+    const checkSearchTeams = (_phrase, _o) => {
+      let ind = _o.searchTerms.findIndex( _oo => _oo.toLowerCase() == _phrase.toLowerCase() );
+      if( ind > -1 ) return true;
+      else return false;
+    }
+
+    const checkDescription = (_phrase, _o) => {
+      let desc = removeExcludedWords( _o.desc ); // strip video description of superfluous words
+      return desc.toLowerCase().includes( _phrase.toLowerCase() );
+    }
+    
+    const removeExcludedWords = (_str) => {
+      let newStr = _str.replaceAll(',', ''); // remove commas
+      newStr = newStr.replaceAll('.', ''); // remove periods
+      newStr = newStr.replaceAll('\'', ''); // remove single quotes
+      newStr = newStr.replaceAll('"', ''); // remove double quotes
+
+      excludedWords.value.forEach( (_o) =>{
+        newStr = newStr.replaceAll(' '+_o+' ', ' ');
+      });
+      return newStr;
+    }
+
+
+    const getPathFromId = (_id) => {
+      let index = videos.value.findIndex( o => o.uid == _id );
+      let obj = videos.value[index];
+      return obj.routePath;
+    }
+
+    watch( [videosData,() => route.params.id],
+      ([_newData, _newSearch], [_oldData, _oldSearch]) => {
+      videos.value = _newData.videos;
+      excludedWords.value = _newData.excludedWords;
+      if(videosData.value) setSearchResults(_newSearch);
+    })
+
+
+    onMounted(()=>{
+      store.dispatch("videos/setVideos");
+    });
+
+    return {
+      goto,
+      videoResults,
+      getPathFromId,
+      searchPhrase,
+      totalResults
+    };
+  }
+};
+</script>
\ No newline at end of file
diff --git a/src/Shared/_views/NotFound.vue b/src/Shared/_views/NotFound.vue
index c2be9f9..865393f 100644
--- a/src/Shared/_views/NotFound.vue
+++ b/src/Shared/_views/NotFound.vue
@@ -1,9 +1,32 @@
 <template>
-    <h1>Page Not Found</h1>
+  <div>
+    <baseHeader></baseHeader>
+
+    <main id="main-content" tabindex="-1">
+      <div class="fsa-section">
+        <div class="fsa-section__bd">
+          <div class="fsa-m-t--l">
+            <div class="fsa-level@m fsa-level--justify-between">
+              <h1 class="fsa-m--none">Page Not Found</h1>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+    <baseFooter></baseFooter>
+  </div>
 </template>
 
 <script>
+import baseHeader from "@/_partials/BaseHeader.vue";
+import baseFooter from "@/_partials/BaseFooter.vue";
+
 export default {
+  components: {
+    baseHeader,
+    baseFooter
+  },
   setup(){
 
   }
diff --git a/src/Video/_views/Prototype-Kit.vue b/src/Video/_views/Prototype-Kit.vue
deleted file mode 100644
index 47e34c6..0000000
--- a/src/Video/_views/Prototype-Kit.vue
+++ /dev/null
@@ -1,188 +0,0 @@
-<template>
-  <div>
-    <baseHeader @emitSearch="submitSearch"></baseHeader>
-
-    <main id="main-content" tabindex="-1">
-      <div class="fsa-section">
-        <div class="fsa-section__bd">
-          <div class="fsa-m-t--l">
-            <div class="fsa-level@m fsa-level--justify-between">
-              <h1 class="fsa-m-t--none">Prototype Kit Installation</h1>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="fsa-section">
-        <div class="fsa-section__bd">
-
-          <div class="fsa-grid">
-            <div class="fsa-grid__1/1 fsa-grid__1/1@m fsa-grid__2/3@l">
-
-              <div class="uxt-video">
-                <iframe
-                  width="640"
-                  height="360"
-                  :src="'https://www.youtube.com/embed/'+ videoId +'?rel=0&showinfo=0'"
-                  title="YouTube video player"
-                  frameborder="0"
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                  allowfullscreen>
-                </iframe>
-              </div>
-
-              <h3>Video Description</h3>
-                
-              <div class="fsa-m-t--s fsa-m-b--l">
-                <p>{{ videoDescription }}</p>
-              </div>
-              
-              <div class="uxt-drawer">
-                <div @click="toggleTranscriptDrawer" class="uxt-drawer__front">
-                  <div class="fsa-level fsa-level--justify-between fsa-border--xxs fsa-border:hover--none fsa-shadow:hover--raised">
-                    <span class="fsa-text-size--4 fsa-p--s">
-                      <svg class="fsa-icon fsa-icon--size-2" aria-hidden="true" focusable="false" role="img" fill="#494440" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"></path></svg>
-                      View Transcript
-                    </span>
-                    <span>
-                      <button v-if="!showTranscript" type="button" class="fsa-btn fsa-btn--plain fsa-p--s" title="Expand" aria-label="Expand">
-                        <svg class="fsa-icon fsa-icon--size-2" aria-hidden="true" focusable="false" role="img" fill="#494440" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"></path></svg>
-                      </button>
-                      <button v-if="showTranscript" type="button" class="fsa-btn fsa-btn--plain fsa-p--s" title="Expand" aria-label="Expand">
-                        <svg  class="fsa-icon fsa-icon--size-2" aria-hidden="true" focusable="false" role="img" fill="#494440" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"></path></svg>
-                      </button>
-                    </span>
-                  </div>
-                </div>               
-                <div class="uxt-drawer__container fsa-m-l--xxs fsa-m-r--xxs">
-                  <div class="uxt-drawer__container-bg--hide fsa-p--m fsa-border--xxs">
-                    <p :id="videoId +'-container'"></p>
-                    <div class="fsa-m-t--l fsa-text-align--center">
-                      <button @click="toggleTranscriptDrawer" class="fsa-btn fsa-btn--flat">Close</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-            </div>
-
-
-            <div class="fsa-grid__1/1 fsa-grid__1/1@m fsa-grid__1/3@l">
-
-              <div class="uxt-video-related">
-                <span class="uxt-video-related__header">Related Videos:</span>
-                
-                <div class="fsa-level fsa-level--none@xs fsa-level--inline@s fsa-level--gutter-m@s fsa-level--none@l">
-                  <div class="uxt-video-related__item">
-                    <a @click.prevent="goto('/ui-components/buttons')" class="uxt-video-related__item-link" href="">
-                      <img class="uxt-video-related__item-media" src="/img/video-titles/video-coming-soon.png" alt/>
-                      <span class="uxt-video-related__item-text">UI Components - Buttons</span>
-                    </a>
-                  </div>
-                  <span class="uxt-video-related__item">
-                    <a @click.prevent="goto('/ui-components/form-field')" class="uxt-video-related__item-link" href="">
-                      <img class="uxt-video-related__item-media" src="/img/video-titles/video-coming-soon.png" alt/>
-                      <span class="uxt-video-related__item-text">UI Components - Form Field</span>
-                    </a>
-                  </span>
-                </div>
-              
-              </div>
-
-            </div>
-          </div>
-          <!-- Grid End -->
-
-
-        </div>
-      </div>
-
-    </main>
-
-    <baseFooter></baseFooter>
-  </div>
-</template>
-
-<script>
-import { ref, defineAsyncComponent, onMounted, computed, watch } from "vue";
-import { useStore } from "vuex";
-import { useNavigation } from "@/_composables/useNavigation";
-
-import { v4 as uuidv4 } from "uuid";
-
-import baseHeader from "@/_partials/BaseHeader.vue";
-import baseFooter from "@/_partials/BaseFooter.vue";
-
-export default {
-  components: {
-    baseHeader,
-    baseFooter
-  },
-
-  setup(props) {
-    const store = useStore();
-    const { goto } = useNavigation();
-
-    const showTranscript = ref(false);
-
-    const videoId = ref('RGurnlgbuQ4');
-    const transcriptContainerId = ref('RGurnlgbuQ4-container');
-    const videoDescription = ref('');
-
-    const videosData = computed(() => {
-      let data = store.getters["videos/getVideos"];
-      if(data) return data.videos;
-      else return null;
-    });
-
-    const toggleTranscriptDrawer = () => {
-      let el = document.getElementById(videoId.value+'-container');
-      let elParent = el.parentElement;
-
-      if(showTranscript.value){
-        
-        elParent.classList.add('uxt-drawer__container-bg--hide');
-        elParent.classList.remove('uxt-drawer__container-bg--show');
-        showTranscript.value = false;
-      } else {
-        elParent.classList.add('uxt-drawer__container-bg--show');
-        elParent.classList.remove('uxt-drawer__container-bg--hide');
-        showTranscript.value = true;
-      }
-    }
-
-    const initVideo = (_arr) => {
-      let videoObj = _arr.filter((o)=>{ return o.uid == videoId.value});
-      setDescription(videoObj);
-      setTranscript(videoObj);
-    }
-
-    const setDescription = (_vid) => {
-      videoDescription.value = _vid[0].desc;
-    }
-
-    const setTranscript = (_vid) => {
-      let el = document.getElementById(videoId.value+'-container');
-      if(el) el.innerHTML = _vid[0].transcript;
-    }
-
-    watch(videosData, (_value)=>{
-      //console.log('watch',_value)
-      initVideo(_value);
-    })
-
-    onMounted(()=>{
-      store.dispatch("videos/setVideos");
-    });
-
-    return {
-      goto,
-      videoId,
-      videosData,
-      videoDescription,
-      showTranscript,
-      toggleTranscriptDrawer
-    };
-  }
-};
-</script>
diff --git a/src/Video/_views/Video.vue b/src/Video/_views/Video.vue
index b1c07b7..0dd7263 100644
--- a/src/Video/_views/Video.vue
+++ b/src/Video/_views/Video.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <baseHeader @emitSearch="submitSearch"></baseHeader>
+    <baseHeader></baseHeader>
 
     <main id="main-content" tabindex="-1">
       <div class="fsa-section">
@@ -237,7 +237,6 @@ export default {
       goto,
       videoId,
       videoTitle,
-      videosData,
       videoDescription,
       showTranscript,
       toggleTranscriptDrawer,
diff --git a/src/_components/global-nav/global-nav.vue b/src/_components/global-nav/global-nav.vue
index bf7472a..ddf351e 100644
--- a/src/_components/global-nav/global-nav.vue
+++ b/src/_components/global-nav/global-nav.vue
@@ -204,7 +204,7 @@ export default {
 
     const doSearch = (event) => {
       let p = document.getElementById('searchPhrase').value
-      console.log('p',p)
+      //console.log('p',p)
       emit("emitSearch", {type: 'default', phrase: p})
     }
 
diff --git a/src/_partials/BaseHeader.vue b/src/_partials/BaseHeader.vue
index 524062c..72a7c8f 100644
--- a/src/_partials/BaseHeader.vue
+++ b/src/_partials/BaseHeader.vue
@@ -34,6 +34,7 @@ import { onMounted, ref, computed } from 'vue';
 
 import { navigationService } from '@/Shared/_services/navigation.service';
 import { useStore } from 'vuex';
+import { useNavigation } from "@/_composables/useNavigation";
 
 
 import tophat from '@/_components/tophat/tophat.vue';
@@ -51,12 +52,14 @@ export default {
 
     const baseUrl = ref(import.meta.env.BASE_URL);
     const store = useStore();
+    const { goto } = useNavigation();
 
     const navigationData = computed(() => store.getters["navigation/getNavigation"]);
 
     const submitSearch = ( obj ) => {
       emit('emitSearch',obj)
-      console.log('NAV SEARCH BASEHEADER', obj)
+      //console.log('NAV SEARCH BASEHEADER', obj)
+      goto('/search/' + obj.phrase)
     };
 
     onMounted(()=>{
diff --git a/src/_router.js b/src/_router.js
index 23673e1..e6a59c6 100644
--- a/src/_router.js
+++ b/src/_router.js
@@ -2,11 +2,13 @@ import { createRouter, createWebHistory } from 'vue-router';
 
 import { dashboardRoutes } from '@/Dashboard/_routes/dashboard.routes.js';
 import { videoRoutes } from '@/Video/_routes/video.routes.js';
+import { searchRoutes } from '@/Search/_routes/search.routes.js';
 
 
 const routes = [
   ...dashboardRoutes,
   ...videoRoutes,
+  ...searchRoutes,
   { 
     path: '/:pathMatch(.*)*',
     name: 'not-found',