drf-react-by-schema
Version:
Components and Tools for building a React App having Django Rest Framework (DRF) as server
203 lines (202 loc) • 13.5 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 Box_1 = __importDefault(require("@mui/material/Box"));
const Typography_1 = __importDefault(require("@mui/material/Typography"));
const Button_1 = __importDefault(require("@mui/material/Button"));
const AddCircleOutline_1 = __importDefault(require("@mui/icons-material/AddCircleOutline"));
const Backdrop_1 = __importDefault(require("@mui/material/Backdrop"));
const CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
const DataGridBySchemaEditable_1 = __importDefault(require("./DataGridBySchemaEditable"));
const DataTotals_1 = __importDefault(require("./DataTotals"));
const DataTotalsServer_1 = __importDefault(require("./DataTotalsServer"));
const styles_1 = require("../styles");
const utils_1 = require("../utils");
const api_1 = require("../api");
const DRFReactBySchemaContext_1 = require("../context/DRFReactBySchemaContext");
const APIWrapperContext_1 = require("../context/APIWrapperContext");
function GenericModelList({ model, columnFields, hiddenFields, creatableFields, disabledFields, minWidthFields, indexField, indexFieldBasePath, indexFieldViewBasePath, addExistingModel, onProcessRow, onDataChange, reloadAfterRowUpdate, customColumnOperations, customFieldFormLayouts, customLinkDestination, isEditable, hasBulkSelect, onSelectActions, sumRows, isAutoHeight = true, LinkComponent = null, hasHeader, paginationMode = 'client', defaultFilter, queryParams, hideFooterComponent, hideToolbarComponent, hideColumnsButton, hideFilterButton, hideDensityButton, hideExportButton, hideQuickFilterBar, tableAutoHeight, actions, customActions, optionsAC, defaultValues, disableScreenLoading, extraValidators, reloadStateStamp, MobileListRenderItem, MobileRenderNoResults, }) {
const { serverEndPoint, isInBatches, firstBatchLength } = (0, DRFReactBySchemaContext_1.useDRFReactBySchema)();
const { onEditModel, isMobile } = (0, APIWrapperContext_1.useAPIWrapper)();
const [data, setData] = (0, react_1.useState)(false);
const [loading, setLoading] = (0, react_1.useState)(false);
const [visibleRows, setVisibleRows] = (0, react_1.useState)([]);
const [hideFooterPagination, setHideFooterPagination] = (0, react_1.useState)(false);
const [paginationModel, setPaginationModel] = (0, react_1.useState)(paginationMode === 'server' ? { page: 0, pageSize: 100 } : undefined);
const columnVisibilityModel = (0, react_1.useMemo)(() => {
const model = {};
hiddenFields === null || hiddenFields === void 0 ? void 0 : hiddenFields.forEach((col) => {
model[col] = 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* () {
if (!disableScreenLoading) {
setLoading(true);
}
switch (paginationMode) {
case 'client':
const loadParams = {
model,
serverEndPoint,
columnFields,
creatableFields,
disabledFields,
isInBatches,
queryParams,
filter: defaultFilter,
};
const loadedData = yield (0, api_1.getGenericModelList)(loadParams);
if (loadedData && !axios_1.default.isAxiosError(loadedData)) {
setData(loadedData);
setLoading(false);
if (isInBatches && loadedData.data.length === firstBatchLength) {
setHideFooterPagination(true);
(0, api_1.getGenericModelList)(Object.assign(Object.assign({}, loadParams), { loadedSchema: loadedData.schema, loadedModelOptions: loadedData.modelOptions })).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!');
return;
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 loadPaginatedParams = {
model,
serverEndPoint,
columnFields,
creatableFields,
disabledFields,
page,
filter,
queryParams,
sort,
sumRows,
};
const paginatedData = yield (0, api_1.getGenericModelList)(loadPaginatedParams);
if (paginatedData && !axios_1.default.isAxiosError(paginatedData)) {
setData(paginatedData);
setLoading(false);
return;
}
console.log('error retrieving data!');
return;
}
}), [
columnFields,
creatableFields,
defaultFilter,
disableScreenLoading,
disabledFields,
firstBatchLength,
isInBatches,
model,
paginationMode,
paginationModel,
queryParams,
serverEndPoint,
sumRows,
]);
(0, react_1.useEffect)(() => {
loadObjectList();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [model, defaultFilter, queryParams, hiddenFields, paginationModel, reloadStateStamp]);
// useEffect(() => {
// if (paginationMode === 'server') {
// loadObjectList();
// }
// // eslint-disable-next-line react-hooks/exhaustive-deps
// }, [paginationModel]);
if (!serverEndPoint) {
console.error('Error: There is no endpoint defined in DRFReactBySchemaProvider!');
return react_1.default.createElement(react_1.default.Fragment, null);
}
return (react_1.default.createElement(react_1.default.Fragment, null, typeof data !== 'boolean' && data.columns ? (react_1.default.createElement(react_1.default.Fragment, null,
data.data.length > 0 && isMobile && MobileListRenderItem && (react_1.default.createElement(react_1.default.Fragment, null, paginationMode === 'client' ? (react_1.default.createElement(DataTotals_1.default, { schema: data.schema, data: data.data, sumRows: sumRows, visibleRows: visibleRows })) : (react_1.default.createElement(DataTotalsServer_1.default, { schema: data.schema, sumRows: sumRows, totals: data.sumRowsTotals })))),
hasHeader && (react_1.default.createElement(Box_1.default, { sx: Object.assign(Object.assign({}, styles_1.Layout.flexRowGrow), { mb: 2 }) },
react_1.default.createElement(Typography_1.default, { variant: "h5" }, data.modelOptions.verbose_name_plural || data.modelOptions.name),
LinkComponent && (react_1.default.createElement(Box_1.default, { sx: styles_1.Layout.flexRow },
react_1.default.createElement(LinkComponent, { to: `novo` },
react_1.default.createElement(Button_1.default, { variant: "contained", size: "medium", sx: { alignSelf: 'stretch' }, startIcon: react_1.default.createElement(AddCircleOutline_1.default, null) }, "Adicionar")))))),
react_1.default.createElement(Box_1.default, { sx: tableAutoHeight ? {} : styles_1.Layout.dataGridWithTabs },
react_1.default.createElement(DataGridBySchemaEditable_1.default, { data: data.data, columns: data.columns, columnVisibilityModel: columnVisibilityModel, schema: data.schema || {}, model: model, loading: loading, indexField: indexField, indexFieldBasePath: indexFieldBasePath, indexFieldViewBasePath: indexFieldViewBasePath, addExistingModel: addExistingModel, isEditable: isEditable, hasBulkSelect: hasBulkSelect, onSelectActions: onSelectActions, onEditModel: onEditModel, isAutoHeight: isAutoHeight, tableAutoHeight: tableAutoHeight, customColumnOperations: finalCustomColumnOperations, customFieldFormLayouts: customFieldFormLayouts, setVisibleRows: setVisibleRows, hideFooterPagination: hideFooterPagination, hideFooterComponent: hideFooterComponent, hideToolbarComponent: hideToolbarComponent, hideColumnsButton: hideColumnsButton, hideFilterButton: hideFilterButton, hideDensityButton: hideDensityButton, hideExportButton: hideExportButton, hideQuickFilterBar: hideQuickFilterBar, customLinkDestination: customLinkDestination, actions: actions, customActions: customActions, optionsAC: optionsAC, defaultValues: defaultValues, onProcessRow: onProcessRow, onDataChange: (newData) => {
if (reloadAfterRowUpdate) {
loadObjectList();
return;
}
if (onDataChange) {
onDataChange(newData);
}
setData(Object.assign(Object.assign({}, data), { data: newData }));
}, LinkComponent: LinkComponent || undefined, paginationModel: paginationMode === 'server' ? paginationModel : undefined, setPaginationModel: paginationMode === 'server' ? setPaginationModel : undefined, rowCount: paginationMode === 'client'
? undefined
: typeof data.rowCount !== undefined
? data.rowCount
: 0, extraValidators: extraValidators, MobileListRenderItem: MobileListRenderItem, MobileRenderNoResults: MobileRenderNoResults })),
data.data.length > 0 && (!isMobile || !MobileListRenderItem) && (react_1.default.createElement(react_1.default.Fragment, null, paginationMode === 'client' ? (react_1.default.createElement(DataTotals_1.default, { schema: data.schema, data: data.data, sumRows: sumRows, visibleRows: visibleRows })) : (react_1.default.createElement(DataTotalsServer_1.default, { schema: data.schema, sumRows: sumRows, totals: data.sumRowsTotals })))))) : (react_1.default.createElement(Backdrop_1.default, { invisible: true, sx: { color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }, open: loading },
react_1.default.createElement(CircularProgress_1.default, null)))));
}
exports.default = react_1.default.memo(GenericModelList, utils_1.shouldMemoUpdate);