2020-01-30 04:37:25 +09:00
|
|
|
<template>
|
2023-01-19 08:08:26 +09:00
|
|
|
<MkStickyContainer>
|
|
|
|
<template #header>
|
|
|
|
<MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" />
|
|
|
|
</template>
|
|
|
|
<div>
|
|
|
|
<MkSpacer :content-max="800">
|
|
|
|
<swiper :modules="[Virtual]" :space-between="20" :virtual="true"
|
|
|
|
:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)" @swiper="setSwiperRef"
|
|
|
|
@slide-change="onSlideChange">
|
|
|
|
<swiper-slide>
|
|
|
|
<div class="_content yweeujhr dms">
|
|
|
|
<MkButton primary class="start" @click="startUser"><i class="ph-plus-bold ph-lg"></i> {{
|
|
|
|
i18n.ts.startMessaging
|
|
|
|
}}</MkButton>
|
2023-01-20 09:24:53 +09:00
|
|
|
<MkPagination v-slot="{ items }" ref="paginationComponentUser" :pagination="dmsPagination">
|
2023-01-20 01:07:01 +09:00
|
|
|
<MkChatPreview v-for="message in items" :key="message.id" class="yweeujhr message _block"
|
2023-01-19 08:08:26 +09:00
|
|
|
:message="message" />
|
|
|
|
</MkPagination>
|
2022-11-07 07:49:03 +09:00
|
|
|
</div>
|
2023-01-19 08:08:26 +09:00
|
|
|
</swiper-slide>
|
|
|
|
<swiper-slide>
|
|
|
|
<div class="_content yweeujhr groups">
|
|
|
|
<div class="groupsbuttons">
|
|
|
|
<MkButton primary class="start" :link="true" to="/my/groups"><i
|
|
|
|
class="ph-user-circle-gear-bold ph-lg"></i> {{ i18n.ts.manageGroups }}</MkButton>
|
|
|
|
<MkButton primary class="start" @click="startGroup"><i class="ph-plus-bold ph-lg"></i> {{
|
|
|
|
i18n.ts.startMessaging
|
|
|
|
}}</MkButton>
|
|
|
|
</div>
|
2023-01-20 09:24:53 +09:00
|
|
|
<MkPagination v-slot="{ items }" ref="paginationComponentGroup" :pagination="groupsPagination">
|
2023-01-20 01:07:01 +09:00
|
|
|
<MkChatPreview v-for="message in items" :key="message.id" class="yweeujhr message _block"
|
2023-01-19 08:08:26 +09:00
|
|
|
:message="message" />
|
|
|
|
</MkPagination>
|
|
|
|
</div>
|
|
|
|
</swiper-slide>
|
|
|
|
</swiper>
|
|
|
|
</MkSpacer>
|
|
|
|
</div>
|
|
|
|
</MkStickyContainer>
|
2020-01-30 04:37:25 +09:00
|
|
|
</template>
|
|
|
|
|
2022-06-20 17:38:49 +09:00
|
|
|
<script lang="ts" setup>
|
2023-01-20 09:29:28 +09:00
|
|
|
import { markRaw, onMounted, onUnmounted, watch, computed, onActivated } from 'vue';
|
2022-12-13 03:19:18 +09:00
|
|
|
import * as Acct from 'calckey-js/built/acct';
|
2022-11-07 05:49:37 +09:00
|
|
|
import { Virtual } from 'swiper';
|
|
|
|
import { Swiper, SwiperSlide } from 'swiper/vue';
|
2022-11-07 06:37:26 +09:00
|
|
|
import MkButton from '@/components/MkButton.vue';
|
2022-11-07 05:49:37 +09:00
|
|
|
import MkChatPreview from '@/components/MkChatPreview.vue';
|
|
|
|
import MkPagination from '@/components/MkPagination.vue';
|
2021-11-12 02:02:25 +09:00
|
|
|
import * as os from '@/os';
|
2021-12-29 22:13:09 +09:00
|
|
|
import { stream } from '@/stream';
|
2022-06-20 17:38:49 +09:00
|
|
|
import { useRouter } from '@/router';
|
|
|
|
import { i18n } from '@/i18n';
|
|
|
|
import { definePageMetadata } from '@/scripts/page-metadata';
|
|
|
|
import { $i } from '@/account';
|
2022-11-07 05:49:37 +09:00
|
|
|
import { deviceKind } from '@/scripts/device-kind';
|
|
|
|
import { defaultStore } from '@/store';
|
|
|
|
import 'swiper/scss';
|
|
|
|
import 'swiper/scss/virtual';
|
2022-06-20 17:38:49 +09:00
|
|
|
|
|
|
|
const router = useRouter();
|
|
|
|
|
2022-11-07 07:41:27 +09:00
|
|
|
let messages = $ref([]);
|
2023-01-20 09:29:23 +09:00
|
|
|
let groupMessages = $ref([]);
|
2022-11-07 07:41:27 +09:00
|
|
|
let connection = $ref(null);
|
2023-01-20 01:35:16 +09:00
|
|
|
let paginationComponentUser = $ref<InstanceType<typeof MkPagination>>();
|
|
|
|
let paginationComponentGroup = $ref<InstanceType<typeof MkPagination>>();
|
|
|
|
|
2022-11-07 06:20:28 +09:00
|
|
|
const tabs = ['dms', 'groups'];
|
|
|
|
let tab = $ref(tabs[0]);
|
|
|
|
watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
|
|
|
|
|
2022-11-15 09:24:04 +09:00
|
|
|
const headerActions = $computed(() => [{
|
|
|
|
asFullButton: true,
|
|
|
|
icon: 'ph-plus-bold ph-lg',
|
|
|
|
text: i18n.ts.addUser,
|
|
|
|
handler: startMenu,
|
|
|
|
}]);
|
2022-11-07 07:00:34 +09:00
|
|
|
|
|
|
|
const headerTabs = $computed(() => [{
|
|
|
|
key: 'dms',
|
|
|
|
title: i18n.ts._messaging.dms,
|
2022-11-07 11:49:47 +09:00
|
|
|
icon: 'ph-user-bold ph-lg',
|
2022-11-07 07:00:34 +09:00
|
|
|
}, {
|
|
|
|
key: 'groups',
|
|
|
|
title: i18n.ts._messaging.groups,
|
2022-11-08 05:29:56 +09:00
|
|
|
icon: 'ph-users-three-bold ph-lg',
|
2022-11-07 07:00:34 +09:00
|
|
|
}]);
|
|
|
|
|
|
|
|
definePageMetadata({
|
|
|
|
title: i18n.ts.messaging,
|
2022-11-07 11:49:47 +09:00
|
|
|
icon: 'ph-chats-teardrop-bold ph-lg',
|
2022-11-07 07:00:34 +09:00
|
|
|
});
|
|
|
|
|
2022-11-07 06:02:17 +09:00
|
|
|
const dmsPagination = {
|
|
|
|
endpoint: 'messaging/history' as const,
|
2023-01-19 08:29:04 +09:00
|
|
|
limit: 20,
|
|
|
|
params: computed(() => ({
|
2022-11-07 06:02:17 +09:00
|
|
|
group: false,
|
2023-01-19 08:29:04 +09:00
|
|
|
})),
|
|
|
|
offsetMode: true,
|
2022-11-07 06:02:17 +09:00
|
|
|
};
|
|
|
|
const groupsPagination = {
|
|
|
|
endpoint: 'messaging/history' as const,
|
2023-01-19 08:29:04 +09:00
|
|
|
limit: 10,
|
|
|
|
params: computed(() => ({
|
2022-11-07 06:02:17 +09:00
|
|
|
group: true,
|
2023-01-19 08:29:04 +09:00
|
|
|
})),
|
|
|
|
offsetMode: true,
|
2022-11-07 06:02:17 +09:00
|
|
|
};
|
2022-06-20 17:38:49 +09:00
|
|
|
|
2022-11-07 07:41:27 +09:00
|
|
|
function onMessage(message): void {
|
|
|
|
if (message.recipientId) {
|
|
|
|
messages = messages.filter(m => !(
|
|
|
|
(m.recipientId === message.recipientId && m.userId === message.userId) ||
|
2023-01-19 08:08:26 +09:00
|
|
|
(m.recipientId === message.userId && m.userId === message.recipientId)));
|
2022-11-07 07:41:27 +09:00
|
|
|
|
|
|
|
messages.unshift(message);
|
|
|
|
} else if (message.groupId) {
|
2023-01-20 09:29:23 +09:00
|
|
|
groupMessages = groupMessages.filter(m => m.groupId !== message.groupId);
|
|
|
|
groupMessages.unshift(message);
|
2022-11-07 07:41:27 +09:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function onRead(ids): void {
|
|
|
|
for (const id of ids) {
|
|
|
|
const found = messages.find(m => m.id === id);
|
|
|
|
if (found) {
|
|
|
|
if (found.recipientId) {
|
|
|
|
found.isRead = true;
|
|
|
|
} else if (found.groupId) {
|
|
|
|
found.reads.push($i.id);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2022-06-20 17:38:49 +09:00
|
|
|
|
2022-11-15 09:24:04 +09:00
|
|
|
function startMenu(ev) {
|
|
|
|
os.popupMenu([{
|
|
|
|
text: i18n.ts.messagingWithUser,
|
2022-12-07 13:12:44 +09:00
|
|
|
icon: 'ph-user-bold ph-lg',
|
2022-11-15 09:24:04 +09:00
|
|
|
action: () => { startUser(); },
|
|
|
|
}, {
|
|
|
|
text: i18n.ts.messagingWithGroup,
|
2022-12-07 13:12:44 +09:00
|
|
|
icon: 'ph-users-three-bold ph-lg',
|
2022-11-15 09:24:04 +09:00
|
|
|
action: () => { startGroup(); },
|
|
|
|
}], ev.currentTarget ?? ev.target);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2022-11-07 07:00:34 +09:00
|
|
|
async function startUser(): void {
|
2022-06-20 17:38:49 +09:00
|
|
|
os.selectUser().then(user => {
|
|
|
|
router.push(`/my/messaging/${Acct.toString(user)}`);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2022-11-07 07:00:34 +09:00
|
|
|
async function startGroup(): void {
|
2022-06-20 17:38:49 +09:00
|
|
|
const groups1 = await os.api('users/groups/owned');
|
|
|
|
const groups2 = await os.api('users/groups/joined');
|
|
|
|
if (groups1.length === 0 && groups2.length === 0) {
|
|
|
|
os.alert({
|
|
|
|
type: 'warning',
|
|
|
|
title: i18n.ts.youHaveNoGroups,
|
|
|
|
text: i18n.ts.joinOrCreateGroup,
|
2020-01-30 04:37:25 +09:00
|
|
|
});
|
2022-06-20 17:38:49 +09:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
const { canceled, result: group } = await os.select({
|
|
|
|
title: i18n.ts.group,
|
|
|
|
items: groups1.concat(groups2).map(group => ({
|
|
|
|
value: group, text: group.name,
|
|
|
|
})),
|
|
|
|
});
|
|
|
|
if (canceled) return;
|
|
|
|
router.push(`/my/messaging/group/${group.id}`);
|
|
|
|
}
|
|
|
|
|
2022-11-07 07:00:34 +09:00
|
|
|
let swiperRef = null;
|
|
|
|
|
|
|
|
function setSwiperRef(swiper) {
|
|
|
|
swiperRef = swiper;
|
|
|
|
syncSlide(tabs.indexOf(tab));
|
|
|
|
}
|
|
|
|
|
|
|
|
function onSlideChange() {
|
|
|
|
tab = tabs[swiperRef.activeIndex];
|
|
|
|
}
|
|
|
|
|
|
|
|
function syncSlide(index) {
|
|
|
|
swiperRef.slideTo(index);
|
|
|
|
}
|
|
|
|
|
2022-11-07 07:41:27 +09:00
|
|
|
onMounted(() => {
|
2023-01-13 04:19:12 +09:00
|
|
|
syncSlide(tabs.indexOf(swiperRef?.activeIndex));
|
2022-11-13 06:27:07 +09:00
|
|
|
|
2022-11-07 07:41:27 +09:00
|
|
|
connection = markRaw(stream.useChannel('messagingIndex'));
|
|
|
|
|
|
|
|
connection.on('message', onMessage);
|
2023-01-13 04:19:12 +09:00
|
|
|
connection.on('messagingMessage', onMessage);
|
2022-11-07 07:41:27 +09:00
|
|
|
connection.on('read', onRead);
|
|
|
|
|
|
|
|
os.api('messaging/history', { group: false, limit: 5 }).then(userMessages => {
|
|
|
|
os.api('messaging/history', { group: true, limit: 5 }).then(groupMessages => {
|
|
|
|
const _messages = userMessages.concat(groupMessages);
|
|
|
|
_messages.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
|
|
|
|
messages = _messages;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
|
if (connection) connection.dispose();
|
|
|
|
});
|
2023-01-20 09:24:53 +09:00
|
|
|
|
2023-01-20 09:29:34 +09:00
|
|
|
/*
|
2023-01-20 09:24:53 +09:00
|
|
|
onActivated(() => {
|
2023-01-20 09:29:34 +09:00
|
|
|
paginationComponentUser.reload();
|
|
|
|
paginationComponentGroup.reload();
|
|
|
|
});*/
|
2020-01-30 04:37:25 +09:00
|
|
|
</script>
|
|
|
|
|
2023-01-19 08:08:26 +09:00
|
|
|
<style lang="scss" scoped>
|
|
|
|
.yweeujhr {
|
|
|
|
>.start {
|
|
|
|
margin: 0 auto var(--margin) auto;
|
|
|
|
}
|
2022-11-07 07:49:03 +09:00
|
|
|
|
2023-01-19 08:08:26 +09:00
|
|
|
>.groupsbuttons {
|
|
|
|
max-width: 100%;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
margin-bottom: 1rem;
|
2020-01-30 04:37:25 +09:00
|
|
|
}
|
2023-01-19 08:08:26 +09:00
|
|
|
}
|
|
|
|
</style>
|