diff --git a/src/views/Feed/columns.js b/src/views/Feed/columns.js new file mode 100644 index 00000000..7fc4a7a2 --- /dev/null +++ b/src/views/Feed/columns.js @@ -0,0 +1,137 @@ +import { ElTag, ElTooltip } from 'element-plus'; +import { h, resolveComponent } from 'vue'; + +import { formatDateFilter, statusClass } from '../../shared/utils'; +import { i18n } from '../../plugin'; +import { useUserStore } from '../../stores'; + +const { t } = i18n.global; + +export const columns = [ + { + accessorKey: 'created_at', + header: () => t('table.feed.date'), + cell: ({ row }) => { + const createdAt = row.getValue('created_at'); + return h( + ElTooltip, + { placement: 'right' }, + { + content: () => + h('span', formatDateFilter(createdAt, 'long')), + default: () => + h('span', formatDateFilter(createdAt, 'short')) + } + ); + } + }, + { + accessorKey: 'type', + header: () => t('table.feed.type'), + cell: ({ row }) => { + const type = row.getValue('type'); + return h( + ElTag, + { type: 'info', effect: 'plain', size: 'small' }, + () => t(`view.feed.filters.${type}`) + ); + } + }, + { + accessorKey: 'displayName', + header: () => t('table.feed.user'), + cell: ({ row }) => { + const { showUserDialog } = useUserStore(); + const original = row.original; + return h( + 'span', + { + class: 'x-link table-user', + style: 'padding-right: 10px', + onClick: () => showUserDialog(original.userId) + }, + original.displayName + ); + } + }, + { + id: 'detail', + header: () => t('table.feed.detail'), + cell: ({ row }) => { + const original = row.original; + const type = original.type; + const Location = resolveComponent('Location'); + const AvatarInfo = resolveComponent('AvatarInfo'); + + if (type === 'GPS') { + return original.location + ? h(Location, { + location: original.location, + hint: original.worldName, + grouphint: original.groupName + }) + : null; + } + + if (type === 'Offline' || type === 'Online') { + return original.location + ? h(Location, { + location: original.location, + hint: original.worldName, + grouphint: original.groupName + }) + : null; + } + + if (type === 'Status') { + if ( + original.statusDescription === + original.previousStatusDescription + ) { + return h('span', [ + h('i', { + class: [ + 'x-user-status', + statusClass(original.previousStatus) + ] + }), + h('span', { class: 'mx-2' }, ' → '), + h('i', { + class: [ + 'x-user-status', + statusClass(original.status) + ] + }) + ]); + } + + return h('span', [ + h('i', { + class: [ + 'x-user-status', + 'mr-2', + statusClass(original.status) + ] + }), + h('span', original.statusDescription) + ]); + } + + if (type === 'Avatar') { + return h(AvatarInfo, { + imageurl: original.currentAvatarImageUrl, + userid: original.userId, + hintownerid: original.ownerId, + hintavatarname: original.avatarName, + avatartags: original.currentAvatarTags + }); + } + + if (type === 'Bio') { + return h('span', original.bio); + } + + return null; + } + } +];