drf-react-by-schema 0.6.2 → 0.6.4

package/dist/api.d.ts

@@ -1,6 +1,6 @@
 import { serverEndPointType } from './context/DRFReactBySchemaContext';
 import { Item, SchemaType, modelOptionsType, DataSchemaColumnsType, ItemSchemaColumnsType, PaginatedResult } from './utils';
-import { GridFilterModel } from '@mui/x-data-grid';
+import { GridFilterModel, GridSortModel } from '@mui/x-data-grid';
 import { AlertColor } from '@mui/material/Alert';
 type Id = string | number | null;
 interface TargetApiParams {
@@ -71,6 +71,7 @@ export interface getGenericModelListProps {
     loadedModelOptions?: modelOptionsType | boolean;
     page?: number;
     filter?: GridFilterModel;
+    sort?: GridSortModel;
     sumRows?: SumRowsType;
 }
 export interface SumRowsType {
@@ -83,7 +84,7 @@ interface SumRowsItem {
     suffix?: string;
     isCount?: boolean;
 }
-export declare const getGenericModelList: ({ model, serverEndPoint, id, relatedModel, relatedModelId, columnFields, hiddenFields, creatableFields, isInBatches, loadedSchema, loadedModelOptions, page, filter, sumRows, }: getGenericModelListProps) => Promise<false | DataSchemaColumnsType>;
+export declare const getGenericModelList: ({ model, serverEndPoint, id, relatedModel, relatedModelId, columnFields, hiddenFields, creatableFields, isInBatches, loadedSchema, loadedModelOptions, page, filter, sort, sumRows, }: getGenericModelListProps) => Promise<false | DataSchemaColumnsType>;
 export declare const getGenericModel: ({ model, serverEndPoint, id, relatedModel, relatedModelId, }: {
     model: string;
     serverEndPoint: serverEndPointType | null;

package/dist/api.js

@@ -540,7 +540,7 @@ const isLoggedIn = (serverEndPoint) => __awaiter(void 0, void 0, void 0, functio
     return usuaria;
 });
 exports.isLoggedIn = isLoggedIn;
-const getGenericModelList = ({ model, serverEndPoint, id = '', relatedModel = '', relatedModelId = '', columnFields, hiddenFields = ['id'], creatableFields = [], isInBatches = false, loadedSchema, loadedModelOptions, page, filter, sumRows, }) => __awaiter(void 0, void 0, void 0, function* () {
+const getGenericModelList = ({ model, serverEndPoint, id = '', relatedModel = '', relatedModelId = '', columnFields, hiddenFields = ['id'], creatableFields = [], isInBatches = false, loadedSchema, loadedModelOptions, page, filter, sort, sumRows, }) => __awaiter(void 0, void 0, void 0, function* () {
     let path = `${model}/${id}`;
     let schemaPath = model;
     let schema = loadedSchema;
@@ -550,17 +550,16 @@ const getGenericModelList = ({ model, serverEndPoint, id = '', relatedModel = ''
         path += `/${relatedModel}/${relatedModelId}`;
         schemaPath += `/${id}/${relatedModel}`;
     }
-    if (page || filter || sumRows) {
-        path += '?';
-    }
+    const queryParams = [];
+    // SERVER-SIDE TOTALS (sumRows):
     if (sumRows) {
         const sumRowsParams = sumRows.rows.map(row => row.field).join(',');
-        path += `sum_rows=${sumRowsParams}`;
+        queryParams.push(`sum_rows=${sumRowsParams}`);
     }
+    // SERVER-SIDE FILTERING:
     if (filter) {
-        const filtersArr = [];
         if (filter.quickFilterValues && filter.quickFilterValues.length > 0 && filter.quickFilterValues[0]) {
-            filtersArr.push(`search=${filter.quickFilterValues[0]}`);
+            queryParams.push(`search=${filter.quickFilterValues[0]}`);
         }
         for (const item of filter.items) {
             if (!item.operatorValue) {
@@ -569,18 +568,23 @@ const getGenericModelList = ({ model, serverEndPoint, id = '', relatedModel = ''
             const queryParam = item.value
                 ? `columnField=${item.columnField}&operatorValue=${item.operatorValue}&value=${item.value}`
                 : `columnField=${item.columnField}&operatorValue=${item.operatorValue}`;
-            filtersArr.push(queryParam);
+            queryParams.push(queryParam);
         }
-        if (sumRows) {
-            path += '&';
+    }
+    // SERVER-SIDE SORTING:
+    if (sort) {
+        const sortParams = [];
+        for (const item of sort) {
+            sortParams.push(item.sort === 'desc' ? `-${item.field}` : item.field);
         }
-        path += filtersArr.join('&');
+        queryParams.push(`ordering=${sortParams.join(',')}`);
     }
+    // SERVER-SIDE PAGINATION:
     if (page) {
-        if (sumRows || filter) {
-            path += '&';
-        }
-        path += `page=${page + 1}`;
+        queryParams.push(`page=${page + 1}`);
+    }
+    if (queryParams.length > 0) {
+        path += `?${queryParams.join('&')}`;
     }
     // Only get schema and columns if not in batches or in first batch:
     if (!schema) {

package/dist/components/DataGridBySchemaEditable/GridDateInput.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { CalendarPickerView } from '@mui/x-date-pickers/CalendarPicker';
+type GridDateInputProps = {
+    field: string;
+    id: number | string;
+    value?: any;
+    column: object;
+    dateViews?: CalendarPickerView[] | undefined;
+};
+export declare const GridDateInput: ({ id, value, field, dateViews, }: GridDateInputProps) => JSX.Element;
+export {};

package/dist/components/DataGridBySchemaEditable/GridDateInput.js

@@ -0,0 +1,40 @@
+"use strict";
+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.GridDateInput = void 0;
+const react_1 = __importDefault(require("react"));
+const x_data_grid_1 = require("@mui/x-data-grid");
+const TextField_1 = __importDefault(require("@mui/material/TextField"));
+const DesktopDatePicker_1 = require("@mui/x-date-pickers/DesktopDatePicker");
+const utils_1 = require("../../utils");
+function buildOpenTo(dateViews) {
+    if (!dateViews || dateViews.includes('day')) {
+        return 'day';
+    }
+    if (dateViews.includes('month')) {
+        return 'month';
+    }
+    return 'year';
+}
+const GridDateInput = ({ id, value, field, dateViews, }) => {
+    const apiRef = (0, x_data_grid_1.useGridApiContext)();
+    const inputFormat = (0, utils_1.buildDateFormatBySchema)(dateViews);
+    const handleChange = (newValue) => __awaiter(void 0, void 0, void 0, function* () {
+        yield apiRef.current.setEditCellValue({ id, field, value: newValue });
+        apiRef.current.stopCellEditMode({ id, field });
+    });
+    const openTo = buildOpenTo(dateViews);
+    return (react_1.default.createElement(DesktopDatePicker_1.DesktopDatePicker, { key: field, value: value, onChange: handleChange, views: dateViews, openTo: openTo, inputFormat: inputFormat, renderInput: (params) => (react_1.default.createElement(TextField_1.default, Object.assign({}, params, { margin: "normal" }))) }));
+};
+exports.GridDateInput = GridDateInput;

package/dist/components/DataGridBySchemaEditable/SelectEditInputCell.js

@@ -63,7 +63,6 @@ const filter = (0, Autocomplete_1.createFilterOptions)();
 function SelectEditInputCell({ field, id, value, column, type, optionsAC, isIndexField, multiple = false, onEditModel, sx = {}, }) {
     // TODO: allow edit option label, as in formautocomplete!
     const apiRef = (0, x_data_grid_1.useGridApiContext)();
-    console.log(column);
     const handleChange = (newValue) => __awaiter(this, void 0, void 0, function* () {
         yield apiRef.current.setEditCellValue({ id, field, value: newValue });
         apiRef.current.stopCellEditMode({ id, field });

package/dist/components/DataGridBySchemaEditable.js

@@ -64,6 +64,7 @@ const DRFReactBySchemaContext_1 = require("../context/DRFReactBySchemaContext");
 const utils_2 = require("./DataGridBySchemaEditable/utils");
 const CustomToolbar_1 = require("./DataGridBySchemaEditable/CustomToolbar");
 const SelectEditInputCell_1 = require("./DataGridBySchemaEditable/SelectEditInputCell");
+const GridDateInput_1 = require("./DataGridBySchemaEditable/GridDateInput");
 const GridDecimalInput_1 = require("./DataGridBySchemaEditable/GridDecimalInput");
 const GridPatternInput_1 = require("./DataGridBySchemaEditable/GridPatternInput");
 const BooleanInputCell_1 = require("./DataGridBySchemaEditable/BooleanInputCell");
@@ -180,10 +181,15 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
             switch (schema[col.field].type) {
                 case 'date':
                     column.type = 'date';
-                    column.valueFormatter = (params) => params.value ? (0, moment_1.default)(params.value).format('DD/MM/YYYY') : '';
+                    const dateFormat = (0, utils_1.buildDateFormatBySchema)(schema[col.field].date_views);
+                    column.valueFormatter = (params) => params.value ? (0, moment_1.default)(params.value).format(dateFormat) : '';
                     column.filterOperators = (0, utils_2.quantityOnlyOperators)({
                         type: 'date',
                     });
+                    if (isEditable) {
+                        column.renderEditCell = (params) => (react_1.default.createElement(GridDateInput_1.GridDateInput, Object.assign({}, params, { column: column, dateViews: schema[col.field].date_views })));
+                        break;
+                    }
                     break;
                 case 'datetime':
                     column.type = 'dateTime';
@@ -615,6 +621,12 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
                         setPaginationModel(Object.assign(Object.assign({}, paginationModel), { filter: newFilter }));
                     }
                 }
+                : undefined, sortingMode: paginationModel ? 'server' : 'client', onSortModelChange: paginationModel
+                ? (newSorting) => {
+                    if (setPaginationModel && paginationModel) {
+                        setPaginationModel(Object.assign(Object.assign({}, paginationModel), { sort: newSorting }));
+                    }
+                }
                 : undefined })),
         react_1.default.createElement(ConfirmDialog_1.ConfirmDialog, { open: dialogOpen, onClose: handleDialogClose, onConfirm: handleDeleteSave }),
         react_1.default.createElement(Snackbar_1.default, { open: snackBar.open, autoHideDuration: 5000, onClose: () => {

package/dist/components/GenericModelList.js

@@ -103,6 +103,7 @@ const GenericModelList = ({ columnFields, hiddenFields = [], minWidthFields, ind
                     hiddenFields,
                     page: paginationModel ? paginationModel.page : 0,
                     filter: paginationModel ? paginationModel.filter : undefined,
+                    sort: paginationModel ? paginationModel.sort : undefined,
                     sumRows,
                 };
                 const paginatedData = yield (0, api_1.getGenericModelList)(loadPaginatedParams);

package/dist/utils.d.ts

@@ -1,4 +1,5 @@
-import { GridActionsColDef, GridColDef, GridFilterModel } from '@mui/x-data-grid';
+import { CalendarPickerView } from '@mui/x-date-pickers/CalendarPicker';
+import { GridActionsColDef, GridColDef, GridFilterModel, GridSortModel } from '@mui/x-data-grid';
 export type Id = string | number;
 export type Item = Record<string, any>;
 export type PaginatedResult = {
@@ -12,6 +13,7 @@ export interface PaginationModel {
     page: number;
     pageSize: number;
     filter?: GridFilterModel;
+    sort?: GridSortModel;
 }
 export type SchemaType = Record<string, Field>;
 export type modelOptionsType = Record<string, string>;
@@ -39,6 +41,7 @@ export interface Field {
     related_editable?: boolean;
     validators_regex?: Item[];
     many?: boolean;
+    date_views?: CalendarPickerView[];
 }
 interface GridBySchemaColDef extends GridColDef {
     isIndexField?: boolean;
@@ -95,4 +98,5 @@ export declare const isTmpId: (id: string | number | undefined | null) => boolea
 export declare const reducer: (state: Record<string, any> | null, newState: Record<string, any>) => Record<string, any> | null;
 export declare const getPatternFormat: (type: string) => string;
 export type AddParametersToEnd<TFunction extends (...args: any) => any, TParameters extends [...args: any]> = (...args: [...Parameters<TFunction>, ...TParameters]) => ReturnType<TFunction>;
+export declare function buildDateFormatBySchema(dateViews: string[] | null | undefined): "DD/MM/yyyy" | "MM/yyyy" | "yyyy" | "MM" | "DD";
 export {};

package/dist/utils.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPatternFormat = exports.reducer = exports.isTmpId = exports.getTmpId = exports.errorProps = exports.buildGenericYupValidationSchema = exports.populateValues = exports.getChoiceByValue = exports.emptyByType = void 0;
+exports.buildDateFormatBySchema = exports.getPatternFormat = exports.reducer = exports.isTmpId = exports.getTmpId = exports.errorProps = exports.buildGenericYupValidationSchema = exports.populateValues = exports.getChoiceByValue = exports.emptyByType = void 0;
 const Yup = __importStar(require("yup"));
 ;
 ;
@@ -288,3 +288,29 @@ const getPatternFormat = (type) => {
     return format;
 };
 exports.getPatternFormat = getPatternFormat;
+function buildDateFormatBySchema(dateViews) {
+    const defaultFormat = 'DD/MM/yyyy';
+    if (!dateViews) {
+        return defaultFormat;
+    }
+    const hasDay = dateViews.includes('day');
+    const hasMonth = dateViews.includes('month');
+    const hasYear = dateViews.includes('year');
+    if (hasDay && hasMonth && hasYear) {
+        return defaultFormat;
+    }
+    if (!hasDay && hasMonth && hasYear) {
+        return 'MM/yyyy';
+    }
+    if (!hasDay && !hasMonth && hasYear) {
+        return 'yyyy';
+    }
+    if (!hasDay && hasMonth && !hasYear) {
+        return 'MM';
+    }
+    if (hasDay && !hasMonth && !hasYear) {
+        return 'DD';
+    }
+    return defaultFormat;
+}
+exports.buildDateFormatBySchema = buildDateFormatBySchema;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drf-react-by-schema",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "Components and Tools for building a React App having Django Rest Framework (DRF) as server",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",