CRUD library

Component CRUD : https://dev.react-doc.phpr.link/component_crud/UI_Interfaces (opens in a new tab)

It's a library project that containes "logic" of each interface (listing, modals, show, ...), it uses components library and use it in these projects :

So, in each project we find the version worked with in package.json.

Description

This project is basically a library that containes the main functions (CRUD) we need for each project,
so as can see we use it in config admin project and ticket admin project, but also we use the library Component in this project.

Project Architecture

Generale Architecture

Details of Architecture

In this part lets see the folder more detailed :

The importante folder in CRUD project is shared folder .
It containes all the different file of each action and page in all projects :

• features : in this folder we found the files for each dropdown (fields, export and action).
  

Here where to make changes :

• filters : in this file (main.tsx) we found the function of filter with each Type, for example type "search" make you create an input to filter with (for the field name you white it in the generated file)
  

• layout : containes the dropdown of "add" with the 2 buttons "quick" and "details".
  

• listing : we found 2 files for listing table in Listing page and for sidebox.
  

• modals : in this folder theres all the modals we you use in project such as AddModal, EditModal, ...
  So to add new TYPE for the API we have to add the Type with condition in all modals and in views.
  

Here where to make changes :

• search : the component of search.
  

• show : show page or details page, it is exacly just the part of data details (card).
  To add new TYPE from the API to be shown, we have to add the Type with condition, for example "email" clickable and open window to send mail.
  

Here where to make changes :

• views : folder containes all pages of project (create, edit, show, login, homepage... ).
  Like modals, if we want to add new TYPE for API we have to add the Type with condition in all views.
  

Here where to make changes :

New types

To add new type, it have to in the common.ts file in types folder first.
Second, switch the exported type we added, we have to generate the case condition with the type and item.
Third, add case contion with the new type.

example

For example, type select_async, we added the type in common.ts file in types folder:

Then in ModalAdd.tsx, where we going to use it, we add the case with the HTML :

And add this condition to be added sent to the API :

Use type in generated file

In generated file some types need other attribut, for example, select_asyn needs the attribut of "targetResourceAsync" to get the data value of the foreign entity.

Definition for each new type

Types in Field :

• Type 'url' : to navigate to other link.
• Type 'email' : ??
• Type 'phone' : ??
• otherwise, we can use Render function to render any type.

Types in FieldShow :

• Type 'url' : to navigate to other link.
• Type 'email' : to open new window of mail with clicked mail address.
• Type 'phone' : to make phone call.
• Type 'iri' : to navigate to other entity.

Types in FormInputItem :

• Type 'select' : to add one value from the list.
• Type 'select_multi' : to add multi value from the list.
• Type 'select_async' : to add one value from the list of other entity.
• Type 'date' : to add date value.
• Type 'text' : to add long text value.
• Type 'input' : to add short text value.
• Type 'checkbox' : to add checkbox value (exp : true / false).
• Type 'number' : to add integer value.
• Type 'email' : to add mail value.
• Type 'phone' : to add phone value.
• Type 'float' : to add float value.

Types in FilterFieldItem :

• Type 'select' : to search one/multi ( if multi attribut is true ) value from the list.
• Type 'select_asyn' : to search one/multi ( if multi attribut is true ) value from the list of other entity.
• Type 'date' : to search with date.
• Type 'search' : to search with any type.

References (Links)

dev link : https://dev.react-crud.phpr.link/ (opens in a new tab)
git link : https://github.com/PHPCreation/frontend-components-crud-react (opens in a new tab)