Skip to content

Commit

Permalink
added panel docs
Browse files Browse the repository at this point in the history
  • Loading branch information
cornernote committed Jul 6, 2015
1 parent 219ca99 commit 38b5b79
Show file tree
Hide file tree
Showing 5 changed files with 218 additions and 49 deletions.
20 changes: 9 additions & 11 deletions docs/layouts.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
# Layouts

A layout defines a set of Regions in which Panels can be placed. In addition it allows the user to enter custom
options into the dashboard form when updating the dashboard.
A layout defines a set of Regions in which Panels can be placed. In addition it allows the user to enter custom options into the dashboard form when updating the dashboard.


## Layout Class

The layout class allows you to define regions where panels can be rendered.

It also extends `yii\base\Model`, allowing you to define custom settings which will be available for the user to
configure the layout via a form when creating new dashboards.
It extends `yii\base\Model`, allowing you to define custom settings which will be available for the user to
configure the layout via a form when updating the dashboard.

Place the following code into `app/dashboard/layouts/ExampleLayout.php`:

Expand All @@ -20,7 +19,7 @@ namespace app\dashboard\layouts;
class ExampleLayout extends \cornernote\dashboard\Layout
{

public $viewPath = '@app/dashboard/views/layouts/example';
public $viewPath = '@app/views/dashboard/layouts/example';

public $customSetting;

Expand Down Expand Up @@ -95,7 +94,7 @@ class ExampleLayout extends \cornernote\dashboard\Layout

The layout view will render the dashboard and all of it's panels in "view" mode.

Place the following code into `app/dashboard/views/layouts/example/view.php``:
Place the following code into `app/views/dashboard/layouts/example/view.php``:

```php
<?php
Expand All @@ -121,10 +120,9 @@ echo '</div>';

## Layout Update

The layout update will render the dashboard and all of it's panels in "update" mode. This allows the user to
drag-and-drop panels between the regions.
The layout update will render the dashboard and all of it's panels in "update" mode. This allows the user to drag-and-drop panels between the regions.

Place the following code into `app/dashboard/views/layouts/example/view.php`:
Place the following code into `app/views/dashboard/layouts/example/view.php`:

```php
<?php
Expand Down Expand Up @@ -181,7 +179,7 @@ echo '</div>';

The layout form will render form elements for the custom options available to your layout.

Place the following code into `app/dashboard/views/layouts/example/form.php`:
Place the following code into `app/views/dashboard/layouts/example/form.php`:

```php
<?php
Expand All @@ -205,7 +203,7 @@ $config = [
'modules' => [
'dashboard' => [
'layouts' => [
'example' => 'app\dashboard\layouts\Example',
'example' => 'app\dashboard\layouts\ExampleLayout',
],
],
],
Expand Down
171 changes: 171 additions & 0 deletions docs/panels.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,173 @@
# Panels

A panel defines a block that will be rendered inside a layout region. In addition it allows the user to enter custom options into the panel form when updating the panel.


## Panel Class

The panel class allows you to define the block code that will be rendered inside a layout region.

It extends `yii\base\Model`, allowing you to define custom settings which will be available for the user to
configure the panel via a form when updating the panel.

Place the following code into `app/dashboard/panels/ExamplePanel.php`:

```php
<?php
namespace app\dashboard\panels;

class ExamplePanel extends \cornernote\dashboard\Panel
{

public $customSetting;

public $viewPath = '@app/views/dashboard/panels/example';

public function rules()
{
return [
[['customSetting'], 'required'],
];
}

public function getOptions()
{
return [
'customSetting' => $this->customSetting,
];
}

public function renderView()
{
return Yii::$app->view->render($this->viewPath . '/view', [
'panel' => $this,
]);
}

public function renderUpdate()
{
return Yii::$app->view->render($this->viewPath . '/update', [
'panel' => $this,
]);
}

public function renderForm($form)
{
return Yii::$app->view->render($this->viewPath . '/form', [
'panel' => $this,
'form' => $form,
]);
}

}
```


## Panel View

The layout view will render the panel in "view" mode.

Place the following code into `app/views/dashboard/panels/example/view.php`:

```php
<?php
/**
* @var $panel \app\dashboard\panels\ExamplePanel
* @var $this \yii\web\View
*/
?>

<h3>
<?= $panel->dashboardPanel->name ?>
<?= \yii\helpers\Html::a(
'<span class="glyphicon glyphicon-pencil small"></span>',
['dashboard-panel/update', 'id' => $panel->dashboardPanel->id],
[
'data-toggle' => 'tooltip',
'title' => 'Update Dashboard Panel',
]
) ?>
<?= \yii\helpers\Html::a(
'<span class="glyphicon glyphicon-trash small"></span>',
['dashboard-panel/delete', 'id' => $panel->dashboardPanel->id],
[
'data-confirm' => 'Are you sure to delete this dashboard panel?',
'data-method' => 'post',
'data-toggle' => 'tooltip',
'title' => 'Delete Dashboard Panel',
]
) ?>
</h3>
<div class="well">
<?= \Yii::$app->formatter->asNtext($panel->text); ?>
</div>
```


## Panel Update

The panel update will render the panel in "update" mode. This provides a simplified panel when the user is moving the panel between regions.

Place the following code into `app/views/dashboard/panels/example/update.php`:

```php
<?php
/**
* @var $panel \app\dashboard\panels\ExamplePanel
* @var $this \yii\web\View
*/
?>

<h3>
<?= $panel->dashboardPanel->name ?>
<?= \yii\helpers\Html::a('<span class="glyphicon glyphicon-pencil small"></span>', ['dashboard-panel/update', 'id' => $panel->dashboardPanel->id], [
'data-toggle' => 'tooltip',
'title' => Yii::t('dashboard', 'Update Dashboard Panel'),
]) ?>
<?= \yii\helpers\Html::a('<span class="glyphicon glyphicon-trash small"></span>', ['dashboard-panel/delete', 'id' => $panel->dashboardPanel->id], [
'data-confirm' => Yii::t('dashboard', 'Are you sure to delete this dashboard panel?'),
'data-method' => 'post',
'data-toggle' => 'tooltip',
'title' => Yii::t('dashboard', 'Delete Dashboard Panel'),
]) ?>
</h3>
<div class="well">
<?php \yii\helpers\VarDumper::dump($panel->dashboardPanel->options); ?>
</div>
```


## Panel Form

The panel form will render form elements for the custom options available to your panel.

Place the following code into `app/views/dashboard/panels/example/form.php`:

```php
<?php
/**
* @var $panel \app\dashboard\panels\ExamplePanel
* @var $this \yii\web\View
* @var $form \yii\bootstrap\ActiveForm
*/
?>

<?= $form->field($panel, 'customSetting')->textInput() ?>
```


## Configuration

Finally you will need to add your panel to the module configuration:

```php
$config = [
'modules' => [
'dashboard' => [
'panels' => [
'example' => 'app\dashboard\panels\ExamplePanel',
],
],
],
];
```
36 changes: 18 additions & 18 deletions src/Layout.php
Original file line number Diff line number Diff line change
Expand Up @@ -47,51 +47,51 @@ public function afterValidate()
/**
* @return string
*/
public function renderView()
public function getOptions()
{
return '';
return [];
}

/**
* @return string
* @return array
*/
public function renderUpdate()
public function getRegionOpts()
{
return '';
return [];
}

/**
* @param ActiveForm $form
* @return string
* @param DashboardPanel[] $dashboardPanels
* @return array
*/
public function renderForm($form)
public function regionPanels($dashboardPanels)
{
return '';
return [];
}

/**
* @return string
*/
public function getOptions()
public function renderView()
{
return [];
return '';
}

/**
* @return array
* @return string
*/
public function getRegionOpts()
public function renderUpdate()
{
return [];
return '';
}

/**
* @param DashboardPanel[] $dashboardPanels
* @return array
* @param ActiveForm $form
* @return string
*/
public function regionPanels($dashboardPanels)
public function renderForm($form)
{
return [];
return '';
}

}
14 changes: 7 additions & 7 deletions src/Panel.php
Original file line number Diff line number Diff line change
Expand Up @@ -46,34 +46,34 @@ public function afterValidate()
/**
* @return string
*/
public function renderView()
public function getOptions()
{
return '';
return [];
}

/**
* @return string
*/
public function renderUpdate()
public function renderView()
{
return '';
}

/**
* @param ActiveForm $form
* @return string
*/
public function renderForm($form)
public function renderUpdate()
{
return '';
}

/**
* @param ActiveForm $form
* @return string
*/
public function getOptions()
public function renderForm($form)
{
return [];
return '';
}

}
Loading

0 comments on commit 38b5b79

Please sign in to comment.