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.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 });
const react_1 = __importStar(require("react"));
const axios_1 = __importDefault(require("axios"));
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 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, hideColumnsButton, hideFilterButton, hideDensityButton, hideExportButton, hideQuickFilterBar, tableAutoHeight, actions, optionsAC, defaultValues, LinkComponent, extraValidators, reloadStateStamp, MobileListRenderItem, MobileRenderNoResults, }) {
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, getGenericModelList } = (0, APIWrapperContext_1.useAPIWrapper)();
const columnVisibilityModel = (0, react_1.useMemo)(() => {
const model = {};
hiddenFields === null || hiddenFields === void 0 ? void 0 : hiddenFields.forEach((field) => {
model[field] = false;
});
return model;
}, [hiddenFields]);
const finalCustomColumnOperations = (0, react_1.useCallback)((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;
}), [customColumnOperations, minWidthFields]);
const loadObjectList = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
setLoading(true);
switch (paginationMode) {
case 'client':
const loadParams = {
model,
id,
relatedModel,
indexFieldBasePath,
columnFields,
creatableFields,
disabledFields,
usuaria,
isInBatches,
queryParams,
filter: defaultFilter,
};
const loadedData = yield getGenericModelList(loadParams);
if (loadedData && !axios_1.default.isAxiosError(loadedData)) {
setData(loadedData);
setLoading(false);
if (isInBatches && loadedData.data.length === 100) {
setHideFooterPagination(true);
getGenericModelList(Object.assign(Object.assign({}, loadParams), { loadedSchema: loadedData.schema })).then((lastBatchData) => {
if (lastBatchData && !axios_1.default.isAxiosError(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 sort = paginationModel ? paginationModel.sort : undefined;
const filter = (0, utils_1.mergeFilterItems)(defaultFilter, paginationModel ? paginationModel.filter : undefined);
const paginatedData = yield getGenericModelList({
model,
id,
relatedModel,
columnFields,
creatableFields,
disabledFields,
page,
filter,
sort,
sumRows,
queryParams,
});
if (paginatedData && !axios_1.default.isAxiosError(paginatedData)) {
setData(paginatedData);
setLoading(false);
return;
}
console.log('error retrieving data!');
break;
}
}), [
columnFields,
creatableFields,
defaultFilter,
disabledFields,
id,
indexFieldBasePath,
isInBatches,
model,
paginationMode,
paginationModel,
queryParams,
relatedModel,
sumRows,
usuaria,
getGenericModelList,
]);
const onDataChangeLocal = (0, react_1.useCallback)((newData) => {
if (!data) {
return;
}
if (reloadAfterRowUpdate) {
loadObjectList();
return;
}
if (onDataChange) {
onDataChange(newData);
}
setData(Object.assign(Object.assign({}, data), { data: newData }));
}, [data, reloadAfterRowUpdate, onDataChange, loadObjectList]);
(0, react_1.useEffect)(() => {
loadObjectList();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [id, model, defaultFilter, queryParams, paginationModel, reloadStateStamp]);
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, columnVisibilityModel: columnVisibilityModel, 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, visibleRows: visibleRows, isAutoHeight: isAutoHeight, tableAutoHeight: tableAutoHeight, hideFooterPagination: hideFooterPagination, hideFooterComponent: hideFooterComponent, hideToolbarComponent: hideToolbarComponent, hideColumnsButton: hideColumnsButton, hideFilterButton: hideFilterButton, hideDensityButton: hideDensityButton, hideExportButton: hideExportButton, hideQuickFilterBar: hideQuickFilterBar, onProcessRow: onProcessRow, onDataChange: onDataChangeLocal, sumRows: sumRows, paginationMode: paginationMode, paginationModel: paginationModel, setPaginationModel: setPaginationModel, actions: actions, optionsAC: optionsAC, defaultValues: defaultValues, LinkComponent: LinkComponent, extraValidators: extraValidators, MobileListRenderItem: MobileListRenderItem, MobileRenderNoResults: MobileRenderNoResults })) : (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, columnVisibilityModel: columnVisibilityModel, 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, visibleRows: visibleRows, isAutoHeight: isAutoHeight, tableAutoHeight: tableAutoHeight, hideFooterPagination: hideFooterPagination, hideFooterComponent: hideFooterComponent, hideToolbarComponent: hideToolbarComponent, onProcessRow: onProcessRow, onDataChange: onDataChangeLocal, sumRows: sumRows, paginationMode: paginationMode, paginationModel: paginationModel, setPaginationModel: setPaginationModel, actions: actions, optionsAC: optionsAC, defaultValues: defaultValues, LinkComponent: LinkComponent, extraValidators: extraValidators, MobileListRenderItem: MobileListRenderItem, MobileRenderNoResults: MobileRenderNoResults }))))))));
}
exports.default = react_1.default.memo(GenericRelatedModelList, utils_1.shouldMemoUpdate);