@icvdeveloper/common-module 1.4.14 → 2.1.0

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,
@@ -55,57 +59,71 @@ const presentationNameClass = computed(() => {
     <div v-if="!simpleLayout">
       <!-- LIVE AGENDA GO TO WEBCAST PAGE -->
       <div>
-        <h2 class="flex flex-initial flex-row" :class="presentationNameClass">
+        <h2
+          class="flex flex-initial flex-row"
+          :class="presentationNameClass"
+        >
           <!-- zoom text & icon link -->
           <CommonZoomModal
             v-if="
               isAgenda &&
-              conferenceIsLiveOrMixed(conference) &&
-              presentation.type == 'zoom'
+                conferenceIsLiveOrMixed(conference) &&
+                presentation.type == 'zoom'
             "
             :presentation-id="presentation.id"
             modal-size="full"
           >
             <template #modal-link>
-              <span class="font-semibold no-underline heading-link"
-                >{{ presentation.name }}
+              <span class="font-semibold heading-link">{{ presentation.name }}
                 <PlayIcon
                   :presentation="presentation"
                   :conference="conference"
                   :class="'justify-center md:justify-start'"
                   icon="zoom"
-                ></PlayIcon>
+                />
               </span>
             </template>
           </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 +136,7 @@ const presentationNameClass = computed(() => {
           />
 
           <!-- favorites -->
-          <favorite
+          <Favorite
             v-if="allowFavorites && currentUser.token"
             class="ml-1"
             :presentation="presentation"
@@ -132,7 +150,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/agenda/components/Sponsor.vue

@@ -81,10 +81,10 @@ const handleClick = () => {
           :class="
             inline
               ? classBinding(
-                  classObject,
-                  'sponsorLabel',
-                  'inline-block lg:pr-5 pb-2 lg:pb-0'
-                )
+                classObject,
+                'sponsorLabel',
+                'inline-block lg:pr-5 pb-2 lg:pb-0'
+              )
               : classBinding(classObject, 'sponsorLabel', 'pb-2')
           "
           class="text-center uppercase font-medium"
@@ -96,10 +96,10 @@ const handleClick = () => {
         :class="
           inline
             ? classBinding(
-                classObject,
-                'imageContainer',
-                'flex-1 items-center pb-2 lg:pb-0'
-              )
+              classObject,
+              'imageContainer',
+              'flex-1 items-center pb-2 lg:pb-0'
+            )
             : classBinding(classObject, 'imageContainer', 'w-full')
         "
       >
@@ -114,7 +114,7 @@ const handleClick = () => {
           ]"
           :src="sponsor.photo"
           @click="handleClick()"
-        />
+        >
       </div>
     </div>
 
@@ -123,31 +123,38 @@ const handleClick = () => {
         <CommonAffiliatePage
           v-if="enabledSponsor"
           :affiliate="enabledSponsor"
-        ></CommonAffiliatePage>
+        />
       </template>
     </CommonModal>
   </div>
 </template>
 
-<style>
-.small h2 {
-  font-size: 14px;
-}
-.small img {
-  max-height: 35px !important;
-}
+<style lang="postcss">
+.small {
+  h2 {
+    font-size: 14px;
+  }
 
-.medium h2 {
-  font-size: 0.9em;
+  img {
+    max-height: 35px !important;
+  }
 }
-.medium img {
-  max-height: 40px;
+
+.medium {
+  h2 {
+    font-size: 0.9em;
+  }
+
+  img {
+    max-height: 40px;
+  }
 }
 
 .default {
   width: 100%;
-}
-.default img {
-  max-height: 60px;
+
+  img {
+    max-height: 60px;
+  }
 }
 </style>

package/dist/runtime/components/auth/PasswordReset.vue

@@ -42,16 +42,31 @@ const submitPasswordReset = () => {
 
 <template>
   <div :class="isCentered ? 'w-full max-w-xs mx-auto' : ''">
-    <div class="mb-4">Enter your email address to reset your password.</div>
-    <CommonMessage v-if="message" :success="true">
+    <div class="mb-4">
+      Enter your email address to reset your password.
+    </div>
+    <CommonMessage
+      v-if="message"
+      :success="true"
+    >
       {{ message }}
     </CommonMessage>
-    <CommonMessage v-if="errors.length > 0" :success="false">
+    <CommonMessage
+      v-if="errors.length > 0"
+      :success="false"
+    >
       {{ errors[0] }}
     </CommonMessage>
     <div @keyup.enter="submitPasswordReset()">
-      <CommonTextInput v-model="email" placeholder="Email" type="email" />
-      <button class="btn my-2" @click="submitPasswordReset()">
+      <CommonTextInput
+        v-model="email"
+        placeholder="Email"
+        type="email"
+      />
+      <button
+        class="btn my-2"
+        @click="submitPasswordReset()"
+      >
         <span v-if="loading">Processing...</span>
         <span v-else>Send Password Reset Link</span>
       </button>

package/dist/runtime/components/auth/Registration.vue

@@ -13,14 +13,24 @@ const submitRegistration = () => {};
 
 <template>
   <div v-if="isLoggedIn">
-    <CommonMessage :success="false">Already logged in.</CommonMessage>
+    <CommonMessage :success="false">
+      Already logged in.
+    </CommonMessage>
   </div>
-  <div v-else class="px-2">
+  <div
+    v-else
+    class="px-2"
+  >
     <div class="flex flex-1 flex-col text-center pt-8">
-      <h1 class="mb-3 heading-color-3">Log In</h1>
+      <h1 class="mb-3 heading-color-3">
+        Log In
+      </h1>
 
       <div class="w-full max-w-xs mx-auto pb-12">
-        <form class="w-full" @submit.prevent="submitRegistration"></form>
+        <form
+          class="w-full"
+          @submit.prevent="submitRegistration"
+        />
       </div>
     </div>
   </div>

package/dist/runtime/components/auth/Ucc.vue

@@ -33,7 +33,7 @@ const { conference } = toRefs(props);
 
 // methods
 const submitLogin = () => {
-  let email = document.getElementById('uccEmail').value;
+  const email = document.getElementById('uccEmail').value;
   loginV3({email: email});
 };
 
@@ -76,42 +76,63 @@ onMounted(() => {
 <template>
   <div>
     <!-- UCC Widget -->
-    <div id="uccTarget"
-    :class="
-      classBinding(
-        classObject,
-        'container',
-        'p-0 m-0 w-full'
-      )
-    "
-    style="display:block;"
-    >
-    </div>
+    <div
+      id="uccTarget"
+      :class="
+        classBinding(
+          classObject,
+          'container',
+          'p-0 m-0 w-full'
+        )
+      "
+      style="display:block;"
+    />
     <!-- V3 email login form -->
-    <div id="uccEmailForm"
+    <div
+      id="uccEmailForm"
       class="ucc-form-container ucc-widgets-events block"
-      style="padding-bottom: 0px"
+      style="padding-bottom: 0"
     >
       <div>
-        <h1 class="scala-bold text-xl text-center mb-0" :class="headerColorClass">
+        <h1
+          class="scala-bold text-xl text-center mb-0"
+          :class="headerColorClass"
+        >
           {{ loginHeader }}
         </h1>
       </div>
       <div class="text-center">
-        <form @submit="submitLogin" action="javascript:void(0);">
+        <form
+          action="javascript:void(0);"
+          @submit="submitLogin"
+        >
           <div class="ucc-form-field">
-            <div class="ucc-form-field-descr"></div>
+            <div class="ucc-form-field-descr" />
             <div class="ucc-input-wrapper required">
-              <input id="uccEmail" name="uccEmail" class="ucc-input" type="text" placeholder="Enter Email Address" autocomplete="off" maxlength="70">
+              <input
+                id="uccEmail"
+                name="uccEmail"
+                class="ucc-input"
+                type="text"
+                placeholder="Enter Email Address"
+                autocomplete="off"
+                maxlength="70"
+              >
             </div>
-            <div class="ucc-error"></div>
+            <div class="ucc-error" />
           </div>
-          <div class="ucc-form-field ucc-form-btn-row" style="margin-bottom: 0x; margin-top: 0px;">
+          <div
+            class="ucc-form-field ucc-form-btn-row"
+            style="margin-bottom: 0; margin-top: 0;"
+          >
             <a
-              @click="submitLogin"
               class="ucc-btn"
               :class="buttonColorClass"
-              style="margin-top: 0px;"><span class="btn-text">{{ buttonText }}</span></a>
+              style="margin-top: 0;"
+              @click="submitLogin"
+            >
+              <span class="btn-text">{{ buttonText }}</span>
+            </a>
           </div>
         </form>
       </div>
@@ -120,9 +141,5 @@ onMounted(() => {
 </template>
 
 <style scoped>
-.v3-ucc-btn-black {
-  background-color: #000;
-  border: 1px solid #000;
-  color: #fff;
-}
+.v3-ucc-btn-black{background-color:#000;border:1px solid #000;color:#fff}
 </style>

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 lang="postcss">
+  .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;
+    &:hover {
+      background-color: lighten(#dae1e7, 5%);
+    }
+    &:active {
+      background-color: darken(#dae1e7, 5%);
+    }
+  }
+</style>