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',