firebase-admin-panel
Version:
A customizable React admin panel for managing Firebase collections.
79 lines (78 loc) • 3.32 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _useFirestore = require("../hooks/useFirestore");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const DocumentTable = _ref => {
let {
collectionName,
onEdit,
onAdd,
tableClassName = "",
rowClassName = "",
cellClassName = "",
buttonClassName = "",
schema
} = _ref;
const {
documents
} = (0, _useFirestore.useDocuments)(collectionName);
const handleDelete = async id => {
await (0, _useFirestore.deleteDocument)(collectionName, id);
};
const getColumns = () => {
if (!schema) return [];
return Object.keys(schema);
};
const columns = getColumns();
const formatValue = (key, value) => {
if (Array.isArray(value)) {
return value.join(", ");
} else if (schema[key] === "image") {
return /*#__PURE__*/_react.default.createElement("img", {
src: value,
alt: key,
className: "h-[30px] object-cover"
});
} else if (value instanceof _useFirestore.Timestamp) {
return value.toDate().toISOString().split("T")[0];
} else {
return value;
}
};
return /*#__PURE__*/_react.default.createElement("div", {
className: "table-wrapper w-full border-collapse"
}, /*#__PURE__*/_react.default.createElement("h2", {
className: "text-xl font-bold mb-4"
}, collectionName), /*#__PURE__*/_react.default.createElement("button", {
onClick: () => onAdd(schema),
className: "bg-green-500 text-white py-2 px-4 rounded mb-4 ".concat(buttonClassName)
}, "Add New Document"), /*#__PURE__*/_react.default.createElement("table", {
className: "w-full table-auto ".concat(tableClassName)
}, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, columns.map(column => /*#__PURE__*/_react.default.createElement("th", {
key: column,
className: "border px-4 py-2 text-left ".concat(cellClassName)
}, column)), /*#__PURE__*/_react.default.createElement("th", {
className: "px-4 py-2 w-32 text-center ".concat(cellClassName)
}, "Actions"))), /*#__PURE__*/_react.default.createElement("tbody", null, documents.map(doc => /*#__PURE__*/_react.default.createElement("tr", {
key: doc.id,
className: "hover:bg-gray-100 ".concat(rowClassName)
}, columns.map(column => /*#__PURE__*/_react.default.createElement("td", {
key: column,
className: "border px-4 py-2 ".concat(cellClassName)
}, formatValue(column, doc[column]))), /*#__PURE__*/_react.default.createElement("td", {
className: "border px-4 py-2 w-60 text-center ".concat(cellClassName)
}, /*#__PURE__*/_react.default.createElement("div", {
className: "flex items-center justify-evenly"
}, /*#__PURE__*/_react.default.createElement("button", {
onClick: () => onEdit(doc),
className: "bg-blue-500 text-white py-1 px-2 rounded w-[40%] ".concat(buttonClassName)
}, "Edit"), /*#__PURE__*/_react.default.createElement("button", {
onClick: () => handleDelete(doc.id),
className: "bg-red-500 text-white py-1 px-2 rounded w-[40%] ".concat(buttonClassName)
}, "Delete"))))))));
};
var _default = exports.default = DocumentTable;