BaseCrudPage

BaseCrudPage allows you to quickly create a window with a standard implementation of the CRUD functionality.

Example

index.tsx

import React from 'react';
import Entity from '@entities/Entity'
import BaseCrudPage from '@views/BaseCrudPage';

const MyComponent: React.FC = () = {

	return (
		<>
			<BaseCrudPage
				methods={Entity.methods}
				fields={Entity.fields}
				queryFilter={Entity.queryFilter}
				filters={Entity.filters}
				table={Entity.table}
				forms={Entity.forms}
				style={style}
			/>
		</>
	);
};

export default MyComponent;

BaseCrudPage props

BaseCrudPageProps<T>

Property	Description	Type	Default
methods	crud methods	IMethods<T>	-
fields	fields for basecrudpage	IEntityField	-
queryFilter	pagination params	IQueryFilter	-
filters	filters fields and save method	IEntityFilter	-
table	table params	IEntityTable	-
forms	form params	IEntityForm	-
style	container styles	React.CSSProperties	undefined

IMethods

interface IMethods<T> {
	getData: ((...args: any[]) => Promise<AxiosResponse<T[] | IErrorResponse>>) | ((...args: any[]) => void);
	getById?: (id: number) => Promise<AxiosResponse<T | IErrorResponse>>;
	create?: (body: any) => Promise<AxiosResponse<boolean | IErrorResponse>>;
	update?: (id: number, body: any) => Promise<AxiosResponse<boolean | IErrorResponse>>;
	delete?: (id: number) => Promise<AxiosResponse<boolean | IErrorResponse>>;
}

IEntityField

interface IEntityField {
	[key: string]: {
		name: string;
		keyName: string;
		fieldType?: FieldTypeEnum;
		entityName?: EntityNameEnum;
		label?: string;
		filterableRowName?: string;
		rowName?: string;
		localFiltering?: boolean;
		constName?: string;
	};
}

enum FieldType {
	DATEPICKER,
	SELECT,
	CHECKBOX,
	RADIO,
	INPUT,
	COMPONENT,
}

IQueryFilter

interface IQueryFilter {
	parameters: {
		name: string;
		type: PaginationParams;
		defaultValue?: string | number;
		required?: boolean;
	}[];
}

enum PaginationParams {
	OFFSET = 'offset',
	LIMIT = 'limit',
	SORT_BY = 'sortBy',
	SORT_ORDER = 'sortOrder',
}

IEntityFilter

interface IEntityFilter {
	filterFields: IFilterField[];
	onSave: (...args: any) => void;
}

IEntityTable

interface IEntityTable {
	type: TableType;
	tableFields: ITableField[];
	actions?: IAction[];
	footFields?: ITableFooterField[];
	limit?: number;
	rowClick?: (itemId?: number | string) => void;
	style?: React.CSSProperties;
	nodeStyle?: React.CSSProperties;
}

IEntityForm

interface IEntityForm {
	[key: string]: {
		formFields: IFormField[];
	};
}