@usssa/component-library 1.0.0-alpha.1 → 1.0.0-alpha.100

package/src/components/core/UMenuSearch.vue

@@ -0,0 +1,752 @@
+<script setup>
+import { computed, ref, toRaw, watch } from 'vue'
+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 { useNotify } from '../../composables/useNotify'
+import { categorizeObjects, deepEqual, parseInitials } from '../../utils/data'
+
+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,
+  },
+  // Set default tab
+  advancedSearchSelectedTab: {
+    type: String,
+  },
+  algoliaIndex: {
+    type: Object,
+  },
+  // 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,
+  },
+  disableActionButtonLabel: {
+    type: String,
+    default: '',
+  },
+  exceedLimitCount: {
+    type: Number,
+    default: 50,
+  },
+  fields: {
+    type: Array,
+  },
+  headerLabel: {
+    type: String,
+    default: "I'm looking for",
+  },
+  labelIcon: {
+    type: String,
+    default: 'fa-kit-duotone fa-filter-search',
+  },
+  menuClass: {
+    type: String,
+  },
+  model: {
+    type: Object,
+  },
+  options: {
+    type: Array,
+  },
+  recentSearches: {
+    type: Array,
+  },
+  recentSearchesLoading: {
+    type: Boolean,
+  },
+  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,
+  },
+  showInviteBtn: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String,
+    default: 'md',
+  },
+  // Show/hide recent searches
+  showRecentSelected: {
+    type: Boolean,
+    default: true,
+  },
+  //Advance search title
+  title: {
+    type: String,
+    default: 'Advanced search',
+  },
+  toolTipDisabledButton: {
+    type: String,
+  },
+})
+
+const { notify } = useNotify()
+
+const advancedSearchApplyFilter = ref(false)
+const advancedSearchFilterDirty = ref(false)
+const advancedSearchFilterModelDefault = ref({})
+const advancedSearchSelectedTab = ref(props.advancedSearchSelectedTab ?? null)
+const exceedLimit = ref(false)
+const searchMenuRef = ref(null)
+const searchMenuShowing = ref(false)
+const searchResults = ref(null)
+const selectedItem = ref({})
+const toggle = ref(false)
+
+const recentSearches = computed({
+  get() {
+    let arr = props.recentSearches
+    if (props.context) {
+      arr = specialContextHandler(arr)
+    }
+    return arr
+  },
+  set(value) {
+    return value
+  },
+})
+
+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,
+    searchMenuRef.value
+  )
+}
+
+const onMenuHide = () => {
+  searchMenuShowing.value = false
+}
+
+const onMenuShow = () => {
+  searchMenuShowing.value = true
+}
+
+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
+    )
+    let label = props.actionButtonLabel
+
+    if (isAlreadyAddedSearch && isAlreadyAddedSearch.length > 0) {
+      const tooltip = props.toolTipDisabledButton
+      const color = props.disabledButtonColor
+      label = props.disableActionButtonLabel
+
+      return {
+        ...result,
+        disable: true,
+        btnProps: {
+          color,
+          label,
+        },
+        tooltip,
+      }
+    }
+    return {
+      ...result,
+      btnProps: {
+        label,
+      },
+    }
+  })
+
+  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) searchMenuRef.value.show()
+      search()
+    } else {
+      searchResults.value = null
+    }
+  }
+)
+</script>
+
+<template>
+  <q-menu
+    v-bind="$attrs"
+    v-model="searchMenuShowing"
+    :class="`u-search-option-menu ${menuClass}`"
+    aria-label="search menu"
+    fit
+    no-focus
+    :offset="[0, 4]"
+    ref="searchMenuRef"
+    role="menu"
+    tabindex="1"
+    @hide="onMenuHide"
+    @show="onMenuShow"
+  >
+    <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"
+            @onTabClick="handleTabChange"
+          />
+        </div>
+      </div>
+      <div class="q-mt-xs">
+        <!-- Menu dropdown -->
+        <UMenuDropdownAdvancedSearch
+          v-if="showAdvancedSearch"
+          :disbaleApplyFilter="!advancedSearchFilterDirty"
+          :fields="fields"
+          :labelIcon="labelIcon"
+          :model="model"
+          :showCustomMenu="showCustomMenu"
+          :size="size"
+          :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>
+
+        <!-- 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"
+                  :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>
+              </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)
+                  "
+                  :loading="
+                    selectedItem?.id === item.id ? actionButtonLoading : false
+                  "
+                  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 v-if="showInviteBtn" class="row items-center full-width">
+            <span :class="`searchText-${size} text-caption-md q-mr-xs`">
+              {{ 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.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 class="search-list q-mt-xs">
+          <div
+            v-if="showRecentSelected && recentSearchesLoading"
+            class="row justify-between items-center"
+          >
+            <span class="text-overline-xs"> Recently Selected </span>
+
+            <q-spinner
+              v-if="recentSearchesLoading"
+              color="grey-14"
+              size="1rem"
+            />
+          </div>
+          <div
+            v-if="showRecentSelected && recentSearches && recentSearches.length"
+          >
+            <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"
+                    :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>
+                </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)
+                    "
+                    :loading="
+                      selectedItem?.id === item.id ? actionButtonLoading : false
+                    "
+                    outline
+                    size="sm"
+                    @click.stop="onItemActionClick(item, true)"
+                  >
+                    <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>
+          </div>
+        </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)
+.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
+  .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
+</style>