@opendash/plugin-parse
Version:
Parse Server Plugin for open.DASH
102 lines • 6.67 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
import React from "react";
import styled from "styled-components";
import { DeleteOutlined } from '@ant-design/icons';
import { List, Button, Modal, Spin, Tooltip, Divider, Select, message } from "antd";
import { Parse, useParseQuery } from "parse-hooks";
import { useTranslation, useDebounce } from "opendash";
import { useConfig } from "./hooks";
var MainMenu = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n display: flex;\n"], ["\n position: relative;\n display: flex;\n"])));
var MainMenuLeft = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex: 1 1;\n"], ["\n display: flex;\n flex: 1 1;\n"])));
var MainMenuRight = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n float: right;\n margin-left: 10px;\n"], ["\n float: right;\n margin-left: 10px;\n"])));
export default function AdminTableRelation(_a) {
var type = _a.type, row = _a.row, field = _a.field;
var t = useTranslation(["parse", "opendash"])[0];
var _b = useConfig(), configs = _b[0], schemas = _b[2], schema = _b[3];
var relationClass = schema.fields[field].targetClass;
var relationConfig = configs.find(function (c) { return c.className === relationClass; });
var _c = React.useState(false), showRelation = _c[0], setShowRelation = _c[1];
var _d = React.useState(undefined), searchTerm = _d[0], setSearchTerm = _d[1];
var searchTermDebounced = useDebounce(searchTerm, 1000);
var _e = React.useState([]), selection = _e[0], setSelection = _e[1];
var relationQuery = React.useMemo(function () { return (showRelation ? row.get(field).query() : undefined); }, [showRelation]);
var _f = useParseQuery(relationQuery), relationResult = _f.result, relationLoading = _f.loading, error = _f.error, reload = _f.reload;
var searchQuery = React.useMemo(function () {
var _a;
if (!searchTermDebounced) {
return null;
}
var idQuery = new Parse.Query(relationClass).equalTo("id", searchTermDebounced);
var subQueries = relationConfig.relation.map(function (field) {
return new Parse.Query(relationClass).contains(field, searchTermDebounced);
});
return (_a = Parse.Query).or.apply(_a, __spreadArrays([idQuery], subQueries)).limit(10);
}, [searchTermDebounced]);
var _g = useParseQuery(searchQuery), searchResult = _g.result, searchLoading = _g.loading;
var searchSelectOptions = React.useMemo(function () {
return searchResult
.filter(function (item) { return !relationResult.find(function (b) { return b.id === item.id; }); })
.map(function (item) { return (React.createElement(Select.Option, { key: item.id, value: item.id }, relationConfig.relation
.map(function (relationField) { return item.get(relationField); })
.join(","))); });
}, [relationResult, searchResult]);
var onClose = function () {
setShowRelation(false);
setSearchTerm("");
};
var onSubmit = function () {
selection.forEach(function (select) {
row.get(field).add(new Parse.Object(relationClass, { id: select.key }));
});
row.save().then(function (ok) {
message.success(t("parse:admin.relations.add_success", {
count: selection.length,
}));
setSelection([]);
setSearchTerm("");
reload();
}, function (error) {
console.error(error);
message.error(t("parse:admin.relations.add_error"));
});
};
var onDelete = function (item) {
row.get(field).remove(item);
row.save().then(function (ok) {
message.success(t("parse:admin.relations.remove_success"));
reload();
}, function (error) {
console.error(error);
message.error(t("parse:admin.relations.remove_error"));
});
};
return React.createElement(React.Fragment, null,
React.createElement(Button, { type: "link", size: "small", onClick: function (e) { return setShowRelation(true); } }, t("parse:admin.relations.show_relation_label")),
React.createElement(Modal, { visible: showRelation, title: t("parse:admin.relations.modal_title"), onOk: onClose, onCancel: onClose },
React.createElement(MainMenu, null,
React.createElement(MainMenuLeft, null,
React.createElement(Select, { mode: "multiple", labelInValue: true, value: selection, onChange: setSelection, filterOption: false, onSearch: setSearchTerm, style: { width: "100%" }, notFoundContent: searchLoading ? React.createElement(Spin, { size: "small" }) : null, placeholder: t("parse:admin.relations.add_placeholder"), children: searchSelectOptions })),
React.createElement(MainMenuRight, null,
React.createElement(Button, { type: "primary", onClick: onSubmit, children: t("parse:admin.relations.add") }))),
React.createElement(Divider, null),
React.createElement(List, { loading: relationLoading, dataSource: relationResult, renderItem: function (item) { return (React.createElement(List.Item, { actions: [
React.createElement("a", { key: "remove", onClick: function (e) { return onDelete(item); } },
React.createElement(Tooltip, { title: t("parse:admin.relations.remove_tooltip") },
React.createElement(DeleteOutlined, null))),
] },
React.createElement(List.Item.Meta, { title: relationConfig.relation
.map(function (relationField) { return item.get(relationField); })
.join(","), description: React.createElement("pre", { style: { margin: 0 } }, item.id) }))); } })));
}
var templateObject_1, templateObject_2, templateObject_3;
//# sourceMappingURL=AdminTableRelation.js.map