|
1 | 1 | import { useState } from 'react'; |
2 | 2 |
|
3 | | -import { Toolbar, Header, Pagination, DataTable } from '~/shared/components'; |
4 | | -import { useTableState } from '~/shared/hooks'; |
| 3 | +import type { GraduationUserStatus } from '~/shared/api/student/fetchGraduationUsers'; |
| 4 | +import { DataTable, Header, Pagination, Toolbar } from '~/shared/components'; |
| 5 | +import { |
| 6 | + DELETE_ALERT, |
| 7 | + DELETE_CONFIRM_TITLE, |
| 8 | +} from '~/shared/components/Toolbar/toolbarTexts'; |
| 9 | +import { |
| 10 | + useFetchGraduationUsers, |
| 11 | + useRemoveGraduationUsers, |
| 12 | + useToast, |
| 13 | +} from '~/shared/hooks'; |
| 14 | +import { downloadGraduationUsersExcel } from '~/shared/utils'; |
5 | 15 |
|
6 | | -import { allManagementColumns } from '../constants/allManagementColumns.tsx'; |
7 | | -import { MOCK_ROWS } from '../mock/allManagement'; |
| 16 | +import { allManagementColumns } from '../constants/allManagementColumns'; |
| 17 | +import { |
| 18 | + LOADING_TEXT, |
| 19 | + STATUS_FINAL_NOT_SUBMITTED, |
| 20 | + STATUS_MID_NOT_SUBMITTED, |
| 21 | + STATUS_NOT_SUBMITTED, |
| 22 | + STATUS_SUBMITTED, |
| 23 | + STATUS_SUBMITTED_APPROVED, |
| 24 | + STATUS_UNKNOWN, |
| 25 | + TITLE_ALL_MANAGEMENT, |
| 26 | + TYPE_LABEL, |
| 27 | + TYPE_UNKNOWN, |
| 28 | +} from '../constants/allManagementTexts'; |
8 | 29 | import * as style from '../styles/AllManagementPage.css.ts'; |
9 | 30 | import type { AllManagementRow } from '../types/allManagement'; |
10 | 31 | import UserDetailModal from './UserDetailModal/UserDetailModal'; |
11 | 32 |
|
12 | | -import { handleDownload } from '~/pages/admin/all/utils'; |
| 33 | +function formatStatus(status?: GraduationUserStatus | null) { |
| 34 | + if (!status) return STATUS_UNKNOWN; |
| 35 | + if (status.type === 'CERTIFICATE') { |
| 36 | + if (!status.submitted) return STATUS_NOT_SUBMITTED; |
| 37 | + return status.approval ? STATUS_SUBMITTED_APPROVED : STATUS_SUBMITTED; |
| 38 | + } |
| 39 | + |
| 40 | + if (!status.finalThesis.submitted) return STATUS_FINAL_NOT_SUBMITTED; |
| 41 | + if (!status.midThesis.submitted) return STATUS_MID_NOT_SUBMITTED; |
| 42 | + if (status.finalThesis.approval && status.midThesis.approval) { |
| 43 | + return STATUS_SUBMITTED_APPROVED; |
| 44 | + } |
| 45 | + return STATUS_SUBMITTED; |
| 46 | +} |
13 | 47 |
|
14 | 48 | export default function AllManagementPage() { |
15 | 49 | const [isModalOpen, setIsModalOpen] = useState(false); |
| 50 | + const [page, setPage] = useState(1); |
| 51 | + const [pageSize, setPageSize] = useState(10); |
| 52 | + const [query, setQuery] = useState(''); |
| 53 | + const [selectedIds, setSelectedIds] = useState<number[]>([]); |
| 54 | + const { toast, confirm } = useToast(); |
16 | 55 |
|
17 | | - // const [selectedId, setSelectedId] = useState<string>(''); |
18 | | - const onNameClick = () => { |
19 | | - setIsModalOpen(true); |
| 56 | + const resetSelection = () => { |
| 57 | + setSelectedIds([]); |
| 58 | + setPage(1); |
| 59 | + }; |
| 60 | + |
| 61 | + const { removeGraduationUsers } = useRemoveGraduationUsers({ |
| 62 | + onSuccess: resetSelection, |
| 63 | + }); |
| 64 | + |
| 65 | + const { data, isLoading } = useFetchGraduationUsers({ |
| 66 | + page: page - 1, |
| 67 | + size: pageSize, |
| 68 | + name: query || undefined, |
| 69 | + }); |
| 70 | + |
| 71 | + const rows: AllManagementRow[] = data |
| 72 | + ? data.contents.map((user, idx) => { |
| 73 | + const type = TYPE_LABEL[user.graduationType] ?? TYPE_UNKNOWN; |
| 74 | + |
| 75 | + return { |
| 76 | + id: user.id, |
| 77 | + no: (page - 1) * pageSize + idx + 1, |
| 78 | + studentId: user.studentId, |
| 79 | + name: user.name, |
| 80 | + type, |
| 81 | + status: formatStatus(user.status), |
| 82 | + }; |
| 83 | + }) |
| 84 | + : []; |
| 85 | + |
| 86 | + const handleDeleteSelected = () => { |
| 87 | + if (selectedIds.length === 0) return; |
| 88 | + confirm({ |
| 89 | + title: DELETE_CONFIRM_TITLE, |
| 90 | + content: DELETE_ALERT, |
| 91 | + okText: '삭제', |
| 92 | + cancelText: '취소', |
| 93 | + onOk: async () => { |
| 94 | + try { |
| 95 | + await removeGraduationUsers(selectedIds); |
| 96 | + toast.success('선택한 학생을 삭제했습니다.'); |
| 97 | + } catch (error) { |
| 98 | + toast.error( |
| 99 | + error instanceof Error ? error.message : '삭제에 실패했습니다.', |
| 100 | + ); |
| 101 | + } |
| 102 | + }, |
| 103 | + }); |
20 | 104 | }; |
21 | 105 |
|
22 | | - const columns = allManagementColumns(onNameClick); |
| 106 | + const handleDownloadExcel = async () => { |
| 107 | + try { |
| 108 | + await downloadGraduationUsersExcel(); |
| 109 | + } catch (error) { |
| 110 | + toast.error( |
| 111 | + error instanceof Error ? error.message : '다운로드에 실패했습니다.', |
| 112 | + ); |
| 113 | + } |
| 114 | + }; |
23 | 115 |
|
24 | | - const st = useTableState<AllManagementRow>(MOCK_ROWS, r => r.id, { |
25 | | - pageSize: 10, |
26 | | - keys: ['studentId', 'name', 'type', 'status'], |
| 116 | + const columns = allManagementColumns(() => { |
| 117 | + setIsModalOpen(true); |
27 | 118 | }); |
| 119 | + const totalItems = data?.pageable.totalElements ?? 0; |
| 120 | + |
| 121 | + const toggleAll = () => { |
| 122 | + const pageIds = rows.map(r => r.id); |
| 123 | + const allChecked = |
| 124 | + pageIds.length > 0 && pageIds.every(id => selectedIds.includes(id)); |
| 125 | + setSelectedIds(prev => |
| 126 | + allChecked |
| 127 | + ? prev.filter(id => !pageIds.includes(id)) |
| 128 | + : Array.from(new Set([...prev, ...pageIds])), |
| 129 | + ); |
| 130 | + }; |
| 131 | + |
| 132 | + const toggleOne = (id: string | number) => { |
| 133 | + const numericId = Number(id); |
| 134 | + setSelectedIds(prev => |
| 135 | + prev.includes(numericId) |
| 136 | + ? prev.filter(x => x !== numericId) |
| 137 | + : [...prev, numericId], |
| 138 | + ); |
| 139 | + }; |
28 | 140 |
|
29 | 141 | return ( |
30 | 142 | <div className={style.root}> |
31 | 143 | <div className={style.container}> |
32 | | - <Header title='대상자 전체 관리' /> |
| 144 | + <Header title={TITLE_ALL_MANAGEMENT} /> |
33 | 145 |
|
34 | 146 | <Toolbar |
35 | | - selectedCount={st.selected.length} |
36 | | - query={st.query} |
| 147 | + selectedCount={selectedIds.length} |
| 148 | + query={query} |
37 | 149 | onQueryChange={v => { |
38 | | - st.setQuery(v); |
39 | | - st.resetToFirstPage(); |
| 150 | + setQuery(v); |
| 151 | + setPage(1); |
40 | 152 | }} |
41 | 153 | onApprove={() => {}} |
42 | | - onDownload={() => handleDownload(st.selected, st.filtered)} |
43 | | - onAddStudent={() => {}} |
| 154 | + onDeleteSelected={handleDeleteSelected} |
| 155 | + onDownload={handleDownloadExcel} |
44 | 156 | disabledApprove={true} |
45 | 157 | /> |
46 | 158 |
|
47 | 159 | <div className={style.card}> |
48 | 160 | <DataTable<AllManagementRow> |
49 | | - rows={st.pageRows} |
| 161 | + rows={rows} |
50 | 162 | getRowId={r => r.id} |
51 | 163 | columns={columns} |
52 | | - allChecked={st.allChecked} |
53 | | - onToggleAll={st.toggleAll} |
54 | | - selectedIds={st.selected} |
55 | | - onToggleOne={id => st.toggleOne(id as number)} |
| 164 | + onToggleAll={toggleAll} |
| 165 | + selectedIds={selectedIds} |
| 166 | + onToggleOne={toggleOne} |
| 167 | + emptyText={isLoading ? LOADING_TEXT : undefined} |
56 | 168 | /> |
57 | 169 | </div> |
58 | 170 | <UserDetailModal |
59 | 171 | isModalOpen={isModalOpen} |
60 | 172 | setIsModalOpen={setIsModalOpen} |
61 | 173 | /> |
62 | 174 | <Pagination |
63 | | - page={st.page} |
64 | | - pageSize={st.pageSize} |
65 | | - totalItems={st.filtered.length} |
66 | | - onGoto={st.setPage} |
67 | | - onPageSizeChange={size => st.setPageSize(size)} |
| 175 | + page={page} |
| 176 | + pageSize={pageSize} |
| 177 | + totalItems={totalItems} |
| 178 | + onGoto={setPage} |
| 179 | + onPageSizeChange={size => { |
| 180 | + setPageSize(size); |
| 181 | + setPage(1); |
| 182 | + }} |
68 | 183 | /> |
69 | 184 | </div> |
70 | 185 | </div> |
|
0 commit comments