External/bichon
1
0
Fork 0
mirror of https://github.com/rustmailer/bichon.git synced 2026-08-03 07:48:34 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore(ui): Adjust width of account list for better visibility

Browse Source
This commit is contained in:
rustmailer
2025-12-08 03:43:00 +08:00
parent 20970b4fb6
commit 000d144e70
2 changed files with 102 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/features/accounts/components/columns.tsx
+101 -101
View File
@@ -31,113 +31,113 @@ import { useTranslation } from 'react-i18next'
export function useColumns(): ColumnDef<AccountModel>[] { export function useColumns(): ColumnDef<AccountModel>[] {
const { t } = useTranslation() const { t } = useTranslation()
return [ return [
{ {
accessorKey: "id", accessorKey: "id",
header: ({ column }) => ( header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('accounts.id')} /> <DataTableColumnHeader column={column} title={t('accounts.id')} />
), ),
cell: ({ row }) => { cell: ({ row }) => {
return <LongText>{row.original.id}</LongText> return <LongText>{row.original.id}</LongText>
},
enableSorting: false,
enableHiding: false,
}, },
enableSorting: false, {
enableHiding: false, accessorKey: "email",
}, header: ({ column }) => (
{ <DataTableColumnHeader column={column} title={t('accounts.email')} />
accessorKey: "email", ),
header: ({ column }) => ( cell: ({ row }) => {
<DataTableColumnHeader column={column} title={t('accounts.email')} /> return <LongText>{row.original.email}</LongText>
), },
cell: ({ row }) => { enableHiding: false,
return <LongText>{row.original.email}</LongText>
}, },
enableHiding: false, {
}, accessorKey: "enabled",
{ header: ({ column }) => (
accessorKey: "enabled", <DataTableColumnHeader className="text-center" column={column} title={t('accounts.enabled')} />
header: ({ column }) => ( ),
<DataTableColumnHeader className="ml-4" column={column} title={t('accounts.enabled')} /> cell: EnableAction,
), meta: { className: 'w-18 text-center' },
cell: EnableAction, enableHiding: false,
meta: { className: 'w-8 text-center' },
enableHiding: false,
},
{
id: 'auth_type',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('accounts.auth')} />
),
cell: OAuth2Action,
meta: { className: 'w-8' },
enableHiding: false,
enableSorting: false
},
{
id: 'account_type',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('accounts.type')} />
),
cell: ({ row }) => {
return <LongText>{row.original.account_type}</LongText>
}, },
meta: { className: 'w-8' }, {
enableHiding: false, id: 'auth_type',
enableSorting: false header: ({ column }) => (
}, <DataTableColumnHeader column={column} title={t('accounts.auth')} />
{ ),
accessorKey: "sync_interval_sec", cell: OAuth2Action,
header: ({ column }) => ( meta: { className: 'w-18 text-center' },
<DataTableColumnHeader column={column} title={t('accounts.incSync')} /> enableHiding: false,
), enableSorting: false
cell: ({ row }) => {
let account_type = row.original.account_type;
if (account_type === "NoSync") {
return <LongText className='max-w-12'>n/a</LongText>
}
return <LongText className='max-w-12'>{row.original.sync_interval_min} minutes</LongText>
}, },
meta: { className: 'w-12 text-center' }, {
enableHiding: false, id: 'account_type',
}, header: ({ column }) => (
{ <DataTableColumnHeader column={column} title={t('accounts.type')} />
id: 'running_state', ),
header: ({ column }) => ( cell: ({ row }) => {
<DataTableColumnHeader column={column} title={t('accounts.state')} /> return <LongText>{row.original.account_type}</LongText>
), },
cell: RunningStateCellAction, meta: { className: 'w-18' },
meta: { className: 'w-36' }, enableHiding: false,
enableHiding: false, enableSorting: false
},
{
accessorKey: 'created_at',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('accounts.createdAt')} />
),
cell: ({ row }) => {
const created_at = row.original.created_at;
const date = format(new Date(created_at), 'yyyy-MM-dd HH:mm:ss');
return <LongText className='max-w-36'>{date}</LongText>;
}, },
meta: { className: 'w-36' }, {
enableHiding: false, accessorKey: "sync_interval_sec",
}, header: ({ column }) => (
{ <DataTableColumnHeader column={column} title={t('accounts.incSync')} />
accessorKey: 'updated_at', ),
header: ({ column }) => ( cell: ({ row }) => {
<DataTableColumnHeader column={column} title={t('accounts.updatedAt')} /> let account_type = row.original.account_type;
), if (account_type === "NoSync") {
cell: ({ row }) => { return <LongText>n/a</LongText>
const updated_at = row.original.updated_at; }
const date = format(new Date(updated_at), 'yyyy-MM-dd HH:mm:ss'); return <LongText>{row.original.sync_interval_min} min</LongText>
return <LongText className='max-w-36'>{date}</LongText>; },
//meta: { className: 'w-18 text-center' },
enableHiding: false,
},
{
id: 'running_state',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('accounts.state')} />
),
cell: RunningStateCellAction,
meta: { className: 'w-36' },
enableHiding: false,
},
{
accessorKey: 'created_at',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('accounts.createdAt')} />
),
cell: ({ row }) => {
const created_at = row.original.created_at;
const date = format(new Date(created_at), 'yyyy-MM-dd HH:mm:ss');
return <LongText className='max-w-36'>{date}</LongText>;
},
meta: { className: 'w-36' },
enableHiding: false,
},
{
accessorKey: 'updated_at',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('accounts.updatedAt')} />
),
cell: ({ row }) => {
const updated_at = row.original.updated_at;
const date = format(new Date(updated_at), 'yyyy-MM-dd HH:mm:ss');
return <LongText className='max-w-36'>{date}</LongText>;
},
meta: { className: 'w-36' },
enableHiding: false,
},
{
id: 'actions',
cell: DataTableRowActions,
}, },
meta: { className: 'w-36' },
enableHiding: false,
},
{
id: 'actions',
cell: DataTableRowActions,
},
] ]
} }
web/src/features/accounts/index.tsx
+1 -1
View File
@@ -62,7 +62,7 @@ export default function Accounts() {
<FixedHeader /> <FixedHeader />
<Main> <Main>
<div className="mx-auto w-full max-w-7xl px-4"> <div className="mx-auto w-full max-w-[88rem] px-4">
{/* Header Section */} {/* Header Section */}
<div className='mb-2 flex items-center justify-between flex-wrap gap-x-4 gap-y-2'> <div className='mb-2 flex items-center justify-between flex-wrap gap-x-4 gap-y-2'>
<div> <div>