forked from FoundKeyGang/FoundKey
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…
Reference in a new issue