synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
103 lines • 7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.CardContainer = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var react_bootstrap_1 = require("react-bootstrap");
var useGetInfoFromIds_1 = (0, tslib_1.__importDefault)(require("../utils/hooks/useGetInfoFromIds"));
var SynapseConstants_1 = require("../utils/SynapseConstants");
var GenericCard_1 = (0, tslib_1.__importDefault)(require("./GenericCard"));
var LoadingScreen_1 = (0, tslib_1.__importDefault)(require("./LoadingScreen"));
var row_renderers_1 = require("./row_renderers");
var ObservationCard_1 = require("./row_renderers/ObservationCard");
var NoContentAvailable_1 = (0, tslib_1.__importDefault)(require("./table/NoContentAvailable"));
var SearchResultsNotFound_1 = (0, tslib_1.__importDefault)(require("./table/SearchResultsNotFound"));
var TotalQueryResults_1 = (0, tslib_1.__importDefault)(require("./TotalQueryResults"));
var UserCardList_1 = (0, tslib_1.__importDefault)(require("./UserCardList"));
var CardContainer = function (props) {
var data = props.data, _a = props.isHeader, isHeader = _a === void 0 ? false : _a, facet = props.facet, unitDescription = props.unitDescription, type = props.type, isLoading = props.isLoading, _b = props.secondaryLabelLimit, secondaryLabelLimit = _b === void 0 ? 3 : _b, _c = props.showBarChart, showBarChart = _c === void 0 ? true : _c, title = props.title, getLastQueryRequest = props.getLastQueryRequest, executeQueryRequest = props.executeQueryRequest, hasMoreData = props.hasMoreData, rest = (0, tslib_1.__rest)(props, ["data", "isHeader", "facet", "unitDescription", "type", "isLoading", "secondaryLabelLimit", "showBarChart", "title", "getLastQueryRequest", "executeQueryRequest", "hasMoreData"]);
var queryRequest = props.getLastQueryRequest();
/**
* Handle a click on next or previous
*
* @memberof SynapseTable
*/
var handleViewMore = function () {
var _a;
var offset = queryRequest.query.offset;
// paginate forward
offset += (_a = queryRequest.query.limit) !== null && _a !== void 0 ? _a : SynapseConstants_1.DEFAULT_PAGE_SIZE;
queryRequest.query.offset = offset;
props.getNextPageOfData(queryRequest);
};
var renderCard = function (props, type) {
switch (type) {
case SynapseConstants_1.DATASET:
return react_1.default.createElement(row_renderers_1.Dataset, (0, tslib_1.__assign)({}, props));
case SynapseConstants_1.FUNDER:
return react_1.default.createElement(row_renderers_1.Funder, (0, tslib_1.__assign)({}, props));
case SynapseConstants_1.GENERIC_CARD:
return react_1.default.createElement(GenericCard_1.default, (0, tslib_1.__assign)({}, props));
case SynapseConstants_1.OBSERVATION_CARD:
return react_1.default.createElement(ObservationCard_1.ObservationCard, (0, tslib_1.__assign)({}, props));
default:
return react_1.default.createElement("div", null); // this should never happen
}
};
var ids = (data === null || data === void 0 ? void 0 : data.queryResult.queryResults.tableId)
? [data === null || data === void 0 ? void 0 : data.queryResult.queryResults.tableId]
: [];
var tableEntityConcreteType = (0, useGetInfoFromIds_1.default)({
ids: ids,
type: 'ENTITY_HEADER',
});
// the cards only show the loading screen on initial load, this occurs when data is undefined
if (!data) {
return react_1.default.createElement("div", null,
isLoading && type === SynapseConstants_1.OBSERVATION_CARD && react_1.default.createElement(ObservationCard_1.LoadingObservationCard, null),
isLoading && type !== SynapseConstants_1.OBSERVATION_CARD && LoadingScreen_1.default);
}
else if (data && data.queryResult.queryResults.rows.length === 0) {
// data was retrieved from the backend but there is none to show.
if (queryRequest.query.additionalFilters) {
return react_1.default.createElement(SearchResultsNotFound_1.default, null);
}
// else show "no results" UI (see PORTALS-1497)
return (react_1.default.createElement(NoContentAvailable_1.default, null));
}
var schema = {};
data.queryResult.queryResults.headers.forEach(function (element, index) {
schema[element.name] = index;
});
var showViewMoreButton = hasMoreData && (react_1.default.createElement("div", { className: "SRC-viewMore bootstrap-4-backport" },
react_1.default.createElement(react_bootstrap_1.Button, { variant: "secondary", className: "pill-xl", onClick: handleViewMore }, "View More")));
var cards;
if (type === SynapseConstants_1.MEDIUM_USER_CARD) {
// Hard coding ownerId as a column name containing the user profile ownerId
// for each row, grab the column with the ownerId
var userIdColumnIndex_1 = data.queryResult.queryResults.headers.findIndex(function (el) { return el.columnType === 'USERID'; });
if (userIdColumnIndex_1 === -1) {
throw Error('Type MEDIUM_USER_CARD specified but no columnType USERID found');
}
var listIds = data.queryResult.queryResults.rows.map(function (el) { return el.values[userIdColumnIndex_1]; });
cards = react_1.default.createElement(UserCardList_1.default, { data: data, list: listIds, size: SynapseConstants_1.MEDIUM_USER_CARD });
}
else {
// render the cards
var cardsData = data.queryResult.queryResults.rows;
cards = cardsData.length ? (cardsData.map(function (rowData) {
var _a;
var key = JSON.stringify(rowData.values);
var propsForCard = (0, tslib_1.__assign)({ key: key, type: type, schema: schema, isHeader: isHeader, secondaryLabelLimit: secondaryLabelLimit, data: rowData.values, selectColumns: data.selectColumns, columnModels: data.columnModels, tableEntityConcreteType: tableEntityConcreteType[0] && tableEntityConcreteType[0].type, tableId: (_a = props.data) === null || _a === void 0 ? void 0 : _a.queryResult.queryResults.tableId }, rest);
return renderCard(propsForCard, type);
})) : (react_1.default.createElement(react_1.default.Fragment, null));
}
return (react_1.default.createElement("div", { role: "list" },
title && react_1.default.createElement("h2", { className: "SRC-card-overview-title" }, title),
!title && unitDescription && showBarChart && (react_1.default.createElement(TotalQueryResults_1.default, { isLoading: isLoading, unitDescription: unitDescription, executeQueryRequest: executeQueryRequest, lastQueryRequest: getLastQueryRequest(), frontText: 'Displaying' })),
cards,
showViewMoreButton));
};
exports.CardContainer = CardContainer;
exports.default = exports.CardContainer;
//# sourceMappingURL=CardContainer.js.map