@usssa/component-library 1.0.0-alpha.15 → 1.0.0-alpha.151

package/src/components/core/UTypeahead.vue

@@ -0,0 +1,830 @@
+<script setup>
+import { computed, ref, toRaw, watch } from 'vue'
+import UAvatar from './UAvatar.vue'
+import UBtnStd from './UBtnStd.vue'
+import UMenuDropdownAdvancedSearch from './UMenuDropdownAdvancedSearch.vue'
+import UTabBtnStd from './UTabBtnStd.vue'
+import UTooltip from './UTooltip.vue'
+import { categorizeObjects, deepEqual, parseInitials } from '../../utils/data'
+import { useNotify } from '../../composables/useNotify'
+import { useScreenType } from '../../composables/useScreenType'
+
+const emit = defineEmits([
+  'onInvitePerson',
+  'onItemActionClick',
+  'updateCountry',
+  'updateModelVal',
+  'updateTab',
+])
+
+const loading = defineModel('loading')
+const props = defineProps({
+  // Label for button to select a record
+  actionButtonLabel: {
+    type: String,
+  },
+  actionButtonLoading: {
+    type: Boolean,
+  },
+  addedBtnIcon: {
+    type: String,
+  },
+  // Set default tab
+  advancedSearchSelectedTab: {
+    type: String,
+  },
+  algoliaIndex: {
+    type: Object,
+  },
+  alreadyAddedIds: {
+    type: Array,
+  },
+  // Set context for component for special handling
+  // context.action (e.g. addContact)
+  // context.data (e.g. array of existing contacts)
+  context: {
+    type: Array,
+  },
+  disabledButtonColor: {
+    type: String,
+  },
+  exceedLimitCount: {
+    type: Number,
+    default: 50,
+  },
+  fields: {
+    type: Array,
+  },
+  headerLabel: {
+    type: String,
+    default: "I'm looking for",
+  },
+  labelIcon: {
+    type: String,
+  },
+  model: {
+    type: Object,
+  },
+  options: {
+    type: Array,
+  },
+  recentSearches: {
+    type: Array,
+  },
+  recentSearchesLoading: {
+    type: Boolean,
+  },
+  searchMenuRef: {
+    type: Object,
+  },
+  searchText: {
+    type: String,
+  },
+  // Show/hide advanced search
+  showAdvancedSearch: {
+    type: Boolean,
+    default: true,
+  },
+  // Show/hide entity tabs in advanced search
+  showAdvancedSearchTabs: {
+    type: Boolean,
+    default: true,
+  },
+  showCustomMenu: {
+    type: Boolean,
+    default: false,
+  },
+  showDescriptionTooltip: {
+    type: Boolean,
+  },
+  showInviteBtn: {
+    type: Boolean,
+    default: false,
+  },
+  // Show/hide recent searches
+  showRecentSelected: {
+    type: Boolean,
+    default: true,
+  },
+  size: {
+    type: String,
+    default: 'md',
+  },
+  //Advance search title
+  title: {
+    type: String,
+    default: 'Advanced search',
+  },
+  toolTipDisabledButton: {
+    type: String,
+  },
+})
+
+const { notify } = useNotify()
+const $screen = useScreenType()
+
+const advancedSearchApplyFilter = ref(false)
+const advancedSearchFilterDirty = ref(false)
+const advancedSearchFilterModelDefault = ref({})
+const advancedSearchSelectedTab = ref(props.advancedSearchSelectedTab ?? null)
+const exceedLimit = ref(false)
+const searchMenuShowing = ref(false)
+const searchResults = ref(null)
+const selectedItem = ref({})
+const toggle = ref(false)
+
+const isMobile = computed(() => $screen.value.isMobile)
+
+const recentSearches = computed({
+  get() {
+    let arr = props.recentSearches
+    if (props.context) {
+      arr = specialContextHandler(arr)
+    }
+    return arr
+  },
+  set(value) {
+    return value
+  },
+})
+
+const screenSize = computed(() => {
+  if (isMobile.value) {
+    return 'sm'
+  } else {
+    return props.size
+  }
+})
+
+const convertDate = (inputDate) => {
+  const [month, day, year] = inputDate.split('/')
+  return `${year}-${month}-${day}`
+}
+
+const handleTabChange = (val) => {
+  if (advancedSearchSelectedTab.value === val) {
+    advancedSearchSelectedTab.value = null
+  } else {
+    advancedSearchSelectedTab.value = val
+  }
+  Object.assign(
+    props.model,
+    structuredClone(toRaw(advancedSearchFilterModelDefault.value))
+  )
+  emit('updateTab', advancedSearchSelectedTab.value)
+  search()
+}
+
+const onApplyAdvancedSearchFilter = () => {
+  advancedSearchApplyFilter.value = true
+  advancedSearchFilterDirty.value = false
+  search()
+  updateAdvanceSearchToggle()
+}
+
+const onClearAdvancedSearchFilter = () => {
+  Object.assign(
+    props.model,
+    structuredClone(toRaw(advancedSearchFilterModelDefault.value))
+  )
+  advancedSearchApplyFilter.value = false
+  advancedSearchFilterDirty.value = false
+  search()
+}
+
+const onInvitePerson = (item) => {
+  emit('onInvitePerson', item)
+}
+
+const onItemActionClick = (item, isRecentSearchAction) => {
+  selectedItem.value = item
+  return emit(
+    'onItemActionClick',
+    item,
+    isRecentSearchAction,
+    props.searchMenuRef
+  )
+}
+
+const search = async () => {
+  try {
+    if (props.searchText.length < 2) {
+      searchResults.value = null
+      return void 0
+    }
+
+    loading.value = true
+    const configPayload = {}
+    const selectedTab = advancedSearchSelectedTab.value
+    if (selectedTab) {
+      configPayload.facetFilters = [`collection:${selectedTab}`]
+    } else {
+      let advancedSearchTabOptions = props.options.map((option) => {
+        return `collection:${option.id}`
+      })
+      configPayload.facetFilters = [advancedSearchTabOptions]
+    }
+
+    if (advancedSearchApplyFilter.value) {
+      const filters = props.model
+      let algoliaFilter = ''
+
+      const phoneNumber = filters?.selectedCountry?.code + filters?.phoneNumber
+
+      Object.keys(filters).map((key, index) => {
+        let filterValue = filters[key]
+
+        if (key === 'phoneNumber' && filterValue) {
+          filterValue = phoneNumber
+        } else if (key === 'startDate' && filterValue) {
+          filterValue = convertDate(filters.startDate)
+        } else if (key === 'endDate' && filterValue) {
+          filterValue = convertDate(filters.endDate)
+        }
+
+        switch (key) {
+          case 'city':
+            if (selectedTab === 'events' || selectedTab === 'venues') {
+              key = 'city'
+            } else {
+              key = 'address.city'
+            }
+            break
+          case 'state':
+            if (selectedTab === 'events' || selectedTab === 'venues') {
+              key = 'state'
+            } else {
+              key = 'address.state'
+            }
+            break
+          case 'postalCode':
+            if (selectedTab === 'venues') {
+              key = 'postalCode'
+            } else {
+              key = 'address.postalCode'
+            }
+            break
+          case 'selectedCountry':
+            key = 'address.country'
+            break
+          case 'emailAddress':
+            key = 'email'
+            break
+          case 'teamName':
+            key = 'name'
+            break
+          case 'phoneNumber':
+            key = 'mobileNumber'
+            break
+          case 'venueName':
+            key = 'name'
+            break
+          case 'eventName':
+            key = 'name'
+            break
+          case 'startDate':
+            key = 'startsOn'
+            break
+          case 'endDate':
+            key = 'endsOn'
+            break
+          case 'venueAddress':
+            key = 'streetAddress'
+            break
+          default:
+            key = key
+        }
+
+        if (filterValue && filterValue.length) {
+          algoliaFilter.length
+            ? (algoliaFilter += ` AND ${key}:${filterValue}`)
+            : (algoliaFilter += `${key}:"${filterValue}"`)
+        }
+      })
+
+      if (algoliaFilter.length) {
+        configPayload.filters = algoliaFilter
+      }
+    }
+
+    const res = await props.algoliaIndex.search(props.searchText, configPayload)
+
+    if (res.hits.length >= props.exceedLimitCount) {
+      exceedLimit.value = true
+    } else {
+      exceedLimit.value = false
+    }
+
+    let results = res.hits
+
+    if (props.context) {
+      results = specialContextHandler(results)
+    }
+
+    results = categorizeObjects(results, 'collection')
+
+    if (Object.keys(results).length) {
+      searchResults.value = results
+    } else {
+      searchResults.value = null
+    }
+    return void 0
+  } catch (error) {
+    notify({
+      type: 'accent',
+      label: 'Search broke',
+      position: 'top',
+    })
+  } finally {
+    loading.value = false
+  }
+}
+
+const specialContextHandler = (results) => {
+  // Mark result records that are already exits
+  results = results.map((result) => {
+    const isAlreadyAddedSearch = props.context.filter(
+      (data) =>
+        data.id === result.id ||
+        data.id === result.docId ||
+        result.id === data.docId
+    )
+
+    isAlreadyAddedSearch.every((data) => {
+      if (
+        data.id === result.id ||
+        data.id === result.docId ||
+        result.id === data.docId
+      ) {
+        if (data?.tooltip) {
+          result.disableTooltip = data?.tooltip
+        }
+        if (data?.label) {
+          result.label = data?.label
+        }
+        result.color = data?.color ?? props.disabledButtonColor
+      }
+    })
+
+    if (isAlreadyAddedSearch && isAlreadyAddedSearch.length > 0) {
+      return {
+        ...result,
+        disable: true,
+        btnProps: {
+          ...result.btnProps,
+          color: result.btnProps?.color ?? result?.color,
+        },
+      }
+    }
+    if (props.alreadyAddedIds?.length) {
+      if (props.alreadyAddedIds.includes(result.docId || result.id)) {
+        return {
+          ...result,
+          disable: true,
+          label: 'Added',
+          icon: props.addedBtnIcon,
+          btnProps: {
+            ...result.btnProps,
+            color: result.btnProps?.color ?? 'positive',
+            outline: false,
+          },
+        }
+      }
+    }
+    return {
+      ...result,
+    }
+  })
+
+  return results
+}
+
+const transformCategory = (category) => {
+  switch (category) {
+    case 'users':
+      return 'People'
+    case 'teams':
+      return 'Teams'
+    case 'events':
+      return 'Events'
+    case 'venues':
+      return 'Venues'
+    default:
+      return 'Other'
+  }
+}
+
+const updateAdvanceSearchToggle = (val) => {
+  toggle.value = !toggle.value
+}
+
+const updateCountry = (val, label) => {
+  emit('updateCountry', val, label)
+}
+
+const updateModelVal = (event, label) => {
+  emit('updateModelVal', event, label)
+}
+
+//Assign default model value on tab change
+watch(
+  () => props.model,
+  (value) => {
+    advancedSearchFilterModelDefault.value = Object.assign(
+      {},
+      structuredClone(toRaw(value))
+    )
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.model,
+  (newValue) => {
+    if (deepEqual(newValue, advancedSearchFilterModelDefault.value)) {
+      advancedSearchFilterDirty.value = false
+    } else {
+      advancedSearchFilterDirty.value = true
+    }
+  },
+  { deep: true }
+)
+
+watch(
+  () => props.searchText,
+  (value) => {
+    if (value.length >= 2) {
+      if (!searchMenuShowing.value) {
+        props.searchMenuRef?.show()
+        search()
+      }
+    } else {
+      searchResults.value = null
+    }
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <q-list
+    :class="[
+      `u-typeahead-menu size-${screenSize}`,
+      { 'q-px-xs q-pt-ba': !isMobile },
+      { 'q-pt-xs': isMobile },
+    ]"
+    role="menuitem"
+  >
+    <div
+      v-if="showAdvancedSearchTabs"
+      :class="[`q-pb-xs`, { 'q-px-xs': !isMobile, 'q-pl-ba': isMobile }]"
+    >
+      <div class="text-overline-xs">{{ headerLabel }}</div>
+
+      <!-- Tab options -->
+
+      <div
+        :class="`tabs-option ${screenSize === 'sm' ? 'q-mt-sm' : 'q-mt-xs'}`"
+      >
+        <UTabBtnStd
+          :buttonTabsOptions="options"
+          :modelValue="advancedSearchSelectedTab"
+          size="sm"
+          :standard="false"
+          @onTabClick="handleTabChange"
+        />
+      </div>
+    </div>
+    <div
+      :class="[
+        'custom-menuDropdown bg-neutral-2 q-ma-xs',
+        { 'q-mx-ba': isMobile },
+      ]"
+    >
+      <!-- Menu dropdown -->
+      <UMenuDropdownAdvancedSearch
+        v-if="showAdvancedSearch"
+        :disbaleApplyFilter="!advancedSearchFilterDirty"
+        :fields="fields"
+        :labelIcon="labelIcon"
+        :model="model"
+        :showCustomMenu="showCustomMenu"
+        :size="screenSize"
+        :title="title"
+        :toggle="toggle"
+        @onApplyAdvancedSearchFilter="onApplyAdvancedSearchFilter"
+        @onClearAdvancedSearchFilter="onClearAdvancedSearchFilter"
+        @updateAdvanceSearchToggle="(val) => updateAdvanceSearchToggle(val)"
+        @updateCountry="(event, label) => updateCountry(event, label)"
+        @updateModelVal="(event, label) => updateModelVal(event, label)"
+      >
+      </UMenuDropdownAdvancedSearch>
+    </div>
+
+    <!-- Search Result list -->
+
+    <q-list
+      v-if="searchResults && !exceedLimit && searchText.length"
+      :class="[`search-list q-mt-xs`, { 'q-px-xxs q-pt-xs': isMobile }]"
+    >
+      <span class="text-overline-xs q-px-sm"> Search results </span>
+      <template v-for="category of Object.keys(searchResults)" :key="category">
+        <q-item-label caption>
+          <span class="text-caption-sm q-py-xxs q-px-sm">
+            {{ transformCategory(category) }}
+          </span>
+        </q-item-label>
+        <q-item
+          v-for="item of searchResults[category]"
+          class="list-item q-py-xs q-px-sm"
+          clickable
+          :key="item.id"
+        >
+          <q-item-section side>
+            <UAvatar
+              v-if="
+                !item.profilePictureUrl ||
+                item.profilePictureUrl?.nullValue === 0
+              "
+              :aria-label="item.name"
+              :name="parseInitials(item.name)"
+              size="md"
+            />
+            <UAvatar
+              v-else
+              :aria-label="item.name"
+              :image="item.profilePictureUrl"
+              :name="item.name"
+              :round="true"
+              :showIndicator="false"
+              size="md"
+            />
+          </q-item-section>
+
+          <q-item-section>
+            <q-item-label class="text-caption-md wrapped-text">
+              {{ item?.name }}
+            </q-item-label>
+            <q-item-label class="text-body-xs text-neutral-9 wrapped-text">
+              {{ item?.description }}
+            </q-item-label>
+
+            <UTooltip
+              v-if="showDescriptionTooltip"
+              class="description-tooltip"
+              anchor="top middle"
+              :description="item.description"
+              self="bottom middle"
+            />
+          </q-item-section>
+
+          <q-item-section side>
+            <UBtnStd
+              v-bind="item.btnProps"
+              :color="item.btnProps?.color ?? 'primary'"
+              :disable="
+                item.disable ||
+                (selectedItem?.id !== item.id && actionButtonLoading)
+              "
+              :label="item.label ? item.label : actionButtonLabel"
+              :leftIcon="item.icon"
+              :loading="
+                selectedItem?.id === item.id ? actionButtonLoading : false
+              "
+              :outline="item.btnProps?.outline ?? true"
+              size="sm"
+              @click.stop="onItemActionClick(item)"
+            >
+              <template
+                v-if="
+                  (item.disableTooltip && item.disable) ||
+                  (item.disable && toolTipDisabledButton)
+                "
+                #tooltip
+              >
+                <UTooltip
+                  anchor="top middle"
+                  :description="
+                    item.disableTooltip
+                      ? item.disableTooltip
+                      : toolTipDisabledButton
+                  "
+                  :offset="[0, 4]"
+                  self="bottom middle"
+                />
+              </template>
+            </UBtnStd>
+          </q-item-section>
+        </q-item>
+      </template>
+    </q-list>
+
+    <!-- No data section -->
+
+    <div
+      v-if="searchText.length && !searchResults && !exceedLimit && !loading"
+      :class="[{ 'q-px-xs': !isMobile }, { 'q-px-xxs': isMobile }]"
+    >
+      <div class="items-center column q-py-ba q-mt-xs">
+        <img
+          alt="No result found"
+          aria-label="No result found"
+          src="../../assets/no-result.svg"
+        />
+        <span class="text-caption-lg q-mt-xs">No results found</span>
+        <span class="text-body-sm text-neutral-9 q-mt-xxs q-mb-ba">
+          Invite user to join USSSA.
+        </span>
+      </div>
+
+      <div
+        v-if="showInviteBtn"
+        :class="[
+          'row items-center full-width',
+          { 'q-px-ba q-mt-xs': isMobile },
+        ]"
+      >
+        <span
+          :class="`searchText-${screenSize} text-caption-md q-mr-xs col wrapped-text`"
+        >
+          {{ searchText }}
+        </span>
+        <UBtnStd
+          color="primary"
+          label="Invite"
+          outline
+          size="sm"
+          @click.stop="onInvitePerson(item, false)"
+        />
+      </div>
+    </div>
+
+    <!-- Exceed limit section -->
+
+    <div v-if="searchText.length && exceedLimit && searchResults">
+      <div class="column q-my-ba items-center">
+        <img
+          alt="No result found"
+          aria-label="No result found"
+          src="../../assets/no-result.svg"
+        />
+        <span class="text-caption-lg q-mt-xs">Results exceeds limit.</span>
+        <span class="text-body-sm text-neutral-9 q-mt-xxs text-center">
+          Please select advanced search to provide more details for your search.
+        </span>
+      </div>
+    </div>
+
+    <!-- Recently selected list -->
+
+    <q-list :class="[`search-list q-mt-xs`, { 'q-px-xxs q-pt-xs': isMobile }]">
+      <div
+        v-if="showRecentSelected && recentSearchesLoading"
+        :class="[`row justify-between items-center`, { 'q-px-sm': isMobile }]"
+      >
+        <span class="text-overline-xs q-px-sm"> Recently Selected </span>
+
+        <q-spinner v-if="recentSearchesLoading" color="grey-14" size="1rem" />
+      </div>
+      <div
+        v-if="
+          showRecentSelected &&
+          recentSearches &&
+          recentSearches.length &&
+          !recentSearchesLoading
+        "
+      >
+        <span class="text-overline-xs q-px-sm"> Recently Selected </span>
+
+        <template v-for="item in recentSearches" :key="item.id">
+          <q-item class="list-item q-py-xs q-px-sm" clickable>
+            <q-item-section side>
+              <UAvatar
+                v-if="
+                  !item.profilePictureUrl ||
+                  item.profilePictureUrl?.nullValue === 0
+                "
+                :aria-label="item.name"
+                :name="parseInitials(item.name)"
+                size="md"
+              />
+              <UAvatar
+                v-else
+                :aria-label="item.name"
+                :image="item.profilePictureUrl"
+                :round="true"
+                :showIndicator="false"
+                size="md"
+              />
+            </q-item-section>
+
+            <q-item-section>
+              <q-item-label class="text-caption-md wrapped-text">
+                {{ item?.name }}
+              </q-item-label>
+              <q-item-label
+                class="text-body-xs text-neutral-9 label wrapped-text"
+              >
+                {{ item?.description }}
+              </q-item-label>
+              <UTooltip
+                v-if="showDescriptionTooltip"
+                class="description-tooltip"
+                anchor="top middle"
+                :description="item.description"
+                self="bottom middle"
+              />
+            </q-item-section>
+
+            <q-item-section side>
+              <UBtnStd
+                v-bind="item.btnProps"
+                :color="item.btnProps?.color ?? 'primary'"
+                :disable="
+                  item.disable ||
+                  (selectedItem?.id !== item.id && actionButtonLoading)
+                "
+                :label="item.label ? item.label : actionButtonLabel"
+                :leftIcon="item.icon"
+                :loading="
+                  selectedItem?.id === item.id ? actionButtonLoading : false
+                "
+                :outline="item.btnProps?.outline ?? true"
+                size="sm"
+                @click.stop="onItemActionClick(item, true)"
+              >
+                <template
+                  v-if="
+                    (item.disableTooltip && item.disable) ||
+                    (item.disable && toolTipDisabledButton)
+                  "
+                  #tooltip
+                >
+                  <UTooltip
+                    anchor="top middle"
+                    :description="
+                      item.disableTooltip
+                        ? item.disableTooltip
+                        : toolTipDisabledButton
+                    "
+                    :offset="[0, 4]"
+                    self="bottom middle"
+                  />
+                </template>
+              </UBtnStd>
+            </q-item-section>
+          </q-item>
+        </template>
+      </div>
+    </q-list>
+  </q-list>
+</template>
+
+<style lang="sass">
+.u-typeahead-menu
+  .u-tabs-outer .u-tab-button
+    gap: 0px
+  .u-tabs-outer .u-tab-button .truncated-label
+    overflow-wrap: unset
+  .u-tabs-outer .u-tab-sm
+    margin: 0 $xxs
+    padding: 0 $ba
+  .u-tabs-outer .u-tab-sm:first-child
+    margin-left: 0px
+  .u-tabs-outer .u-tab-sm:last-child
+    margin-right: 0px
+  .u-tabs-outer .q-tab__content .q-icon
+    font-size: 0.75rem
+  .tabs-option
+    display: flex
+    overflow-y: auto
+    scrollbar-width: none
+  .custom-menuDropdown
+    border-radius: $xs
+  flex-direction: column
+  align-items: flex-start
+  border-radius: $xs
+  background: $neutral-1
+  .search-list
+    display: flex
+    flex-direction: column
+    gap: $xxs
+  .list-item
+    border-radius: $xs
+    align-items: center
+    display: flex
+    cursor: default !important
+    gap: $xs
+    .q-item
+      margin-bottom: 0px !important
+    .q-item__section--avatar
+      min-width: 0px
+    .q-item__section--side
+      padding: 0px
+    .wrapped-text
+      white-space: normal
+      overflow: hidden
+      word-wrap: break-word
+.description-tooltip
+  transform: translateX(20px)
+</style>