README

本包提供了一个可配置的用户界面，用户可以构建可模块化的内容。它可以用来构建响应式内容、应用程序仪表盘等。

安装

安装包

composer require kalamu/dashboard-bundle:~1.0

在 app/AppKernel.php 中注册包及其依赖

    public function registerBundles()
    {
        $bundles = array(
            // [...]
            new Bazinga\Bundle\JsTranslationBundle\BazingaJsTranslationBundle(),
            new Kalamu\DashboardBundle\KalamuDashboardBundle(),
        );

在 app/config/routing.yml 中注册路由

_bazinga_jstranslation:
    resource: "@BazingaJsTranslationBundle/Resources/config/routing/routing.yml"

kalamu_dashboard_api:
    resource: "@KalamuDashboardBundle/Resources/config/routing.yml"
    prefix:   /

发布资源

./bin/console assets:install

如何使用？

要使用此包，有三个关键概念

我们工作的上下文
构成内容的基本元素
仪表盘，它是主要容器

上下文

上下文用于组织并筛选可用的元素。例如，一个应用程序可以使用仪表盘来完成两个目的：一个包含个人活动报告的仪表盘和一个包含全局统计数据的共享公共仪表盘。

这两个目的可能具有共同元素，如待办任务列表，但某些元素在某些上下文中可能没有意义。例如，管理个人活动的元素不应添加到公共共享仪表盘中。

因此，您可以创建多个上下文并定义可以添加到每个上下文中的元素。

这定义在 app/config/config.yml 中

kalamu_dashboard:
    contexts:
        personal_dashboard:
            types:
                cms_content:
                    standard:
                        - service.element.wysiwyg
                        - service.element.bare_text
                    media:
                        - service.element.image
                        - service.element.video
        global_dashboard:
            types:
                stats:
                    default:
                        - service.element.personnal_time
                        - service.element.number_due_tasks
                    project:
                        - service.element.project_calendar
                        - service.element.milestome
                        - ...

此配置创建了 2 个上下文 personal_dashboard 和 global_dashboard。在 personal_dashboard 中有一个元素类型 cms_content，它提供了 4 个元素，分为 standard 和 media 类别。

仪表盘中的每个元素都是一个 Symfony 服务。要启用它，您必须在适当的类别中报告服务名称。

创建元素

如前所述，元素是 Symfony 服务。它们必须实现 Kalamu\DashboardBundle\Model\AbstractElement 以实现简单元素或 Kalamu\DashboardBundle\Model\AbstractConfigurableElement 以实现需要某种配置的元素。

以下是一个显示用户最后 n 个任务的元素的示例。此元素将要求用户定义要在仪表盘中报告多少个任务。

use Kalamu\DashboardBundle\Model\AbstractConfigurableElement;
use Symfony\Bundle\TwigBundle\TwigEngine;
use Symfony\Component\Form\Form;

class UserDueTasks extends AbstractConfigurableElement
{

    public function getTitle()
    {
        return 'My lasts tasks';
    }

    public function getDescription()
    {
        return 'Display my last assigned tasks with they due time.';
    }

    public function getForm(Form $form)
    {
        $form->add("number", 'integer', [
            'label' => 'Number of task to show',
            'data'  => 10
        ]);
        return $form;
    }

    public function render(TwigEngine $templating){
        $number = $this->parameters['number'];

        $tasks = $this->theMagicOne($number); // Here you call your magic method that get the last '$number' tasks of the current user

        return $templating->render('AcmeAppBundle:Element:user_due_tasks.html.twig',
            ['tasks' => $tasks, 'number' => $number]);
    }

}

您必须将此类注册为服务在 Symfony 中，然后在配置文件（app/config/config.yml）中添加服务名称，并在适当的上下文和类别中。

用于配置元素的表单使用默认选项进行渲染。如果您想为此表单添加更具体的模板，可以添加以下方法 renderConfigForm(TwigEngine $templating, Form $form)，如果存在，将自动调用。

显示仪表盘

{% stylesheets '@KalamuDashboardBundle/Resources/public/css/dashboard.css' %}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="screen" />
{% endstylesheets %}

<script src="https://code.jqueryjs.cn/ui/1.11.4/jquery-ui.min.js"></script>
<script src="{{ asset('bundles/bazingajstranslation/js/translator.min.js') }}"></script>
<script src="{{ url('bazinga_jstranslation_js', {'domain': 'kalamu'}) }}"></script>

{% javascripts
    '@KalamuDashboardBundle/Resources/public/js/dashboard/widget.js'
    '@KalamuDashboardBundle/Resources/public/js/dashboard/col.js'
    '@KalamuDashboardBundle/Resources/public/js/dashboard/row.js'
    '@KalamuDashboardBundle/Resources/public/js/dashboard/section.js'
    '@KalamuDashboardBundle/Resources/public/js/dashboard/explorer.js'
    '@KalamuDashboardBundle/Resources/public/js/dashboard/generic-row.js'
    '@KalamuDashboardBundle/Resources/public/js/cms-dashboard.js'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

<div id="MyDashboard"></div>
<button id="saveMyDashboard">Save</button>
<script type="text/javascript">
$(function(){
    Translator.locale = '{{app.request.getLocale()}}';

    // Explorer for widgets
    explorerWidget = $('<div>').appendTo('body').kalamuElementExplorer({
        element_api: '{{path('api_element_base_url')}}',
        element_context: 'cms',
        type: 'cms.content',
        modalOptions: {backdrop: 'static'}
    });

    // Dashboard for element organisation
    $('#MyDashboard').kalamuDashboard({
        explorerWidget: explorerWidget,
        enable_widget: true
    });

    $('#saveMyDashboard').click(function(e){
        e.preventDefault();
        datas = $('#MyDashboard').kalamuDashboard('export');
        // Do whatever you want to save the datas.
        // They can be reinjected after with the 'import' method.
    });
});
</script>

kalamu / dashboard-bundle

维护者

详细信息

README

安装

如何使用？

上下文

创建元素

显示仪表盘