@skbkontur/db-viewer-ui
Version:
Database Viewer with custom configuration
74 lines • 6.14 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ObjectFilter = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const edi_ui_1 = require("@skbkontur/edi-ui");
const react_stack_layout_1 = require("@skbkontur/react-stack-layout");
const react_ui_1 = require("@skbkontur/react-ui");
const react_ui_validations_1 = require("@skbkontur/react-ui-validations");
const react_1 = tslib_1.__importDefault(require("react"));
const ObjectFieldFilterOperator_1 = require("../../Domain/Api/DataTypes/ObjectFieldFilterOperator");
const ValidationUtils_1 = require("../../Domain/Utils/ValidationUtils");
const DateTimePicker_1 = require("../DateTimeRangePicker/DateTimePicker");
const FormRow_1 = require("../FormRow/FormRow");
const OperatorSelect_1 = require("./OperatorSelect");
class ObjectFilter extends react_1.default.Component {
getCondition(property) {
const { conditions } = this.props;
const result = conditions.find(x => x.path === property.name);
if (result == null) {
return {
path: property.name,
operator: ObjectFieldFilterOperator_1.ObjectFieldFilterOperator.Equals,
value: null,
};
}
return result;
}
updateItem(property, conditionUpdate) {
const { conditions, onChange } = this.props;
const conditionIndex = conditions.findIndex(x => x.path === property.name);
if (conditionIndex >= 0) {
onChange([
...conditions.slice(0, conditionIndex),
Object.assign(Object.assign({}, conditions[conditionIndex]), conditionUpdate),
...conditions.slice(conditionIndex + 1),
]);
}
else {
onChange([...conditions, Object.assign(Object.assign({}, this.getCondition(property)), conditionUpdate)]);
}
}
renderProperty(property, value) {
const type = property.type.typeName;
if (type === "DateTime" || type === "DateTimeOffset") {
return ((0, jsx_runtime_1.jsxs)(react_stack_layout_1.ColumnStack, { gap: 2, children: [(0, jsx_runtime_1.jsx)(react_stack_layout_1.Fit, { children: (0, jsx_runtime_1.jsx)(DateTimePicker_1.DateTimePicker, { "data-tid": "DateTimePicker", defaultTime: "", error: false, timeZone: edi_ui_1.TimeUtils.TimeZones.UTC, onChange: date => this.updateItem(property, { value: edi_ui_1.TimeUtils.timestampToTicks(date) }), value: value ? edi_ui_1.TimeUtils.ticksToTimestamp(value) : null }) }), (0, jsx_runtime_1.jsx)(react_stack_layout_1.Fit, { children: (0, jsx_runtime_1.jsx)(react_ui_validations_1.ValidationWrapper, { "data-tid": "DateTimeValidation", renderMessage: (0, react_ui_validations_1.tooltip)("right middle"), validationInfo: this.getValidation(property, value), children: (0, jsx_runtime_1.jsx)(react_ui_1.Input, { mask: "999999999999999999", "data-tid": "DateTimeInTicks", onValueChange: nextValue => this.updateItem(property, { value: nextValue }), value: value ? value : "" }) }) })] }));
}
if (type === "Boolean") {
return ((0, jsx_runtime_1.jsx)(react_ui_validations_1.ValidationWrapper, { "data-tid": "BooleanValidation", renderMessage: (0, react_ui_validations_1.tooltip)("right middle"), validationInfo: this.getValidation(property, value), children: (0, jsx_runtime_1.jsx)(OperatorSelect_1.StyledSelect, { "data-tid": "BooleanSelect", items: [null, "true", "false"].map(x => [x, String(x)]), onValueChange: (nextValue) => {
this.updateItem(property, { value: nextValue });
}, value: value || undefined }) }));
}
if (property.availableValues.length !== 0) {
return ((0, jsx_runtime_1.jsx)(react_ui_validations_1.ValidationWrapper, { "data-tid": "EnumValidation", renderMessage: (0, react_ui_validations_1.tooltip)("right middle"), validationInfo: this.getValidation(property, value), children: (0, jsx_runtime_1.jsx)(OperatorSelect_1.StyledSelect, { "data-tid": "EnumSelect", items: [null, ...property.availableValues].map(x => [x, String(x)]), onValueChange: (nextValue) => {
this.updateItem(property, { value: nextValue });
}, value: value || undefined }) }));
}
return ((0, jsx_runtime_1.jsx)(react_ui_validations_1.ValidationWrapper, { "data-tid": "InputValidation", renderMessage: (0, react_ui_validations_1.tooltip)("right middle"), validationInfo: this.getValidation(property, value), children: (0, jsx_runtime_1.jsx)(react_ui_1.Input, { "data-tid": "Input", onValueChange: nextValue => this.updateItem(property, { value: nextValue }), value: value || "" }) }));
}
getValidation(property, value) {
if (property.isRequired && edi_ui_1.StringUtils.isNullOrWhitespace(value)) {
return { message: "Поле должно быть заполнено", type: "submit" };
}
return (0, ValidationUtils_1.validateObjectField)(value);
}
render() {
const { tableColumns } = this.props;
return ((0, jsx_runtime_1.jsx)(react_stack_layout_1.ColumnStack, { gap: 2, "data-tid": "ObjectFilters", children: tableColumns
.map(x => [x, this.getCondition(x)])
.map(([property, condition]) => ((0, jsx_runtime_1.jsx)(FormRow_1.FormRow, { captionWidth: 200, caption: property.name, "data-tid": "Filter", children: (0, jsx_runtime_1.jsxs)(react_stack_layout_1.RowStack, { baseline: true, block: true, gap: 5, "data-tid": property.name, children: [(0, jsx_runtime_1.jsx)(react_stack_layout_1.Fit, { children: (0, jsx_runtime_1.jsx)(OperatorSelect_1.OperatorSelect, { value: condition.operator, onChange: value => this.updateItem(property, { operator: value }), availableValues: property.availableFilters || [ObjectFieldFilterOperator_1.ObjectFieldFilterOperator.Equals] }) }), (0, jsx_runtime_1.jsx)(react_stack_layout_1.Fit, { children: this.renderProperty(property, condition.value) })] }) }, property.name))) }));
}
}
exports.ObjectFilter = ObjectFilter;
//# sourceMappingURL=ObjectFilter.js.map