graft-react/dist/components/PropertyEdit.js

react admin and helper components for graft-db

"use strict";
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var __assign = (this && this.__assign) || Object.assign || function(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
            t[p] = s[p];
    }
    return t;
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t;
    return { next: verb(0), "throw": verb(1), "return": verb(2) };
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (_) try {
            if (f = 1, y && (t = y[op[0] & 2 ? "return" : op[0] ? "throw" : "next"]) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [0, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
var React = require("react");
var DataTable_1 = require("react-md/lib/DataTables/DataTable");
var TableHeader_1 = require("react-md/lib/DataTables/TableHeader");
var TableBody_1 = require("react-md/lib/DataTables/TableBody");
var TableRow_1 = require("react-md/lib/DataTables/TableRow");
var TableColumn_1 = require("react-md/lib/DataTables/TableColumn");
var EditDialogColumn_1 = require("react-md/lib/DataTables/EditDialogColumn");
var modal_1 = require("../modal");
var graft_db_1 = require("graft-db");
var SelectFields_1 = require("react-md/lib/SelectFields");
var TextFields_1 = require("react-md/lib/TextFields");
var Tabs_1 = require("react-md/lib/Tabs/Tabs");
var Tab_1 = require("react-md/lib/Tabs/Tab");
var TabsContainer_1 = require("react-md/lib/Tabs/TabsContainer");
var Checkbox_1 = require("react-md/lib/SelectionControls/Checkbox");
var Buttons_1 = require("react-md/lib/Buttons");
var SelectionControl_1 = require("react-md/lib/SelectionControls/SelectionControl");
var List_1 = require("react-md/lib/Lists/List");
var ListItemControl_1 = require("react-md/lib/Lists/ListItemControl");
var Subheaders_1 = require("react-md/lib/Subheaders");
var debounce = require("lodash.debounce");
var Router_1 = require("./Router");
var WithClient_1 = require("./WithClient");
var PROPERTY_TYPES = Object.keys(graft_db_1.PropertyType).filter(function (k) { return !parseInt(k); }).map(function (name) { return ({
    id: parseInt(graft_db_1.PropertyType[name], 10),
    name: name,
}); });
var defaultState = {
    name: null,
    type: null,
    edge: null,
    list: null,
    edgeTypes: null,
    nameError: null,
    error: null,
};
var PropertyEdit = (function (_super) {
    __extends(PropertyEdit, _super);
    function PropertyEdit() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = __assign({}, defaultState);
        _this.toggleDrawer = function () {
            var navigator = _this.context.navigator;
            var c = navigator.stateContext.data;
            var o = __assign({}, c, { sidebar: !c.sidebar });
            navigator.refresh(o);
        };
        _this.handleTabChange = function (tab) {
            var navigator = _this.context.navigator;
            navigator.update({ tab: tab });
        };
        _this.save = debounce(function () { return __awaiter(_this, void 0, void 0, function () {
            var client, property, p, e_1, msgParts, msg;
            return __generator(this, function (_a) {
                switch (_a.label) {
                    case 0:
                        client = this.context.client;
                        property = this.props.property;
                        p = {
                            kind: graft_db_1.Kind.Property,
                            owner: property.owner.id,
                            name: this.getName(),
                            type: this.getType(),
                            list: this.getList(),
                            pos: property.pos,
                            nullable: property.nullable,
                            maxLength: property.maxLength,
                            hint: this.getHint(),
                        };
                        if (property.maxLength) {
                            p.maxLength = property.maxLength;
                        }
                        if (p.type === graft_db_1.PropertyType.Edge) {
                            p.edge = this.getEdge();
                            p.edgeTypes = this.getEdgeTypes();
                        }
                        if (p.type === graft_db_1.PropertyType.Enum) {
                            p.enumOpts = this.getEnumOptions();
                        }
                        _a.label = 1;
                    case 1:
                        _a.trys.push([1, 3, , 4]);
                        return [4 /*yield*/, client.update(function (b) { return b.set(property.id, p); })];
                    case 2:
                        _a.sent();
                        this.setState(__assign({}, defaultState));
                        return [3 /*break*/, 4];
                    case 3:
                        e_1 = _a.sent();
                        if (e_1 instanceof graft_db_1.InvalidPropertyName) {
                            msgParts = e_1.message.split(':');
                            msg = msgParts[msgParts.length - 1];
                            this.setState({ nameError: msg });
                        }
                        else {
                            this.setState({ error: e_1.toString() });
                            modal_1.alert(e_1.toString());
                        }
                        return [3 /*break*/, 4];
                    case 4: return [2 /*return*/];
                }
            });
        }); }, 750);
        _this.setName = function (name) {
            _this.setState({ name: name }, _this.save);
        };
        _this.setHint = function (hint) {
            _this.setState({ hint: hint }, _this.save);
        };
        _this.setEdge = function (edge) {
            _this.setState({ edge: edge }, _this.save);
        };
        _this.setList = function (list) {
            _this.setState({ list: list }, _this.save);
        };
        _this.setType = function (type) {
            var state = { type: type };
            if (type === graft_db_1.PropertyType.Edge) {
                if (!_this.state.edge) {
                    state.edge = _this.getName();
                }
            }
            else {
                state.edge = null;
            }
            _this.setState(state, _this.save);
        };
        _this.setEdgeTypes = function (edgeTypes) {
            _this.setState({ edgeTypes: edgeTypes }, _this.save);
        };
        _this.setEnumOptions = function (enumOpts) {
            _this.setState({ enumOpts: enumOpts }, _this.save);
        };
        return _this;
    }
    PropertyEdit.prototype.getName = function () {
        return this.state.name || this.props.property.name || '';
    };
    PropertyEdit.prototype.getHint = function () {
        return this.state.hint || this.props.property.hint || '';
    };
    PropertyEdit.prototype.getEdge = function () {
        return this.state.edge || this.props.property.edge || '';
    };
    PropertyEdit.prototype.getList = function () {
        return this.state.list || this.props.property.list;
    };
    PropertyEdit.prototype.getType = function () {
        return this.state.type || graft_db_1.PropertyType[this.props.property.type] || graft_db_1.PropertyType.Label;
    };
    PropertyEdit.prototype.getEdgeTypes = function () {
        return this.state.edgeTypes || this.props.property.edgeTypes || [];
    };
    PropertyEdit.prototype.getEnumOptions = function () {
        return this.state.enumOpts || this.props.property.enumOpts || [];
    };
    PropertyEdit.prototype.render = function () {
        var navigator = this.context.navigator;
        var types = this.props.types;
        var _a = this.state, nameError = _a.nameError, error = _a.error;
        var tab = navigator.data().tab;
        var pt = this.getType();
        return (React.createElement(TabsContainer_1.default, { onTabChange: this.handleTabChange, activeTabIndex: tab || 0 },
            React.createElement(Tabs_1.default, { tabId: "tab", className: 'property-tabs' },
                React.createElement(Tab_1.default, { label: "Settings" },
                    React.createElement("div", { style: { height: '100vh' } },
                        React.createElement("div", { className: 'md-grid' },
                            React.createElement(TextFields_1.default, { className: 'md-cell md-cell--12 md-cell--top', id: 'name', label: 'Name', placeholder: 'Property Name', value: this.getName(), onChange: this.setName, errorText: nameError || '', error: !!nameError, helpText: "This name is used to identify this field. It should be unique to this Type and should be in camelCaseForm. Changing this name will change the API so only alter it if you know what you are doing" }),
                            React.createElement(TextFields_1.default, { className: 'md-cell md-cell--12 md-cell--top', id: 'hint', label: 'Hint Text', placeholder: 'Enter helpful info...', value: this.getHint(), onChange: this.setHint, rows: 2, helpText: "Hint text is shown near fields to explain what the field is used for. Just like this." }),
                            React.createElement(SelectFields_1.default, { className: 'md-cell md-cell--12 md-cell--top', id: 'kind', label: 'Field Type', placeholder: 'Select a field type', menuItems: PROPERTY_TYPES, itemLabel: 'name', itemValue: 'id', value: this.getType(), onChange: this.setType, error: !!error }),
                            React.createElement(SelectionControl_1.default, { className: 'md-cell md-cell--12 md-cell--top', id: 'list', name: 'list', type: 'switch', label: 'List', checked: this.getList(), onChange: this.setList })))),
                React.createElement(Tab_1.default, { label: "Advanced" },
                    React.createElement("div", { style: { height: '100vh' } },
                        React.createElement("div", { className: 'md-grid' },
                            pt == graft_db_1.PropertyType.Edge && React.createElement(TextFields_1.default, { className: 'md-cell md-cell--12 md-cell--top', id: 'edge', label: 'Edge Name', helpText: 'The edge name is a unique identifier for the relationship that will be created between the objects.', floating: false, placeholder: 'Edge name', value: this.getEdge(), onChange: this.setEdge }),
                            pt === graft_db_1.PropertyType.Edge && React.createElement(SelectEdgeTypes, { types: types, value: this.getEdgeTypes(), onChange: this.setEdgeTypes }),
                            pt === graft_db_1.PropertyType.Enum && React.createElement(EnumOptions, { value: this.getEnumOptions(), onChange: this.setEnumOptions })))))));
    };
    return PropertyEdit;
}(React.Component));
PropertyEdit.contextTypes = __assign({}, Router_1.navigatorContextTypes, WithClient_1.clientContextTypes);
exports.PropertyEdit = PropertyEdit;
var SelectEdgeTypes = (function (_super) {
    __extends(SelectEdgeTypes, _super);
    function SelectEdgeTypes() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.onChange = function (id, on) {
            var _a = _this.props, value = _a.value, onChange = _a.onChange;
            var o = {};
            for (var _i = 0, value_1 = value; _i < value_1.length; _i++) {
                var k = value_1[_i];
                o[k] = true;
            }
            o[id] = on;
            var newValues = Object.keys(o).filter(function (k) { return !!o[k]; });
            onChange(newValues);
        };
        return _this;
    }
    SelectEdgeTypes.prototype.render = function () {
        var _this = this;
        var _a = this.props, types = _a.types, value = _a.value;
        var checkboxes = types.map(function (t) { return (React.createElement(ListItemControl_1.default, { key: t.id, primaryAction: React.createElement(Checkbox_1.default, { id: 'ThingType', name: 'edgeTypes', label: t.name, checked: value.indexOf(t.id) > -1, onChange: function (on) { return _this.onChange(t.id, on); } }) })); });
        return (React.createElement(List_1.default, { className: "md-cell md-cell--12" },
            React.createElement(Subheaders_1.default, { primaryText: "Allowed Types" }),
            checkboxes));
    };
    return SelectEdgeTypes;
}(React.Component));
exports.SelectEdgeTypes = SelectEdgeTypes;
var EnumOptions = (function (_super) {
    __extends(EnumOptions, _super);
    function EnumOptions() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.add = function () {
            var value = _this.props.value.slice();
            var max = value.length < 1 ? 0 : Math.max.apply(Math, value.map(function (v) { return v.value || 0; }));
            value.push({ name: '', value: max + 1 });
            _this.props.onChange(value);
        };
        _this.remove = function (idx) {
            var value = _this.props.value.filter(function (_opt, i) { return i !== idx; });
            _this.props.onChange(value);
        };
        _this.changeOptName = function (idx, name) {
            var value = _this.props.value.slice();
            value[idx] = __assign({}, value[idx], { name: name });
            _this.props.onChange(value);
        };
        _this.changeOptValue = function (idx, v) {
            var value = _this.props.value.slice();
            value[idx] = __assign({}, value[idx], { value: parseInt(v, 10) });
            _this.props.onChange(value);
        };
        return _this;
    }
    EnumOptions.prototype.getValue = function () {
        if (this.state.value !== null) {
            return this.state.value;
        }
    };
    EnumOptions.prototype.render = function () {
        var _this = this;
        var value = this.props.value;
        var rows = (value || []).map(function (o, idx) { return (React.createElement(EnumOptRow, { key: idx, idx: idx, name: o.name, value: o.value, onRemove: _this.remove, onChangeOptName: _this.changeOptName, onChangeOptValue: _this.changeOptValue })); });
        return (React.createElement("div", null,
            React.createElement(DataTable_1.default, { plain: true },
                React.createElement(TableHeader_1.default, null,
                    React.createElement(TableRow_1.default, null,
                        React.createElement(TableColumn_1.default, { tooltipLabel: 'Friendly name' }, "Name"),
                        React.createElement(TableColumn_1.default, { tooltipLabel: 'Numeric value' }, "Value"),
                        React.createElement(TableColumn_1.default, null, "Actions"))),
                React.createElement(TableBody_1.default, null, rows)),
            React.createElement(Buttons_1.default, { onClick: this.add, icon: true }, "add")));
    };
    return EnumOptions;
}(React.Component));
exports.EnumOptions = EnumOptions;
var EnumOptRow = function (_a) {
    var idx = _a.idx, name = _a.name, value = _a.value, onRemove = _a.onRemove, onChangeOptName = _a.onChangeOptName, onChangeOptValue = _a.onChangeOptValue;
    return (React.createElement(TableRow_1.default, { key: "" + idx },
        React.createElement(EditDialogColumn_1.default, { placeholder: 'name...', okOnOutsideClick: true, inline: true, value: name, onChange: function (v) { return onChangeOptName(idx, v); }, noIcon: true, style: { minWidth: 50 } }),
        React.createElement(EditDialogColumn_1.default, { type: 'number', placeholder: '', okOnOutsideClick: true, inline: true, value: value.toString(), onChange: function (v) { return onChangeOptValue(idx, v); }, noIcon: true, style: { minWidth: 50 } }),
        React.createElement(TableColumn_1.default, null,
            React.createElement(Buttons_1.default, { onClick: function () { return onRemove(idx); }, icon: true }, "delete"))));
};