mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-18 14:23:51 +02:00
rewrite import dialog tables
This commit is contained in:
pa
Natsumi
@@ -103,57 +103,13 @@
|
||||
</h2>
|
||||
<pre style="white-space: pre-wrap; font-size: 12px" v-text="avatarImportDialog.errors"></pre>
|
||||
</template>
|
||||
<DataTable :loading="avatarImportDialog.loading" v-bind="avatarImportTable" style="margin-top: 10px">
|
||||
<el-table-column :label="t('table.import.image')" width="70" prop="thumbnailImageUrl">
|
||||
<template #default="{ row }">
|
||||
<el-popover placement="right" :width="500" trigger="hover">
|
||||
<template #reference>
|
||||
<img :src="row.thumbnailImageUrl" class="friends-list-avatar" loading="lazy" />
|
||||
</template>
|
||||
<img
|
||||
:src="row.imageUrl"
|
||||
:class="['friends-list-avatar', 'x-popover-image']"
|
||||
style="cursor: pointer"
|
||||
@click="showFullscreenImageDialog(row.imageUrl)"
|
||||
loading="lazy" />
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('table.import.name')" prop="name">
|
||||
<template #default="{ row }">
|
||||
<span class="x-link" @click="showAvatarDialog(row.id)">
|
||||
{{ row.name }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('table.import.author')" width="120" prop="authorName">
|
||||
<template #default="{ row }">
|
||||
<span class="x-link" @click="showUserDialog(row.authorId)">
|
||||
{{ row.authorName }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('table.import.status')" width="70" prop="releaseStatus">
|
||||
<template #default="{ row }">
|
||||
<span
|
||||
:style="{
|
||||
color:
|
||||
row.releaseStatus === 'public'
|
||||
? '#67c23a'
|
||||
: row.releaseStatus === 'private'
|
||||
? '#f56c6c'
|
||||
: undefined
|
||||
}">
|
||||
{{ row.releaseStatus.charAt(0).toUpperCase() + row.releaseStatus.slice(1) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('table.import.action')" width="90" align="right">
|
||||
<template #default="{ row }">
|
||||
<Button size="icon-sm" variant="ghost" @click="deleteItemAvatarImport(row)"><Trash2 /> </Button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</DataTable>
|
||||
<DataTableLayout
|
||||
class="min-w-0 w-full"
|
||||
:table="table"
|
||||
:loading="avatarImportDialog.loading"
|
||||
:table-style="tableStyle"
|
||||
:show-pagination="false"
|
||||
style="margin-top: 10px" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
@@ -161,17 +117,19 @@
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { DataTableLayout } from '@/components/ui/data-table';
|
||||
import { InputGroupTextareaField } from '@/components/ui/input-group';
|
||||
import { Loading } from '@element-plus/icons-vue';
|
||||
import { Trash2 } from 'lucide-vue-next';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { useAvatarStore, useFavoriteStore, useGalleryStore, useUserStore } from '../../../stores';
|
||||
import { avatarRequest, favoriteRequest } from '../../../api';
|
||||
import { createColumns } from './avatarImportColumns.jsx';
|
||||
import { getNextDialogIndex } from '../../../shared/utils/base/ui';
|
||||
import { removeFromArray } from '../../../shared/utils';
|
||||
import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
|
||||
|
||||
const emit = defineEmits(['update:avatarImportDialogInput']);
|
||||
const { t } = useI18n();
|
||||
@@ -207,6 +165,30 @@
|
||||
layout: 'table'
|
||||
});
|
||||
|
||||
const tableStyle = { maxHeight: '400px' };
|
||||
|
||||
const rows = computed(() =>
|
||||
Array.isArray(avatarImportTable.value?.data) ? avatarImportTable.value.data.slice() : []
|
||||
);
|
||||
|
||||
const columns = computed(() =>
|
||||
createColumns({
|
||||
onShowAvatar: showAvatarDialog,
|
||||
onShowUser: showUserDialog,
|
||||
onShowFullscreenImage: showFullscreenImageDialog,
|
||||
onDelete: deleteItemAvatarImport
|
||||
})
|
||||
);
|
||||
|
||||
const { table } = useVrcxVueTable({
|
||||
persistKey: 'avatarImportDialog',
|
||||
data: rows,
|
||||
columns: columns.value,
|
||||
getRowId: (row) => String(row?.id ?? ''),
|
||||
enablePagination: false,
|
||||
enableSorting: false
|
||||
});
|
||||
|
||||
const avatarImportDialogIndex = ref(2000);
|
||||
|
||||
const isVisible = computed({
|
||||
|
||||
@@ -84,34 +84,13 @@
|
||||
<h2 style="font-weight: bold; margin: 5px 0">{{ t('dialog.friend_import.errors') }}</h2>
|
||||
<pre style="white-space: pre-wrap; font-size: 12px" v-text="friendImportDialog.errors"></pre>
|
||||
</template>
|
||||
<DataTable :loading="friendImportDialog.loading" v-bind="friendImportTable" style="margin-top: 10px">
|
||||
<el-table-column :label="t('table.import.image')" width="70" prop="currentAvatarThumbnailImageUrl">
|
||||
<template #default="{ row }">
|
||||
<el-popover placement="right" :width="500" trigger="hover">
|
||||
<template #reference>
|
||||
<img class="friends-list-avatar" :src="userImage(row)" />
|
||||
</template>
|
||||
<img
|
||||
:src="userImageFull(row)"
|
||||
:class="['friends-list-avatar', 'x-popover-image']"
|
||||
style="cursor: pointer"
|
||||
@click="showFullscreenImageDialog(userImageFull(row))" />
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('table.import.name')" prop="displayName">
|
||||
<template #default="{ row }">
|
||||
<span class="x-link" :title="row.displayName" @click="showUserDialog(row.id)">
|
||||
{{ row.displayName }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('table.import.action')" width="90" align="right">
|
||||
<template #default="{ row }">
|
||||
<Button size="icon-sm" variant="ghost" @click="deleteItemFriendImport(row)"><Trash2 /></Button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</DataTable>
|
||||
<DataTableLayout
|
||||
class="min-w-0 w-full"
|
||||
:table="table"
|
||||
:loading="friendImportDialog.loading"
|
||||
:table-style="tableStyle"
|
||||
:show-pagination="false"
|
||||
style="margin-top: 10px" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
@@ -119,9 +98,9 @@
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { DataTableLayout } from '@/components/ui/data-table';
|
||||
import { InputGroupTextareaField } from '@/components/ui/input-group';
|
||||
import { Loading } from '@element-plus/icons-vue';
|
||||
import { Trash2 } from 'lucide-vue-next';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
@@ -129,7 +108,9 @@
|
||||
import { removeFromArray, userImage, userImageFull } from '../../../shared/utils';
|
||||
import { useFavoriteStore, useGalleryStore, useUserStore } from '../../../stores';
|
||||
import { favoriteRequest, userRequest } from '../../../api';
|
||||
import { createColumns } from './friendImportColumns.jsx';
|
||||
import { getNextDialogIndex } from '../../../shared/utils/base/ui';
|
||||
import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
@@ -163,6 +144,31 @@
|
||||
layout: 'table'
|
||||
});
|
||||
|
||||
const tableStyle = { maxHeight: '400px' };
|
||||
|
||||
const rows = computed(() =>
|
||||
Array.isArray(friendImportTable.value?.data) ? friendImportTable.value.data.slice() : []
|
||||
);
|
||||
|
||||
const columns = computed(() =>
|
||||
createColumns({
|
||||
userImage,
|
||||
userImageFull,
|
||||
onShowFullscreenImage: showFullscreenImageDialog,
|
||||
onShowUser: showUserDialog,
|
||||
onDelete: deleteItemFriendImport
|
||||
})
|
||||
);
|
||||
|
||||
const { table } = useVrcxVueTable({
|
||||
persistKey: 'friendImportDialog',
|
||||
data: rows,
|
||||
columns: columns.value,
|
||||
getRowId: (row) => String(row?.id ?? ''),
|
||||
enablePagination: false,
|
||||
enableSorting: false
|
||||
});
|
||||
|
||||
const friendImportDialogIndex = ref(2000);
|
||||
|
||||
const isVisible = computed({
|
||||
|
||||
@@ -108,54 +108,13 @@
|
||||
</h2>
|
||||
<pre style="white-space: pre-wrap; font-size: 12px" v-text="worldImportDialog.errors"></pre>
|
||||
</template>
|
||||
<DataTable :loading="worldImportDialog.loading" v-bind="worldImportTable" style="margin-top: 10px">
|
||||
<el-table-column :label="t('table.import.image')" width="70" prop="thumbnailImageUrl">
|
||||
<template #default="{ row }">
|
||||
<el-popover placement="right" :width="500" trigger="hover">
|
||||
<template #reference>
|
||||
<img :src="row.thumbnailImageUrl" class="friends-list-avatar" loading="lazy" />
|
||||
</template>
|
||||
<img
|
||||
:src="row.imageUrl"
|
||||
:class="['friends-list-avatar', 'x-popover-image']"
|
||||
style="cursor: pointer"
|
||||
@click="showFullscreenImageDialog(row.imageUrl)"
|
||||
loading="lazy" />
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('table.import.name')" prop="name">
|
||||
<template #default="{ row }">
|
||||
<span class="x-link" @click="showWorldDialog(row.id)" v-text="row.name"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('table.import.author')" width="120" prop="authorName">
|
||||
<template #default="{ row }">
|
||||
<span class="x-link" @click="showUserDialog(row.authorId)" v-text="row.authorName"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('table.import.status')" width="70" prop="releaseStatus">
|
||||
<template #default="{ row }">
|
||||
<span
|
||||
:style="{
|
||||
color:
|
||||
row.releaseStatus === 'public'
|
||||
? '#67c23a'
|
||||
: row.releaseStatus === 'private'
|
||||
? '#f56c6c'
|
||||
: undefined
|
||||
}"
|
||||
v-text="row.releaseStatus.charAt(0).toUpperCase() + row.releaseStatus.slice(1)"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('table.import.action')" width="90" align="right">
|
||||
<template #default="{ row }">
|
||||
<Button size="icon-sm" class="w-6 h-6" variant="ghost" @click="deleteItemWorldImport(row)"
|
||||
><Trash2
|
||||
/></Button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</DataTable>
|
||||
<DataTableLayout
|
||||
class="min-w-0 w-full"
|
||||
:table="table"
|
||||
:loading="worldImportDialog.loading"
|
||||
:table-style="tableStyle"
|
||||
:show-pagination="false"
|
||||
style="margin-top: 10px" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
@@ -163,17 +122,19 @@
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { DataTableLayout } from '@/components/ui/data-table';
|
||||
import { InputGroupTextareaField } from '@/components/ui/input-group';
|
||||
import { Loading } from '@element-plus/icons-vue';
|
||||
import { Trash2 } from 'lucide-vue-next';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { useFavoriteStore, useGalleryStore, useUserStore, useWorldStore } from '../../../stores';
|
||||
import { favoriteRequest, worldRequest } from '../../../api';
|
||||
import { createColumns } from './worldImportColumns.jsx';
|
||||
import { getNextDialogIndex } from '../../../shared/utils/base/ui';
|
||||
import { removeFromArray } from '../../../shared/utils';
|
||||
import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
|
||||
|
||||
const { showUserDialog } = useUserStore();
|
||||
const { favoriteWorldGroups, worldImportDialogInput, worldImportDialogVisible, localWorldFavoriteGroups } =
|
||||
@@ -213,6 +174,30 @@
|
||||
layout: 'table'
|
||||
});
|
||||
|
||||
const tableStyle = { maxHeight: '400px' };
|
||||
|
||||
const rows = computed(() =>
|
||||
Array.isArray(worldImportTable.value?.data) ? worldImportTable.value.data.slice() : []
|
||||
);
|
||||
|
||||
const columns = computed(() =>
|
||||
createColumns({
|
||||
onShowWorld: showWorldDialog,
|
||||
onShowUser: showUserDialog,
|
||||
onShowFullscreenImage: showFullscreenImageDialog,
|
||||
onDelete: deleteItemWorldImport
|
||||
})
|
||||
);
|
||||
|
||||
const { table } = useVrcxVueTable({
|
||||
persistKey: 'worldImportDialog',
|
||||
data: rows,
|
||||
columns: columns.value,
|
||||
getRowId: (row) => String(row?.id ?? ''),
|
||||
enablePagination: false,
|
||||
enableSorting: false
|
||||
});
|
||||
|
||||
const isVisible = computed({
|
||||
get() {
|
||||
return worldImportDialogVisible.value;
|
||||
|
||||
137
src/views/Favorites/dialogs/avatarImportColumns.jsx
Normal file
137
src/views/Favorites/dialogs/avatarImportColumns.jsx
Normal file
@@ -0,0 +1,137 @@
|
||||
import { Trash2 } from 'lucide-vue-next';
|
||||
|
||||
import { Button } from '../../../components/ui/button';
|
||||
import { i18n } from '../../../plugin';
|
||||
|
||||
const { t } = i18n.global;
|
||||
|
||||
export const createColumns = ({ onShowAvatar, onShowUser, onDelete, onShowFullscreenImage }) => [
|
||||
{
|
||||
id: 'image',
|
||||
header: () => t('table.import.image'),
|
||||
enableSorting: false,
|
||||
size: 70,
|
||||
cell: ({ row }) => {
|
||||
const original = row.original;
|
||||
const thumb = original?.thumbnailImageUrl;
|
||||
const full = original?.imageUrl;
|
||||
|
||||
return (
|
||||
<el-popover
|
||||
placement="right"
|
||||
width={500}
|
||||
trigger="hover"
|
||||
v-slots={{
|
||||
reference: () => (
|
||||
<img
|
||||
src={thumb}
|
||||
class="friends-list-avatar"
|
||||
loading="lazy"
|
||||
/>
|
||||
)
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={full}
|
||||
class={['friends-list-avatar', 'x-popover-image']}
|
||||
style="cursor: pointer"
|
||||
loading="lazy"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (full) {
|
||||
onShowFullscreenImage?.(full);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</el-popover>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'name',
|
||||
accessorKey: 'name',
|
||||
header: () => t('table.import.name'),
|
||||
meta: {
|
||||
stretch: true
|
||||
},
|
||||
cell: ({ row }) => {
|
||||
const original = row.original;
|
||||
return (
|
||||
<span
|
||||
class="x-link"
|
||||
title={original?.name}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onShowAvatar?.(original?.id);
|
||||
}}
|
||||
>
|
||||
{original?.name}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'author',
|
||||
header: () => t('table.import.author'),
|
||||
size: 120,
|
||||
enableSorting: false,
|
||||
cell: ({ row }) => {
|
||||
const original = row.original;
|
||||
return (
|
||||
<span
|
||||
class="x-link"
|
||||
title={original?.authorName}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onShowUser?.(original?.authorId);
|
||||
}}
|
||||
>
|
||||
{original?.authorName}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'status',
|
||||
header: () => t('table.import.status'),
|
||||
size: 70,
|
||||
enableSorting: false,
|
||||
cell: ({ row }) => {
|
||||
const status = String(row.original?.releaseStatus ?? '');
|
||||
const label = status
|
||||
? status.charAt(0).toUpperCase() + status.slice(1)
|
||||
: '';
|
||||
const color =
|
||||
status === 'public'
|
||||
? '#67c23a'
|
||||
: status === 'private'
|
||||
? '#f56c6c'
|
||||
: undefined;
|
||||
return <span style={{ color }}>{label}</span>;
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'action',
|
||||
header: () => t('table.import.action'),
|
||||
size: 90,
|
||||
enableSorting: false,
|
||||
meta: {
|
||||
tdClass: 'text-right'
|
||||
},
|
||||
cell: ({ row }) => {
|
||||
const original = row.original;
|
||||
return (
|
||||
<Button
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onDelete?.(original);
|
||||
}}
|
||||
>
|
||||
<Trash2 />
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
96
src/views/Favorites/dialogs/friendImportColumns.jsx
Normal file
96
src/views/Favorites/dialogs/friendImportColumns.jsx
Normal file
@@ -0,0 +1,96 @@
|
||||
import { Trash2 } from 'lucide-vue-next';
|
||||
|
||||
import { Button } from '../../../components/ui/button';
|
||||
import { i18n } from '../../../plugin';
|
||||
|
||||
const { t } = i18n.global;
|
||||
|
||||
export const createColumns = ({ userImage, userImageFull, onShowFullscreenImage, onShowUser, onDelete }) => [
|
||||
{
|
||||
id: 'image',
|
||||
header: () => t('table.import.image'),
|
||||
enableSorting: false,
|
||||
size: 70,
|
||||
cell: ({ row }) => {
|
||||
const original = row.original;
|
||||
const thumb = userImage?.(original);
|
||||
const full = userImageFull?.(original);
|
||||
|
||||
return (
|
||||
<el-popover
|
||||
placement="right"
|
||||
width={500}
|
||||
trigger="hover"
|
||||
v-slots={{
|
||||
reference: () => (
|
||||
<img
|
||||
class="friends-list-avatar"
|
||||
src={thumb}
|
||||
loading="lazy"
|
||||
/>
|
||||
)
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={full}
|
||||
class={['friends-list-avatar', 'x-popover-image']}
|
||||
style="cursor: pointer"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (full) {
|
||||
onShowFullscreenImage?.(full);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</el-popover>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'name',
|
||||
accessorKey: 'displayName',
|
||||
header: () => t('table.import.name'),
|
||||
meta: {
|
||||
stretch: true
|
||||
},
|
||||
cell: ({ row }) => {
|
||||
const original = row.original;
|
||||
return (
|
||||
<span
|
||||
class="x-link"
|
||||
title={original?.displayName}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onShowUser?.(original?.id);
|
||||
}}
|
||||
>
|
||||
{original?.displayName}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'action',
|
||||
header: () => t('table.import.action'),
|
||||
size: 90,
|
||||
enableSorting: false,
|
||||
meta: {
|
||||
tdClass: 'text-right'
|
||||
},
|
||||
cell: ({ row }) => {
|
||||
const original = row.original;
|
||||
return (
|
||||
<Button
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onDelete?.(original);
|
||||
}}
|
||||
>
|
||||
<Trash2 />
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
138
src/views/Favorites/dialogs/worldImportColumns.jsx
Normal file
138
src/views/Favorites/dialogs/worldImportColumns.jsx
Normal file
@@ -0,0 +1,138 @@
|
||||
import { Trash2 } from 'lucide-vue-next';
|
||||
|
||||
import { Button } from '../../../components/ui/button';
|
||||
import { i18n } from '../../../plugin';
|
||||
|
||||
const { t } = i18n.global;
|
||||
|
||||
export const createColumns = ({ onShowWorld, onShowUser, onDelete, onShowFullscreenImage }) => [
|
||||
{
|
||||
id: 'image',
|
||||
header: () => t('table.import.image'),
|
||||
enableSorting: false,
|
||||
size: 70,
|
||||
cell: ({ row }) => {
|
||||
const original = row.original;
|
||||
const thumb = original?.thumbnailImageUrl;
|
||||
const full = original?.imageUrl;
|
||||
|
||||
return (
|
||||
<el-popover
|
||||
placement="right"
|
||||
width={500}
|
||||
trigger="hover"
|
||||
v-slots={{
|
||||
reference: () => (
|
||||
<img
|
||||
src={thumb}
|
||||
class="friends-list-avatar"
|
||||
loading="lazy"
|
||||
/>
|
||||
)
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={full}
|
||||
class={['friends-list-avatar', 'x-popover-image']}
|
||||
style="cursor: pointer"
|
||||
loading="lazy"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (full) {
|
||||
onShowFullscreenImage?.(full);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</el-popover>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'name',
|
||||
accessorKey: 'name',
|
||||
header: () => t('table.import.name'),
|
||||
meta: {
|
||||
stretch: true
|
||||
},
|
||||
cell: ({ row }) => {
|
||||
const original = row.original;
|
||||
return (
|
||||
<span
|
||||
class="x-link"
|
||||
title={original?.name}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onShowWorld?.(original?.id);
|
||||
}}
|
||||
>
|
||||
{original?.name}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'author',
|
||||
header: () => t('table.import.author'),
|
||||
size: 120,
|
||||
enableSorting: false,
|
||||
cell: ({ row }) => {
|
||||
const original = row.original;
|
||||
return (
|
||||
<span
|
||||
class="x-link"
|
||||
title={original?.authorName}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onShowUser?.(original?.authorId);
|
||||
}}
|
||||
>
|
||||
{original?.authorName}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'status',
|
||||
header: () => t('table.import.status'),
|
||||
size: 70,
|
||||
enableSorting: false,
|
||||
cell: ({ row }) => {
|
||||
const status = String(row.original?.releaseStatus ?? '');
|
||||
const label = status
|
||||
? status.charAt(0).toUpperCase() + status.slice(1)
|
||||
: '';
|
||||
const color =
|
||||
status === 'public'
|
||||
? '#67c23a'
|
||||
: status === 'private'
|
||||
? '#f56c6c'
|
||||
: undefined;
|
||||
return <span style={{ color }}>{label}</span>;
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'action',
|
||||
header: () => t('table.import.action'),
|
||||
size: 90,
|
||||
enableSorting: false,
|
||||
meta: {
|
||||
tdClass: 'text-right'
|
||||
},
|
||||
cell: ({ row }) => {
|
||||
const original = row.original;
|
||||
return (
|
||||
<Button
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
class="w-6 h-6"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onDelete?.(original);
|
||||
}}
|
||||
>
|
||||
<Trash2 />
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
Reference in New Issue
Block a user