I work with EasyAdmin and I don't know how to add an image in list view.
I would like to add next to the prices two pictures (simply 2 logos) with a link to the website in question. The admin can click on logo A or B who redirect to the website.
I can insert my links with entiy's priority (Interface with links).
.
Here is my code:
app/config/config.yml
list:
fields:
- { property: 'low_amz', label: 'Amazon' }
- { property: 'url_amz', label: 'Amz', type: 'url' }
- { property: 'low_pm', label: 'PriceMinister' }
- { property: 'url_pm', label: 'Pm', type: 'url' }
But how I replace these link's value with my images. The images are stocked in local.
With my thumbnails, it works:
- { property: 'urlPdtImg', type: 'image', label: ' ' }
But in my case, I want just to change the value "string" in img. Of course, this does not work:
- { property: 'url_pm', label: 'Pm', type: 'url', base_path: '/img/Amazon.svg' }}
EasyAdmin Bundle 1.17.12
Symfony 3.4
Have a nice day.
Here are my files:
File config.yml:
- { property: 'url_amz', label: ' ', type: 'url', template: 'easy_admin/fields/_url1.html.twig' }
File _url.html.twig
<a href="{{ value }}">
<img src="{{ asset('Img/PM.svg') }}" alt="Amazon logo" style="height: 30px;"/>
Result
Related
I have a datagrid:
datagrids:
gates-under-location-grid:
inline_editing:
enable: true
extended_entity_name: Entity\Gate
source:
type: orm
query:
select:
- g
- l
- ancestor.id as ancestorId
- ancestor.name as ancestorName
from:
- { table: Entity\Gate, alias: g }
join:
left:
- { join: g.locations, alias: l }
inner:
- { join: Entity\LocationClosure, alias: lc, conditionType: WITH, condition: 'l.id=lc.descendant' }
- { join: Entity\Location, alias: ancestor, conditionType: WITH, condition: 'ancestor=:rootLocation'}
where:
and:
- lc.ancestor=:rootLocation
bind_parameters:
rootLocation: ~
hints:
- HINT_TRANSLATABLE
columns:
name:
label: 'gate.datagrid.field.name'
align: left
locations:
label: 'gate.datagrid.field.locations'
align: left
data_name: locations
data: locations
type: twig
template: Partials/Datagrid/Gate:locations_cell_in_gate_under_location_grid.html.twig
frontend_type: html
inline_editing:
behaviour: enable_selected
editor:
view: oroform/js/app/views/editor/related-id-select-editor-view
view_options:
value_field_name: locations.name
placeholder: 'placeholder'
autocomplete_api_accessor:
class: oroentity/js/tools/entity-select-search-api-accessor
entity_name: Entity\Location
search_handler_name: locations
value_field_name: id
field_name: name
label_field_name: name
properties:
id: ~
view_link:
type: url
route: gate_view
params: [ id ]
update_link:
type: url
route: gate_update
params: [ id ]
sorters:
columns:
name: { data_name: g.name }
default:
name: ASC
filters:
columns:
name:
type: string
data_name: g.name
actions:
view:
type: navigate
label: 'common.grid.details'
link: view_link
icon: eye
update:
type: navigate
label: 'common.grid.edit'
icon: edit
link: update_link
options:
entityHint: 'gate.datagrid.entityhint'
export: true
entity_pagination: true
routerEnabled: false
The location cell editor template is in the locations_cell_in_gate_under_location_grid.html file:
{% import 'OroUIBundle::macros.html.twig' as UI %}
<span class="inline-actions-element">
{% for location in value %}
<span class="tags-container">
<a href="#" title="{{ location.name }}" class="tags-container__tag-entry">
<span>
{{ location.name }}
</span>
</a>
</span>
{% endfor %}
<span class="inline-actions-element_actions inline-actions-element_wrapper" data-role="container">
{{ UI.clientButton({
'dataUrl': path('gate_locations_update',
{
'gateId': record.rootEntity.id,
'locationId': record.getValue('ancestorId')
}),
'aCss': 'inline-actions-btn inline-actions-btn--size-s',
'iCss': 'fa-pencil',
'dataId': record.rootEntity.id,
'title' : 'Edit'|trans,
'label' : 'Edit'|trans,
'widget' : {
'type' : 'dialog',
'multiple' : false,
'reload-grid-name' : 'gates-under-location-grid',
'options' : {
'alias': 'gate_locations_update_dialog',
'stateEnabled': false,
'dialogOptions' : {
'title' : 'gate.datagrid.under_location.locations_edit_widget.title'|trans,
'allowMaximize': false,
'allowMinimize': false,
'width': 600,
'modal': true,
},
},
},
}) }}
</span>
Controller action is the following:
/**
* Shows editForm, or updates Gate with given ID
*
* #Route("/locations-edit/gate/{gateId}/location/{locationId}", name="gate_locations_update", requirements={"gateId"="\d+","locationId"="\d+"})
* #Template("Gate:locations_update.html.twig")
* #ParamConverter("gate", class="Entity\Gate", options={"id" = "gateId"})
* #ParamConverter("location", class="Entity\Location", options={"id" = "locationId"})
*
* #param Request $request
* #param Gate $gate
* #param Location $location
*
* #return array|RedirectResponse
*/
public function updateLocationsAction(Request $request, Gate $gate, Location $location)
{
$form = $this->get('form.factory')
->create(GateLocationsType::class, $gate, ['attr' => ['rootLocation' => $location]]);
return $this->get('oro_form.update_handler')
->update(
$gate,
$form,
$this->get('translator')->trans('common.processes.successful_saved'),
$request
);
}
I wanted to refresh the cell after inline edit, but since i didn't find any chance, it would be good to refresh whole datagrid.
The problem is with this solution, after cell data stored, i got the Data loading failed, try reloading the page. If the issue appears again please contact your administrator. message, and it's logged in the log file:
request.CRITICAL: Uncaught PHP Exception Oro\Bundle\DataGridBundle\Exception\InvalidArgumentException: "Cannot bind datasource parameter "rootLocation", there is no datagrid parameter with path "rootLocation"." at vendor/oro/platform/src/Oro/Bundle/DataGridBundle/Datasource/Orm/ParameterBinder.php line 164 {"exception":"[object] (Oro\\Bundle\\DataGridBundle\\Exception\\InvalidArgumentException(code: 0): Cannot bind datasource parameter \"rootLocation\", there is no datagrid parameter with path \"rootLocation\". at app/vendor/oro/platform/src/Oro/Bundle/DataGridBundle/Datasource/Orm/ParameterBinder.php:164, Symfony\\Component\\PropertyAccess\\Exception\\NoSuchPropertyException(code: 0): The key \"rootLocation\" does exist in an array. at app/vendor/oro/platform/src/Oro/Component/PropertyAccess/PropertyAccessor.php:435)"} []
I tried to add the parameters, but these efforts didn't affected on the error.
Could somebody help, how to pass the rootLocation parameter for the refresh?
Thanks in advance!
A custom controller is not a recommended way to handle the inline editing in the datagrid.
Please follow the official documentation on Creating editable data grid cells in OroPlatform applications.
Also, there is a general reference on inline editing in the OroPlatform datagrids, where you can find the documentation about all the existing inline editor options. You can use one of them, instead of implementing the custom one, or you can use it as a base for creating your own editor.
I want to remove the active class of list item which I had set intentionally active so when the page load I want this list item to remain active using routerLinkActive="active". I want to disable this active class when I select the other items of list in angular
I tried using ngClass but didn't worked as expected. How can this be done without using jquery?
<ul class="nav">
<li routerLinkActive="active" *ngFor="let menuItem of menuItems" [ngClass]="{'active': selectedItem == menuItem}" (click)="listClick($event, menuItem)">
<a class="nav-link" [routerLink]="[menuItem.path]">
<p>{{ menuItem.title }}</p>
</a>
</li>
</ul>
declare interface RouteInfo {
path: String,
title: String,
class: String
}
export const ROUTES: RouteInfo[] = [
{ path: '', title: 'Dashboard', class: '' },
{ path: '/vessel', title: 'Vessel Details', class: '' },
{ path: '/arrival', title: 'Arrival Details', class: ''},
{ path: '/stock', title: 'StockYard', class: ''},
{ path: '/cargo', title: 'Cargo Details', class: '' },
{ path: '/other', title: 'Others', class: ''}
];
menuItems: any[];
selectedItem= false;
listClick(event, newValue) {
console.log(newValue);
this.selectedItem = !this.selectedItem;
}
The intentionally setted active class should be disabled when other list items are clicked.
I see what your trying to do now. You shouldn't need to use ngClass or the click event. Angular will check to see if the active route matches the routerLink path. If it does, the class specified in ActiveRouterLink is added.
It's hard to solve your issue without knowing what you are seeing but try adding [routerLinkActiveOptions]="{exact: true} to the li element.
I am creating a backend to my Symfony4.2 site using the easyadmin bundle. in the new/edit form created for my entities it creates a dropdown to select from. However, in chrome and firefox these dropdowns are not behaving as expected. When I click on them it shows the options but it does not close if I select an option or click away from the dropdown menu. It works okay on Safari and Edge.
Here is the easyadmin.yaml
easy_admin:
#Global Settings
site_name: 'Physics Quiz SIte'
design:
assets:
favicon: '/build/images/favicon.ba133a8b.ico'
# this is the default form theme used by backends
form_theme: '#EasyAdmin/form/bootstrap_4.html.twig'
# these custom templates are applied to all entities
brand_color: '#1ABC9C'
menu:
- { label: 'Public Homepage', route: 'homepage', icon: 'home' }
- { entity: 'User', icon: 'user' }
- { entity: 'QuestionType' }
- { entity: 'Question' }
- { entity: 'Quiz' }
show:
max_results: 10
list:
actions:
- { name: 'edit', icon: 'pencil'}
- { name: 'delete', icon: 'trash'}
# allow deleting multiple items at once ...
batch_actions: ['delete']
# List the entity class name you want to manage
entities:
Quiz:
class: App\Entity\Quiz
form:
fields:
- property: 'quizname'
label: 'Quiz Name'
- property: 'course'
type: 'entity'
type_options:
expanded: false
multiple: false
This is the relevant page source that is created:
<div class="col-12 ">
<div class="form-group field-entity">
<label class="form-control-label required" for="quiz_course">Course</label>
<div class="form-widget">
<select id="quiz_course" name="quiz[course]" data-widget="select2" class="form-control">
<option value="1">Year 10 Physics</option>
<option value="2">Year 11 Physics</option>
</select>
</div>
</div>
</div>
and here are the scripts that may be relevant.
<script src="/bundles/easyadmin/select2/i18n/en.js"></script>
<script type="text/javascript">
$(function() {
// Select2 widget is only enabled for the <select> elements which
// explicitly ask for it
function init() {
$('form select[data-widget="select2"]').select2({
theme: 'bootstrap',
language: 'en'
});
}
$(document).on('easyadmin.collection.item-added', init);
init();
});
</script>
Here is a picture of the rendered dropdown:
This was a bug introduced in version 2.1.2.
https://github.com/EasyCorp/EasyAdminBundle/issues/2715
There was a new release 2.1.3 that fixes the problem.
I'm sure there's a really simple solution to this but I can't seem to find it, and I haven't found the question asked here already.
I'm trying to align a layout widget (area) so that when another widget is added it appears to the right of the first widget and not below.
I was hoping i could sort this with flexbox and the artistContainer class but it doesn't seem to be possible.
Dev tools and desired outcome
home.html
<section class="bodysect--dark" id="artists">
<h2 class="body__heading">Artists</h2>
<div class="artistContainer">
{{
apos.area(data.page, 'artist', {
widgets: {
artist: {}
}
})
}}
</div>
</section>
Widget.html
<div class="artist">
<div class="artistImage">
{{ apos.singleton(data.widget, 'areaImage', 'apostrophe-images', {
widgets: {
'apostrophe-images': {}
}
}) }}
</div>
<div class="artistName">
{{ apos.singleton(data.widget, 'singletonName', 'apostrophe-rich-text', {
widgets: {
'apostrophe-rich-text': {}
}
}) }}
</div>
<div class="artistBio">
{{ apos.singleton(data.widget, 'singletonBio', 'apostrophe-rich-text', {
widgets: {
'apostrophe-rich-text': {}
}
}) }}
</div>
</div>
widget index.js
module.exports = {
extend: 'apostrophe-widgets',
label: 'Artist',
contextualOnly: true,
addFields: [
{
name: 'artistImage',
type: 'singleton',
label: 'Image Area',
required: true
},
{
name: 'artistName',
type: 'singleton',
label: 'Name Area',
required: true
},
{
name: 'artistBio',
type: 'singleton',
label: 'Bio Area',
required: true
},
]
};
Thanks in advance!
There is nothing preventing you from lining up horizontally, however, to maintain the proper flex contexts, you'll need to apply styles to apostrophe-generated markup instead of just your project level classes. Here is some sample code I just demo'd
.horizontal-area {
.apos-area-widgets, // proper context for logged-in user
.apos-area { // proper context for logged-out user
display: flex;
}
.apos-area-widget-wrapper {
flex-grow: 1;
flex-basis: 0;
}
}
http://g.recordit.co/IlOPYKRUo0.gif
You might want to provide additional UI changes to adjust the horizontal Add Content line within the horizontal area scope.
i'm a newbie of sonata, i configure in this way my config.yml
sonata_admin:
title: Name
templates:
layout: SonataAdminBundle::layout.html.twig
dashboard:
groups:
PartnerShop:
label: Partner Shop
icon: <i class="fa fa-car"></i>
items:
- admin.content
- admin.access
- admin.category
PagineComuni:
label: Pagine Comuni
icon: <i class="fa fa-bars"></i>
items:
- route: 'admin_app_comuni_edit'
route_params: { id: 1 }
label: Name
- route: 'admin_app_comuni_edit'
route_params: { id: 2 }
label: Brands
- route: 'admin_app_comuni_edit'
route_params: { id: 3 }
label: Gamma
- route: 'admin_app_comuni_edit'
route_params: { id: 4 }
label: Logistica
User:
label: Utenti
icon: <i class="fa fa-users"></i>
items:
- sonata.user.admin.user
- sonata.user.admin.group
roles: [ROLE_SUPER_ADMIN ]
in side menù all it works, i see the correct list of admin, but in dashboard i see only the ParnerShop and User block, PagineComuni is not present
exist a way to display pagine comuni beetween ParnerShop and User?
thank you