## Adding a new column to a Dashboard with a certain status

### Adding an already existing column definiton
In the useRecruitmentProcessColumn.js file, find the object called recruimentDashboardConfig
This object has the column configuration for a dashboard given one of the status.
The main method of this file selects between the statuses using a prop. It return a single object of the form:

```js
{
  columns: [x, y , z]
}
```

Here, x,y, and z are column definitions from the object recruimentDashboardConfig
If the column you want to add is already in the recruimentDashboardConfig object, to add the column to your dashboard you only need to add it to your array of columns

If the column you need is not there, you will need to add a column definition

### Adding a column definiton

A column definition inside the recruimentDashboardConfig object has the following structure

```js
columnObjectName: {
  columnName: 'A Name', // String type
  type: 'A type. See current types below', //May be a type or an array of types
  get: fn, // A function
},
```

Let's go through all of these attributes.

* columnName: The string at the top of the column in the table
* type: This specifies how your table cell is rendered. Right now we have the following types:
    * 'String': It renders a Table cell that has only text on it
    * 'Avatar': It renders an avatar in the cell
    * 'WithSubtitle': It renders two texts. A main one and a secondary one
    * 'Chip': Renders a Chip
    * 'Actions': Renders the action buttons
* get: A function whose purpose it to return an object or a string based on the type of the column.
    Right now, this function are thought to receive an object with the structure:
    ```js
    columnObjectName: {
      recruitmentProcess,
      location,
      program,
    },
    ```
    Therefore, you can destructure any of this objects inside your function and use them.

    Depending on the column type, your get function return different things. These are:
    * 'String': A string
    * 'Avatar': An object with the structure:
        ```js
        {
          picture,
          title,
          subtitle,
        },
        ```
        Where all attributes are strings
    * 'WithSubtitle': An object with the structure:
        ```js
        {
          title,
          subtitle,
        },
        ```
        Where all attributes are strings
    * 'Chip': A string, usually representing the status
    * 'Actions': Should return whatever is passed to it.

#### Example

This would be the column definition fot the last update column

```js
lastUpdate: {
    columnName: 'Last update',
    type: 'WithSubtitle',
    get: ({ recruitmentProcess }) => ({
      title: moment(Date.parse(recruitmentProcess.updatedAt)).format('YYYY/MM/DD HH:mm:ss a'),
      subtitle: `By ${recruitmentProcess.updatedBy.attributes.name}  ${
        recruitmentProcess.updatedBy.attributes.middle_name
      }`,
    }),
  },
```

It is a type WithSubtitle, meaning its a text and a subtext.
Because of it's type, the get function should return an object with title and subtitle.
We have access to the recruitment process object, so we destructure it.
We then map and give format to the things we want to show from the recruitment process

### Adding a new type

To add a new type to the dashboard, you need two things:

1. In the components folder, there is another folder named TableCell. Create a new TableCell for your new type.
2. Reexport your type in the Table Cell index
3. Import your component in the RecruitmentProcessRow
4. In the same file, create a new case in the "selectRenderer" function. This case will define how your type is called. In the select, you should return your table cell with the appropiate data
5. Follow the instructions to create a column definition and add it to your status dashboard
6. If the get function of your new type returns an object, you will need to add to the sortFunction in the useRecruitmentProcessColumns hook a compare value for your object.


## Adding actions

### Adding an existing action

1. Navigate to the useRecruitmentProcessActions
2. If your action doesn't need any fancy behaviour but just a standard function usable across statuses, in the object "recruitmentActions" add your status if its not already there and add the action to the array.
```js
const recruitmentActions = {
  myDashboardStatus: [myAction],
};
```
### Adding a new action

There is an object with the actions definition that looks like this:

```js
{
  activate: { name: 'Activate', icon: 'activeOutline', fn: activateStdFn },
  edit: { name: 'Edit', icon: 'edit', fn: editStdFn },
  inactive: { name: 'Inactivate', icon: 'inactiveOutline', fn: inactiveStdFn },
  clone: { name: 'Clone', icon: 'cloneOutline', fn: cloneStdFn },
  archive: { name: 'Archive', icon: 'archiveOutline', fn: archiveStdFn },
  link: { name: 'Testing mode', icon: 'rightArrow', fn: linkStdFn },
};
```

In this object, you define what your action will have and how it will behave. Each action definition is an object itself:

```js
{
  name // The name of your action
  icon // The icon (should be the name given by the components library)
  fn // A function that is triggered when you click the action. Notice you can call hooks inside
}
```

The action you want may already have this definition, however you may need to create or extend the function that is called by the action.

#### Action functions

Right now we have the following convention to name this function:
* actionStdFn: use if your action will behave always in the same way across the statuses
* actionStatusFn: use this to replace a standard function

It is a good practice that your function behaviour depends on the following parameters:
```js
{
  recruitmentProcess,
  location,
  program,
}
```
We always pass this parameters to every action, so you may want to destructure one of these in your function and use it.

To overwrite a function for your particular status, you can declare a custom function and then destructure in your 
recruitmentActions as follow:

```js
const recruitmentActions = {
  myDashboardStatus: [{...myAction, fn: myActionMyDashboardStatusFn],
};
```