@icvdeveloper/common-module 1.0.3 → 1.0.4

package/CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+## 1.0.4 - 2023-09-21
+
 ## 1.0.3 - 2023-06-20
 
 ## 1.0.2 - 2023-06-20

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "v3plus-common-module",
   "configKey": "v3plusCommonModule",
-  "version": "1.0.3"
+  "version": "1.0.4"
 }

package/dist/runtime/@types/components.d.ts

@@ -174,6 +174,57 @@ export type OverviewPanelClassObj = {
     htmlElement?: string | null;
     noOverviewElement?: string | null;
 };
+export type CeCreditPanelClassObj = {
+    container?: string | null;
+    containerInner?: string | null;
+    timeRemaining?: string | null;
+    timeInSeconds?: string | null;
+    promptText?: string | null;
+    buttonContainer?: string | null;
+    acceptButton?: string | null;
+};
+export type DocumentsPanelClassObj = {
+    container?: string | null;
+    documentList?: string | null;
+    listElement?: string | null;
+    lastElement?: string | null;
+    elementLink?: string | null;
+    elementText?: string | null;
+    elementDescription?: string | null;
+    noDocumentsElement?: string | null;
+    noDocumentsText?: string | null;
+};
+export type PresentersPanelClassObj = {
+    container?: string | null;
+    presenterList?: string | null;
+    listElement?: string | null;
+    lastElement?: string | null;
+    elementLink?: string | null;
+    elementText?: string | null;
+    elementDescription?: string | null;
+    noPresentersElement?: string | null;
+    noPresentersText?: string | null;
+};
+export type SponsorsPanelClassObj = {
+    container?: string | null;
+    sessionSponsorsContainer?: string | null;
+    sessionSponsorsHeader?: string | null;
+    sessionSponsorsInner?: string | null;
+    sessionSponsor?: string | null;
+    sponsorLink?: string | null;
+    sponsorImage?: string | null;
+    trackSponsorsContainer?: string | null;
+    trackSponsorsHeader?: string | null;
+    trackSponsorsInner?: string | null;
+    trackSponsor?: string | null;
+    trackLink?: string | null;
+    trackImage?: string | null;
+    noSponsorsElement?: string | null;
+    noSponsorsText?: string | null;
+};
+export type ContentAccordionClassObj = {
+    container?: string | null;
+};
 export type ContentTabsClassObj = {
     container?: string | null;
     fullContainer?: string | null;
@@ -301,3 +352,29 @@ export type ProfileClassObj = {
     contentName?: string | null;
     components?: ProfileCompObj;
 };
+export type AttendeeListCompObj = {};
+export type AttendeeListClassObj = {
+    container?: string | null;
+    searchContainer?: string | null;
+    searchContainerInner?: string | null;
+    searchField?: string | null;
+    closeContainer?: string | null;
+    contentContainer?: string | null;
+    attendeeElement?: string | null;
+    attendeeContent?: string | null;
+    imageContainer?: string | null;
+    attendeeImage?: string | null;
+    attendeeContentInner?: string | null;
+    attendeeText?: string | null;
+    attendeeNameEmail?: string | null;
+    statusContainer?: string | null;
+    statusText?: string | null;
+    attendeeTitle?: string | null;
+    attendeeCompany?: string | null;
+    socialContainer?: string | null;
+    socialLink?: string | null;
+    buttonsContainer?: string | null;
+    buttonsContainerInner?: string | null;
+    chatButton?: string | null;
+    videoChatButton?: string | null;
+};

package/dist/runtime/components/core/AttendeeList.vue

@@ -0,0 +1,386 @@
+<script lang="ts" setup>
+import { ref, onBeforeUnmount } from "vue";
+import { storeToRefs } from "pinia";
+import { debounce } from "lodash-es";
+import { VueEternalLoading, LoadAction } from "@ts-pro/vue-eternal-loading";
+import { User } from "../../models/user";
+import { PAGE_LENGTH } from "../../models/pagination";
+import { useAttendeeListStore } from "../../store/attendeeList";
+import { useConversationStore } from "../../store/conversations";
+import { useUserStore } from "../../store/user";
+import { usePusher } from "../../composables/usePusher";
+import { useClassBinding } from "../../composables/useClassBinding";
+import {
+  AttendeeListClassObj,
+  AttendeeListCompObj,
+} from "../../@types/components";
+
+type Props = {
+  classObject?: AttendeeListClassObj;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  classObject: () => {
+    return {
+      container: "",
+      components: ref<AttendeeListCompObj>({}),
+    };
+  },
+});
+
+const { getAttendeeList, clearAttendeeList } = useAttendeeListStore();
+const { toggleChat, createConversation } = useConversationStore();
+
+const { currentUser } = storeToRefs(useUserStore());
+const { isLoggedIn } = storeToRefs(useAuthStore());
+const { chatOpen } = storeToRefs(useConversationStore());
+
+const { classObject } = toRefs(props);
+
+const { joinPresenceChannel } = usePusher();
+const { classBinding } = useClassBinding();
+
+const search = ref<string>("");
+const currentPage = ref(1);
+const isInitial = ref(true);
+const loadedUsersRef = ref<User[]>([]);
+
+// // emits
+const emit = defineEmits<{
+  (event: "createVideoChat", value: User): void;
+}>();
+
+// // methods
+const filterUsers = debounce(async () => {
+  clearAttendeeList();
+  clearLoadedUsers();
+  currentPage.value = 1;
+  const loadedItems = await getAttendeeList({
+    pageNumber: currentPage.value,
+    searchParams: search.value,
+  });
+  loadedUsersRef.value = loadedItems.data;
+}, 500);
+
+const load = async ({ loaded }: LoadAction): Promise<void> => {
+  currentPage.value += 1;
+  const existingList: User[] = loadedUsersRef.value;
+  const loadedItems = await getAttendeeList({
+    pageNumber: currentPage.value,
+    searchParams: search.value,
+  });
+  loadedUsersRef.value = [...existingList, ...loadedItems.data];
+  loaded(loadedItems.data.length, PAGE_LENGTH);
+};
+
+const clearSearchValue = () => {
+  search.value = "";
+};
+
+const clearLoadedUsers = () => {
+  loadedUsersRef.value = [];
+};
+
+const resetAll = async () => {
+  clearSearchValue();
+  clearAttendeeList();
+  clearLoadedUsers();
+  currentPage.value = 1;
+  const loadedItems = await getAttendeeList({
+    pageNumber: currentPage.value,
+    searchParams: search.value,
+  });
+  loadedUsersRef.value = loadedItems.data;
+  isInitial.value = true;
+};
+
+const createChatConversation = async (user: User) => {
+  const users: User[] = [];
+  users.push(user);
+
+  await createConversation(users);
+
+  if (!chatOpen) {
+    toggleChat();
+  }
+};
+
+// lifecycle
+clearAttendeeList();
+const loadedItems = await getAttendeeList({
+  pageNumber: currentPage.value,
+  searchParams: search.value,
+});
+loadedUsersRef.value = loadedItems.data;
+
+onBeforeUnmount(() => {
+  resetAll();
+});
+
+watch(isLoggedIn, () => {
+  if (isLoggedIn.value) {
+    joinPresenceChannel();
+  }
+});
+</script>
+
+<template>
+  <div :class="classBinding(classObject, 'container', 'flex flex-col h-full')">
+    <div
+      :class="
+        classBinding(
+          classObject,
+          'searchContainer',
+          'flex w-full justify-end border p-3'
+        )
+      "
+    >
+      <div
+        :class="
+          classBinding(
+            classObject,
+            'searchContainerInner',
+            'flex-1 md:flex-initial flex flex-row items-center w-64'
+          )
+        "
+      >
+        <input
+          v-model="search"
+          type="text"
+          :class="
+            classBinding(classObject, 'searchField', 'w-full px-2 border py-3')
+          "
+          placeholder="Search..."
+          @input="filterUsers"
+        />
+        <span
+          :class="
+            classBinding(classObject, 'closeContainer', 'ml-2 cursor-pointer')
+          "
+          @click="resetAll()"
+        >
+          <CommonSvgIcon
+            icon="close"
+            class="fill-current text-black flex items-center justify-center"
+          ></CommonSvgIcon>
+        </span>
+      </div>
+    </div>
+    <div
+      :class="
+        classBinding(
+          classObject,
+          'contentContainer',
+          'user-container flex flex-col border-l border-r border-b md:p-5 overflow-y-auto'
+        )
+      "
+    >
+      <div
+        v-for="(user, index) in loadedUsersRef"
+        :key="index"
+        :class="
+          classBinding(
+            classObject,
+            'attendeeElement',
+            'user-list-item flex flex-col md:flex-row border p-4 md:mt-3 justify-between'
+          )
+        "
+      >
+        <div
+          :class="
+            classBinding(
+              classObject,
+              'attendeeContent',
+              'flex-initial flex flex-row items-center'
+            )
+          "
+        >
+          <div
+            :class="
+              classBinding(
+                classObject,
+                'imageContainer',
+                'aspect-square flex-initial flex items-center md:mr-5'
+              )
+            "
+          >
+            <img
+              :class="
+                classBinding(
+                  classObject,
+                  'attendeeImage',
+                  'w-full max-w-100 aspect-square'
+                )
+              "
+              :src="user.profile_image"
+              alt=""
+            />
+          </div>
+
+          <div :class="classBinding(classObject, 'attendeeContentInner', '')">
+            <p
+              :class="
+                classBinding(
+                  classObject,
+                  'attendeeText',
+                  'mb-0 pb-1 text-base md:text-lg text-left'
+                )
+              "
+            >
+              <span
+                v-if="user.name"
+                :class="classBinding(classObject, 'attendeeNameEmail', 'pl-2')"
+                >{{ user.name }}</span
+              >
+              <span
+                v-else
+                :class="classBinding(classObject, 'attendeeNameEmail', 'pl-2')"
+                >{{ user.email }}</span
+              >
+              <span
+                v-if="isLoggedIn"
+                :class="
+                  classBinding(classObject, 'statusContainer', 'block text-sm')
+                "
+              >
+                <CommonSvgIcon
+                  :icon="[user.online ? 'online' : 'offline']"
+                  width="0"
+                  class="w-4 my-0 mr-1 inline-block"
+                ></CommonSvgIcon>
+                <span
+                  :class="
+                    classBinding(classObject, 'statusText', 'inline-block')
+                  "
+                  >{{ user.online ? "online" : "offline" }}</span
+                >
+              </span>
+            </p>
+
+            <p
+              v-if="user.title"
+              :class="
+                classBinding(
+                  classObject,
+                  'attendeeTitle',
+                  'pl-2 mb-0 min-height-paragraph leading-tight'
+                )
+              "
+            >
+              {{ user.title }}
+            </p>
+            <p
+              v-if="user.company"
+              :class="
+                classBinding(
+                  classObject,
+                  'attendeeCompany',
+                  'pl-2 min-height-paragraph leading-tight'
+                )
+              "
+            >
+              {{ user.company }}
+            </p>
+
+            <span :class="classBinding(classObject, 'socialContainer', 'flex')">
+              <a
+                v-if="user.twitter_url"
+                :href="user.twitter_url"
+                target="_blank"
+                :class="classBinding(classObject, 'socialLink', 'mr-2')"
+                :aria-label="user.name + ` Twitter Page`"
+              >
+                <span><CommonSvgIcon icon="twitter"></CommonSvgIcon></span>
+              </a>
+
+              <a
+                v-if="user.linkedin_url"
+                :href="user.linkedin_url"
+                target="_blank"
+                :class="classBinding(classObject, 'socialLink', 'mr-2')"
+                :aria-label="user.name + ` LinkedIn Page`"
+              >
+                <span><CommonSvgIcon icon="linkedin"></CommonSvgIcon></span>
+              </a>
+            </span>
+          </div>
+        </div>
+
+        <div
+          :class="
+            classBinding(
+              classObject,
+              'buttonsContainer',
+              'flex items-end h-full'
+            )
+          "
+        >
+          <div
+            :class="
+              classBinding(
+                classObject,
+                'buttonsContainerInner',
+                'w-full flex justify-end md:justify-start'
+              )
+            "
+          >
+            <button
+              v-if="isLoggedIn && user.id !== currentUser.id"
+              :class="
+                classBinding(
+                  classObject,
+                  'chatButton',
+                  'text-white bg-green-500 px-3 py-1 border border-green-700 mr-2'
+                )
+              "
+              @click="createChatConversation(user)"
+            >
+              Chat
+            </button>
+            <button
+              v-if="
+                isLoggedIn &&
+                user.id !== currentUser.id &&
+                user.online &&
+                user.video_chat
+              "
+              :class="
+                classBinding(
+                  classObject,
+                  'videoChatButton',
+                  'text-white bg-green-500 px-3 py-1 border border-green-700'
+                )
+              "
+              @click="emit('createVideoChat', user)"
+            >
+              Video Chat
+            </button>
+          </div>
+        </div>
+      </div>
+      <VueEternalLoading
+        v-model:is-initial="isInitial"
+        :load="load"
+      ></VueEternalLoading>
+    </div>
+  </div>
+</template>
+
+<style>
+.user-container {
+  max-height: 400px;
+  height: 400px;
+}
+
+.user-list-item {
+  border-top: 6px solid rgb(31, 60, 249);
+}
+
+.min-height-paragraph {
+  min-height: 1em;
+}
+
+.max-w-100 {
+  max-width: 100px;
+}
+</style>

package/dist/runtime/components/core/SvgIcon.vue

@@ -99,6 +99,18 @@ const icons: Icons = {
       () => import("../../assets/svg/icon-circle-minus.svg")
     ),
   },
+  online: {
+    color: "#22c55e",
+    component: defineAsyncComponent(
+      () => import("../../assets/svg/icon-online.svg")
+    ),
+  },
+  offline: {
+    color: "#696665",
+    component: defineAsyncComponent(
+      () => import("../../assets/svg/icon-offline.svg")
+    ),
+  },
 };
 
 type Props = {

package/dist/runtime/components/events/ListEvents.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ref, toRefs, computed } from "vue";
 import { storeToRefs } from "pinia";
-import { get } from "lodash-es";
+import { get, reverse } from "lodash-es";
 import { useConferencesStore } from "../../store/conferences";
 import { useTemplateConfigsStore } from "../../store/templateConfigs";
 import { useConferenceHelpers } from "../../composables/useConferenceHelpers";
@@ -31,6 +31,7 @@ interface Props {
   registerPathPrefix?: string;
   liveButtonOpensStream?: boolean;
   isUpcoming?: boolean;
+  isReversed?: boolean;
   showEventImage?: boolean;
   sponsorPosition?: Position;
   borderPosition?: Position;
@@ -50,6 +51,7 @@ const props = withDefaults(defineProps<Props>(), {
   registerPathPrefix: "",
   liveButtonOpensStream: true,
   isUpcoming: true,
+  isReversed: true,
   showEventImage: true,
   sponsorPosition: Position.RIGHT,
   borderPosition: Position.MIDDLE,
@@ -75,6 +77,7 @@ const {
   loginButton,
   viewInfoButton,
   isUpcoming,
+  isReversed,
   showEventImage,
   sponsorPosition,
   borderPosition,
@@ -143,7 +146,17 @@ const eventPathPrefix = computed(() => {
 });
 
 const eventType = computed((): Conference[] => {
-  return isUpcoming.value ? upcomingEvents.value : pastEvents.value;
+  if (isUpcoming?.value) {
+    if (isReversed?.value) {
+      return reverse(upcomingEvents.value);
+    } else {
+      return upcomingEvents.value;
+    }
+  } else if (isReversed?.value) {
+    return reverse(pastEvents.value);
+  } else {
+    return pastEvents.value;
+  }
 });
 
 const showLoginButton = computed((): boolean => {