drf-react-by-schema
Version:
Components and Tools for building a React App having Django Rest Framework (DRF) as server
168 lines (167 loc) • 10.7 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
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.default = GenericRelatedModelList;
const react_1 = __importStar(require("react"));
const Card_1 = __importDefault(require("@mui/material/Card"));
const CardHeader_1 = __importDefault(require("@mui/material/CardHeader"));
const CardContent_1 = __importDefault(require("@mui/material/CardContent"));
const APIWrapperContext_1 = require("../context/APIWrapperContext");
const utils_1 = require("../utils");
const api_1 = require("../api");
const styles_1 = require("../styles");
const GenericRelatedModelListTable_1 = __importDefault(require("./GenericRelatedModelListTable"));
function GenericRelatedModelList({ model, id, relatedModel, columnFields, hiddenFields = ['id'], creatableFields, disabledFields, usuaria = null, minWidthFields, indexField, indexFieldBasePath, indexFieldViewBasePath, addExistingModel, label, onProcessRow, onDataChange, reloadAfterRowUpdate, customColumnOperations, isEditable = true, hasBulkSelect = false, onSelectActions, sumRows, isAutoHeight = false, isInBatches = true, noCardWrapper = false, paginationMode = 'client', defaultFilter, queryParams, hideFooterComponent, hideToolbarComponent, tableAutoHeight, actions, optionsAC, defaultValues, LinkComponent, extraValidators, MobileListRenderItem, }) {
const [data, setData] = (0, react_1.useState)(false);
const [visibleRows, setVisibleRows] = (0, react_1.useState)([]);
const [loading, setLoading] = (0, react_1.useState)(false);
const [hideFooterPagination, setHideFooterPagination] = (0, react_1.useState)(false);
const [paginationModel, setPaginationModel] = (0, react_1.useState)(paginationMode === 'server' ? { page: 0, pageSize: 100 } : undefined);
const { onEditModel, onDeleteRelatedModel, serverEndPoint } = (0, APIWrapperContext_1.useAPIWrapper)();
const finalCustomColumnOperations = (column) => __awaiter(this, void 0, void 0, function* () {
if (minWidthFields) {
if (column.field in minWidthFields) {
column.minWidth = minWidthFields[column.field];
}
}
if (customColumnOperations) {
return yield customColumnOperations(column);
}
return column;
});
const loadObjectList = () => __awaiter(this, void 0, void 0, function* () {
setLoading(true);
switch (paginationMode) {
case 'client':
const loadParams = {
model,
id,
relatedModel,
indexFieldBasePath,
columnFields,
creatableFields,
disabledFields,
hiddenFields,
usuaria,
isInBatches,
queryParams,
serverEndPoint,
filter: defaultFilter,
};
const loadedData = yield (0, api_1.getGenericModelList)(loadParams);
if (loadedData && typeof loadedData !== 'boolean') {
setData(loadedData);
setLoading(false);
if (isInBatches && loadedData.data.length === 100) {
setHideFooterPagination(true);
(0, api_1.getGenericModelList)(Object.assign(Object.assign({}, loadParams), { loadedSchema: loadedData.schema })).then((lastBatchData) => {
if (lastBatchData) {
setData(Object.assign(Object.assign({}, loadedData), { data: [...loadedData.data, ...lastBatchData.data] }));
setHideFooterPagination(false);
}
});
}
return;
}
console.log('error retrieving data!');
break;
case 'server':
const page = paginationModel ? paginationModel.page : 0;
const filter = (0, utils_1.mergeFilterItems)(defaultFilter, paginationModel ? paginationModel.filter : undefined);
const sort = paginationModel ? paginationModel.sort : undefined;
const paginatedData = yield (0, api_1.getGenericModelList)({
model,
id,
relatedModel,
columnFields,
hiddenFields,
creatableFields,
disabledFields,
page,
filter,
sort,
sumRows,
queryParams,
serverEndPoint,
});
if (paginatedData && typeof paginatedData !== 'boolean') {
setData(paginatedData);
setLoading(false);
return;
}
console.log('error retrieving data!');
break;
}
});
const onDataChangeLocal = (newData) => {
if (!data) {
return;
}
if (reloadAfterRowUpdate) {
loadObjectList();
return;
}
if (onDataChange) {
onDataChange(newData);
}
setData(Object.assign(Object.assign({}, data), { data: newData }));
};
(0, react_1.useEffect)(() => {
loadObjectList();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [id, model, defaultFilter, queryParams]);
(0, react_1.useEffect)(() => {
if (paginationMode === 'server') {
loadObjectList();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [paginationModel]);
return (react_1.default.createElement(react_1.default.Fragment, null, typeof data !== 'boolean' && data.columns && (react_1.default.createElement(react_1.default.Fragment, null, noCardWrapper ? (react_1.default.createElement(GenericRelatedModelListTable_1.default, { data: data, relatedModel: relatedModel, model: model, loading: loading, id: id, indexField: indexField || '', indexFieldBasePath: indexFieldBasePath, indexFieldViewBasePath: indexFieldViewBasePath, addExistingModel: addExistingModel, isEditable: isEditable, hasBulkSelect: hasBulkSelect, onSelectActions: onSelectActions, onEditModel: onEditModel, onDeleteRelatedModel: onDeleteRelatedModel, finalCustomColumnOperations: finalCustomColumnOperations, setVisibleRows: setVisibleRows, isAutoHeight: isAutoHeight, tableAutoHeight: tableAutoHeight, hideFooterPagination: hideFooterPagination, hideFooterComponent: hideFooterComponent, hideToolbarComponent: hideToolbarComponent, onProcessRow: onProcessRow, onDataChange: onDataChangeLocal, sumRows: sumRows, visibleRows: visibleRows, paginationMode: paginationMode, paginationModel: paginationModel, setPaginationModel: setPaginationModel, actions: actions, optionsAC: optionsAC, defaultValues: defaultValues, LinkComponent: LinkComponent, extraValidators: extraValidators, MobileListRenderItem: MobileListRenderItem })) : (react_1.default.createElement(Card_1.default, { sx: styles_1.Layout.formCard },
react_1.default.createElement(CardHeader_1.default, { title: label }),
react_1.default.createElement(CardContent_1.default, null,
react_1.default.createElement(GenericRelatedModelListTable_1.default, { data: data, relatedModel: relatedModel, model: model, loading: loading, id: id, indexField: indexField || '', indexFieldBasePath: indexFieldBasePath, indexFieldViewBasePath: indexFieldViewBasePath, addExistingModel: addExistingModel, isEditable: isEditable, hasBulkSelect: hasBulkSelect, onSelectActions: onSelectActions, onEditModel: onEditModel, onDeleteRelatedModel: onDeleteRelatedModel, finalCustomColumnOperations: finalCustomColumnOperations, setVisibleRows: setVisibleRows, isAutoHeight: isAutoHeight, tableAutoHeight: tableAutoHeight, hideFooterPagination: hideFooterPagination, hideFooterComponent: hideFooterComponent, hideToolbarComponent: hideToolbarComponent, onProcessRow: onProcessRow, onDataChange: onDataChangeLocal, sumRows: sumRows, visibleRows: visibleRows, paginationMode: paginationMode, paginationModel: paginationModel, setPaginationModel: setPaginationModel, actions: actions, optionsAC: optionsAC, defaultValues: defaultValues, LinkComponent: LinkComponent, extraValidators: extraValidators, MobileListRenderItem: MobileListRenderItem }))))))));
}