drf-react-by-schema 0.1.0 → 0.2.0

package/src/components/DataTotals.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import Alert, { AlertColor } from '@mui/material/Alert';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import { NumericFormat } from 'react-number-format';
+import { Item } from '../utils';
+import { DRFReactBySchemaContext, DRFReactBySchemaContextType } from '../context/DRFReactBySchemaProvider';
+
+export interface SumRowsType {
+    rows: Item[],
+    severity?: AlertColor;
+}
+
+interface DataTotalsProps {
+    data?: Item[];
+    sumRows?: SumRowsType;
+    visibleRows?: string[];
+};
+
+const DataTotals = ({
+    data,
+    sumRows,
+    visibleRows
+}: DataTotalsProps) => {
+    return (
+        <>
+            {data && sumRows && sumRows.rows.length > 0 &&
+                <Alert severity={sumRows.severity || 'info'}>
+                    <List dense={true}>
+                        {sumRows.rows.map(row => (
+                            <ListItem key={`sumRows_${row.field}`}>
+                                <NumericFormat
+                                    value={data.reduce((total, item) => {
+                                        if (parseFloat(item[row.field]) && visibleRows && visibleRows.includes(item.id)) {
+                                            return total + parseFloat(item[row.field]);
+                                        }
+                                        return total;
+                                    }, 0)}
+                                    thousandSeparator='.'
+                                    decimalSeparator=','
+                                    displayType={'text'}
+                                    decimalScale={row.isCount ? 0 : 2}
+                                    fixedDecimalScale={true}
+                                    prefix={row.prefix}
+                                    suffix={row.suffix}
+                                />
+                            </ListItem>
+                        ))}
+                    </List>
+                </Alert>
+            }
+        </>
+    );
+};
+
+export default DataTotals;

package/src/components/GenericModelList.tsx

@@ -0,0 +1,155 @@
+import React, { useState, useEffect } from 'react';
+import Box from '@mui/material/Box';
+
+import DataGridBySchemaEditable from './DataGridBySchemaEditable';
+import DataTotals, { SumRowsType } from './DataTotals';
+import { Layout } from '../styles';
+// import CONSTANTS from '../constants';
+import { GridEnrichedBySchemaColDef, Item, SchemaType } from '../utils';
+import { DataSchemaColumnsType, getGenericModelList, getGenericModelListProps } from '../api';
+import { DRFReactBySchemaContext, DRFReactBySchemaContextType } from '../context/DRFReactBySchemaProvider';
+
+interface GenericModelListProps {
+    columnFields: string[];
+    hiddenFields?: string[];
+    minWidthFields?: Record<string, number>;
+    indexFieldBasePath: string;
+    indexField: string;
+    customColumnOperations?: (column: GridEnrichedBySchemaColDef) => GridEnrichedBySchemaColDef;
+    customLinkDestination?: (p: any) => string;
+    sumRows?: SumRowsType;
+    isAutoHeight?: boolean;
+    model: string;
+    handleLoading: (p: any) => void;
+    forceReload: boolean;
+    LinkComponent: React.ReactNode;
+}
+
+const GenericModelList = ({
+    columnFields,
+    hiddenFields = [],
+    minWidthFields,
+    indexFieldBasePath,
+    indexField,
+    customColumnOperations,
+    customLinkDestination,
+    sumRows,
+    isAutoHeight = true,
+    model,
+    handleLoading,
+    forceReload = false,
+    LinkComponent = null
+}: GenericModelListProps) => {
+    const { serverEndPoint, isInBatches, firstBatchLength }:DRFReactBySchemaContextType = DRFReactBySchemaContext
+        ? React.useContext(DRFReactBySchemaContext) as DRFReactBySchemaContextType
+        : { serverEndPoint: null };
+    if (!serverEndPoint) {
+        console.error('Error: There is no endpoint defined in DRFReactBySchemaProvider!');
+        return (<></>);
+    }
+    interface dataProps {
+        data: Item[];
+        schema: SchemaType;
+        columns: GridEnrichedBySchemaColDef[]
+    };
+    const [data, setData] = useState<DataSchemaColumnsType | boolean>(false);
+    const [visibleRows, setVisibleRows] = useState<string[]>([]);
+    const [hideFooterPagination, setHideFooterPagination] = useState(false);
+
+    const finalCustomColumnOperations = (column: GridEnrichedBySchemaColDef) => {
+        if (minWidthFields) {
+            if (Object.prototype.hasOwnProperty.call(minWidthFields, column.field)) {
+                column.minWidth = minWidthFields[column.field];
+            }
+        }
+
+        if (customColumnOperations) {
+            return customColumnOperations(column);
+        }
+
+        return column;
+    };
+
+    const loadObjectList = async () => {
+        const loadParams:getGenericModelListProps = {
+            model,
+            serverEndPoint,
+            columnFields,
+            hiddenFields,
+            isInBatches
+        };
+        handleLoading(true);
+        const loadedData = await getGenericModelList(loadParams);
+        if (loadedData && typeof loadedData !== 'boolean') {
+            setData(loadedData);
+            handleLoading(false);
+            if (isInBatches && loadedData.data.length === firstBatchLength) {
+                setHideFooterPagination(true);
+                getGenericModelList({
+                    ...loadParams,
+                    loadedSchema: loadedData.schema
+                }).then(lastBatchData => {
+                    if (lastBatchData && typeof lastBatchData !== 'boolean') {
+                        setData({
+                            ...loadedData,
+                            data: [
+                                ...loadedData.data,
+                                ...lastBatchData.data
+                            ]
+                        });
+                    }
+                    setHideFooterPagination(false);
+                });
+            }
+            return;
+        }
+        console.log('error retrieving data!');
+    };
+
+    if (forceReload) {
+        loadObjectList();
+    }
+
+    useEffect(() => {
+        loadObjectList();
+    }, []);
+
+    return (
+        <>
+            {data && typeof data !== 'boolean' && data.columns &&
+                <>
+                    <Box sx={Layout.dataGridWithTabs}>
+                        <DataGridBySchemaEditable
+                            data={data.data}
+                            columns={data.columns}
+                            schema={data.schema || {}}
+                            model={model}
+                            indexField={indexField}
+                            indexFieldBasePath={indexFieldBasePath}
+                            isEditable={false}
+                            isAutoHeight={isAutoHeight}
+                            hideFooterPagination={hideFooterPagination}
+                            customColumnOperations={finalCustomColumnOperations}
+                            customLinkDestination={customLinkDestination}
+                            setVisibleRows={setVisibleRows}
+                            onDataChange={newData => {
+                                setData({
+                                    ...data,
+                                    data: newData
+                                });
+                            }}
+                            LinkComponent={LinkComponent}
+                        />
+                    </Box>
+                    <DataTotals
+                        data={data.data}
+                        sumRows={sumRows}
+                        visibleRows={visibleRows}
+                    />
+                </>
+            }
+        </>
+    );
+};
+
+export default GenericModelList;

package/src/components/TextFieldBySchema.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Control } from "react-hook-form";
+import TextField from '@mui/material/TextField';
+
+import { errorProps } from '../utils';
+
+export interface TextFieldBySchemaType {
+    name: string;
+    Controller: React.ReactNode;
+    control: Control;
+    errors: 
+}
+
+export default function TextFieldBySchema ({
+    Controller,
+    name,
+    schema,
+    control,
+    errors,
+    multiline = false,
+    fieldKey = null,
+    index = null,
+    sx = { mr: 2 },
+    ...other
+}) {
+    const model = name;
+    if (fieldKey && index >= 0) {
+        name = `${fieldKey}.${index}.${name}`;
+    }
+    const { error, helperText } = (fieldKey && index >= 0)
+        ? errorProps({
+            fieldKey,
+            index,
+            fieldKeyProp: name,
+            errors
+        })
+        : {
+            error: errors && Boolean(errors[name]),
+            helperText: (errors && errors[name]) ? errors[name].message : ''
+        };
+    return (
+        <Controller
+            name={name}
+            control={control}
+            render={({ field }) => (
+                <TextField
+                    {...field}
+                    {...other}
+                    id={name}
+                    key={name}
+                    label={schema[model].label}
+                    margin="normal"
+                    fullWidth
+                    multiline={multiline}
+                    error={error}
+                    helperText={helperText}
+                    sx={sx}
+                />
+            )}
+        />
+    );
+}

package/src/context/DRFReactBySchemaProvider.md

@@ -0,0 +1,50 @@
+DRFReactBySchemaProvider example:
+
+```js
+import DataGridBySchemaEditable from '../components/DataGridBySchemaEditable';
+const data = {
+    data: [],
+    columns: [],
+    schema: {}
+};
+const model = 'example';
+const indexField = null;
+const indexFieldBasePath = null;
+const isAutoHeight = true;
+const hideFooterPagination = false;
+const finalCustomColumnOperations = null;
+const customLinkDestination = null;
+const setVisibleRows = null;
+const setData = (newData) => {
+    return '';
+};
+const Link = null;
+<DRFReactBySchemaProvider
+    serverEndPoint={{
+        url: 'https://icv.eita.org.br/api',
+        apiTokenUrl: 'https://icv.eita.org.br/api-auth/token'
+    }}
+>
+    <DataGridBySchemaEditable
+        data={data.data}
+        columns={data.columns}
+        schema={data.schema}
+        model={model}
+        indexField={indexField}
+        indexFieldBasePath={indexFieldBasePath}
+        isEditable={false}
+        isAutoHeight={isAutoHeight}
+        hideFooterPagination={hideFooterPagination}
+        customColumnOperations={finalCustomColumnOperations}
+        customLinkDestination={customLinkDestination}
+        setVisibleRows={setVisibleRows}
+        onDataChange={newData => {
+            setData({
+                ...data,
+                data: newData
+            });
+        }}
+        LinkComponent={Link}
+    />
+</DRFReactBySchemaProvider>
+```

package/src/context/DRFReactBySchemaProvider.tsx

@@ -0,0 +1,78 @@
+import { ServerResponse } from 'http';
+import React from 'react';
+
+export interface serverEndPointType {
+    url: string;
+    autocomplete?: string;
+    api?: string;
+    JSONSchema?: string;
+    apiTokenUrl: string;
+    getToken?: string;
+    refreshToken?: string,
+    verifyToken?: string
+}
+export interface DRFReactBySchemaContextType {
+    serverEndPoint: serverEndPointType | null;
+    isInBatches?: boolean;
+    firstBatchLength?: number;
+}
+
+interface DRFReactBySchemaProviderProps extends DRFReactBySchemaContextType {
+    children: React.ReactNode;
+}
+
+export const DRFReactBySchemaContext = React.createContext<DRFReactBySchemaContextType>({
+    serverEndPoint: null,
+    isInBatches: true,
+    firstBatchLength: 100
+});
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns {*} 
+ */
+const DRFReactBySchemaProvider: React.FC<DRFReactBySchemaProviderProps> = ({
+    serverEndPoint,
+    isInBatches,
+    firstBatchLength,
+    children
+}) => {
+    if (serverEndPoint) {
+        const defaultKeys = [
+            'autocomplete',
+            'api',
+            ['JSONSchema', 'jsonschema'],
+            ['getToken', ''],
+            ['refreshToken', 'refresh'],
+            ['verifyToken', 'verify']
+        ];
+        for (const key of defaultKeys) {
+            const hybridKey = (typeof key === 'string')
+                ? key as keyof serverEndPointType
+                : key[0] as keyof serverEndPointType;
+            const hybridUrl = (typeof key === 'string')
+                ? key
+                : key[1];
+            if (serverEndPoint[hybridKey]) {
+                continue;
+            }
+            serverEndPoint[hybridKey] = `${serverEndPoint.url}/${hybridUrl}`;
+        }
+    }
+
+    return (
+        <DRFReactBySchemaContext.Provider 
+            value={{
+                serverEndPoint, 
+                isInBatches,
+                firstBatchLength 
+            }}
+        >
+            {children}
+        </DRFReactBySchemaContext.Provider>
+    );
+}
+
+export default DRFReactBySchemaProvider;

package/src/index.ts

@@ -1,3 +1,64 @@
+import {
+    updateData,
+    partialUpdateData,
+    createData,
+    deleteData,
+    createOrUpdateData,
+    updateDataBySchema,
+    addExistingRelatedModel,
+    getAutoComplete,
+    getJSONSchema,
+    createOrUpdateJSONSchema,
+    loginByPayload,
+    setAuthToken,
+    isLoggedIn,
+    getGenericModelList,
+    getGenericModel
+} from './api';
+import {
+    emptyByType,
+    getChoiceByValue,
+    populateValues,
+    buildGenericYupValidationSchema,
+    errorProps,
+    getTmpId,
+    isTmpId,
+    getPatternFormat
+} from './utils';
+
+// Components:
+import DRFReactBySchemaProvider, { DRFReactBySchemaContext } from './context/DRFReactBySchemaProvider';
 import DataGridBySchemaEditable from './components/DataGridBySchemaEditable';
+import GenericModelList from './components/GenericModelList';
+import DataTotals from './components/DataTotals';
 
-export { DataGridBySchemaEditable }
+export {
+    DRFReactBySchemaProvider,
+    DRFReactBySchemaContext,
+    DataGridBySchemaEditable,
+    GenericModelList,
+    DataTotals,
+    updateData,
+    partialUpdateData,
+    createData,
+    deleteData,
+    createOrUpdateData,
+    updateDataBySchema,
+    addExistingRelatedModel,
+    getAutoComplete,
+    getJSONSchema,
+    createOrUpdateJSONSchema,
+    loginByPayload,
+    setAuthToken,
+    isLoggedIn,
+    getGenericModelList,
+    getGenericModel,
+    emptyByType,
+    getChoiceByValue,
+    populateValues,
+    buildGenericYupValidationSchema,
+    errorProps,
+    getTmpId,
+    isTmpId,
+    getPatternFormat
+};

package/src/utils.ts

@@ -3,16 +3,16 @@ import { GridActionsColDef, GridColDef } from '@mui/x-data-grid';
 
 export type Id = string | number;
 export type Item = Record<string, any>;
-export type Schema = Record<string, Field>;
+export type SchemaType = Record<string, Field>;
 export interface Choice {
     value: string | number,
     display_name: string
 };
-type FieldChild = Record<string, Schema>;
+type FieldChild = Record<string, SchemaType>;
 export interface Field {
     type: string,
     child?: FieldChild,
-    children?: Schema,
+    children?: SchemaType,
     model_default?: any,
     model_required?: boolean
     choices?: Choice[],
@@ -82,7 +82,7 @@ export const populateValues = ({
 }: {
     model:string,
     data:Item,
-    schema:Schema
+    schema:SchemaType
 }) => {
     const values:Record<string, any> = {};
     for (const entry of Object.entries(schema)) {
@@ -193,7 +193,7 @@ export const buildGenericYupValidationSchema = ({
     extraValidators = {}
 }:{
     data:Item,
-    schema:Schema,
+    schema:SchemaType,
     many?:boolean,
     skipFields?: string[],
     extraValidators?:Item

package/styleguide.config.js

@@ -0,0 +1,18 @@
+const path = require('path');
+const glob = require('glob');
+
+module.exports = {
+  title: 'React Style Guide Example',
+//   components: function () {
+//     return glob.sync(path.resolve(__dirname, 'src/components/**/*.tsx'))
+//       .filter(function (module) {
+//         return /\/[A-Z]\w*\.tsx$/.test(module);
+//       });
+//   },
+  components: [
+    'src/components/*.tsx',
+    'src/context/*.tsx'
+  ],
+  resolver: require('react-docgen').resolver.findAllComponentDefinitions,
+  propsParser: require('react-docgen-typescript').withDefaultConfig({ propFilter: { skipPropsWithoutDoc: false } }).parse
+};

package/webpack.config.js

@@ -0,0 +1,24 @@
+var path = require('path');
+
+module.exports = {
+  entry: {
+      bundle: ['./src/index.ts'],
+  },
+  context: path.resolve(__dirname),
+  output: {
+    filename: 'bundle.js',
+    path: path.join(__dirname, 'temp')
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        loader: 'ts-loader',
+        exclude: /node_modules/,
+      }
+    ]
+  },
+  resolve: {
+    extensions: [".tsx", ".ts", ".js"]
+  }
+};