subject select table

anzusystems · Oct 19, 2023 · 3491bfe · 3491bfe
1 parent d70eb77
commit 3491bfe
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 8 deletions.
diff --git a/src/components/subjectSelect/ASubjectSelectTable.vue b/src/components/subjectSelect/ASubjectSelectTable.vue
@@ -13,13 +13,15 @@ const props = withDefaults(
     pagination: Pagination
     submitFilter: Fn
     resetFilter: Fn
+    loading?: boolean
     minCount?: number
     maxCount?: number
     modelValue?: boolean | undefined // dialog
     dialogTitleT?: string
-    paginationMode?: 'standard' | 'lazyLoad'
+    paginationMode?: 'standard' | 'more'
   }>(),
   {
+    loading: false,
     minCount: 1,
     maxCount: 1,
     modelValue: undefined,
@@ -56,7 +58,6 @@ const paginationComputed = computed({
 })
 
 const sidebarLeft = ref(true)
-const loading = ref(false)
 const filterTouched = ref(false)
 
 const { t } = useI18n()
@@ -111,7 +112,7 @@ const hasNextPage = computed(() => {
 })
 
 const autoloadOnIntersect = (isIntersecting: boolean) => {
-  if (isIntersecting && hasNextPage.value && !loading.value) {
+  if (isIntersecting && hasNextPage.value && !props.loading) {
     fetchNextPage()
   }
 }
@@ -228,7 +229,7 @@ defineExpose({
         <div class="subject-select__content">
           <slot name="content" />
           <div
-            v-if="paginationMode === 'lazyLoad'"
+            v-if="paginationMode === 'more'"
             class="d-flex w-100 align-center justify-center pa-4"
           >
             <ABtnSecondary

diff --git a/src/components/subjectSelect/useSubjectSelect.ts b/src/components/subjectSelect/useSubjectSelect.ts
@@ -5,6 +5,7 @@ import { ref } from 'vue'
 import type { Pagination } from '@/types/Pagination'
 import type { FilterBag } from '@/types/Filter'
 import { useFilterHelpers } from '@/composables/filter/filterHelpers'
+import { useAlerts } from '@/composables/system/alerts'
 
 export function useSubjectSelect<TItem>(
   datatableConfig: any,
@@ -18,8 +19,10 @@ export function useSubjectSelect<TItem>(
   const filterTouched: Ref<boolean> = ref(false)
   const items: Ref<Array<TItem>> = ref([])
   const selected: Ref<Array<TItem>> = ref([])
+  const loading = ref(false)
 
   const { resetFilter, submitFilter } = useFilterHelpers()
+  const { showErrorsDefault } = useAlerts()
 
   const { columnsVisible, pagination, updateSortBy, columnsAll, columnsHidden } = createDatatableColumnsConfig(
     datatableConfig,
@@ -51,8 +54,15 @@ export function useSubjectSelect<TItem>(
   }
 
   const onFetchNextPage = async () => {
+    loading.value = true
     pagination.page++
-    items.value.push(...(await fetch(pagination, filter)))
+    try {
+      items.value.push(...(await fetch(pagination, filter)))
+    } catch (e) {
+      showErrorsDefault(e)
+    } finally {
+      loading.value = false
+    }
   }
 
   const resetState = () => {
@@ -61,10 +71,17 @@ export function useSubjectSelect<TItem>(
   }
 
   const getList = async () => {
-    items.value = await fetch(pagination, filter)
+    loading.value = true
+    try {
+      items.value = await fetch(pagination, filter)
+    } catch (e) {
+      showErrorsDefault(e)
+    } finally {
+      loading.value = false
+    }
   }
 
-  const onRowClick = (event: PointerEvent) => {
+  const onRowClick = (event: Event) => {
     const eventTarget = event.target as HTMLElement | null
     if (!eventTarget) return
     const parent = eventTarget.parentElement
@@ -84,6 +101,7 @@ export function useSubjectSelect<TItem>(
     columnsHidden,
     columnsAll,
     filterTouched,
+    loading,
     onRowClick,
     onFetchNextPage,
     customToggleSelect,

diff --git a/src/playground/subjectSelectView/PollSelectTable.vue b/src/playground/subjectSelectView/PollSelectTable.vue
@@ -4,7 +4,6 @@ import ADatatableOrdering from '@/components/ADatatableOrdering.vue'
 import ADatatableConfigButton from '@/components/ADatatableConfigButton.vue'
 import { toRef } from 'vue'
 import ADatetime from '@/components/ADatetime.vue'
-import ATableCopyIdButton from '@/components/buttons/table/ATableCopyIdButton.vue'
 import { usePollSelectStore } from '@/playground/subjectSelectView/pollSelectStore'
 import PollSelectFilter from '@/playground/subjectSelectView/PollSelectFilter.vue'
 import { generateSelectStrategy } from '@/components/subjectSelect/selectStrategies'
@@ -44,6 +43,7 @@ const {
   sortByChange,
   getList,
   onRowClick,
+  loading,
 } = useSubjectSelect<PollDemo>(
   [
     { key: 'id' },
@@ -76,6 +76,7 @@ const onConfirm = (items: Array<PollDemo>) => {
     :selected-items="selected"
     :submit-filter="submitFilter"
     :reset-filter="resetFilter"
+    :loading="loading"
     @on-open="onOpen"
     @on-fetch-next-page="onFetchNextPage"
     @on-page-change="getList"
@@ -110,6 +111,7 @@ const onConfirm = (items: Array<PollDemo>) => {
         :headers="columnsVisible"
         :items="items"
         :items-length="items.length"
+        :loading="loading"
         item-value="id"
         return-object
         :select-strategy="generateSelectStrategy(minCount, maxCount) as any"