import { useCallback, useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { Avatar, Button, Empty, Modal, notification, Space, Table, Tooltip, Typography, type TableProps } from "antd"; import { PageHeader } from "@ant-design/pro-components"; import { Copy as CopyIcon, Pencil as PencilIcon, Plus as PlusIcon, Trash2 as Trash2Icon } from "lucide-react"; import dayjs from "dayjs"; import { ClientResponseError } from "pocketbase"; import AccessEditModal from "@/components/access/AccessEditModal"; import { accessProvidersMap, type AccessModel } from "@/domain/access"; import { useAccessStore } from "@/stores/access"; const AccessList = () => { const { t } = useTranslation(); const [modalApi, ModelContextHolder] = Modal.useModal(); const [notificationApi, NotificationContextHolder] = notification.useNotification(); const { accesses, fetchAccesses, deleteAccess } = useAccessStore(); const [loading, setLoading] = useState(false); const tableColumns: TableProps["columns"] = [ { key: "$index", align: "center", fixed: "left", width: 50, render: (_, __, index) => (page - 1) * pageSize + index + 1, }, { key: "name", title: t("access.props.name"), ellipsis: true, render: (_, record) => <>{record.name}, }, { key: "provider", title: t("access.props.provider"), ellipsis: true, render: (_, record) => { return ( {t(accessProvidersMap.get(record.configType)?.name ?? "")} ); }, }, { key: "createdAt", title: t("access.props.created_at"), ellipsis: true, render: (_, record) => { return dayjs(record.created!).format("YYYY-MM-DD HH:mm:ss"); }, }, { key: "updatedAt", title: t("access.props.updated_at"), ellipsis: true, render: (_, record) => { return dayjs(record.updated!).format("YYYY-MM-DD HH:mm:ss"); }, }, { key: "$action", align: "end", fixed: "right", width: 120, render: (_, record) => ( <> } />, ]} /> columns={tableColumns} dataSource={tableData} loading={loading} locale={{ emptyText: , }} pagination={{ current: page, pageSize: pageSize, total: tableTotal, showSizeChanger: true, onChange: (page: number, pageSize: number) => { setPage(page); setPageSize(pageSize); }, onShowSizeChange: (page: number, pageSize: number) => { setPage(page); setPageSize(pageSize); }, }} rowKey={(record: AccessModel) => record.id} scroll={{ x: "max(100%, 960px)" }} /> ); }; export default AccessList;