@usssa/component-library 1.0.0-alpha.95 → 1.0.0-alpha.97

package/package.json

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

package/src/components/core/UDialogStd.vue

@@ -2,6 +2,8 @@
 import { computed, ref } from 'vue'
 import UBtnStd from './UBtnStd.vue'
 
+const emit = defineEmits(['onBackIconClick', 'hideDialog'])
+const model = defineModel()
 const props = defineProps({
   heading: {
     type: String,
@@ -25,22 +27,19 @@ const props = defineProps({
   divider: Boolean,
 })
 
-const model = defineModel()
-const emit = defineEmits(['onBackIconClick', 'hideDialog'])
-
 const dialogRef = ref(true)
 
-const handleBackClick = () => {
-  return emit('onBackIconClick')
-}
+const dialogStyle = computed(() => ({
+  '--customSize': props.customSize,
+}))
 
 const headerClass = computed(() => {
   return props.divider ? 'divider' : ''
 })
 
-const dialogStyle = computed(() => ({
-  '--customSize': props.customSize,
-}))
+const handleBackClick = () => {
+  return emit('onBackIconClick')
+}
 </script>
 
 <template>
@@ -51,8 +50,8 @@ const dialogStyle = computed(() => ({
     full-width
     no-backdrop-dismiss
     :position="position"
-    :style="dialogStyle"
     ref="dialogRef"
+    :style="dialogStyle"
   >
     <q-card class="dialog-wrapper full-height">
       <q-card-section
@@ -63,9 +62,9 @@ const dialogStyle = computed(() => ({
             <div v-if="leftIcon">
               <UBtnStd
                 class="dialog-action-icons"
-                tabindex="0"
                 :aria-label="leftIconLabel"
                 :flat="true"
+                tabindex="0"
                 @click="handleBackClick()"
               >
                 <q-icon
@@ -226,7 +225,7 @@ const dialogStyle = computed(() => ({
 
 .q-btn.dialog-action-icons
   padding: 0px 0px !important
-  min-width: 0px !important
+  min-width: 1.5rem !important
   min-height: 0px !important
   height: fit-content !important
   border-radius: 0px

package/src/components/core/UMenuSearch.vue

@@ -7,22 +7,32 @@ 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'
+import { categorizeObjects, deepEqual, parseInitials } from '../../utils/data'
+
+const emit = defineEmits([
+  'onInvitePerson',
+  'onItemActionClick',
+  'updateCountry',
+  'updateModelVal',
+  'updateTab',
+])
+
+const loading = defineModel('loading')
 
 const props = defineProps({
-  algoliaIndex: {
-    type: Object,
-  },
   // Label for button to select a record
   actionButtonLabel: {
     type: String,
   },
+  actionButtonLoading: {
+    type: Boolean,
+  },
   // Set default tab
   advancedSearchSelectedTab: {
     type: String,
   },
-  actionButtonLoading: {
-    type: Boolean,
+  algoliaIndex: {
+    type: Object,
   },
   // Set context for component for special handling
   // context.action (e.g. addContact)
@@ -33,6 +43,10 @@ const props = defineProps({
   disabledButtonColor: {
     type: String,
   },
+  disableActionButtonLabel: {
+    type: String,
+    default: '',
+  },
   exceedLimitCount: {
     type: Number,
     default: 50,
@@ -63,17 +77,9 @@ const props = defineProps({
   recentSearchesLoading: {
     type: Boolean,
   },
-  showCustomMenu: {
-    type: Boolean,
-    default: false,
-  },
   searchText: {
     type: String,
   },
-  size: {
-    type: String,
-    default: 'md',
-  },
   // Show/hide advanced search
   showAdvancedSearch: {
     type: Boolean,
@@ -84,15 +90,23 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  // Show/hide recent searches
-  showRecentSelected: {
+  showCustomMenu: {
     type: Boolean,
-    default: true,
+    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,
@@ -103,28 +117,18 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits([
-  'onInvitePerson',
-  'onItemActionClick',
-  'updateTab',
-  'updateModelVal',
-  'updateCountry',
-])
-
-const loading = defineModel('loading')
 const { notify } = useNotify()
 
-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 advancedSearchFilterDirty = ref(false)
 const advancedSearchFilterModelDefault = ref({})
+const advancedSearchSelectedTab = ref(props.advancedSearchSelectedTab ?? null)
 const exceedLimit = ref(false)
 const searchMenuRef = ref(null)
-const searchResults = ref(null)
 const searchMenuShowing = ref(false)
+const searchResults = ref(null)
+const selectedItem = ref({})
+const toggle = ref(false)
 
 const recentSearches = computed({
   get() {
@@ -139,39 +143,9 @@ const recentSearches = computed({
   },
 })
 
-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 convertDate = (inputDate) => {
+  const [month, day, year] = inputDate.split('/')
+  return `${year}-${month}-${day}`
 }
 
 const handleTabChange = (val) => {
@@ -188,7 +162,30 @@ const handleTabChange = (val) => {
   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,
@@ -197,34 +194,12 @@ const onItemActionClick = (item, isRecentSearchAction) => {
   )
 }
 
-const specialContextHandler = (results) => {
-  // Mark result records that are already exits
-  results = results.map((result) => {
-    const isAlreadyContactSearch = props.context.filter(
-      (contact) => contact.id === result.id
-    )
-
-    if (isAlreadyContactSearch && isAlreadyContactSearch.length > 0) {
-      const tooltip = props.toolTipDisabledButton
-      const color = props.disabledButtonColor
-      return {
-        ...result,
-        disable: true,
-        btnProps: {
-          color,
-        },
-        tooltip,
-      }
-    }
-    return result
-  })
-
-  return results
+const onMenuHide = () => {
+  searchMenuShowing.value = false
 }
 
-const convertDate = (inputDate) => {
-  const [month, day, year] = inputDate.split('/')
-  return `${year}-${month}-${day}`
+const onMenuShow = () => {
+  searchMenuShowing.value = true
 }
 
 const search = async () => {
@@ -361,26 +336,65 @@ const search = async () => {
   }
 }
 
+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 onClearAdvancedSearchFilter = () => {
-  Object.assign(
-    props.model,
-    structuredClone(toRaw(advancedSearchFilterModelDefault.value))
-  )
-  advancedSearchApplyFilter.value = false
-  advancedSearchFilterDirty.value = false
-  search()
+const updateCountry = (val, label) => {
+  emit('updateCountry', val, label)
 }
 
-const onApplyAdvancedSearchFilter = () => {
-  advancedSearchApplyFilter.value = true
-  advancedSearchFilterDirty.value = false
-
-  search()
-  updateAdvanceSearchToggle()
+const updateModelVal = (event, label) => {
+  emit('updateModelVal', event, label)
 }
 
 //Assign default model value on tab change
@@ -424,16 +438,16 @@ watch(
   <q-menu
     v-bind="$attrs"
     v-model="searchMenuShowing"
-    aria-label="search menu"
     :class="`u-search-option-menu ${menuClass}`"
+    aria-label="search menu"
     fit
     no-focus
     :offset="[0, 4]"
     ref="searchMenuRef"
     role="menu"
     tabindex="1"
-    @show="onMenuShow"
     @hide="onMenuHide"
+    @show="onMenuShow"
   >
     <q-list
       :class="`u-typeahead-menu q-px-ba q-pt-ba size-${size}`"
@@ -450,7 +464,7 @@ watch(
             :buttonTabsOptions="options"
             size="sm"
             :standard="false"
-            @on-tab-click="handleTabChange"
+            @onTabClick="handleTabChange"
           />
         </div>
       </div>
@@ -462,15 +476,15 @@ watch(
           :fields="fields"
           :labelIcon="labelIcon"
           :model="model"
-          :size="size"
           :showCustomMenu="showCustomMenu"
+          :size="size"
           :title="title"
           :toggle="toggle"
-          @updateCountry="(event, label) => updateCountry(event, label)"
-          @updateModelVal="(event, label) => updateModelVal(event, label)"
-          @updateAdvanceSearchToggle="(val) => updateAdvanceSearchToggle(val)"
           @onApplyAdvancedSearchFilter="onApplyAdvancedSearchFilter"
           @onClearAdvancedSearchFilter="onClearAdvancedSearchFilter"
+          @updateAdvanceSearchToggle="(val) => updateAdvanceSearchToggle(val)"
+          @updateCountry="(event, label) => updateCountry(event, label)"
+          @updateModelVal="(event, label) => updateModelVal(event, label)"
         >
         </UMenuDropdownAdvancedSearch>
 
@@ -511,8 +525,8 @@ watch(
                   :aria-label="item.name"
                   :image="item.profilePictureUrl"
                   :round="true"
-                  size="md"
                   :showIndicator="false"
+                  size="md"
                 />
               </q-item-section>
 
@@ -529,9 +543,13 @@ watch(
                 <UBtnStd
                   v-bind="item.btnProps"
                   :color="item.btnProps?.color ?? 'primary'"
-                  :disable="item.disable"
-                  :label="actionButtonLabel"
-                  :loading="actionButtonLoading"
+                  :disable="
+                    item.disable ||
+                    (selectedItem?.id !== item.id && actionButtonLoading)
+                  "
+                  :loading="
+                    selectedItem?.id === item.id ? actionButtonLoading : false
+                  "
                   outline
                   size="sm"
                   @click.stop="onItemActionClick(item)"
@@ -567,12 +585,11 @@ watch(
             </span>
           </div>
 
-          <div class="row items-center full-width">
-            <span :class="`searchText-${size} text-caption-md q-mr-xs`">{{
-              searchText
-            }}</span>
+          <div v-if="showInviteBtn" 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
@@ -636,8 +653,8 @@ watch(
                     :aria-label="item.name"
                     :image="item.profilePictureUrl"
                     :round="true"
-                    size="md"
                     :showIndicator="false"
+                    size="md"
                   />
                 </q-item-section>
 
@@ -656,9 +673,13 @@ watch(
                   <UBtnStd
                     v-bind="item.btnProps"
                     :color="item.btnProps?.color ?? 'primary'"
-                    :disable="item.disable"
-                    :label="actionButtonLabel"
-                    :loading="actionButtonLoading"
+                    :disable="
+                      item.disable ||
+                      (selectedItem?.id !== item.id && actionButtonLoading)
+                    "
+                    :loading="
+                      selectedItem?.id === item.id ? actionButtonLoading : false
+                    "
                     outline
                     size="sm"
                     @click.stop="onItemActionClick(item, true)"

package/src/components/core/UTableStd.vue

@@ -527,7 +527,10 @@ const onRowPerPageChange = (value) => {
             <!-- to show the actions list if the actions are multiple -->
             <template v-else>
               <q-menu
-                v-if="moreActionDialogData.showDialog[props.row.id]"
+                v-if="
+                  moreActionDialogData &&
+                  moreActionDialogData.showDialog[props.row.id]
+                "
                 v-model="moreActionDialogData.showDialog[props.row.id]"
                 :class="`more-action-popup q-px-ba q-py-ba`"
                 anchor="top left"