feat: role timeline

Resolve #10581
This commit is contained in:
syuilo
2023-04-12 11:40:08 +09:00
parent 81d2c5a4a7
commit 5d56799070
21 changed files with 348 additions and 8 deletions

View File

@@ -152,6 +152,7 @@ const addColumn = async (ev) => {
'channel',
'mentions',
'direct',
'roleTimeline',
];
const { canceled, result: column } = await os.select({

View File

@@ -10,6 +10,7 @@
<XAntennaColumn v-else-if="column.type === 'antenna'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
<XMentionsColumn v-else-if="column.type === 'mentions'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
<XDirectColumn v-else-if="column.type === 'direct'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
<XRoleTimelineColumn v-else-if="column.type === 'roleTimeline'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
</template>
<script lang="ts" setup>
@@ -23,6 +24,7 @@ import XNotificationsColumn from './notifications-column.vue';
import XWidgetsColumn from './widgets-column.vue';
import XMentionsColumn from './mentions-column.vue';
import XDirectColumn from './direct-column.vue';
import XRoleTimelineColumn from './role-timeline-column.vue';
import { Column } from './deck-store';
defineProps<{

View File

@@ -22,6 +22,7 @@ export type Column = {
antennaId?: string;
listId?: string;
channelId?: string;
roleId?: string;
includingTypes?: typeof notificationTypes[number][];
tl?: 'home' | 'local' | 'social' | 'global';
};

View File

@@ -0,0 +1,67 @@
<template>
<XColumn :menu="menu" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
<template #header>
<i class="ti ti-badge"></i><span style="margin-left: 8px;">{{ column.name }}</span>
</template>
<MkTimeline v-if="column.roleId" ref="timeline" src="role" :role="column.roleId" @after="() => emit('loaded')"/>
</XColumn>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import XColumn from './column.vue';
import { updateColumn, Column } from './deck-store';
import MkTimeline from '@/components/MkTimeline.vue';
import * as os from '@/os';
import { i18n } from '@/i18n';
const props = defineProps<{
column: Column;
isStacked: boolean;
}>();
const emit = defineEmits<{
(ev: 'loaded'): void;
(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
}>();
let timeline = $shallowRef<InstanceType<typeof MkTimeline>>();
onMounted(() => {
if (props.column.roleId == null) {
setRole();
}
});
async function setRole() {
const roles = await os.api('roles/list');
const { canceled, result: role } = await os.select({
title: i18n.ts.role,
items: roles.map(x => ({
value: x, text: x.name,
})),
default: props.column.roleId,
});
if (canceled) return;
updateColumn(props.column.id, {
roleId: role.id,
});
}
const menu = [{
icon: 'ti ti-pencil',
text: i18n.ts.role,
action: setRole,
}];
/*
function focus() {
timeline.focus();
}
defineExpose({
focus,
});
*/
</script>