->setTemplatePath('@LcSov/tabler/crud/field/collection.html.twig') | ->setTemplatePath('@LcSov/tabler/crud/field/collection.html.twig') | ||||
->setFormType(CollectionType::class) | ->setFormType(CollectionType::class) | ||||
->addCssClass('field-collection') | ->addCssClass('field-collection') | ||||
->addJsFiles('bundles/lcsov/js/form-type-collection.js') | |||||
->addJsFiles('bundles/lcsov/js/form-type-file-manager.js') | |||||
->addJsFiles('bundles/lcsov/js/jquery-ui/jquery-ui.min.js') | |||||
->addWebpackEncoreEntries('field-collection') | |||||
->addWebpackEncoreEntries('field-filemanager') | |||||
->setFormTypeOption('allow_add', true) | ->setFormTypeOption('allow_add', true) | ||||
->setFormTypeOption('allow_delete', true) | ->setFormTypeOption('allow_delete', true) | ||||
->setFormTypeOption('entry_options', array('label'=> false)) | ->setFormTypeOption('entry_options', array('label'=> false)) |
//log('ncnnc'); | //log('ncnnc'); | ||||
//$('#test22').modal('show'); | //$('#test22').modal('show'); | ||||
$('[data-toggle="tooltip"]').tooltip(); | |||||
if ($('.select2, select.form-control').length) { | if ($('.select2, select.form-control').length) { | ||||
$('form .form-widget>select.form-control, .select2').each(function (i, elm) { | $('form .form-widget>select.form-control, .select2').each(function (i, elm) { |
@import "adminlte-css"; | |||||
@import "fontawesome-css"; | |||||
/* global */ | |||||
body { | |||||
font-size: 0.9rem; | |||||
} | |||||
@import 'scss/_formchecboxradio.scss'; | |||||
/* card */ | /* card */ | ||||
.card { | .card { | ||||
} | } | ||||
} | } | ||||
} | } | ||||
/*CUSTOM Checkbox | |||||
/* Customize the label (the container) */ | |||||
.form-check-label {display: block; position: relative; padding-left: 26px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} | |||||
/* Hide the browser's default checkbox */ | |||||
.form-check-label input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;} | |||||
/* Create a custom checkbox */ | |||||
.form-check{padding-left: 0px;} | |||||
.form-sent .form-check-label input:invalid ~ .checkmark { border-color: #dc3545;} | |||||
.form-check-label input:disabled ~ .checkmark {display: none} | |||||
.form-check-label input ~ .checkmark { position: absolute; top: 0; left: 0; height: 18px; width: 18px; background-color: #eee;border: 1px solid var(--primary);} | |||||
.form-check-label.big input ~ .checkmark { height: 21px; width: 21px; } | |||||
.form-check-label input[type="checkbox"] ~ .checkmark {top: 2px;} | |||||
.form-check-label input[type="radio"] ~ .checkmark { top:3px; border-radius: 50%;} | |||||
.form-check-label:hover input ~ .checkmark { background-color: #ccc;} | |||||
/* When the checkbox is checked, add a blue background */ | |||||
.form-check-label input:checked ~ .checkmark {background-color: var(--primary);} | |||||
/* Create the checkmark/indicator (hidden when not checked) */ | |||||
.form-check-label .checkmark:after { content: ""; position: absolute; display: none;} | |||||
/* Show the checkmark when checked */ | |||||
.form-check-label input:checked ~ .checkmark:after {display: block;} | |||||
/* Style the checkmark/indicator */ | |||||
.form-check-label .checkmark:after {left: 7px; top: 3px; width: 6px; height: 11px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);} | |||||
.form-check-label input[type="checkbox"] ~ .checkmark:after {left: 6px; top: 2px; width: 6px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);} | |||||
.form-check-label input[type="radio"] ~ .checkmark:after {top: 4px; left: 4px; width: 8px; height: 8px; border-radius: 50%; background: white;} | |||||
.form-check-label.big input[type="checkbox"] ~ .checkmark:after {left: 7px; top: 3px; width: 6px; height: 11px;} | |||||
/* Create a custom radio button */ | |||||
import "jquery-ui" | |||||
import "./form.scss" | |||||
$(document).ready(function () { | |||||
initCollectionWidget(); | |||||
}); | |||||
function initCollectionWidget() { | |||||
$('.field-collection[data-prototype]').each(function (i, collectionWidget) { | |||||
setCollectionWidgetSortable($(collectionWidget)); | |||||
reindexKeyCollectionWidget($(collectionWidget)); | |||||
setCollectionWidgetAdd($(collectionWidget)); | |||||
setCollectionWidgetDelete($(collectionWidget)); | |||||
}); | |||||
} | |||||
function setCollectionWidgetAdd($collectionWidget) { | |||||
if ($collectionWidget.data('allow-add')) { | |||||
$collectionWidget.find('.field-collection-add').on('click', function (e) { | |||||
// grab the prototype template | |||||
var newWidget = $collectionWidget.attr('data-prototype'); | |||||
// replace the "__name__" used in the id and name of the prototype | |||||
// with a number that's unique to your emails | |||||
// end name attribute looks like name="contact[emails][2]" | |||||
newWidget = newWidget.replace(/__name__/g, getNumItems($collectionWidget)); | |||||
// create a new list element and add it to the list | |||||
$collectionWidget.find('.form-widget-compound .field-collection-group').append(newWidget); | |||||
$collectionWidget.find('.field-collection-item:last').find('.field-position').val(getNumItems($collectionWidget)); | |||||
reindexKeyCollectionWidget($collectionWidget); | |||||
setCollectionWidgetDelete($collectionWidget); | |||||
$collectionWidget.trigger('collection-add-item'); | |||||
$collectionWidget.data('num-items', $collectionWidget.data('num-items') + 1); | |||||
$collectionWidget.find('.collection-empty').hide(); | |||||
}); | |||||
} | |||||
} | |||||
function setCollectionWidgetDelete($collectionWidget) { | |||||
if ($collectionWidget.data('allow-delete')) { | |||||
$collectionWidget.find('.field-collection-delete').off('click'); | |||||
$collectionWidget.find('.field-collection-delete').on('click', function () { | |||||
$(this).parents('.form-group:first').remove(); | |||||
reindexKeyCollectionWidget($collectionWidget); | |||||
if(getNumItems($collectionWidget)==0)$collectionWidget.find('.collection-empty').show(); | |||||
}); | |||||
} | |||||
} | |||||
function getNumItems($collectionWidget) { | |||||
if ($collectionWidget.data('reindex-key')) { | |||||
return $collectionWidget.find('.field-collection-item').length; | |||||
} else { | |||||
return $collectionWidget.data('num-items'); | |||||
} | |||||
} | |||||
function reindexKeyCollectionWidget($collectionWidget) { | |||||
if ($collectionWidget.data('reindex-key')) { | |||||
$collectionWidget.find('.field-collection-item').each(function (i, item) { | |||||
$(item).find('.input[type="text"]').each(function (y, field) { | |||||
let $field = $(field); | |||||
//Chanegment ID | |||||
let posId = indexOfLastDigit($field.prop('id')); | |||||
let idPrefix = $field.prop('id').substr(0, posId); | |||||
let idSuffix = $field.prop('id').substr(posId + 1); | |||||
$field.prop('id', idPrefix + i + idSuffix); | |||||
//Chanegment Name | |||||
let posName = indexOfLastDigit($field.prop('name')); | |||||
let namePrefix = $field.prop('name').substr(0, posName); | |||||
let nameSuffix = $field.prop('name').substr(posName + 1); | |||||
$field.prop('name', namePrefix + i + nameSuffix); | |||||
}); | |||||
}); | |||||
} | |||||
} | |||||
function setCollectionWidgetSortable($collectionWidget) { | |||||
if ($collectionWidget.data('sortable')) { | |||||
$collectionWidget.find('.field-collection-group').sortable({ | |||||
"handle" : '.lc-btn-sortable', | |||||
cancel: '' | |||||
}); | |||||
$collectionWidget.find('.field-collection-group').on("sortupdate", function (event, ui) { | |||||
$collectionWidget.find('.field-collection-group>div').each(function (index, item) { | |||||
$(item).find('.field-position').val(index); | |||||
}); | |||||
}); | |||||
} | |||||
} |
import "./form.scss" | |||||
$(document).ready(function () { | $(document).ready(function () { | ||||
initFileManager(); | initFileManager(); | ||||
}); | }); | ||||
$('.field-collection').bind('collection-add-item', function (){ | |||||
initFileManager(); | |||||
}); | |||||
function initFileManager() { | function initFileManager() { | ||||
$('.lc-filemanager-delete').off('click'); | $('.lc-filemanager-delete').off('click'); | ||||
$('.lc-filemanager-delete').on('click', function (e) { | $('.lc-filemanager-delete').on('click', function (e) { | ||||
var path = $(this).attr('data-path') | var path = $(this).attr('data-path') | ||||
$('#' + $field.data('id')).val(path); | $('#' + $field.data('id')).val(path); | ||||
$('#' + $field.data('id') + '_preview').prop('src',path); | $('#' + $field.data('id') + '_preview').prop('src',path); | ||||
$('#lc-filemanager-modal').modal('hide') | |||||
$('#lc-filemanager-modal').modal('hide'); | |||||
}); | }); | ||||
}); | }); | ||||
$("#lc-filemanager-frame").prop('src', $field.data('target')); | $("#lc-filemanager-frame").prop('src', $field.data('target')); |
.lc-filemenager-preview { | |||||
width: 100%; | |||||
object-fit: contain; | |||||
position: relative; | |||||
min-height: 80px; | |||||
} | |||||
.lc-filemenager-preview .no-image{ | |||||
position: absolute; | |||||
font-size: 3rem; | |||||
width: 100%; | |||||
height: 100%; | |||||
z-index: 1; | |||||
top: 0; | |||||
text-align: center; | |||||
left: 0; | |||||
right: 0; | |||||
margin: auto; | |||||
} | |||||
.lc-filemenager-preview img{ | |||||
width: 100%; | |||||
z-index: 2; | |||||
position: relative; | |||||
object-fit: contain; | |||||
} |
{% endblock %} | {% endblock %} | ||||
{% block main %} | {% block main %} | ||||
<div class="card"> | |||||
<div class="card-body"> | |||||
{% block edit_form %} | |||||
{{ form(edit_form) }} | |||||
{% endblock edit_form %} | |||||
{% block delete_form %} | |||||
{{ include('@EasyAdmin/crud/includes/_delete_form.html.twig', { entity_id: entity.primaryKeyValue }, with_context = false) }} | |||||
{% endblock delete_form %} | |||||
<div class="col-8"> | |||||
<div class="card"> | |||||
<div class="card-body"> | |||||
{% block edit_form %} | |||||
{{ form(edit_form) }} | |||||
{% endblock edit_form %} | |||||
{% block delete_form %} | |||||
{{ include('@EasyAdmin/crud/includes/_delete_form.html.twig', { entity_id: entity.primaryKeyValue }, with_context = false) }} | |||||
{% endblock delete_form %} | |||||
</div> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
{% endblock %} | {% endblock %} | ||||
}); | }); | ||||
}); | }); | ||||
</script> | </script> | ||||
< | |||||
< | |||||
{% endblock %} | {% endblock %} |
{# @var ea \EasyCorp\Bundle\EasyAdminBundle\Context\AdminContext #} | {# @var ea \EasyCorp\Bundle\EasyAdminBundle\Context\AdminContext #} | ||||
{% use '@EasyAdmin/crud/form_theme.html.twig' %} | {% use '@EasyAdmin/crud/form_theme.html.twig' %} | ||||
{% block form_label -%} | |||||
{% if label is not same as(false) -%} | |||||
{%- if compound is defined and compound -%} | |||||
{%- set element = 'legend' -%} | |||||
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' col-form-label')|trim}) -%} | |||||
{%- else -%} | |||||
{%- set label_attr = label_attr|merge({for: id, class: (label_attr.class|default('') ~ ' form-label')|trim}) -%} | |||||
{%- endif -%} | |||||
{{ parent() }} | |||||
{%- endif -%} | |||||
{%- endblock form_label %} | |||||
{% block gallery_manager_row %} | {% block gallery_manager_row %} | ||||
{{ block('collection_row') }} | {{ block('collection_row') }} | ||||
{% endblock gallery_manager_row %} | {% endblock gallery_manager_row %} | ||||
{% block file_manager_widget %} | {% block file_manager_widget %} | ||||
<div class="lc-filemanager col-xs-12"> | |||||
<div class="col-md-6 col-xs-12 nopadding" style="padding: 0px;"> | |||||
<img style="width: 200px; height: 150px; object-fit: contain; background: #ddd; " src="{{ form.path.vars.value }}" class="lc-filemenager-preview" id="{{ form.path.vars.id }}_preview" alt=""> | |||||
<div class="lc-filemanager row"> | |||||
<div class="col-md-3 col-xs-12 form-group"> | |||||
<div class="lc-filemenager-preview card"> | |||||
<div class="no-image"> | |||||
<i class="fa fa-image"></i> | |||||
</div> | |||||
<img src="{{ form.path.vars.value }}" id="{{ form.path.vars.id }}_preview" alt="" class="card-img-top"> | |||||
</div> | |||||
</div> | </div> | ||||
<div class="input-group"> | |||||
{{ form_widget(form) }} | |||||
<div class="input-group-append"> | |||||
<button type="button" class="btn btn-sm lc-filemanager-open" data-id="{{ form.path.vars.id }}" | |||||
data-target="{{ path('file_manager', {module:1, conf:'default'})|raw }}"> | |||||
<i class="fa fa-folder-open-o"></i> | |||||
</button> | |||||
{% if value %} | |||||
<button type="button" class="btn btn-sm lc-filemanager-delete" data-id="{{ form.path.vars.id }}"> | |||||
<i class="fa fa-trash-o"></i> | |||||
<div class="col-12"> | |||||
<div class="input-group"> | |||||
<div class="input-group-prepend"> | |||||
{% if form.parent.vars['row_attr']['data-sortable'] is defined %} | |||||
<button type="button" class="btn btn-success lc-btn-sortable" data-toggle="tooltip" title="Trier les images"> | |||||
<i class="fa fa-arrows-alt"></i> | |||||
</button> | |||||
{% endif %} | |||||
<button type="button" class="btn btn-primary lc-filemanager-open" data-id="{{ form.path.vars.id }}" data-toggle="tooltip" title="Sélectionner un fichier" | |||||
data-target="{{ path('file_manager', {module:1, conf:'default'})|raw }}"> | |||||
<i class="fa fa-folder-open"></i> | |||||
</button> | </button> | ||||
{% endif %} | |||||
</div> | |||||
{{ form_widget(form.legend) }} | |||||
<div class="input-group-append"> | |||||
<button type="button" class="btn btn-danger lc-filemanager-delete" data-toggle="tooltip" title="Supprimer l'image" | |||||
data-id="{{ form.path.vars.id }}"> | |||||
<i class="fa fa-trash"></i> | |||||
</button> | |||||
</div> | |||||
{% if form.parent.vars['row_attr']['data-sortable'] is defined %} | |||||
<button type="button" class="btn btn-sm lc-btn-sortable" > | |||||
<i class="fa fa-arrows"></i> | |||||
</button> | |||||
{% endif %} | |||||
{{ form_rest(form) }} | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
{% endblock file_manager_widget %} | {% endblock file_manager_widget %} | ||||
{% block checkbox_radio_label -%} | |||||
{#- Do not display the label if widget is not defined in order to prevent double label rendering -#} | |||||
{%- if widget is defined -%} | |||||
{% set is_parent_custom = parent_label_class is defined and ('checkbox-custom' in parent_label_class or 'radio-custom' in parent_label_class or 'switch-custom' in parent_label_class) %} | |||||
{% set is_custom = label_attr.class is defined and ('checkbox-custom' in label_attr.class or 'radio-custom' in label_attr.class or 'switch-custom' in label_attr.class) %} | |||||
{%- if is_parent_custom or is_custom -%} | |||||
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' custom-control-label')|trim}) -%} | |||||
{%- else %} | |||||
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' form-check-label')|trim}) -%} | |||||
{%- endif %} | |||||
{%- if not compound -%} | |||||
{% set label_attr = label_attr|merge({'for': id}) %} | |||||
{%- endif -%} | |||||
{%- if required -%} | |||||
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' required')|trim}) -%} | |||||
{%- endif -%} | |||||
{%- if parent_label_class is defined -%} | |||||
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' ' ~ parent_label_class)|replace({'checkbox-inline': '', 'radio-inline': '', 'checkbox-custom': '', 'radio-custom': ''})|trim}) -%} | |||||
{%- endif -%} | |||||
{%- if label is not same as(false) and label is empty -%} | |||||
{%- if label_format is not empty -%} | |||||
{%- set label = label_format|replace({ | |||||
'%name%': name, | |||||
'%id%': id, | |||||
}) -%} | |||||
{%- else -%} | |||||
{%- set label = name|humanize -%} | |||||
{%- endif -%} | |||||
{%- endif -%} | |||||
<label{% with { attr: label_attr } %}{{ block('attributes') }}{% endwith %}> | |||||
{{ widget|raw }} | |||||
<span class="checkmark"></span> | |||||
{# {% if translation_domain == 'lcshop' %} | |||||
{{ name|lc_trad(easyadmin['entity']['name'], 'field') }} | |||||
{% else %}#} | |||||
{{- label is not same as(false) ? (translation_domain is same as(false) ? label : label|trans(label_translation_parameters, translation_domain))|raw -}} | |||||
{#{% endif %}#} | |||||
{{- form_errors(form) -}} | |||||
</label> | |||||
{%- endif -%} | |||||
{%- endblock checkbox_radio_label %} |
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<button type="button" data-bs-toggle="modal" data-bs-target="#niche">Launch modal</button> | |||||
<div class="modal" tabindex="-1" role="dialog" id="test22"> | |||||
<div class="modal-dialog" role="document"> | |||||
<div class="modal-content"> | |||||
<div class="modal-header"> | |||||
<h5 class="modal-title">Modal title</h5> | |||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |||||
<span aria-hidden="true">×</span> | |||||
</button> | |||||
</div> | |||||
<div class="modal-body"> | |||||
<p>Modal body text goes here.</p> | |||||
</div> | |||||
<div class="modal-footer"> | |||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> | |||||
<button type="button" class="btn btn-primary">Save changes</button> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
{% endblock %} | {% endblock %} | ||||
{% block body_javascript %} | {% block body_javascript %} |