graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-27 05:03:07 +02:00
Code Issues Projects Releases Packages Wiki Activity

wip: migrate paging components to composition api

Browse source
This commit is contained in:
syuilo 2022-01-10 00:45:20 +09:00
parent d3315bda11
commit f9882a0c5c
4 changed files with 52 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/client/src/components/notes.vue
View file

@ -32,8 +32,7 @@ const props = defineProps<{
const pagingComponent = ref<InstanceType<typeof MkPagination>>();
const updated = (oldValue, newValue) => {
const i = pagingComponent.value.items.findIndex(n => n === oldValue);
pagingComponent.value.items[i] = newValue;
pagingComponent.value?.updateItem(oldValue.id, () => newValue);
};
defineExpose({

13
packages/client/src/components/notifications.vue
View file

@ -9,7 +9,7 @@
<template #default="{ items: notifications }">
<XList v-slot="{ item: notification }" class="elsfgstc" :items="notifications" :no-gap="true">
<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note" @update:note="noteUpdated(notification.note, $event)"/>
<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note" @update:note="noteUpdated(notification, $event)"/>
<XNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="true" class="_panel notification"/>
</XList>
</template>
@ -62,12 +62,11 @@ const onNotification = (notification) => {
}
};
const noteUpdated = (oldValue, newValue) => {
const i = pagingComponent.value.items.findIndex(n => n.note === oldValue);
pagingComponent.value.items[i] = {
...pagingComponent.value.items[i],
note: newValue,
};
const noteUpdated = (item, note) => {
pagingComponent.value?.updateItem(item.id, old => ({
...old,
note: note,
}));
};
onMounted(() => {

13
packages/client/src/components/ui/pagination.vue
View file

@ -205,7 +205,6 @@ const prepend = (item) => {
// TODO
} else {
const isTop = isBackTop.value || (document.body.contains(rootEl.value) && isTopVisible(rootEl.value));
console.log(item, top);
if (isTop) {
// Prepend the item
@ -236,7 +235,15 @@ const append = (item) => {
items.value.push(item);
};
watch(props.pagination.params, init, { deep: true });
const updateItem = (id, replacer: (item: any) => any): void => {
const i = items.value.findIndex(item => item.id === id);
items.value[i] = replacer(items.value[i]);
};
if (props.pagination.params && isRef(props.pagination.params)) {
watch(props.pagination.params, init, { deep: true });
}
watch(queue, (a, b) => {
if (a.length === 0 && b.length === 0) return;
emit('queue', queue.value.length);
@ -253,11 +260,11 @@ onDeactivated(() => {
});
defineExpose({
items,
reload,
fetchMoreAhead,
prepend,
append,
updateItem,
});
</script>

40
packages/client/src/pages/favorites.vue
View file

@ -1,19 +1,42 @@
<template>
<MkSpacer :content-max="800">
<XNotes :pagination="pagination" :detail="true" :prop="'note'"/>
<MkPagination ref="pagingComponent" :pagination="pagination">
<template #empty>
<div class="_fullinfo">
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
<div>{{ $ts.noNotes }}</div>
</div>
</template>
<template #default="{ items }">
<XList v-slot="{ item }" :items="items" :direction="'down'" :no-gap="false" :ad="false">
<XNote :key="item.id" :note="item.note" :class="$style.note" @update:note="noteUpdated(item, $event)"/>
</XList>
</template>
</MkPagination>
</MkSpacer>
</template>
<script lang="ts" setup>
import XNotes from '@/components/notes.vue';
import { ref } from 'vue';
import MkPagination from '@/components/ui/pagination.vue';
import XNote from '@/components/note.vue';
import XList from '@/components/date-separated-list.vue';
import * as symbols from '@/symbols';
import { i18n } from '@/i18n';
const pagination = {
endpoint: 'i/favorites',
endpoint: 'i/favorites' as const,
limit: 10,
params: () => ({
}),
};
const pagingComponent = ref<InstanceType<typeof MkPagination>>();
const noteUpdated = (item, note) => {
pagingComponent.value?.updateItem(item.id, old => ({
...old,
note: note,
}));
};
defineExpose({
@ -24,3 +47,10 @@ defineExpose({
},
});
</script>
<style lang="scss" module>
.note {
background: var(--panel);
border-radius: var(--radius);
}
</style>