firebase-admin-panel
Version:
A customizable React admin panel for managing Firebase collections.
80 lines (79 loc) • 4.2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _useFirebaseInitialization = _interopRequireDefault(require("../hooks/useFirebaseInitialization"));
var _CollectionList = _interopRequireDefault(require("./CollectionList"));
var _DocumentTable = _interopRequireDefault(require("./DocumentTable"));
var _Modal = _interopRequireDefault(require("./Modal"));
var _DocumentForm = _interopRequireDefault(require("./DocumentForm"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const AdminPage = _ref => {
let {
firebaseConfig,
collectionStructure,
CustomCollectionList = _CollectionList.default,
CustomDocumentTable = _DocumentTable.default,
CustomModal = _Modal.default,
CustomDocumentForm = _DocumentForm.default
} = _ref;
(0, _useFirebaseInitialization.default)(firebaseConfig, collectionStructure);
const [selectedCollection, setSelectedCollection] = (0, _react.useState)(null);
const [isSidebarOpen, setIsSidebarOpen] = (0, _react.useState)(true);
const [isModalOpen, setIsModalOpen] = (0, _react.useState)(false);
const [docToEdit, setDocToEdit] = (0, _react.useState)(null);
const toggleSidebar = () => {
setIsSidebarOpen(!isSidebarOpen);
};
const handleAdd = () => {
setDocToEdit(null);
setIsModalOpen(true);
};
const handleEdit = doc => {
setDocToEdit(doc);
setIsModalOpen(true);
};
const handleSave = () => {
setDocToEdit(null);
setIsModalOpen(false);
};
const handleCloseModal = () => {
setIsModalOpen(false);
};
const handleSelectCollection = collectionName => {
setSelectedCollection(collectionName);
};
return /*#__PURE__*/_react.default.createElement("div", {
className: "flex h-screen w-screen"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "fixed inset-y-0 left-0 transform ".concat(isSidebarOpen ? "translate-x-0" : "-translate-x-full", " transition-transform duration-300 ease-in-out bg-gray-800 text-white w-64 p-4")
}, /*#__PURE__*/_react.default.createElement("button", {
onClick: toggleSidebar,
className: "text-white mb-4"
}, isSidebarOpen ? "Close" : "Open", " Sidebar"), /*#__PURE__*/_react.default.createElement(CustomCollectionList, {
onSelectCollection: handleSelectCollection,
collections: Object.keys(collectionStructure)
})), /*#__PURE__*/_react.default.createElement("div", {
className: "flex-1 p-8 ".concat(isSidebarOpen ? "ml-64" : "", " transition-all duration-300 ease-in-out")
}, !isSidebarOpen && /*#__PURE__*/_react.default.createElement("button", {
onClick: toggleSidebar,
className: "text-white bg-blue-500 py-2 px-4 rounded mb-4"
}, "Open Sidebar"), selectedCollection && /*#__PURE__*/_react.default.createElement(CustomDocumentTable, {
collectionName: selectedCollection,
onEdit: handleEdit,
onAdd: handleAdd,
schema: collectionStructure[selectedCollection]
})), isModalOpen && /*#__PURE__*/_react.default.createElement(CustomModal, {
onClose: handleCloseModal
}, /*#__PURE__*/_react.default.createElement(CustomDocumentForm, {
collectionName: selectedCollection,
docToEdit: docToEdit,
onSave: handleSave,
schema: collectionStructure[selectedCollection]
})));
};
var _default = exports.default = AdminPage;