@usssa/component-library 1.0.0-alpha.91 → 1.0.0-alpha.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.91",
+  "version": "1.0.0-alpha.93",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Troy Moreland <troy.moreland@usssa.com>",

package/src/components/core/UMenuSearch.vue

@@ -1,12 +1,12 @@
 <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 { useNotify } from '../../composables/useNotify'
 import { parseInitials, categorizeObjects, deepEqual } from '../../utils/data'
 
 const props = defineProps({
@@ -21,11 +21,21 @@ const props = defineProps({
   advancedSearchSelectedTab: {
     type: String,
   },
+  actionButtonLoading: {
+    type: Boolean,
+  },
   // Set context for component for special handling
   // context.action (e.g. addContact)
   // context.data (e.g. array of existing contacts)
   context: {
-    type: Object,
+    type: Array,
+  },
+  disabledButtonColor: {
+    type: String,
+  },
+  exceedLimitCount: {
+    type: Number,
+    default: 50,
   },
   fields: {
     type: Array,
@@ -38,11 +48,6 @@ const props = defineProps({
     type: String,
     default: 'fa-kit-duotone fa-filter-search',
   },
-  //Number of maximum search result to show
-  maxSearchResults: {
-    type: Number,
-    default: 5,
-  },
   menuClass: {
     type: String,
   },
@@ -52,6 +57,12 @@ const props = defineProps({
   options: {
     type: Array,
   },
+  recentSearches: {
+    type: Array,
+  },
+  recentSearchesLoading: {
+    type: Boolean,
+  },
   showCustomMenu: {
     type: Boolean,
     default: false,
@@ -87,6 +98,9 @@ const props = defineProps({
     type: String,
     default: 'Advanced search',
   },
+  toolTipDisabledButton: {
+    type: String,
+  },
 })
 
 const emit = defineEmits([
@@ -98,6 +112,7 @@ const emit = defineEmits([
 ])
 
 const loading = defineModel('loading')
+const { notify } = useNotify()
 
 const advancedSearchPendingFilterModel = structuredClone(toRaw(props.model))
 const advancedSearchSelectedTab = ref(props.advancedSearchSelectedTab ?? null)
@@ -113,11 +128,11 @@ const searchMenuShowing = ref(false)
 
 const recentSearches = computed({
   get() {
-    let arr = SessionStorage.getItem('recentSearches') ?? []
-    if (props.context && props.context.action) {
+    let arr = props.recentSearches
+    if (props.context) {
       arr = specialContextHandler(arr)
     }
-    return arr.sort((a, b) => b.added_to_recent - a.added_to_recent)
+    return arr
   },
   set(value) {
     return value
@@ -173,50 +188,38 @@ const handleTabChange = (val) => {
   search()
 }
 
-const recentSearchHandler = (item) => {
-  let index = recentSearches.value.findIndex((s) => s.id === item.id)
-  if (index >= 0) {
-    recentSearches.value.splice(index, 1)
-  }
+const onItemActionClick = (item, isRecentSearchAction) => {
+  return emit(
+    'onItemActionClick',
+    item,
+    isRecentSearchAction,
+    searchMenuRef.value
+  )
+}
 
-  if (recentSearches.value.length === props.maxSearchResults) {
-    recentSearches.value.pop()
-  }
+const specialContextHandler = (results) => {
+  // Mark result records that are already exits
+  results = results.map((result) => {
+    const isAlreadyContactSearch = props.context.filter(
+      (contact) => contact.id === result.id
+    )
 
-  recentSearches.value.push({
-    ...item,
-    added_to_recent: new Date().valueOf(),
+    if (isAlreadyContactSearch && isAlreadyContactSearch.length > 0) {
+      const tooltip = props.toolTipDisabledButton
+      const color = props.disabledButtonColor
+      return {
+        ...result,
+        disable: true,
+        btnProps: {
+          color,
+        },
+        tooltip,
+      }
+    }
+    return result
   })
 
-  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
-  }
+  return results
 }
 
 const convertDate = (inputDate) => {
@@ -327,7 +330,7 @@ const search = async () => {
 
     const res = await props.algoliaIndex.search(props.searchText, configPayload)
 
-    if (res.hits.length >= 50) {
+    if (res.hits.length >= props.exceedLimitCount) {
       exceedLimit.value = true
     } else {
       exceedLimit.value = false
@@ -335,7 +338,7 @@ const search = async () => {
 
     let results = res.hits
 
-    if (props.context && data.context.action) {
+    if (props.context) {
       results = specialContextHandler(results)
     }
 
@@ -348,9 +351,10 @@ const search = async () => {
     }
     return void 0
   } catch (error) {
-    Notify.create({
-      type: 'error',
-      message: 'Search broke',
+    notify({
+      type: 'accent',
+      label: 'Search broke',
+      position: 'top',
     })
   } finally {
     loading.value = false
@@ -527,6 +531,7 @@ watch(
                   :color="item.btnProps?.color ?? 'primary'"
                   :disable="item.disable"
                   :label="actionButtonLabel"
+                  :loading="actionButtonLoading"
                   outline
                   size="sm"
                   @click.stop="onItemActionClick(item)"
@@ -572,7 +577,7 @@ watch(
               label="Invite"
               outline
               size="sm"
-              @click.stop="onInvitePerson(item)"
+              @click.stop="onInvitePerson(item, false)"
             />
           </div>
         </div>
@@ -596,56 +601,81 @@ watch(
 
         <!-- 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-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-item-section side>
-                <UBtnStd
-                  v-bind="item.btnProps"
-                  :color="item.btnProps?.color ?? 'primary'"
-                  :label="actionButtonLabel"
-                  outline
-                  size="sm"
-                  @click.stop="onItemActionClick(item)"
-                />
-              </q-item-section>
-            </q-item>
-          </template>
+            <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"
+                    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'"
+                    :disable="item.disable"
+                    :label="actionButtonLabel"
+                    :loading="actionButtonLoading"
+                    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>
@@ -683,14 +713,6 @@ watch(
     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
@@ -706,5 +728,4 @@ watch(
       white-space: normal
       overflow: hidden
       word-wrap: break-word
-      max-width: 18rem
 </style>