@icvdeveloper/common-module 0.0.75 → 0.0.76

package/dist/runtime/components/agenda/AgendaTabbed.vue

@@ -1,302 +1,311 @@
-<script lang="ts" setup>
-import { toRefs, computed } from "vue";
-import { storeToRefs } from "pinia";
-import { useAgenda } from "../../composables/useAgenda";
-import { Conference, Sponsor as SponsorType } from "../../models/conference";
-import { useDateFormat } from "../../composables/useDateFormat";
-import { usePresentation } from "../../composables/usePresentation";
-import { usePresenters } from "../../composables/usePresenters";
-import CommonAccordion from "../layouts/Accordion.vue";
-import Sponsor from "./components/Sponsor.vue";
-import PresentationLink from "./components/PresentationLink.vue";
-
-type Props = {
-  conference: Conference;
-};
-
-const props = defineProps<Props>();
-
-const { conference } = toRefs(props);
-
-// Methods
-const {
-  days,
-  enabledSponsors,
-  displayTrackGroups,
-  horizontalTrackGroups,
-  selectedDay,
-  setSelectedDay,
-  selectedPresenter,
-  showTabDates,
-  shouldShowSponsors,
-  getCombinedTrackList,
-  hasPresentations,
-  isSmallGroupedTrack,
-  isGroupedTrack,
-  getTracks,
-  getTrackClasses,
-  showInfoLink,
-  useAccordion,
-  usePresenterModal,
-  showPresenterDescription,
-} = useAgenda(conference);
-const {
-  showPresentationTimes,
-  showPresentationEndTimes,
-  getPresentationEndTime,
-} = usePresentation(conference);
-const { getPresentersLabel, getSortedPresenters } = usePresenters(conference);
-
-const { formatDate, formatTimezoneToLocal } = useDateFormat();
-
-// computed
-const presentersContainer = computed(() => {
-  return useAccordion() ? CommonAccordion : "div";
-});
-</script>
-
-<template>
-  <div class="container mx-auto my-8 shadow-lg">
-    <!-- TABS -->
-    <div class="flex flex-col w-full">
-      <div class="flex flex-row w-full">
-        <div
-          v-if="days.length > 0"
-          class="flex flex-row agenda-tab-sponsor-bg-color w-3/4"
-        >
-          <button
-            v-for="(day, index) in days"
-            :key="index"
-            class="flex-1 md:flex-initial py-5 px-4 md:px-6 text-base text-center cursor-pointer no-underline heading-color-2 focus:outline-none"
-            :class="{
-              'agenda-tab-active-bg-color agenda-tab-color':
-                day === selectedDay,
-              'agenda-tab-bg-color agenda-tab-color': day !== selectedDay,
-            }"
-            @click="setSelectedDay(day)"
-          >
-            {{ day.name }}
-            <small v-if="showTabDates(day)">{{ formatDate(day.date) }}</small>
-          </button>
-        </div>
-
-        <div
-          class="flex w-1/4 items-center agenda-tab-sponsor-bg-color flex-row-reverse pr-5"
-        >
-          <Sponsor
-            v-if="shouldShowSponsors(selectedDay)"
-            :sponsor="selectedDay.sponsors[0]"
-            :show-label="false"
-            size="small"
-            :enabled-sponsors="enabledSponsors"
-          >
-          </Sponsor>
-        </div>
-      </div>
-    </div>
-
-    <div
-      v-for="group_or_track in getCombinedTrackList(selectedDay)"
-      :key="group_or_track.id"
-      class="text-center lg:text-left"
-    >
-      <div v-if="hasPresentations(group_or_track)">
-        <!-- TRACK GROUP -->
-        <div
-          v-if="
-            displayTrackGroups != 'None' && group_or_track.type == 'track_group'
-          "
-          class="agenda-track-group-bg-color"
-        >
-          <div class="py-3">
-            <h2 class="font-light py-2 px-3 body-color-2">
-              {{ group_or_track.name }}
-            </h2>
-          </div>
-        </div>
-
-        <!-- ALL TRACKS CONTAINER -->
-        <div
-          class="bg-color-white"
-          :class="{ 'tracks-container': isSmallGroupedTrack(group_or_track) }"
-        >
-          <!-- TRACK + SESSIONS CONTAINER -->
-          <div
-            v-for="(track, trackIndex) in getTracks(group_or_track)"
-            :key="track.id"
-            class="track-container"
-          >
-            <!-- TRACK NAME + SPONSOR -->
-            <div
-              class="track-header flex flex-col min-w-full agenda-track-bg-color"
-              :class="getTrackClasses(group_or_track, trackIndex)"
-            >
-              <!-- TRACK NAME -->
-              <div
-                class="flex-1 py-3"
-                :class="{
-                  'lg:w-3/4':
-                    !isSmallGroupedTrack(group_or_track) &&
-                    track.sponsors.length,
-                }"
-              >
-                <h2
-                  class="font-light p-2 md:py-2 sm:px-3 body-color-2"
-                  :class="{
-                    'agenda-grouped-track-text-color text-lg':
-                      isGroupedTrack(group_or_track),
-                  }"
-                >
-                  {{ track.name }}
-                </h2>
-              </div>
-              <!-- TRACK SPONSOR -->
-              <div
-                v-if="track.sponsors.length"
-                class="flex w-full pb-2 content-center items-center"
-                :class="{
-                  'lg:pb-0 lg:w-1/4 lg:pr-5':
-                    !isSmallGroupedTrack(group_or_track),
-                }"
-              >
-                <sponsor
-                  v-if="shouldShowSponsors(track)"
-                  :sponsor="track.sponsors[0]"
-                  :inline="true"
-                  size="small"
-                  :enabled-sponsors="enabledSponsors"
-                >
-                </sponsor>
-              </div>
-            </div>
-            <!-- ALL TRACK SESSIONS -->
-            <div
-              class="track-sessions"
-              :class="{ 'border-l': horizontalTrackGroups && trackIndex > 0 }"
-            >
-              <!-- EACH SESSION -->
-              <div
-                v-for="(presentation, presentationIndex) in track.presentations"
-                :key="presentation.id"
-              >
-                <div
-                  v-if="presentation.visible"
-                  class="flex flex-col"
-                  :class="
-                    presentationIndex < track.presentations.length - 1
-                      ? 'border-b'
-                      : ''
-                  "
-                >
-                  <!-- SESSION TIME, NAME & SPONSOR CONTAINER -->
-                  <div
-                    class="flex flex-col flex-1 items-center lg:items-start p-5"
-                    :class="{
-                      'bg-color-white-darker':
-                        selectedPresenter &&
-                        selectedPresenter.presentationId === presentation.id,
-                      'lg:flex-row': !isSmallGroupedTrack(group_or_track),
-                    }"
-                  >
-                    <!-- TIME + NAME CONTAINER -->
-                    <div
-                      class="flex-1"
-                      :class="{
-                        'pb-2': presentation.sponsors.length,
-                        'lg:pb-0 lg:w-3/4':
-                          !isSmallGroupedTrack(group_or_track) &&
-                          presentation.sponsors.length,
-                      }"
-                    >
-                      <!-- TIME -->
-                      <h4
-                        v-if="showPresentationTimes(presentation)"
-                        class="font-light mb-3"
-                      >
-                        {{
-                          formatTimezoneToLocal(
-                            presentation.date,
-                            "h:mm a",
-                            conference.timezone
-                          )
-                        }}
-
-                        <span v-if="showPresentationEndTimes()"
-                          >- {{ getPresentationEndTime(presentation) }}</span
-                        >
-                        {{
-                          formatTimezoneToLocal(
-                            presentation.date,
-                            "z",
-                            conference.timezone
-                          )
-                        }}
-                      </h4>
-
-                      <!-- NAME + PLAY BUTTON -->
-                      <div class="pb-1">
-                        <presentation-link
-                          :conference="conference"
-                          :track="track"
-                          :presentation="presentation"
-                          :show-info-link="showInfoLink()"
-                          :is-small-grouped-track="
-                            isSmallGroupedTrack(group_or_track)
-                          "
-                        ></presentation-link>
-                      </div>
-
-                      <!-- PRESENTERS LIST (ACCORDION OR STANDARD/DIV) -->
-                      <component
-                        :is="presentersContainer"
-                        v-if="presentation.presenters.length > 0"
-                        :title="
-                          getPresentersLabel(presentation.presenters.length)
-                        "
-                      >
-                        <p
-                          v-for="presenter in getSortedPresenters(
-                            presentation.presenters
-                          )"
-                          :key="presenter.id"
-                          class="font-bold my-1"
-                        >
-                          <CommonPresenterModal
-                            v-if="usePresenterModal"
-                            :use-icon="false"
-                            :presenter="presenter"
-                            :is-small-grouped-track="
-                              isSmallGroupedTrack(group_or_track)
-                            "
-                          ></CommonPresenterModal>
-                          <CommonPresenterListing
-                            v-else
-                            :presenter="presenter"
-                            :enable-bio="true"
-                            :show-bio="false"
-                            text-class="font-bold text-base"
-                            link-class="agenda-presenter-color"
-                            :is-small-grouped-track="
-                              isSmallGroupedTrack(group_or_track)
-                            "
-                            @clicked="
-                              showPresenterDescription(presenter, presentation)
-                            "
-                          />
-                        </p>
-                      </component>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
+<script lang="ts" setup>
+import { toRefs, computed } from "vue";
+import { storeToRefs } from "pinia";
+import { useAgenda } from "../../composables/useAgenda";
+import { Conference, Sponsor as SponsorType } from "../../models/conference";
+import { useDateFormat } from "../../composables/useDateFormat";
+import { usePresentation } from "../../composables/usePresentation";
+import { usePresenters } from "../../composables/usePresenters";
+import CommonAccordion from "../layouts/Accordion.vue";
+import Sponsor from "./components/Sponsor.vue";
+import PresentationLink from "./components/PresentationLink.vue";
+import Calendar from "./components/Calendar.vue";
+
+type Props = {
+  conference: Conference;
+};
+
+const props = defineProps<Props>();
+
+const { conference } = toRefs(props);
+
+// Methods
+const {
+  days,
+  enabledSponsors,
+  displayTrackGroups,
+  horizontalTrackGroups,
+  selectedDay,
+  setSelectedDay,
+  selectedPresenter,
+  showTabDates,
+  shouldShowSponsors,
+  getCombinedTrackList,
+  hasPresentations,
+  isSmallGroupedTrack,
+  isGroupedTrack,
+  getTracks,
+  getTrackClasses,
+  showInfoLink,
+  useAccordion,
+  usePresenterModal,
+  showPresenterDescription,
+} = useAgenda(conference);
+const {
+  showPresentationTimes,
+  showPresentationEndTimes,
+  getPresentationEndTime,
+} = usePresentation(conference);
+const { getPresentersLabel, getSortedPresenters } = usePresenters(conference);
+
+const { formatDate, formatTimezoneToLocal } = useDateFormat();
+
+// computed
+const presentersContainer = computed(() => {
+  return useAccordion() ? CommonAccordion : "div";
+});
+</script>
+
+<template>
+  <div class="container mx-auto my-8 shadow-lg">
+    <!-- TABS -->
+    <div class="flex flex-col w-full">
+      <div class="flex flex-row w-full">
+        <div
+          v-if="days.length > 0"
+          class="flex flex-row agenda-tab-sponsor-bg-color w-3/4"
+        >
+          <button
+            v-for="(day, index) in days"
+            :key="index"
+            class="flex-1 md:flex-initial py-5 px-4 md:px-6 text-base text-center cursor-pointer no-underline heading-color-2 focus:outline-none"
+            :class="{
+              'agenda-tab-active-bg-color agenda-tab-color':
+                day === selectedDay,
+              'agenda-tab-bg-color agenda-tab-color': day !== selectedDay,
+            }"
+            @click="setSelectedDay(day)"
+          >
+            {{ day.name }}
+            <small v-if="showTabDates(day)">{{ formatDate(day.date) }}</small>
+          </button>
+        </div>
+
+        <div
+          class="flex w-1/4 items-center agenda-tab-sponsor-bg-color flex-row-reverse pr-5"
+        >
+          <Sponsor
+            v-if="shouldShowSponsors(selectedDay)"
+            :sponsor="selectedDay.sponsors[0]"
+            :show-label="false"
+            size="small"
+            :enabled-sponsors="enabledSponsors"
+          >
+          </Sponsor>
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-for="group_or_track in getCombinedTrackList(selectedDay)"
+      :key="group_or_track.id"
+      class="text-center lg:text-left"
+    >
+      <div v-if="hasPresentations(group_or_track)">
+        <!-- TRACK GROUP -->
+        <div
+          v-if="
+            displayTrackGroups != 'None' && group_or_track.type == 'track_group'
+          "
+          class="agenda-track-group-bg-color"
+        >
+          <div class="py-3">
+            <h2 class="font-light py-2 px-3 body-color-2">
+              {{ group_or_track.name }}
+            </h2>
+          </div>
+        </div>
+
+        <!-- ALL TRACKS CONTAINER -->
+        <div
+          class="bg-color-white"
+          :class="{ 'tracks-container': isSmallGroupedTrack(group_or_track) }"
+        >
+          <!-- TRACK + SESSIONS CONTAINER -->
+          <div
+            v-for="(track, trackIndex) in getTracks(group_or_track)"
+            :key="track.id"
+            class="track-container"
+          >
+            <!-- TRACK NAME + SPONSOR -->
+            <div
+              class="track-header flex flex-col min-w-full agenda-track-bg-color"
+              :class="getTrackClasses(group_or_track, trackIndex)"
+            >
+              <!-- TRACK NAME -->
+              <div
+                class="flex-1 py-3"
+                :class="{
+                  'lg:w-3/4':
+                    !isSmallGroupedTrack(group_or_track) &&
+                    track.sponsors.length,
+                }"
+              >
+                <h2
+                  class="font-light p-2 md:py-2 sm:px-3 body-color-2"
+                  :class="{
+                    'agenda-grouped-track-text-color text-lg':
+                      isGroupedTrack(group_or_track),
+                  }"
+                >
+                  {{ track.name }}
+                </h2>
+              </div>
+              <!-- TRACK SPONSOR -->
+              <div
+                v-if="track.sponsors.length"
+                class="flex w-full pb-2 content-center items-center"
+                :class="{
+                  'lg:pb-0 lg:w-1/4 lg:pr-5':
+                    !isSmallGroupedTrack(group_or_track),
+                }"
+              >
+                <sponsor
+                  v-if="shouldShowSponsors(track)"
+                  :sponsor="track.sponsors[0]"
+                  :inline="true"
+                  size="small"
+                  :enabled-sponsors="enabledSponsors"
+                >
+                </sponsor>
+              </div>
+            </div>
+            <!-- ALL TRACK SESSIONS -->
+            <div
+              class="track-sessions"
+              :class="{ 'border-l': horizontalTrackGroups && trackIndex > 0 }"
+            >
+              <!-- EACH SESSION -->
+              <div
+                v-for="(presentation, presentationIndex) in track.presentations"
+                :key="presentation.id"
+              >
+                <div
+                  v-if="presentation.visible"
+                  class="flex flex-col"
+                  :class="
+                    presentationIndex < track.presentations.length - 1
+                      ? 'border-b'
+                      : ''
+                  "
+                >
+                  <!-- SESSION TIME, NAME & SPONSOR CONTAINER -->
+                  <div
+                    class="flex flex-col flex-1 items-center lg:items-start p-5"
+                    :class="{
+                      'bg-color-white-darker':
+                        selectedPresenter &&
+                        selectedPresenter.presentationId === presentation.id,
+                      'lg:flex-row': !isSmallGroupedTrack(group_or_track),
+                    }"
+                  >
+                    <!-- TIME + NAME CONTAINER -->
+                    <div
+                      class="flex-1"
+                      :class="{
+                        'pb-2': presentation.sponsors.length,
+                        'lg:pb-0 lg:w-3/4':
+                          !isSmallGroupedTrack(group_or_track) &&
+                          presentation.sponsors.length,
+                      }"
+                    >
+                      <!-- TIME -->
+                      <h4
+                        v-if="showPresentationTimes(presentation)"
+                        class="font-light mb-3"
+                      >
+                        {{
+                          formatTimezoneToLocal(
+                            presentation.date,
+                            "h:mm a",
+                            conference.timezone
+                          )
+                        }}
+
+                        <span v-if="showPresentationEndTimes()"
+                          >- {{ getPresentationEndTime(presentation) }}</span
+                        >
+                        {{
+                          formatTimezoneToLocal(
+                            presentation.date,
+                            "z",
+                            conference.timezone
+                          )
+                        }}
+                      </h4>
+
+                      <!-- NAME + PLAY BUTTON -->
+                      <div class="pb-1">
+                        <presentation-link
+                          :conference="conference"
+                          :track="track"
+                          :presentation="presentation"
+                          :show-info-link="showInfoLink()"
+                          :is-small-grouped-track="
+                            isSmallGroupedTrack(group_or_track)
+                          "
+                        ></presentation-link>
+                      </div>
+
+                      <!-- ADD TO CALENDAR -->
+                      <calendar
+                        :key="conference.id"
+                        class="mb-3"
+                        :presentation="presentation"
+                        :conference="conference"
+                      />
+
+                      <!-- PRESENTERS LIST (ACCORDION OR STANDARD/DIV) -->
+                      <component
+                        :is="presentersContainer"
+                        v-if="presentation.presenters.length > 0"
+                        :title="
+                          getPresentersLabel(presentation.presenters.length)
+                        "
+                      >
+                        <p
+                          v-for="presenter in getSortedPresenters(
+                            presentation.presenters
+                          )"
+                          :key="presenter.id"
+                          class="font-bold my-1"
+                        >
+                          <CommonPresenterModal
+                            v-if="usePresenterModal"
+                            :use-icon="false"
+                            :presenter="presenter"
+                            :is-small-grouped-track="
+                              isSmallGroupedTrack(group_or_track)
+                            "
+                          ></CommonPresenterModal>
+                          <CommonPresenterListing
+                            v-else
+                            :presenter="presenter"
+                            :enable-bio="true"
+                            :show-bio="false"
+                            text-class="font-bold text-base"
+                            link-class="agenda-presenter-color"
+                            :is-small-grouped-track="
+                              isSmallGroupedTrack(group_or_track)
+                            "
+                            @clicked="
+                              showPresenterDescription(presenter, presentation)
+                            "
+                          />
+                        </p>
+                      </component>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .tracks-container {
   display: grid;
@@ -346,4 +355,4 @@ const presentersContainer = computed(() => {
   grid-row: 2;
   grid-column: 4;
 }
-</style>
+</style>