drf-react-by-schema 0.2.2 → 0.3.1

package/src/components/DataTotals.tsx

@@ -1,56 +0,0 @@
-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

@@ -1,155 +0,0 @@
-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/context/DRFReactBySchemaProvider.md

@@ -1,50 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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,64 +0,0 @@
-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 {
-    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/styles/layout.ts

@@ -1,104 +0,0 @@
-import theme from './theme';
-
-export const content = {
-    flexGrow: 1,
-    pr: 3,
-    pl: 3,
-    pt: 2,
-    pb: 0
-};
-
-export const main = {
-    ...content,
-    ml: 4
-};
-
-export const flexRow = {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center'
-};
-
-export const topBar = {
-    ...flexRow,
-    width: '100%',
-    pl: 3,
-    pr: 6
-};
-
-export const loadingBox = {
-    ...flexRow,
-    height: '100%',
-    backgroundColor: '#ccc',
-    justifyContent: 'center'
-};
-
-export const actionButtons = {
-    ...flexRow,
-    width: '100%',
-    alignItems: 'flex-start'
-};
-
-export const inLineForm = {
-    ...flexRow,
-    width: '100%',
-    justifyContent: 'flex-start'
-};
-
-export const flexColumn = {
-    ...flexRow,
-    flexDirection: 'column'
-};
-
-export const flexRowGrow = {
-    ...flexRow,
-    flexGrow: 1
-};
-
-export const topBarOverList = {
-    ...flexRowGrow,
-    mb: 2
-};
-
-export const dataGrid = {
-    height: 'calc(100vh - 180px)',
-    mt: 2
-};
-
-export const dataGridWithTabs = {
-    ...dataGrid,
-    mt: 0
-};
-
-export const dataGridFixedHeight = {
-    ...dataGrid,
-    height: 400
-};
-
-export const fullWidthButton = {
-    mt: 3,
-    width: '100%'
-};
-
-export const formCard = {
-    width: '100%',
-    backgroundColor: theme.palette.formCard.main,
-    mt: 2,
-    mb: 2
-};
-
-export const formCardContent = {
-    maxHeight: 350,
-    overflow: 'scroll'
-};
-
-export const metabaseAppEmbed = {
-    height: 1700
-};
-
-export const geoPicker = {
-    height: 350,
-    width: '100%',
-    mt: 0
-};

package/src/styles/theme.ts

@@ -1,190 +0,0 @@
-import type {} from '@mui/x-data-grid/themeAugmentation';
-import { createTheme } from '@mui/material/styles';
-import { ptBR as corePtBR } from '@mui/material/locale';
-import { ptBR } from '@mui/x-data-grid';
-import { ptBR as pickersPtBR } from '@mui/x-date-pickers';
-
-declare module '@mui/material/styles' {
-    // interface Theme {
-    //     status: {
-    //         danger: React.CSSProperties['color'];
-    //     };
-    // }
-    interface Palette {
-        avatars: string[];
-        avatarsMore: string[];
-        topBarButton: Palette['primary'];
-        producao: Palette['primary'];
-        empreendimento: Palette['primary'];
-        comercializacao: Palette['primary'];
-        credito: Palette['primary'];
-        certificacao: Palette['primary'];
-        successButton: Palette['primary'];
-        selectedItem: Palette['primary'];
-        tableColumnHeader: Palette['primary'];
-        formCard: Palette['primary'];
-    }
-    // interface PaletteOptions {
-    //     neutral: PaletteOptions['primary'];
-    // }
-    //
-    interface PaletteColor {
-        semaphoric?: string;
-    }
-    // interface SimplePaletteColorOptions {
-    //     darker?: string;
-    // }
-    // interface ThemeOptions {
-    //     status: {
-    //         danger: React.CSSProperties['color'];
-    //     };
-    // }
-}
-
-
-ptBR.components.MuiDataGrid.defaultProps.localeText = {
-    ...ptBR.components.MuiDataGrid.defaultProps.localeText,
-    toolbarQuickFilterPlaceholder: 'Buscar...',
-    toolbarQuickFilterLabel: 'Buscar',
-    toolbarQuickFilterDeleteIconLabel: 'Limpar busca'
-};
-
-const palette = {
-    avatars: ['#e60049', '#0bb4ff', '#50e991', '#e6d800', '#9b19f5', '#ffa300', '#dc0ab4', '#b3d4ff', '#00bfa0'],
-    avatarsMore: ['#023fa5', '#8e063b', '#d33f6a', '#11c638', '#ef9708', '#0fcfc0', '#f79cd4', '#7d87b9', '#bb7784', '#4a6fe3', '#8595e1', '#b5bbe3', '#e6afb9', '#e07b91', '#8dd593', '#c6dec7', '#ead3c6', '#f0b98d', '#9cded6', '#d5eae7', '#f3e1eb', '#f6c4e1', '#bec1d4', '#d6bcc0'],
-    topBarButton: {
-        main: '#ffffff'
-    },
-    producao: {
-        main: '#e60049',
-        contrastText: '#fff'
-    },
-    empreendimento: {
-        main: '#0bb4ff',
-        contrastText: '#fff'
-    },
-    comercializacao: {
-        main: '#ffa300',
-        contrastText: '#fff'
-    },
-    credito: {
-        main: '#dc0ab4',
-        contrastText: '#fff'
-    },
-    certificacao: {
-        main: '#9b19f5',
-        contrastText: '#fff'
-    },
-    background: {
-        default: '#D9D9D9'
-    },
-    primary: {
-        main: '#3949AB'
-    },
-    secondary: {
-        main: '#9ca4d5',
-        contrastText: '#fff'
-    },
-    successButton: {
-        main: '#CDDC39',
-        contrastText: '#fff'
-    },
-    success: {
-        main: '#0e0',
-        contrastText: '#fff',
-        semaphoric: '#0e0'
-    },
-    error: {
-        main: '#d32f2f',
-        semaphoric: '#f66'
-    },
-    warning: {
-        main: '#ee0',
-        semaphoric: '#ee0'
-    },
-    selectedItem: {
-        main: '#2962FF'
-    },
-    tableColumnHeader: {
-        main: '#ECEFF1'
-    },
-    formCard: {
-        main: '#FFF'
-    }
-};
-
-const theme = createTheme(
-    {
-        palette,
-        components: {
-            MuiButton: {
-                styleOverrides: {
-                    contained: {
-                        // borderRadius: 50
-                    }
-                }
-            },
-            MuiTextField: {
-                styleOverrides: {
-                    root: {
-                        '&.Mui-required .MuiFormLabel-asterisk': {
-                            // color: '#F00'
-                        }
-                    }
-                }
-            },
-            MuiListItemButton: {
-                styleOverrides: {
-                    root: {
-                        '&.Mui-selected, :hover': {
-                            color: palette.selectedItem.main,
-                            '& .MuiListItemIcon-root': {
-                                color: palette.selectedItem.main
-                            }
-                        },
-                        '&.Mui-selected:hover': {
-                            color: palette.selectedItem.main,
-                            '& .MuiListItemIcon-root': {
-                                color: palette.selectedItem.main
-                            }
-                        },
-                        '&.disabled': {
-                            opacity: 0.5
-                        }
-                    }
-                }
-            },
-            MuiDataGrid: {
-                styleOverrides: {
-                    root: {
-                        backgroundColor: palette.formCard.main,
-                        '& .MuiDataGrid-columnHeaderTitle': {
-                            overflow: 'visible',
-                            lineHeight: '1.43rem',
-                            whiteSpace: 'normal'
-                        }
-                    },
-                    cell: {
-                        // backgroundColor: 'yellow'
-                    },
-                    columnHeader: {
-                        backgroundColor: palette.tableColumnHeader.main
-                    }
-                }
-            },
-            MuiTabs: {
-                styleOverrides: {
-                    root: {
-                        backgroundColor: palette.formCard.main,
-                        marginTop: 20
-                    }
-                }
-            }
-        }
-    },
-    corePtBR,
-    ptBR,
-    pickersPtBR
-);
-
-export default theme;