wip: refactor(client): migrate paging components to composition api
This commit is contained in:
		
							parent
							
								
									186a9e3b41
								
							
						
					
					
						commit
						06125e6820
					
				
					 15 changed files with 51 additions and 122 deletions
				
			
		|  | @ -62,7 +62,7 @@ | |||
| </template> | ||||
| 
 | ||||
| <script lang="ts"> | ||||
| import { defineComponent } from 'vue'; | ||||
| import { computed, defineComponent } from 'vue'; | ||||
| 
 | ||||
| import MkButton from '@/components/ui/button.vue'; | ||||
| import MkInput from '@/components/form/input.vue'; | ||||
|  | @ -97,29 +97,15 @@ export default defineComponent({ | |||
| 			pagination: { | ||||
| 				endpoint: 'admin/abuse-user-reports', | ||||
| 				limit: 10, | ||||
| 				params: () => ({ | ||||
| 				params: computed(() => ({ | ||||
| 					state: this.state, | ||||
| 					reporterOrigin: this.reporterOrigin, | ||||
| 					targetUserOrigin: this.targetUserOrigin, | ||||
| 				}), | ||||
| 				})), | ||||
| 			}, | ||||
| 		} | ||||
| 	}, | ||||
| 
 | ||||
| 	watch: { | ||||
| 		state() { | ||||
| 			this.$refs.reports.reload(); | ||||
| 		}, | ||||
| 
 | ||||
| 		reporterOrigin() { | ||||
| 			this.$refs.reports.reload(); | ||||
| 		}, | ||||
| 
 | ||||
| 		targetUserOrigin() { | ||||
| 			this.$refs.reports.reload(); | ||||
| 		}, | ||||
| 	}, | ||||
| 
 | ||||
| 	mounted() { | ||||
| 		this.$emit('info', this[symbols.PAGE_INFO]); | ||||
| 	}, | ||||
|  |  | |||
|  | @ -55,7 +55,7 @@ | |||
| </template> | ||||
| 
 | ||||
| <script lang="ts"> | ||||
| import { defineComponent } from 'vue'; | ||||
| import { computed, defineComponent } from 'vue'; | ||||
| import MkButton from '@/components/ui/button.vue'; | ||||
| import MkInput from '@/components/form/input.vue'; | ||||
| import MkSelect from '@/components/form/select.vue'; | ||||
|  | @ -97,27 +97,15 @@ export default defineComponent({ | |||
| 			pagination: { | ||||
| 				endpoint: 'admin/drive/files', | ||||
| 				limit: 10, | ||||
| 				params: () => ({ | ||||
| 				params: computed(() => ({ | ||||
| 					type: (this.type && this.type !== '') ? this.type : null, | ||||
| 					origin: this.origin, | ||||
| 					hostname: (this.hostname && this.hostname !== '') ? this.hostname : null, | ||||
| 				}), | ||||
| 					hostname: (this.searchHost && this.searchHost !== '') ? this.searchHost : null, | ||||
| 				})), | ||||
| 			}, | ||||
| 		} | ||||
| 	}, | ||||
| 
 | ||||
| 	watch: { | ||||
| 		type() { | ||||
| 			this.$refs.files.reload(); | ||||
| 		}, | ||||
| 		origin() { | ||||
| 			this.$refs.files.reload(); | ||||
| 		}, | ||||
| 		searchHost() { | ||||
| 			this.$refs.files.reload(); | ||||
| 		}, | ||||
| 	}, | ||||
| 
 | ||||
| 	mounted() { | ||||
| 		this.$emit('info', this[symbols.PAGE_INFO]); | ||||
| 	}, | ||||
|  |  | |||
|  | @ -62,7 +62,7 @@ | |||
| </template> | ||||
| 
 | ||||
| <script lang="ts"> | ||||
| import { defineComponent } from 'vue'; | ||||
| import { computed, defineComponent } from 'vue'; | ||||
| import MkButton from '@/components/ui/button.vue'; | ||||
| import MkInput from '@/components/form/input.vue'; | ||||
| import MkSelect from '@/components/form/select.vue'; | ||||
|  | @ -112,30 +112,18 @@ export default defineComponent({ | |||
| 			pagination: { | ||||
| 				endpoint: 'admin/show-users', | ||||
| 				limit: 10, | ||||
| 				params: () => ({ | ||||
| 				params: computed(() => ({ | ||||
| 					sort: this.sort, | ||||
| 					state: this.state, | ||||
| 					origin: this.origin, | ||||
| 					username: this.searchUsername, | ||||
| 					hostname: this.searchHost, | ||||
| 				}), | ||||
| 				})), | ||||
| 				offsetMode: true | ||||
| 			}, | ||||
| 		} | ||||
| 	}, | ||||
| 
 | ||||
| 	watch: { | ||||
| 		sort() { | ||||
| 			this.$refs.users.reload(); | ||||
| 		}, | ||||
| 		state() { | ||||
| 			this.$refs.users.reload(); | ||||
| 		}, | ||||
| 		origin() { | ||||
| 			this.$refs.users.reload(); | ||||
| 		}, | ||||
| 	}, | ||||
| 
 | ||||
| 	async mounted() { | ||||
| 		this.$emit('info', this[symbols.PAGE_INFO]); | ||||
| 	}, | ||||
|  |  | |||
|  | @ -69,9 +69,9 @@ export default defineComponent({ | |||
| 			pagination: { | ||||
| 				endpoint: 'channels/timeline', | ||||
| 				limit: 10, | ||||
| 				params: () => ({ | ||||
| 				params: computed(() => ({ | ||||
| 					channelId: this.channelId, | ||||
| 				}) | ||||
| 				})) | ||||
| 			}, | ||||
| 		}; | ||||
| 	}, | ||||
|  |  | |||
|  | @ -52,9 +52,9 @@ export default defineComponent({ | |||
| 			pagination: { | ||||
| 				endpoint: 'clips/notes', | ||||
| 				limit: 10, | ||||
| 				params: () => ({ | ||||
| 				params: computed(() => ({ | ||||
| 					clipId: this.clipId, | ||||
| 				}) | ||||
| 				})) | ||||
| 			}, | ||||
| 		}; | ||||
| 	}, | ||||
|  |  | |||
|  | @ -96,7 +96,7 @@ | |||
| </template> | ||||
| 
 | ||||
| <script lang="ts"> | ||||
| import { defineComponent } from 'vue'; | ||||
| import { computed, defineComponent } from 'vue'; | ||||
| import MkButton from '@/components/ui/button.vue'; | ||||
| import MkInput from '@/components/form/input.vue'; | ||||
| import MkSelect from '@/components/form/select.vue'; | ||||
|  | @ -130,7 +130,7 @@ export default defineComponent({ | |||
| 				endpoint: 'federation/instances', | ||||
| 				limit: 10, | ||||
| 				offsetMode: true, | ||||
| 				params: () => ({ | ||||
| 				params: computed(() => ({ | ||||
| 					sort: this.sort, | ||||
| 					host: this.host != '' ? this.host : null, | ||||
| 					...( | ||||
|  | @ -141,7 +141,7 @@ export default defineComponent({ | |||
| 						this.state === 'blocked' ? { blocked: true } : | ||||
| 						this.state === 'notResponding' ? { notResponding: true } : | ||||
| 						{}) | ||||
| 				}) | ||||
| 				})) | ||||
| 			}, | ||||
| 		} | ||||
| 	}, | ||||
|  |  | |||
|  | @ -95,9 +95,9 @@ export default defineComponent({ | |||
| 			otherPostsPagination: { | ||||
| 				endpoint: 'users/gallery/posts', | ||||
| 				limit: 6, | ||||
| 				params: () => ({ | ||||
| 				params: computed(() => ({ | ||||
| 					userId: this.post.user.id | ||||
| 				}) | ||||
| 				})), | ||||
| 			}, | ||||
| 			post: null, | ||||
| 			error: null, | ||||
|  |  | |||
|  | @ -108,9 +108,9 @@ export default defineComponent({ | |||
| 			otherPostsPagination: { | ||||
| 				endpoint: 'users/pages', | ||||
| 				limit: 6, | ||||
| 				params: () => ({ | ||||
| 				params: computed(() => ({ | ||||
| 					userId: this.page.user.id | ||||
| 				}) | ||||
| 				})), | ||||
| 			}, | ||||
| 		}; | ||||
| 	}, | ||||
|  |  | |||
|  | @ -25,18 +25,12 @@ export default defineComponent({ | |||
| 			pagination: { | ||||
| 				endpoint: 'notes/search', | ||||
| 				limit: 10, | ||||
| 				params: () => ({ | ||||
| 				params: computed(() => ({ | ||||
| 					query: this.$route.query.q, | ||||
| 					channelId: this.$route.query.channel, | ||||
| 				}) | ||||
| 				})) | ||||
| 			}, | ||||
| 		}; | ||||
| 	}, | ||||
| 
 | ||||
| 	watch: { | ||||
| 		$route() { | ||||
| 			(this.$refs.notes as any).reload(); | ||||
| 		} | ||||
| 	}, | ||||
| }); | ||||
| </script> | ||||
|  |  | |||
|  | @ -5,7 +5,7 @@ | |||
| </template> | ||||
| 
 | ||||
| <script lang="ts"> | ||||
| import { defineComponent } from 'vue'; | ||||
| import { computed, defineComponent } from 'vue'; | ||||
| import XNotes from '@/components/notes.vue'; | ||||
| import * as symbols from '@/symbols'; | ||||
| 
 | ||||
|  | @ -30,17 +30,11 @@ export default defineComponent({ | |||
| 			pagination: { | ||||
| 				endpoint: 'notes/search-by-tag', | ||||
| 				limit: 10, | ||||
| 				params: () => ({ | ||||
| 				params: computed(() => ({ | ||||
| 					tag: this.tag, | ||||
| 				}) | ||||
| 				})) | ||||
| 			}, | ||||
| 		}; | ||||
| 	}, | ||||
| 
 | ||||
| 	watch: { | ||||
| 		tag() { | ||||
| 			(this.$refs.notes as any).reload(); | ||||
| 		} | ||||
| 	}, | ||||
| }); | ||||
| </script> | ||||
|  |  | |||
|  | @ -1,6 +1,6 @@ | |||
| <template> | ||||
| <div> | ||||
| 	<MkPagination v-slot="{items}" ref="list" :pagination="pagination" class="mk-following-or-followers"> | ||||
| 	<MkPagination v-slot="{items}" ref="list" :pagination="type === 'following' ? followingPagination : followersPagination" class="mk-following-or-followers"> | ||||
| 		<div class="users _isolated"> | ||||
| 			<MkUserInfo v-for="user in items.map(x => type === 'following' ? x.followee : x.follower)" :key="user.id" class="user" :user="user"/> | ||||
| 		</div> | ||||
|  | @ -9,7 +9,7 @@ | |||
| </template> | ||||
| 
 | ||||
| <script lang="ts"> | ||||
| import { defineComponent } from 'vue'; | ||||
| import { computed, defineComponent } from 'vue'; | ||||
| import MkUserInfo from '@/components/user-info.vue'; | ||||
| import MkPagination from '@/components/ui/pagination.vue'; | ||||
| 
 | ||||
|  | @ -32,25 +32,22 @@ export default defineComponent({ | |||
| 
 | ||||
| 	data() { | ||||
| 		return { | ||||
| 			pagination: { | ||||
| 				endpoint: () => this.type === 'following' ? 'users/following' : 'users/followers', | ||||
| 			followingPagination: { | ||||
| 				endpoint: 'users/following', | ||||
| 				limit: 20, | ||||
| 				params: { | ||||
| 				params: computed(() => ({ | ||||
| 					userId: this.user.id, | ||||
| 				} | ||||
| 				})), | ||||
| 			}, | ||||
| 			followersPagination: { | ||||
| 				endpoint: 'users/followers', | ||||
| 				limit: 20, | ||||
| 				params: computed(() => ({ | ||||
| 					userId: this.user.id, | ||||
| 				})), | ||||
| 			}, | ||||
| 		}; | ||||
| 	}, | ||||
| 
 | ||||
| 	watch: { | ||||
| 		type() { | ||||
| 			this.$refs.list.reload(); | ||||
| 		}, | ||||
| 
 | ||||
| 		user() { | ||||
| 			this.$refs.list.reload(); | ||||
| 		} | ||||
| 	} | ||||
| }); | ||||
| </script> | ||||
| 
 | ||||
|  |  | |||
|  | @ -9,7 +9,7 @@ | |||
| </template> | ||||
| 
 | ||||
| <script lang="ts"> | ||||
| import { defineComponent } from 'vue'; | ||||
| import { computed, defineComponent } from 'vue'; | ||||
| import MkGalleryPostPreview from '@/components/gallery-post-preview.vue'; | ||||
| import MkPagination from '@/components/ui/pagination.vue'; | ||||
| 
 | ||||
|  | @ -31,18 +31,12 @@ export default defineComponent({ | |||
| 			pagination: { | ||||
| 				endpoint: 'users/gallery/posts', | ||||
| 				limit: 6, | ||||
| 				params: () => ({ | ||||
| 				params: computed(() => ({ | ||||
| 					userId: this.user.id | ||||
| 				}) | ||||
| 				})), | ||||
| 			}, | ||||
| 		}; | ||||
| 	}, | ||||
| 
 | ||||
| 	watch: { | ||||
| 		user() { | ||||
| 			this.$refs.list.reload(); | ||||
| 		} | ||||
| 	} | ||||
| }); | ||||
| </script> | ||||
| 
 | ||||
|  |  | |||
|  | @ -7,7 +7,7 @@ | |||
| </template> | ||||
| 
 | ||||
| <script lang="ts"> | ||||
| import { defineComponent } from 'vue'; | ||||
| import { computed, defineComponent } from 'vue'; | ||||
| import MkPagePreview from '@/components/page-preview.vue'; | ||||
| import MkPagination from '@/components/ui/pagination.vue'; | ||||
| 
 | ||||
|  | @ -29,18 +29,12 @@ export default defineComponent({ | |||
| 			pagination: { | ||||
| 				endpoint: 'users/pages', | ||||
| 				limit: 20, | ||||
| 				params: { | ||||
| 				params: computed(() => ({ | ||||
| 					userId: this.user.id, | ||||
| 				} | ||||
| 				})), | ||||
| 			}, | ||||
| 		}; | ||||
| 	}, | ||||
| 
 | ||||
| 	watch: { | ||||
| 		user() { | ||||
| 			this.$refs.list.reload(); | ||||
| 		} | ||||
| 	} | ||||
| }); | ||||
| </script> | ||||
| 
 | ||||
|  |  | |||
|  | @ -14,7 +14,7 @@ | |||
| </template> | ||||
| 
 | ||||
| <script lang="ts"> | ||||
| import { defineComponent } from 'vue'; | ||||
| import { computed, defineComponent } from 'vue'; | ||||
| import MkPagination from '@/components/ui/pagination.vue'; | ||||
| import MkNote from '@/components/note.vue'; | ||||
| import MkReactionIcon from '@/components/reaction-icon.vue'; | ||||
|  | @ -38,18 +38,12 @@ export default defineComponent({ | |||
| 			pagination: { | ||||
| 				endpoint: 'users/reactions', | ||||
| 				limit: 20, | ||||
| 				params: { | ||||
| 				params: computed(() => ({ | ||||
| 					userId: this.user.id, | ||||
| 				} | ||||
| 				})), | ||||
| 			}, | ||||
| 		}; | ||||
| 	}, | ||||
| 
 | ||||
| 	watch: { | ||||
| 		user() { | ||||
| 			this.$refs.list.reload(); | ||||
| 		} | ||||
| 	}, | ||||
| }); | ||||
| </script> | ||||
| 
 | ||||
|  |  | |||
|  | @ -7,7 +7,7 @@ | |||
| </template> | ||||
| 
 | ||||
| <script lang="ts"> | ||||
| import { defineComponent } from 'vue'; | ||||
| import { computed, defineComponent } from 'vue'; | ||||
| import XColumn from './column.vue'; | ||||
| import XNotes from '@/components/notes.vue'; | ||||
| import * as os from '@/os'; | ||||
|  | @ -34,9 +34,9 @@ export default defineComponent({ | |||
| 			pagination: { | ||||
| 				endpoint: 'notes/mentions', | ||||
| 				limit: 10, | ||||
| 				params: () => ({ | ||||
| 				params: computed(() => ({ | ||||
| 					visibility: 'specified' | ||||
| 				}) | ||||
| 				})), | ||||
| 			}, | ||||
| 		} | ||||
| 	}, | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue