@asd20/ui 3.2.875 → 3.2.877

package/package.json

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

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

@@ -149,7 +149,7 @@ export default {
         //remove anchor tags but leave anchor text description
         .replace(/<a[^>]*>(.*?)<\/a>/g, '$1')
         // remove other html tags
-        .replace(/<[^>]+>/g, '')
+        // .replace(/<[^>]+>/g, '')
       return truncate(strippedDescription, { length: 150, separator: /,? +/ })
     },
     classes() {
@@ -272,6 +272,9 @@ export default {
     span {
       display: block;
       margin-top: space(0.5);
+      &::v-deep li {
+        margin-left: 1rem;
+      }
     }
   }
 
@@ -330,9 +333,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/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: {
@@ -241,16 +207,21 @@ export default {
     }
   }
   &__details {
-  }
-  .description,
-  .tags {
-    display: flex;
-    max-width: 100%;
-    padding: space(1);
+    .description,
+    .tags {
+      display: flex;
+      max-width: 100%;
+      padding: space(1);
 
-    * {
-      margin-right: space(0.125);
-      margin-bottom: space(0.125);
+      * {
+        align-items: center;
+      }
+      &::v-deep ul {
+        margin-top: 0;
+      }
+      &::v-deep li {
+        margin-left: 1rem;
+      }
     }
   }
 }

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

@@ -48,13 +48,40 @@
       "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,
       "uid": "MDQwMDAwMDA4MjAwRTAwMDc0QzVCNzEwMUE4MkUwMDgwMDAwMDAwMDYwMzFGM0FERjUwQkQ5MDEwMDAwMDAwMDAwMDAwMDAwMTAwMDAwMDA1NjA4MzhGNkIzMkU3OTQ1ODk2OUU1RUJDRENBM0U4Rg==",
       "type": "event",
       "summary": "First day of second semester",
-      "description": "<a href='www.asd20.org'>Visit ASD20.org</a> for more information.",
+      "description": "<ul><li>In-person attendance is limited to boardroom capacity of 70 audience members per the Colorado Springs Fire Marshall.</li><li>Note, those who attend in person may be captured on camera during the live feed and recorded versions of the meeting.</li><li>The meeting link will be available the week of the meeting.</li></ul><br/>We invite public comment at our meetings.<br/><br/><ul><li>You must sign-up to speak between 7 a.m. and 1 p.m., the day of the board meeting by completing our Public <a href=\"https://forms.office.com/r/4nRw9yhyeS\" target=\"_blank\">Comment Form</a>.</li><li>You must be present and available to speak in-person at the podium when called upon.</li><li>You cannot provide virtual public comment.</li><li>If you cannot attend in-person, we invite you to submit your comments in writing via the Public <a href=\"https://forms.office.com/r/4nRw9yhyeS\" target=\"_blank\">Comment Form</a>. Written comments submitted through the Public Comment Form will not be read publicly at the board meeting, but they will be included as part of the public record in the minutes for the meeting.</li></ul>",
       "location": "AAHS",
       "start": "2023-01-05T07:00:00Z",
       "end": "2023-01-06T07:00:00Z",
@@ -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 `<b>MultiDay Event:</b><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)