MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-05-05 14:26:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

rewrite tables

Browse Source
This commit is contained in:
pa
2026-01-13 19:28:40 +09:00
committed by Natsumi
parent 6e3aa44710
commit 69921ed54e
22 changed files with 1419 additions and 803 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Notifications/dialogs/SendInviteRequestResponseDialog.vue
+30 -27
View File
@@ -10,31 +10,12 @@
<input class="inviteImageUploadButton" type="file" accept="image/*" @change="inviteImageUpload" />
</template>
<DataTable
v-bind="inviteRequestResponseMessageTable"
style="margin-top: 10px; cursor: pointer"
@row-click="showSendInviteResponseConfirmDialog">
<el-table-column :label="t('table.profile.invite_messages.slot')" prop="slot" :sortable="true" width="70">
</el-table-column>
<el-table-column :label="t('table.profile.invite_messages.message')" prop="message"> </el-table-column>
<el-table-column
:label="t('table.profile.invite_messages.cool_down')"
prop="updatedAt"
:sortable="true"
width="110"
align="right">
<template #default="scope">
<countdown-timer :datetime="scope.row.updatedAt" :hours="1"></countdown-timer>
</template>
</el-table-column>
<el-table-column :label="t('table.profile.invite_messages.action')" width="70" align="right">
<template #default="scope">
<Button size="icon-sm" variant="ghost" @click.stop="showEditAndSendInviteResponseDialog(scope.row)">
<SquarePen
/></Button>
</template>
</el-table-column>
</DataTable>
<DataTableLayout
style="margin-top: 10px"
:table="inviteRequestResponseTable"
:loading="false"
:show-pagination="false"
:on-row-click="handleInviteRequestResponseRowClick" />
<template #footer>
<Button variant="secondary" class="mr-2" @click="cancelSendInviteRequestResponse">
@@ -58,13 +39,15 @@
</template>
<script setup>
import { computed, ref } from 'vue';
import { Button } from '@/components/ui/button';
import { SquarePen } from 'lucide-vue-next';
import { ref } from 'vue';
import { DataTableLayout } from '@/components/ui/data-table';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { useVrcxVueTable } from '@/lib/table/useVrcxVueTable';
import { useGalleryStore, useInviteStore, useUserStore } from '../../../stores';
import { createColumns } from './sendInviteRequestResponseColumns.jsx';
import EditAndSendInviteResponseDialog from './EditAndSendInviteResponseDialog.vue';
import SendInviteResponseConfirmDialog from './SendInviteResponseConfirmDialog.vue';
@@ -99,6 +82,26 @@
visible: false
});
const inviteRequestResponseRows = computed(() => inviteRequestResponseMessageTable.value?.data ?? []);
const inviteRequestResponseColumns = computed(() =>
createColumns({
onEdit: showEditAndSendInviteResponseDialog
})
);
const { table: inviteRequestResponseTable } = useVrcxVueTable({
persistKey: 'invite-request-response-message',
data: inviteRequestResponseRows,
columns: inviteRequestResponseColumns,
getRowId: (row) => String(row?.slot ?? ''),
enablePagination: false,
initialSorting: [{ id: 'slot', desc: false }]
});
function handleInviteRequestResponseRowClick(row) {
showSendInviteResponseConfirmDialog(row?.original);
}
function showEditAndSendInviteResponseDialog(row) {
emit('update:sendInviteResponseDialog', { ...props.sendInviteResponseDialog, messageSlot: row });
editAndSendInviteResponseDialog.value = {
src/views/Notifications/dialogs/SendInviteResponseDialog.vue
+30 -26
View File
@@ -10,30 +10,12 @@
<input class="inviteImageUploadButton" type="file" accept="image/*" @change="inviteImageUpload" />
</template>
<DataTable
v-bind="inviteResponseMessageTable"
style="margin-top: 10px; cursor: pointer"
@row-click="showSendInviteResponseConfirmDialog">
<el-table-column :label="t('table.profile.invite_messages.slot')" prop="slot" :sortable="true" width="70" />
<el-table-column :label="t('table.profile.invite_messages.message')" prop="message" />
<el-table-column
:label="t('table.profile.invite_messages.cool_down')"
prop="updatedAt"
:sortable="true"
width="110"
align="right">
<template #default="scope">
<countdown-timer :datetime="scope.row.updatedAt" :hours="1" />
</template>
</el-table-column>
<el-table-column :label="t('table.profile.invite_messages.action')" width="70" align="right">
<template #default="scope">
<Button size="icon-sm" variant="ghost" @click.stop="showEditAndSendInviteResponseDialog(scope.row)">
<SquarePen
/></Button>
</template>
</el-table-column>
</DataTable>
<DataTableLayout
style="margin-top: 10px"
:table="inviteResponseTable"
:loading="false"
:show-pagination="false"
:on-row-click="handleInviteResponseRowClick" />
<template #footer>
<Button variant="secondary" class="mr-2" @click="cancelSendInviteResponse">{{
@@ -57,13 +39,15 @@
</template>
<script setup>
import { computed, ref } from 'vue';
import { Button } from '@/components/ui/button';
import { SquarePen } from 'lucide-vue-next';
import { ref } from 'vue';
import { DataTableLayout } from '@/components/ui/data-table';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { useVrcxVueTable } from '@/lib/table/useVrcxVueTable';
import { useGalleryStore, useInviteStore, useUserStore } from '../../../stores';
import { createColumns } from './sendInviteResponseColumns.jsx';
import EditAndSendInviteResponseDialog from './EditAndSendInviteResponseDialog.vue';
import SendInviteResponseConfirmDialog from './SendInviteResponseConfirmDialog.vue';
@@ -99,6 +83,26 @@
visible: false
});
const inviteResponseRows = computed(() => inviteResponseMessageTable.value?.data ?? []);
const inviteResponseColumns = computed(() =>
createColumns({
onEdit: showEditAndSendInviteResponseDialog
})
);
const { table: inviteResponseTable } = useVrcxVueTable({
persistKey: 'invite-response-message',
data: inviteResponseRows,
columns: inviteResponseColumns,
getRowId: (row) => String(row?.slot ?? ''),
enablePagination: false,
initialSorting: [{ id: 'slot', desc: false }]
});
function handleInviteResponseRowClick(row) {
showSendInviteResponseConfirmDialog(row?.original);
}
function closeInviteDialog() {
cancelSendInviteResponse();
}
src/views/Notifications/dialogs/sendInviteRequestResponseColumns.jsx
+53
View File
@@ -0,0 +1,53 @@
import CountdownTimer from '@/components/CountdownTimer.vue';
import { Button } from '@/components/ui/button';
import { i18n } from '@/plugin';
import { SquarePen } from 'lucide-vue-next';
const { t } = i18n.global;
export const createColumns = ({ onEdit }) => [
{
accessorKey: 'slot',
header: () => t('table.profile.invite_messages.slot'),
size: 70
},
{
accessorKey: 'message',
header: () => t('table.profile.invite_messages.message'),
meta: {
stretch: true
}
},
{
accessorKey: 'updatedAt',
header: () => t('table.profile.invite_messages.cool_down'),
size: 110,
meta: {
tdClass: 'text-right'
},
cell: ({ row }) => (
<CountdownTimer datetime={row.original?.updatedAt} hours={1} />
)
},
{
id: 'action',
header: () => t('table.profile.invite_messages.action'),
size: 70,
enableSorting: false,
meta: {
tdClass: 'text-right'
},
cell: ({ row }) => (
<Button
size="icon-sm"
variant="ghost"
onClick={(e) => {
e.stopPropagation();
onEdit?.(row.original);
}}
>
<SquarePen />
</Button>
)
}
];
src/views/Notifications/dialogs/sendInviteResponseColumns.jsx
+53
View File
@@ -0,0 +1,53 @@
import CountdownTimer from '@/components/CountdownTimer.vue';
import { Button } from '@/components/ui/button';
import { i18n } from '@/plugin';
import { SquarePen } from 'lucide-vue-next';
const { t } = i18n.global;
export const createColumns = ({ onEdit }) => [
{
accessorKey: 'slot',
header: () => t('table.profile.invite_messages.slot'),
size: 70
},
{
accessorKey: 'message',
header: () => t('table.profile.invite_messages.message'),
meta: {
stretch: true
}
},
{
accessorKey: 'updatedAt',
header: () => t('table.profile.invite_messages.cool_down'),
size: 110,
meta: {
tdClass: 'text-right'
},
cell: ({ row }) => (
<CountdownTimer datetime={row.original?.updatedAt} hours={1} />
)
},
{
id: 'action',
header: () => t('table.profile.invite_messages.action'),
size: 70,
enableSorting: false,
meta: {
tdClass: 'text-right'
},
cell: ({ row }) => (
<Button
size="icon-sm"
variant="ghost"
onClick={(e) => {
e.stopPropagation();
onEdit?.(row.original);
}}
>
<SquarePen />
</Button>
)
}
];
src/views/Tools/dialogs/EditInviteMessagesDialog.vue
+72 -90
View File
@@ -7,104 +7,36 @@
@close="closeDialog">
<el-tabs v-model="activeTab" style="margin-top: 10px">
<el-tab-pane :label="t('dialog.edit_invite_messages.invite_message_tab')" name="message">
<DataTable
v-bind="inviteMessageTable"
<DataTableLayout
style="margin-top: 10px; cursor: pointer"
@row-click="showEditInviteMessageDialog">
<el-table-column
:label="t('table.profile.invite_messages.slot')"
prop="slot"
:sortable="true"
width="70"></el-table-column>
<el-table-column
:label="t('table.profile.invite_messages.message')"
prop="message"></el-table-column>
<el-table-column
:label="t('table.profile.invite_messages.cool_down')"
prop="updatedAt"
:sortable="true"
width="110"
align="right">
<template #default="scope">
<countdown-timer :datetime="scope.row.updatedAt" :hours="1"></countdown-timer>
</template>
</el-table-column>
</DataTable>
:table="inviteMessageTanstackTable"
:loading="false"
:show-pagination="false"
:on-row-click="handleEditInviteMessageRowClick" />
</el-tab-pane>
<el-tab-pane :label="t('dialog.edit_invite_messages.invite_request_tab')" name="request">
<DataTable
v-bind="inviteRequestMessageTable"
<DataTableLayout
style="margin-top: 10px; cursor: pointer"
@row-click="showEditInviteMessageDialog">
<el-table-column
:label="t('table.profile.invite_messages.slot')"
prop="slot"
:sortable="true"
width="70"></el-table-column>
<el-table-column
:label="t('table.profile.invite_messages.message')"
prop="message"></el-table-column>
<el-table-column
:label="t('table.profile.invite_messages.cool_down')"
prop="updatedAt"
:sortable="true"
width="110"
align="right">
<template #default="scope">
<countdown-timer :datetime="scope.row.updatedAt" :hours="1"></countdown-timer>
</template>
</el-table-column>
</DataTable>
:table="inviteRequestTanstackTable"
:loading="false"
:show-pagination="false"
:on-row-click="handleEditInviteMessageRowClick" />
</el-tab-pane>
<el-tab-pane :label="t('dialog.edit_invite_messages.invite_request_response_tab')" name="requestResponse">
<DataTable
v-bind="inviteRequestResponseMessageTable"
<DataTableLayout
style="margin-top: 10px; cursor: pointer"
@row-click="showEditInviteMessageDialog">
<el-table-column
:label="t('table.profile.invite_messages.slot')"
prop="slot"
:sortable="true"
width="70"></el-table-column>
<el-table-column
:label="t('table.profile.invite_messages.message')"
prop="message"></el-table-column>
<el-table-column
:label="t('table.profile.invite_messages.cool_down')"
prop="updatedAt"
:sortable="true"
width="110"
align="right">
<template #default="scope">
<countdown-timer :datetime="scope.row.updatedAt" :hours="1"></countdown-timer>
</template>
</el-table-column>
</DataTable>
:table="inviteRequestResponseTanstackTable"
:loading="false"
:show-pagination="false"
:on-row-click="handleEditInviteMessageRowClick" />
</el-tab-pane>
<el-tab-pane :label="t('dialog.edit_invite_messages.invite_response_tab')" name="response">
<DataTable
v-bind="inviteResponseMessageTable"
<DataTableLayout
style="margin-top: 10px; cursor: pointer"
@row-click="showEditInviteMessageDialog">
<el-table-column
:label="t('table.profile.invite_messages.slot')"
prop="slot"
:sortable="true"
width="70"></el-table-column>
<el-table-column
:label="t('table.profile.invite_messages.message')"
prop="message"></el-table-column>
<el-table-column
:label="t('table.profile.invite_messages.cool_down')"
prop="updatedAt"
:sortable="true"
width="110"
align="right">
<template #default="scope">
<countdown-timer :datetime="scope.row.updatedAt" :hours="1"></countdown-timer>
</template>
</el-table-column>
</DataTable>
:table="inviteResponseTanstackTable"
:loading="false"
:show-pagination="false"
:on-row-click="handleEditInviteMessageRowClick" />
</el-tab-pane>
</el-tabs>
</el-dialog>
@@ -118,14 +50,19 @@
</template>
<script setup>
import { ref, watch } from 'vue';
import { computed, ref, watch } from 'vue';
import { DataTableLayout } from '@/components/ui/data-table';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
import { useVrcxVueTable } from '@/lib/table/useVrcxVueTable';
import { columns as inviteMessageColumns } from './editInviteMessagesMessageColumns.jsx';
import { columns as inviteRequestColumns } from './editInviteMessagesRequestColumns.jsx';
import { columns as inviteRequestResponseColumns } from './editInviteMessagesRequestResponseColumns.jsx';
import { columns as inviteResponseColumns } from './editInviteMessagesResponseColumns.jsx';
import { useInviteStore } from '../../../stores';
import DataTable from '../../../components/DataTable.vue';
import EditInviteMessageDialog from './EditInviteMessageDialog.vue';
const {
@@ -167,6 +104,51 @@
emit('close');
}
const inviteMessageRows = computed(() => inviteMessageTable.value?.data ?? []);
const inviteRequestRows = computed(() => inviteRequestMessageTable.value?.data ?? []);
const inviteRequestResponseRows = computed(() => inviteRequestResponseMessageTable.value?.data ?? []);
const inviteResponseRows = computed(() => inviteResponseMessageTable.value?.data ?? []);
const { table: inviteMessageTanstackTable } = useVrcxVueTable({
persistKey: 'edit-invite-messages:message',
data: inviteMessageRows,
columns: inviteMessageColumns,
getRowId: (row) => String(row?.slot ?? ''),
enablePagination: false,
initialSorting: [{ id: 'slot', desc: false }]
});
const { table: inviteRequestTanstackTable } = useVrcxVueTable({
persistKey: 'edit-invite-messages:request',
data: inviteRequestRows,
columns: inviteRequestColumns,
getRowId: (row) => String(row?.slot ?? ''),
enablePagination: false,
initialSorting: [{ id: 'slot', desc: false }]
});
const { table: inviteRequestResponseTanstackTable } = useVrcxVueTable({
persistKey: 'edit-invite-messages:request-response',
data: inviteRequestResponseRows,
columns: inviteRequestResponseColumns,
getRowId: (row) => String(row?.slot ?? ''),
enablePagination: false,
initialSorting: [{ id: 'slot', desc: false }]
});
const { table: inviteResponseTanstackTable } = useVrcxVueTable({
persistKey: 'edit-invite-messages:response',
data: inviteResponseRows,
columns: inviteResponseColumns,
getRowId: (row) => String(row?.slot ?? ''),
enablePagination: false,
initialSorting: [{ id: 'slot', desc: false }]
});
function handleEditInviteMessageRowClick(row) {
showEditInviteMessageDialog(row?.original);
}
function showEditInviteMessageDialog(row) {
if (row.updatedAt) {
const cooldownEnd = new Date(row.updatedAt);
src/views/Tools/dialogs/editInviteMessagesMessageColumns.jsx
+30
View File
@@ -0,0 +1,30 @@
import CountdownTimer from '@/components/CountdownTimer.vue';
import { i18n } from '@/plugin';
const { t } = i18n.global;
export const columns = [
{
accessorKey: 'slot',
header: () => t('table.profile.invite_messages.slot'),
size: 70
},
{
accessorKey: 'message',
header: () => t('table.profile.invite_messages.message'),
meta: {
stretch: true
}
},
{
accessorKey: 'updatedAt',
header: () => t('table.profile.invite_messages.cool_down'),
size: 110,
meta: {
tdClass: 'text-right'
},
cell: ({ row }) => (
<CountdownTimer datetime={row.original?.updatedAt} hours={1} />
)
}
];
src/views/Tools/dialogs/editInviteMessagesRequestColumns.jsx
+30
View File
@@ -0,0 +1,30 @@
import CountdownTimer from '@/components/CountdownTimer.vue';
import { i18n } from '@/plugin';
const { t } = i18n.global;
export const columns = [
{
accessorKey: 'slot',
header: () => t('table.profile.invite_messages.slot'),
size: 70
},
{
accessorKey: 'message',
header: () => t('table.profile.invite_messages.message'),
meta: {
stretch: true
}
},
{
accessorKey: 'updatedAt',
header: () => t('table.profile.invite_messages.cool_down'),
size: 110,
meta: {
tdClass: 'text-right'
},
cell: ({ row }) => (
<CountdownTimer datetime={row.original?.updatedAt} hours={1} />
)
}
];
src/views/Tools/dialogs/editInviteMessagesRequestResponseColumns.jsx
+30
View File
@@ -0,0 +1,30 @@
import CountdownTimer from '@/components/CountdownTimer.vue';
import { i18n } from '@/plugin';
const { t } = i18n.global;
export const columns = [
{
accessorKey: 'slot',
header: () => t('table.profile.invite_messages.slot'),
size: 70
},
{
accessorKey: 'message',
header: () => t('table.profile.invite_messages.message'),
meta: {
stretch: true
}
},
{
accessorKey: 'updatedAt',
header: () => t('table.profile.invite_messages.cool_down'),
size: 110,
meta: {
tdClass: 'text-right'
},
cell: ({ row }) => (
<CountdownTimer datetime={row.original?.updatedAt} hours={1} />
)
}
];
src/views/Tools/dialogs/editInviteMessagesResponseColumns.jsx
+30
View File
@@ -0,0 +1,30 @@
import CountdownTimer from '@/components/CountdownTimer.vue';
import { i18n } from '@/plugin';
const { t } = i18n.global;
export const columns = [
{
accessorKey: 'slot',
header: () => t('table.profile.invite_messages.slot'),
size: 70
},
{
accessorKey: 'message',
header: () => t('table.profile.invite_messages.message'),
meta: {
stretch: true
}
},
{
accessorKey: 'updatedAt',
header: () => t('table.profile.invite_messages.cool_down'),
size: 110,
meta: {
tdClass: 'text-right'
},
cell: ({ row }) => (
<CountdownTimer datetime={row.original?.updatedAt} hours={1} />
)
}
];