enhance(frontend): improve MkTl rendering
This commit is contained in:
parent
dfbc40f868
commit
012b2a9764
|
@ -32,9 +32,12 @@ export type TlEvent<E = any> = {
|
|||
<script lang="ts" setup generic="T extends unknown">
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps<{
|
||||
const props = withDefaults(defineProps<{
|
||||
events: TlEvent<T>[];
|
||||
}>();
|
||||
groupBy?: 'd' | 'h';
|
||||
}>(), {
|
||||
groupBy: 'd',
|
||||
});
|
||||
|
||||
const events = computed(() => {
|
||||
return props.events.toSorted((a, b) => b.timestamp - a.timestamp);
|
||||
|
@ -65,6 +68,7 @@ type TlItem<T> = ({
|
|||
|
||||
const items = computed<TlItem<T>[]>(() => {
|
||||
const results: TlItem<T>[] = [];
|
||||
|
||||
for (let i = 0; i < events.value.length; i++) {
|
||||
const item = events.value[i];
|
||||
|
||||
|
@ -79,25 +83,37 @@ const items = computed<TlItem<T>[]>(() => {
|
|||
data: item.data,
|
||||
});
|
||||
|
||||
if (
|
||||
i !== events.value.length - 1 &&
|
||||
nextDate != null && (
|
||||
date.getFullYear() !== nextDate.getFullYear() ||
|
||||
if (i !== events.value.length - 1 && nextDate != null) {
|
||||
let needsSeparator = false;
|
||||
|
||||
if (props.groupBy === 'd') {
|
||||
needsSeparator = (
|
||||
date.getFullYear() !== nextDate.getFullYear() ||
|
||||
date.getMonth() !== nextDate.getMonth() ||
|
||||
date.getDate() !== nextDate.getDate()
|
||||
);
|
||||
} else if (props.groupBy === 'h') {
|
||||
needsSeparator = (
|
||||
date.getFullYear() !== nextDate.getFullYear() ||
|
||||
date.getMonth() !== nextDate.getMonth() ||
|
||||
date.getDate() !== nextDate.getDate() ||
|
||||
date.getHours() !== nextDate.getHours()
|
||||
)
|
||||
) {
|
||||
results.push({
|
||||
id: `date-${item.id}`,
|
||||
type: 'date',
|
||||
prev: date,
|
||||
prevText: getDateText(date),
|
||||
next: nextDate,
|
||||
nextText: getDateText(nextDate),
|
||||
});
|
||||
);
|
||||
}
|
||||
|
||||
if (needsSeparator) {
|
||||
results.push({
|
||||
id: `date-${item.id}`,
|
||||
type: 'date',
|
||||
prev: date,
|
||||
prevText: getDateText(date),
|
||||
next: nextDate,
|
||||
nextText: getDateText(nextDate),
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return results;
|
||||
});
|
||||
</script>
|
||||
|
|
|
@ -107,7 +107,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</MkFolder>
|
||||
</div>
|
||||
<div v-else-if="tab === 'timeline'">
|
||||
<MkTl :events="timeline">
|
||||
<MkTl :events="timeline" groupBy="h">
|
||||
<template #left="{ event }">
|
||||
<div>
|
||||
<template v-if="event.type === 'finished'">
|
||||
|
@ -162,6 +162,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
import { ref, computed } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import JSON5 from 'json5';
|
||||
import type { TlEvent } from '@/components/MkTl.vue';
|
||||
import * as os from '@/os.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
|
@ -172,7 +173,6 @@ import MkKeyValue from '@/components/MkKeyValue.vue';
|
|||
import MkCodeEditor from '@/components/MkCodeEditor.vue';
|
||||
import MkTl from '@/components/MkTl.vue';
|
||||
import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
|
||||
import type { TlEvent } from '@/components/MkTl.vue';
|
||||
|
||||
function msSMH(v: number | null) {
|
||||
if (v == null) return 'N/A';
|
||||
|
|
|
@ -157,6 +157,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
timestamp: job.finishedOn ?? job.processedOn ?? job.timestamp,
|
||||
data: job,
|
||||
}))"
|
||||
groupBy="h"
|
||||
class="_monospace"
|
||||
>
|
||||
<template #right="{ event: job }">
|
||||
|
|
|
@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</MkInput>
|
||||
</div>
|
||||
|
||||
<MkTl :events="timeline">
|
||||
<MkTl :events="timeline" groupBy="d">
|
||||
<template #left="{ event }">
|
||||
<div>
|
||||
<MkAvatar :user="event.user" style="width: 26px; height: 26px;"/>
|
||||
|
|
Loading…
Reference in New Issue