i have a problem with the assetic:dump command. Here is main main admin twig template: Basically all resources which are needed in the admin are stored in the CoreBundle:
Twig admin_base:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% block title -%}<title>Admin</title>{% endblock %}
{% block stylesheets %}
{% stylesheets
'#CoreBundle/Resources/public/css/bootstrap-theme.min.css'
'#CoreBundle/Resources/public/css/bootstrap.min.css'
'#CoreBundle/Resources/public/css/buttons.bootstrap.min.css'
'#CoreBundle/Resources/public/css/datatables.min.css'
'#CoreBundle/Resources/public/css/fine-uploader.min.css'
'#CoreBundle/Resources/public/css/font-awesome.min.css'
'#CoreBundle/Resources/public/css/jquery-ui.min.css'
'#CoreBundle/Resources/public/css/jquery-ui.structure.min.css'
'#CoreBundle/Resources/public/css/jquery-ui.theme.min.css'
'#CoreBundle/Resources/public/css/main.css'
'#CoreBundle/Resources/public/css/rowReorder.dataTables.min.css'
'#CoreBundle/Resources/public/css/signin.css'
%}
<link href="{{ asset(asset_url) }}" rel="stylesheet">
{% endstylesheets %}
{% endblock %}
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
{% block menu -%} {% endblock %}
{% block body -%} {% endblock %}
{% block javascripts -%}
{% javascripts
'#CoreBundle/Resources/public/js/jquery-1.11.3.min.js'
'#CoreBundle/Resources/public/js/bootstrap.min.js'
'#CoreBundle/Resources/public/js/fine-uploader.min.js'
'#CoreBundle/Resources/public/js/jquery-ui.min.js'
'#CoreBundle/Resources/public/js/datatables.min.js'
'#CoreBundle/Resources/public/js/Buttons-1.1.0/js/dataTables.buttons.min.js'
'#CoreBundle/Resources/public/js/Buttons-1.1.0/js/buttons.html5.js'
'#CoreBundle/Resources/public/js/Buttons-1.1.0/js/buttons.bootstrap.min.js'
'#CoreBundle/Resources/public/js/JSZip-2.5.0/jszip.min.js'
'#CoreBundle/Resources/public/js/RowReorder-1.1.0/js/dataTables.rowReorder.min.js'
%}
<script src="{{ asset(asset_url) }}" type="text/javascript"></script>
{% endjavascripts %}
{% endblock %}
{% block readyjs -%}
{{ tinymce_init() }}
<script type="text/javascript" >
function post_order ( ord, url)
{
$.ajax({
method: "POST",
url: url,
data: { elem: ord }
})
.done(function( msg ) {
// alert( msg );
});
}
$(document).ready(function () {
var optionsDatatables = {
dom: 'Bfrtip',
buttons: [
'copyHtml5', 'excelHtml5', 'csvHtml5'
]
}
if($('#dattab').hasClass('allow-order'))
{
//if we want more properties
// optionsDatatables.rowReorder = {
//selector: 'tr',
// update: true,
// dataSrc: '.ord-id'
// }
optionsDatatables.rowReorder = true;
}
var table = $('#dattab').DataTable(optionsDatatables);
var order;
if($('#dattab').hasClass('allow-order')) {
$('#dattab').on('draw.dt', function () {
var rows = table.rows().data();
var ord = new Array();
for (var i = 0, ien = rows.length; i < ien; i++) {
ord[i] = rows[i].DT_RowId;
}
order = ord;
$('#save_sort').fadeIn();
});
}
$('#save_sort').click(function(){
post_order(order,$('#dattab').data('url'));
$(this).fadeOut();
});
$('.datec').datepicker();
});
</script>
{% endblock %}
</body>
</html>
I install the assets and then try to dump them.
I have looked in the cache so it is trying to locate it in the same bundle but with no css folder:
<?php
// CoreBundle:Components:edit_delete.html.twig
return array (
'53dc317' =>
array (
0 =>
array (
0 => '#CoreBundle/Resources/public/css/bootstrap-theme.min.css',
1 => '#CoreBundle/Resources/public/css/bootstrap.min.css',
2 => '#CoreBundle/Resources/public/css/buttons.bootstrap.min.css',
3 => '#CoreBundle/Resources/public/css/datatables.min.css',
4 => '#CoreBundle/Resources/public/css/fine-uploader.min.css',
5 => '#CoreBundle/Resources/public/css/font-awesome.min.css',
6 => '#CoreBundle/Resources/public/css/jquery-ui.min.css',
7 => '#CoreBundle/Resources/public/css/jquery-ui.structure.min.css',
8 => '#CoreBundle/Resources/public/css/jquery-ui.theme.min.css',
9 => '#CoreBundle/Resources/public/css/main.css',
10 => '#CoreBundle/Resources/public/css/rowReorder.dataTables.min.css',
11 => '#CoreBundle/Resources/public/css/signin.css',
),
1 =>
array (
),
2 =>
array (
'output' => '_controller/css/53dc317.css',
'name' => '53dc317',
'debug' => NULL,
'combine' => NULL,
'vars' =>
array (
),
),
),
'c985255' =>
array (
0 =>
array (
0 => '#CoreBundle/Resources/public/js/jquery-1.11.3.min.js',
1 => '#CoreBundle/Resources/public/js/bootstrap.min.js',
2 => '#CoreBundle/Resources/public/js/fine-uploader.min.js',
3 => '#CoreBundle/Resources/public/js/jquery-ui.min.js',
4 => '#CoreBundle/Resources/public/js/datatables.min.js',
5 => '#CoreBundle/Resources/public/js/Buttons-1.1.0/js/dataTables.buttons.min.js',
6 => '#CoreBundle/Resources/public/js/Buttons-1.1.0/js/buttons.html5.js',
7 => '#CoreBundle/Resources/public/js/Buttons-1.1.0/js/buttons.bootstrap.min.js',
8 => '#CoreBundle/Resources/public/js/JSZip-2.5.0/jszip.min.js',
9 => '#CoreBundle/Resources/public/js/RowReorder-1.1.0/js/dataTables.rowReorder.min.js',
),
1 =>
array (
),
2 =>
array (
'output' => '_controller/js/c985255.js',
'name' => 'c985255',
'debug' => NULL,
'combine' => NULL,
'vars' =>
array (
),
),
),
'103aba8' =>
array (
0 =>
array (
0 => 'bundles/core/css/bootstrap.min.css',
1 => 'bundles/core/bootstrap-theme.min.css',
2 => 'bundles/core/datatables.min.css',
3 => 'bundles/core/fine-uploader.min.css',
4 => 'bundles/core/font-awesome.min.css',
5 => 'bundles/core/jquery-ui.css',
6 => 'bundles/core/jquery-ui.structure.min.css',
7 => 'bundles/core/jquery-ui.theme.min.css',
8 => 'bundles/core/main.css',
9 => 'bundles/core/rowReorder.dataTables.min.css',
10 => 'bundles/core/signin.css',
),
1 =>
array (
),
2 =>
array (
'output' => '_controller/css/103aba8.css',
'name' => '103aba8',
'debug' => NULL,
'combine' => NULL,
'vars' =>
array (
),
),
),
);
So it has it also in multiple files in the cache. I cannot understand what is going on..
You have another Twig template that has {% stylesheets ... %} block. And in this block you have exactly this string: bundles/core/bootstrap-theme.min.css.
Try to find it with your IDE and repair it.
Related
I'm using the kevinPast adminLte bundle on symfony 5. Every datetype got their own format(dd-MM-YYYY) and you can't update it as a normal way by writing 'format' => 'yyyy-MM-dd' inside the form for example. The problem occurs also for other datetype, like birthday.
I also try to use my own datepicker function to override the existing one, but it's a bundle, so it first not work, then it broke also the existing js.
You can see the different try i did:
->add('startTime', DateTimeType::class, [
'required' => true,
'error_bubbling' => false,
'date_widget' => 'single_text',
// #todo Can we make this format configurable?
'date_format' => 'yyyy-MM-dd', // must match data-date-format as defined in field.html.twig
'minutes' => range(0, 55, 5)
])
it will show the data like that
it use the block date_widget on twig, the single_text area
{% block date_widget %}
{% if widget == 'single_text' %}
<div class="input-group">
<div class="input-group-addon">
<i class="far fa-calendar-alt"></i>
</div>
{% if type is not defined or type != 'date' %}
{% if attr.class is defined %}
{% set class = attr.class ~ ' timepicker' %}
{% else %}
{% set class = ' timepicker' %}
{% endif %}
{% set attr = attr|merge({'class' : class, 'data-datepickerenable':'on'}) %}
{% endif %}
{{ block('form_widget_simple') }}
</div>
{% else %}
{% set date_pattern = '<div class="row">' ~ date_pattern ~ '</div>'|raw %}
{{ date_pattern|replace({
'{{ year }}' : '<div class="col-xs-4">{{ year }}</div>',
'{{ month }}' : '<div class="col-xs-4">{{ month }}</div>',
'{{ day }}' : '<div class="col-xs-4">{{ day }}</div>',
})|raw|replace({
'{{ year }}': form_widget(form.year),
'{{ month }}': form_widget(form.month),
'{{ day }}': form_widget(form.day),
})|raw }}
{% endif %}
{% endblock %}
I also try to override it by using the following code:
Js part:
$(document).ready(function() {
$('.datepicker').datepicker({
format: "DD/MM/YYYY h:mm"
});
});
form part
->add('startTime', DateTimeType::class, [
'required' => true,
'error_bubbling' => false,
'date_widget' => 'single_text',
//<input type="text" class="form-control" data-inputmask-alias="datetime" data-inputmask-inputformat="dd/mm/yyyy" data-mask="" im-insert="false">
// #todo Can we make this format configurable?
'date_format' => 'yyyy-MM-dd', // must match data-date-format as defined in field.html.twig
'minutes' => range(0, 55, 5),
'attr' => ['class' => 'datepicker'],
])
This one overide the actual datepicker, but first doesn't fix the problem(you still have the standard format DD-MM-YYY) then it also broke the js used by the bundle(some navigation button doesn't work etc)
If I found a fix, i will also write the answer here.
So after few work on it and if someone got the same problem, I found one solution, maybe not the best but it's work.
I checked the demo used with adminLte bundle on symfony (Kimai2)
So to be able to edit your calendar and format your date, you need to follow these step:
1 : create a dateTimePickerType and use it instead of default DatetimeType
<?php
namespace App\Form\Type;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\DateTimeType;
use Symfony\Component\Form\FormInterface;
use Symfony\Component\Form\FormView;
use Symfony\Component\OptionsResolver\OptionsResolver;
class DateTimePickerType extends AbstractType
{
public function buildView(FormView $view, FormInterface $form, array $options)
{
$view->vars['attr'] = array_merge($view->vars['attr'], [
'data-datetimepicker' => 'on',
'autocomplete' => 'off',
'placeholder' => strtoupper($options['format']),
'data-format' => $options['format_picker'],
'data-time-picker-increment' => $options['time_increment'],
]);
}
public function configureOptions(OptionsResolver $resolver)
{
$resolver->setDefaults([
'label' => '',
'widget' => 'single_text',
'html5' => false,
'format' => 'YYYY-MM-DD',
'format_picker' => 'YYYY-MM-DD',
'with_seconds' => false,
'time_increment' => 1,
]);
}
/**
* {#inheritdoc}
*/
public function getParent()
{
return DateTimeType::class;
}
}
and on the formType
->add('startTime', DateTimePickerType::class, [
'required' => true,
'error_bubbling' => false,
'label' => 'startTime',
'format' => "yyyy-MM-dd'T'HH:mm:ss",
'attr' => ['class' => 'js-datepicker-hours'],
])
Then the javascript part, you need to install daterangerpicker from www.daterangepicker.com
and use these following function:
const $ = require('jquery');
global.$ = global.jQuery = $;
const Moment = require('moment');
global.moment = Moment;
require('moment/locale/en-gb');
require('daterangepicker');
$(document).ready(function() {
$('.js-datepicker').daterangepicker({
language: "en",
singleDatePicker: true,
showDropdowns: true,
minYear: 1901,
//maxYear: parseInt(moment().format('YYYY'),10)
});
$('.js-datepicker-hours').daterangepicker({
language: "en",
timePicker: true,
singleDatePicker: true,
showDropdowns: true,
locale: {
format: 'yyyy-MM-DD HH:mm:ss'
}
//maxYear: parseInt(moment().format('YYYY'),10)
});
I have code (below) which adds 12 post/page: 6 with a partial template that makes those 6 bigger; and 6 that get a template making those smaller - this works fine, until one of the posts is a sticky, then the sticky correctly goes to the top of the list, but there are now 7 of the smaller posts.
PHP file:
<?php
/**
* Template Name: Blog Landing Page
* Template Post Type: page
*/
global $paged;
if (!isset($paged) || !$paged){
$paged = 1;
}
$context = Timber::context();
$timber_post = new Timber\Post();
$context['post'] = $timber_post;
$newsArgs = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 6,
'paged' => $paged,
'orderby' => array(
'date' => 'DESC'
));
$context['news'] = new Timber\PostQuery($newsArgs);
Timber::render( 'layouts/layout-blog.twig', $context );
And Twig:
{% for post in news|slice(0,6) %}
{% include "partial/teaser-article.twig" %}
{% endfor %}
{% for post in news|slice(6,12) %}
{% include "partial/teaser-article-small.twig" %}
{% endfor %}
{% include 'partial/pagination.twig' with { pagination: news.pagination({show_all: false, mid_size: 1, end_size: 1}) } %}
Any suggestions greatly appreciated!
Twig's slice takes two parameters - start and length:
https://twig.symfony.com/doc/3.x/filters/slice.html
Therefore, instead of slice(6,12) you probably want slice(6,6)
In my project (symfony/flex 1.1) i had a method "displayMenuAndSubMenu([...])" (as a service) to build menu and submenus on a multidimensionnal array.
NB: Some menus may not have submenus
My problem is that when I want to render my menu board in a html.twig template,I can not reproduce the incremental variables $i and $a. Indeed, with my actually twig code I get a simple string output :-(
I have read somewhere that a custom twig extension will allow me to work around this difficulty.
But I find it very complicated to implement a simple counter.
So my questions are:
Is there a simpler way to do this in a html.twig template ?
Do I have to go through in a php.twig template (so disgustin in my sense) ?
Am I doomed to define a twig extension ? (And if so, do you have an example ?)
Thanks
ContentService::displayMenuAndSubmenu
public function displayMenuAndSubMenu(CategoryService $categoryService, CategoryTypeService $categoryTypeService)
{
$categoryId = $categoryService->getCategoryId('Primary');
$categoryTypeId = $categoryTypeService->getCategoryTypeId('Menu');
// Getting primary menus
$primaryMenu = $this->em->getRepository('App\Entity\Content')->findByCategoryTypeAndCategory($categoryTypeId, $categoryId);
// Constructing MainMenu with menus and submenus
$i = 0;
$menu = [];
$submenu = [];
$mainMenu = [];
foreach ($primaryMenu as $keyMenu => $menuItem) {
$menu[$i] = [ 'menu_' . $i => [
'id' => $menuItem->getId(),
'name' => $menuItem->getName(),
'body' => $menuItem->getBody(),
'slug' => $menuItem->getSlug(),
]
];
// Getting secondary menu
$secondaryMenu = $this->em->getRepository('App\Entity\Content')->findByParent($menuItem->getId());
$a = 0;
foreach ($secondaryMenu as $keySubmenu => $subMenuItem) {
$submenu[$i][$a] = [ 'submenu_' . $i . '_' . $a => [
'id' => $subMenuItem->getId(),
'name' => $subMenuItem->getName(),
'body' => $subMenuItem->getBody(),
'slug' => $subMenuItem->getSlug(),
]
];
$menu[$i] += $submenu[$i][$a];
$a++;
}
$mainMenu += $menu;
$i++;
}
return $mainMenu;
}
_menu.html.twig
{% set i = 0 %}
{% for menu in menu_items %}
{% set a = 0 %}
<div class="center">
<section class="primary-menu">
{% if 'menu_'~i~'.slug' is not empty %}
<header class="enter">{{ 'menu_'~i~'.name' }}</header>
{% for submenu in 'menu_'~i~'.submenu' %}
<article>
{{ 'submenu_'~i~'_'~a~'.name' }}
</article>
{% endfor %}
{% else %}
<header class="enter">{{ 'menu_'~i~'.name' }}</header>
{% endif %}
</section>
{% set i = i + 1 %}
{% endfor %}
dump($mainMenu) on ContentService class output
array:5 [▼
0 => array:4 [▼
"menu_0" => array:4 [▼
"id" => "a420742f-124a-11e9-a1fd-805e4fe8b43b"
"name" => "Menu 0"
"body" => "Primary menu0"
"slug" => null
]
"submenu_0_0" => array:4 [▼
"id" => "a4208ec3-124a-11e9-a1fd-805e4fe8b43b"
"name" => "Submenu 0"
"body" => "Secondary menu0"
"slug" => "menu-0-submenu-0"
]
"submenu_0_1" => array:4 [▼
"id" => "a420a70d-124a-11e9-a1fd-805e4fe8b43b"
"name" => "Submenu 1"
"body" => "Secondary menu1"
"slug" => "menu-0-submenu-1"
]
"submenu_0_2" => array:4 [▼
"id" => "a420ba8f-124a-11e9-a1fd-805e4fe8b43b"
"name" => "Submenu 2"
"body" => "Secondary menu2"
"slug" => "menu-0-submenu-2"
]
]
1 => array:1 [▼
"menu_1" => array:4 [▼
"id" => "a4205c9f-124a-11e9-a1fd-805e4fe8b43b"
"name" => "Home"
"body" => "Home menu"
"slug" => "home"
]
]
2 => array:4 [▶]
3 => array:4 [▶]
4 => array:4 [▶]
]
I'm currently creating a Drupal 8 module. I would like to be able to use a custom template to display a select element in a form. Here is the code I have written so far:
File my_module/templates/colorselector.html.twig:
{% spaceless %}
<div class="select-wrapper">
{% set classes = ['form-control', 'color-selector'] %}
<select{{ attributes.addClass(classes) }}>
{% for option in options %}
<option value="{{ option.value }}" data-color="{{ option.code }}"{{ option.selected ? ' selected="selected"' }}>{{ option.label }}</option>
{% endfor %}
</select>
</div>
<script>
$('.color-selector').colorselector();
</script>
{% endspaceless %}
File my_module/my_module.module:
use Drupal\Core\Render\Element;
use Drupal\Core\Render\Element\RenderElement;
function my_module_theme($existing, $type, $theme, $path) {
return [
// ...
'colorselector' => [
'render element' => 'select'
]
];
}
function my_module_preprocess_colorselector(&$variables) {
$element = $variables['element'];
Element::setAttributes($element, ['id', 'name', 'size']);
RenderElement::setAttributes($element, ['form-select']);
$variables['attributes'] = $element['#attributes'];
$variables['options'] = [];
foreach ($element['#options'] as $colorName => $colorCode) {
$option = [];
$option['value'] = $colorName;
$option['label'] = $colorName;
$option['code'] = $colorCode;
$variables['options'][] = $option;
}
}
File my_module/src/Form/MyCustomForm.php:
namespace Drupal\my_module\Form;
use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;
class MyCustomForm extends FormBase {
public function buildForm(array $form, FormStateInterface $form_state) {
// ...
$form['color'] = [
'#type' => 'select',
'#theme' => 'colorselector',
'#title' => $this->t('Couleur'),
'#required' => TRUE,
'#options' => $options
];
// ...
return $form;
}
// ...
}
I get the following error message when I try to display the form: The website encountered an unexpected error. Please try again later.
If I remove '#theme' => 'colorselector' from $form['color'], it displays the form correctly but it does not use my template obviously.
Do you know where the error comes from and how to fix it?
Thanks!
Your hook_theme function should be like this.
function my_module_theme($existing, $type, $theme, $path) {
return array(
'color_selector' => array(
'variables' => array('params' => null),
'template' => 'colorselector'
)
);
}
Now, your template name might be my_module/templates/colorselector.html.twig
I have two joined tables. With print_r I am getting something like this
Array
(
[0] => GameShelf\UsersBundle\Entity\Ownership Object
(
[id:GameShelf\UsersBundle\Entity\Ownership:private] => 1
[type:GameShelf\UsersBundle\Entity\Ownership:private] => 1
[time:GameShelf\UsersBundle\Entity\Ownership:private] => 2010-02-05 11:00:00
[game:GameShelf\UsersBundle\Entity\Ownership:private] => Doctrine\ORM\PersistentCollection Object
(
[snapshot:Doctrine\ORM\PersistentCollection:private] => Array
(
[0] => GameShelf\GamesBundle\Entity\Game Object
(
[id:GameShelf\GamesBundle\Entity\Game:private] => 1
[parent_id:GameShelf\GamesBundle\Entity\Game:private] => 0
[name:GameShelf\GamesBundle\Entity\Game:private] => Somebody
[slug:GameShelf\GamesBundle\Entity\Game:private] => somebody
[reldate:GameShelf\GamesBundle\Entity\Game:private] => 2010-10-10
[genres:GameShelf\GamesBundle\Entity\Game:private] => 1,2
[platforms:GameShelf\GamesBundle\Entity\Game:private] => 1,2
[developers:GameShelf\GamesBundle\Entity\Game:private] => 1,2
[description:GameShelf\GamesBundle\Entity\Game:private] => Lipsum
[desc_src:GameShelf\GamesBundle\Entity\Game:private] => http://onet.pl
[rate:GameShelf\GamesBundle\Entity\Game:private] => 0
[ownership:GameShelf\GamesBundle\Entity\Game:private] => GameShelf\UsersBundle\Entity\Ownership Object
*RECURSION*
)
)
What I want, is to print name:GameShelf\GamesBundle\Entity\Game:private] => Somebody, but I don't know how. I use Twig, my current template is:
{% for game in games %}
{{ game.id }}
{% endfor %}
But it outputs only id from Ownership table.
My controller:
public function getOwnedAction($type = 1, $user = 1) {
$games = $this->getDoctrine()
->getRepository('GameShelfUsersBundle:Ownership')
->getOwned();
echo '<pre>';
//print_r($games);
echo '</pre>';
return $this->render('GameShelfUsersBundle:Default:index.html.twig',
array(
'games' => $games->getGame()
));
}
Repo:
public function getOwned($type = 1, $user = 1) {
$query = $this->getEntityManager()
->createQuery('
SELECT o, g FROM GameShelfUsersBundle:Ownership o
JOIN o.game g
WHERE o.type = :type
')
->setParameter('type',$type);
try {
return $query->getResult();
} catch (\Doctrine\ORM\NoResultException $e) {
return null;
}
}
It works only when I set getSingleResult instead of getResult.
In Twig you use the same methods to access Entity information.
[edit] After looking at the recursion, you might need to do it this way:
{% for owners in games %}
{% for game in owners.getGame() %}
{{ game.getId() }}
{{ game.getName() }}
{{ game.getParentId() }}
{# etc... #}
{% endfor %}
{% endfor %}