33 lines
3.1 KiB
TypeScript
33 lines
3.1 KiB
TypeScript
import { StrictMode, useState } from "react"
|
|
import { createRoot } from "react-dom/client"
|
|
import { GNB, GNBBrand, GNBMobileMenu, GNBMobileLink, PageHeader, PageHeaderContent, PageHeaderTitle, PageHeaderDescription, Card, CardContent, FilterBar, FilterBarSearch, FilterBarActions, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Button, DataTable, DataTableColumnHeader, useDataTable, type DataTableColumnDef } from "@hm-design/ui"
|
|
import "./index.css"
|
|
import "./hm-theme.css"
|
|
|
|
// GNB_ONLY: a small list page has one service header and mobile menu. No sidebar.
|
|
type User = { id: string; name: string; department: string }
|
|
const users: User[] = [{ id: "1", name: "김한맥", department: "디자인" }, { id: "2", name: "이한맥", department: "개발" }, { id: "3", name: "박한맥", department: "디자인" }]
|
|
const columns: DataTableColumnDef<User>[] = [{ accessorKey: "name", header: ({ column }) => <DataTableColumnHeader column={column} title="이름" /> }, { accessorKey: "department", header: "부서" }]
|
|
function PublisherList() {
|
|
const [query, setQuery] = useState("")
|
|
const [department, setDepartment] = useState("all")
|
|
const table = useDataTable({ columns, data: users, getRowId: row => row.id })
|
|
const apply = () => { table.setGlobalFilter(query || undefined); table.getColumn("department")?.setFilterValue(department === "all" ? undefined : department) }
|
|
const reset = () => { setQuery(""); setDepartment("all"); table.resetGlobalFilter(true); table.resetColumnFilters(true) }
|
|
return <div className="publisher-example">
|
|
<GNB><GNBMobileMenu title="사용자 메뉴"><GNBMobileLink href="#users" active>사용자 목록</GNBMobileLink></GNBMobileMenu><GNBBrand href="#users"><span><small>HMDesign</small><strong>사용자 관리</strong></span></GNBBrand></GNB>
|
|
<main id="users" className="publisher-example-main">
|
|
<PageHeader><PageHeaderContent><PageHeaderTitle>사용자 목록</PageHeaderTitle><PageHeaderDescription>부서와 검색어를 입력한 뒤 조회합니다.</PageHeaderDescription></PageHeaderContent></PageHeader>
|
|
<Card className="min-w-0"><CardContent><div className="grid min-w-0 gap-4">
|
|
<form onSubmit={event => { event.preventDefault(); apply() }}><FilterBar className="hm-list-search-basic">
|
|
<Select value={department} onValueChange={setDepartment}><SelectTrigger size="medium" aria-label="부서"><SelectValue /></SelectTrigger><SelectContent><SelectItem value="all">전체 부서</SelectItem><SelectItem value="디자인">디자인</SelectItem><SelectItem value="개발">개발</SelectItem></SelectContent></Select>
|
|
<FilterBarSearch value={query} onValueChange={setQuery} placeholder="이름 검색" />
|
|
<FilterBarActions><Button type="submit" variant="primary" appearance="solid">조회</Button><Button type="button" variant="cancel" appearance="outline" onClick={reset}>초기화</Button></FilterBarActions>
|
|
</FilterBar></form>
|
|
<DataTable table={table} emptyMessage="조건에 맞는 사용자가 없습니다." />
|
|
</div></CardContent></Card>
|
|
</main>
|
|
</div>
|
|
}
|
|
createRoot(document.getElementById("root")!).render(<StrictMode><PublisherList /></StrictMode>)
|