@usssa/component-library 1.0.0-alpha.27 → 1.0.0-alpha.271

package/src/components/core/UEventCard.vue

@@ -0,0 +1,463 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+
+import defaultImage from '../../assets/no-result.svg'
+import { useScreenType } from '../../composables/useScreenType'
+import { trimmedLabel } from '../../utils/data'
+import UBtnStd from './UBtnStd.vue'
+import UChip from './UChip.vue'
+import UTooltip from './UTooltip.vue'
+
+const emit = defineEmits(['onRegister', 'onView'])
+const props = defineProps({
+  dataTestId: {
+    type: String,
+    default: 'eventCard',
+  },
+  eventAgeGroup: {
+    type: String,
+  },
+  eventCategory: {
+    type: String,
+  },
+  eventDate: {
+    type: String,
+  },
+  eventHost: {
+    type: String,
+  },
+  eventLocation: {
+    type: String,
+  },
+  eventLogo: {
+    type: String,
+  },
+  eventName: {
+    type: String,
+  },
+  eventPlayersMax: {
+    type: String,
+    default: '0',
+  },
+  eventPrice: {
+    type: String,
+  },
+  eventRegisterText: {
+    type: String,
+  },
+  eventViewText: {
+    type: String,
+  },
+  isRegisterEventActionDisabled: {
+    type: Boolean,
+    default: false,
+  },
+  isViewEventActionDisabled: {
+    type: Boolean,
+    default: false,
+  },
+  registerEventTooltip: {
+    type: String,
+    default: '',
+  },
+})
+
+const VERTICAL_TEXT_LIMIT = 13
+
+const $screen = useScreenType()
+
+const eventChip = ref(true) // this is required to show chip
+const isCategoryOverflowing = ref(false)
+const isNameOverflowing = ref(false)
+const textEName = ref(null)
+
+const eventAgeGroup = computed(() => trimmedLabel(props.eventAgeGroup, 30))
+const eventDate = computed(() => trimmedLabel(props.eventDate, 30))
+const eventHost = computed(() => trimmedLabel(props.eventHost, 50))
+const eventLocation = computed(() => trimmedLabel(props.eventLocation, 50))
+const eventPlayersMax = computed(() =>
+  trimmedLabel(props.eventPlayersMax, 9, '0')
+)
+const eventPrice = computed(() => trimmedLabel(props.eventPrice, 30))
+const eventRegisterText = computed(() =>
+  trimmedLabel(props.eventRegisterText, 15, 'Register Event')
+)
+const eventViewText = computed(() =>
+  trimmedLabel(props.eventViewText, 15, 'View Event')
+)
+
+const isMobile = computed(() => $screen.value.isMobile)
+
+const checkOverflow = () => {
+  if (props.eventCategory.length > VERTICAL_TEXT_LIMIT) {
+    isCategoryOverflowing.value = true
+  }
+
+  if (textEName.value) {
+    isNameOverflowing.value =
+      textEName.value.scrollWidth > textEName.value.clientWidth ||
+      textEName.value.scrollHeight > textEName.value.clientHeight
+  }
+}
+
+const registerClick = () => {
+  emit('onRegister')
+}
+
+const viewClick = () => {
+  emit('onView')
+}
+
+onMounted(() => {
+  const verticalTextEle = document.getElementsByClassName('event-vertical-text')
+  Array.from(verticalTextEle).forEach((el) => {
+    const originalText = el.innerText.trim()
+    if (originalText.length > VERTICAL_TEXT_LIMIT) {
+      el.innerText = originalText.slice(0, VERTICAL_TEXT_LIMIT) + '...'
+    }
+  })
+})
+</script>
+
+<template>
+  <!-- Event Card for Desktop and Tab devices -->
+
+  <q-card
+    v-if="!isMobile"
+    class="flex event-card no-wrap"
+    :aria-label="`${props.eventName} ${props.eventDate}`"
+    :data-testid="dataTestId"
+    tabindex="0"
+  >
+    <!-- Column 1: Rotated Text -->
+    <div
+      class="flex items-center justify-center q-py-sm q-px-xs rotated-text event-vertical-text text-dark text-italic text-display-xxxs text-center cornero-font-family ellipsis"
+      data-testid="eventCategory"
+      @mouseenter="checkOverflow"
+    >
+      {{ props.eventCategory }}
+      <UTooltip
+        v-if="isCategoryOverflowing"
+        :description="props.eventCategory"
+      />
+    </div>
+    <!-- Right Column: Nested 3-column layout -->
+    <div
+      class="flex justify-between items-start q-pt-ms q-pr-ms q-pb-ms event-details no-wrap"
+    >
+      <!-- Column 2: Image -->
+      <div class="flex items-center justify-center">
+        <!-- Logo -->
+        <q-avatar class="event-logo" size="6.75rem">
+          <q-img
+            alt="event-card-logo"
+            data-testid="eventLogo"
+            :error-src="defaultImage"
+            :src="props.eventLogo || defaultImage"
+          />
+        </q-avatar>
+      </div>
+
+      <!-- Column 3: Grid Text -->
+      <div class="flex column justify-center event-text-col-wrapper">
+        <div class="event-item text-caption-lg text-description">
+          <span v-if="props.eventDate" class="q-mr-xxs">
+            {{ eventDate.text }}
+            <UTooltip
+              v-if="eventDate.isTrimmed"
+              :description="props.eventDate"
+            />
+          </span>
+          |
+          <span v-if="props.eventPrice" class="q-px-xxs">
+            {{ eventPrice.text }}
+            <UTooltip
+              v-if="eventPrice.isTrimmed"
+              :description="props.eventPrice"
+            />
+          </span>
+          |
+          <UChip
+            v-model="eventChip"
+            class="event-team-users-count"
+            iconClass="fa-kit-duotone fa-users icon-secondary-opacity"
+            :chipLabel="eventPlayersMax.text"
+            dense
+            :removable="false"
+            type="positive"
+          />
+        </div>
+
+        <div
+          v-if="props.eventName"
+          class="text-dark text-heading-lg event-name ellipsis q-pt-xs q-pb-ba"
+          data-testid="eventName"
+          ref="textEName"
+          @mouseenter="checkOverflow"
+        >
+          {{ props.eventName }}
+          <UTooltip v-if="isNameOverflowing" :description="props.eventName" />
+        </div>
+        <div class="event-item text-body-md text-description">
+          <span v-if="props.eventAgeGroup" class="q-mr-xxs">
+            {{ eventAgeGroup.text }}
+            <UTooltip
+              v-if="eventAgeGroup.isTrimmed"
+              :description="props.eventAgeGroup"
+            />
+          </span>
+          <span v-if="props.eventAgeGroup && props.eventLocation">|</span>
+          <span v-if="props.eventLocation" class="q-px-xxs">
+            {{ eventLocation.text }}
+            <UTooltip
+              v-if="eventLocation.isTrimmed"
+              :description="props.eventLocation"
+            />
+          </span>
+          <span
+            v-if="
+              (props.eventAgeGroup || props.eventLocation) && props.eventHost
+            "
+          >
+            |
+          </span>
+          <span v-if="props.eventHost" class="q-ml-xxs">
+            {{ eventHost.text }}
+            <UTooltip
+              v-if="eventHost.isTrimmed"
+              :description="props.eventHost"
+            />
+          </span>
+        </div>
+      </div>
+
+      <!-- Column 4: Buttons -->
+      <div
+        class="flex column justify-center items-end event-action no-wrap shrink"
+      >
+        <u-btn-std
+          class="border-radius-sm full-width text-no-wrap ellipsis"
+          :aria-label="props.eventRegisterText || 'Register Event'"
+          color="primary"
+          data-testid="eventRegisterBtn"
+          :disable="isRegisterEventActionDisabled"
+          size="md"
+          @click="registerClick"
+        >
+          {{ eventRegisterText.text }}
+          <UTooltip
+            v-if="eventRegisterText.isTrimmed"
+            :description="props.eventRegisterText"
+          />
+        </u-btn-std>
+        <u-btn-std
+          class="border-radius-sm full-width text-no-wrap ellipsis"
+          :aria-label="props.eventViewText || 'View Event'"
+          color="primary"
+          data-testid="eventViewBtn"
+          :disable="isViewEventActionDisabled"
+          flat
+          size="md"
+          @click="viewClick"
+        >
+          {{ eventViewText.text }}
+          <UTooltip
+            v-if="eventViewText.isTrimmed"
+            :description="props.eventViewText"
+          />
+        </u-btn-std>
+      </div>
+    </div>
+  </q-card>
+
+  <!-- Event Card for Mobile devices -->
+  <q-card
+    v-if="isMobile"
+    class="event-card event-row-mobile text-center q-pa-ba"
+    :aria-label="props.eventName + props.eventDate || 'Event Card'"
+    :data-testid="dataTestId"
+  >
+    <!-- Left Ribbon -->
+    <div class="event-item-mobile">
+      <div
+        class="text-dark text-display-xxxs text-italic cornero-font-family text-no-wrap ellipsis"
+        data-testid="eventCategory"
+        @mouseenter="checkOverflow"
+      >
+        {{ props.eventCategory }}
+        <UTooltip
+          v-if="isCategoryOverflowing"
+          :description="props.eventCategory"
+        />
+      </div>
+    </div>
+
+    <div class="event-item-mobile event-logo-mobile q-mt-ba q-pa-ba">
+      <!-- Logo -->
+      <q-avatar class="event-logo" size="6.75rem">
+        <q-img
+          alt="event-card-logo"
+          data-testid="eventLogo"
+          :error-src="defaultImage"
+          :src="props.eventLogo || defaultImage"
+        />
+      </q-avatar>
+    </div>
+
+    <!-- Event Info -->
+    <div
+      class="event-item-mobile event-name-mobile text-heading-sm text-dark flex justify-center q-mt-ba ellipsis-3-lines"
+      data-testid="eventName"
+      ref="textEName"
+      @mouseenter="checkOverflow"
+    >
+      {{ props.eventName }}
+      <UTooltip v-if="isNameOverflowing" :description="props.eventName" />
+    </div>
+
+    <div class="event-item-mobile text-caption-md text-description q-mt-xs">
+      <span v-if="props.eventDate" class="q-px-xxs">
+        {{ eventDate.text }}
+        <UTooltip v-if="eventDate.isTrimmed" :description="props.eventDate" />
+      </span>
+      |
+      <span v-if="props.eventPrice" class="q-px-xxs">
+        {{ eventPrice.text }}
+        <UTooltip v-if="eventPrice.isTrimmed" :description="props.eventPrice" />
+      </span>
+      |
+      <UChip
+        v-model="eventChip"
+        class="event-team-users-count"
+        iconClass="fa-kit-duotone fa-users icon-secondary-opacity"
+        :chipLabel="eventPlayersMax.text"
+        dense
+        :removable="false"
+        type="positive"
+      />
+    </div>
+
+    <div class="event-item-mobile text-body-md text-description q-mt-ba">
+      <span v-if="props.eventAgeGroup" class="q-mx-xxs">
+        {{ eventAgeGroup.text }}
+        <UTooltip
+          v-if="eventAgeGroup.isTrimmed"
+          :description="props.eventAgeGroup"
+        />
+      </span>
+      <span v-if="props.eventAgeGroup && props.eventLocation">|</span>
+      <span v-if="props.eventLocation" class="q-px-xxs">
+        {{ eventLocation.text }}
+        <UTooltip
+          v-if="eventLocation.isTrimmed"
+          :description="props.eventLocation"
+        />
+      </span>
+      <span
+        v-if="(props.eventAgeGroup || props.eventLocation) && props.eventHost"
+        >|</span
+      >
+      <span v-if="props.eventHost" class="q-ml-xxs">
+        {{ eventHost.text }}
+        <UTooltip v-if="eventHost.isTrimmed" :description="props.eventHost" />
+      </span>
+    </div>
+
+    <!-- Right Actions -->
+    <div class="row event-action-mobile q-mt-ba">
+      <q-card-actions
+        class="full-width-actions justify-center mobile-btn-actions action-buttons"
+      >
+        <u-btn-std
+          class="border-radius-sm text-no-wrap"
+          :aria-label="props.eventViewText || 'View Event'"
+          color="primary"
+          data-testid="eventViewBtn"
+          :disable="isViewEventActionDisabled"
+          flat
+          :label="eventViewText.text"
+          size="md"
+          @click="viewClick"
+        />
+        <u-btn-std
+          class="border-radius-sm text-no-wrap"
+          :aria-label="props.eventRegisterText || 'Register Event'"
+          color="primary"
+          data-testid="eventRegisterBtn"
+          :disable="isRegisterEventActionDisabled"
+          :label="eventRegisterText.text"
+          size="md"
+          @click="registerClick"
+        />
+      </q-card-actions>
+    </div>
+  </q-card>
+</template>
+
+<style lang="sass">
+.event-card
+  border: 0.0625rem solid $neutral-4
+  border-radius: $xs
+  box-shadow: none !important
+  overflow: hidden
+  justify-content: space-between
+  box-sizing: border-box
+
+.rotated-text
+  writing-mode: vertical-rl
+  transform: rotate(180deg)
+  text-orientation: mixed
+  max-width: 100%
+
+.event-details
+  flex-direction: row !important
+  align-items: stretch !important
+  flex: 1 !important
+  gap: $ms
+  min-width: 0
+
+.event-logo
+  border-radius: 0
+
+.event-action
+  gap: $ba
+  flex-shrink: 0
+
+.full-width-actions
+  width: 100%
+  flex-wrap: nowrap
+
+.event-row-mobile
+  gap: $ba
+
+.event-action, .event-action-mobile
+  .action-buttons
+    padding: 0
+    gap: $xs
+  .q-btn
+    text-transform: none
+    padding: $xs $ba $xs $ba !important
+
+.event-logo-mobile
+  background-color: $neutral-2
+  border-radius: $xxs !important
+
+.event-card
+ .q-chip
+  margin-left: $xxs !important
+ .q-chip__content
+   gap: $xxs
+   padding: $xxs
+
+.event-text-col-wrapper
+  flex: 1
+  min-width: 0
+  overflow: hidden
+
+.event-name
+  max-width: 100%
+
+.event-team-users-count
+  .iconLeft
+    padding: 0 $xxs 0 0 !important
+</style>