mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-24 17:23:50 +02:00
rewrite feed table
This commit is contained in:
pa
Natsumi
@@ -1,339 +1,148 @@
|
||||
<template>
|
||||
<div class="x-container feed" ref="feedRef">
|
||||
<div style="margin: 0 0 10px; display: flex; align-items: center">
|
||||
<div style="flex: none; margin-right: 10px; display: flex; align-items: center">
|
||||
<el-tooltip placement="bottom" :content="t('view.feed.favorites_only_tooltip')">
|
||||
<el-switch
|
||||
v-model="feedTable.vip"
|
||||
active-color="var(--el-color-success)"
|
||||
@change="feedTableLookup"></el-switch>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<el-select
|
||||
v-model="feedTable.filter"
|
||||
multiple
|
||||
clearable
|
||||
style="flex: 1"
|
||||
:placeholder="t('view.feed.filter_placeholder')"
|
||||
@change="feedTableLookup">
|
||||
<el-option
|
||||
v-for="type in ['GPS', 'Online', 'Offline', 'Status', 'Avatar', 'Bio']"
|
||||
:key="type"
|
||||
:label="t('view.feed.filters.' + type)"
|
||||
:value="type"></el-option>
|
||||
</el-select>
|
||||
<el-input
|
||||
v-model="feedTable.search"
|
||||
:placeholder="t('view.feed.search_placeholder')"
|
||||
clearable
|
||||
style="flex: 0.4; margin-left: 10px"
|
||||
@keyup.enter="feedTableLookup"
|
||||
@change="feedTableLookup"></el-input>
|
||||
</div>
|
||||
|
||||
<DataTable v-bind="feedTable" :data="feedDisplayData">
|
||||
<el-table-column type="expand" width="30">
|
||||
<template #default="scope">
|
||||
<div style="position: relative; font-size: 14px" class="pl-5">
|
||||
<template v-if="scope.row.type === 'GPS'">
|
||||
<Location
|
||||
v-if="scope.row.previousLocation"
|
||||
:location="scope.row.previousLocation"
|
||||
style="display: inline-block" />
|
||||
<el-tag type="info" effect="plain" size="small" style="margin-left: 5px">{{
|
||||
timeToText(scope.row.time)
|
||||
}}</el-tag>
|
||||
<br />
|
||||
<span style="margin-right: 5px"> ↓ </span>
|
||||
<Location
|
||||
v-if="scope.row.location"
|
||||
:location="scope.row.location"
|
||||
:hint="scope.row.worldName"
|
||||
:grouphint="scope.row.groupName" />
|
||||
</template>
|
||||
<template v-else-if="scope.row.type === 'Offline'">
|
||||
<template v-if="scope.row.location">
|
||||
<Location
|
||||
:location="scope.row.location"
|
||||
:hint="scope.row.worldName"
|
||||
:grouphint="scope.row.groupName" />
|
||||
<el-tag type="info" effect="plain" size="small" style="margin-left: 5px">{{
|
||||
timeToText(scope.row.time)
|
||||
}}</el-tag>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="scope.row.type === 'Online'">
|
||||
<Location
|
||||
v-if="scope.row.location"
|
||||
:location="scope.row.location"
|
||||
:hint="scope.row.worldName"
|
||||
:grouphint="scope.row.groupName" />
|
||||
</template>
|
||||
<template v-else-if="scope.row.type === 'Avatar'">
|
||||
<div style="display: flex; align-items: center">
|
||||
<div style="display: inline-block; vertical-align: top; width: 160px">
|
||||
<template v-if="scope.row.previousCurrentAvatarThumbnailImageUrl">
|
||||
<img
|
||||
:src="scope.row.previousCurrentAvatarThumbnailImageUrl"
|
||||
class="x-link"
|
||||
style="flex: none; width: 160px; height: 120px; border-radius: 4px"
|
||||
loading="lazy" />
|
||||
<br />
|
||||
<AvatarInfo
|
||||
:imageurl="scope.row.previousCurrentAvatarThumbnailImageUrl"
|
||||
:userid="scope.row.userId"
|
||||
:hintownerid="scope.row.previousOwnerId"
|
||||
:hintavatarname="scope.row.previousAvatarName"
|
||||
:avatartags="scope.row.previousCurrentAvatarTags" />
|
||||
</template>
|
||||
</div>
|
||||
<span style="position: relative; margin: 0 10px">
|
||||
{{ ' → ' }}
|
||||
</span>
|
||||
|
||||
<div style="display: inline-block; vertical-align: top; width: 160px">
|
||||
<template v-if="scope.row.currentAvatarThumbnailImageUrl">
|
||||
<img
|
||||
:src="scope.row.currentAvatarThumbnailImageUrl"
|
||||
class="x-link"
|
||||
style="flex: none; width: 160px; height: 120px; border-radius: 4px"
|
||||
loading="lazy" />
|
||||
<br />
|
||||
<AvatarInfo
|
||||
:imageurl="scope.row.currentAvatarThumbnailImageUrl"
|
||||
:userid="scope.row.userId"
|
||||
:hintownerid="scope.row.ownerId"
|
||||
:hintavatarname="scope.row.avatarName"
|
||||
:avatartags="scope.row.currentAvatarTags" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="scope.row.type === 'Status'">
|
||||
<i class="x-user-status" :class="statusClass(scope.row.previousStatus)"></i>
|
||||
<span style="margin-left: 5px" v-text="scope.row.previousStatusDescription"></span>
|
||||
<br />
|
||||
<span> → </span>
|
||||
|
||||
<i class="x-user-status" :class="statusClass(scope.row.status)" style="margin: 0 5px"></i>
|
||||
<span v-text="scope.row.statusDescription"></span>
|
||||
</template>
|
||||
<template v-else-if="scope.row.type === 'Bio'">
|
||||
<pre
|
||||
style="font-family: inherit; font-size: 12px; white-space: pre-wrap; line-height: 22px"
|
||||
v-html="formatDifference(scope.row.previousBio, scope.row.bio)"></pre>
|
||||
</template>
|
||||
<DataTableLayout
|
||||
:table="table"
|
||||
:loading="feedTable.loading"
|
||||
:table-style="tableHeightStyle"
|
||||
:page-sizes="pageSizes"
|
||||
:total-items="totalItems"
|
||||
:on-page-size-change="handlePageSizeChange">
|
||||
<template #toolbar>
|
||||
<div style="margin: 0 0 10px; display: flex; align-items: center">
|
||||
<div style="flex: none; margin-right: 10px; display: flex; align-items: center">
|
||||
<el-tooltip placement="bottom" :content="t('view.feed.favorites_only_tooltip')">
|
||||
<el-switch
|
||||
v-model="feedTable.vip"
|
||||
active-color="var(--el-color-success)"
|
||||
@change="feedTableLookup"></el-switch>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column :label="t('table.feed.date')" prop="created_at" width="140">
|
||||
<template #default="scope">
|
||||
<el-tooltip placement="right">
|
||||
<template #content>
|
||||
<span>{{ formatDateFilter(scope.row.created_at, 'long') }}</span>
|
||||
</template>
|
||||
<span>{{ formatDateFilter(scope.row.created_at, 'short') }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column :label="t('table.feed.type')" prop="type" width="130">
|
||||
<template #default="scope">
|
||||
<el-tag type="info" effect="plain" size="small">{{
|
||||
t('view.feed.filters.' + scope.row.type)
|
||||
}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column :label="t('table.feed.user')" prop="displayName" width="190">
|
||||
<template #default="scope">
|
||||
<span
|
||||
class="x-link table-user"
|
||||
style="padding-right: 10px"
|
||||
@click="showUserDialog(scope.row.userId)"
|
||||
v-text="scope.row.displayName"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column :label="t('table.feed.detail')">
|
||||
<template #default="scope">
|
||||
<template v-if="scope.row.type === 'GPS'">
|
||||
<Location
|
||||
v-if="scope.row.location"
|
||||
:location="scope.row.location"
|
||||
:hint="scope.row.worldName"
|
||||
:grouphint="scope.row.groupName" />
|
||||
</template>
|
||||
<template v-else-if="scope.row.type === 'Offline' || scope.row.type === 'Online'">
|
||||
<Location
|
||||
v-if="scope.row.location"
|
||||
:location="scope.row.location"
|
||||
:hint="scope.row.worldName"
|
||||
:grouphint="scope.row.groupName" />
|
||||
</template>
|
||||
<template v-else-if="scope.row.type === 'Status'">
|
||||
<template v-if="scope.row.statusDescription === scope.row.previousStatusDescription">
|
||||
<i class="x-user-status" :class="statusClass(scope.row.previousStatus)"></i>
|
||||
<span class="mx-2"> → </span>
|
||||
|
||||
<i class="x-user-status" :class="statusClass(scope.row.status)"></i>
|
||||
</template>
|
||||
<template v-else>
|
||||
<i class="x-user-status mr-2" :class="statusClass(scope.row.status)"></i>
|
||||
<span v-text="scope.row.statusDescription"></span>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="scope.row.type === 'Avatar'">
|
||||
<AvatarInfo
|
||||
:imageurl="scope.row.currentAvatarImageUrl"
|
||||
:userid="scope.row.userId"
|
||||
:hintownerid="scope.row.ownerId"
|
||||
:hintavatarname="scope.row.avatarName"
|
||||
:avatartags="scope.row.currentAvatarTags" />
|
||||
</template>
|
||||
<template v-else-if="scope.row.type === 'Bio'">
|
||||
<span v-text="scope.row.bio"></span>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</DataTable>
|
||||
<el-select
|
||||
v-model="feedTable.filter"
|
||||
multiple
|
||||
clearable
|
||||
style="flex: 1"
|
||||
:placeholder="t('view.feed.filter_placeholder')"
|
||||
@change="feedTableLookup">
|
||||
<el-option
|
||||
v-for="type in ['GPS', 'Online', 'Offline', 'Status', 'Avatar', 'Bio']"
|
||||
:key="type"
|
||||
:label="t('view.feed.filters.' + type)"
|
||||
:value="type"></el-option>
|
||||
</el-select>
|
||||
<el-input
|
||||
v-model="feedTable.search"
|
||||
:placeholder="t('view.feed.search_placeholder')"
|
||||
clearable
|
||||
style="flex: 0.4; margin-left: 10px"
|
||||
@keyup.enter="feedTableLookup"
|
||||
@change="feedTableLookup"></el-input>
|
||||
</div>
|
||||
</template>
|
||||
</DataTableLayout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import {
|
||||
getCoreRowModel,
|
||||
getExpandedRowModel,
|
||||
getFilteredRowModel,
|
||||
getPaginationRowModel,
|
||||
getSortedRowModel,
|
||||
useVueTable
|
||||
} from '@tanstack/vue-table';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { formatDateFilter, statusClass, timeToText } from '../../shared/utils';
|
||||
import { useFeedStore, useUserStore } from '../../stores';
|
||||
import { useTableHeight } from '../../composables/useTableHeight';
|
||||
import { useAppearanceSettingsStore, useFeedStore, useVrcxStore } from '../../stores';
|
||||
import { DataTableLayout } from '../../components/ui/data-table';
|
||||
import { columns as baseColumns } from './columns.jsx';
|
||||
import { useDataTableScrollHeight } from '../../composables/useDataTableScrollHeight';
|
||||
import { valueUpdater } from '../../components/ui/table/utils';
|
||||
|
||||
const { showUserDialog } = useUserStore();
|
||||
const { feedTable } = storeToRefs(useFeedStore());
|
||||
const { feedTableLookup } = useFeedStore();
|
||||
const appearanceSettingsStore = useAppearanceSettingsStore();
|
||||
const vrcxStore = useVrcxStore();
|
||||
|
||||
const feedDisplayData = computed(() => feedTable.value.data.slice().reverse());
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const { containerRef: feedRef } = useTableHeight(feedTable);
|
||||
const feedRef = ref(null);
|
||||
|
||||
/**
|
||||
* Function that format the differences between two strings with HTML tags
|
||||
* markerStartTag and markerEndTag are optional, if emitted, the differences will be highlighted with yellow and underlined.
|
||||
* @param {*} s1
|
||||
* @param {*} s2
|
||||
* @param {*} markerStartTag
|
||||
* @param {*} markerEndTag
|
||||
* @returns An array that contains both the string 1 and string 2, which the differences are formatted with HTML tags
|
||||
*/
|
||||
// TODO: simplify
|
||||
const { tableStyle: tableHeightStyle } = useDataTableScrollHeight(feedRef, {
|
||||
offset: 30,
|
||||
toolbarHeight: 54,
|
||||
paginationHeight: 52
|
||||
});
|
||||
|
||||
//function getWordDifferences
|
||||
function formatDifference(
|
||||
oldString,
|
||||
newString,
|
||||
markerAddition = '<span class="x-text-added">{{text}}</span>',
|
||||
markerDeletion = '<span class="x-text-removed">{{text}}</span>'
|
||||
) {
|
||||
[oldString, newString] = [oldString, newString].map((s) =>
|
||||
s
|
||||
.replaceAll(/&/g, '&')
|
||||
.replaceAll(/</g, '<')
|
||||
.replaceAll(/>/g, '>')
|
||||
.replaceAll(/"/g, '"')
|
||||
.replaceAll(/'/g, ''')
|
||||
.replaceAll(/\n/g, '<br>')
|
||||
);
|
||||
const pageSizes = computed(() => appearanceSettingsStore.tablePageSizes);
|
||||
const pageSize = computed(() =>
|
||||
feedTable.value.pageSizeLinked ? appearanceSettingsStore.tablePageSize : feedTable.value.pageSize
|
||||
);
|
||||
|
||||
const oldWords = oldString.split(/\s+/).flatMap((word) => word.split(/(<br>)/));
|
||||
const newWords = newString.split(/\s+/).flatMap((word) => word.split(/(<br>)/));
|
||||
const sorting = ref([]);
|
||||
const expanded = ref({});
|
||||
const pagination = ref({
|
||||
pageIndex: 0,
|
||||
pageSize: pageSize.value
|
||||
});
|
||||
|
||||
function findLongestMatch(oldStart, oldEnd, newStart, newEnd) {
|
||||
let bestOldStart = oldStart;
|
||||
let bestNewStart = newStart;
|
||||
let bestSize = 0;
|
||||
|
||||
const lookup = new Map();
|
||||
for (let i = oldStart; i < oldEnd; i++) {
|
||||
const word = oldWords[i];
|
||||
if (!lookup.has(word)) lookup.set(word, []);
|
||||
lookup.get(word).push(i);
|
||||
const table = useVueTable({
|
||||
data: feedDisplayData,
|
||||
columns: baseColumns,
|
||||
getRowId: (row) => `${row.type}:${row.rowId ?? row.uid}:${row.created_at ?? ''}`,
|
||||
getRowCanExpand: () => true,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
getFilteredRowModel: getFilteredRowModel(),
|
||||
getExpandedRowModel: getExpandedRowModel(),
|
||||
onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sorting),
|
||||
onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, pagination),
|
||||
onExpandedChange: (updaterOrValue) => valueUpdater(updaterOrValue, expanded),
|
||||
state: {
|
||||
get sorting() {
|
||||
return sorting.value;
|
||||
},
|
||||
get pagination() {
|
||||
return pagination.value;
|
||||
},
|
||||
get expanded() {
|
||||
return expanded.value;
|
||||
}
|
||||
|
||||
for (let j = newStart; j < newEnd; j++) {
|
||||
const word = newWords[j];
|
||||
if (!lookup.has(word)) continue;
|
||||
|
||||
for (const i of lookup.get(word)) {
|
||||
let size = 0;
|
||||
while (i + size < oldEnd && j + size < newEnd && oldWords[i + size] === newWords[j + size]) {
|
||||
size++;
|
||||
}
|
||||
if (size > bestSize) {
|
||||
bestOldStart = i;
|
||||
bestNewStart = j;
|
||||
bestSize = size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
oldStart: bestOldStart,
|
||||
newStart: bestNewStart,
|
||||
size: bestSize
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
function buildDiff(oldStart, oldEnd, newStart, newEnd) {
|
||||
const result = [];
|
||||
const match = findLongestMatch(oldStart, oldEnd, newStart, newEnd);
|
||||
const totalItems = computed(() => {
|
||||
const length = table.getFilteredRowModel().rows.length;
|
||||
const max = vrcxStore.maxTableSize;
|
||||
return length > max && length < max + 51 ? max : length;
|
||||
});
|
||||
|
||||
if (match.size > 0) {
|
||||
// Handle differences before the match
|
||||
if (oldStart < match.oldStart || newStart < match.newStart) {
|
||||
result.push(...buildDiff(oldStart, match.oldStart, newStart, match.newStart));
|
||||
}
|
||||
|
||||
// Add the matched words
|
||||
result.push(oldWords.slice(match.oldStart, match.oldStart + match.size).join(' '));
|
||||
|
||||
// Handle differences after the match
|
||||
if (match.oldStart + match.size < oldEnd || match.newStart + match.size < newEnd) {
|
||||
result.push(...buildDiff(match.oldStart + match.size, oldEnd, match.newStart + match.size, newEnd));
|
||||
}
|
||||
} else {
|
||||
function build(words, start, end, pattern) {
|
||||
let r = [];
|
||||
let ts = words
|
||||
.slice(start, end)
|
||||
.filter((w) => w.length > 0)
|
||||
.join(' ')
|
||||
.split('<br>');
|
||||
for (let i = 0; i < ts.length; i++) {
|
||||
if (i > 0) r.push('<br>');
|
||||
if (ts[i].length < 1) continue;
|
||||
r.push(pattern.replace('{{text}}', ts[i]));
|
||||
}
|
||||
return r;
|
||||
}
|
||||
|
||||
// Add deletions
|
||||
if (oldStart < oldEnd) result.push(...build(oldWords, oldStart, oldEnd, markerDeletion));
|
||||
|
||||
// Add insertions
|
||||
if (newStart < newEnd) result.push(...build(newWords, newStart, newEnd, markerAddition));
|
||||
}
|
||||
|
||||
return result;
|
||||
const handlePageSizeChange = (size) => {
|
||||
if (feedTable.value.pageSizeLinked) {
|
||||
appearanceSettingsStore.setTablePageSize(size);
|
||||
} else {
|
||||
feedTable.value.pageSize = size;
|
||||
}
|
||||
};
|
||||
|
||||
return buildDiff(0, oldWords.length, 0, newWords.length)
|
||||
.join(' ')
|
||||
.replace(/<br>[ ]+<br>/g, '<br><br>')
|
||||
.replace(/<br> /g, '<br>');
|
||||
}
|
||||
watch(pageSize, (size) => {
|
||||
if (pagination.value.pageSize === size) {
|
||||
return;
|
||||
}
|
||||
pagination.value = {
|
||||
...pagination.value,
|
||||
pageIndex: 0,
|
||||
pageSize: size
|
||||
};
|
||||
table.setPageSize(size);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -1,22 +1,231 @@
|
||||
import { ElTag } from 'element-plus';
|
||||
import { resolveComponent } from 'vue';
|
||||
|
||||
import AvatarInfo from '../../components/AvatarInfo.vue';
|
||||
import Location from '../../components/Location.vue';
|
||||
import { Badge } from '../../components/ui/badge';
|
||||
import { Button } from '../../components/ui/button';
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger
|
||||
} from '../../components/ui/tooltip';
|
||||
import { formatDateFilter, statusClass } from '../../shared/utils';
|
||||
import {
|
||||
ArrowDown,
|
||||
ArrowRight,
|
||||
ArrowUpDown,
|
||||
ChevronDown,
|
||||
ChevronRight
|
||||
} from 'lucide-vue-next';
|
||||
import { formatDateFilter, statusClass, timeToText } from '../../shared/utils';
|
||||
import { i18n } from '../../plugin';
|
||||
import { useUserStore } from '../../stores';
|
||||
|
||||
const { t } = i18n.global;
|
||||
|
||||
const expandedRow = ({ row }) => {
|
||||
const original = row.original;
|
||||
const type = original.type;
|
||||
if (type === 'GPS') {
|
||||
return (
|
||||
<div class="pl-5 text-sm">
|
||||
{original.previousLocation ? (
|
||||
<>
|
||||
<Location
|
||||
location={original.previousLocation}
|
||||
class="inline-block"
|
||||
/>
|
||||
<Badge variant="secondary" class="ml-1 w-fit">
|
||||
{timeToText(original.time)}
|
||||
</Badge>
|
||||
<br />
|
||||
<span>
|
||||
<ArrowDown />
|
||||
</span>
|
||||
</>
|
||||
) : null}
|
||||
{original.location ? (
|
||||
<Location
|
||||
location={original.location}
|
||||
hint={original.worldName}
|
||||
grouphint={original.groupName}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === 'Offline') {
|
||||
return original.location ? (
|
||||
<div class="pl-5 text-sm">
|
||||
<Location
|
||||
location={original.location}
|
||||
hint={original.worldName}
|
||||
grouphint={original.groupName}
|
||||
/>
|
||||
<Badge variant="secondary" class="ml-1 w-fit">
|
||||
{timeToText(original.time)}
|
||||
</Badge>
|
||||
</div>
|
||||
) : null;
|
||||
}
|
||||
|
||||
if (type === 'Online') {
|
||||
return original.location ? (
|
||||
<div class="pl-5 text-sm">
|
||||
<Location
|
||||
location={original.location}
|
||||
hint={original.worldName}
|
||||
grouphint={original.groupName}
|
||||
/>
|
||||
</div>
|
||||
) : null;
|
||||
}
|
||||
|
||||
if (type === 'Avatar') {
|
||||
return (
|
||||
<div class="pl-5 text-sm">
|
||||
<div class="flex items-center">
|
||||
<div class="inline-block align-top w-[160px]">
|
||||
{original.previousCurrentAvatarThumbnailImageUrl ? (
|
||||
<>
|
||||
<img
|
||||
src={
|
||||
original.previousCurrentAvatarThumbnailImageUrl
|
||||
}
|
||||
class="x-link h-[120px] w-[160px] rounded"
|
||||
loading="lazy"
|
||||
/>
|
||||
<br />
|
||||
<AvatarInfo
|
||||
imageurl={
|
||||
original.previousCurrentAvatarThumbnailImageUrl
|
||||
}
|
||||
userid={original.userId}
|
||||
hintownerid={original.previousOwnerId}
|
||||
hintavatarname={original.previousAvatarName}
|
||||
avatartags={
|
||||
original.previousCurrentAvatarTags
|
||||
}
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
<span class="mx-2">
|
||||
<ArrowRight />
|
||||
</span>
|
||||
<div class="inline-block align-top w-40">
|
||||
{original.currentAvatarThumbnailImageUrl ? (
|
||||
<>
|
||||
<img
|
||||
src={
|
||||
original.currentAvatarThumbnailImageUrl
|
||||
}
|
||||
class="x-link h-30 w-40 rounded"
|
||||
loading="lazy"
|
||||
/>
|
||||
<br />
|
||||
<AvatarInfo
|
||||
imageurl={
|
||||
original.currentAvatarThumbnailImageUrl
|
||||
}
|
||||
userid={original.userId}
|
||||
hintownerid={original.ownerId}
|
||||
hintavatarname={original.avatarName}
|
||||
avatartags={original.currentAvatarTags}
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === 'Status') {
|
||||
return (
|
||||
<div class="flex items-center pl-5 text-sm">
|
||||
<i
|
||||
class={[
|
||||
'x-user-status',
|
||||
statusClass(original.previousStatus)
|
||||
]}
|
||||
></i>
|
||||
<span class="ml-1">{original.previousStatusDescription}</span>
|
||||
<br />
|
||||
<span class="mx-2">
|
||||
<ArrowRight />
|
||||
</span>
|
||||
<i
|
||||
class={[
|
||||
'x-user-status',
|
||||
statusClass(original.status),
|
||||
'mx-1'
|
||||
]}
|
||||
></i>
|
||||
<span>{original.statusDescription}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === 'Bio') {
|
||||
return (
|
||||
<div class="pl-5 text-sm">
|
||||
<pre
|
||||
class="text-xs leading-5.5 whitespace-pre-wrap font-[inherit]"
|
||||
innerHTML={formatDifference(
|
||||
original.previousBio,
|
||||
original.bio
|
||||
)}
|
||||
></pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export const columns = [
|
||||
{
|
||||
id: 'expander',
|
||||
header: () => null,
|
||||
enableSorting: false,
|
||||
meta: {
|
||||
class: 'w-[20px]',
|
||||
expandedRow
|
||||
},
|
||||
cell: ({ row }) => {
|
||||
if (!row.getCanExpand()) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex h-6 items-center justify-center text-xs text-muted-foreground hover:text-foreground"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
row.toggleExpanded();
|
||||
}}
|
||||
>
|
||||
{row.getIsExpanded() ? <ChevronDown /> : <ChevronRight />}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: 'created_at',
|
||||
header: () => t('table.feed.date'),
|
||||
meta: {
|
||||
class: 'w-[140px]'
|
||||
},
|
||||
header: ({ column }) => (
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() =>
|
||||
column.toggleSorting(column.getIsSorted() === 'asc')
|
||||
}
|
||||
>
|
||||
{t('table.feed.date')}
|
||||
<ArrowUpDown class="ml-1 h-4 w-4" />
|
||||
</Button>
|
||||
),
|
||||
cell: ({ row }) => {
|
||||
const createdAt = row.getValue('created_at');
|
||||
const shortText = formatDateFilter(createdAt, 'short');
|
||||
@@ -38,26 +247,33 @@ export const columns = [
|
||||
},
|
||||
{
|
||||
accessorKey: 'type',
|
||||
meta: {
|
||||
class: 'w-[130px]'
|
||||
},
|
||||
header: () => t('table.feed.type'),
|
||||
cell: ({ row }) => {
|
||||
const type = row.getValue('type');
|
||||
return (
|
||||
<ElTag type="info" effect="plain" size="small">
|
||||
{t(`view.feed.filters.${type}`)}
|
||||
</ElTag>
|
||||
<div>
|
||||
<Badge variant="outline" class="text-muted-foreground">
|
||||
{t(`view.feed.filters.${type}`)}
|
||||
</Badge>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: 'displayName',
|
||||
meta: {
|
||||
class: 'w-[190px]'
|
||||
},
|
||||
header: () => t('table.feed.user'),
|
||||
cell: ({ row }) => {
|
||||
const { showUserDialog } = useUserStore();
|
||||
const original = row.original;
|
||||
return (
|
||||
<span
|
||||
class="x-link table-user"
|
||||
style="padding-right: 10px"
|
||||
class="x-link pr-2.5"
|
||||
onClick={() => showUserDialog(original.userId)}
|
||||
>
|
||||
{original.displayName}
|
||||
@@ -68,12 +284,10 @@ export const columns = [
|
||||
{
|
||||
id: 'detail',
|
||||
header: () => t('table.feed.detail'),
|
||||
enableSorting: false,
|
||||
cell: ({ row }) => {
|
||||
const original = row.original;
|
||||
const type = original.type;
|
||||
const Location = resolveComponent('Location');
|
||||
const AvatarInfo = resolveComponent('AvatarInfo');
|
||||
|
||||
if (type === 'GPS') {
|
||||
return original.location ? (
|
||||
<Location
|
||||
@@ -100,21 +314,23 @@ export const columns = [
|
||||
original.previousStatusDescription
|
||||
) {
|
||||
return (
|
||||
<span>
|
||||
<div class="flex items-center">
|
||||
<i
|
||||
class={[
|
||||
'x-user-status',
|
||||
statusClass(original.previousStatus)
|
||||
]}
|
||||
></i>
|
||||
<span class="mx-2"> Ўъ </span>
|
||||
<span class="mx-2">
|
||||
<ArrowRight />
|
||||
</span>
|
||||
<i
|
||||
class={[
|
||||
'x-user-status',
|
||||
statusClass(original.status)
|
||||
]}
|
||||
></i>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -152,3 +368,136 @@ export const columns = [
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
function formatDifference(
|
||||
oldString,
|
||||
newString,
|
||||
markerAddition = '<span class="x-text-added">{{text}}</span>',
|
||||
markerDeletion = '<span class="x-text-removed">{{text}}</span>'
|
||||
) {
|
||||
[oldString, newString] = [oldString, newString].map((s) =>
|
||||
s
|
||||
.replaceAll(/&/g, '&')
|
||||
.replaceAll(/</g, '<')
|
||||
.replaceAll(/>/g, '>')
|
||||
.replaceAll(/"/g, '"')
|
||||
.replaceAll(/'/g, ''')
|
||||
.replaceAll(/\n/g, '<br>')
|
||||
);
|
||||
|
||||
const oldWords = oldString
|
||||
.split(/\s+/)
|
||||
.flatMap((word) => word.split(/(<br>)/));
|
||||
const newWords = newString
|
||||
.split(/\s+/)
|
||||
.flatMap((word) => word.split(/(<br>)/));
|
||||
|
||||
function findLongestMatch(oldStart, oldEnd, newStart, newEnd) {
|
||||
let bestOldStart = oldStart;
|
||||
let bestNewStart = newStart;
|
||||
let bestSize = 0;
|
||||
|
||||
const lookup = new Map();
|
||||
for (let i = oldStart; i < oldEnd; i++) {
|
||||
const word = oldWords[i];
|
||||
if (!lookup.has(word)) lookup.set(word, []);
|
||||
lookup.get(word).push(i);
|
||||
}
|
||||
|
||||
for (let j = newStart; j < newEnd; j++) {
|
||||
const word = newWords[j];
|
||||
if (!lookup.has(word)) continue;
|
||||
|
||||
for (const i of lookup.get(word)) {
|
||||
let size = 0;
|
||||
while (
|
||||
i + size < oldEnd &&
|
||||
j + size < newEnd &&
|
||||
oldWords[i + size] === newWords[j + size]
|
||||
) {
|
||||
size++;
|
||||
}
|
||||
if (size > bestSize) {
|
||||
bestOldStart = i;
|
||||
bestNewStart = j;
|
||||
bestSize = size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
oldStart: bestOldStart,
|
||||
newStart: bestNewStart,
|
||||
size: bestSize
|
||||
};
|
||||
}
|
||||
|
||||
function buildDiff(oldStart, oldEnd, newStart, newEnd) {
|
||||
const result = [];
|
||||
const match = findLongestMatch(oldStart, oldEnd, newStart, newEnd);
|
||||
|
||||
if (match.size > 0) {
|
||||
if (oldStart < match.oldStart || newStart < match.newStart) {
|
||||
result.push(
|
||||
...buildDiff(
|
||||
oldStart,
|
||||
match.oldStart,
|
||||
newStart,
|
||||
match.newStart
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
result.push(
|
||||
oldWords
|
||||
.slice(match.oldStart, match.oldStart + match.size)
|
||||
.join(' ')
|
||||
);
|
||||
|
||||
if (
|
||||
match.oldStart + match.size < oldEnd ||
|
||||
match.newStart + match.size < newEnd
|
||||
) {
|
||||
result.push(
|
||||
...buildDiff(
|
||||
match.oldStart + match.size,
|
||||
oldEnd,
|
||||
match.newStart + match.size,
|
||||
newEnd
|
||||
)
|
||||
);
|
||||
}
|
||||
} else {
|
||||
function build(words, start, end, pattern) {
|
||||
let r = [];
|
||||
let ts = words
|
||||
.slice(start, end)
|
||||
.filter((w) => w.length > 0)
|
||||
.join(' ')
|
||||
.split('<br>');
|
||||
for (let i = 0; i < ts.length; i++) {
|
||||
if (i > 0) r.push('<br>');
|
||||
if (ts[i].length < 1) continue;
|
||||
r.push(pattern.replace('{{text}}', ts[i]));
|
||||
}
|
||||
return r;
|
||||
}
|
||||
|
||||
if (oldStart < oldEnd)
|
||||
result.push(
|
||||
...build(oldWords, oldStart, oldEnd, markerDeletion)
|
||||
);
|
||||
if (newStart < newEnd)
|
||||
result.push(
|
||||
...build(newWords, newStart, newEnd, markerAddition)
|
||||
);
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
return buildDiff(0, oldWords.length, 0, newWords.length)
|
||||
.join(' ')
|
||||
.replace(/<br>[ ]+<br>/g, '<br><br>')
|
||||
.replace(/<br> /g, '<br>');
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user