From 6119f0b1d8299960345012de1499addf709270f4 Mon Sep 17 00:00:00 2001 From: jendiamond Date: Tue, 19 Nov 2024 13:51:28 -0800 Subject: [PATCH] Fix the date range format, fix ongoing story --- src/lib-components/BlockStaffArticleList.vue | 17 ++--- src/lib-components/Date.vue | 51 ------------- src/stories/BlockStaffArticleList.stories.js | 18 ++++- src/stories/Date.stories.js | 75 ------------------- .../ftva/_block-staff-article-item.scss | 24 +++--- src/utils/formatEventSeriesDates.js | 52 +++++++++++++ 6 files changed, 86 insertions(+), 151 deletions(-) delete mode 100644 src/lib-components/Date.vue delete mode 100644 src/stories/Date.stories.js create mode 100644 src/utils/formatEventSeriesDates.js diff --git a/src/lib-components/BlockStaffArticleList.vue b/src/lib-components/BlockStaffArticleList.vue index 1010bca11..ca7df136f 100644 --- a/src/lib-components/BlockStaffArticleList.vue +++ b/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" /> -
diff --git a/src/lib-components/Date.vue b/src/lib-components/Date.vue deleted file mode 100644 index eb0b5bdfc..000000000 --- a/src/lib-components/Date.vue +++ /dev/null @@ -1,51 +0,0 @@ -// Single date, Date Range & Ongoing - - - - - diff --git a/src/stories/BlockStaffArticleList.stories.js b/src/stories/BlockStaffArticleList.stories.js index 1c4743679..804677c17 100644 --- a/src/stories/BlockStaffArticleList.stories.js +++ b/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" /> `, } diff --git a/src/stories/Date.stories.js b/src/stories/Date.stories.js deleted file mode 100644 index d3f72c44f..000000000 --- a/src/stories/Date.stories.js +++ /dev/null @@ -1,75 +0,0 @@ -import { computed } from 'vue' -import Date from '@/lib-components/Date' - -// Storybook default settings -export default { - title: 'Date', - component: Date, -} - -const mockDefault = { - startDate: "2026-11-03T00:00:00", - endDate: "2027-12-23T00:00:00", - ongoing: false -} - -// Variations of stories below -export function Default() { - return { - data() { - return { data: mockDefault } - }, - components: { Date }, - template: ` - - `, - } -} - -const mockStartEndDateSame = { - startDate: "2025-11-23T00:00:00", - endDate: "2025-11-23T00:00:00", - ongoing: false -} - -export function StartEndDateSame() { - return { - data() { - return { data: mockStartEndDateSame } - }, - components: { Date }, - template: ` - - `, - } -} - -const mockOngoing = { - startDate: "2025-12-23T00:00:00", - endDate: null, - ongoing: true -} - -export function Ongoing() { - return { - data() { - return { data: mockOngoing } - }, - components: { Date }, - template: ` - - `, - } -} diff --git a/src/styles/ftva/_block-staff-article-item.scss b/src/styles/ftva/_block-staff-article-item.scss index d38f5d8aa..92b488a71 100644 --- a/src/styles/ftva/_block-staff-article-item.scss +++ b/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; diff --git a/src/utils/formatEventSeriesDates.js b/src/utils/formatEventSeriesDates.js new file mode 100644 index 000000000..cb97a0b9d --- /dev/null +++ b/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