@premieroctet/next-admin
Version:
Next-Admin provides a customizable and turnkey admin dashboard for applications built with Next.js and powered by the Prisma ORM. It aims to simplify the development process by providing a turnkey admin system that can be easily integrated into your proje
350 lines (349 loc) • 19.9 kB
JavaScript
"use client";
;
var __webpack_require__ = {};
(()=>{
__webpack_require__.n = (module)=>{
var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
__webpack_require__.d(getter, {
a: getter
});
return getter;
};
})();
(()=>{
__webpack_require__.d = (exports1, definition)=>{
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
enumerable: true,
get: definition[key]
});
};
})();
(()=>{
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
})();
(()=>{
__webpack_require__.r = (exports1)=>{
if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
value: 'Module'
});
Object.defineProperty(exports1, '__esModule', {
value: true
});
};
})();
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
default: ()=>components_List
});
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
const outline_namespaceObject = require("@heroicons/react/24/outline");
const external_clsx_namespaceObject = require("clsx");
var external_clsx_default = /*#__PURE__*/ __webpack_require__.n(external_clsx_namespaceObject);
const external_lodash_debounce_namespaceObject = require("lodash.debounce");
var external_lodash_debounce_default = /*#__PURE__*/ __webpack_require__.n(external_lodash_debounce_namespaceObject);
const external_react_namespaceObject = require("react");
const external_tailwind_merge_namespaceObject = require("tailwind-merge");
const external_config_js_namespaceObject = require("../config.js");
const ClientActionDialogContext_js_namespaceObject = require("../context/ClientActionDialogContext.js");
var ClientActionDialogContext_js_default = /*#__PURE__*/ __webpack_require__.n(ClientActionDialogContext_js_namespaceObject);
const ConfigContext_js_namespaceObject = require("../context/ConfigContext.js");
const I18nContext_js_namespaceObject = require("../context/I18nContext.js");
const useDataColumns_js_namespaceObject = require("../hooks/useDataColumns.js");
var useDataColumns_js_default = /*#__PURE__*/ __webpack_require__.n(useDataColumns_js_namespaceObject);
const useDeleteAction_js_namespaceObject = require("../hooks/useDeleteAction.js");
const useRouterInternal_js_namespaceObject = require("../hooks/useRouterInternal.js");
const tools_js_namespaceObject = require("../utils/tools.js");
const external_ActionDropdownItem_js_namespaceObject = require("./ActionDropdownItem.js");
var external_ActionDropdownItem_js_default = /*#__PURE__*/ __webpack_require__.n(external_ActionDropdownItem_js_namespaceObject);
const external_DataTable_js_namespaceObject = require("./DataTable.js");
const external_Filters_js_namespaceObject = require("./Filters.js");
var external_Filters_js_default = /*#__PURE__*/ __webpack_require__.n(external_Filters_js_namespaceObject);
const external_ListHeader_js_namespaceObject = require("./ListHeader.js");
var external_ListHeader_js_default = /*#__PURE__*/ __webpack_require__.n(external_ListHeader_js_namespaceObject);
const external_Message_js_namespaceObject = require("./Message.js");
const external_Pagination_js_namespaceObject = require("./Pagination.js");
const external_TableRowsIndicator_js_namespaceObject = require("./TableRowsIndicator.js");
var external_TableRowsIndicator_js_default = /*#__PURE__*/ __webpack_require__.n(external_TableRowsIndicator_js_namespaceObject);
const Button_js_namespaceObject = require("./radix/Button.js");
var Button_js_default = /*#__PURE__*/ __webpack_require__.n(Button_js_namespaceObject);
const Checkbox_js_namespaceObject = require("./radix/Checkbox.js");
var Checkbox_js_default = /*#__PURE__*/ __webpack_require__.n(Checkbox_js_namespaceObject);
const Dropdown_js_namespaceObject = require("./radix/Dropdown.js");
const Select_js_namespaceObject = require("./radix/Select.js");
const itemsPerPageSizes = [
10,
25,
50,
100
];
function List({ resource, data, total, actions, resourcesIdProperty, title, icon, schema, clientActionsComponents, rawData, listFilterOptions }) {
const { router, query } = (0, useRouterInternal_js_namespaceObject.useRouterInternal)();
const [isPending, startTransition] = (0, external_react_namespaceObject.useTransition)();
const [_orderPending, startOrderTransition] = (0, external_react_namespaceObject.useTransition)();
const { options, apiBasePath } = (0, ConfigContext_js_namespaceObject.useConfig)();
const [rowSelection, setRowSelection] = (0, external_react_namespaceObject.useState)({});
const pageIndex = "string" == typeof query.page ? Number(query.page) - 1 : 0;
const modelDefaultListSize = options?.model?.[resource]?.list?.defaultListSize;
const pageSize = Number(query.itemsPerPage) || modelDefaultListSize || external_config_js_namespaceObject.ITEMS_PER_PAGE;
const modelOptions = options?.["model"]?.[resource];
const sortColumn = modelOptions?.list?.orderField ? void 0 : query.sortColumn;
const sortDirection = modelOptions?.list?.orderField ? void 0 : query.sortDirection;
const { deleteItems } = (0, useDeleteAction_js_namespaceObject.useDeleteAction)(resource);
const { t } = (0, I18nContext_js_namespaceObject.useI18n)();
const columns = useDataColumns_js_default()({
data,
resource,
sortable: !modelOptions?.list?.orderField,
resourcesIdProperty,
sortColumn,
sortDirection,
rawData
});
const allListSizes = (0, external_react_namespaceObject.useMemo)(()=>{
if (modelDefaultListSize) return [
...itemsPerPageSizes,
modelDefaultListSize
].sort((a, b)=>a - b);
return itemsPerPageSizes;
}, [
modelDefaultListSize
]);
let onSearchChange;
const [optimisticData, optimisticOrderData] = (0, external_react_namespaceObject.useOptimistic)(data, (prevData, newData)=>{
if (!modelOptions?.list?.orderField) return prevData;
return newData;
});
const hasDeletePermission = !modelOptions?.permissions || modelOptions?.permissions?.includes("delete");
if (!(modelOptions?.list?.search && modelOptions?.list?.search?.length === 0)) onSearchChange = external_lodash_debounce_default()((e)=>{
startTransition(()=>{
router?.push({
pathname: location.pathname,
query: {
...query,
search: e.target.value
}
});
});
}, 300);
const checkboxColumn = {
id: "__nextadmin-select-row",
header: ({ table })=>{
if (0 === table.getRowModel().rows.length) return null;
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: "px-1",
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Checkbox_js_default(), {
checked: table.getIsAllRowsSelected(),
indeterminate: table.getIsSomeRowsSelected(),
onChange: table.getToggleAllRowsSelectedHandler()
})
});
},
cell: ({ row })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: "px-1",
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Checkbox_js_default(), {
checked: row.getIsSelected(),
indeterminate: row.getIsSomeSelected(),
onChange: row.getToggleSelectedHandler(),
disabled: !row.getCanSelect(),
onClick: (e)=>e.stopPropagation()
})
})
};
const actionsColumn = {
id: "__nextadmin-actions",
header: ()=>null,
cell: ({ row })=>{
const idProperty = resourcesIdProperty[resource];
if (!hasDeletePermission) return;
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(Dropdown_js_namespaceObject.Dropdown, {
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Dropdown_js_namespaceObject.DropdownTrigger, {
asChild: true,
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Button_js_default(), {
variant: "ghost",
size: "sm",
className: "hover:bg-nextadmin-background-emphasis !px-2 py-2",
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(outline_namespaceObject.EllipsisVerticalIcon, {
className: "text-nextadmin-content-default dark:text-dark-nextadmin-content-default h-6 w-6"
})
})
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Dropdown_js_namespaceObject.DropdownBody, {
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(Dropdown_js_namespaceObject.DropdownContent, {
side: "left",
align: "start",
sideOffset: 5,
className: "z-50 space-y-1.5 px-2 py-2",
children: [
actions?.map((action)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ActionDropdownItem_js_default(), {
action: action,
resourceIds: [
row.original[idProperty].value
],
resource: resource
}, action.id)),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(Dropdown_js_namespaceObject.DropdownItem, {
className: (0, external_tailwind_merge_namespaceObject.twMerge)(external_clsx_default()("flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-red-700 hover:bg-red-50 dark:text-red-400")),
onClick: (evt)=>{
evt.stopPropagation();
deleteItems([
row.original[idProperty].value
]);
},
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(outline_namespaceObject.TrashIcon, {
className: "h-5 w-5"
}),
t("list.row.actions.delete.label")
]
})
]
})
})
]
});
}
};
(0, external_react_namespaceObject.useEffect)(()=>{
setRowSelection({});
}, [
data
]);
const getSelectedRowsIds = ()=>{
const indices = Object.keys(rowSelection);
const selectedRows = data.filter((_, index)=>indices.includes(index.toString()));
const idField = resourcesIdProperty[resource];
return selectedRows.map((row)=>row[idField].value);
};
const handleOrderChange = modelOptions?.list?.orderField ? (value)=>{
startOrderTransition(async ()=>{
const idField = resourcesIdProperty[resource];
const newData = (0, tools_js_namespaceObject.reorderData)(optimisticData, value.currentId, value.moveOverId, modelOptions?.list?.orderField, idField);
optimisticOrderData(newData);
await fetch(`${apiBasePath}/${(0, tools_js_namespaceObject.slugify)(resource)}/order`, {
method: "POST",
body: JSON.stringify(optimisticData)
});
router.refresh();
});
} : void 0;
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ClientActionDialogContext_js_default(), {
componentsMap: clientActionsComponents,
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
className: "flow-root h-full",
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListHeader_js_default(), {
title: title,
icon: icon,
resource: resource,
search: query.search || "",
onSearchChange: onSearchChange,
isPending: isPending,
selectedRows: rowSelection,
actions: actions,
getSelectedRowsIds: getSelectedRowsIds,
onDelete: ()=>deleteItems(getSelectedRowsIds()),
totalCount: total,
schema: schema
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
className: "bg-nextadmin-background-default dark:bg-dark-nextadmin-background-default max-w-full p-4 align-middle sm:p-8",
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
className: "-mt-2 mb-2 space-y-4 sm:-mt-4 sm:mb-4",
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Message_js_namespaceObject.Message, {}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Filters_js_default(), {
filters: listFilterOptions
})
]
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_DataTable_js_namespaceObject.DataTable, {
resource: resource,
data: optimisticData,
columns: [
checkboxColumn,
...columns,
actionsColumn
],
resourcesIdProperty: resourcesIdProperty,
rowSelection: rowSelection,
setRowSelection: setRowSelection,
icon: icon,
onOrderChange: handleOrderChange,
orderField: modelOptions?.list?.orderField
}),
optimisticData.length ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
className: "flex flex-1 flex-wrap items-center justify-between gap-2 py-4",
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_TableRowsIndicator_js_default(), {
pageIndex: pageIndex,
totalRows: total,
currentPageIndex: pageIndex,
pageSize: pageSize
})
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
className: "flex flex-1 items-center justify-end gap-y-2 space-x-4",
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(Select_js_namespaceObject.Select, {
onValueChange: (value)=>{
if (isNaN(Number(value))) return;
router?.push({
pathname: location.pathname,
query: {
...query,
page: 1,
itemsPerPage: value
}
});
},
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Select_js_namespaceObject.SelectTrigger, {
className: "bg-nextadmin-background-default dark:bg-dark-nextadmin-background-subtle max-h-[36px] max-w-[100px]",
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
className: "text-nextadmin-content-inverted dark:text-dark-nextadmin-content-inverted pointer-events-none",
children: pageSize
})
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Select_js_namespaceObject.SelectContent, {
children: allListSizes.map((size)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Select_js_namespaceObject.SelectItem, {
value: size.toString(),
children: size
}, size))
})
]
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Pagination_js_namespaceObject.Pagination, {
currentPageIndex: pageIndex,
totalPageCount: Math.ceil(total / pageSize),
onPageChange: (pageIndex)=>{
router?.push({
pathname: location.pathname,
query: {
...query,
page: pageIndex + 1
}
});
}
})
]
})
]
}) : null
]
})
]
})
});
}
const components_List = List;
exports["default"] = __webpack_exports__["default"];
for(var __webpack_i__ in __webpack_exports__)if (-1 === [
"default"
].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
Object.defineProperty(exports, '__esModule', {
value: true
});