@asd20/ui 3.2.874 → 3.2.876

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.874",
+  "version": "3.2.876",
   "private": false,
   "license": "MIT",
   "repository": {

package/src/components/molecules/Asd20Card/index.vue

@@ -330,9 +330,9 @@ export default {
     font-weight: bold;
     font-family: var(--website-typography__font-family-headlines);
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     margin-top: space(0.5);
-    margin-bottom: 0;
+    margin-bottom: space(0.5);
     .asd20-icon {
       --line-color: var(--website-icon__line-color);
       margin-left: -0.125em;

package/src/components/molecules/Asd20ListItem/index.vue

@@ -126,8 +126,8 @@ export default {
     targetValue() {
       const hostname =
         typeof window !== 'undefined' ? window.location.host : 'www.asd20.org'
-      return (this.link.includes('http') && !this.link.includes(hostname)) ||
-        (this.to.includes('http') && !this.link.includes(hostname))
+      return (this.link && this.link.includes('http') && !this.link.includes(hostname)) ||
+        (this.to && this.to.includes('http') && !this.link.includes(hostname))
         ? '_blank'
         : '_self'
     },

package/src/components/organisms/Asd20EventModal/index.vue

@@ -55,12 +55,13 @@
 </template>
 
 <script>
-import { format, parse } from 'date-fns'
 import Asd20Modal from '../../molecules/Asd20Modal'
 import Asd20Tag from '../../atoms/Asd20Tag'
 import Asd20List from '../../organisms/Asd20List'
 import Asd20ListItem from '../../molecules/Asd20ListItem'
 import Asd20Viewport from '../../atoms/Asd20Viewport'
+import formattedTime from '../../../helpers/formatEventTime'
+import truncate from 'lodash-es/truncate'
 
 export default {
   name: 'Asd20EventModal',
@@ -80,42 +81,7 @@ export default {
       return truncate(this.sanitizedSummary, { length: 75 })
     },
     time() {
-      if (!this.event) return null
-
-      const startTime = parse(
-        this.event.start,
-        "yyyy-MM-dd'T'HH:mm:ssX",
-        new Date()
-      )
-      const endTime = parse(
-        this.event.end,
-        "yyyy-MM-dd'T'HH:mm:ssX",
-        new Date()
-      )
-
-      const startHour = startTime.getHours()
-      // Display 'TBD' if start time is the same as end time and falls between 11 PM and 3 AM
-      if (
-        startTime.getTime() === endTime.getTime() &&
-        (startHour >= 23 || startHour < 3)
-      ) {
-        return 'TBD'
-      }
-
-      let time = `${format(startTime, '<b>h:mm aa</b>').replace(/:00/g, '')}`
-
-      // Check if end time is the same as start time
-      if (startTime.getTime() === endTime.getTime()) {
-        time += '' // No end time needed if they are the same
-      } else if (this.event.endTimeUndetermined) {
-        time += `${format(endTime).replace(/:00/g, '')}`
-      } else {
-        time += ` - ${format(endTime, '<b>h:mm aa</b>')
-          .replace(/#/g, '&nbsp;')
-          .replace(/:00/g, '')}`
-      }
-
-      return time
+      return this.event ? formattedTime(this.event) : null
     },
   },
   methods: {

package/src/data/events/district-events.json

@@ -48,6 +48,33 @@
       "calendarFormat": "ical",
       "calendarColor": "#213f94"
     },
+    {
+      "@search.score": 1,
+      "id": null,
+      "uid": "MDQwMDAwMDA4MjAwRTAwMDc0QzVCNzEwMUE4MkUwMDgwMDAwMDAwMERFRTE5NzcxNThBQ0RBMDEwMDAwMDAwMDAwMDAwMDAwMTAwMDAwMDBFOEVBMjc5NkM0MDI3RjRGODFFNzY1QzQ0M0VGMDA0Mw==",
+      "type": "event",
+      "summary": "All State Choir",
+      "description": "",
+      "location": "Denver Center for the Performing Arts (1101 13th St, Denver, CO 80204, United States)",
+      "start": "2023-01-09T17:00:00Z",
+      "end": "2023-01-11T17:30:00Z",
+      "dtstamp": "2023-01-09T17:00:00Z",
+      "class": "",
+      "priority": "",
+      "transparency": "",
+      "status": "",
+      "sequence": "",
+      "url": null,
+      "calendarId": "a0c92470-27a0-11ec-a6e3-c76d885e64a4",
+      "calendarName": "Choir",
+      "calendarOrganizationId": "bb6e9cd6-da25-9e6f-5e8d-072b9a7df4f0",
+      "calendarOrganizationTitle": "Air Academy High School",
+      "calendarCategories": [],
+      "calendarKeywords": [],
+      "calendarUrl": "https://outlook.office365.com/owa/calendar/6a1a45f079b7416f8b301747cd731778@asd20.org/93eb354f1a6b446bb533e2f40613f8a310360980508845501669/calendar.ics",
+      "calendarFormat": "ical",
+      "calendarColor": "#eb28c7"
+    },
     {
       "@search.score": 1,
       "id": null,
@@ -292,4 +319,4 @@
       "calendarColor": "#213f94"
     }
   ]
-}
+}

package/src/helpers/formatEventTime.js

@@ -0,0 +1,47 @@
+import format from 'date-fns/format'
+import parse from 'date-fns/parse'
+
+export default function formattedTime(event) {
+  if (!event) return
+
+  if (event.allDay) return 'All Day'
+
+  if (event.multiDay) {
+    return `MultiDay Event:<br/>Starts: ${format(
+      parse(event.originalStart, "yyyy-MM-dd'T'HH:mm:ssX", new Date()),
+      '<b>h:mm aa</b>, ddd, MMM DD, YYYY'
+    )
+      .replace(/#/g, '&nbsp;')
+      .replace(/:00/g, '')}<br>Ends: ${format(
+      parse(event.end, "yyyy-MM-dd'T'HH:mm:ssX", new Date()),
+      '<b>h:mm aa</b>, ddd, MM DD, YYYY'
+    )
+      .replace(/#/g, '&nbsp;')
+      .replace(/:00/g, '')}`
+  }
+
+  const startTime = parse(event.start, "yyyy-MM-dd'T'HH:mm:ssX", new Date())
+  const endTime = parse(event.end, "yyyy-MM-dd'T'HH:mm:ssX", new Date())
+  const startHour = startTime.getHours()
+
+  if (
+    startTime.getTime() === endTime.getTime() &&
+    (startHour >= 23 || startHour < 3)
+  ) {
+    return 'TBD'
+  }
+
+  let time = `${format(startTime, '<b>h:mm aa</b>').replace(/:00/g, '')}`
+
+  if (startTime.getTime() === endTime.getTime()) {
+    time += ''
+  } else if (event.endTimeUndetermined) {
+    time += `${format(endTime).replace(/:00/g, '')}`
+  } else {
+    time += ` - ${format(endTime, '<b>h:mm aa</b>')
+      .replace(/#/g, '&nbsp;')
+      .replace(/:00/g, '')}`
+  }
+
+  return time
+}

package/src/helpers/mapEventToCard.js

@@ -1,5 +1,6 @@
 import format from 'date-fns/format'
 import parse from 'date-fns/parse'
+import formattedTime from './formatEventTime'
 
 // Function to sanitize the summary
 const sanitizeSummary = summary => {
@@ -35,51 +36,6 @@ const sanitizeDescription = description => {
   return description
 }
 
-const formattedTime = event => {
-  if (!event) return
-
-  if (event.allDay) return 'All Day'
-
-  if (event.multiDay) {
-    return `${format(
-      parse(event.originalStart, "yyyy-MM-dd'T'HH:mm:ssX", new Date()),
-      '<b>h:mm aa</b>, dddd, MMMM dd, yyyy'
-    )
-      .replace(/#/g, '&nbsp;')
-      .replace(/:00/g, '')}<br>ending ${format(
-      parse(event.end, "yyyy-MM-dd'T'HH:mm:ssX", new Date()),
-      '<b>h:mm aa</b>, dddd, MMMM dd, yyyy'
-    )
-      .replace(/#/g, '&nbsp;')
-      .replace(/:00/g, '')}`
-  }
-
-  const startTime = parse(event.start, "yyyy-MM-dd'T'HH:mm:ssX", new Date())
-  const endTime = parse(event.end, "yyyy-MM-dd'T'HH:mm:ssX", new Date())
-  const startHour = startTime.getHours()
-
-  if (
-    startTime.getTime() === endTime.getTime() &&
-    (startHour >= 23 || startHour < 3)
-  ) {
-    return 'TBD'
-  }
-
-  let time = `${format(startTime, '<b>h:mm aa</b>').replace(/:00/g, '')}`
-
-  if (startTime.getTime() === endTime.getTime()) {
-    time += ''
-  } else if (event.endTimeUndetermined) {
-    time += `${format(endTime).replace(/:00/g, '')}`
-  } else {
-    time += ` - ${format(endTime, '<b>h:mm aa</b>')
-      .replace(/#/g, '&nbsp;')
-      .replace(/:00/g, '')}`
-  }
-
-  return time
-}
-
 export default function mapEventToCard(event) {
   const sanitizedSummary = sanitizeSummary(event.summary)
   const sanitizedDescription = sanitizeDescription(event.description)