drf-react-by-schema
Version:
Components and Tools for building a React App having Django Rest Framework (DRF) as server
181 lines (180 loc) • 11.4 kB
JavaScript
;
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
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) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.buildPreparedColumns = void 0;
const react_1 = __importDefault(require("react"));
const dayjs_1 = __importDefault(require("dayjs"));
const Typography_1 = __importDefault(require("@mui/material/Typography"));
const utils_1 = require("../../../utils");
const SelectEditInputCell_1 = require("../SelectEditInputCell");
const GridDateInput_1 = require("../GridDateInput");
const GridDecimalInput_1 = require("../GridDecimalInput");
const GridPatternInput_1 = require("../GridPatternInput");
const BooleanInputCell_1 = require("../BooleanInputCell");
const FileInputCell_1 = require("../FileInputCell");
const GridGenericInput_1 = require("../GridGenericInput");
const utils_2 = require("../utils");
const buildPreparedColumns = (_a) => __awaiter(void 0, [_a], void 0, function* ({ schema, columns, isEditable, actions, LinkComponent, stateToLink, validationErrors, optionsAC, onEditModel, customFieldFormLayouts, setDialog, indexField, serverEndPoint, indexFieldMinWidth, minWidth, customColumnOperations, customLinkDestination, indexFieldBasePath, }) {
const promises = columns.map((col) => __awaiter(void 0, void 0, void 0, function* () {
const fieldSchema = schema[col.field];
if (!fieldSchema)
return col;
const isIndexField = indexField !== '' && col.field === indexField;
let column = Object.assign({}, col);
column.editable =
isEditable &&
!col.disabled &&
(!fieldSchema.read_only || ['field', 'nested object'].includes(fieldSchema.type));
switch (fieldSchema.type) {
case 'date':
column.type = 'date';
const df = (0, utils_1.buildDateFormatBySchema)(fieldSchema.date_views);
column.valueFormatter = (value) => (value ? (0, dayjs_1.default)(value).format(df) : '');
column.filterOperators = (0, utils_2.quantityOnlyOperators)({ type: 'date' });
if (isEditable && !col.disabled) {
column.renderEditCell = (p) => {
var _a;
const err = (_a = validationErrors[p.id]) === null || _a === void 0 ? void 0 : _a[p.field];
return (react_1.default.createElement(GridDateInput_1.GridDateInput, Object.assign({}, p, { column: column, dateViews: fieldSchema.date_views, error: Boolean(err), helperText: err })));
};
}
break;
case 'datetime':
column.type = 'dateTime';
column.valueFormatter = (value) => value ? (0, dayjs_1.default)(value).format('DD/MM/YYYY HH:mm') : '';
break;
case 'nested object':
case 'field':
case 'choice':
case 'list':
column.minWidth = 150;
if (isEditable && !col.disabled) {
column.valueFormatter = (value) => {
if (Array.isArray(value))
return value.map((v) => v.label || v.display_name || v).join(', ');
return (value === null || value === void 0 ? void 0 : value.label) || (value === null || value === void 0 ? void 0 : value.display_name) || value || '';
};
column.renderEditCell = (p) => {
var _a;
const err = (_a = validationErrors[p.id]) === null || _a === void 0 ? void 0 : _a[p.field];
return (react_1.default.createElement(SelectEditInputCell_1.SelectEditInputCell, Object.assign({}, p, { column: column, type: fieldSchema.type, options: optionsAC[col.field] || [], isIndexField: isIndexField, onEditModel: onEditModel, fieldsLayout: customFieldFormLayouts === null || customFieldFormLayouts === void 0 ? void 0 : customFieldFormLayouts[col.field], setDialog: setDialog, multiple: fieldSchema.type === 'list' || fieldSchema.many, error: Boolean(err), helperText: err })));
};
}
else {
column.valueGetter = (value) => {
if (Array.isArray(value))
return value.map((v) => v.label || v.display_name || v).join(', ');
return (value === null || value === void 0 ? void 0 : value.label) || (value === null || value === void 0 ? void 0 : value.display_name) || value || '';
};
}
break;
case 'boolean':
column.valueFormatter = (value) => (value ? 'Sim' : 'Não');
if (isEditable && !col.disabled) {
column.renderEditCell = (p) => {
var _a;
const err = (_a = validationErrors[p.id]) === null || _a === void 0 ? void 0 : _a[p.field];
return (react_1.default.createElement(BooleanInputCell_1.BooleanInputCell, Object.assign({}, p, { column: column, error: Boolean(err), helperText: err })));
};
}
break;
case 'decimal':
case 'float':
case 'number':
case 'integer':
const ds = fieldSchema.decimal_places || (fieldSchema.type === 'integer' ? 0 : 2);
column.type = 'number';
column.valueFormatter = (value) => {
if (value === null || value === undefined)
return '';
return parseFloat(value).toLocaleString('pt-BR', {
minimumFractionDigits: ds,
maximumFractionDigits: ds,
});
};
column.filterOperators = (0, utils_2.quantityOnlyOperators)({
type: fieldSchema.type === 'decimal' ? 'float' : 'number',
});
if (isEditable && !col.disabled) {
column.renderEditCell = (p) => {
var _a;
const err = (_a = validationErrors[p.id]) === null || _a === void 0 ? void 0 : _a[p.field];
return (react_1.default.createElement(GridDecimalInput_1.GridDecimalInput, Object.assign({}, p, { decimalPlaces: ds, isCurrency: fieldSchema.is_currency, prefix: fieldSchema.prefix || '', suffix: fieldSchema.suffix || '', column: column, error: Boolean(err), helperText: err })));
};
}
break;
case 'image upload':
case 'file upload':
case 'image':
case 'file':
column.minWidth = 200;
column.renderCell = (p) => {
var _a, _b;
return (react_1.default.createElement(react_1.default.Fragment, null, ((_a = p.value) === null || _a === void 0 ? void 0 : _a.name) &&
(((_b = p.value) === null || _b === void 0 ? void 0 : _b.url) &&
(fieldSchema.type === 'image upload' || fieldSchema.type === 'image') ? (react_1.default.createElement("img", { src: `${serverEndPoint === null || serverEndPoint === void 0 ? void 0 : serverEndPoint.url}${p.value.url}`, alt: p.value.name, style: { width: '100%', maxHeight: '100px', objectFit: 'cover' } })) : (react_1.default.createElement(Typography_1.default, { variant: "body2" }, p.value.name.split('/').pop())))));
};
if (isEditable && !col.disabled) {
column.renderEditCell = (p) => {
var _a;
const err = (_a = validationErrors[p.id]) === null || _a === void 0 ? void 0 : _a[p.field];
const acc = fieldSchema.allowed_mime_types
? fieldSchema.allowed_mime_types.join(', ')
: fieldSchema.type.includes('image')
? 'image/*'
: '*';
return (react_1.default.createElement(FileInputCell_1.FileInputCell, Object.assign({ accept: acc, fileType: fieldSchema.type, column: column, required: (0, utils_1.isFieldRequired)(fieldSchema) }, p, { error: Boolean(err), helperText: err })));
};
}
break;
case 'string':
if (isEditable && !col.disabled && (fieldSchema.pattern_format || col.patternFormat)) {
column.renderEditCell = (p) => {
var _a;
const err = (_a = validationErrors[p.id]) === null || _a === void 0 ? void 0 : _a[p.field];
return (react_1.default.createElement(GridPatternInput_1.GridPatternInput, Object.assign({}, p, { patternFormat: fieldSchema.pattern_format || col.patternFormat || '', error: Boolean(err), helperText: err })));
};
}
break;
}
if (indexFieldMinWidth && !column.minWidth)
column.minWidth = col.field === indexField ? indexFieldMinWidth : minWidth;
if (indexField && col.field === indexField) {
column.flex = 1;
column.renderCell = (p) => {
if (LinkComponent &&
(customLinkDestination || indexFieldBasePath !== '') &&
!actions.includes('edit')) {
const to = customLinkDestination
? customLinkDestination(p)
: (0, utils_2.buildEditPath)(indexFieldBasePath, p.id);
return (react_1.default.createElement(LinkComponent, { to: `${to}`, state: stateToLink }, p.formattedValue));
}
return react_1.default.createElement(react_1.default.Fragment, null, p.formattedValue);
};
}
if (!column.renderEditCell) {
column.renderEditCell = (p) => {
var _a;
const err = (_a = validationErrors[p.id]) === null || _a === void 0 ? void 0 : _a[p.field];
return react_1.default.createElement(GridGenericInput_1.GridGenericInput, Object.assign({}, p, { error: Boolean(err), helperText: err }));
};
}
if (customColumnOperations)
column = yield customColumnOperations(column);
return column;
}));
return Promise.all(promises);
});
exports.buildPreparedColumns = buildPreparedColumns;