@asd20/ui 3.2.810 → 3.2.812

package/package.json

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

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

@@ -2,9 +2,7 @@
   <asd20-modal
     v-if="event"
     :open="open"
-    :title="
-      `${event.calendarOrganizationTitle || event.calendarLocation} Event`
-    "
+    :title="`${event.calendarOrganizationTitle || event.calendarLocation} Event`"
     icon="calendar-alt"
     dismissable
     class="asd20-event-modal"
@@ -23,7 +21,7 @@
       </header>
       <Asd20List class="description">
         <Asd20ListItem
-          v-if="time"
+          v-if="time !== null"
           icon="hours-alt"
           icon-size="lg"
           label="Time"
@@ -55,18 +53,12 @@
 </template>
 
 <script>
-// import parse from 'date-fns/parse'
-// import Vue from 'vue'
-
-import { truncate } from 'lodash-es'
 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 VScrollLock from 'v-scroll-lock'
-// Vue.use(VScrollLock)
 
 export default {
   name: 'Asd20EventModal',
@@ -81,32 +73,37 @@ export default {
     },
 
     time() {
-      if (!this.event) return
+      if (!this.event) return null
 
-      if (this.event.allDay) return 'All Day'
+      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())
 
-      if (this.event.multiDay) {
-        return `${format(
-          parse(this.event.originalStart),
-          '<b>h:mm aa</b>, dddd, MMMM DD, YYYY'
-        )}<br>ending ${format(
-          parse(this.event.end),
-          '<b>h:mm aa</b>, dddd, MMMM DD, YYYY'
-        )}`
+      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(parse(this.event.start), '<b>h:mm aa</b>')}`
-      if (this.event.endTimeUndetermined) {
-        time += `${format(parse(this.event.end))}`
+      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(parse(this.event.end), '<b>h:mm aa</b>')}`
+        time += ` - ${format(endTime, '<b>h:mm aa</b>')
+          .replace(/#/g, '&nbsp;')
+          .replace(/:00/g, '')}`
       }
+
       return time
     },
   },
 }
 </script>
 
+
 <style lang="scss" scoped>
 @import '../../../design/_mixins.scss';
 @import '../../../design/_variables.scss';

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

@@ -83,8 +83,8 @@
       "summary": "Parent Council - College Info Meeting",
       "description": "Admissions officers from several local and regional colleges/universities will be in attendance sharing information about their schools.",
       "location": "AAHS Media Center",
-      "start": "2023-01-19T20:20:00Z",
-      "end": "2023-01-19T21:50:00Z",
+      "start": "2023-01-19T08:20:00Z",
+      "end": "2023-01-19T08:20:00Z",
       "dtstamp": "2023-01-19T20:20:00Z",
       "class": "",
       "priority": "",

package/src/helpers/mapEventToCard.js

@@ -1,3 +1,57 @@
+// import format from 'date-fns/format'
+// import parse from 'date-fns/parse'
+
+// const formattedTime = event => {
+//   if (!event) return
+
+//   if (event.allDay) return 'All Day'
+
+//   if (event.multiDay) {
+//     return `${format(
+//       parse(event.originalStart),
+//       '<b>h:mm aa</b>, dddd, MMMM DD, YYYY'
+//     )
+//       .replace(/#/g, '&nbsp;')
+//       .replace(/:00/g, '')}<br>ending ${format(
+//       parse(event.end),
+//       '<b>h:mm aa</b>, dddd, MMMM DD, YYYY'
+//     )
+//       .replace(/#/g, '&nbsp;')
+//       .replace(/:00/g, '')}`
+//   }
+
+//   let time = `${format(parse(event.start), '<b>h:mm aa</b>').replace(
+//     /:00/g,
+//     ''
+//   )}`
+//   if (event.endTimeUndetermined) {
+//     time += `${format(parse(event.end)).replace(/:00/g, '')}`
+//   } else {
+//     time += ` - ${format(parse(event.end), '<b>h:mm aa</b>')
+//       .replace(/#/g, '&nbsp;')
+//       .replace(/:00/g, '')}`
+//   }
+//   return time
+// }
+
+// export default function mapEventToCard(event) {
+//   return {
+//     title: event.summary,
+//     // subtitle: 'Some subtitle goes here',
+//     description: event.description,
+//     categories: event.calendarCategories.concat([event.calendarName]),
+//     date: format(event.start),
+//     time: formattedTime(event),
+//     weekday: event.weekday,
+//     day: event.day,
+//     month: event.month,
+//     year: event.year,
+//     emphasizedDate: true,
+//     location: event.location || event.calendarLocation,
+//     isFeatured: event.isFeatured || event.isDistrictFeatured,
+//   }
+// }
+
 import format from 'date-fns/format'
 import parse from 'date-fns/parse'
 
@@ -8,29 +62,39 @@ const formattedTime = event => {
 
   if (event.multiDay) {
     return `${format(
-      parse(event.originalStart),
-      '<b>h:mm aa</b>, dddd, MMMM DD, YYYY'
+      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),
-      '<b>h:mm aa</b>, dddd, MMMM DD, YYYY'
+      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, '')}`
   }
 
-  let time = `${format(parse(event.start), '<b>h:mm aa</b>').replace(
-    /:00/g,
-    ''
-  )}`
-  if (event.endTimeUndetermined) {
-    time += `${format(parse(event.end)).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())
+  // if start and end time are the same AND the start time is between 11pm and 3am, then set the start time as TBD and do not include an end time
+  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, '')}`
+
+  // 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 (event.endTimeUndetermined) {
+    time += `${format(endTime).replace(/:00/g, '')}`
   } else {
-    time += ` - ${format(parse(event.end), '<b>h:mm aa</b>')
+    time += ` - ${format(endTime, '<b>h:mm aa</b>')
       .replace(/#/g, '&nbsp;')
       .replace(/:00/g, '')}`
   }
+
   return time
 }
 
@@ -40,7 +104,7 @@ export default function mapEventToCard(event) {
     // subtitle: 'Some subtitle goes here',
     description: event.description,
     categories: event.calendarCategories.concat([event.calendarName]),
-    date: format(event.start),
+    date: format(parse(event.start, "yyyy-MM-dd'T'HH:mm:ssX", new Date())),
     time: formattedTime(event),
     weekday: event.weekday,
     day: event.day,
@@ -51,3 +115,4 @@ export default function mapEventToCard(event) {
     isFeatured: event.isFeatured || event.isDistrictFeatured,
   }
 }
+