@asd20/ui 3.2.811 → 3.2.812

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.811",
+  "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';