@icvdeveloper/common-module 1.4.13 → 2.0.0

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

@@ -8,6 +8,7 @@ import { Position } from "../../enums/general";
 
 type Props = {
   presenter: Presenter;
+  showImg?: boolean;
   enableBio?: boolean;
   showBio?: boolean;
   isSmallGroupedTrack?: boolean;
@@ -20,6 +21,7 @@ type Props = {
 
 const props = withDefaults(defineProps<Props>(), {
   enableBio: true,
+  showImg: true,
   showBio: false,
   isSmallGroupedTrack: false,
   bioLinkOnName: true,
@@ -45,7 +47,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(["clicked"]);
 
-const { presenter, enableBio, isSmallGroupedTrack, classObject } =
+const { presenter, showImg, enableBio, isSmallGroupedTrack, classObject } =
   toRefs(props);
 const { fullName, titleCompany } = usePresenter(presenter);
 const { classBinding } = useClassBinding();
@@ -73,7 +75,7 @@ const handleClick = () => {
       ]"
     >
       <div
-        v-if="presenter.photo && imagePosition !== Position.RIGHT"
+        v-if="showImg && presenter.photo && imagePosition !== Position.RIGHT"
         :class="
           classBinding(classObject, 'presenterImageContainer', 'shrink p-2')
         "
@@ -81,7 +83,7 @@ const handleClick = () => {
         <img
           :src="presenter.photo"
           :class="classBinding(classObject, 'presenterImage', '')"
-        />
+        >
       </div>
       <div
         :class="
@@ -98,21 +100,26 @@ const handleClick = () => {
             class="cursor-pointer"
             :class="classBinding(classObject, 'presenterNameLink', '')"
             @click="handleClick()"
-            ><span :class="classBinding(classObject, 'presenterName', '')">
-              {{ fullName }}</span
-            ></a
           >
-          <span v-else :class="classBinding(classObject, 'presenterName', '')">
+            <span :class="classBinding(classObject, 'presenterName', '')">
+              {{ fullName }}
+            </span>
+          </a>
+          <span
+            v-else
+            :class="classBinding(classObject, 'presenterName', '')"
+          >
             {{ fullName }}
           </span>
           <span
             v-if="presenter.role == 'moderator'"
             :class="[
               isSmallGroupedTrack ? 'new-line' : 'no-new-line',
-              classBinding(classObject, 'presenterRole', 'text-grey-dark'),
+              classBinding(classObject, 'presenterRole', 'text-gray-600'),
             ]"
-            >Moderator</span
           >
+            Moderator
+          </span>
           <span
             v-if="titleCompany"
             :class="[
@@ -123,8 +130,9 @@ const handleClick = () => {
                 'font-light paragraph-color-1'
               ),
             ]"
-            >{{ titleCompany }}</span
           >
+            {{ titleCompany }}
+          </span>
         </p>
         <p
           v-if="showBio && presenter.biography"
@@ -136,26 +144,28 @@ const handleClick = () => {
             )
           "
           v-html="presenter.biography"
-        ></p>
-        <div v-if="enableBio && !bioLinkOnName" class="shrink">
+        />
+        <div
+          v-if="enableBio && !bioLinkOnName"
+          class="shrink"
+        >
           <a
             class="cursor-pointer"
             :class="classBinding(classObject, 'presenterBioLink', '')"
             @click="handleClick()"
-            >{{ bioLinkText }}
+          >
+            {{ bioLinkText }}
           </a>
         </div>
       </div>
       <div
-        v-if="presenter.photo && imagePosition === Position.RIGHT"
-        :class="
-          classBinding(classObject, 'presenterImageContainer', 'shrink p-2')
-        "
+        v-if="showImg && presenter.photo && imagePosition === Position.RIGHT"
+        :class="classBinding(classObject, 'presenterImageContainer', 'shrink p-2')"
       >
         <img
           :src="presenter.photo"
           :class="classBinding(classObject, 'presenterImage', '')"
-        />
+        >
       </div>
     </div>
   </div>
@@ -172,13 +182,13 @@ const handleClick = () => {
   white-space: normal;
 }
 
-@media (max-width: 991px) {
+@media (max-width: 1023px) {
   .new-line-responsive:before {
     content: "\a";
     white-space: pre;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 1024px) {
   .new-line-responsive:before {
     content: " - ";
     white-space: normal;

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/virtualPagesConfig";
+
+// 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"

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"