@icvdeveloper/common-module 0.0.75 → 0.0.76

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

@@ -1,26 +1,26 @@
-<script lang="ts" setup>
-import { ref } from "vue";
-
-const expanded = ref<boolean>(false);
-
-// methods
-const toggle = () => {
-  expanded.value = !expanded.value;
-};
-</script>
-
-<template>
-  <div>
-    <div class="font-bold mt-2">
-      <button class="outline-none" @click="toggle">
-        <slot name="header"></slot>
-      </button>
-    </div>
-
-    <transition name="slide" mode="out-in">
-      <div v-show="expanded">
-        <slot name="body" />
-      </div>
-    </transition>
-  </div>
-</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const expanded = ref<boolean>(false);
+
+// methods
+const toggle = () => {
+  expanded.value = !expanded.value;
+};
+</script>
+
+<template>
+  <div>
+    <div class="font-bold mt-2">
+      <button class="outline-none" @click="toggle">
+        <slot name="header"></slot>
+      </button>
+    </div>
+
+    <transition name="slide" mode="out-in">
+      <div v-show="expanded">
+        <slot name="body" />
+      </div>
+    </transition>
+  </div>
+</template>

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

@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import { ref, toRefs, computed } from "vue";
+import { storeToRefs } from "pinia";
+import { get } from "lodash-es";
+import { DateTime } from 'luxon';
+import { useTemplateConfigsStore } from "../../../store";
+import 'add-to-calendar-button';
+import { Conference } from "../../../models/conference";
+import { Presentation } from "../../../models/conference";
+
+type Props = {
+  conference: Conference;
+  presentation: Presentation;
+};
+
+const props = defineProps<Props>();
+
+const { conference, presentation } = toRefs(props);
+
+const { pagesConfigValue } = storeToRefs(useTemplateConfigsStore());
+
+// Computed
+const showAddToGoogleCalendar = computed((): boolean => {
+    return pagesConfigValue.value("agenda.add_to_google_calendar", false);
+});
+  
+const showAddToMicrosoftCalendar = computed((): boolean => {
+  return pagesConfigValue.value("agenda.add_to_microsoft_calendar", false);
+});
+
+const presStartDate = computed((): string => {
+  return DateTime.fromSQL(
+      presentation.value.date,
+      { zone: conference.timezone }
+    ).toFormat("yyyy-MM-dd");
+});
+
+const presStartTime = computed((): string => {
+  return DateTime.fromSQL(
+      presentation.value.date,
+      { zone: conference.timezone }
+    ).toFormat("HH:mm");
+});
+
+const presEndTime = computed((): string => {
+  let duration: number = get(presentation.value, "duration", 3600) // default to 60 min
+  return DateTime.fromSQL(
+      presentation.value.date,
+      { zone: conference.timezone }
+    ).plus(duration * 1000).toFormat("HH:mm");
+});
+
+const calendarOptions = computed((): string => {
+  let opts = [];
+  if (showAddToGoogleCalendar) { opts.push('Google'); }
+  if (showAddToMicrosoftCalendar) { opts.push('iCal'); }
+  let optsQuoted = opts.map(opt => `'${opt}'`);
+  return optsQuoted.join(',');
+});
+
+const cssPath = computed((): string => {
+  // atcb.css required in template/playground public folder
+  return window.location.origin + "/atcb.css";
+});
+
+</script>
+
+<template>
+  <div>
+    <add-to-calendar-button 
+      :name="presentation.name"
+      :description="presentation.description"
+      :startDate="presStartDate"
+      :startTime="presStartTime"
+      :endTime="presEndTime"
+      :timeZone="conference.timezone"
+      :location="conference.location"
+      listStyle="dropdown"
+      trigger="click"
+      lightMode="bodyScheme"
+      buttonStyle="custom"
+      :customCss="cssPath"
+      hideIconButton
+      hideBackground
+      hideCheckmark
+      :options="calendarOptions"
+    ></add-to-calendar-button>
+  </div>
+</template>

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

@@ -1,56 +1,56 @@
-<script lang="ts" setup>
-import { ref, toRefs, computed } from "vue";
-import { Presentation } from "../../../models/conference";
-
-type Props = {
-  linkText: string;
-  presentation: Presentation;
-  useIcon?: boolean;
-  newLine?: boolean;
-};
-
-const props = withDefaults(defineProps<Props>(), {
-  useIcon: true,
-  newLine: false,
-});
-
-// data
-const { useIcon, newLine, linkText, presentation } = toRefs(props);
-const showDescModal = ref<boolean>(false);
-
-// computed
-const getLinkText = computed(() => {
-  return linkText.value.length > 0 ? linkText.value : "Session Details";
-});
-</script>
-
-<template>
-  <span>
-    <a class="cursor-pointer" @click="showDescModal = true">
-      <CommonSvgIcon
-        v-if="useIcon"
-        icon="info"
-        class="align-middle"
-        style="display: inline-block; margin-bottom: 2px"
-        :icon-width="'16px'"
-      ></CommonSvgIcon>
-      <span v-else class="text-xs" :class="{ 'new-line': newLine }">{{
-        getLinkText
-      }}</span>
-    </a>
-
-    <CommonModal :visible="showDescModal" @trigger="showDescModal = false">
-      <template #modal-title>
-        <div class="text-lg font-bold text-left mb-4 pb-4 border-b">
-          {{ presentation.name }}
-        </div>
-      </template>
-      <template #modal-body>
-        <div
-          class="text-base font-normal text-left"
-          v-html="presentation.description"
-        ></div>
-      </template>
-    </CommonModal>
-  </span>
-</template>
+<script lang="ts" setup>
+import { ref, toRefs, computed } from "vue";
+import { Presentation } from "../../../models/conference";
+
+type Props = {
+  linkText: string;
+  presentation: Presentation;
+  useIcon?: boolean;
+  newLine?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  useIcon: true,
+  newLine: false,
+});
+
+// data
+const { useIcon, newLine, linkText, presentation } = toRefs(props);
+const showDescModal = ref<boolean>(false);
+
+// computed
+const getLinkText = computed(() => {
+  return linkText.value.length > 0 ? linkText.value : "Session Details";
+});
+</script>
+
+<template>
+  <span>
+    <a class="cursor-pointer" @click="showDescModal = true">
+      <CommonSvgIcon
+        v-if="useIcon"
+        icon="info"
+        class="align-middle"
+        style="display: inline-block; margin-bottom: 2px"
+        :icon-width="'16px'"
+      ></CommonSvgIcon>
+      <span v-else class="text-xs" :class="{ 'new-line': newLine }">{{
+        getLinkText
+      }}</span>
+    </a>
+
+    <CommonModal :visible="showDescModal" @trigger="showDescModal = false">
+      <template #modal-title>
+        <div class="text-lg font-bold text-left mb-4 pb-4 border-b">
+          {{ presentation.name }}
+        </div>
+      </template>
+      <template #modal-body>
+        <div
+          class="text-base font-normal text-left"
+          v-html="presentation.description"
+        ></div>
+      </template>
+    </CommonModal>
+  </span>
+</template>

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

@@ -1,49 +1,49 @@
-<script lang="ts" setup>
-import { toRefs } from "vue";
-import { usePresentation } from "../../../composables/usePresentation";
-import { Conference, Presentation } from "../../../models/conference";
-import { Icons } from "../../../models/icons";
-
-type Props = {
-  icon?: keyof Icons;
-  conference: Conference;
-  presentation: Presentation;
-};
-
-const props = withDefaults(defineProps<Props>(), {
-  icon: "playarrow",
-});
-
-const { icon, conference, presentation } = toRefs(props);
-
-const {
-  showPresentationPlayIcon,
-  getPresentationCustomPlayIcon,
-  getPresentationStreamingText,
-} = usePresentation(conference);
-</script>
-
-<template>
-  <span class="flex-initial flex flex-row items-center py-2 lg:py-1">
-    <span v-if="showPresentationPlayIcon(presentation)">
-      <img
-        v-if="getPresentationCustomPlayIcon(presentation)"
-        style="max-width: 15px"
-        :src="(getPresentationCustomPlayIcon(presentation) as unknown as string)"
-        alt=""
-      />
-      <CommonSvgIcon
-        v-else
-        :icon="icon"
-        class="align-middle mr-1"
-        style="display: inline-block; margin-bottom: 2px"
-        :icon-width="'20px'"
-      >
-      </CommonSvgIcon
-      >&nbsp;
-    </span>
-    <small class="flex-initial uppercase text-base text-red-darker">{{
-      getPresentationStreamingText(presentation)
-    }}</small>
-  </span>
-</template>
+<script lang="ts" setup>
+import { toRefs } from "vue";
+import { usePresentation } from "../../../composables/usePresentation";
+import { Conference, Presentation } from "../../../models/conference";
+import { Icons } from "../../../models/icons";
+
+type Props = {
+  icon?: keyof Icons;
+  conference: Conference;
+  presentation: Presentation;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  icon: "playarrow",
+});
+
+const { icon, conference, presentation } = toRefs(props);
+
+const {
+  showPresentationPlayIcon,
+  getPresentationCustomPlayIcon,
+  getPresentationStreamingText,
+} = usePresentation(conference);
+</script>
+
+<template>
+  <span class="flex-initial flex flex-row items-center py-2 lg:py-1">
+    <span v-if="showPresentationPlayIcon(presentation)">
+      <img
+        v-if="getPresentationCustomPlayIcon(presentation)"
+        style="max-width: 15px"
+        :src="(getPresentationCustomPlayIcon(presentation) as unknown as string)"
+        alt=""
+      />
+      <CommonSvgIcon
+        v-else
+        :icon="icon"
+        class="align-middle mr-1"
+        style="display: inline-block; margin-bottom: 2px"
+        :icon-width="'20px'"
+      >
+      </CommonSvgIcon
+      >&nbsp;
+    </span>
+    <small class="flex-initial uppercase text-base text-red-darker">{{
+      getPresentationStreamingText(presentation)
+    }}</small>
+  </span>
+</template>

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

@@ -1,137 +1,137 @@
-<script lang="ts" setup>
-import { toRefs, computed } from "vue";
-import { useAgenda } from "../../../composables/useAgenda";
-import { useConferenceHelpers } from "../../../composables/useConferenceHelpers";
-import { usePresentation } from "../../../composables/usePresentation";
-import {
-  Conference,
-  Presentation,
-  Track,
-  TrackGroup,
-} from "../../../models/conference";
-import InfoLink from "./InfoLink.vue";
-import PlayIcon from "./PlayIcon.vue";
-
-type Props = {
-  conference: Conference;
-  presentation: Presentation;
-  track: Track | TrackGroup;
-  showInfoLink?: boolean;
-  simpleLayout?: boolean;
-};
-
-const props = withDefaults(defineProps<Props>(), {
-  showInfoLink: true,
-  simpleLayout: false,
-});
-
-const { conference, track, presentation } = toRefs(props);
-
-// Methods
-const { conferenceIsLiveOrMixed, conferenceIsArchived } =
-  useConferenceHelpers(conference);
-const { isSmallGroupedTrack } = useAgenda(conference);
-const {
-  getPresentationLinkTarget,
-  getLivePresentationLinkDestination,
-  showPresentationLinkIcon,
-  getPresentationLinkText,
-  presentationIsLiveOrMixed,
-  getArchivePresentationLinkDestination,
-} = usePresentation(conference);
-
-// Computed
-const presentationNameClass = computed(() => {
-  return isSmallGroupedTrack(track.value) ? "text-base" : "text-lg";
-});
-</script>
-
-<template>
-  <div>
-    <div v-if="!simpleLayout">
-      <!-- LIVE AGENDA GO TO WEBCAST PAGE -->
-      <div>
-        <h2 class="flex flex-initial flex-row" :class="presentationNameClass">
-          <!-- zoom text & icon link -->
-          <CommonZoomModal
-            v-if="
-              isAgenda &&
-              conferenceIsLiveOrMixed(conference) &&
-              presentation.type == 'zoom'
-            "
-            :presentation-id="presentation.id"
-            modal-size="full"
-          >
-            <template #modal-link>
-              <span class="font-semibold no-underline heading-link"
-                >{{ presentation.name }}
-                <PlayIcon
-                  :presentation="presentation"
-                  :conference="conference"
-                  :class="'justify-center md:justify-start'"
-                  icon="zoom"
-                ></PlayIcon>
-              </span>
-            </template>
-          </CommonZoomModal>
-
-          <!-- live/archive stream text & icon link -->
-          <a
-            v-else-if="
-              (isAgenda && conferenceIsLiveOrMixed(conference)) ||
-              (conferenceIsArchived(conference) && presentation.type != 'zoom')
-            "
-            class="font-semibold no-underline heading-link"
-            :href="getLivePresentationLinkDestination(presentation, track)"
-            :target="getPresentationLinkTarget(presentation)"
-            @click="playPresentation(track, presentation, conference)"
-          >
-            {{ presentation.name
-            }}<transition name="fade">
-              <PlayIcon
-                v-if="presentationIsLiveOrMixed(presentation)"
-                :presentation="presentation"
-                :conference="conference"
-                :class="'justify-center md:justify-start'"
-                icon="playarrow"
-              ></PlayIcon>
-            </transition>
-          </a>
-
-          <!-- text only catchall -->
-          <span v-else class="font-semibold" :class="presentationNameClass"
-            >{{ presentation.name }}</span
-          >
-
-          <!-- session details -->
-          <InfoLink
-            v-if="showInfoLink && presentation.description"
-            :presentation="presentation"
-            :use-icon="useIcon"
-            :link-text="infoLinkText"
-            :new-line="isSmallGroupedTrack"
-            class="ml-2"
-          />
-
-          <!-- favorites -->
-          <favorite
-            v-if="allowFavorites && currentUser.token"
-            class="ml-1"
-            :presentation="presentation"
-            @click="handleFavoriteClick"
-          />
-        </h2>
-      </div>
-    </div>
-
-    <!-- SIMPLE LAYOUT -->
-    <div v-else>
-      <a
-        class="underline cursor-pointer"
-        @click="playPresentation(track, presentation, conference)"
-      >
-        {{ presentation.name }}
-      </a>
-    </div>
-  </div>
-</template>
+<script lang="ts" setup>
+import { toRefs, computed } from "vue";
+import { useAgenda } from "../../../composables/useAgenda";
+import { useConferenceHelpers } from "../../../composables/useConferenceHelpers";
+import { usePresentation } from "../../../composables/usePresentation";
+import {
+  Conference,
+  Presentation,
+  Track,
+  TrackGroup,
+} from "../../../models/conference";
+import InfoLink from "./InfoLink.vue";
+import PlayIcon from "./PlayIcon.vue";
+
+type Props = {
+  conference: Conference;
+  presentation: Presentation;
+  track: Track | TrackGroup;
+  showInfoLink?: boolean;
+  simpleLayout?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  showInfoLink: true,
+  simpleLayout: false,
+});
+
+const { conference, track, presentation } = toRefs(props);
+
+// Methods
+const { conferenceIsLiveOrMixed, conferenceIsArchived } =
+  useConferenceHelpers(conference);
+const { isSmallGroupedTrack } = useAgenda(conference);
+const {
+  getPresentationLinkTarget,
+  getLivePresentationLinkDestination,
+  showPresentationLinkIcon,
+  getPresentationLinkText,
+  presentationIsLiveOrMixed,
+  getArchivePresentationLinkDestination,
+} = usePresentation(conference);
+
+// Computed
+const presentationNameClass = computed(() => {
+  return isSmallGroupedTrack(track.value) ? "text-base" : "text-lg";
+});
+</script>
+
+<template>
+  <div>
+    <div v-if="!simpleLayout">
+      <!-- LIVE AGENDA GO TO WEBCAST PAGE -->
+      <div>
+        <h2 class="flex flex-initial flex-row" :class="presentationNameClass">
+          <!-- zoom text & icon link -->
+          <CommonZoomModal
+            v-if="
+              isAgenda &&
+              conferenceIsLiveOrMixed(conference) &&
+              presentation.type == 'zoom'
+            "
+            :presentation-id="presentation.id"
+            modal-size="full"
+          >
+            <template #modal-link>
+              <span class="font-semibold no-underline heading-link"
+                >{{ presentation.name }}
+                <PlayIcon
+                  :presentation="presentation"
+                  :conference="conference"
+                  :class="'justify-center md:justify-start'"
+                  icon="zoom"
+                ></PlayIcon>
+              </span>
+            </template>
+          </CommonZoomModal>
+
+          <!-- live/archive stream text & icon link -->
+          <a
+            v-else-if="
+              (isAgenda && conferenceIsLiveOrMixed(conference)) ||
+              (conferenceIsArchived(conference) && presentation.type != 'zoom')
+            "
+            class="font-semibold no-underline heading-link"
+            :href="getLivePresentationLinkDestination(presentation, track)"
+            :target="getPresentationLinkTarget(presentation)"
+            @click="playPresentation(track, presentation, conference)"
+          >
+            {{ presentation.name
+            }}<transition name="fade">
+              <PlayIcon
+                v-if="presentationIsLiveOrMixed(presentation)"
+                :presentation="presentation"
+                :conference="conference"
+                :class="'justify-center md:justify-start'"
+                icon="playarrow"
+              ></PlayIcon>
+            </transition>
+          </a>
+
+          <!-- text only catchall -->
+          <span v-else class="font-semibold" :class="presentationNameClass"
+            >{{ presentation.name }}</span
+          >
+
+          <!-- session details -->
+          <InfoLink
+            v-if="showInfoLink && presentation.description"
+            :presentation="presentation"
+            :use-icon="useIcon"
+            :link-text="infoLinkText"
+            :new-line="isSmallGroupedTrack"
+            class="ml-2"
+          />
+
+          <!-- favorites -->
+          <favorite
+            v-if="allowFavorites && currentUser.token"
+            class="ml-1"
+            :presentation="presentation"
+            @click="handleFavoriteClick"
+          />
+        </h2>
+      </div>
+    </div>
+
+    <!-- SIMPLE LAYOUT -->
+    <div v-else>
+      <a
+        class="underline cursor-pointer"
+        @click="playPresentation(track, presentation, conference)"
+      >
+        {{ presentation.name }}
+      </a>
+    </div>
+  </div>
+</template>