@usssa/component-library 1.0.0-alpha.147 → 1.0.0-alpha.149

package/src/components/core/UMenuSearch.vue

@@ -1,460 +1,37 @@
 <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 { ref, watch } from 'vue'
+
+const emit = defineEmits(['onMenuHide', 'onMenuShow'])
 
-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,
-  },
   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,
-  },
-  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 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
+  emit('onMenuHide')
 }
 
 const onMenuShow = () => {
   searchMenuShowing.value = true
+  emit('onMenuShow')
 }
 
-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) searchMenuRef.value.show()
-      search()
-    } else {
-      searchResults.value = null
+      if (!searchMenuShowing.value) {
+        searchMenuRef.value.show()
+      }
     }
   }
 )
@@ -464,7 +41,7 @@ watch(
   <q-menu
     v-bind="$attrs"
     v-model="searchMenuShowing"
-    :class="`u-search-option-menu ${menuClass}`"
+    :class="[`u-search-option-menu ${menuClass}`]"
     aria-label="search menu"
     fit
     no-focus
@@ -475,304 +52,7 @@ watch(
     @hide="onMenuHide"
     @show="onMenuShow"
   >
-    <q-list
-      :class="`u-typeahead-menu q-pl-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
-            :buttonTabsOptions="options"
-            :modelValue="advancedSearchSelectedTab"
-            size="sm"
-            :standard="false"
-            @onTabClick="handleTabChange"
-          />
-        </div>
-      </div>
-      <div class="q-mt-xs q-mr-ba">
-        <!-- 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 q-px-xxs"
-        >
-          <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 q-py-xxs">
-                {{ 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"
-                  :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)
-                  "
-                  :leftIcon="item.icon"
-                  :label="item.label ? item.label : actionButtonLabel"
-                  :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"
-        >
-          <div class="items-center column q-py-ba">
-            <img
-              alt="No result found"
-              aria-label="No result found"
-              src="../../assets/no-result.png"
-            />
-            <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 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.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 q-px-xxs">
-          <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 &&
-              !recentSearchesLoading
-            "
-          >
-            <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>
-                  <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)
-                    "
-                    :leftIcon="item.icon"
-                    :label="item.label ? item.label : actionButtonLabel"
-                    :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>
-      </div>
-    </q-list>
+    <slot name="menuContent" :menuRef="searchMenuRef" />
   </q-menu>
 </template>
 
@@ -784,48 +64,6 @@ watch(
   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
-    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
-  flex-direction: column
-  align-items: flex-start
-  border-radius: $xs
-  background: $neutral-1
-  &.size-sm
-    max-width: 25.5625rem
-  &.size-md
-    max-width: 26.5rem
-  .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__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)
+  right: $ba
+  width: 25.5rem
 </style>