drf-react-by-schema 0.2.1 → 0.3.0

package/src/context/APIWrapperContext.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { ItemSchemaColumnsType, Id, Item, SchemaType } from '../utils';
+
+export interface LoadSinglePageDataProps {
+    model: string;
+    objId: Id;
+    objTitleField?: string;
+    optionsACModels: string[];
+    basePath?: string;
+    formPath?: string | null;
+    extraValidators: Item;
+};
+
+// export interface LoadingStateType {
+//     loading: boolean,
+//     setLoading: React.Dispatch<React.SetStateAction<boolean>>;
+// };
+
+export type OptionsACType = Record<string, Item[]>;
+
+export interface PageFormType {
+    id: Id;
+    schema: SchemaType | null;
+    initialValues: Item | null;
+    validationSchema: Item | null;
+};
+
+export interface OnEditModelType {
+    fieldKey: string;
+    index: string;
+    model: string;
+    id: Id;
+    labelKey: string;
+    setValue: (p: any) => void;
+    getValues: (p: any) => any;
+};
+
+export interface OnEditRelatedModelType {
+    model: string;
+    id: Id;
+    relatedModel: string;
+    relatedModelId: Id;
+    newRow: Item;
+    schema: SchemaType;
+    onlyAddExisting: boolean;
+};
+
+export interface OnDeleteRelatedModelType {
+    model: string;
+    id: Id;
+    relatedModel: string;
+    relatedModelId: Id;
+};
+
+export interface SnackBarType {
+    open?: boolean;
+    msg?: string;
+    severity?: string
+};
+
+export interface DialogType {
+    open: boolean;
+    loading?: boolean;
+    title?: string;
+    Body?: React.ReactNode;
+    Actions?: React.ReactNode;
+}
+
+export interface APIWrapperContextType {
+    usuaria: Item | null;
+    onSubmit: (model: string, id: Id, data: Item, e: React.SyntheticEvent<HTMLButtonElement, SubmitEvent>) => Promise<false | Id>;
+    loadSinglePageData: (p: LoadSinglePageDataProps) => boolean | Item;
+    handleLoading: (p: boolean) => void;
+    optionsACState: [{ [x: string]: any; }, React.Dispatch<OptionsACType>];
+    pageFormState: [{ [x: string]: any; }, React.Dispatch<PageFormType>];
+    onEditModel: (p: OnEditModelType) => void;
+    onDeleteModel: (model:string, id:Id, onSuccess:()=>void | null) => void;
+    onEditRelatedModelSave: (p: OnEditRelatedModelType) => Promise<boolean | Id | ItemSchemaColumnsType>;
+    onDeleteRelatedModel: (p: OnDeleteRelatedModelType) => Promise<boolean>;
+    onTriggerSnackBar: (p: SnackBarType) => void;
+    setDialog: React.Dispatch<React.SetStateAction<DialogType>>;
+};
+
+export const APIWrapperContext = React.createContext<APIWrapperContextType | null>(null);

package/src/context/DRFReactBySchemaContext.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Theme } from '@mui/material/styles';
+
+import defaultTheme from '../styles/theme';
+
+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;
+    theme: Theme;
+    isInBatches?: boolean;
+    firstBatchLength?: number;
+}
+
+export const DRFReactBySchemaContext = React.createContext<DRFReactBySchemaContextType>({
+    serverEndPoint: null,
+    theme: defaultTheme,
+    isInBatches: true,
+    firstBatchLength: 100
+});
+
+export const useTheme = () => {
+    const context = React.useContext(DRFReactBySchemaContext);
+    return context.theme;
+}

package/src/context/DRFReactBySchemaProvider.md

@@ -1,7 +1,9 @@
-DRFReactBySchemaProvider example:
-
 ```js
+/*
+import Box from '@mui/material/Box';
 import DataGridBySchemaEditable from '../components/DataGridBySchemaEditable';
+import { APIWrapperContext } from '../context/APIWrapperContext';
+
 const data = {
     data: [],
     columns: [],
@@ -25,26 +27,31 @@ const Link = null;
         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}
-    />
+    <Box sx={{ height: 300px }}>
+        <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 => {
+                const apiContext = React.useContext(APIWrapperContext);
+                apiContext.handleLoading(false);
+                setData({
+                    ...data,
+                    data: newData
+                });
+            }}
+            LinkComponent={Link}
+        />
+    </Box>
 </DRFReactBySchemaProvider>
+*/
 ```

package/src/context/DRFReactBySchemaProvider.tsx

@@ -1,44 +1,28 @@
-import { ServerResponse } from 'http';
 import React from 'react';
+import { ThemeProvider, Theme } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
 
-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;
-}
+import defaultTheme from '../styles/theme';
+import Overlays from './Overlays';
+import { DRFReactBySchemaContextType, serverEndPointType, DRFReactBySchemaContext } from './DRFReactBySchemaContext';
 
 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> = ({
+const DRFReactBySchemaProvider = ({
     serverEndPoint,
+    theme,
     isInBatches,
     firstBatchLength,
     children
-}) => {
+}: DRFReactBySchemaProviderProps) => {
     if (serverEndPoint) {
         const defaultKeys = [
             'autocomplete',
@@ -62,16 +46,26 @@ const DRFReactBySchemaProvider: React.FC<DRFReactBySchemaProviderProps> = ({
         }
     }
 
+    const mergedTheme = (theme)
+        ? { ...defaultTheme, ...theme }
+        : defaultTheme;
+
     return (
-        <DRFReactBySchemaContext.Provider 
-            value={{
-                serverEndPoint, 
-                isInBatches,
-                firstBatchLength 
-            }}
-        >
-            {children}
-        </DRFReactBySchemaContext.Provider>
+        <ThemeProvider theme={mergedTheme}>
+            <CssBaseline />
+            <DRFReactBySchemaContext.Provider 
+                value={{
+                    serverEndPoint,
+                    theme,
+                    isInBatches,
+                    firstBatchLength
+                }}
+            >
+                <Overlays 
+                    children = {children}
+                />
+            </DRFReactBySchemaContext.Provider>
+        </ThemeProvider>
     );
 }
 

package/src/context/Overlays.tsx

@@ -0,0 +1,94 @@
+import React, { useState, useReducer } from 'react';
+import Backdrop from '@mui/material/Backdrop';
+import CircularProgress from '@mui/material/CircularProgress';
+import Snackbar from '@mui/material/Snackbar';
+import Alert from '@mui/material/Alert';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Box from '@mui/material/Box';
+
+import { reducer } from '../utils';
+import APIWrapper from './APIWrapper';
+import { DialogType, SnackBarType } from './APIWrapperContext';
+
+export default function Overlays ({ children }: { children:React.ReactNode }) {
+    const initialSnackBar:SnackBarType = {
+        open: false,
+        msg: '',
+        severity: 'info'
+    };
+
+    const initialDialog:DialogType = {
+        open: false,
+        loading: true,
+        title: '',
+        Body: null,
+        Actions: null
+    };
+    const [snackBar, setSnackBar] = useReducer(reducer, initialSnackBar);
+    const [dialog, setDialog] = useReducer(reducer, initialDialog);
+    const [loading, setLoading] = useState<boolean>(true);
+
+    // give some time to stop loading when data is retrieved and must render before loading rendering:
+    const handleLoading = (loadingState:boolean) => {
+        if (loadingState) {
+            setLoading(true);
+            return;
+        }
+        setTimeout(() => {
+            setLoading(false);
+        }, 300);
+    };
+
+    const handleDialogClose = () => {
+        setDialog({
+            open: false
+        });
+    };
+
+    return (
+        <>
+            <APIWrapper
+                setLoading={setLoading}
+                handleLoading={handleLoading}
+                setSnackBar={setSnackBar}
+                setDialog={setDialog}
+                children={children}
+            />
+            <Backdrop
+                sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+                open={loading}
+            >
+                <CircularProgress />
+            </Backdrop>
+            <Snackbar
+                open={snackBar.open}
+                autoHideDuration={3000}
+                onClose={() => { setSnackBar({ open: false }); }}
+                anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+            >
+                <Alert severity={snackBar.severity}>
+                    {snackBar.msg}
+                </Alert>
+            </Snackbar>
+            <Dialog open={dialog.open} onClose={handleDialogClose}>
+                <DialogTitle>
+                    {dialog.loading ? 'Carregando...' : dialog.title}
+                </DialogTitle>
+                <DialogContent>
+                    {dialog.loading
+                        ? <Box sx={{ display: 'flex' }}><CircularProgress /></Box>
+                        : <>{dialog.Body}</>
+                    }
+                </DialogContent>
+                <DialogActions>
+                    {!dialog.loading &&
+                        <>{dialog.Actions}</>
+                    }
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+}

package/src/index.ts

@@ -1,3 +1,4 @@
+// Methods:
 import {
     updateData,
     partialUpdateData,
@@ -26,18 +27,30 @@ import {
     getPatternFormat
 } from './utils';
 
-// Components:
-import DRFReactBySchemaProvider, { DRFReactBySchemaContext } from './context/DRFReactBySchemaProvider';
+// Wrappers/Providers:
+import DRFReactBySchemaProvider from './context/DRFReactBySchemaProvider';
+import { DRFReactBySchemaContext, useTheme } from './context/DRFReactBySchemaContext';
+import { APIWrapperContext } from './context/APIWrapperContext';
+// Components
 import DataGridBySchemaEditable from './components/DataGridBySchemaEditable';
 import GenericModelList from './components/GenericModelList';
+import GenericRelatedModelList from './components/GenericRelatedModelList';
 import DataTotals from './components/DataTotals';
+import DialogActions from './components/DialogActions';
 
 export {
+    // Wrappers/Providers:
     DRFReactBySchemaProvider,
     DRFReactBySchemaContext,
+    APIWrapperContext,
+    useTheme,
+    // Components:
     DataGridBySchemaEditable,
     GenericModelList,
+    GenericRelatedModelList,
     DataTotals,
+    DialogActions,
+    // Methods:
     updateData,
     partialUpdateData,
     createData,

package/src/styles/theme.ts

@@ -113,7 +113,7 @@ const palette = {
     }
 };
 
-const theme = createTheme(
+const defaultTheme = createTheme(
     {
         palette,
         components: {
@@ -187,4 +187,4 @@ const theme = createTheme(
     pickersPtBR
 );
 
-export default theme;
+export default defaultTheme;

package/src/utils.ts

@@ -33,6 +33,16 @@ interface GridActionsBySchemaColDef extends GridActionsColDef {
     patternFormat?: string
 };
 export type GridEnrichedBySchemaColDef = GridBySchemaColDef | GridActionsBySchemaColDef;
+export interface DataSchemaColumnsType {
+    data: Item[];
+    schema: SchemaType;
+    columns?: GridEnrichedBySchemaColDef[];
+}
+export interface ItemSchemaColumnsType {
+    data: Item;
+    schema: SchemaType;
+    columns?: GridEnrichedBySchemaColDef[];
+}
 
 export const emptyByType: any = (field:Field, forDatabase:boolean = false) => {
     if (field.model_default) {
@@ -76,11 +86,9 @@ export const getChoiceByValue = (
 };
 
 export const populateValues = ({
-    model,
     data,
     schema
 }: {
-    model:string,
     data:Item,
     schema:SchemaType
 }) => {
@@ -101,7 +109,6 @@ export const populateValues = ({
                 const arValues = [];
                 for (const row of data[key]) {
                     const value = populateValues({
-                        model,
                         data: row,
                         schema: field.child.children
                     });
@@ -112,7 +119,6 @@ export const populateValues = ({
             }
 
             values[key] = populateValues({
-                model,
                 data: data[key],
                 schema: field.child.children
             });
@@ -318,4 +324,4 @@ export const getPatternFormat = (type:string) => {
         break;
     }
     return format;
-};
+};

package/styleguide.config.js

@@ -2,13 +2,8 @@ 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);
-//       });
-//   },
+  title: 'Styleguides for DRF React By Schema Package',
+  styleguideDir: 'public',
   components: [
     'src/components/*.tsx',
     'src/context/*.tsx'