feat(web): apply KxDataTable to holiday/program/ruleset admin (screens 5-7)
Replace hand-rolled zebra tables with KxDataTable (sort/filter/CSV, per-column control) on HolidayAdminPage, ProgramAdminPage and RulesetVersionsPage. Manage columns excluded from CSV/sort/search; empty states delegated to the table. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
parent
9144186e8a
commit
465ebd8e19
@ -7,11 +7,12 @@
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
|
||||
import { ErrorState, Skeleton } from '../../components/ui/States';
|
||||
import { Button } from '../../components/ui/Button';
|
||||
import { KxDataTable, type KxColumn } from '../../components/KxDataTable';
|
||||
import { IconPlus } from '../../components/ui/icons';
|
||||
import { errMessage, useToast } from '../work/workShared';
|
||||
import { holidayApi, type HolidayCreateBody } from './holidayApi';
|
||||
import { holidayApi, type Holiday, type HolidayCreateBody } from './holidayApi';
|
||||
import './admin-modules.css';
|
||||
|
||||
/** 데이터 미존재 시 폴백 연도 목록(V41 시드 범위). */
|
||||
@ -72,6 +73,37 @@ export function HolidayAdminPage() {
|
||||
|
||||
const count = useMemo(() => list.filter((h) => h.isHoliday).length, [list]);
|
||||
|
||||
const columns = useMemo<KxColumn<Holiday>[]>(
|
||||
() => [
|
||||
{ key: 'ymd', header: t('holiday.date'), value: (h) => h.ymd,
|
||||
render: (h) => <span className="kx-adm-mono" style={weekdayIndex(h.ymd) === 0 ? { color: 'var(--color-error)' } : undefined}>{h.ymd}</span> },
|
||||
{ key: 'weekday', header: t('holiday.weekday'), sortable: false, value: (h) => t(`common.weekday.${weekdayIndex(h.ymd)}`),
|
||||
render: (h) => <span style={weekdayIndex(h.ymd) === 0 ? { color: 'var(--color-error)' } : undefined}>{t(`common.weekday.${weekdayIndex(h.ymd)}`)}</span> },
|
||||
{ key: 'name', header: t('holiday.name'), value: (h) => h.name,
|
||||
render: (h) => <span className="kx-adm-tbl__strong" style={{ color: 'var(--color-error)' }}>{h.name}</span> },
|
||||
{ key: 'type', header: t('holiday.type'), value: (h) => (h.isSubstitute ? t('holiday.substitute') : t('holiday.legal')),
|
||||
render: (h) => h.isSubstitute
|
||||
? <span className="kx-adm-pill kx-adm-pill--neutral">{t('holiday.substitute')}</span>
|
||||
: <span className="kx-adm-muted">{t('holiday.legal')}</span> },
|
||||
{ key: 'status', header: t('holiday.status'), value: (h) => (h.isHoliday ? t('holiday.on') : t('holiday.off')),
|
||||
render: (h) => <span className={`kx-adm-pill kx-adm-pill--${h.isHoliday ? 'success' : 'neutral'}`}>{h.isHoliday ? t('holiday.on') : t('holiday.off')}</span> },
|
||||
{ key: 'manage', header: t('holiday.manage'), csv: false, sortable: false, searchable: false,
|
||||
thClassName: 'kx-adm-col-manage', tdClassName: 'kx-adm-col-manage',
|
||||
render: (h) => (
|
||||
<div className="kx-adm-tbl__actions">
|
||||
<Button variant="ghost" disabled={toggleM.isPending} onClick={() => toggleM.mutate({ ymd: h.ymd, isHoliday: !h.isHoliday })}>
|
||||
{h.isHoliday ? t('holiday.setOff') : t('holiday.setOn')}
|
||||
</Button>
|
||||
<Button variant="ghost" className="kx-adm-del" disabled={delM.isPending}
|
||||
onClick={() => { if (window.confirm(t('holiday.deleteConfirm', { name: h.name }))) delM.mutate(h.ymd); }}>
|
||||
{t('holiday.delete')}
|
||||
</Button>
|
||||
</div>
|
||||
) },
|
||||
],
|
||||
[t, toggleM, delM],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="kx-page kx-adm">
|
||||
<header className="kx-adm__head">
|
||||
@ -106,83 +138,23 @@ export function HolidayAdminPage() {
|
||||
)}
|
||||
|
||||
{!listQ.isLoading && !listQ.isError && (
|
||||
list.length === 0 ? (
|
||||
<EmptyState title={t('holiday.emptyTitle')} description={t('holiday.emptyDesc')} />
|
||||
) : (
|
||||
<section className="kx-card">
|
||||
<div className="kx-adm-codes__head">
|
||||
<h2>{t('holiday.listOf', { y: year })}</h2>
|
||||
<p className="kx-adm-muted">{t('holiday.count', { n: count })}</p>
|
||||
</div>
|
||||
<div className="kx-table-scroll">
|
||||
<table className="kx-table kx-table--zebra kx-adm-tbl">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{t('holiday.date')}</th>
|
||||
<th>{t('holiday.weekday')}</th>
|
||||
<th>{t('holiday.name')}</th>
|
||||
<th>{t('holiday.type')}</th>
|
||||
<th>{t('holiday.status')}</th>
|
||||
<th style={{ textAlign: 'right' }}>{t('holiday.manage')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{list.map((h) => {
|
||||
const dow = weekdayIndex(h.ymd);
|
||||
const isSun = dow === 0;
|
||||
return (
|
||||
<tr key={h.ymd}>
|
||||
<td className="kx-adm-mono" style={isSun ? { color: 'var(--color-error)' } : undefined}>
|
||||
{h.ymd}
|
||||
</td>
|
||||
<td style={isSun ? { color: 'var(--color-error)' } : undefined}>
|
||||
{t(`common.weekday.${dow}`)}
|
||||
</td>
|
||||
<td className="kx-adm-tbl__strong" style={{ color: 'var(--color-error)' }}>
|
||||
{h.name}
|
||||
</td>
|
||||
<td>
|
||||
{h.isSubstitute ? (
|
||||
<span className="kx-adm-pill kx-adm-pill--neutral">{t('holiday.substitute')}</span>
|
||||
) : (
|
||||
<span className="kx-adm-muted">{t('holiday.legal')}</span>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
<span className={`kx-adm-pill kx-adm-pill--${h.isHoliday ? 'success' : 'neutral'}`}>
|
||||
{h.isHoliday ? t('holiday.on') : t('holiday.off')}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div className="kx-adm-tbl__actions">
|
||||
<Button
|
||||
variant="ghost"
|
||||
disabled={toggleM.isPending}
|
||||
onClick={() => toggleM.mutate({ ymd: h.ymd, isHoliday: !h.isHoliday })}
|
||||
>
|
||||
{h.isHoliday ? t('holiday.setOff') : t('holiday.setOn')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="kx-adm-del"
|
||||
disabled={delM.isPending}
|
||||
onClick={() => {
|
||||
if (window.confirm(t('holiday.deleteConfirm', { name: h.name })))
|
||||
delM.mutate(h.ymd);
|
||||
}}
|
||||
>
|
||||
{t('holiday.delete')}
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="kx-adm-codes__tbl">
|
||||
<KxDataTable
|
||||
columns={columns}
|
||||
rows={list}
|
||||
rowKey={(h) => h.ymd}
|
||||
csvFileName={`holidays_${year}`}
|
||||
ariaLabel={t('holiday.listOf', { y: year })}
|
||||
emptyTitle={t('holiday.emptyTitle')}
|
||||
emptyDescription={t('holiday.emptyDesc')}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
)}
|
||||
|
||||
{adding && (
|
||||
|
||||
@ -2,11 +2,12 @@
|
||||
* W12 시스템관리 — 프로그램(화면) 등록부.
|
||||
* 정본: GET/POST /api/admin/programs · DELETE /{id} (ProgramController). 라우트/화면 마스터(메뉴와 연결).
|
||||
*/
|
||||
import { useState } from 'react';
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
|
||||
import { ErrorState, Skeleton } from '../../components/ui/States';
|
||||
import { Button } from '../../components/ui/Button';
|
||||
import { KxDataTable, type KxColumn } from '../../components/KxDataTable';
|
||||
import { IconPlus, IconSearch } from '../../components/ui/icons';
|
||||
import { errMessage, useToast } from '../work/workShared';
|
||||
import { programApi, PROGRAM_TYPES, type Program, type ProgramSaveBody } from './systemBasicsApi';
|
||||
@ -38,6 +39,31 @@ export function ProgramAdminPage() {
|
||||
onError: (e) => show(errMessage(e)),
|
||||
});
|
||||
|
||||
const columns = useMemo<KxColumn<Program>[]>(
|
||||
() => [
|
||||
{ key: 'name', header: t('program.colName'), value: (r) => r.programName },
|
||||
{ key: 'type', header: t('program.colType'), value: (r) => r.programType,
|
||||
render: (r) => <span className="kx-adm-pill kx-adm-pill--neutral">{r.programType}</span> },
|
||||
{ key: 'url', header: t('program.colUrl'), value: (r) => r.programUrl ?? '',
|
||||
render: (r) => <span className="kx-adm-mono">{r.programUrl ?? '-'}</span> },
|
||||
{ key: 'category', header: t('program.colCategory'), value: (r) => r.category ?? '', render: (r) => r.category ?? '-' },
|
||||
{ key: 'use', header: t('program.colUse'), value: (r) => (r.useYn === 'N' ? t('sysadmin.noUse') : t('sysadmin.use')),
|
||||
render: (r) => (r.useYn === 'N' ? t('sysadmin.noUse') : t('sysadmin.use')) },
|
||||
{ key: 'manage', header: t('sysadmin.actions'), csv: false, sortable: false, searchable: false,
|
||||
thClassName: 'kx-adm-col-manage', tdClassName: 'kx-adm-col-manage',
|
||||
render: (r) => (
|
||||
<div className="kx-adm-tbl__actions">
|
||||
<Button variant="ghost" onClick={() => setEditing(r)}>{t('sysadmin.edit')}</Button>
|
||||
<Button variant="ghost" className="kx-adm-del" disabled={delM.isPending}
|
||||
onClick={() => { if (window.confirm(t('program.deleteConfirm', { name: r.programName }))) delM.mutate(r.id); }}>
|
||||
{t('sysadmin.delete')}
|
||||
</Button>
|
||||
</div>
|
||||
) },
|
||||
],
|
||||
[t, delM],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="kx-page kx-adm">
|
||||
<header className="kx-adm__head">
|
||||
@ -66,42 +92,16 @@ export function ProgramAdminPage() {
|
||||
|
||||
{!q.isLoading && !q.isError && (
|
||||
<section className="kx-card kx-adm-table-card">
|
||||
{rows.length === 0 ? (
|
||||
<EmptyState title={t('program.emptyTitle')} description={t('program.emptyDesc')} />
|
||||
) : (
|
||||
<div className="kx-table-scroll">
|
||||
<table className="kx-table kx-table--zebra">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{t('program.colName')}</th>
|
||||
<th>{t('program.colType')}</th>
|
||||
<th>{t('program.colUrl')}</th>
|
||||
<th>{t('program.colCategory')}</th>
|
||||
<th>{t('program.colUse')}</th>
|
||||
<th aria-label={t('sysadmin.actions')} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((r) => (
|
||||
<tr key={r.id}>
|
||||
<td>{r.programName}</td>
|
||||
<td><span className="kx-adm-pill kx-adm-pill--neutral">{r.programType}</span></td>
|
||||
<td className="kx-adm-mono">{r.programUrl ?? '-'}</td>
|
||||
<td>{r.category ?? '-'}</td>
|
||||
<td>{r.useYn === 'N' ? t('sysadmin.noUse') : t('sysadmin.use')}</td>
|
||||
<td className="kx-adm-tbl__actions">
|
||||
<Button variant="ghost" onClick={() => setEditing(r)}>{t('sysadmin.edit')}</Button>
|
||||
<Button variant="ghost" className="kx-adm-del" disabled={delM.isPending}
|
||||
onClick={() => { if (window.confirm(t('program.deleteConfirm', { name: r.programName }))) delM.mutate(r.id); }}>
|
||||
{t('sysadmin.delete')}
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
<KxDataTable
|
||||
columns={columns}
|
||||
rows={rows}
|
||||
rowKey={(r) => r.id}
|
||||
searchable={false}
|
||||
csvFileName="programs"
|
||||
ariaLabel={t('program.title')}
|
||||
emptyTitle={t('program.emptyTitle')}
|
||||
emptyDescription={t('program.emptyDesc')}
|
||||
/>
|
||||
</section>
|
||||
)}
|
||||
|
||||
|
||||
@ -3,11 +3,12 @@
|
||||
* 데이터 원천: 실 API(읽기 전용) — GET /api/admin/rulesets(요약 목록) · GET /api/admin/rulesets/{name}(규칙 전문).
|
||||
* 백엔드는 룰셋을 classpath 리소스(resources/rulesets/*.json)로 버전 관리하며 편집 엔드포인트는 없다(규정 개정=리소스 교체).
|
||||
*/
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import type { TFunction } from 'i18next';
|
||||
import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
|
||||
import { KxDataTable, type KxColumn } from '../../components/KxDataTable';
|
||||
import { rulesetApi, type RulesetRule } from './adminModulesApi';
|
||||
import './admin-modules.css';
|
||||
|
||||
@ -41,6 +42,29 @@ export function RulesetVersionsPage() {
|
||||
|
||||
const rules: RulesetRule[] = detailQ.data?.rules ?? [];
|
||||
|
||||
const ruleColumns = useMemo<KxColumn<RulesetRule>[]>(
|
||||
() => [
|
||||
{ key: 'name', header: t('ruleset.colRuleName'), value: (r) => `${r.label ?? r.code} ${r.code}`,
|
||||
render: (r) => (
|
||||
<>
|
||||
<span className="kx-adm-rulename">{r.label ?? r.code}</span>
|
||||
<span className="kx-adm-rulecode">{r.code}</span>
|
||||
</>
|
||||
) },
|
||||
{ key: 'value', header: t('ruleset.colValue'), value: (r) => formatValue(t, r),
|
||||
render: (r) => <span className="kx-adm-mono">{formatValue(t, r)}</span> },
|
||||
{ key: 'logic', header: t('ruleset.colLogic'), value: (r) => formatLogic(t, r),
|
||||
render: (r) => <span className="kx-adm-muted">{formatLogic(t, r)}</span> },
|
||||
{ key: 'severity', header: t('ruleset.colSeverity'), value: (r) => (r.severity === 'block' ? t('ruleset.block') : t('ruleset.warn')),
|
||||
render: (r) => (
|
||||
<span className={`kx-adm-pill kx-adm-pill--${r.severity === 'block' ? 'error' : 'warn'}`}>
|
||||
{r.severity === 'block' ? t('ruleset.block') : t('ruleset.warn')}
|
||||
</span>
|
||||
) },
|
||||
],
|
||||
[t],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="kx-page kx-adm">
|
||||
<header className="kx-adm__head">
|
||||
@ -121,36 +145,14 @@ export function RulesetVersionsPage() {
|
||||
)}
|
||||
|
||||
{rules.length > 0 && (
|
||||
<div className="kx-table-scroll">
|
||||
<table className="kx-table kx-table--zebra kx-adm-rules">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{t('ruleset.colRuleName')}</th>
|
||||
<th>{t('ruleset.colValue')}</th>
|
||||
<th>{t('ruleset.colLogic')}</th>
|
||||
<th>{t('ruleset.colSeverity')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rules.map((r) => (
|
||||
<tr key={r.code}>
|
||||
<td>
|
||||
<span className="kx-adm-rulename">{r.label ?? r.code}</span>
|
||||
<span className="kx-adm-rulecode">{r.code}</span>
|
||||
</td>
|
||||
<td className="kx-adm-mono">{formatValue(t, r)}</td>
|
||||
<td className="kx-adm-muted">{formatLogic(t, r)}</td>
|
||||
<td>
|
||||
<span
|
||||
className={`kx-adm-pill kx-adm-pill--${r.severity === 'block' ? 'error' : 'warn'}`}
|
||||
>
|
||||
{r.severity === 'block' ? t('ruleset.block') : t('ruleset.warn')}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="kx-adm-rules-dt">
|
||||
<KxDataTable
|
||||
columns={ruleColumns}
|
||||
rows={rules}
|
||||
rowKey={(r) => r.code}
|
||||
csvFileName={`ruleset_${activeName ?? 'rules'}`}
|
||||
ariaLabel={t('ruleset.ruleList')}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user