@explorer-1/vue 0.2.35 → 0.2.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.35",
+  "version": "0.2.37",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/BasePill/BasePill.vue

@@ -18,6 +18,7 @@ const sizeMap: Attributes = {
 }
 
 interface BasePillProps {
+  text?: string
   variant?: string
   size?: string
   contentType?: string
@@ -44,14 +45,16 @@ const metadataAttrs = computed(() => {
   }
   return { variant: undefined, label: undefined }
 })
+const theText = computed(() => {
+  return props.text || metadataAttrs.value.label
+})
 </script>
 <template>
   <p
     :class="`${variantMap[metadataAttrs.variant || props.variant]} ${sizeMap[props.size]}`"
     class="ThemeVariantLight text-contrast-none inline-block text-white font-bold edu:font-extrabold rounded-full leading-tight m-0 uppercase print:border-none print:px-0"
   >
-    <template v-if="metadataAttrs.label"> {{ metadataAttrs.label }} </template>
-    <template v-else> <slot /></template>
+    {{ theText }}
     <span class="sr-only">.</span>
   </p>
 </template>

package/src/components/BlockLinkCard/BlockLinkCard.vue

@@ -47,9 +47,8 @@
           :class="{ 'mb-2': !large, 'mb-4': large }"
           size="sm"
           :content-type="metadataType"
-        >
-          {{ (theItem as EventCardObject).eventType }}
-        </BasePill>
+          :text="(theItem as EventCardObject).eventType"
+        />
       </template>
       <template
         v-else-if="themeStore.isEdu && theItem.parent?.title && theItem.parent?.title !== 'EDU'"
@@ -117,7 +116,7 @@
         <MetadataEvent
           v-if="metadataType === 'EDUEventPage'"
           :event="theItem"
-          :show-time="false"
+          :show-time="large"
           :show-location="false"
           compact
         />

package/src/components/BlockLinkCardList/BlockLinkCardList.vue

@@ -20,6 +20,7 @@ const props = withDefaults(defineProps<BlockLinkCardListProps>(), {
       :class="{ 'pt-3': index !== 0 }"
       :data="item"
       size="lg"
+      show-calendar-chip
     />
   </div>
 </template>

package/src/components/DetailHeadline/DetailHeadline.vue

@@ -9,9 +9,8 @@
           :variant="pillColor"
           size="lg"
           class="mr-3"
-        >
-          {{ pillLabel }}
-        </BasePill>
+          :text="pillLabel"
+        />
       </template>
       <template v-else>
         <div

package/src/components/HeroLarge/HeroLarge.vue

@@ -40,9 +40,8 @@
                 size="lg"
                 class="mr-3"
                 :content-type="customPillType"
-              >
-                {{ customPill }}
-              </BasePill>
+                :text="customPill"
+              />
               <div
                 v-else-if="label"
                 class="font-secondary text-base font-semibold tracking-wider no-underline uppercase"

package/src/components/HeroMedium/HeroMedium.vue

@@ -61,9 +61,8 @@
               size="sm"
               class="mr-3"
               :content-type="customPillType"
-            >
-              {{ customPill }}
-            </BasePill>
+              :text="customPill"
+            />
             <p
               v-if="customLabel || feature.label"
               class="text-subtitle"

package/src/components/SearchFilterGroup/SearchFilterGroup.vue

@@ -63,6 +63,8 @@
 <script lang="ts">
 // @ts-nocheck
 import isEqual from 'lodash/isEqual.js'
+import { lookupContentType } from './../../utils/lookupContentType'
+
 export default {
   name: 'SearchFilterGroup',
   props: {
@@ -154,67 +156,8 @@ export default {
       }
     },
     prettyFilterNames(key) {
-      if (key === 'news.News') {
-        return 'News & Features'
-      }
-      if (key === 'home.HomePage') {
-        return 'Homepage'
-      }
-      if (key === 'missions.Mission') {
-        return 'Missions'
-      }
-      if (key === 'events.EventPage') {
-        return 'Events'
-      }
-      if (key === 'image_detail.ImageDetailPage') {
-        return 'Images'
-      }
-      if (key === 'audio_detail.AudioIndexPage') {
-        return 'Audio Index'
-      }
-      if (key === 'audio_detail.AudioDetailPage') {
-        return 'Audio'
-      }
-      if (key === 'infographics.InfographicsDetailPage') {
-        return 'Infographics'
-      }
-      if (key === 'image_detail.CuratedGalleryPage') {
-        return 'Curated Gallery'
-      }
-      if (key === 'topics.TopicPage') {
-        return 'Topics'
-      }
-      if (key === 'asteroid_watch.AsteroidWatchIndexPage') {
-        return 'Asteroid Watch Index'
-      }
-      if (key === 'asteroid_watch.AsteroidWatchContentPage') {
-        return 'Asteroid Watch'
-      }
-      if (key === 'missions.MissionsIndexPage') {
-        return 'Missions Index'
-      }
-      if (key === 'information_pages.ContentPage') {
-        return 'Information pages'
-      }
-      if (key === 'robotics.RobotPage') {
-        return 'Robots'
-      }
-      if (key === 'video_detail.VideoDetailPage') {
-        return 'Video'
-      }
-      if (key === 'podcasts.PodcastPage') {
-        return 'Podcasts'
-      }
-      if (key === 'go_pages.GoHomePage') {
-        return 'Go Sites'
-      }
-      if (key === 'press_kits.PressKitHomePage') {
-        return 'Press Kits'
-      }
-      if (key === 'profiles.ProfilePage') {
-        return 'People'
-      }
-      return key
+      const name = lookupContentType(key, 'model', 'label')
+      return name ? name : key
     }
   }
 }

package/src/components/SearchResultCard/SearchResultCard.vue

@@ -6,9 +6,7 @@
       size="lg"
       :data="{
         page: {
-          __typename: pageContentType
-            ? (searchContentTypeToPageType[pageContentType] as string)
-            : undefined,
+          __typename: pageContentType ? getInterfaceFromEskey(pageContentType) : undefined,
           url,
           type,
           label: topic,
@@ -20,10 +18,13 @@
           startDate,
           endTime,
           endDate,
+          customDate,
           location,
-          eventType: eventType
+          eventType: eventType,
+          ongoing
         }
       }"
+      show-calendar-chip
     />
     <EventCard
       v-else-if="isEvents"
@@ -218,7 +219,7 @@ import BaseImage from './../BaseImage/BaseImage.vue'
 import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
 import EventCard from './../EventCard/EventCard.vue'
 import BlockLinkCard from './../BlockLinkCard/BlockLinkCard.vue'
-import { searchContentTypeToPageType } from './../../constants'
+import { lookupContentType } from '../../utils/lookupContentType'
 import type { HeadingLevel } from './../BaseHeading/BaseHeading.vue'
 
 export default defineComponent({
@@ -320,6 +321,11 @@ export default defineComponent({
       required: false,
       default: undefined
     },
+    customDate: {
+      type: String,
+      required: false,
+      default: undefined
+    },
     location: {
       type: String,
       required: false,
@@ -328,12 +334,18 @@ export default defineComponent({
     pageContentType: {
       type: String,
       default: undefined
+    },
+    ongoing: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
-    ...mapStores(useThemeStore),
-    searchContentTypeToPageType() {
-      return searchContentTypeToPageType
+    ...mapStores(useThemeStore)
+  },
+  methods: {
+    getInterfaceFromEskey(key: string) {
+      return lookupContentType(key, 'eskey', 'interface')
     }
   }
 })

package/src/components/SearchResultGridItem/SearchResultGridItem.vue

@@ -98,7 +98,7 @@ import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder
 import BlockLinkCard from './../BlockLinkCard/BlockLinkCard.vue'
 import BlockLinkTile from './../BlockLinkTile/BlockLinkTile.vue'
 import CalendarChip from './../CalendarChip/CalendarChip.vue'
-import { searchContentTypeToPageType } from './../../constants'
+import { lookupContentType } from '../../utils/lookupContentType'
 import type { HeadingLevel } from './../BaseHeading/BaseHeading.vue'
 
 export default defineComponent({
@@ -177,12 +177,9 @@ export default defineComponent({
   },
   computed: {
     ...mapStores(useThemeStore),
-    searchContentTypeToPageType() {
-      return searchContentTypeToPageType
-    },
     typename() {
       return this.pageContentType
-        ? (this.searchContentTypeToPageType[this.pageContentType] as string)
+        ? lookupContentType(this.pageContentType, 'eskey', 'interface')
         : undefined
     }
   }

package/src/components/SearchResultsList/SearchResultsList.vue

@@ -23,10 +23,13 @@
           :topic="page.topic"
           :image="page.image"
           :date="page.date"
+          :custom-date="page.customDate"
           :start-date="page.startDate"
           :end-date="page.endDate"
           :start-time="page.startTime"
           :end-time="page.endTime"
+          :event-type="page.eventType"
+          :ongoing="page.ongoing"
           :location="page.location"
           :title="page.title"
           :summary="page.summary"
@@ -57,6 +60,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import type { ElasticSearchPage } from '../../interfaces'
+
 // @ts-ignore
 import dayjs from 'dayjs'
 import SearchResultCard from './../SearchResultCard/SearchResultCard.vue'
@@ -131,6 +135,8 @@ export default defineComponent({
               const pageType = page._source[handle + '__label']
               if (handle === 'events_eventpage') {
                 date = 'Event date: ' + parseDate(page._source[handle + '__start_datetime'])
+              } else if (handle === 'edu_events_edueventpage') {
+                date = null
               } else if (handle === 'missions_mission') {
                 date = page._source.display_date_filter
                   ? 'Launch date: ' + page._source.display_date_filter
@@ -155,13 +161,37 @@ export default defineComponent({
               page.topic = topic
               // properties for event's page
               page.location =
-                handle === 'events_eventpage' ? page._source[handle + '__location'] : null
+                handle === 'events_eventpage' || handle === 'edu_events_edueventpage'
+                  ? page._source[handle + '__location'] | page._source[handle + '__location_name']
+                  : null
               page.startDate =
-                handle === 'events_eventpage' ? page._source[handle + '__start_datetime'] : null
+                handle === 'events_eventpage' || handle === 'edu_events_edueventpage'
+                  ? page._source[handle + '__start_datetime']
+                  : null
               page.endDate =
-                handle === 'events_eventpage' ? page._source[handle + '__end_datetime'] : null
+                handle === 'events_eventpage' || handle === 'edu_events_edueventpage'
+                  ? page._source[handle + '__end_datetime']
+                  : null
               page.startTime =
-                handle === 'events_eventpage' ? page._source[handle + '__start_time_string'] : null
+                handle === 'events_eventpage' || handle === 'edu_events_edueventpage'
+                  ? page._source[handle + '__start_time_string']
+                  : null
+              page.endTime =
+                handle === 'events_eventpage' || handle === 'edu_events_edueventpage'
+                  ? page._source[handle + '__end_time_string']
+                  : null
+              page.eventType =
+                handle === 'edu_events_edueventpage'
+                  ? page._source.edu_events_edueventpage__event_type_label_filter
+                  : undefined
+              page.customDate =
+                handle === 'edu_events_edueventpage'
+                  ? page._source.edu_events_edueventpage__custom_date
+                  : undefined
+              page.ongoing =
+                handle === 'edu_events_edueventpage'
+                  ? page._source.edu_events_edueventpage__ongoing
+                  : undefined
               // properties that are different for profiles page
               page.summary =
                 handle === 'profiles_profilepage'

package/src/constants.ts

@@ -1,7 +1,8 @@
-import type { DictionaryInterface, PillDictionaryInterface } from './interfaces'
+import type { PillDictionaryInterface } from './interfaces'
 
 export const eduMetadataDictionary: PillDictionaryInterface = {
   EDUEventPage: {
+    label: 'Event',
     variant: 'primary',
     icons: 'primary',
     type: 'event'
@@ -68,14 +69,184 @@ export const eduMetadataDictionary: PillDictionaryInterface = {
   }
 }
 
-// TODO: finish this
-export const searchContentTypeToPageType: DictionaryInterface = {
-  news_news: 'News',
-  events_eventpage: 'EventPage',
-  missions_mission: 'Mission',
-  eduevents_edueventpage: 'EDUEventPage',
-  eduresources_educollectionsdetailpage: 'EDUCollectionsDetailPage',
-  eduresources_eduexplainerarticlepage: 'EDUExplainerArticlePage',
-  eduresources_edulessonpage: 'EDULessonPage',
-  eduresources_eduteachablemomentpage: 'EDUTeachableMomentPage'
+interface contentTypeObject {
+  model: string
+  label: string
 }
+
+export const contentTypes: contentTypeObject[] = [
+  {
+    model: 'news.News',
+    label: 'News & Features'
+  },
+  {
+    model: 'home.HomePage',
+    label: 'Homepage'
+  },
+  {
+    model: 'missions.Mission',
+    label: 'Missions'
+  },
+  {
+    model: 'events.EventPage',
+    label: 'Events'
+  },
+  {
+    model: 'image_detail.ImageDetailPage',
+    label: 'Images'
+  },
+  {
+    model: 'audio_detail.AudioIndexPage',
+    label: 'Audio Index'
+  },
+  {
+    model: 'audio_detail.AudioDetailPage',
+    label: 'Audio'
+  },
+  {
+    model: 'infographics.InfographicsDetailPage',
+    label: 'Infographics'
+  },
+  {
+    model: 'image_detail.CuratedGalleryPage',
+    label: 'Curated Gallery'
+  },
+  {
+    model: 'topics.TopicPage',
+    label: 'Topics'
+  },
+  {
+    model: 'asteroid_watch.AsteroidWatchIndexPage',
+    label: 'Asteroid Watch Index'
+  },
+  {
+    model: 'asteroid_watch.AsteroidWatchContentPage',
+    label: 'Asteroid Watch'
+  },
+  {
+    model: 'missions.MissionsIndexPage',
+    label: 'Missions Index'
+  },
+  {
+    model: 'information_pages.ContentPage',
+    label: 'Information pages'
+  },
+  {
+    model: 'robotics.RobotPage',
+    label: 'Robots'
+  },
+  {
+    model: 'video_detail.VideoDetailPage',
+    label: 'Video'
+  },
+  {
+    model: 'podcasts.PodcastPage',
+    label: 'Podcasts'
+  },
+  {
+    model: 'go_pages.GoHomePage',
+    label: 'Go Sites'
+  },
+  {
+    model: 'press_kits.PressKitHomePage',
+    label: 'Press Kits'
+  },
+  {
+    model: 'profiles.ProfilePage',
+    label: 'People'
+  },
+  // EDU content types
+  {
+    model: 'edu_home.EDUHomePage',
+    label: 'Education Homepage'
+  },
+  {
+    model: 'edu_information_pages.EDUContentPage',
+    label: 'Information Pages'
+  },
+  {
+    model: 'edu_news.EDUNewsIndexPage',
+    label: 'News Index'
+  },
+  {
+    model: 'edu_events.EDUEventsIndexPage',
+    label: 'Events Index'
+  },
+  {
+    model: 'edu_events.EDUEventPage',
+    label: 'Events'
+  },
+  {
+    model: 'edu_news.EDUNewsPage',
+    label: 'News'
+  },
+  {
+    model: 'edu_resources.EDUExplainerArticlePage',
+    label: 'Explainer Articles'
+  },
+  {
+    model: 'edu_resources.EDUResourceLibraryIndexPage',
+    label: 'Resource Library Index'
+  },
+  {
+    model: 'edu_resources.EDULessonPage',
+    label: 'Lesson Plans'
+  },
+  {
+    model: 'edu_resources.EDUTeachableMomentPage',
+    label: 'Teachable Moments'
+  },
+  {
+    model: 'edu_resources.EDUCollectionsDetailPage',
+    label: 'Collections'
+  },
+  {
+    model: 'edu_resources.EDUGalleryDetailPage',
+    label: 'Galleries'
+  },
+  {
+    model: 'edu_resources.EDUImageDetailPage',
+    label: 'Images'
+  },
+  {
+    model: 'edu_resources.EDUInfographicDetailPage',
+    label: 'Infographics'
+  },
+  {
+    model: 'edu_resources.EDUDocumentDetailPage',
+    label: 'Documents'
+  },
+  {
+    model: 'edu_resources.EDUVideoDetailPage',
+    label: 'Videos'
+  }
+]
+
+interface contentAliasObject extends contentTypeObject {
+  interface?: string
+  eskey?: string
+}
+const getContentAliases = (): contentAliasObject[] => {
+  const getInterface = (contentType: contentTypeObject) => {
+    const model = contentType.model
+    return model ? model.split('.').pop() : undefined
+  }
+  const getEskey = (contentType: contentTypeObject) => {
+    const model = contentType.model
+    return model ? model.toLowerCase().replace('.', '_') : undefined
+  }
+
+  let entries: contentAliasObject[] = []
+
+  contentTypes.forEach((contentType) => {
+    const entry: contentAliasObject = {
+      ...contentType,
+      interface: getInterface(contentType),
+      eskey: getEskey(contentType)
+    }
+    entries.push(entry)
+  })
+  return entries
+}
+
+export const contentAliases = getContentAliases()

package/src/interfaces.ts

@@ -79,16 +79,19 @@ export interface ElasticSearchPage {
   content_type: string
   url: string
   type: string
-  topic: string
-  image: string | any
-  date: string
-  startDate: string
-  endDate: string
-  startTime: string
-  endTime: string
-  location: string
+  topic?: string
+  image?: string | any
+  date?: string
+  startDate?: string
+  endDate?: string
+  customDate?: string
+  startTime?: string
+  endTime?: string
+  location?: string
   title: string
-  summary: string
+  summary?: string
+  eventType?: string
+  ongoing?: boolean
 }
 
 export interface FormOption {

package/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue

@@ -36,9 +36,8 @@
         <BasePill
           variant="primary"
           size="lg"
-        >
-          {{ data.eventType }}
-        </BasePill>
+          :text="data.eventType"
+        />
       </div>
       <BaseHeading
         level="h1"

package/src/utils/lookupContentType.ts

@@ -0,0 +1,22 @@
+import { contentAliases } from './../constants'
+
+export const getInterfaceFromEskey = (eskey: string) => {
+  let match = undefined
+  contentAliases.forEach((alias) => (alias.eskey === eskey ? (match = alias.interface) : undefined))
+  return match
+}
+
+export const getEskeyFromInterface = (interfaceName: string) => {
+  let match = undefined
+  contentAliases.forEach((alias) =>
+    alias.interface === interfaceName ? (match = alias.eskey) : undefined
+  )
+  return match
+}
+
+export const lookupContentType = (key: string, source: string, target: string) => {
+  let match = undefined
+  // @ts-expect-error
+  contentAliases.forEach((entry) => (entry[source] === key ? (match = entry[target]) : undefined))
+  return match
+}