burdy
Version:
Open Source Headless Platform
149 lines (148 loc) • 6.62 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const react_2 = require("@fluentui/react");
const empty_1 = __importDefault(require("../../../components/empty"));
const react_router_1 = require("react-router");
const posts_context_1 = require("../context/posts.context");
const auth_context_1 = require("../../authentication/context/auth.context");
const classNames = (0, react_2.mergeStyleSets)({
fileIconHeaderIcon: {
padding: 0,
fontSize: '16px',
},
fileIconCell: {
textAlign: 'center',
selectors: {
'&:before': {
content: '.',
display: 'inline-block',
verticalAlign: 'middle',
height: '100%',
width: '0px',
visibility: 'hidden',
},
},
},
link: {
'&:hover': {
textDecoration: 'underline !important',
cursor: 'pointer',
},
},
});
const PostsList = () => {
var _a;
const history = (0, react_router_1.useHistory)();
const { getPosts, posts, selection, getOneContentType, params, additionalData } = (0, posts_context_1.usePosts)();
const { hasPermission } = (0, auth_context_1.useAuth)();
const columns = (0, react_1.useMemo)(() => [
{
key: 'name',
name: 'Name',
fieldName: 'name',
minWidth: 210,
isRowHeader: true,
isResizable: true,
data: 'string',
onRender: (item) => {
return hasPermission(['posts_update']) ? (react_1.default.createElement("span", { className: classNames.link, onClick: () => {
var _a;
if (additionalData === null || additionalData === void 0 ? void 0 : additionalData.parentId) {
history.push(`/sites/editor/${item.id}`);
}
else {
history.push(`/posts/${(_a = getOneContentType === null || getOneContentType === void 0 ? void 0 : getOneContentType.result) === null || _a === void 0 ? void 0 : _a.id}/editor/${item.id}`);
}
} }, item.name)) : (react_1.default.createElement("span", null, item.name));
},
isPadded: true,
},
{
key: 'slug',
name: 'Slug',
fieldName: 'slug',
minWidth: 210,
isRowHeader: true,
isResizable: true,
data: 'string',
onRender: (item) => {
return react_1.default.createElement("span", null, item.slug);
},
isPadded: true,
},
{
key: 'status',
name: 'Status',
fieldName: 'status',
minWidth: 100,
maxWidth: 100,
isResizable: true,
data: 'string',
onRender: ({ status }) => {
return react_1.default.createElement("span", null, status);
},
isPadded: true,
},
{
key: 'author',
name: 'Author',
fieldName: 'author',
minWidth: 210,
isResizable: true,
isCollapsible: true,
onRender: ({ author }) => {
return (react_1.default.createElement("span", null, author === null || author === void 0 ? void 0 :
author.firstName,
" ", author === null || author === void 0 ? void 0 :
author.lastName));
}
},
{
key: 'modifiedAt',
name: 'Date Modified',
fieldName: 'modifiedAt',
minWidth: 200,
maxWidth: 200,
isResizable: true,
data: 'number',
onRender: ({ updatedAt }) => {
return (react_1.default.createElement("span", null, new Date(updatedAt).toLocaleDateString([], {
hour: '2-digit',
minute: '2-digit',
hour12: false,
})));
},
isPadded: true,
},
], [getOneContentType === null || getOneContentType === void 0 ? void 0 : getOneContentType.result]);
return (react_1.default.createElement("div", null,
react_1.default.createElement(react_2.MarqueeSelection, { selection: selection, isDraggingConstrainedToRoot: true },
react_1.default.createElement(react_2.ShimmeredDetailsList, { items: posts !== null && posts !== void 0 ? posts : [], columns: columns, enableShimmer: getPosts === null || getPosts === void 0 ? void 0 : getPosts.loading, selectionMode: react_2.SelectionMode.multiple, setKey: "multiple", layoutMode: react_2.DetailsListLayoutMode.justified, isHeaderVisible: true, selection: selection, selectionPreservedOnEmptyClick: true, ariaLabelForSelectionColumn: "Toggle selection", ariaLabelForSelectAllCheckbox: "Toggle selection for all items", checkButtonAriaLabel: "select row" })),
!(getPosts === null || getPosts === void 0 ? void 0 : getPosts.loading) &&
(!posts || posts.length === 0) &&
(((_a = params === null || params === void 0 ? void 0 : params.search) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (react_1.default.createElement(empty_1.default, { title: "No posts match search criteria" })) : (react_1.default.createElement(empty_1.default, { title: "No posts", image: "posts" })))));
};
exports.default = PostsList;