@usssa/component-library 1.0.0-alpha.7 → 1.0.0-alpha.71

package/dist/component-library/components/core/UMenuSearch.vue

@@ -0,0 +1,682 @@
+<script setup>
+import { computed, ref, toRaw, watch } from 'vue'
+import { Notify, SessionStorage } from 'quasar'
+import UAvatar from './UAvatar.vue'
+import UBtnStd from './UBtnStd.vue'
+import UInputTypeaheadAdvanceSearch from './UInputTypeaheadAdvanceSearch.vue'
+import UMenuDropdownAdvancedSearch from './UMenuDropdownAdvancedSearch.vue'
+import UTabBtnStd from './UTabBtnStd.vue'
+import UTooltip from './UTooltip.vue'
+import { parseInitials, categorizeObjects, deepEqual } from '../../utils/data'
+
+const props = defineProps({
+  algoliaConfig: {
+    type: Object,
+  },
+  // Label for button to select a record
+  actionButtonLabel: {
+    type: String,
+  },
+  // Set default tab
+  advancedSearchSelectedTab: {
+    type: String,
+  },
+  // Set context for component for special handling
+  // context.action (e.g. addContact)
+  // context.data (e.g. array of existing contacts)
+  context: {
+    type: Object,
+  },
+  fields: {
+    type: Array,
+  },
+  headerLabel: {
+    type: String,
+    default: 'I\'m looking for',
+  },
+  labelIcon: {
+    type: String,
+    default: 'fa-kit-duotone fa-filter-search',
+  },
+  //Number of maximum search result to show
+  maxSearchResults: {
+    type: Number,
+    default: 5,
+  },
+  menuClass: {
+    type: String,
+  },
+  model: {
+    type: Object,
+  },
+  options: {
+    type: Array,
+  },
+  showCustomMenu: {
+    type: Boolean,
+    default: false,
+  },
+  searchText: {
+    type: String,
+  },
+  size: {
+    type: String,
+    default: 'md',
+  },
+  // Show/hide advanced search
+  showAdvancedSearch: {
+    type: Boolean,
+    default: true,
+  },
+  // Show/hide entity tabs in advanced search
+  showAdvancedSearchTabs: {
+    type: Boolean,
+    default: true,
+  },
+  // Show/hide recent searches
+  showRecentSelected: {
+    type: Boolean,
+    default: true,
+  },
+  showInviteBtn: {
+    type: Boolean,
+    default: false,
+  },
+  //Advance search title
+  title: {
+    type: String,
+    default: 'Advanced search',
+  },
+})
+
+const emit = defineEmits([
+  'onInvitePerson',
+  'onItemActionClick',
+  'updateTab',
+  'updateModelVal',
+  'updateCountry',
+])
+
+const loading = defineModel('loading')
+
+// const client = algoliasearch(props.algoliaConfig.APP_ID, props.algoliaConfig.SEARCH_KEY)
+// const index = client.initIndex(props.algoliaConfig.INDEX)
+
+const advancedSearchPendingFilterModel = structuredClone(toRaw(props.model))
+const advancedSearchSelectedTab = ref(props.advancedSearchSelectedTab ?? null)
+
+const advancedSearchFilterDirty = ref(false)
+const toggle = ref(false)
+const advancedSearchApplyFilter = ref(false)
+const advancedSearchFilterModelDefault = ref({})
+const exceedLimit = ref(false)
+const searchMenuRef = ref(null)
+const searchResults = ref(null)
+const searchMenuShowing = ref(false)
+
+const recentSearches = computed({
+  get() {
+    let arr = SessionStorage.getItem('recentSearches') ?? []
+    if (props.context && props.context.action) {
+      arr = specialContextHandler(arr)
+    }
+    return arr.sort((a, b) => b.added_to_recent - a.added_to_recent)
+  },
+  set(value) {
+    return value
+  },
+})
+
+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 onMenuShow = () => {
+  searchMenuShowing.value = true
+}
+
+const onMenuHide = () => {
+  searchMenuShowing.value = false
+}
+
+const updateModelVal = (event, label) => {
+  emit('updateModelVal', event, label)
+}
+
+const updateCountry = (val, label) => {
+  emit('updateCountry', val, label)
+}
+
+const onInvitePerson = (item) => {
+  emit('onInvitePerson', item)
+}
+
+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 recentSearchHandler = (item) => {
+  let index = recentSearches.value.findIndex((s) => s.id === item.id)
+  if (index >= 0) {
+    recentSearches.value.splice(index, 1)
+  }
+
+  if (recentSearches.value.length === props.maxSearchResults) {
+    recentSearches.value.pop()
+  }
+
+  recentSearches.value.push({
+    ...item,
+    added_to_recent: new Date().valueOf(),
+  })
+
+  recentSearches.value.sort((a, b) => b.added_to_recent - a.added_to_recent)
+
+  SessionStorage.set('recentSearches', recentSearches.value)
+}
+
+const onItemActionClick = (item) => {
+  recentSearchHandler(item)
+  return emit('onItemActionClick', item, searchMenuRef.value)
+}
+
+const specialContextHandler = (results) => {
+  switch (props.context.action) {
+    case 'addContact':
+      // Mark result records that are already contacts
+      results = results.map((result) => {
+        const isAlreadyContactSearch = props.context.data.filter(
+          (contact) => contact.userId === result.id
+        )
+        if (isAlreadyContactSearch && isAlreadyContactSearch.length > 0) {
+          return {
+            ...result,
+            disable: true,
+            tooltip: 'Person is already a contact',
+          }
+        }
+        return result
+      })
+      return results
+  }
+}
+
+const search = async () => {
+  try {
+    if (props.searchText.length < 2) {
+      searchResults.value = null
+      return void 0
+    }
+
+    loading.value = true
+    const configPayload = {}
+    if (advancedSearchSelectedTab.value) {
+      configPayload.facetFilters = [
+        `collection:${advancedSearchSelectedTab.value}`,
+      ]
+    } 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
+        }
+
+        switch (key) {
+          case 'city':
+            key = 'address.city'
+            break
+          case 'selectedCountry':
+            key = 'address.country'
+            break
+          case 'postalCode':
+            key = 'address.postalCode'
+            break
+          case 'state':
+            key = 'address.state'
+            break
+          case 'emailAddress':
+            key = 'email'
+            break
+          case 'teamName':
+            key = 'name'
+            break
+          case 'phoneNumber':
+            key = 'mobileNumber'
+            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 index.search(props.searchText, configPayload)
+
+    if (res.hits.length >= 50) {
+      exceedLimit.value = true
+    } else {
+      exceedLimit.value = false
+    }
+
+    let results = res.hits
+
+    if (props.context && data.context.action) {
+      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.create({
+      type: 'error',
+      message: 'Search broke',
+    })
+  } finally {
+    loading.value = false
+  }
+}
+
+const updateAdvanceSearchToggle = (val) => {
+  toggle.value = !toggle.value
+}
+
+const onClearAdvancedSearchFilter = () => {
+  Object.assign(
+    props.model,
+    structuredClone(toRaw(advancedSearchFilterModelDefault.value))
+  )
+  advancedSearchApplyFilter.value = false
+  advancedSearchFilterDirty.value = false
+  search()
+}
+
+const onApplyAdvancedSearchFilter = () => {
+  advancedSearchApplyFilter.value = true
+  advancedSearchFilterDirty.value = false
+
+  search()
+  updateAdvanceSearchToggle()
+
+}
+
+//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) searchMenuRef.value.show()
+      search()
+    } else {
+      searchResults.value = null
+    }
+  }
+)
+</script>
+
+<template>
+  <q-menu
+    v-bind="$attrs"
+    v-model="searchMenuShowing"
+    aria-label="search menu"
+    :class="`u-search-option-menu ${menuClass}`"
+    fit
+    no-focus
+    :offset="[0, 4]"
+    ref="searchMenuRef"
+    role="menu"
+    tabindex="1"
+    @show="onMenuShow"
+    @hide="onMenuHide"
+  >
+    <q-list
+      :class="`u-typeahead-menu q-px-ba q-pt-ba size-${size}`"
+      role="menuitem"
+    >
+      <div v-if="showAdvancedSearchTabs" class="q-pb-xs">
+        <span class="text-overline-xs">{{ headerLabel }}</span>
+
+        <!-- Tab options -->
+
+        <div class="tabs-option">
+          <UTabBtnStd
+            :modelValue="advancedSearchSelectedTab"
+            :buttonTabsOptions="options"
+            size="sm"
+            :standard="false"
+            @on-tab-click="handleTabChange"
+          />
+        </div>
+      </div>
+      <div class="q-mt-xs">
+        <!-- Menu dropdown -->
+        <UMenuDropdownAdvancedSearch
+          v-if="showAdvancedSearch"
+          :disbaleApplyFilter="!advancedSearchFilterDirty"
+          :fields="fields"
+          :labelIcon="labelIcon"
+          :model="model"
+          :size="size"
+          :showCustomMenu="showCustomMenu"
+          :title="title"
+          :toggle="toggle"
+          @updateCountry="(event, label) => updateCountry(event, label)"
+          @updateModelVal="(event, label) => updateModelVal(event, label)"
+          @updateAdvanceSearchToggle="(val) => updateAdvanceSearchToggle(val)"
+          @onApplyAdvancedSearchFilter="onApplyAdvancedSearchFilter"
+          @onClearAdvancedSearchFilter="onClearAdvancedSearchFilter"
+        >
+        </UMenuDropdownAdvancedSearch>
+
+        <!-- Search Result list -->
+
+        <q-list
+          v-if="searchResults && !exceedLimit && searchText.length"
+          class="search-list q-mt-xs"
+        >
+          <span class="text-overline-xs">Search results</span>
+          <template
+            v-for="category of Object.keys(searchResults)"
+            :key="category"
+          >
+            <q-item-label caption>
+              <span class="text-caption-sm">
+                {{ transformCategory(category) }}
+              </span>
+            </q-item-label>
+            <q-item
+              v-for="item of searchResults[category]"
+              class="q-pa-xs list-item"
+              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"
+                  :round="true"
+                  size="md"
+                  :showIndicator="false"
+                />
+              </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>
+              </q-item-section>
+
+              <q-item-section side>
+                <UBtnStd
+                  v-bind="item.btnProps"
+                  :color="item.btnProps?.color ?? 'primary'"
+                  :disable="item.disable"
+                  :label="actionButtonLabel"
+                  outline
+                  size="sm"
+                  @click.stop="onItemActionClick(item)"
+                >
+                  <template v-if="item.tooltip && item.disable" #tooltip>
+                    <UTooltip
+                      anchor="top middle"
+                      :description="item.tooltip"
+                      :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"
+        >
+          <div class="items-center column q-py-ba">
+            <img
+              src="../../assets/no-result.png"
+              alt="No result found"
+              aria-label="No result found"
+            />
+            <span class="text-caption-lg">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 class="row items-center full-width">
+            <span :class="`searchText-${size} text-caption-md q-mr-xs`">{{
+              searchText
+            }}</span>
+            <UBtnStd
+              v-if="showInviteBtn"
+              color="primary"
+              label="Invite"
+              outline
+              size="sm"
+              @click.stop="onInvitePerson(item)"
+            />
+          </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.png"
+            />
+            <span class="text-caption-lg">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
+          v-if="showRecentSelected && recentSearches.length"
+          class="search-list q-mt-xs"
+        >
+          <span class="text-overline-xs">Recently Selected</span>
+          <template v-for="item in recentSearches" :key="item.id">
+            <q-item class="list-item" 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"
+                  size="md"
+                  :showIndicator="false"
+                />
+              </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>
+              </q-item-section>
+
+              <q-item-section side>
+                <UBtnStd
+                  v-bind="item.btnProps"
+                  :color="item.btnProps?.color ?? 'primary'"
+                  :label="actionButtonLabel"
+                  outline
+                  size="sm"
+                  @click.stop="onItemActionClick(item)"
+                >
+                </UBtnStd>
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-list>
+      </div>
+    </q-list>
+  </q-menu>
+</template>
+
+<style lang="sass">
+.u-search-option-menu
+  overflow-y: auto
+  scrollbar-width: none
+  border-radius: $xs
+  padding-bottom: $ba
+  max-height: 20rem
+  box-shadow: 0px 8px 8px 0px rgba(16, 17, 20, 0.16)
+  z-index: 1
+.u-typeahead-menu
+  .u-tabs-outer .u-tab-button .truncated-label
+    overflow-wrap: unset
+  .u-tabs-outer .u-tab-sm
+    margin: 0 $xxs
+  .u-tabs-outer .u-tab-sm:first-child
+    margin-left: 0px
+  .tabs-option
+    display: flex
+    overflow-y: auto
+    scrollbar-width: none
+  flex-direction: column
+  align-items: flex-start
+  border-radius: $xs
+  background: $neutral-1
+  &.size-sm
+    width: 24.5625rem
+  &.size-md
+    width: 26.5rem
+  .search-list
+    display: flex
+    flex-direction: column
+    gap: $xxs
+  .searchText-md
+    flex: 1
+    word-wrap: break-word
+    min-width: 18.5rem
+  .searchText-sm
+    flex: 1
+    word-wrap: break-word
+    min-width: 16.5rem
+  .list-item
+    border-radius: $xs
+    padding: $xs
+    align-items: center
+    display: flex
+    cursor: default !important
+    gap: $xs
+    .q-item__section--avatar
+      min-width: 0px
+    .q-item__section--side
+      padding: 0px
+    .wrapped-text
+      white-space: normal
+      overflow: hidden
+      word-wrap: break-word
+      min-width: 13.75rem
+</style>