@icvdeveloper/common-module 0.0.33 → 0.0.36

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

@@ -0,0 +1,472 @@
+<script lang="ts" setup>
+import { storeToRefs } from "pinia";
+import { useDateFormat } from "../../composables/useDateFormat";
+import { useConferenceHelpers } from "../../composables/useConferenceHelpers";
+import { useEvents } from "../../composables/useEvents";
+import { useClassBinding } from "../../composables/useClassBinding";
+import CommonSponsor from "../agenda/components/Sponsor.vue";
+import { Conference } from "../../models/conference";
+import { Position } from "../../enums/general";
+import { listEventsClassObj } from "../../@types/components";
+
+interface Props {
+  showSponsors?: boolean;
+  showBrand?: boolean;
+  showCountdown?: boolean;
+  mediaButton?: boolean;
+  registerButton?: boolean;
+  loginButton?: boolean;
+  viewInfoButton?: boolean;
+  isUpcoming?: boolean;
+  showEventImage?: boolean;
+  sponsorPosition?: Position;
+  borderPosition?: Position;
+  countdownPosition?: Position;
+  classObject?: listEventsClassObj;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showSponsors: true,
+  showBrand: true,
+  showCountdown: true,
+  mediaButton: true,
+  registerButton: true,
+  loginButton: true,
+  viewInfoButton: true,
+  isUpcoming: true,
+  showEventImage: true,
+  sponsorPosition: Position.RIGHT,
+  borderPosition: Position.MIDDLE,
+  countdownPosition: Position.BOTTOM,
+  classObject: () => {
+    return {};
+  },
+});
+
+const {
+  showSponsors,
+  showBrand,
+  showCountdown,
+  mediaButton,
+  registerButton,
+  loginButton,
+  viewInfoButton,
+  isUpcoming,
+  showEventImage,
+  sponsorPosition,
+  borderPosition,
+  countdownPosition,
+  classObject,
+} = toRefs(props);
+
+// data
+const { pastEvents, upcomingEvents } = storeToRefs(useConferencesStore());
+
+// methods
+const { globalConfigValue, pagesConfigValue } = storeToRefs(
+  useTemplateConfigsStore()
+);
+const { formatDate } = useDateFormat();
+const {
+  isSingleDayEvent,
+  showConferenceViewButton,
+  getConferenceWebcastUrl,
+  getConferenceWebcastButtonText,
+  showViewArchiveButton,
+  getViewArchiveUrl,
+  getViewArchiveButtonText,
+  getConferenceRegUrl,
+  getConferenceRegText,
+  showConferenceRegButton,
+} = useConferenceHelpers();
+
+const {
+  isLoggedIn,
+  loginModalVisible,
+  conferenceToLoginTo,
+  goEventPage,
+  setConferenceToLoginTo,
+  buttonClass,
+  orderAffiliates,
+  getBrand,
+  isHomePage,
+} = useEvents();
+
+const { classBinding } = useClassBinding();
+
+const showViewButton = (_conference: Conference): boolean => {
+  return isUpcoming.value
+    ? showConferenceViewButton(_conference)
+    : showViewArchiveButton(_conference);
+};
+
+const getVideoUrl = (_conference: Conference): string => {
+  return isUpcoming.value
+    ? getConferenceWebcastUrl(_conference)
+    : getViewArchiveUrl(_conference);
+};
+
+const getVideoButtonText = (_conference: Conference): string => {
+  return isUpcoming.value
+    ? getConferenceWebcastButtonText(_conference)
+    : getViewArchiveButtonText(_conference);
+};
+
+// computed
+const eventType = computed((): Conference[] => {
+  return isUpcoming.value ? upcomingEvents.value : pastEvents.value;
+});
+
+const showLoginButton = computed((): boolean => {
+  const archivedHomepage: boolean =
+    isUpcoming.value || (!isUpcoming.value && isHomePage.value);
+  return (
+    archivedHomepage &&
+    loginButton.value &&
+    !isLoggedIn.value &&
+    !globalConfigValue.value("townhall_registration_enabled")
+  );
+});
+</script>
+
+<template>
+  <!-- list container -->
+  <div class="flex w-full flex-col">
+    <!-- list container -->
+    <div
+      :class="
+        classBinding(classObject, 'listContainer', 'container flex-1 mx-auto')
+      "
+    >
+      <!-- individual event container -->
+      <div
+        v-for="conference in eventType"
+        :key="conference.id"
+        :class="[
+          {
+            'border-1 border-t border-color-accent-2':
+              borderPosition === Position.TOP,
+          },
+          classBinding(
+            classObject,
+            'eventContainer',
+            'flex flex-col items-center md:flex-row py-4'
+          ),
+        ]"
+      >
+        <!-- event image -->
+        <div
+          v-if="showEventImage"
+          :class="
+            classBinding(
+              classObject,
+              'eventImageContainer',
+              'flex w-full md:w-1/3 pb-3 px-3 md:px-6 overflow-hidden'
+            )
+          "
+        >
+          <img
+            :class="
+              classBinding(
+                classObject,
+                'eventImage',
+                'flex-1 self-center mx-auto w-full'
+              )
+            "
+            :src="conference.photo"
+          />
+        </div>
+        <!-- event details container -->
+        <div
+          :class="[
+            { 'md:w-2/3': showEventImage },
+            classBinding(
+              classObject,
+              'eventContentContainer',
+              'flex flex-col justify-center text-center w-full md:pr-6 md:text-left md:justify-start md:items-start'
+            ),
+          ]"
+        >
+          <!-- event brand, name, date and countdown container -->
+          <div
+            :class="[
+              {
+                'border-1 border-b border-color-accent-2 mb-6':
+                  borderPosition === Position.MIDDLE,
+              },
+              classBinding(
+                classObject,
+                'eventDetailsContainer',
+                'w-full flex flex-col lg:flex-row'
+              ),
+            ]"
+          >
+            <!-- event details -->
+            <div
+              :class="classBinding(classObject, 'eventDetails', 'flex-grow')"
+            >
+              <h3
+                v-if="showBrand && getBrand(conference.affiliates).length"
+                :class="
+                  classBinding(
+                    classObject,
+                    'eventBrand',
+                    'text-base font-bold leading-tight tracking-wide mb-3'
+                  )
+                "
+              >
+                {{ getBrand(conference.affiliates) }}
+              </h3>
+              <nuxt-link
+                :to="`/${isUpcoming ? 'upcoming-events' : 'past-events'}/${
+                  conference.id
+                }`"
+                class="no-underline"
+              >
+                <h2
+                  :class="
+                    classBinding(
+                      classObject,
+                      'eventName',
+                      'text-2xl lg:text-3xl font-medium mb-2 conf-name-alignment'
+                    )
+                  "
+                >
+                  {{ conference.name }}
+                </h2>
+              </nuxt-link>
+              <p
+                :class="
+                  classBinding(
+                    classObject,
+                    'eventDate',
+                    'text-base leading-normal tracking-wide font-light uppercase md:text-md lg:text-lg'
+                  )
+                "
+              >
+                {{ formatDate(conference.start_date) }}
+                <span v-if="!isSingleDayEvent(conference)">
+                  - {{ formatDate(conference.end_date) }}</span
+                >
+              </p>
+            </div>
+            <!-- countdown timer - top-aligned -->
+            <div
+              v-if="
+                isUpcoming &&
+                showCountdown &&
+                countdownPosition === Position.TOP &&
+                pagesConfigValue('main.countdown_timer')
+              "
+              :class="
+                classBinding(
+                  classObject,
+                  'countdownContainerTop',
+                  'flex-auto flex items-center self-center mb-4 lg:mb-0'
+                )
+              "
+            >
+              <CommonCountdownTimer
+                :date="conference.start_date"
+                :is-compact="true"
+                :class-object="classObject.components.countdownTimer"
+              ></CommonCountdownTimer>
+            </div>
+          </div>
+          <!-- event button, countdown timer, and sponsors container -->
+          <div
+            :class="
+              classBinding(
+                classObject,
+                'buttonCountdownSponsorsContainer',
+                'flex flex-col w-full'
+              )
+            "
+          >
+            <div
+              :class="
+                classBinding(
+                  classObject,
+                  'buttonCountdownContainer',
+                  'flex-1 flex flex-col justify-between xl:flex-row w-full'
+                )
+              "
+            >
+              <div
+                :class="
+                  classBinding(
+                    classObject,
+                    'buttonContainer',
+                    'flex-auto mr-0 xl:mr-4'
+                  )
+                "
+              >
+                <!-- view info button -->
+                <button
+                  v-if="viewInfoButton"
+                  :class="classBinding(classObject, 'buttonItem', buttonClass)"
+                  @click="goEventPage(conference)"
+                >
+                  View Info
+                </button>
+                <!-- view live/preview archive button -->
+                <a
+                  v-if="mediaButton && showViewButton(conference)"
+                  :href="getVideoUrl(conference)"
+                  :target="
+                    /^http/.test(!isUpcoming && getVideoUrl(conference))
+                      ? '_blank'
+                      : '_self'
+                  "
+                >
+                  <button
+                    :class="
+                      classBinding(classObject, 'buttonItem', buttonClass)
+                    "
+                  >
+                    {{ getVideoButtonText(conference) }}
+                  </button>
+                </a>
+
+                <!-- login button -->
+                <button
+                  v-if="showLoginButton"
+                  :class="classBinding(classObject, 'buttonItem', buttonClass)"
+                  @click="setConferenceToLoginTo(conference)"
+                >
+                  Log In
+                </button>
+
+                <!-- register button -->
+                <a
+                  v-if="registerButton && showConferenceRegButton(conference)"
+                  :href="getConferenceRegUrl(conference)"
+                  :target="
+                    /^http/.test(getConferenceRegUrl(conference))
+                      ? '_blank'
+                      : '_self'
+                  "
+                >
+                  <button
+                    :class="
+                      classBinding(classObject, 'buttonItem', buttonClass)
+                    "
+                  >
+                    {{ getConferenceRegText(conference) }}
+                  </button>
+                </a>
+              </div>
+              <!-- countdown timer - right-aligned -->
+              <div
+                v-if="
+                  isUpcoming &&
+                  showCountdown &&
+                  countdownPosition === Position.RIGHT &&
+                  pagesConfigValue('main.countdown_timer')
+                "
+                class="flex-auto md:flex mt-3 md:mt-2"
+                :class="
+                  classBinding(
+                    classObject,
+                    'countdownContainerRight',
+                    'flex-auto flex items-center self-center mb-4 lg:mb-0'
+                  )
+                "
+              >
+                <CommonCountdownTimer
+                  :date="conference.start_date"
+                  :is-compact="true"
+                  :class-object="classObject.components.countdownTimer"
+                ></CommonCountdownTimer>
+              </div>
+            </div>
+            <!-- countdown timer - bottom-aligned -->
+            <div
+              v-if="
+                isUpcoming &&
+                showCountdown &&
+                countdownPosition === Position.BOTTOM &&
+                pagesConfigValue('main.countdown_timer')
+              "
+              :class="
+                classBinding(
+                  classObject,
+                  'countdownContainerBottom',
+                  'flex-auto md:flex my-3 md:my-2'
+                )
+              "
+            >
+              <CommonCountdownTimer
+                :date="conference.start_date"
+                :is-compact="true"
+                :class-object="classObject.components.countdownTimer"
+              ></CommonCountdownTimer>
+            </div>
+            <!-- sponsors container - bottom-aligned -->
+            <div
+              v-if="showSponsors && sponsorPosition === Position.BOTTOM"
+              class=""
+              :class="
+                classBinding(
+                  classObject,
+                  'sponsorsContainer',
+                  'grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-y-1.5 gap-x-3'
+                )
+              "
+            >
+              <!-- individual sponsor -->
+              <template
+                v-for="affiliate in orderAffiliates(conference.affiliates)"
+              >
+                <CommonSponsor
+                  v-if="affiliate.role == 'sponsor'"
+                  :key="affiliate.id"
+                  :sponsor="affiliate"
+                  :class-object="classObject.components.sponsor"
+                ></CommonSponsor>
+              </template>
+            </div>
+          </div>
+        </div>
+        <!-- sponsors container - right-aligned -->
+        <div
+          v-if="showSponsors && sponsorPosition === Position.RIGHT"
+          class="flex flex-col"
+        >
+          <!-- individual sponsor -->
+          <template v-for="affiliate in orderAffiliates(conference.affiliates)">
+            <CommonSponsor
+              v-if="affiliate.role == 'sponsor'"
+              :key="affiliate.id"
+              :sponsor="affiliate"
+              :class-object="classObject.components.sponsor"
+            ></CommonSponsor>
+          </template>
+        </div>
+      </div>
+    </div>
+    <!-- login modal -->
+    <CommonModal
+      :visible="loginModalVisible"
+      :class="classObject.components.modal"
+      @trigger="loginModalVisible = false"
+    >
+      <template #modal-body>
+        <CommonLoginFullWidth
+          :conference="conferenceToLoginTo"
+          :class="classObject.components.login"
+        />
+      </template>
+    </CommonModal>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.leading-tight {
+  line-height: 1.25rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+</style>

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

@@ -2,29 +2,53 @@
 import { toRefs } from "vue";
 import { Presenter } from "../../models/conference";
 import { usePresenter } from "../../composables/usePresenter";
+import { useClassBinding } from "../../composables/useClassBinding";
+import { presenterListingClassObj } from "../../@types/components";
+import { Position } from "../../enums/general";
 
 type Props = {
   presenter: Presenter;
-  textClass?: string;
-  linkClass?: string;
   enableBio?: boolean;
   showBio?: boolean;
   isSmallGroupedTrack?: boolean;
+  bioLinkOnName?: boolean;
+  bioLinkText?: string;
+  bioLinkPosition?: Position;
+  imagePosition?: Position;
+  classObject?: presenterListingClassObj;
 };
 
 const props = withDefaults(defineProps<Props>(), {
-  textClass: "font-medium text-lg",
-  linkClass: "",
   enableBio: true,
   showBio: false,
   isSmallGroupedTrack: false,
+  bioLinkOnName: true,
+  bioLinkText: "Read More >",
+  bioLinkPosition: Position.BOTTOM,
+  imagePosition: Position.LEFT,
+  classObject: () => {
+    return {
+      container: "",
+      presenterImageContainer: "",
+      presenterImage: "",
+      presenterContainer: "",
+      presenterTextContainer: "",
+      presenterNameLink: "",
+      presenterName: "",
+      presenterRole: "",
+      presenterTitle: "",
+      presenterBio: "",
+      presenterBioLink: "",
+    };
+  },
 });
 
 const emit = defineEmits(["clicked"]);
 
-const { presenter, textClass, linkClass, enableBio, isSmallGroupedTrack } =
+const { presenter, enableBio, isSmallGroupedTrack, classObject } =
   toRefs(props);
 const { fullName, titleCompany } = usePresenter(presenter);
+const { classBinding } = useClassBinding();
 
 // methods
 const handleClick = () => {
@@ -35,34 +59,105 @@ const handleClick = () => {
 </script>
 
 <template>
-  <div :class="textClass">
-    <p class="my-1">
-      <a
-        v-if="enableBio"
-        class="cursor-pointer"
-        :class="linkClass"
-        @click="handleClick()"
-        >{{ fullName }}</a
+  <div>
+    <div
+      :class="[
+        { 'flex-col': imagePosition !== Position.RIGHT },
+        { 'md:flex-row': imagePosition !== Position.TOP },
+        { 'flex-col-reverse': imagePosition === Position.RIGHT },
+        classBinding(
+          classObject,
+          'presenterContainer',
+          'flex-1 flex content-center items-center md:items-start'
+        ),
+      ]"
+    >
+      <div
+        v-if="presenter.photo.length && imagePosition !== Position.RIGHT"
+        :class="
+          classBinding(classObject, 'presenterImageContainer', 'shrink p-2')
+        "
       >
-      <span v-else>{{ fullName }}</span>
-      <span
-        v-if="presenter.role == 'moderator'"
-        class="text-grey-dark"
-        :class="isSmallGroupedTrack ? 'new-line' : 'no-new-line'"
-        >Moderator</span
+        <img
+          :src="presenter.photo"
+          :class="classBinding(classObject, 'presenterImage', '')"
+        />
+      </div>
+      <div
+        :class="
+          classBinding(
+            classObject,
+            'presenterTextContainer',
+            'flex flex-col text-center md:text-left self-center'
+          )
+        "
       >
-      <span
-        v-if="titleCompany"
-        class="font-light paragraph-color-1"
-        :class="isSmallGroupedTrack ? 'new-line' : 'new-line-responsive'"
-        >{{ titleCompany }}</span
+        <p class="my-1">
+          <a
+            v-if="enableBio && bioLinkOnName"
+            class="cursor-pointer"
+            :class="classBinding(classObject, 'presenterNameLink', '')"
+            @click="handleClick()"
+            ><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'),
+            ]"
+            >Moderator</span
+          >
+          <span
+            v-if="titleCompany"
+            :class="[
+              isSmallGroupedTrack ? 'new-line' : 'new-line-responsive',
+              classBinding(
+                classObject,
+                'presenterTitle',
+                'font-light paragraph-color-1'
+              ),
+            ]"
+            >{{ titleCompany }}</span
+          >
+        </p>
+        <p
+          v-if="showBio && presenter.biography"
+          :class="
+            classBinding(
+              classObject,
+              'presenterBio',
+              'font-light text-base paragraph-color-1'
+            )
+          "
+          v-html="presenter.biography"
+        ></p>
+        <div v-if="enableBio && !bioLinkOnName" class="shrink">
+          <a
+            class="cursor-pointer"
+            :class="classBinding(classObject, 'presenterBioLink', '')"
+            @click="handleClick()"
+            >{{ bioLinkText }}
+          </a>
+        </div>
+      </div>
+      <div
+        v-if="presenter.photo.length && imagePosition === Position.RIGHT"
+        :class="
+          classBinding(classObject, 'presenterImageContainer', 'shrink p-2')
+        "
       >
-    </p>
-    <p
-      v-if="showBio && presenter.biography"
-      class="font-light text-base paragraph-color-1"
-      v-html="presenter.biography"
-    ></p>
+        <img
+          :src="presenter.photo"
+          :class="classBinding(classObject, 'presenterImage', '')"
+        />
+      </div>
+    </div>
   </div>
 </template>
 

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

@@ -24,14 +24,18 @@ const { fullName, presenterImageStyle, itemWidthStyle, isGrayScale } =
 <template>
   <div>
     <div v-if="useIcon" class="presenter-icon cursor-pointer">
-      <CommonSvgIcon icon="info" :greyscale="isGrayScale"></CommonSvgIcon>
+      <CommonSvgIcon
+        icon="info"
+        :greyscale="isGrayScale"
+        @click="modalVisible = true"
+      ></CommonSvgIcon>
     </div>
 
     <CommonPresenterListing
       v-else
       :presenter="presenter"
       :enable-bio="true"
-      :show-bio="false"
+      :show-bio="true"
       text-class="font-bold text-base"
       link-class="agenda-presenter-color"
       :is-small-grouped-track="isSmallGroupedTrack"