burdy
Version:
Open Source Headless Platform
182 lines (181 loc) • 7.63 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 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 SitesList = () => {
var _a, _b, _c;
const { getPosts, selection, params } = (0, posts_context_1.usePosts)();
const history = (0, react_router_1.useHistory)();
const columns = (0, react_1.useMemo)(() => [
{
key: 'icon',
name: '',
fieldName: 'icon',
minWidth: 30,
isRowHeader: true,
onRender: (item) => {
let iconName;
switch (item === null || item === void 0 ? void 0 : item.type) {
case 'folder':
iconName = 'FolderHorizontal';
break;
case 'fragment':
iconName = 'WebAppBuilderFragment';
break;
case 'hierarchical_post':
iconName = 'ArrangeBringToFront';
break;
case 'page':
iconName = 'Page';
break;
default:
iconName = 'PostUpdate';
break;
}
return (react_1.default.createElement(react_2.Stack, { style: { height: '100%' }, verticalAlign: "center" },
react_1.default.createElement(react_2.Icon, { iconName: iconName })));
},
},
{
key: 'name',
name: 'Name',
fieldName: 'name',
minWidth: 210,
isResizable: true,
isRowHeader: true,
data: 'string',
onRender: (item) => {
return (react_1.default.createElement("span", { className: classNames.link, onClick: () => {
history.push(`/sites/editor/${item.id}`);
} }, item.name));
},
isPadded: true,
},
{
key: 'key',
name: 'Key',
fieldName: 'key',
minWidth: 210,
isResizable: true,
isRowHeader: true,
data: 'string',
onRender: (item) => {
return react_1.default.createElement("span", null, item.key);
},
isPadded: true,
},
{
key: 'contentType',
name: 'Content Type',
fieldName: 'contentType',
minWidth: 120,
isResizable: true,
data: 'string',
onRender: ({ contentType }) => {
return react_1.default.createElement("span", null, contentType === null || contentType === void 0 ? void 0 : contentType.name);
},
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: 100,
maxWidth: 100,
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,
},
], []);
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: (_a = getPosts === null || getPosts === void 0 ? void 0 : getPosts.result) !== null && _a !== void 0 ? _a : [], 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) &&
(!(getPosts === null || getPosts === void 0 ? void 0 : getPosts.result) || ((_b = getPosts === null || getPosts === void 0 ? void 0 : getPosts.result) === null || _b === void 0 ? void 0 : _b.length) === 0) &&
(((_c = params === null || params === void 0 ? void 0 : params.search) === null || _c === void 0 ? void 0 : _c.length) > 0 ? (react_1.default.createElement(empty_1.default, { title: "No items match search criteria" })) : (react_1.default.createElement(empty_1.default, { title: "No items", image: "posts" })))));
};
exports.default = SitesList;