From 06a4b6b41de1568fc84a9c7552d42c7a2a319999 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Wed, 14 Aug 2024 16:26:16 -0700
Subject: [PATCH 1/3] fixing dayjs

---
 .../src/components/BaseTimer/BaseTimer.vue    |  9 +--
 .../NavSearchForm/NavSearchForm.vue           | 71 ++++++++-----------
 packages/vue/src/utils/dayjs.js               |  8 +++
 3 files changed, 41 insertions(+), 47 deletions(-)

diff --git a/packages/vue/src/components/BaseTimer/BaseTimer.vue b/packages/vue/src/components/BaseTimer/BaseTimer.vue
index 1fffd1eb..edd4a3ff 100644
--- a/packages/vue/src/components/BaseTimer/BaseTimer.vue
+++ b/packages/vue/src/components/BaseTimer/BaseTimer.vue
@@ -51,12 +51,9 @@
 <script lang="ts">
 import type { PropType } from 'vue'
 import { defineComponent } from 'vue'
-import dayjs, { type Dayjs } from 'dayjs'
-import duration, { type Duration } from 'dayjs/plugin/duration'
-import minMax from 'dayjs/plugin/minMax'
-
-dayjs.extend(duration)
-dayjs.extend(minMax)
+import dayjs from './../../utils/dayjs'
+import { type Dayjs } from 'dayjs'
+import { type Duration } from 'dayjs/plugin/duration.js'
 
 const calculateDuration = (start: Dayjs): Duration | undefined => {
   // Use round seconds so the datetime string stays valid and can be read by screen readers.
diff --git a/packages/vue/src/components/NavSearchForm/NavSearchForm.vue b/packages/vue/src/components/NavSearchForm/NavSearchForm.vue
index d128d367..5d901277 100644
--- a/packages/vue/src/components/NavSearchForm/NavSearchForm.vue
+++ b/packages/vue/src/components/NavSearchForm/NavSearchForm.vue
@@ -1,3 +1,29 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import SearchInput from './../SearchInput/SearchInput.vue'
+const router = useRouter()
+
+interface NavSearchFormProps {
+  mobile?: boolean
+}
+const props = withDefaults(defineProps<NavSearchFormProps>(), {
+  mobile: false
+})
+const emit = defineEmits(['clearSearch', 'submitForm'])
+
+const searchQuery = ref()
+
+const clearSearch = () => {
+  searchQuery.value = undefined
+  emit('clearSearch')
+}
+const submitSearch = () => {
+  emit('submitForm')
+  console.log(searchQuery.value)
+  router.push({ path: '/search', query: searchQuery.value })
+}
+</script>
 <template>
   <form
     class="NavSearchForm"
@@ -6,11 +32,11 @@
     <SearchInput
       v-model="searchQuery"
       placeholder="Search JPL"
-      :underlined-input="!mobile"
+      :underlined-input="!props.mobile"
       :underlined-input-value="searchQuery"
-      :auto-focus="!mobile"
-      :inline="!mobile"
-      :default-colors="mobile"
+      :auto-focus="!props.mobile"
+      :inline="!props.mobile"
+      :default-colors="props.mobile"
       @esc="clearSearch()"
     />
     <button
@@ -22,43 +48,6 @@
     </button>
   </form>
 </template>
-<script lang="ts">
-import { defineComponent } from 'vue'
-import SearchInput from './../SearchInput/SearchInput.vue'
-
-export default defineComponent({
-  name: 'NavSearchForm',
-  components: {
-    SearchInput
-  },
-  props: {
-    mobile: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      searchQuery: undefined
-    }
-  },
-  methods: {
-    clearSearch() {
-      this.searchQuery = undefined
-      this.$emit('clearSearch')
-    },
-    submitSearch() {
-      this.$emit('submitForm')
-      if (this.$router) {
-        this.$router.push({
-          name: 'search',
-          query: { query: this.searchQuery }
-        })
-      }
-    }
-  }
-})
-</script>
 <style lang="scss">
 .NavSearchForm {
   ::placeholder {
diff --git a/packages/vue/src/utils/dayjs.js b/packages/vue/src/utils/dayjs.js
index 74921ab2..0b84b91e 100644
--- a/packages/vue/src/utils/dayjs.js
+++ b/packages/vue/src/utils/dayjs.js
@@ -4,6 +4,10 @@ import localizedFormat from 'dayjs/plugin/localizedFormat.js'
 import timezone from 'dayjs/plugin/timezone.js'
 import advancedFormat from 'dayjs/plugin/advancedFormat.js'
 
+// needed for BaseTimer
+import duration from 'dayjs/plugin/duration.js'
+import minMax from 'dayjs/plugin/minMax.js'
+
 // Locales must be imported manually
 // see https://github.com/iamkun/dayjs/tree/dev/src/locale
 import 'dayjs/locale/en-gb.js'
@@ -29,4 +33,8 @@ dayjs.updateLocale('en', {
 dayjs.extend(timezone)
 dayjs.extend(advancedFormat)
 
+// needed for BaseTimer
+dayjs.extend(duration)
+dayjs.extend(minMax)
+
 export default dayjs

From 4283a8df0e3f67528410ee72f201076029f177e4 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Wed, 14 Aug 2024 20:19:31 -0700
Subject: [PATCH 2/3] localizing dayjs extensions to BaseTimer

---
 packages/vue/src/components/BaseTimer/BaseTimer.vue | 6 +++++-
 packages/vue/src/utils/dayjs.js                     | 8 --------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/packages/vue/src/components/BaseTimer/BaseTimer.vue b/packages/vue/src/components/BaseTimer/BaseTimer.vue
index edd4a3ff..8555d8d2 100644
--- a/packages/vue/src/components/BaseTimer/BaseTimer.vue
+++ b/packages/vue/src/components/BaseTimer/BaseTimer.vue
@@ -53,7 +53,11 @@ import type { PropType } from 'vue'
 import { defineComponent } from 'vue'
 import dayjs from './../../utils/dayjs'
 import { type Dayjs } from 'dayjs'
-import { type Duration } from 'dayjs/plugin/duration.js'
+import duration, { type Duration } from 'dayjs/plugin/duration.js'
+import minMax from 'dayjs/plugin/minMax.js'
+
+dayjs.extend(duration)
+dayjs.extend(minMax)
 
 const calculateDuration = (start: Dayjs): Duration | undefined => {
   // Use round seconds so the datetime string stays valid and can be read by screen readers.
diff --git a/packages/vue/src/utils/dayjs.js b/packages/vue/src/utils/dayjs.js
index 0b84b91e..74921ab2 100644
--- a/packages/vue/src/utils/dayjs.js
+++ b/packages/vue/src/utils/dayjs.js
@@ -4,10 +4,6 @@ import localizedFormat from 'dayjs/plugin/localizedFormat.js'
 import timezone from 'dayjs/plugin/timezone.js'
 import advancedFormat from 'dayjs/plugin/advancedFormat.js'
 
-// needed for BaseTimer
-import duration from 'dayjs/plugin/duration.js'
-import minMax from 'dayjs/plugin/minMax.js'
-
 // Locales must be imported manually
 // see https://github.com/iamkun/dayjs/tree/dev/src/locale
 import 'dayjs/locale/en-gb.js'
@@ -33,8 +29,4 @@ dayjs.updateLocale('en', {
 dayjs.extend(timezone)
 dayjs.extend(advancedFormat)
 
-// needed for BaseTimer
-dayjs.extend(duration)
-dayjs.extend(minMax)
-
 export default dayjs

From 45eab4258fc91bf50ff1baee7cbdcee94af333a7 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Wed, 14 Aug 2024 20:37:11 -0700
Subject: [PATCH 3/3] fixes path for past events carousel for both www and edu

---
 .../src/components/PastEventsCarousel/PastEventsCarousel.vue  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/vue/src/components/PastEventsCarousel/PastEventsCarousel.vue b/packages/vue/src/components/PastEventsCarousel/PastEventsCarousel.vue
index 63439306..8cee717e 100644
--- a/packages/vue/src/components/PastEventsCarousel/PastEventsCarousel.vue
+++ b/packages/vue/src/components/PastEventsCarousel/PastEventsCarousel.vue
@@ -4,7 +4,7 @@
     heading="Past Events"
     variant="cards"
     :link="{
-      path: '/events',
+      // path: 'events',
       query: {
         event_status: 'Past events',
         sortBy: 'eventStartDateLatest',
@@ -28,7 +28,7 @@
   </MixinCarousel>
 </template>
 <script lang="ts">
-// @ts-nocheck
+// relative link to view past events assumes that this component will only be used on an events index page.
 import { defineComponent } from 'vue'
 import type { ElasticSearchPage } from '../../interfaces'
 import MixinCarousel from './../MixinCarousel/MixinCarousel.vue'