# Getting Started with Create React App

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

In the project directory, you can run:

### `npm install`

### `npm start`

Runs the app in the development mode.Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.You will also see any lint errors in the console.

#### By default Admin panel will be running with mock data environment,
which means your admin panel will not be connected with backend.
So to connect your admin panel with backend APIs,
just change `REACT_APP_IS_MOCKING` to false in .env file.


        
## Folder Structure :

- src
  - api :
    - config.js: All API URLs are defined in this file
    - client.js : Provides customized function in order to call API
  - assets
    - fonts
    - images
    - scss
  - components: Components are places in this folder
  - data :
  - pages: Contains different pages and its configuration file
    - Example :
      - User.jsx : React page
      - User.schema.json :
        - Contains different configurations:
          - Which attributes can be added/edited/displayed (User can add or edit the attributes defined in <actions> array and same will be reflected in the panel)
            - Properties of <actions>
              - addEdit : Attributes which can be added or edited are mentioned here
              - listing : Attributes which will be displayed on listing are mentioned here
              - detailView : Attributes which will be displayed on detail view (When user click on view icon ) are mentioned here
          - Theme style (dark theme or light theme)
          - Screen Layout
  - queries: Functions are defined which are used to call APIs(react-query is used)
- .env :
  - Properties :
    - REACT_APP_PORT : Define backend service port(integer)

## Table Component :

Display data in table format

| Property                        |                Description                 |   Type   | Default Value |
| :------------------------------ | :----------------------------------------: | :------: | :-----------: |
| tableName                       |               Name of table                |  String  |  Model Name   |
| columnProp                      |           Describe table columns           |   JSON   |       -       |
| modelQueries                    |        Query function for API call         | Function |       -       |
| data                            |            Describe table data             |  Array   |       -       |
| hasPaginationProp               |         Enable/Disable pagination          | Boolean  |     false     |
| pageLimitProp                   |          Display table page limit          |  Number  |      10       |
| globalSearchProp                | Enable/Disable global search functionality | Boolean  |     false     |
| allowFilterProp                 |     Enable/Disable filter for columns      | Boolean  |     false     |
| allowToggleColumnVisibilityProp | Provide functionality to hide/show column  | Boolean  |     false     |
| allowRowSelectionProp           | Enable/Disable row selection functanility  | Boolean  |     false     |
| allowResizingColumnProp         |               Allow resizing               | Boolean  |     false     |
| displayTotalCountsProp          |        Display total counts of data        | Boolean  |     false     |
| onEditRecord                    |                Edit action                 | Function |       -       |
| onDeleteRecord                  |               Delete action                | Function |       -       |
| viewDataProp                    |                View action                 | Function |       -       |

## Add Drawer Component :

Add record

| Property |     Description      |   Type   | Default Value |
| :------- | :------------------: | :------: | :-----------: |
| onSubmit | Handle submit action | Function |       -       |
| schema   |     Modal Schema     |   JSON   |       -       |
| open     |   Show/Hide drawer   | Boolean  |     false     |
| onClose  | Handle close action  | Function |       -       |

## Edit Drawer Component :

Edit record

| Property    |     Description      |   Type   | Default Value |
| :---------- | :------------------: | :------: | :-----------: |
| onSubmit    | Handle submit action | Function |       -       |
| schema      |     Modal Schema     |   JSON   |       -       |
| open        |   Show/Hide drawer   | Boolean  |     false     |
| onClose     | Handle close action  | Function |       -       |
| currentData |     Current Data     |   JSON   |       -       |