fix: pagination will restore (#34)

aa900031 · Jan 12, 2025 · 3d5d7c7 · 3d5d7c7
1 parent ae9f8a1
commit 3d5d7c7
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 24 deletions.
diff --git a/packages/core/src/controller/list.ts b/packages/core/src/controller/list.ts
@@ -644,10 +644,19 @@ export function resolveSorters(
 	permanent: Sorters | undefined,
 	value: Sorters | undefined,
 ): Sorters | undefined {
-	if (permanent || value) {
-		return unionWith(permanent, value, compareSort)
-			.filter(filterSort)
-	}
+	if (permanent == null && value == null)
+		return
+
+	const result = unionWith(
+		permanent,
+		value,
+		compareSort,
+	).filter(filterSort)
+
+	if (result.length === 0)
+		return DEFAULT_SORTERS
+
+	return result
 }
 
 export interface GetDataProps<
@@ -751,12 +760,17 @@ export function resolveFilters(
 	value: Filters | undefined,
 	prev?: Filters,
 ): Filters | undefined {
-	return unionWith(
+	const result = unionWith(
 		permanent,
 		value,
 		prev,
 		compareFilter,
 	).filter(filterFilter)
+
+	if (result.length === 0)
+		return DEFAULT_FILTERS
+
+	return result
 }
 
 function checkFiltersValue(

diff --git a/stories/vue/src/ListFilters.vue b/stories/vue/src/ListFilters.vue
@@ -2,7 +2,7 @@
 import type { Post } from './api/posts'
 import { FilterOperator } from '@ginjou/core'
 import { useList } from '@ginjou/vue'
-import { reactive, watchPostEffect } from 'vue'
+import { reactive, unref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
 const route = useRoute()
@@ -19,23 +19,27 @@ const formData = reactive({
 	id: '',
 })
 
-watchPostEffect(() => {
+watch(() => unref(formData), (data) => {
 	filters.value = [
-		formData.title
+		data.title
 			? {
 					field: 'title',
 					operator: FilterOperator.contains,
-					value: formData.title,
+					value: data.title,
 				}
 			: undefined as any,
-		formData.id
+		data.id
 			? {
 					field: 'id',
 					operator: FilterOperator.eq,
-					value: formData.id,
+					value: data.id,
 				}
 			: undefined as any,
 	].filter(Boolean)
+}, {
+	flush: 'post',
+	deep: true,
+	immediate: true,
 })
 </script>
 

diff --git a/stories/vue/src/ListSorters.vue b/stories/vue/src/ListSorters.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Post } from './api/posts'
 import { useList } from '@ginjou/vue'
-import { reactive, watchPostEffect } from 'vue'
+import { reactive, unref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
 const route = useRoute()
@@ -14,21 +14,29 @@ const {
 })
 
 const formData = reactive({
-	id: false,
-	title: true,
+	id: undefined,
+	title: undefined,
 })
 
-watchPostEffect(() => {
+watch(() => unref(formData), (data) => {
 	sorters.value = [
-		{
-			field: 'title',
-			order: formData.title ? 'asc' : 'desc',
-		},
-		{
-			field: 'id',
-			order: formData.id ? 'asc' : 'desc',
-		},
-	]
+		data.title != null
+			? {
+					field: 'title',
+					order: data.title ? 'asc' : 'desc',
+				}
+			: undefined as any,
+		data.id != null
+			? {
+					field: 'id',
+					order: data.id ? 'asc' : 'desc',
+				}
+			: undefined as any,
+	].filter(Boolean)
+}, {
+	flush: 'post',
+	deep: true,
+	immediate: true,
 })
 </script>