AdmintLte intégration

Field/GalleryManagerField.php

                         ->setTemplatePath('@LcSov/tabler/crud/field/collection.html.twig')
                         ->setFormType(CollectionType::class)
                         ->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_delete', true)
                         ->setFormTypeOption('entry_options', array('label'=> false))

Resources/assets/apps/backend-common/app.common.js

 
 $('#test22').modal('show');
 
+$('[data-toggle="tooltip"]').tooltip();
+
 if ($('.select2, select.form-control').length) {
 
     $('form .form-widget>select.form-control, .select2').each(function (i, elm) {

Resources/assets/apps/backend-common/common.scss

+/*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 */

Resources/assets/fields/collection/app.field-collection.js

+
+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);
+            });
+        });
+    }
+}

Resources/assets/fields/filemanager/app.field-filemanager.js

 
+import "./form.scss"
+
 
 $(document).ready(function () {
     initFileManager();
 });
 
+$('.field-collection').bind('collection-add-item', function (){
+    initFileManager();
+});
+
 function initFileManager() {
     $('.lc-filemanager-delete').off('click');
     $('.lc-filemanager-delete').on('click', function (e) {
                 var path = $(this).attr('data-path')
                 $('#' + $field.data('id')).val(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'));

Resources/assets/fields/filemanager/form.scss

+.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;
+}

Resources/views/adminlte/crud/edit.html.twig

 {% endblock %}
 
 {% 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>
 {% endblock %}
             });
         });
     </script>
-<
+    <
 
 {% endblock %}

Resources/views/adminlte/crud/form_theme.html.twig

 {# @var ea \EasyCorp\Bundle\EasyAdminBundle\Context\AdminContext #}
 {% 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('collection_row') }}
 {% endblock gallery_manager_row %}
 
 {% 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 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>
-                {% 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>
-
-
 {% 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 %}

Resources/views/adminlte/crud/new.html.twig

             </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">&times;</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 %}
 
 {% block body_javascript %}