fixing build errors

nasa-jpl · Aug 13, 2024 · d343a6e · d343a6e
1 parent 051a31e
commit d343a6e
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 21 deletions.
diff --git a/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue b/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue
@@ -295,7 +295,6 @@ export default defineComponent({
     formattedEventDates() {
       return (this.theItem as EventCardObject)?.startDate
         ? mixinFormatEventDates(
-            // @ts-expect-error startDate is not undefined in this instance
             (this.theItem as EventCardObject).startDate,
             (this.theItem as EventCardObject).endDate
           )

diff --git a/packages/vue/src/components/BlockLinkTile/BlockLinkTile.vue b/packages/vue/src/components/BlockLinkTile/BlockLinkTile.vue
@@ -40,17 +40,17 @@
           :class="{ 'xl:px-10 xl:py-6 lg:px-8': !compact }"
         >
           <p
-            v-if="theItem.label || theItem.startDate"
+            v-if="theItem.label || (theItem as EventCardObject).startDate"
             class="text-subtitle divide-white flex divide-x mb-2"
           >
             <span
               v-if="theItem.label"
-              :class="{ 'pr-2': theItem.startDate }"
+              :class="{ 'pr-2': (theItem as EventCardObject).startDate }"
             >
               {{ theItem.label }}
             </span>
             <span
-              v-if="theItem.startDate"
+              v-if="(theItem as EventCardObject).startDate"
               :class="{ 'pl-2': theItem.label }"
             >
               {{ formattedEventDates }}
@@ -81,7 +81,7 @@
 
 <script lang="ts">
 import type { PropType } from 'vue'
-import type { Card } from '../../interfaces'
+import type { Card, EventCardObject } from '../../interfaces'
 import { defineComponent } from 'vue'
 import { mixinFormatEventDates } from './../../utils/mixins'
 import IconArrow from './../Icons/IconArrow.vue'
@@ -101,7 +101,7 @@ export default defineComponent({
   props: {
     // if some cards contain external links, be sure to alias the external url as 'externalLink'
     data: {
-      type: Object as PropType<Card>,
+      type: Object as PropType<Card | EventCardObject>,
       required: false
     },
     // override props as needed
@@ -149,7 +149,7 @@ export default defineComponent({
     // to allow for various data shapes and sources
     // use-case: the homepage provides this.data.page with non-page siblings
     // use-case: search and listing pages pass individual props
-    theItem(): Card | undefined {
+    theItem(): Card | EventCardObject | undefined {
       if ((this.data as Card)?.page) {
         return (this.data as Card).page
       } else if (this.data) {
@@ -177,8 +177,11 @@ export default defineComponent({
       return undefined
     },
     formattedEventDates() {
-      return this.theItem?.startDate
-        ? mixinFormatEventDates(this.theItem.startDate, this.theItem.endDate)
+      return (this.theItem as EventCardObject)?.startDate
+        ? mixinFormatEventDates(
+            (this.theItem as EventCardObject).startDate,
+            (this.theItem as EventCardObject).endDate
+          )
         : undefined
     }
   }

diff --git a/packages/vue/src/components/MetadataEduResource/MetadataEduResource.vue b/packages/vue/src/components/MetadataEduResource/MetadataEduResource.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import type { EduResourceCardObject } from './../../interfaces.ts'
 import IconSubject from './../Icons/IconSubject.vue'
 import IconProfile from './../Icons/IconProfile.vue'
-import IconTime from './../Icons/IconTime.vue'
+// import IconTime from './../Icons/IconTime.vue'
 import {} from './../../utils/mixins'
 import { rangeifyGrades } from './../../utils/rangeifyGrades'
 
@@ -84,7 +84,7 @@ const audience = computed(() => {
   }
 
   &.-compact {
-    @apply text-body-xs;
+    @apply text-sm;
     @apply flex flex-grow;
     .MetadataEduResourceItem {
       @apply max-w-none min-w-[4em];

diff --git a/packages/vue/src/components/MetadataEvent/MetadataEvent.vue b/packages/vue/src/components/MetadataEvent/MetadataEvent.vue
@@ -140,7 +140,7 @@ const displayTime = computed((): string => {
   }
 
   &.-compact {
-    @apply text-body-xs;
+    @apply text-sm;
     @apply flex flex-grow;
     .MetadataEventItem {
       @apply max-w-none min-w-[4em];

diff --git a/packages/vue/src/components/TopicDetailMoreItem/TopicDetailMoreItem.vue b/packages/vue/src/components/TopicDetailMoreItem/TopicDetailMoreItem.vue
@@ -40,7 +40,7 @@
     <div class="text-gray-dark md:px-5 md:py-5 lg:px-10 lg:py-8 w-full px-10 py-8">
       <!-- label area -->
       <div
-        v-if="theData.label || theData.date || theData.startDate"
+        v-if="theData.label || theData.date || (theData as EventCardObject).startDate"
         class="flex flex-wrap items-center justify-between mb-5"
       >
         <p class="divide-gray-mid text-subtitle flex divide-x">
@@ -50,7 +50,7 @@
             >{{ theData.label }}</span
           >
           <span
-            v-if="theData.date || theData.startDate"
+            v-if="theData.date || (theData as EventCardObject).startDate"
             class="text-gray-mid-dark"
             :class="{ 'pl-2': theData.label }"
           >
@@ -60,7 +60,7 @@
                 $filters.displayDate(theData.date)
               }}
             </template>
-            <template v-else-if="theData.startDate">
+            <template v-else-if="(theData as EventCardObject).startDate">
               {{ formattedEventDates }}
             </template>
           </span>
@@ -80,7 +80,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import type { Card } from '../../interfaces'
+import type { Card, EventCardObject } from '../../interfaces'
 import { mixinFormatEventDates } from '../../utils/mixins'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseImage from './../BaseImage/BaseImage.vue'
@@ -99,8 +99,9 @@ export default defineComponent({
   },
   props: {
     data: {
-      type: Object as PropType<Card>,
-      required: false
+      type: Object as PropType<Card | EventCardObject>,
+      required: false,
+      default: undefined
     }
   },
   computed: {
@@ -113,8 +114,11 @@ export default defineComponent({
       return undefined
     },
     formattedEventDates() {
-      if (this.theData?.startDate) {
-        return mixinFormatEventDates(this.theData.startDate, this.theData.endDate)
+      if ((this.theData as EventCardObject)?.startDate) {
+        return mixinFormatEventDates(
+          (this.theData as EventCardObject).startDate,
+          (this.theData as EventCardObject).endDate
+        )
       }
       return undefined
     }

diff --git a/packages/vue/src/templates/PageEventDetail/PageEventDetail.vue b/packages/vue/src/templates/PageEventDetail/PageEventDetail.vue
@@ -228,6 +228,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import type { EventCardObject } from './../../interfaces'
+import { mixinFormatSplitEventDates, type EventDateObject } from './../../utils/mixins'
 import LayoutHelper from './../../components/LayoutHelper/LayoutHelper.vue'
 import BaseHeading from './../../components/BaseHeading/BaseHeading.vue'
 import ShareButtons from './../../components/ShareButtons/ShareButtons.vue'
@@ -286,6 +287,14 @@ export default defineComponent({
           })
         : undefined
       return mapped
+    },
+    startDateTimeForFormatting(): string {
+      return this.data?.startDatetime || this.data?.startDate
+    },
+    formattedSplitEventDates(): string | EventDateObject | undefined {
+      return this.data && this.startDateTimeForFormatting
+        ? mixinFormatSplitEventDates(this.startDateTimeForFormatting, this.data.endDatetime)
+        : undefined
     }
   }
 })

diff --git a/packages/vue/src/utils/mixins.ts b/packages/vue/src/utils/mixins.ts
@@ -307,7 +307,7 @@ export const mixinFormatSplitEventDates = (
 }
 
 // return event dates formatted for listing cards
-export const mixinFormatEventDates = (startDatetime: string, endDatetime?: string): string => {
+export const mixinFormatEventDates = (startDatetime?: string, endDatetime?: string): string => {
   const startDateDayjs = dayjs(startDatetime)
 
   let eventDate = startDateDayjs.format('ll')

diff --git a/packages/vue/src/utils/rangeifyGrades.ts b/packages/vue/src/utils/rangeifyGrades.ts
@@ -36,6 +36,7 @@ const rangeify = (a: number[]): string[] => {
     run.push(a[i])
     if (i + 1 >= a.length || a[i + 1] - a[i] > 1) {
       res.push(
+        // @ts-expect-error
         run.length > 1
           ? `${numbersAsGrades.value[run[0]]}-${run.pop()}`
           : run.map((item) => numbersAsGrades.value[item])