Skip to content

Commit

Permalink
Add PositionUpdater component doc, and update columns references docs
Browse files Browse the repository at this point in the history
  • Loading branch information
jolelievre committed Feb 4, 2019
1 parent d471359 commit 04ad976
Show file tree
Hide file tree
Showing 14 changed files with 523 additions and 77 deletions.
Expand Up @@ -4,38 +4,51 @@ menuTitle: Column Types reference
weight: 10
---

## Column Types reference
# Column Types reference
{{< minver v="1.7.5" title="true" >}}

Most important Grid definition part is defining columns. PrestaShop already comes with a list of predefined columns that you can use in your own Grids.

### Supported Types
## Supported Types

#### Basic columns
### Basic columns

* [DataColumn][data-column-reference]
* [DateTimeColumn][datetime-column-reference]
* [ImageColumn][image-column-reference]
* [ToggleColumn][toggle-column-reference]
* [BadgeColumn][badge-column-reference] {{< minver v="1.7.6" >}}
* [LinkColumn][link-column-reference] {{< minver v="1.7.6" >}}

#### Common columns
### Action columns

* [ActionColumn][action-column-reference]
* [BulkActionColumn][bulk-action-column-reference]
* [DateTimeColumn][datetime-column-reference]
* [PositionColumn][position-column-reference]

#### Employee columns
### Employee columns

* [EmployeeNameWithAvatarColumn][employee-name-wit-avatar-column-reference]

#### Status columns
### Status columns

* [SeverityLevelColumn][severity-column-reference]

[data-column-reference]: {{< ref "/1.7/development/components/grid/columns-reference/data.md" >}}
[datetime-column-reference]: {{< ref "/1.7/development/components/grid/columns-reference/datetime.md" >}}
[image-column-reference]: {{< ref "/1.7/development/components/grid/columns-reference/image.md" >}}
[toggle-column-reference]: {{< ref "/1.7/development/components/grid/columns-reference/toggle.md" >}}
[badge-column-reference]: {{< ref "/1.7/development/components/grid/columns-reference/badge.md" >}}
[link-column-reference]: {{< ref "/1.7/development/components/grid/columns-reference/link.md" >}}

[action-column-reference]: {{< ref "/1.7/development/components/grid/columns-reference/action.md" >}}
[bulk-action-column-reference]: {{< ref "/1.7/development/components/grid/columns-reference/bulk-action.md" >}}
[datetime-column-reference]: {{< ref "/1.7/development/components/grid/columns-reference/datetime.md" >}}
[position-column-reference]: {{< ref "/1.7/development/components/grid/columns-reference/position.md" >}}

[employee-name-wit-avatar-column-reference]: {{< ref "/1.7/development/components/grid/columns-reference/employee-name-with-avatar.md" >}}
[severity-column-reference]: {{< ref "/1.7/development/components/grid/columns-reference/severity-level.md" >}}

## Use case exemple
## Use case example

```php
<?php
Expand Down
@@ -1,30 +1,30 @@
---
title: ActionColumn reference
menuTitle: ActionColumn
weight: 60
weight: 20
---

# ActionColumn Type
{{< minver v="1.7.5" title="true" >}}

This type of column allows to add actions to your Grid rows.
This type of column allows to add actions to your Grid rows. The action target the corresponding row.
For more info about possible actions see [Actions reference][actions-reference].

## Available options

### field

**actions:** `array|null` **default:** `null`

Record field name which will be used as bulk action checkbox value.
| Properties | Type | Expected value |
| ----------- | ----- | --------------------------------------------------------- |
| **actions** | array | **default:** `null` List of actions assigned to each row. |

## Example usage

```php
use PrestaShop\PrestaShop\Core\Grid\Column\Type\Common\ActionColumn;
use PrestaShop\PrestaShop\Core\Grid\Column\ColumnCollection;

$productColumn = new ActionColumn('actions');
$productColumn->setName('Actions');
$productColumn->setOptions([
$actionColumn = new ActionColumn('actions');
$actionColumn->setName('Actions');
$actionColumn->setOptions([
'actions' => [
->add((new LinkRowAction('delete'))
->setIcon('delete')
Expand All @@ -39,5 +39,7 @@ $productColumn->setOptions([
]);

$columns = new ColumnCollection();
$columns->add($productColumn);
$columns->add($actionColumn);
```

[actions-reference]: {{< ref "/1.7/development/components/grid/actions-reference/_index.md" >}}
@@ -0,0 +1,35 @@
---
title: BadgeColumn reference
menuTitle: BadgeColumn
weight: 10
---

# BadgeColumn Type
{{< minver v="1.7.6" title="true" >}}

This basic BadgeColumn displays a raw field data in Grid, associated with a badge.

## Available options

| Properties | Type | Expected value |
| -------------- | ------ | ---------------------------------------------------------------------------------- |
| **field** | string | **required** Record field name which column displays. |
| **badge_type** | string | **default:** `success` Indicates which field of the row contains the image source. (*Allowed values:* `success, info, danger, warning`) |

## Example usage

```php
use PrestaShop\PrestaShop\Core\Grid\Column\Type\Common\BadgeColumn;
use PrestaShop\PrestaShop\Core\Grid\Column\ColumnCollection;

$badgeColumn = new BadgeColumn('total_spent');
$badgeColumn->setName('Sales');
$badgeColumn->setOptions([
'field' => 'total_spent',
'badge_type' => 'success',
'empty_value' => '--',
]);

$columns = new ColumnCollection();
$columns->add($badgeColumn);
```
@@ -1,33 +1,32 @@
---
title: BulkActionColumn reference
menuTitle: BulkActionColumn
weight: 60
weight: 20
---

# BulkActionColumn Type
{{< minver v="1.7.5" title="true" >}}

This type of column allows to add bulk action checkboxes to your Grid.
This type of column allows to add bulk action checkboxes to your Grid. This only add the checkbox in the grid, you can then manage bulk actions via javascript.

## Available options

### field

**bulk_field:** `string` **required**

Record field name which will be used as bulk action checkbox value.
| Properties | Type | Expected value |
| -------------- | ------ | --------------------------------------------------------------------------------- |
| **bulk_field** | string | **required:** Record field name which will be used as bulk action checkbox value. |

## Example usage

```php
use PrestaShop\PrestaShop\Core\Grid\Column\Type\Common\BulkActionColumn;
use PrestaShop\PrestaShop\Core\Grid\Column\ColumnCollection;

$productColumn = new BulkActionColumn('bulk_action');
$productColumn->setName(''); // it is common set empty name for bulk action columns
$productColumn->setOptions([
$bulkActionColumn = new BulkActionColumn('bulk_action');
$bulkActionColumn->setName(''); // it is common set empty name for bulk action columns
$bulkActionColumn->setOptions([
'bulk_field' => 'id_product',
]);

$columns = new ColumnCollection();
$columns->add($productColumn);
$columns->add($bulkActionColumn);
```
@@ -1,20 +1,19 @@
---
title: DataColumn reference
menuTitle: DataColumn
weight: 60
weight: 10
---

# DataColumn Type
{{< minver v="1.7.5" title="true" >}}

The most basic column is DataColumn. It is used to display raw field data in Grid.

## Available options

### field

**type:** `string` **required**

Record field name which column displays.
| Properties | Type | Expected value |
| ---------- | ------ | ----------------------------------------------------- |
| **field** | string | **required** Record field name which column displays. |

## Example usage

Expand Down
@@ -1,41 +1,35 @@
---
title: DateTimeColumn reference
menuTitle: DateTimeColumn
weight: 70
weight: 10
---

# DateTimeColumn Type
{{< minver v="1.7.5" title="true" >}}

You can use this column type in your Grid to format datetime values.
It is common to get datetime value (e.g. Created at, Updated at & etc.) from database and format them before displaying.

## Available options

### field

**type:** `string` **required**

Field name which has datetime value.

### format

**type:** `string` **default:** `Y-m-d H:i:s`

Format to use when formatting datetime.
| Properties | Type | Expected value |
| ----------- | ------ | ------------------------------------------------------------------ |
| **field** | string | **required** Record field name which column displays. |
| **format** | string | **default:** `Y-m-d H:i:s` Format to use when formatting datetime. |

## Example usage

```php
use PrestaShop\PrestaShop\Core\Grid\Column\Type\Common\DateTimeColumn;
use PrestaShop\PrestaShop\Core\Grid\Column\ColumnCollection;

$column = new DateTimeColumn('datetime');
$column->setName('Created at');
$column->setOptions([
$dateTimeColumn = new DateTimeColumn('datetime');
$dateTimeColumn->setName('Created at');
$dateTimeColumn->setOptions([
'field' => 'date_add', // field name that has datetime value
'format' => 'Y/d/m H:i:s', // define custom format for datetime
]);

$columns = new ColumnCollection();
$columns->add($column);
$columns->add($dateTimeColumn);
```
@@ -1,10 +1,11 @@
---
title: EmployeeNameWithAvatarColumn reference
menuTitle: EmployeeNameWithAvatarColumn
weight: 70
weight: 60
---

# EmployeeNameWithAvatarColumn Type
{{< minver v="1.7.5" title="true" >}}

It is special type of column that allows you to add employee name with avatar column to your Grid.
You can see how it looks be default:
Expand All @@ -13,6 +14,10 @@ You can see how it looks be default:

## Available options

| Properties | Type | Expected value |
| ---------- | ------ | ------------------------------------ |
| **field** | string | **required** Employee's name field. |

### field

**type:** `string` **required**
Expand All @@ -25,13 +30,12 @@ Employee's name field.
use PrestaShop\PrestaShop\Core\Grid\Column\Type\Employee\EmployeeNameWithAvatarColumn;
use PrestaShop\PrestaShop\Core\Grid\Column\ColumnCollection;

$column = new EmployeeNameWithAvatarColumn('severity');
$column->setName('Severity (1-4)');
$column->setOptions([
'field' => 'severity',
'with_message' => true, // enable severity messages
$employeeColumn = new EmployeeNameWithAvatarColumn('employee');
$employeeColumn->setName('Employee');
$employeeColumn->setOptions([
'field' => 'employee',
]);

$columns = new ColumnCollection();
$columns->add($column);
$columns->add($employeeColumn);
```
@@ -0,0 +1,32 @@
---
title: ImageColumn reference
menuTitle: ImageColumn
weight: 10
---

# ImageColumn Type
{{< minver v="1.7.6" title="true" >}}

This column is used to display an image from a row. You need to specify which field of the row contains the image source.

## Available options

| Properties | Type | Expected value |
| ------------- | ------ | ----------------------------------------------------------------------- |
| **src_field** | string | **required** Indicates which field of the row contains the image source |

## Example usage

```php
use PrestaShop\PrestaShop\Core\Grid\Column\Type\Common\ImageColumn;
use PrestaShop\PrestaShop\Core\Grid\Column\ColumnCollection;

$imageColumn = new ImageColumn('flag');
$imageColumn->setName('Flag');
$imageColumn->setOptions([
'src_field' => 'flag',
]);

$columns = new ColumnCollection();
$columns->add($imageColumn);
```
@@ -0,0 +1,38 @@
---
title: LinkColumn reference
menuTitle: LinkColumn
weight: 10
---

# LinkColumn Type
{{< minver v="1.7.6" title="true" >}}

This LinkColumn displays a raw field data encapsulated in a link (very useful to add an edition link on a name for example).

## Available options

| Properties | Type | Expected value |
| -------------- | ------ | ---------------------------------------------------------------------------------- |
| **field** | string | **required** Record field name which column displays. |
| **route** | string | **required** Route used to generated link url. |
| **route_param_name** | string | **required** Parameter name used by the route to generate the url. |
| **route_param_field** | string | **required** Record field containing the route parameter. |

## Example usage

```php
use PrestaShop\PrestaShop\Core\Grid\Column\Type\Common\LinkColumn;
use PrestaShop\PrestaShop\Core\Grid\Column\ColumnCollection;

$linkColumn = new LinkColumn('total_spent');
$linkColumn->setName('Sales');
$linkColumn->setOptions([
'field' => 'name',
'route' => 'admin_category_edit',
'route_param_name' => 'categoryId',
'route_param_field' => 'id_category',
]);

$columns = new ColumnCollection();
$columns->add($linkColumn);
```

0 comments on commit 04ad976

Please sign in to comment.