This commit is contained in:
rgrgogu
2026-05-12 12:47:13 +08:00
parent 1d94f27e61
commit 6e98ff0b5d
16 changed files with 211 additions and 20 deletions
+2 -1
View File
@@ -85,7 +85,8 @@ export default function DataTable({
getFilters: () => filtersRef.current,
getSort: () => sortRef.current,
resetSelection: () => table.resetRowSelection(),
setFilters, // ← new
setFilters,
tableInstance: table,
});
onFetch({ page: 1, limit: pagination.limit, filters: [], sort: [] });
+175
View File
@@ -0,0 +1,175 @@
import { createContext, useCallback, useContext, useState } from "react";
import api from "@/utils/api.util";
import { toast } from "sonner";
const AssetsContext = createContext(null);
export function useAssets() {
const ctx = useContext(AssetsContext);
if (!ctx) throw new Error("useAssets must be used within an AssetsProvider");
return ctx;
}
export function AssetsProvider({ children }) {
const [assets, setAssets] = useState([]);
const [pagination, setPagination] = useState(null);
const [selectedAsset, setSelectedAsset] = useState(null);
const [loading, setLoading] = useState(false);
const request = useCallback(async (fn) => {
setLoading(true);
try {
return await fn();
} catch (err) {
const message = err?.response?.data?.message ?? "Something went wrong.";
toast.error(message);
return null;
} finally {
setLoading(false);
}
}, []);
// ─── GET /api/admin/assets ────────────────────────────────────────────────
const fetchAssets = useCallback(
(params = {}) =>
request(async () => {
const res = await api.get("/admin/assets", { params });
setAssets(res.data?.result?.data ?? []);
setPagination(res.data?.result?.pagination ?? null);
return res.data;
}),
[request]
);
// ─── GET /api/admin/assets/:assetId ───────────────────────────────────────
const fetchAsset = useCallback(
(assetId) =>
request(async () => {
const res = await api.get(`/admin/assets/${assetId}`);
setSelectedAsset(res.data?.result?.data ?? null);
return res.data;
}),
[request]
);
// ─── POST /api/admin/assets ───────────────────────────────────────────────
// fields: { file (File), thumbnail? (File), uploadedBy, display_name,
// description, owner_type, owner_id, is_public, access_level,
// storage_provider, storage_bucket, storage_key }
const uploadAsset = useCallback(
({ file, thumbnail, ...rest }) =>
request(async () => {
const form = new FormData();
form.append("file", file);
if (thumbnail) form.append("thumbnail", thumbnail);
Object.entries(rest).forEach(([k, v]) => {
if (v !== undefined && v !== null) form.append(k, v);
});
const res = await api.post("/admin/assets", form, {
headers: { "Content-Type": "multipart/form-data" },
});
const asset = res.data?.result?.data ?? null;
if (asset) setAssets((prev) => [asset, ...prev]);
return res.data;
}),
[request]
);
// ─── PATCH /api/admin/assets/:assetId/thumbnail ───────────────────────────
const updateThumbnail = useCallback(
(assetId, thumbnailFile) =>
request(async () => {
const form = new FormData();
form.append("thumbnail", thumbnailFile);
const res = await api.patch(`/admin/assets/${assetId}/thumbnail`, form, {
headers: { "Content-Type": "multipart/form-data" },
});
const asset = res.data?.result?.data ?? null;
if (asset) {
setAssets((prev) => prev.map((a) => (a.asset_id === assetId ? asset : a)));
setSelectedAsset((prev) => (prev?.asset_id === assetId ? asset : prev));
}
return res.data;
}),
[request]
);
// ─── PUT /api/admin/assets/:assetId ───────────────────────────────────────
// Allowed: display_name, description, owner_type, owner_id, is_public,
// access_level, thumbnail_url, width, height, duration,
// frame_rate, bitrate, video_codec, audio_codec
const updateAsset = useCallback(
(assetId, fields) =>
request(async () => {
const res = await api.put(`/admin/assets/${assetId}`, fields);
const asset = res.data?.result?.data ?? null;
if (asset) {
setAssets((prev) => prev.map((a) => (a.asset_id === assetId ? asset : a)));
setSelectedAsset((prev) => (prev?.asset_id === assetId ? asset : prev));
}
return res.data;
}),
[request]
);
// ─── DELETE /api/admin/assets/:assetId ────────────────────────────────────
const deleteAsset = useCallback(
(assetId, { deletedBy } = {}) =>
request(async () => {
const res = await api.delete(`/admin/assets/${assetId}`, {
data: { deletedBy },
});
setAssets((prev) => prev.filter((a) => a.asset_id !== assetId));
setSelectedAsset((prev) => (prev?.asset_id === assetId ? null : prev));
return res.data;
}),
[request]
);
// ─── DELETE /api/admin/assets (bulk) ──────────────────────────────────────
const deleteAssets = useCallback(
(ids = [], { deletedBy } = {}) =>
request(async () => {
const res = await api.delete("/admin/assets", {
data: { ids, deletedBy },
});
setAssets((prev) => prev.filter((a) => !ids.includes(a.asset_id)));
return res.data;
}),
[request]
);
// ─── PATCH /api/admin/assets/:assetId/restore ─────────────────────────────
const restoreAsset = useCallback(
(assetId) =>
request(async () => {
const res = await api.patch(`/admin/assets/${assetId}/restore`);
const asset = res.data?.result?.data ?? null;
if (asset) setAssets((prev) => prev.map((a) => (a.asset_id === assetId ? asset : a)));
return res.data;
}),
[request]
);
return (
<AssetsContext.Provider value={{
assets,
pagination,
selectedAsset,
loading,
setSelectedAsset,
fetchAssets,
fetchAsset,
uploadAsset,
updateThumbnail,
updateAsset,
deleteAsset,
deleteAssets,
restoreAsset,
}}>
{children}
</AssetsContext.Provider>
);
}
+8
View File
@@ -9,6 +9,14 @@ export const USER_MANAGEMENT = [
{ key: "user-groups", label: "User Groups", icon: GitFork, link: "groups" },
],
},
{
title: "Asset Management",
description: "Manage people across different systems",
tiles: [
{ key: "users", label: "Assets", icon: Users, link: "all" },
{ key: "user-groups", label: "User Groups", icon: GitFork, link: "groups" },
],
},
]
export const CONTENT_MANAGEMENT = [
@@ -47,12 +47,14 @@ export default function ArchiveGroupTable() {
fetchArchivedGroups, pagination, exportConfig, navigate,
getFilters: () => tableRefsRef.current.getFilters(),
getSort: () => tableRefsRef.current.getSort(),
getTableInstance: () => tableRefsRef.current.tableInstance,
});
const selectionActions = buildSelectionActions({
exportConfig,
restoreGroup: (row) => setRestoreTarget(row), // single
restoreGroups: (ids) => setRestoreIds(ids), // bulk
getTableInstance: () => tableRefsRef.current.tableInstance,
});
const columns = useMemo(() => buildDataColumns(attributes, rowActions), [attributes]);
@@ -71,12 +71,14 @@ export default function GroupTable() {
onAddGroup: () => setCreateOpen(true),
getFilters: () => tableRefsRef.current.getFilters(),
getSort: () => tableRefsRef.current.getSort(),
getTableInstance: () => tableRefsRef.current.tableInstance,
});
const selectionActions = buildSelectionActions({
exportConfig,
archiveGroup: (row) => setArchiveTarget(row),
archiveGroups: (ids) => setArchiveIds(ids),
getTableInstance: () => tableRefsRef.current.tableInstance,
});
const columns = useMemo(
@@ -47,11 +47,13 @@ export default function ArchiveGroupTable() {
fetchArchivedUsers, pagination, exportConfig, navigate,
getFilters: () => tableRefsRef.current.getFilters(),
getSort: () => tableRefsRef.current.getSort(),
getTableInstance: () => tableRefsRef.current.tableInstance,
});
const selectionActions = buildSelectionActions({
exportConfig,
restoreUser: (row) => setRestoreTarget(row),
restoreUsers: (ids) => setRestoreIds(ids),
getTableInstance: () => tableRefsRef.current.tableInstance,
});
const columns = useMemo(() => buildUserColumns(attributes, rowActions), [attributes]);
@@ -60,11 +60,13 @@ export default function UsersTable() {
fetchUsers, pagination, exportConfig, navigate,
getFilters: () => tableRefsRef.current.getFilters(),
getSort: () => tableRefsRef.current.getSort(),
getTableInstance: () => tableRefsRef.current.tableInstance,
});
const selectionActions = buildSelectionActions({
exportConfig,
archiveUser: (row) => setArchiveTarget(row),
archiveUsers: (ids) => setArchiveIds(ids),
getTableInstance: () => tableRefsRef.current.tableInstance,
});
const columns = useMemo(() => buildDataColumns(attributes, rowActions), [attributes]);
@@ -8,14 +8,14 @@ import { exportTableToExcel } from "@/utils/excel.util";
* @param {Function} deps.archiveUser Archive handler from useManagement
* @param {Function} deps.deleteUser Delete handler from useManagement
*/
export function buildSelectionActions({ exportConfig, restoreGroup, restoreGroups }) {
export function buildSelectionActions({ exportConfig, restoreGroup, restoreGroups, getTableInstance }) {
return [
{
key: "export-selected",
label: "Export",
icon: <Download className="h-3.5 w-3.5" />,
onClick: (rows, table) =>
exportTableToExcel({ ...exportConfig, selectedRows: rows, tableInstance: table }),
exportTableToExcel({ ...exportConfig, selectedRows: rows, tableInstance: table ?? getTableInstance(), }),
},
{
key: "restore-selected",
@@ -9,7 +9,7 @@ import { exportTableToExcel } from "@/utils/excel.util";
* @param {Object} deps.exportConfig { allData, attributes, filename, sheetName }
* @param {Function} deps.navigate React Router navigate
*/
export function buildToolbarActions({ fetchArchivedGroups, pagination, exportConfig, navigate, getFilters, getSort }) {
export function buildToolbarActions({ fetchArchivedGroups, pagination, exportConfig, navigate, getFilters, getSort, getTableInstance }) {
return [
{
key: "refresh",
@@ -23,7 +23,7 @@ export function buildToolbarActions({ fetchArchivedGroups, pagination, exportCon
type: "button",
icon: <Download className="h-3.5 w-3.5" />,
label: "Export",
onClick: (table) => exportTableToExcel({ ...exportConfig, tableInstance: table }),
onClick: (table) => exportTableToExcel({ ...exportConfig, tableInstance: table ?? getTableInstance(), }),
},
];
}
@@ -8,14 +8,14 @@ import { exportTableToExcel } from "@/utils/excel.util";
* @param {Function} deps.archiveUser Archive handler from useManagement
* @param {Function} deps.deleteUser Delete handler from useManagement
*/
export function buildSelectionActions({ exportConfig, archiveGroup, archiveGroups }) {
export function buildSelectionActions({ exportConfig, archiveGroup, archiveGroups, getTableInstance }) {
return [
{
key: "export-selected",
label: "Export",
icon: <Download className="h-3.5 w-3.5" />,
onClick: (rows, table) =>
exportTableToExcel({ ...exportConfig, selectedRows: rows, tableInstance: table }),
exportTableToExcel({ ...exportConfig, selectedRows: rows, tableInstance: table ?? getTableInstance(), }),
},
{
key: "archive-selected",
@@ -9,7 +9,7 @@ import { exportTableToExcel } from "@/utils/excel.util";
* @param {Object} deps.exportConfig { allData, attributes, filename, sheetName }
* @param {Function} deps.navigate React Router navigate
*/
export function buildToolbarActions({ fetchGroups, pagination, exportConfig, onAddGroup, navigate, getFilters, getSort }) {
export function buildToolbarActions({ fetchGroups, pagination, exportConfig, onAddGroup, navigate, getFilters, getSort, getTableInstance }) {
return [
{
key: "refresh",
@@ -23,7 +23,7 @@ export function buildToolbarActions({ fetchGroups, pagination, exportConfig, onA
type: "button",
icon: <Download className="h-3.5 w-3.5" />,
label: "Export",
onClick: (table) => exportTableToExcel({ ...exportConfig, tableInstance: table }),
onClick: (table) => exportTableToExcel({ ...exportConfig, tableInstance: table ?? getTableInstance() }),
},
{
key: "add-group",
@@ -8,14 +8,14 @@ import { exportTableToExcel } from "@/utils/excel.util";
* @param {Function} deps.archiveUser Archive handler from useManagement
* @param {Function} deps.deleteUser Delete handler from useManagement
*/
export function buildSelectionActions({ exportConfig, restoreUser, restoreUsers }) {
export function buildSelectionActions({ exportConfig, restoreUser, restoreUsers, getTableInstance }) {
return [
{
key: "export-selected",
label: "Export",
icon: <Download className="h-3.5 w-3.5" />,
onClick: (rows, table) =>
exportTableToExcel({ ...exportConfig, selectedRows: rows, tableInstance: table }),
exportTableToExcel({ ...exportConfig, selectedRows: rows, tableInstance: table ?? getTableInstance() }),
},
{
key: "restore-selected",
@@ -9,7 +9,7 @@ import { exportTableToExcel } from "@/utils/excel.util";
* @param {Object} deps.exportConfig { allData, attributes, filename, sheetName }
* @param {Function} deps.navigate React Router navigate
*/
export function buildToolbarActions({ fetchArchivedUsers, pagination, exportConfig, navigate, getFilters, getSort }) {
export function buildToolbarActions({ fetchArchivedUsers, pagination, exportConfig, navigate, getFilters, getSort, getTableInstance }) {
return [
{
key: "refresh",
@@ -23,7 +23,7 @@ export function buildToolbarActions({ fetchArchivedUsers, pagination, exportConf
type: "button",
icon: <Download className="h-3.5 w-3.5" />,
label: "Export",
onClick: (table) => exportTableToExcel({ ...exportConfig, tableInstance: table }),
onClick: (table) => exportTableToExcel({ ...exportConfig, tableInstance: table ?? getTableInstance(), }),
},
];
}
@@ -8,14 +8,14 @@ import { exportTableToExcel } from "@/utils/excel.util";
* @param {Function} deps.archiveUser Archive handler from useManagement
* @param {Function} deps.deleteUser Delete handler from useManagement
*/
export function buildSelectionActions({ exportConfig, archiveUser, archiveUsers }) {
export function buildSelectionActions({ exportConfig, archiveUser, archiveUsers, getTableInstance }) {
return [
{
key: "export-selected",
label: "Export",
icon: <Download className="h-3.5 w-3.5" />,
onClick: (rows, table) =>
exportTableToExcel({ ...exportConfig, selectedRows: rows, tableInstance: table }),
exportTableToExcel({ ...exportConfig, selectedRows: rows, tableInstance: table ?? getTableInstance() }),
},
{
key: "archive-selected",
@@ -9,7 +9,7 @@ import { exportTableToExcel } from "@/utils/excel.util";
* @param {Object} deps.exportConfig { allData, attributes, filename, sheetName }
* @param {Function} deps.navigate React Router navigate
*/
export function buildToolbarActions({ fetchUsers, pagination, exportConfig, navigate, getFilters, getSort }) {
export function buildToolbarActions({ fetchUsers, pagination, exportConfig, navigate, getFilters, getSort, getTableInstance }) {
return [
{
key: "refresh",
@@ -23,7 +23,7 @@ export function buildToolbarActions({ fetchUsers, pagination, exportConfig, navi
type: "button",
icon: <Download className="h-3.5 w-3.5" />,
label: "Export",
onClick: (table) => exportTableToExcel({ ...exportConfig, tableInstance: table }),
onClick: (table) => exportTableToExcel({ ...exportConfig, tableInstance: table ?? getTableInstance(), }),
},
{
key: "add-user",
+2 -3
View File
@@ -89,12 +89,11 @@ export function exportTableToExcel({
sheetName = "Sheet1",
} = {}) {
const columns = resolveColumns(tableInstance, attributes);
const rawData = Array.isArray(selectedRows) && selectedRows.length > 0
const data = Array.isArray(selectedRows) && selectedRows.length > 0
? selectedRows
: allData;
// ─── Flatten rows so dot-notation keys resolve correctly ──────────────────
const data = rawData.map((row) => flattenRow(row, attributes));
console.log(columns, data)
exportToExcel({ data, columns, filename, sheetName });
}