Fix the date range format, fix ongoing story

src/lib-components/BlockStaffArticleList.vue

@@ -10,7 +10,7 @@ import format from 'date-fns/format'
 
 // UTILITY FUNCTIONS
 import removeHtmlTruncate from '@/utils/removeHtmlTruncate'
-import formatDates from '@/utils/formatEventDates'
+import formatSeriesDates from '@/utils/formatEventSeriesDates'
 
 // THEME
 import { useTheme } from '@/composables/useTheme'
@@ -24,7 +24,7 @@ import type { ArticleStaffItemType, MediaItemType } from '@/types/types'
 // CHILD COMPONENTS
 import ResponsiveImage from '@/lib-components/ResponsiveImage.vue'
 import SmartLink from '@/lib-components/SmartLink.vue'
-//import Date from '@/lib-components/Date.vue'
+// import Date from '@/lib-components/Date.vue'
 
 // PROPS & DATA
 const props = defineProps({
@@ -102,12 +102,12 @@ const parsedTextAll = computed(() => {
 
 // Display date based on which data is provided
 const parsedDateDisplay = computed(() => {
-  if (props.ongoing == true)
+  if (props.ongoing === true)
     return 'Ongoing'
   else if (props.endDate)
-    return formatDates(props.startDate, props.endDate, 'shortWithYear')
+    return formatSeriesDates(props.startDate, props.endDate, 'shortWithYear')
   else if (props.startDate)
-    return formatDates(props.startDate, props.startDate)
+    return formatSeriesDates(props.startDate, props.startDate)
   else
     return null
 })
@@ -141,7 +141,6 @@ isMobile.value = newWidth <=
       object-fit="cover"
       class="image"
     />
-
     <div
       v-else
       class="molecule-no-image"
@@ -208,9 +207,9 @@ isMobile.value = newWidth <=
       </div>
 
       <!-- <Date
-        :startDate="startDate"
-        :endDate="endDate"
-        :ongoing="ongoing"
+        :startDate="props.startDate"
+        :endDate="props.endDate"
+        :ongoing="props.ongoing"
       /> -->
     </div>
   </li>

src/stories/BlockStaffArticleList.stories.js

@@ -41,6 +41,16 @@ const mockDateRange2 = {
   ongoing: false
 }
 
+const mockOngoing = {
+  to: "series/a-film-series-for-you-celebrating-giant-robot-äôs-30th-anniversary",
+  title: "An Ongoing Film Series for You",
+  image: API.image,
+  description: "This deep into the post-print era it may be hard for some to understand.",
+  startDate: "2024-11-01T19:30:00",
+  endDate: null,
+  ongoing: true
+}
+
 // Variations of stories below
 export function Default() {
   return {
@@ -240,7 +250,7 @@ export function FtvaStartEndDateSame() {
 export function FtvaOngoing() {
   return {
     data() {
-      return { ...mockDateRange }
+      return { ...mockOngoing }
     },
     provide() {
       return {
@@ -254,9 +264,9 @@ export function FtvaOngoing() {
           :to="to"
           :title="title"
           :description="description"
-          startDate="2024-11-01T19:30:00"
-          endDate=null
-          ongoing=true
+          :startDate="startDate"
+          :endDate="endDate"
+          :ongoing="ongoing"
       />
   `,
   }

src/styles/ftva/_block-staff-article-item.scss

@@ -2,18 +2,18 @@
   margin-bottom: 0;
   padding-bottom: 0;
 
-  .image {
-    max-width: 284px;
-    height: 213px;
-    width: 33%;
-    aspect-ratio: 4/3;
-    margin-right: var(--space-xl);
-  }
-
-  .meta {
-    width: unset;
-    height: 213px;
-  }
+  // .image {
+  //   max-width: 284px;
+  //   height: 213px;
+  //   width: 33%;
+  //   aspect-ratio: 4/3;
+  //   margin-right: var(--space-xl);
+  // }
+
+  // .meta {
+  //   width: unset;
+  //   height: 213px;
+  // }
 
   .title {
     @include ftva-card-title-1;

src/utils/formatEventSeriesDates.js

@@ -0,0 +1,52 @@
+import format from 'date-fns/format'
+
+/**
+ * Take two date strings, and return them in human readable date formats for Events
+ *
+ * @param {string} startDate
+ * @param {string} endDate
+ * @param {string} dateFormat - 'long', 'short', or 'shortWithYear'
+ * @returns {string}
+ */
+
+function formatDates(startDate = '', endDate = '', dateFormat = 'long') {
+  const start = format(new Date(startDate), 'MMMM d, Y')
+  // console.log(start)
+  const end = format(new Date(endDate), 'MMMM d, Y')
+
+  // "February 11 2020 – May 31 2021"
+  let output = `${start} - ${end}`
+
+  if (start === end) {
+    // Thursday, January 28
+    output = format(new Date(startDate), 'MMMM d, Y')
+  }
+
+  if (!endDate) {
+    // February 11 2020
+    output = start
+  }
+
+  if (dateFormat === 'short' || dateFormat === 'shortWithYear') {
+    // "Feb 11 2020"
+    const day = output.slice(0, 3)
+    const dateYear = output.split(' ').slice(1).join(' ')
+    if (endDate && endDate !== startDate) {
+      // Feb 11 – May 31
+      const shortFormatStartDate = format(new Date(startDate), 'MMM d, Y')
+      const shortFormatEndDate = format(new Date(endDate), 'MMM d, Y')
+      // if 'shortWithYear' is selected, add the year to the end date
+      // Feb 11 – May 31 2020
+      if (dateFormat === 'shortWithYear') {
+        const shortFormatEndDateYear = format(new Date(endDate), 'MMM d, Y')
+        return `${shortFormatStartDate} - ${shortFormatEndDateYear}`
+      }
+      return `${shortFormatStartDate} - ${shortFormatEndDate}`
+    }
+    return `${day} ${dateYear}`
+  }
+
+  return output
+}
+
+export default formatDates