@icvdeveloper/common-module 1.4.13 → 2.0.0

package/dist/runtime/components/agenda/AgendaTabbed.vue

@@ -3,13 +3,9 @@ import { toRefs, computed } from "vue";
 import { get } from "lodash-es";
 import { DateTime } from "luxon";
 import { useAgenda } from "../../composables/useAgenda";
-import type { Conference, Sponsor as SponsorType } from "../../models/conference";
 import { usePresentation } from "../../composables/usePresentation";
 import { usePresenters } from "../../composables/usePresenters";
-import CommonAccordion from "../layouts/Accordion.vue";
-import Sponsor from "./components/Sponsor.vue";
-import PresentationLink from "./components/PresentationLink.vue";
-import Calendar from "./components/Calendar.vue";
+import type { Conference, Day, Presenter, Presentation, Sponsor as SponsorType } from "../../models/conference";
 
 type Props = {
   conference: Conference;
@@ -67,7 +63,7 @@ const presentersContainer = computed(() => {
           <button
             v-for="(day, index) in days"
             :key="index"
-            class="flex-1 md:flex-initial py-5 px-4 md:px-6 text-base text-center cursor-pointer no-underline heading-color-2 focus:outline-none agenda-tab"
+            class="flex-1 md:flex-initial py-5 px-4 md:px-6 text-base text-center cursor-pointer heading-color-2 focus:outline-none agenda-tab"
             :class="{
               'agenda-tab-active-bg-color agenda-tab-color':
                 day === selectedDay,
@@ -77,7 +73,7 @@ const presentersContainer = computed(() => {
           >
             {{ day.name }}
             <small v-if="showTabDates(day)">{{ 
-              DateTime.fromSQL(day.date, { zone: conference.timezone }).toFormat("MMMM d, yyyy")
+              DateTime.fromSQL(day?.date as string, { zone: conference.timezone }).toFormat("MMMM d, yyyy")
             }}</small>
           </button>
         </div>
@@ -85,15 +81,14 @@ const presentersContainer = computed(() => {
         <div
           class="flex w-1/4 items-center agenda-tab-sponsor-bg-color flex-row-reverse pr-5"
         >
-          <Sponsor
-            v-if="shouldShowSponsors(selectedDay)"
-            :sponsor="selectedDay.sponsors[0]"
+          <CommonComponentsSponsor
+            v-if="shouldShowSponsors(selectedDay as Day)"
+            :sponsor="selectedDay?.sponsors[0] as SponsorType"
             :show-label="false"
             size="small"
             :enabled-sponsors="enabledSponsors"
             class="agenda-day-sponsor"
-          >
-          </Sponsor>
+          />
         </div>
       </div>
     </div>
@@ -126,11 +121,12 @@ const presentersContainer = computed(() => {
           <!-- TRACK + SESSIONS CONTAINER -->
           <div
             v-for="(track, trackIndex) in getTracks(group_or_track)"
-            :key="track.id"
-            :id="(group_or_track.type == 'track_group') ? 
+            :id="
+              (group_or_track.type == 'track_group') ? 
               'agenda-track-group-'+group_or_track.id :
               'agenda-track-'+group_or_track.id
             "
+            :key="track.id"
             :class="(group_or_track.type == 'track_group') ? 
               'agenda-track-group' :
               'agenda-track'
@@ -148,7 +144,7 @@ const presentersContainer = computed(() => {
                 :class="{
                   'lg:w-3/4':
                     !isSmallGroupedTrack(group_or_track) &&
-                    track.sponsors.length,
+                    track?.sponsors?.length,
                 }"
               >
                 <h2
@@ -163,22 +159,21 @@ const presentersContainer = computed(() => {
               </div>
               <!-- TRACK SPONSOR -->
               <div
-                v-if="track.sponsors.length"
+                v-if="track != undefined && track?.sponsors?.length"
                 class="flex w-full pb-2 content-center items-center"
                 :class="{
                   'lg:pb-0 lg:w-1/4 lg:pr-5':
                     !isSmallGroupedTrack(group_or_track),
                 }"
               >
-                <sponsor
+                <CommonComponentsSponsor
                   v-if="shouldShowSponsors(track)"
-                  :sponsor="track.sponsors[0]"
+                  :sponsor="track?.sponsors[0]"
                   :inline="true"
                   size="small"
                   :enabled-sponsors="enabledSponsors"
                   class="agenda-track-sponsor"
-                >
-                </sponsor>
+                />
               </div>
             </div>
             <!-- ALL TRACK SESSIONS -->
@@ -192,7 +187,7 @@ const presentersContainer = computed(() => {
                 :key="presentation.id"
               >
                 <div
-                  v-if="presentation.visible"
+                  v-if="presentation != undefined && presentation.visible"
                   :id="'agenda-presentation-'+presentation.id"
                   class="agenda-presentation flex flex-col"
                   :class="
@@ -230,12 +225,12 @@ const presentersContainer = computed(() => {
                           getPresentationStartTime(presentation, "h:mm a")
                         }}
 
-                        <span v-if="showPresentationEndTimes()"
-                          >- {{ getPresentationEndTime(presentation, "h:mm a") }}</span
-                        >
+                        <span v-if="showPresentationEndTimes()">
+                          - {{ getPresentationEndTime(presentation, "h:mm a") }}
+                        </span>
                         {{
                           DateTime.fromSQL(
-                            presentation.date,
+                            presentation?.date as string,
                             { zone: conference.timezone }
                           ).toLocal().offsetNameShort
                         }}
@@ -243,7 +238,7 @@ const presentersContainer = computed(() => {
 
                       <!-- NAME + PLAY BUTTON -->
                       <div class="pb-1">
-                        <presentation-link
+                        <CommonComponentsPresentationLink
                           :conference="conference"
                           :track="track"
                           :presentation="presentation"
@@ -253,46 +248,60 @@ const presentersContainer = computed(() => {
                           "
                           :is-agenda="true"
                           class="agenda-presentation-link"
-                        ></presentation-link>
+                        />
                       </div>
 
                       <!-- ADD TO CALENDAR -->
-                      <calendar
+                      <!-- <CommonComponentsCalendar
                         :key="conference.id"
                         class="agenda-add-to-calendar mb-3"
                         :presentation="presentation"
                         :conference="conference"
-                      />
+                      /> -->
 
                       <!-- PRESENTERS LIST (ACCORDION OR STANDARD/DIV) -->
                       <component
                         :is="presentersContainer"
                         v-if="get(presentation, 'presenters.length') > 0"
                         :title="
-                          getPresentersLabel(presentation.presenters.length)
+                          presentation.presenters != undefined ?
+                          getPresentersLabel(presentation.presenters.length) :
+                          'Presenters'
                         "
                         class="agenda-presenters"
                       >
                         <p
                           v-for="presenter in getSortedPresenters(
-                            presentation.presenters
+                            presentation?.presenters as Presenter[]
                           )"
-                          :key="presenter.id"
                           :id="'agenda-presenter-'+presenter.id"
+                          :key="presenter.id"
                           :class="(presenter.role == 'moderator') ? ' agenda-moderator' : ''"
                           class="agenda-presenter font-bold my-1"
                         >
                           <CommonPresenterModal
-                            v-if="usePresenterModal"
+                            v-if="usePresenterModal()"
                             :use-icon="false"
+                            :show-img="true"
                             :presenter="presenter"
                             :is-small-grouped-track="
                               isSmallGroupedTrack(group_or_track)
                             "
-                          ></CommonPresenterModal>
+                            :class-object="{
+                              components: {
+                                presenterListing: {
+                                  presenterContainer:
+                                    'flex flex-row flex-1 content-center items-start',
+                                  presenterImageContainer: 'shrink pr-2 my-1',
+                                  presenterImage: 'max-w-32',
+                                },
+                              },
+                            }"
+                          />
                           <CommonPresenterListing
                             v-else
                             :presenter="presenter"
+                            :show-img="true"
                             :enable-bio="true"
                             :show-bio="false"
                             text-class="font-bold text-base"

package/dist/runtime/components/agenda/components/Calendar.vue

@@ -3,7 +3,7 @@ import { ref, toRefs, computed } from "vue";
 import { storeToRefs } from "pinia";
 import { useTemplateConfigsStore } from "../../../store";
 import { usePresentation } from "../../../composables/usePresentation";
-import "add-to-calendar-button";
+import "../../../../../node_modules/add-to-calendar-button";
 import type { Conference } from "../../../models/conference";
 import type { Presentation } from "../../../models/conference";
 type Props = {
@@ -41,6 +41,11 @@ const cssPath = computed((): string => {
   // atcb.css required in template/playground public folder
   return window.location.origin + "/atcb.css";
 });
+
+// TODO - this *almost* works - the div classed "atcb-initialized" does not get its inline styles updated in order to display the button.
+// Classes are not loading, as the stylesheet in playground/public/atcb.css does not have the right MIME type when loading.
+// When the previously-mentioned div is visible, the button works (it's just unstyled)
+
 </script>
 
 <template>
@@ -62,6 +67,6 @@ const cssPath = computed((): string => {
       hideBackground
       hideCheckmark
       :options="calendarOptions"
-    ></add-to-calendar-button>
+    />
   </div>
-</template>
+</template>

package/dist/runtime/components/agenda/components/Favorite.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import { toRefs, computed } from 'vue';
+import { useConversationStore } from '../../../store/conversations';
+import type { Icons } from '../../../models/icons';
+import type { Presentation } from '../../../models/conference';
+type Props = {
+    presentation: Presentation
+};
+
+const props = defineProps<Props>();
+
+const { presentation } = toRefs(props);
+
+const { hasFavorite } = useConversationStore();
+
+const emit = defineEmits<{
+    (event: 'favoriteClick', presentation: Presentation): void;
+}>();
+
+// computed
+const favoriteStatusIcon = computed((): keyof Icons => {
+    return hasFavorite(presentation.value.id as number) !== undefined ? 'favoriteFilled' : 'favorite';
+});
+
+
+</script>
+
+<template>
+  <a @click="emit('favoriteClick', presentation)">
+    <CommonSvgIcon
+      :icon="favoriteStatusIcon"
+      class="cursor-pointer"
+      style="display: inline-block;"
+    />
+  </a>
+</template>
+  
+<style scoped>
+.favorite svg {
+  stroke: #0070FF;
+  fill: blue;
+}
+</style>
+  

package/dist/runtime/components/agenda/components/PlayIcon.vue

@@ -42,7 +42,7 @@ const {
       </CommonSvgIcon
       >&nbsp;
     </span>
-    <small class="flex-initial uppercase text-base text-red-darker">{{
+    <small class="flex-initial uppercase text-base text-red-800">{{
       getPresentationStreamingText(presentation)
     }}</small>
   </span>

package/dist/runtime/components/agenda/components/PresentationLink.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { toRefs, computed } from "vue";
+import { toRefs, computed, inject } from "vue";
 import { useAgenda } from "../../../composables/useAgenda";
 import { useConferenceHelpers } from "../../../composables/useConferenceHelpers";
 import { usePresentation } from "../../../composables/usePresentation";
@@ -11,6 +11,7 @@ import type {
 } from "../../../models/conference";
 import InfoLink from "./InfoLink.vue";
 import PlayIcon from "./PlayIcon.vue";
+import Favorite from "./Favorite.vue";
 
 type Props = {
   conference: Conference;
@@ -31,10 +32,13 @@ const props = withDefaults(defineProps<Props>(), {
 
 const { conference, track, presentation } = toRefs(props);
 
+const isActiveAgenda: boolean = inject('isActiveAgenda', false);
+const isVirtual: boolean = inject('isVirtual', true);
+
 // Methods
 const { conferenceIsLiveOrMixed, conferenceIsArchived } =
   useConferenceHelpers(conference);
-const { isSmallGroupedTrack } = useAgenda(conference);
+const { isSmallGroupedTrack, playPresentation } = useAgenda(conference);
 const {
   getPresentationLinkTarget,
   getLivePresentationLinkDestination,
@@ -67,7 +71,7 @@ const presentationNameClass = computed(() => {
             modal-size="full"
           >
             <template #modal-link>
-              <span class="font-semibold no-underline heading-link"
+              <span class="font-semibold heading-link"
                 >{{ presentation.name }}
                 <PlayIcon
                   :presentation="presentation"
@@ -80,32 +84,39 @@ const presentationNameClass = computed(() => {
           </CommonZoomModal>
 
           <!-- live/archive stream text & icon link -->
-          <a
+          <!-- <a
             v-else-if="
               (isAgenda && conferenceIsLiveOrMixed(conference)) ||
               (conferenceIsArchived(conference) && presentation.type != 'zoom')
             "
-            class="font-semibold no-underline heading-link"
+            class="font-semibold heading-link"
             :href="getLivePresentationLinkDestination(presentation, track)"
             :target="getPresentationLinkTarget(presentation)"
-            @click="playPresentation(track, presentation, conference)"
+            @click="playPresentation(track, presentation, conference, isActiveAgenda, isVirtual)"
+          > -->
+          <!-- TODO - ensure this conversion to <button> does not compromise behavior on other templates -->
+          <!-- is not a11y compliant, though. would be better if it was button on tradeshow template only -->
+          <button v-else-if="(isAgenda && conferenceIsLiveOrMixed(conference)) ||
+              (conferenceIsArchived(conference) && presentation.type != 'zoom')"
+              @click="playPresentation(track, presentation, conference, isActiveAgenda, isVirtual)"
           >
-            {{ presentation.name
-            }}<transition name="fade">
+            {{ presentation.name }}
+            <transition name="fade">
               <PlayIcon
                 v-if="presentationIsLiveOrMixed(presentation)"
                 :presentation="presentation"
                 :conference="conference"
                 :class="'justify-center md:justify-start'"
                 icon="playarrow"
-              ></PlayIcon>
+              />
             </transition>
-          </a>
+          </button>
+          <!-- </a> -->
 
           <!-- text only catchall -->
-          <span v-else class="font-semibold" :class="presentationNameClass"
-            >{{ presentation.name }}</span
-          >
+          <span v-else class="font-semibold" :class="presentationNameClass">
+            {{ presentation.name }}
+          </span>
 
           <!-- session details -->
           <InfoLink
@@ -118,7 +129,7 @@ const presentationNameClass = computed(() => {
           />
 
           <!-- favorites -->
-          <favorite
+          <Favorite
             v-if="allowFavorites && currentUser.token"
             class="ml-1"
             :presentation="presentation"
@@ -132,7 +143,7 @@ const presentationNameClass = computed(() => {
     <div v-else>
       <a
         class="underline cursor-pointer"
-        @click="playPresentation(track, presentation, conference)"
+        @click="playPresentation(track, presentation, conference, isActiveAgenda, isVirtual)"
       >
         {{ presentation.name }}
       </a>

package/dist/runtime/components/chat/ChatConversationList.vue

@@ -0,0 +1,108 @@
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import { storeToRefs } from 'pinia';
+import { filter, map } from 'lodash-es';
+import { useConversationStore } from '#imports';
+import type { Conversation, Message } from '../../models/conversation';
+import type { User } from '../../models/user';
+
+const conversationStore = useConversationStore();
+
+const { conversations, user } = storeToRefs(conversationStore);
+
+const { commitSelectedConversation, getConversationsApi, hideConversation } = conversationStore;
+
+// methods
+const isRead = (lastMessage: Message) => {
+  let read = false;
+  if (lastMessage !== null && lastMessage?.user?.id !== user.value.id) {
+    map(lastMessage.messages_read, (user: User) => {
+      if (user?.id === user.value.data.id) {
+        read = true;
+      }
+    });
+  } else {
+    read = true;
+  }
+  return read;
+};
+
+const getNames = (conversation: Conversation) => {
+  const users: User[] = conversation.users as User[];
+  const authenticatedUser: User = user.value.data;
+  const conversationCreator: User = conversation.user as User;
+  let names = '';
+  const filtered = filter(users, user => user.id !== authenticatedUser.id);
+
+  names += map(filtered, (user) => {
+    return user.name ? user.name : user.email;
+  }).join(', ');
+
+  if (conversationCreator.id !== authenticatedUser.id) {
+    const name = conversationCreator.name ? conversationCreator.name : conversationCreator.email;
+    if (names === '') {
+      names += name
+    } else {
+      names += ', ' + name
+    }
+  }
+  return names;
+};
+
+onMounted(() => {
+  getConversationsApi();
+})
+
+</script>
+
+<template>
+  <div class="h-full overflow-y-auto">
+    <div
+      v-for="conversation in conversations"
+      :key="conversation.id"
+      class="chat-item"
+    >
+      <div
+        class="flex flex-row w-full"
+        @click="commitSelectedConversation(conversation)"
+      >
+        <div class="w-4 flex items-center">
+          <CommonSvgIcon icon="notification" />
+        </div>
+
+        <div class="w-1/5">
+          <div class="flex justify-center">
+            <CommonSvgIcon icon="person" />
+          </div>
+        </div>
+
+        <div class="w-3/4">
+          <p class="text-gray-700 text-md mt-1 mb-0">
+            {{ getNames(conversation) }}
+          </p>
+        </div>
+      </div>
+      <div class="w-1/5 flex justify-end">
+        <div
+          class="cursor-pointer"
+          @click="hideConversation(conversation)"
+        >
+          <CommonSvgIcon icon="close" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.chat-item {
+  @apply flex cursor-pointer flex-row p-4 border-b border-t-0 border-l-0 border-r-0 border-solid border-gray-400;
+  border-bottom: 1px solid #dae1e7;
+}
+.chat-item:hover {
+  background-color: #e9eef1;
+}
+.chat-item:active {
+  background-color: #cbd4dd;
+}
+</style>