Crud Configuration

In order to use the Entity, you need to provide the necessary configuration.

CMS_CRUD_CONFIG:

endPoints: EndPoints<T>;
actions?: BaseCRUDActions;
openFilterAccordion?: boolean;
openFormType?: 'page' | 'dialog';
actionsMode: 'backend' | 'manual';
tableConfiguration?: BaseTableConfiguration<T>;

Let us to breackdown these options:

1. endPoints(required): This option to add your endpoint with ability to override on by adding create , update , view , and remove options if the backend in your project is diffrent, let's see the option in the type of EndPoints:

{
    index: string;
    create?: string;
    update?: (id: any) => string;
    view?: (id: any) => string;
    remove?: (id: any) => string;
    removeMultiple?: (items: T[]) => {
        endPoint: string;
        requestBody: any;
    };
    importFile?: (file: File) => {
        endPoint: string;
        requestBody: any;
    };
}

1. actions(optional):

The actions is where you can add the operations you want to use , and you find below the operation that we provide :

BaseCrudActions

Operations	Type	Default value	Descaption
create	() => boolean	true	Determines if the "Create" action is enabled. Returns true to allow creating new items.
delete	() => boolean	false	Determines if the "Delete" action is enabled. Returns true to allow deletion of selected items.
hide	() => boolean	false	Determines if the action buttons or specific UI elements should be hidden.
import	() => FileConfiguration	false	Enables importing files. Returns a configuration object that specifies how the import functionality should work.
selectRows	() => boolean	false	Enables row selection in the data table. Returns true to allow selecting rows for bulk actions or export.
export	() => boolean	false	Enables exporting data to external formats (e.g., CSV, Excel). Returns true to allow exporting selected rows or the entire dataset.

The configuration for the imported files :

accept: string;//the files's type e.g: image, pdf ...
label: string;
multiple?: boolean;//if you want to allow multiple files, set it to true
maxCount?: number;//the max number of files
maxFileSize?: number;//the max size of file 
styleClass?: FileUpload["styleClass"];

1. openFilterAccordion(optional): Determines if the filter accordion is open by default. The default value is true.

2. openFormType(optional): Determines if the create/update forms should open in a dialog or on a new page. The default value is Dialog.

3. actionsMode(required): Determines if the actions is added from backend or manual.

4. tableConfiguration(optional): Configures the behavior and layout of the data table (e.g., columns, sorting, pagination).

BaseTableConfiguration

The BaseTableConfigurationis used to configure the behavior, appearance, and actions of a data table in your application. It allows developers to define columns, actions, and how these actions are displayed. The configuration is highly customizable to meet the needs of various use cases.

Propertie

Property	Type	Description	Required
dataKey	string	Specifies the property name used to uniquely identify a record in the table data.	Yes
actions	(item: T) => BaseTableColumnAction[]	A function that dynamically generates a list of actions (e.g., edit, delete) for each table row.	No
columnsMode	backend | manual | merge	Determines how data column are added: from the backend or maually or mix of both.	No
actionsDisplay	"menu" | "row"	Determines how row actions are displayed: in a dropdown menu ("menu") or inline ("row").	No
actionsMode	backend | manual | merge	Determines how actions table are added: from the backend or maually or mix of both.	Yes

Property of BaseTableColumnAction:

{
  key: any;
  label?: string;
  icon?: string;
  visible?: boolean;
  visibleFn?: () => boolean;
  severity?: Button['severity'];
}

This is an example for adding crud configuration:

user.component.ts

providers: [
    {
  provide: CMS_CRUD_CONFIG,
  useValue: {
    openFormType: 'page',//open the create/update form in new page
    //override on the view endPoint to be 'user/byid/${id}'
    endPoints: { index: 'user', view: (id) => `user/byID/${id}` },
    actionsMode: 'manual',//actions are added manual
    tableConfiguration: {
      dataKey: 'id',
      columnsMode: 'merge',//columns's data is added from backend and manual
      actionsMode: 'merge',//tables's actions are added from backend and manual
    },
  } as CRUDConfig<User>,
    },
]