meteor-interface
Version:
Simple Content Management System to generate your administration interface for Meteor and React.
227 lines (203 loc) • 8.67 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactMeteorData = require("meteor/react-meteor-data");
var _reactRouterDom = require("react-router-dom");
var _slugify = _interopRequireDefault(require("slugify"));
var _reactSpring = require("react-spring");
var _moment = _interopRequireDefault(require("moment"));
var _semanticUiReact = require("semantic-ui-react");
var _styledComponents = _interopRequireDefault(require("styled-components"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _templateObject() {
var data = _taggedTemplateLiteral(["\n h5.header {\n letter-spacing:2px;\n }\n .single-vignette {\n display: flex;\n align-items: center;\n justify-content: space-between;\n transition: box-shadow 0.2s ease-in;\n cursor: pointer;\n .ui.statistic {\n margin-top: 0;\n .value{\n color: #21ba45!important;\n }\n }\n &:hover {\n box-shadow: 5px 5px 9px 0px rgba(0,0,0,0.75);\n }\n }\n"]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var ContentList = function ContentList(_ref) {
var history = _ref.history,
ready = _ref.ready,
_ref$collection = _ref.collection,
collection = _ref$collection === void 0 ? {} : _ref$collection,
_ref$list = _ref.list,
list = _ref$list === void 0 ? [] : _ref$list,
firstField = _ref.firstField,
_ref$params = _ref.params,
params = _ref$params === void 0 ? {} : _ref$params,
number = _ref.number,
root = _ref.root,
config = _ref.config;
var creatable = Roles.userIsInRole(Meteor.userId(), collection.create);
var currentParams = params.get();
var updateSearch = function updateSearch(e, _ref2) {
var value = _ref2.value;
currentParams.search = value;
currentParams.page = 1;
params.set(currentParams);
};
return _react.default.createElement(ContentListStyle, null, _react.default.createElement(_reactSpring.Spring, {
from: {
opacity: 0,
marginLeft: 600
},
to: {
opacity: 1,
marginLeft: 0
}
}, function (styles) {
return _react.default.createElement(_semanticUiReact.Segment, {
style: _objectSpread({}, styles, {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center'
})
}, _react.default.createElement(_semanticUiReact.Header, {
style: {
marginBottom: 0
},
icon: collection.icon,
content: collection.label,
as: "h5"
}), creatable && _react.default.createElement(_reactRouterDom.Link, {
to: "".concat(root, "/collections/").concat((0, _slugify.default)(collection.label, {
lower: true
}), "/new")
}, _react.default.createElement(_semanticUiReact.Button, {
content: "NEW",
size: "mini",
icon: "magic",
color: "green",
labelPosition: "left"
})));
}), _react.default.createElement(_reactSpring.Spring, {
from: {
opacity: 0,
marginLeft: 600
},
to: {
opacity: 1,
marginLeft: 0
}
}, function (styles) {
return _react.default.createElement(_semanticUiReact.Input, {
placeholder: "Search...",
style: _objectSpread({}, styles, {
marginBottom: 10,
borderRadius: 5,
boxShadow: "1px 1px 2px 0px rgba(0,0,0, 0.3)"
}),
onChange: updateSearch,
fluid: true,
value: currentParams.search
});
}), _react.default.createElement(_reactSpring.Spring, {
from: {
opacity: 0,
marginTop: 600
},
to: {
opacity: 1,
marginTop: 0
}
}, function (styles2) {
return _react.default.createElement(ListInTable, {
list: list,
style: styles2,
history: history,
collection: collection,
firstField: firstField,
params: params,
number: number,
root: root,
config: config
});
}));
};
var _default = ContentList;
exports.default = _default;
var ContentListStyle = _styledComponents.default.div(_templateObject());
var ListInTable = function ListInTable(_ref3) {
var history = _ref3.history,
_ref3$collection = _ref3.collection,
collection = _ref3$collection === void 0 ? {} : _ref3$collection,
_ref3$list = _ref3.list,
list = _ref3$list === void 0 ? [] : _ref3$list,
firstField = _ref3.firstField,
style = _ref3.style,
params = _ref3.params,
number = _ref3.number,
root = _ref3.root,
config = _ref3.config;
var imageField = null;
collection.fields.map(function (field) {
if (field.widget === 'image') {
imageField = field.name;
}
});
var totalPages = Math.ceil(number / 10);
var currentParams = params.get();
var editable = Roles.userIsInRole(Meteor.userId(), collection.edit);
var handlePaginationChange = function handlePaginationChange(e, _ref4) {
var activePage = _ref4.activePage;
currentParams.page = activePage;
params.set(currentParams);
};
return _react.default.createElement(_semanticUiReact.Table, {
size: "small",
celled: true,
selectable: true,
style: style,
color: "green"
}, _react.default.createElement(_semanticUiReact.Table.Header, null, _react.default.createElement(_semanticUiReact.Table.Row, null, _react.default.createElement(_semanticUiReact.Table.HeaderCell, null, "Items"), _react.default.createElement(_semanticUiReact.Table.HeaderCell, null, "Actions"))), _react.default.createElement(_semanticUiReact.Table.Body, null, list.map(function (item) {
return _react.default.createElement(_semanticUiReact.Table.Row, {
key: item._id
}, _react.default.createElement(_semanticUiReact.Table.Cell, null, _react.default.createElement(_semanticUiReact.Header, {
as: "h5",
image: imageField ? true : false
}, imageField ? _react.default.createElement(_semanticUiReact.Image, {
src: item[imageField],
rounded: true,
size: "mini"
}) : null, _react.default.createElement(_semanticUiReact.Header.Content, null, item[firstField] || item.name || item.title || item.username, item.createdAt ? _react.default.createElement(_semanticUiReact.Header.Subheader, null, (0, _moment.default)(item.createdAt).format('MMMM Do YYYY, h:mm:ss a')) : null))), _react.default.createElement(_semanticUiReact.Table.Cell, {
collapsing: true
}, editable && _react.default.createElement(_semanticUiReact.Button, {
onClick: function onClick() {
return history.push("".concat(root, "/collections/").concat((0, _slugify.default)(collection.label, {
lower: true
}), "/").concat(item._id, "/edit"));
},
content: "EDIT",
size: "mini",
icon: "edit",
color: "blue",
labelPosition: "left"
}), _react.default.createElement(_semanticUiReact.Button, {
onClick: function onClick() {
return history.push("".concat(root, "/collections/").concat((0, _slugify.default)(collection.label, {
lower: true
}), "/").concat(item._id));
},
content: "VIEW",
size: "mini",
icon: "eye",
color: "green",
labelPosition: "left"
})));
})), _react.default.createElement(_semanticUiReact.Table.Footer, null, _react.default.createElement(_semanticUiReact.Table.Row, null, _react.default.createElement(_semanticUiReact.Table.HeaderCell, {
colSpan: "2"
}, _react.default.createElement(_semanticUiReact.Pagination, {
activePage: currentParams.page,
onPageChange: handlePaginationChange,
totalPages: totalPages,
size: "small",
color: "green"
})))));
};