Skip to content
Snippets Groups Projects
Commit 06125e68 authored by syuilo's avatar syuilo
Browse files

wip: refactor(client): migrate paging components to composition api

parent 186a9e3b
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 51 additions and 122 deletions
packages/client/src/pages/admin/abuses.vue
+ 3
− 17
View file @ 06125e68
......@@ -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]);
},
......
packages/client/src/pages/admin/files.vue
+ 4
− 16
View file @ 06125e68
......@@ -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]);
},
......
packages/client/src/pages/admin/users.vue
+ 3
− 15
View file @ 06125e68
......@@ -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]);
},
......
packages/client/src/pages/channel.vue
+ 2
− 2
View file @ 06125e68
......@@ -69,9 +69,9 @@ export default defineComponent({
pagination: {
endpoint: 'channels/timeline',
limit: 10,
params: () => ({
params: computed(() => ({
channelId: this.channelId,
})
}))
},
};
},
......
packages/client/src/pages/clip.vue
+ 2
− 2
View file @ 06125e68
......@@ -52,9 +52,9 @@ export default defineComponent({
pagination: {
endpoint: 'clips/notes',
limit: 10,
params: () => ({
params: computed(() => ({
clipId: this.clipId,
})
}))
},
};
},
......
packages/client/src/pages/federation.vue
+ 3
− 3
View file @ 06125e68
......@@ -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 } :
{})
})
}))
},
}
},
......
packages/client/src/pages/gallery/post.vue
+ 2
− 2
View file @ 06125e68
......@@ -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,
......
packages/client/src/pages/page.vue
+ 2
− 2
View file @ 06125e68
......@@ -108,9 +108,9 @@ export default defineComponent({
otherPostsPagination: {
endpoint: 'users/pages',
limit: 6,
params: () => ({
params: computed(() => ({
userId: this.page.user.id
})
})),
},
};
},
......
packages/client/src/pages/search.vue
+ 2
− 8
View file @ 06125e68
......@@ -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>
packages/client/src/pages/tag.vue
+ 3
− 9
View file @ 06125e68
......@@ -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>
packages/client/src/pages/user/follow-list.vue
+ 13
− 16
View file @ 06125e68
<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>
......
packages/client/src/pages/user/gallery.vue
+ 3
− 9
View file @ 06125e68
......@@ -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>
......
packages/client/src/pages/user/pages.vue
+ 3
− 9
View file @ 06125e68
......@@ -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>
......
packages/client/src/pages/user/reactions.vue
+ 3
− 9
View file @ 06125e68
......@@ -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>
......
packages/client/src/ui/deck/direct-column.vue
+ 3
− 3
View file @ 06125e68
......@@ -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'
})
})),
},
}
},
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment