drf-react-by-schema 0.6.3 → 0.6.4

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';

package/dist/utils.d.ts

@@ -1,3 +1,4 @@
+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>;
@@ -40,6 +41,7 @@ export interface Field {
     related_editable?: boolean;
     validators_regex?: Item[];
     many?: boolean;
+    date_views?: CalendarPickerView[];
 }
 interface GridBySchemaColDef extends GridColDef {
     isIndexField?: boolean;
@@ -96,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.3",
+  "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",