@icvdeveloper/common-module 1.4.14 → 2.1.0

package/dist/runtime/components/presenters/PresenterModal.vue

@@ -16,6 +16,7 @@ import { Position } from "../../enums/general";
 
 type Props = {
   presenter: Presenter;
+  showImg?: boolean;
   enableBio?: boolean;
   showBio?: boolean;
   isSmallGroupedTrack?: boolean;
@@ -29,6 +30,7 @@ type Props = {
 
 const props = withDefaults(defineProps<Props>(), {
   useIcon: true,
+  showImg: true,
   enableBio: true,
   showBio: false,
   isSmallGroupedTrack: false,
@@ -53,6 +55,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const {
   presenter,
+  showImg,
   useIcon,
   enableBio,
   showBio,
@@ -86,15 +89,16 @@ const { fullName, presenterImageStyle, itemWidthStyle, isGrayScale } =
       <CommonSvgIcon
         icon="info"
         :greyscale="isGrayScale"
-        :class="classBinding(classObject.components.svgIcon, 'container', '')"
-        :class-object="classObject.components.svgIcon"
+        :class="classBinding(classObject.components?.svgIcon, 'container', '')"
+        :class-object="classObject.components?.svgIcon"
         @click="modalVisible = true"
-      ></CommonSvgIcon>
+      />
     </div>
 
     <CommonPresenterListing
       v-else
       :presenter="presenter"
+      :show-img="showImg"
       :enable-bio="enableBio"
       :show-bio="showBio"
       :is-small-grouped-track="isSmallGroupedTrack"
@@ -105,44 +109,43 @@ const { fullName, presenterImageStyle, itemWidthStyle, isGrayScale } =
       text-class="font-bold text-base"
       link-class="agenda-presenter-color"
       :class="
-        classBinding(classObject.components.presenterListing, 'container', '')
+        classBinding(classObject.components?.presenterListing, 'container', '')
       "
-      :class-object="classObject.components.presenterListing"
+      :class-object="classObject.components?.presenterListing"
       @clicked="modalVisible = true"
-    >
-    </CommonPresenterListing>
+    />
 
     <CommonModal
       :visible="modalVisible"
-      :class="classBinding(classObject.components.modal, 'container', '')"
-      :class-object="classObject.components.modal"
+      :class="classBinding(classObject.components?.modal, 'container', '')"
+      :class-object="classObject.components?.modal"
       @trigger="modalVisible = false"
     >
       <template #modal-title>
         <div
           :class="
             classBinding(
-              classObject.components.modalContent,
+              classObject.components?.modalContent,
               'modalTitle',
-              'flex flex-col lg:flex-row w-full pb-8 mb-8 border-b border-solid border-grey-light'
+              'flex flex-col lg:flex-row w-full pb-8 mb-8 border-b border-solid border-gray-400'
             )
           "
         >
           <div
             :class="
               classBinding(
-                classObject.components.modalContent,
+                classObject.components?.modalContent,
                 'modalImagePositionContainer',
                 'flex-1 mb-6 lg:mb-0 lg:flex-initial flex justify-center'
               )
             "
           >
             <div
-              v-if="presenter.photo"
+              v-if="showImg && presenter.photo"
               :style="presenterImageStyle"
               :class="
                 classBinding(
-                  classObject.components.modalContent,
+                  classObject.components?.modalContent,
                   'modalImageContainer',
                   'border-white border-2 shadow-md bg-white'
                 )
@@ -158,13 +161,13 @@ const { fullName, presenterImageStyle, itemWidthStyle, isGrayScale } =
                   )
                 "
                 :style="itemWidthStyle"
-              />
+              >
             </div>
           </div>
           <div
             :class="
               classBinding(
-                classObject.components.modalContent,
+                classObject.components?.modalContent,
                 'modalTextPositionContainer',
                 'flex-1 pl-4 text-center lg:text-left flex'
               )
@@ -173,7 +176,7 @@ const { fullName, presenterImageStyle, itemWidthStyle, isGrayScale } =
             <div
               :class="
                 classBinding(
-                  classObject.components.modalContent,
+                  classObject.components?.modalContent,
                   'modalTextContainer',
                   'flex-1 self-center'
                 )
@@ -182,7 +185,7 @@ const { fullName, presenterImageStyle, itemWidthStyle, isGrayScale } =
               <h1
                 :class="
                   classBinding(
-                    classObject.components.modalContent,
+                    classObject.components?.modalContent,
                     'modalName',
                     'flex-1 font-light mb-0 body-color-4 presenter-name-color'
                   )
@@ -193,13 +196,15 @@ const { fullName, presenterImageStyle, itemWidthStyle, isGrayScale } =
               <p
                 :class="
                   classBinding(
-                    classObject.components.modalContent,
+                    classObject.components?.modalContent,
                     'modalTitleCompany',
                     'flex-1 font-normal text-base pt-2 leading-tight mb-0 body-color-5 presenter-title-color'
                   )
                 "
               >
-                {{ presenter.title }}<br />{{ presenter.company }}
+                {{ presenter.title }}
+                <br>
+                {{ presenter.company }}
               </p>
             </div>
           </div>
@@ -209,7 +214,7 @@ const { fullName, presenterImageStyle, itemWidthStyle, isGrayScale } =
         <p
           :class="
             classBinding(
-              classObject.components.modalContent,
+              classObject?.components?.modalContent,
               'modalBio',
               'font-normal text-center lg:text-left'
             )

package/dist/runtime/components/presenters/Presenters.vue

@@ -0,0 +1,139 @@
+<script lang="ts" setup>
+import { toRefs, computed } from 'vue';
+import { sortBy, get } from 'lodash-es';
+import type { Presenter, PresenterWithPivot } from '../../models/conference';
+import type { PresenterPageConfigs } from '../../models/pagesConfig';
+
+// TODO - define presentersByLevel and presenterConfig type
+// TODO - create a helper function that formats Presenter[] to { 'presenters_all': Presenter[] }
+// prior to passing into this component, so that this component can always expect the same type
+type Props = {
+  presenters: { [key: string]: Presenter[] };
+  presFormat?: string;
+  showLevels?: boolean;
+  isCompact?: boolean;
+  isCentered?: boolean;
+  presenterConfig?: PresenterPageConfigs;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  presFormat: "grid",
+  showLevels: false,
+  isCompact: false,
+  isCentered: false,
+  presenterConfig: () => {
+    return {} as PresenterPageConfigs;
+  },
+});
+
+const {
+  presenters,
+  presFormat,
+  showLevels,
+  isCompact,
+  isCentered,
+  presenterConfig,
+} = toRefs(props);
+
+// computed
+const presenterContainerClass = computed((): string => {
+  let classString: string;
+
+  switch (presFormat.value) {
+    case 'grid':
+      classString = 'flex flex-1 container mx-auto flex-wrap justify-center';
+      classString += isCompact.value ? ' pt-6' : ' pt-10';
+      break;
+    case 'vertical':
+      classString = 'flex flex-1 container mx-auto flex-col pt-10 px-12';
+      break;
+    default:
+      classString = 'flex flex-1 container mx-auto flex-col pt-10 px-12';
+  }
+  return classString;
+});
+
+// methods
+const getPresenterLevelEnabled = (_level: number): boolean => {
+  // for levels 1-11
+  const _slug: string = `presenter_${_level}_alias`;
+  const configValue: boolean =
+    presenterConfig.value?.[_slug as keyof PresenterPageConfigs]?.value?.enabled ?? true;
+  return configValue;
+};
+
+const getPresenterLevelTitle = (_level: number): string => {
+  // for levels 1-11
+  const _slug: string = `presenter_${_level}_alias`;
+  const labelValue: string = presenterConfig.value?.[_slug as keyof PresenterPageConfigs]?.value?.label ?? '';
+  if (labelValue.length) {
+    // toggle-plus-label -> label
+    return labelValue;
+  } else if (getPresenterLevelEnabled(_level)) {
+    // toggle-plus-label -> enabled with no label
+    return '';
+  } else {
+    // legacy text field value
+    return presenterConfig.value?.[_slug as keyof PresenterPageConfigs]?.value as string ?? '';
+  }
+};
+
+const getSortedPresenters = (_level: number) => {
+  const _slug: string = (_level == 0) ? 'presenters_all' : `presenters_level_${_level}`;
+  const sortedPresenters = (presenters.value?.[_slug]) ? presenters.value[_slug] : [];
+  sortedPresenters.forEach((pres: PresenterWithPivot) => {
+    if (pres?.pivot?.role && get(pres, 'pivot.role') != undefined && !pres?.role) {
+      pres.role = pres.pivot.role;
+    }
+    if (pres?.pivot?.role && get(pres, 'pivot.order') != undefined && !pres?.order) {
+      pres.order = pres.pivot.order;
+    }
+  });
+  console.log(sortedPresenters);
+  return (!sortedPresenters) ? [] : sortBy(sortedPresenters.slice(), ['role', 'order', 'last_name', 'first_name']);
+};
+</script>
+
+<template>
+  <div class="my-10">
+    <div v-if="showLevels">
+      <!-- eslint-disable vue/no-use-v-if-with-v-for -->
+      <template v-for="n in 11">
+        <div
+          v-if="
+            getPresenterLevelEnabled(n) && getSortedPresenters(n).length > 0
+          "
+          :key="n"
+        >
+          <h1 class="text-center section-header py-6">
+            {{ getPresenterLevelTitle(n) }}
+          </h1>
+          <div :class="presenterContainerClass">
+            <template
+              v-for="presenter in getSortedPresenters(n)"
+              :key="presenter.id"
+            >
+              <CommonPresenterListing
+                :presenter="presenter"
+              />
+            </template>
+          </div>
+        </div>
+      </template>
+    </div>
+    <div v-else>
+      <div :class="presenterContainerClass">
+        <template
+          v-for="presenter in getSortedPresenters(0)"
+          :key="presenter.id"
+        >
+          <CommonPresenterListing
+            :presenter="presenter"
+          />
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style></style>

package/dist/runtime/components/profile/Profile.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { toRefs, reactive, ref, computed } from "vue";
+import { toRefs, reactive, ref, shallowRef, computed } from "vue";
 import { find } from "lodash-es";
 import { storeToRefs } from "pinia";
 import { useAuthStore } from "../../store/auth";
@@ -65,25 +65,26 @@ const props = withDefaults(defineProps<Props>(), {
 // data
 const { visible, showFavorites, classObject } = toRefs(props);
 const { user } = storeToRefs(useAuthStore());
+// shallowRef eliminates 'Vue received a Component which was made a reactive object' memory warning
 const tabs = reactive<Tab[]>([
   {
     id: 1,
     name: "General Information",
-    component: TabGeneralInformation,
+    component: shallowRef(TabGeneralInformation),
     shouldShow: true,
     selected: true,
   },
   {
     id: 2,
     name: "Profile Image",
-    component: TabProfileImage,
+    component: shallowRef(TabProfileImage),
     shouldShow: true,
     selected: false,
   },
   {
     id: 3,
     name: "Favorites",
-    component: TabFavorites,
+    component: shallowRef(TabFavorites),
     shouldShow: showFavorites.value,
     selected: false,
   },
@@ -161,7 +162,10 @@ const tabClassObj = computed<{}>(() => {
     :class-object="classObject.components?.modal"
     @trigger="closeModal"
   >
-    <template #modal-body>
+    <template
+      v-if="user != null"
+      #modal-body
+    >
       <div :class="classBinding(classObject, 'container', 'p-2')">
         <div
           :class="
@@ -212,7 +216,7 @@ const tabClassObj = computed<{}>(() => {
               </h2>
 
               <component
-                :is="selectedTab.component"
+                :is="{...selectedTab.component}"
                 v-if="selectedTab.component && selectedTab.shouldShow"
                 :class-object="tabClassObj"
                 :user="user"

package/dist/runtime/components/profile/components/Sidebar.vue

@@ -49,7 +49,7 @@ const { classBinding } = useClassBinding();
           classBinding(
             classObject,
             'slotContainer',
-            'flex-grow md:block pb-0 md:pb-4 md:overflow-y-auto'
+            'grow md:block pb-0 md:pb-4 md:overflow-y-auto'
           )
         "
       >

package/dist/runtime/components/profile/components/SidebarNavItem.vue

@@ -40,7 +40,7 @@ const onClick = () => {
       classBinding(
         classObject,
         'link',
-        'sidebar-nav-item block px-4 py-2 mt-2 mx-1 text-black text-sm no-underline font-semibold rounded-lg cursor-pointer hover:bg-gray-500 focus:text-white hover:text-white focus:bg-gray-500 focus:outline-none focus:shadow-outline'
+        'sidebar-nav-item block px-4 py-2 mt-2 mx-1 text-black text-sm font-semibold rounded-lg cursor-pointer hover:bg-gray-500 focus:text-white hover:text-white focus:bg-gray-500 focus:outline-none focus:ring'
       ),
     ]"
     @click="onClick"
@@ -50,7 +50,5 @@ const onClick = () => {
 </template>
 
 <style scoped>
-.active {
-  @apply bg-gray-500 text-white;
-}
+.active{@apply bg-gray-500 text-white}
 </style>

package/dist/runtime/components/profile/tabs/Favorites.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
-import { storeToRefs } from "pinia";
-import { useAuthStore } from "../../../store/auth";
-import { useClassBinding } from "../../../composables/useClassBinding";
-import type { FavoritesClassObj } from "../../../@types/components";
+import { toRefs } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useAuthStore } from '../../../store/auth';
+import { useClassBinding } from '../../../composables/useClassBinding';
+import type { FavoritesClassObj } from '../../../@types/components';
 
 type Props = {
   classObject?: FavoritesClassObj;

package/dist/runtime/components/profile/tabs/GeneralInformation.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { storeToRefs } from "pinia";
-import { ref, reactive } from "vue";
+import { ref, toRefs } from "vue";
 import { useAuthStore } from "../../../store/auth";
 import type {
   GenInfoClassObj,
@@ -15,6 +15,15 @@ type Props = {
   classObject?: GenInfoClassObj;
 };
 
+type GeneralInformationForm = {
+  title: string;
+  name: string;
+  company: string;
+  linkedin_url: string;
+  twitter_url: string;
+  video_chat: boolean;
+}
+
 const props = withDefaults(defineProps<Props>(), {
   classObject: () => {
     return {
@@ -38,14 +47,15 @@ const { classBinding } = useClassBinding();
 const { classObject } = toRefs(props);
 
 const { user } = storeToRefs(useAuthStore());
-const formData = reactive({
-  title: user.value.title,
-  name: user.value.name,
-  company: user.value.company,
-  linkedin_url: user.value.linkedin_url,
-  twitter_url: user.value.twitter_url,
-  video_chat: user.value.video_chat ?? false,
+const formData = ref<GeneralInformationForm>({
+  title: user.value?.title ?? '',
+  name: user.value?.name ?? '',
+  company: user.value?.company ?? '',
+  linkedin_url: user.value?.linkedin_url ?? '',
+  twitter_url: user.value?.twitter_url ?? '',
+  video_chat: user.value?.video_chat ?? false
 });
+
 const errors = ref<[]>([]);
 const wasSaved = ref<boolean>(false);
 
@@ -53,13 +63,13 @@ const wasSaved = ref<boolean>(false);
 const { update } = useAuthStore();
 
 const toggleChat = (value: boolean) => {
-  formData.video_chat = value;
+  formData.value.video_chat = value;
 };
 
 const handleForm = () => {
   errors.value = [];
 
-  update(formData)
+  update(formData.value)
     .then(() => {
       wasSaved.value = true;
     })
@@ -105,7 +115,7 @@ const handleForm = () => {
             classBinding(
               classObject.components?.textInput,
               'container',
-              'shadow appearance-none border rounded w-full py-2 px-3 text-grey-700 leading-tight focus:outline-none focus:shadow-outline'
+              'shadow appearance-none border rounded w-full py-2 px-3 text-grey-700 leading-tight focus:outline-none focus:ring'
             )
           "
           type="text"
@@ -130,7 +140,7 @@ const handleForm = () => {
             classBinding(
               classObject.components?.textInput,
               'container',
-              'shadow appearance-none border rounded w-full py-2 px-3 text-grey-700 leading-tight focus:outline-none focus:shadow-outline'
+              'shadow appearance-none border rounded w-full py-2 px-3 text-grey-700 leading-tight focus:outline-none focus:ring'
             )
           "
           type="text"
@@ -155,7 +165,7 @@ const handleForm = () => {
             classBinding(
               classObject.components?.textInput,
               'container',
-              'shadow appearance-none border rounded w-full py-2 px-3 text-grey-700 leading-tight focus:outline-none focus:shadow-outline'
+              'shadow appearance-none border rounded w-full py-2 px-3 text-grey-700 leading-tight focus:outline-none focus:ring'
             )
           "
           type="text"
@@ -180,7 +190,7 @@ const handleForm = () => {
             classBinding(
               classObject.components?.textInput,
               'container',
-              'shadow appearance-none border rounded w-full py-2 px-3 text-grey-700 leading-tight focus:outline-none focus:shadow-outline'
+              'shadow appearance-none border rounded w-full py-2 px-3 text-grey-700 leading-tight focus:outline-none focus:ring'
             )
           "
           type="text"
@@ -205,7 +215,7 @@ const handleForm = () => {
             classBinding(
               classObject.components?.textInput,
               'container',
-              'shadow appearance-none border rounded w-full py-2 px-3 text-grey-700 leading-tight focus:outline-none focus:shadow-outline'
+              'shadow appearance-none border rounded w-full py-2 px-3 text-grey-700 leading-tight focus:outline-none focus:ring'
             )
           "
           type="text"
@@ -235,7 +245,7 @@ const handleForm = () => {
           classBinding(
             classObject,
             'submitButton',
-            'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline'
+            'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring'
           )
         "
         type="button"

package/dist/runtime/components/profile/tabs/ProfileImage.vue

@@ -74,7 +74,7 @@ const onFileChanged = (e) => {
       :src="user.profile_image"
       :class="classBinding(classObject, 'image', 'w-100 h-100')"
       alt=""
-    />
+    >
 
     <div
       :class="
@@ -108,12 +108,13 @@ const onFileChanged = (e) => {
           viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M0 0h24v24H0z"
+            fill="none"
+          />
           <path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z" />
         </svg>
-        <span :class="classBinding(classObject, 'buttonText', 'ml-2')"
-          >Change Profile Image</span
-        >
+        <span :class="classBinding(classObject, 'buttonText', 'ml-2')">Change Profile Image</span>
       </label>
       <input
         id="inputImg"
@@ -121,7 +122,7 @@ const onFileChanged = (e) => {
         type="file"
         accept="image/*"
         @change="onFileChanged"
-      />
+      >
     </div>
   </div>
 </template>

package/dist/runtime/components/registration/AlreadyRegisteredModal.vue

@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+import { toRefs } from 'vue';
+import { storeToRefs } from 'pinia';
+import { DateTime } from 'luxon';
+import { useUserStore } from '../../store/user';
+import { useConferencesStore } from '../../store';
+import { useEvents } from '../../composables/useEvents';
+import type { Conference } from '../../models/conference';
+import { useConferenceHelpers } from '../../composables';
+
+type Props = {
+  conference: Conference,
+  group: any,
+  show?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  show: false
+});
+
+const { conference, group, show } = toRefs(props);
+
+const { currentUser } = storeToRefs(useUserStore());
+
+const { getConferenceStatusLabel } = useConferenceHelpers(conference);
+
+// emits
+const emit = defineEmits<{
+  (event: "close"): void;
+}>();
+
+// computed
+const registeredConferences = (): Conference[] => {
+  return useConferencesStore().getRegisteredConferences();
+};
+
+// methods
+const formatDateTime = (_value: string, _format: string = 'LLL') => {
+  return DateTime.fromISO(_value).toFormat(_format);
+};
+</script>
+
+<template>
+  <CommonModal
+    v-if="show"
+    @click="emit('close')"
+    @trigger="emit('close')"
+  >
+    <template #modal-title>
+      <h3>You're already registered for this event.</h3>
+    </template>
+
+    <template #modal-body>
+      <div class="pt-5">
+        <p class="mb-0">
+          {{ currentUser.name }}
+        </p>
+        <p class="mb-0">
+          Thank you for registering for the:
+        </p>
+        <h4>{{ group.name }}</h4>
+
+        <p class="mb-1 mt-3">
+          You are registered into these Events. Click to go to any live or archived event.
+        </p>
+
+        <div class="py-5 border border-gray-600">
+          <div
+            v-for="(conf, index) in registeredConferences()"
+            id="list-striped"
+            :key="index"
+            class="py-2 px-3 flex justify-between"
+            @click="useEvents().getEventPage(conf)"
+          >
+            <div>
+              {{ conf.name }}
+            </div>
+            <div>
+              {{ formatDateTime(conf.start_date as string, 'MMMM Do') }} <span>{{ getConferenceStatusLabel(conf) }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </CommonModal>
+</template>
+
+
+<style lang="postcss">
+#list-striped {
+
+  cursor: pointer;
+
+  &:nth-of-type(odd) {
+    background-color: rgb(240 ,240, 240);
+  }
+
+  &:hover {
+    background-color: rgb(230 ,230, 230);
+  }
+}
+</style>