rewrite tables

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

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 = {