drf-react-by-schema 0.0.2 → 0.1.0

package/src/index.ts

@@ -0,0 +1,3 @@
+import DataGridBySchemaEditable from './components/DataGridBySchemaEditable';
+
+export { DataGridBySchemaEditable }

package/src/styles/index.ts

@@ -0,0 +1,3 @@
+import * as Layout from './layout';
+
+export { Layout };

package/src/styles/layout.ts

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

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

package/src/utils.ts

@@ -0,0 +1,321 @@
+import * as Yup from 'yup';
+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 interface Choice {
+    value: string | number,
+    display_name: string
+};
+type FieldChild = Record<string, Schema>;
+export interface Field {
+    type: string,
+    child?: FieldChild,
+    children?: Schema,
+    model_default?: any,
+    model_required?: boolean
+    choices?: Choice[],
+    max_length?: number | string,
+    label: string,
+    read_only?: boolean
+};
+interface GridBySchemaColDef extends GridColDef {
+    isIndexField?: boolean,
+    creatable?: boolean,
+    orderable?: boolean,
+    patternFormat?: string
+};
+interface GridActionsBySchemaColDef extends GridActionsColDef {
+    isIndexField?: boolean,
+    creatable?: boolean,
+    orderable?: boolean,
+    patternFormat?: string
+};
+export type GridEnrichedBySchemaColDef = GridBySchemaColDef | GridActionsBySchemaColDef;
+
+export const emptyByType: any = (field:Field, forDatabase:boolean = false) => {
+    if (field.model_default) {
+        return field.model_default;
+    }
+    switch (field.type) {
+    case 'nested object':
+        // emptyByType must be an empty object for the database, but must be null for the mui-autocomplete component. So I had to make this ugly hack here, when we're preparing to sendo to the database:
+        return forDatabase ? {} : null;
+    case 'field':
+        if (field.child) {
+            return [];
+        }
+        return (forDatabase)
+            ? undefined
+            : null;
+    case 'string':
+    case 'email':
+        return '';
+    case 'integer':
+        return 0;
+    case 'array':
+        return [];
+    default:
+        return null;
+    }
+};
+
+export const getChoiceByValue = (
+    value:number | string,
+    choices:Choice[] | undefined
+) => {
+    if (!choices) {
+        return null;
+    }
+    for (const choice of choices) {
+        if (choice.value === value) {
+            return choice.display_name;
+        }
+    }
+};
+
+export const populateValues = ({
+    model,
+    data,
+    schema
+}: {
+    model:string,
+    data:Item,
+    schema:Schema
+}) => {
+    const values:Record<string, any> = {};
+    for (const entry of Object.entries(schema)) {
+        const [key, field] = entry;
+        if (key === 'id' && isTmpId(data[key])) {
+            continue;
+        }
+
+        if (!data[key]) {
+            values[key] = emptyByType(field);
+            continue;
+        }
+
+        if (field.type === 'field' && field.child) {
+            if (Array.isArray(data[key])) {
+                const arValues = [];
+                for (const row of data[key]) {
+                    const value = populateValues({
+                        model,
+                        data: row,
+                        schema: field.child.children
+                    });
+                    arValues.push(value);
+                }
+                values[key] = arValues;
+                continue;
+            }
+
+            values[key] = populateValues({
+                model,
+                data: data[key],
+                schema: field.child.children
+            });
+            continue;
+        }
+
+        if (field.type === 'choice') {
+            values[key] = data[key]
+                ? {
+                    value: data[key],
+                    display_name: getChoiceByValue(data[key], field.choices)
+                }
+                : emptyByType(field);
+            continue;
+        }
+
+        values[key] = data[key];
+    }
+    // console.log(values);
+    return values;
+};
+
+const getYupValidator = (type:string) => {
+    let yupFunc;
+    try {
+        switch (type) {
+        case 'slug':
+            yupFunc = Yup.string();
+            break;
+        case 'email':
+            yupFunc = Yup.string().email('Este campo deve ser um e-mail válido.');
+            break;
+        case 'integer':
+            yupFunc = Yup.number().integer('Este campo deve ser um número inteiro');
+            break;
+        case 'choice':
+            yupFunc = Yup.object();
+            break;
+        case 'field':
+            yupFunc = Yup.mixed();
+            break;
+        case 'nested object':
+            yupFunc = Yup.object();
+            break;
+        case 'date':
+            yupFunc = Yup.date();
+            break;
+        case 'string':
+            yupFunc = Yup.string();
+            break;
+        case 'number':
+            yupFunc = Yup.number();
+            break;
+        case 'boolean':
+            yupFunc = Yup.boolean();
+            break;
+        case 'array':
+            yupFunc = Yup.array();
+            break;
+        case 'object':
+            yupFunc = Yup.object();
+            break;
+        default:
+            yupFunc = Yup.string();
+            break;
+        }
+    } catch (e) {
+        yupFunc = Yup.string();
+    }
+    return yupFunc.nullable();
+};
+
+export const buildGenericYupValidationSchema = ({
+    data,
+    schema,
+    many = false,
+    skipFields = [],
+    extraValidators = {}
+}:{
+    data:Item,
+    schema:Schema,
+    many?:boolean,
+    skipFields?: string[],
+    extraValidators?:Item
+}) => {
+    const yupValidator:Record<string, any> = {};
+    for (const entry of Object.entries(schema)) {
+        const [key, field] = entry;
+
+        if (!data || !(key in data) || key === 'id' || skipFields.includes(key)) {
+            continue;
+        }
+
+        // console.log({ key, field, data: data[key] });
+
+        // OneToMany or ManyToMany:
+        if (field.type === 'field' && field.child) {
+            yupValidator[key] = buildGenericYupValidationSchema({
+                schema: field.child.children,
+                many: true,
+                data: data[key],
+                extraValidators: Object.prototype.hasOwnProperty.call(extraValidators, key)
+                    ? extraValidators[key]
+                    : {}
+            });
+            continue;
+        }
+
+        // Nested Object:
+        if (field.type === 'nested object' && field.children) {
+            // yupValidator[key] = buildGenericYupValidationSchema({
+            //     schema: field.children,
+            //     many: false,
+            //     data: data[key],
+            //     extraValidators: Object.prototype.hasOwnProperty.call(extraValidators, key)
+            //         ? extraValidators[key]
+            //         : {}
+            // });
+            // if (!field.model_required) {
+            //     yupValidator[key] = yupValidator[key].nullable();
+            // }
+            // continue;
+        }
+
+        yupValidator[key] = Object.prototype.hasOwnProperty.call(extraValidators, key)
+            ? extraValidators[key]
+            : getYupValidator(field.type);
+
+        if (field.model_required) {
+            yupValidator[key] = yupValidator[key].required('Este campo é obrigatório');
+        }
+        if (field.max_length) {
+            yupValidator[key] = yupValidator[key].max(parseInt(field.max_length as string), `Este campo só pode ter no máximo ${field.max_length} caracteres`);
+        }
+    }
+    // console.log({ yupValidator });
+    return (many)
+        ? Yup.array().of(Yup.object().shape(yupValidator))
+        : Yup.object().shape(yupValidator);
+};
+
+export const errorProps = ({
+    type,
+    errors,
+    fieldKey,
+    fieldKeyProp,
+    index
+}: {
+    type:string,
+    errors:Item,
+    fieldKey:string,
+    fieldKeyProp:string,
+    index?:number
+}) => {
+    let error;
+    let helperText;
+    if (index) {
+        const hasErrors = errors && errors[fieldKey] && errors[fieldKey][index] && Boolean(errors[fieldKey][index][fieldKeyProp]);
+        error = hasErrors;
+        helperText = hasErrors ? errors[fieldKey][index][fieldKeyProp].message : null;
+        return { error, helperText };
+    }
+
+    const hasErrors = errors && errors[fieldKey] && Boolean(errors[fieldKey][fieldKeyProp]);
+    error = hasErrors;
+    helperText = hasErrors ? errors[fieldKey][fieldKeyProp].message : null;
+    return { error, helperText };
+};
+
+export const getTmpId = () => {
+    return 'tmp' + Math.floor(Math.random() * 1000000);
+};
+
+export const isTmpId = (id:string | number | undefined | null) => {
+    if (!id) {
+        return true;
+    }
+    return id.toString().substr(0, 3) === 'tmp';
+};
+
+export const reducer = (state:Record<string, any>, newState:Record<string, any>) => {
+    return { ...state, ...newState };
+};
+
+export const getPatternFormat = (type:string) => {
+    let format = '';
+    switch (type) {
+    case 'telefone':
+    case 'fone':
+    case 'phone':
+    case 'contact':
+    case 'contato':
+        format = '(##)#####-####';
+        break;
+    case 'cpf':
+        format = '###.###.###-##';
+        break;
+    case 'cnpj':
+        format = '##.###.###/####-##';
+        break;
+    case 'cep':
+        format = '##.###-###';
+        break;
+    }
+    return format;
+};