Specs: Symfony 3.3.2
, sonata-project/admin-bundle: ^3.18
, sonata-project/doctrine-orm-admin-bundle: ^3.1
I have implemented a custom Dashboard block by following this answer. It is working ok, but now the Sonata Admin's Side Menu is not working.
(source: ibin.co)
The menu is displayed but it does not activate link on clicking.
config.yml
sonata_block:
blocks:
sonata.block.service.tasks: ~
sonata_admin:
dashboard:
blocks:
- { position: top, type: sonata.block.service.tasks, class: col-md-12}
services.yml
sonata.block.service.tasks:
class: AppBundle\Block\Service\TaskService
tags:
- { name: sonata.block }
arguments:
- 'sonata.block.service.task'
- '@templating.engine.twig'
- '@doctrine.orm.entity_manager'
calls:
- [ setContainer, [ '@service_container' ] ]
My Task Service
<?php
namespace AppBundle\Block\Service;
use Doctrine\ORM\EntityManager;
use Sonata\AdminBundle\Form\FormMapper;
use Sonata\BlockBundle\Block\BlockContextInterface;
use Sonata\BlockBundle\Block\Service\AbstractAdminBlockService;
use Sonata\BlockBundle\Model\BlockInterface;
use Sonata\CoreBundle\Validator\ErrorElement;
use Symfony\Bundle\FrameworkBundle\Templating\EngineInterface;
use Symfony\Component\DependencyInjection\ContainerInterface;
use Symfony\Component\HttpFoundation\Response;
class TaskService extends AbstractAdminBlockService
{
private $em;
/** @var \Symfony\Component\DependencyInjection\ContainerInterface */
private $container;
/**
* {@inheritdoc}
*/
public function __construct($name, EngineInterface $templating, EntityManager $entityManager)
{
parent::__construct($name, $templating);
$this->em = $entityManager;
}
public function setContainer(ContainerInterface $container)
{
$this->container = $container;
}
/**
* {@inheritdoc}
*/
public function execute(BlockContextInterface $blockContext, Response $response = null)
{
$settings = array_merge($this->getDefaultSettings(), $blockContext->getSettings());
$admin_pool = $this->container->get('sonata.admin.pool');
$completed = $this->em->getRepository('AppBundle:Task')->findBy(array('status' => 0), array(), 10);
$open = $this->em->getRepository('AppBundle:Task')->findBy(array('status' => 1), array(), 10);
$inProgress = $this->em->getRepository('AppBundle:Task')->findBy(array('status' => 2), array(), 10);
return $this->renderResponse(':Block:tasks.html.twig', array(
'admin_pool' => $admin_pool,
'block' => $blockContext,
'settings' => $settings,
'completed' => $completed,
'open' => $open,
'inProgress' => $inProgress,
), $response);
}
/**
* {@inheritdoc}
*/
public function validateBlock(ErrorElement $errorElement, BlockInterface $block)
{
}
/**
* {@inheritdoc}
*/
public function buildEditForm(FormMapper $formMapper, BlockInterface $block)
{
$formMapper->add('settings', 'sonata_type_immutable_array', array(
'keys' => array(
array(
'content',
'textarea',
array(),
),
),
));
}
/**
* {@inheritdoc}
*/
public function getName()
{
return 'Dashboard Tasks';
}
/**
* {@inheritdoc}
*/
public function getDefaultSettings()
{
return array(
'content' => 'Insert your custom content here',
);
}
}
Twig template
{% block block %}
<style>
body {
padding: 10px;
}
#exTab3 .nav-pills > li > a {
border-radius: 4px 4px 0 0;
}
#exTab3 .tab-content {
color: black;
padding: 5px 15px;
}
.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
color: #000000;
}
.nav-pills > li.active.completed > a, .nav-pills > li.active.completed > a:focus, .nav-pills > li.active.completed > a:hover {
border-top: 3px solid rgba(0,255,0,0.2);
background: rgba(0,255,0,0.2);
}
.nav-pills > li.active.open_tab > a, .nav-pills > li.active.open_tab > a:focus, .nav-pills > li.active.open_tab > a:hover {
border-top: 3px solid rgba(255,255,0,0.2);
background: rgba(255,255,0,0.2);
}
.nav-pills > li.active.in_progress > a, .nav-pills > li.active.in_progress > a:focus, .nav-pills > li.active.in_progress > a:hover {
border-top: 3px solid rgba(51, 51, 255, 0.2);
background: rgba(51, 51, 255, 0.2);
}
.tab-content.completed_content {
/*border-top: 3px solid rgba(0, 231, 101, 0.35);*/
background-color: rgba(0,255,0,0.2);
}
.tab-content.open_content {
/*border-top: 3px solid rgba(251, 240, 105, 0.45);*/
background-color: rgba(255,255,0,0.2);
}
.tab-content.in_progress_content {
/*border-top: 3px solid rgba(60, 141, 188, 0.36);*/
background-color: rgba(51, 51, 255, 0.2);
}
.completed {
/*border-top: 3px solid rgba(0, 231, 101, 0.35);*/
background: rgba(0,255,0,0.2);
}
.open_tab {
/*border-top: 3px solid rgba(251, 240, 105, 0.45);*/
background: rgba(255,255,0,0.2);
}
.in_progress {
/*border-top: 3px solid rgba(60, 141, 188, 0.36);*/
background: rgba(51, 51, 255, 0.2);
}
</style>
<div><h2>Tasks</h2></div>
<div id="exTab3">
<ul class="nav nav-pills">
<li class="active completed"><a href="#1b" data-toggle="tab">Completed</a></li>
<li class="open_tab"><a href="#2b" data-toggle="tab">Open</a></li>
<li class="in_progress"><a href="#3b" data-toggle="tab">In Progress</a></li>
</ul>
<div class="tab-content clearfix completed_content">
<div class="tab-pane active" id="1b">
<table class="table table-hover">
<thead>
<tr>
<th>Task ID</th>
<th>Subject</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{% for task in completed %}
<tr>
<td>{{ task.id }}</td>
<td>{{ task.subject }}</td>
<td>{% if task.status == 0 %}
Completed
{% elseif task.status == 1 %}
Open
{% elseif task.status == 2 %}
In Progress
{% endif %}
</td>
</tr>
{% else %}
No record found
{% endfor %}
</tbody>
</table>
</div>
<div class="tab-pane" id="2b">
<table class="table table-hover">
<thead>
<tr>
<th>Task ID</th>
<th>Subject</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{% for task in open %}
<tr>
<td>{{ task.id }}</td>
<td>{{ task.subject }}</td>
<td>{% if task.status == 0 %}
Completed
{% elseif task.status == 1 %}
Open
{% elseif task.status == 2 %}
In Progress
{% endif %}
</td>
</tr>
{% else %}
No record found
{% endfor %}
</tbody>
</table>
</div>
<div class="tab-pane" id="3b">
<table class="table table-hover">
<thead>
<tr>
<th>Task ID</th>
<th>Subject</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{% for task in inProgress %}
<tr>
<td>{{ task.id }}</td>
<td>{{ task.subject }}</td>
<td>{% if task.status == 0 %}
Completed
{% elseif task.status == 1 %}
Open
{% elseif task.status == 2 %}
In Progress
{% endif %}
</td>
</tr>
{% else %}
No record found
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{#{{ sonata_block_render_event('sonata.admin.dashboard.bottom', { 'admin_pool': sonata_admin.adminPool }) }}#}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(document).ready(function (e) {
$(".completed").click(function (e) {
$(".tab-content").addClass('completed_content');
$(".tab-content").removeClass('open_content');
$(".tab-content").removeClass('in_progress_content');
});
$(".open_tab").click(function (e) {
$(".tab-content").removeClass('completed_content');
$(".tab-content").addClass('open_content');
$(".tab-content").removeClass('in_progress_content');
});
$(".in_progress").click(function (e) {
$(".tab-content").removeClass('completed_content');
$(".tab-content").removeClass('open_content');
$(".tab-content").addClass('in_progress_content');
});
});
</script>
{% endblock %}
In you twig
file you are overriding Sonata's internal jQuery file. Remove these two lines and the code will be corrected:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>