[Adminlte] Listes : field image

Field/FileManagerField.php

@@ -22,7 +22,7 @@ final class FileManagerField implements FieldInterface
                 return (new self())
                         ->setProperty($propertyName)
                         ->setLabel($label)
-                        ->setTemplatePath('@LcSov/adminlte/crud/field/image.html.twig')
+                        ->setTemplatePath('@LcSov/adminlte/crud/field/file.html.twig')
                         ->addWebpackEncoreEntries('field-filemanager')
                         ->setFormType(FileManagerType::class)
                         ->addCssClass('field-text')

Field/ImageManagerField.php

@@ -0,0 +1,50 @@
+<?php
+
+namespace Lc\SovBundle\Field;
+
+use EasyCorp\Bundle\EasyAdminBundle\Contracts\Field\FieldInterface;
+use EasyCorp\Bundle\EasyAdminBundle\Field\FieldTrait;
+use Lc\SovBundle\Form\Type\FileManagerType;
+use Symfony\Component\Form\Extension\Core\Type\TextType;
+
+/**
+ * @author La clic ! <contact@laclic.fr>
+ */
+final class ImageManagerField implements FieldInterface
+{
+        use FieldTrait;
+
+        public const OPTION_MAX_LENGTH = 'maxLength';
+        public const OPTION_RENDER_AS_HTML = 'renderAsHtml';
+
+        public static function new(string $propertyName, ?string $label = null): self
+        {
+                return (new self())
+                        ->setProperty($propertyName)
+                        ->setLabel($label)
+                        ->setTemplatePath('@LcSov/adminlte/crud/field/image.html.twig')
+                        ->addWebpackEncoreEntries('field-filemanager')
+                        ->setFormType(FileManagerType::class)
+                        ->addCssClass('field-text')
+                        ->setCustomOption(self::OPTION_MAX_LENGTH, null)
+                        ->setCustomOption(self::OPTION_RENDER_AS_HTML, false);
+        }
+
+        public function setMaxLength(int $length): self
+        {
+                if ($length < 1) {
+                        throw new \InvalidArgumentException(sprintf('The argument of the "%s()" method must be 1 or higher (%d given).', __METHOD__, $length));
+                }
+
+                $this->setCustomOption(self::OPTION_MAX_LENGTH, $length);
+
+                return $this;
+        }
+
+        public function renderAsHtml(bool $asHtml = true): self
+        {
+                $this->setCustomOption(self::OPTION_RENDER_AS_HTML, $asHtml);
+
+                return $this;
+        }
+}

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

@@ -23,65 +23,10 @@ import 'adminlte-plugin/select2-bootstrap4-theme/select2-bootstrap4.min.css';
 import './common.scss';
 
 import log from './utils/log.js';
-
 //log('ncnnc');
-//$('#test22').modal('show');
-
-$('[data-toggle="tooltip"]').tooltip();
-
-if ($('.select2, select.form-control').length) {
-
-    $('form .form-widget>select.form-control, .select2').each(function (i, elm) {
-        if (!$(this).hasClass('disable-select2')) {
-            setSelect2($(elm));
-        }
-    });
-
-    $('form .form-inline>select.form-control').each(function (i, elm) {
-        if (!$(this).hasClass('disable-select2')) {
-            setSelect2($(elm));
-        }
-    });
-}
-
-function setSelect2($select) {
-    if (typeof $select.data('select2-id') === 'undefined') {
-
-        $select.data('init', 'set')
-        var options = {
-            width: "100%",
-            theme: "bootstrap4",
-            dropdownAutoWidth: false,
-            allowClear: true,
-            minimumResultsForSearch: 8
-        };
-
-        if ($select.data('allow-clear') == 'false') {
-            options.allowClear = false;
-        }
-        if ($select.data('width')) {
-            options.width = 'auto'
-        }
-        if ($select.find('option[value=""]')) {
-            options.placeholder = $select.find('option[value=""]').html()
-        }
-        /*if($select.is(':required') == false) {
-            options.allowclear = true
-        }*/
-        var myselect = $select.select2(options);
-
-        myselect.on('select2:select', function (e) {
-            var event = new Event('change');
-            e.target.dispatchEvent(event);
-        });
-        myselect.on('select2:unselect', function (e) {
-            var event = new Event('change');
-            e.target.dispatchEvent(event);
-        });
 
-        return myselect;
-    }
-}
+// JAVASCRIPT
+import './common.js'
 
 //require('select2');
 //require('adminlte');

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

@@ -1,8 +1,22 @@
 
+/* Tooltip */
+$('[data-toggle="tooltip"]').tooltip();
+
 /* Select2 */
-$('select').each(function (){
-    setSelect2($(this));
-});
+if ($('.select2, select.form-control').length) {
+
+    $('form .form-widget>select.form-control, .select2').each(function (i, elm) {
+        if (!$(this).hasClass('disable-select2')) {
+            setSelect2($(elm));
+        }
+    });
+
+    $('form .form-inline>select.form-control').each(function (i, elm) {
+        if (!$(this).hasClass('disable-select2')) {
+            setSelect2($(elm));
+        }
+    });
+}
 
 function setSelect2($select) {
     if (typeof $select.data('select2-id') === 'undefined') {
@@ -10,10 +24,10 @@ function setSelect2($select) {
         $select.data('init', 'set')
         var options = {
             width: "100%",
-            theme: "bootstrap-5",
+            theme: "bootstrap4",
             dropdownAutoWidth: false,
             allowClear: true,
-            minimumResultsForSearch: 1
+            minimumResultsForSearch: 8
         };
 
         if ($select.data('allow-clear') == 'false') {
@@ -28,7 +42,7 @@ function setSelect2($select) {
         /*if($select.is(':required') == false) {
             options.allowclear = true
         }*/
-        let myselect = $select.select2(options);
+        var myselect = $select.select2(options);
 
         myselect.on('select2:select', function (e) {
             var event = new Event('change');

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

@@ -46,3 +46,11 @@
   }
 }
 
+/* modal */
+.modal {
+  .modal-body {
+    img {
+      max-width: 100% ;
+    }
+  }
+}

Resources/views/adminlte/crud/field/file.html.twig

@@ -0,0 +1,8 @@
+
+{% if field.value is not null and field.value.path is not null %}
+    <a href="{{ asset(field.value.path) }}" class="" title="{{ field.value.legend }}">
+        Télécharger
+    </a>
+{% else %}
+    <div class="badge badge-secondary">Aucun(e)</div>
+{% endif %}

Resources/views/adminlte/crud/field/image.html.twig

@@ -1,15 +1,25 @@
 {# @var ea \EasyCorp\Bundle\EasyAdminBundle\Context\AdminContext #}
 {# @var field \EasyCorp\Bundle\EasyAdminBundle\Dto\FieldDto #}
 {# @var entity \EasyCorp\Bundle\EasyAdminBundle\Dto\EntityDto #}
-{% set html_id = 'ea-lightbox-' ~ field.uniqueId %}
+
 {% if field.value is not null and field.value.path is not null %}
-<a href="#" class="ea-lightbox-thumbnail" title="{{ field.value.legend }}" data-featherlight="#{{ html_id }}" data-featherlight-close-on-click="anywhere">
-    <img src="{{ asset(field.value.path) }}" class="img-fluid">
-</a>
 
-<div id="{{ html_id }}" class="ea-lightbox">
-    <img src="{{ asset(field.value.path) }}">
-</div>
+    {% set id_modal = 'modal-'~field.value.id %}
+
+    <a href="{{ lc_liip(field.value.path, 'big') }}" data-toggle="modal" data-target="#{{ id_modal }}" title="{{ field.value.legend }}">
+        <img src="{{ lc_liip(field.value.path, 'thumbnail') }}" alt="{{ field.value.legend }}">
+    </a>
+
+    {% embed "@LcSov/adminlte/embed/modal.twig" %}
+        {% block id %}{{ id_modal }}{% endblock %}
+        {% block size %}modal-xl{% endblock %}
+        {% block title %}{{ field.value.legend ? field.value.legend : 'Image' }}{% endblock %}
+        {% block content %}
+            <img src="{{ lc_liip(field.value.path, 'big') }}" alt="{{ field.value.legend }}" />
+        {% endblock %}
+        {% block footer_wrapper %}{% endblock %}
+    {% endembed %}
+
 {% else %}
     <div class="badge badge-secondary">Aucun(e)</div>
 {% endif %}

Resources/views/adminlte/embed/modal.twig

@@ -0,0 +1,29 @@
+<div class="modal fade show" id="{% block id %}{% endblock %}">
+
+    <div class="modal-dialog {% block size %}{% endblock %}">
+        {% block form_start %}{% endblock %}
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">{% block title %}{% endblock %}</h4>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
+                    <span aria-hidden="true">×</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                {% block content %}
+                {% endblock %}
+            </div>
+            {% block footer_wrapper %}
+                <div class="modal-footer justify-content-between">
+                    {% block footer %}
+                        <button type="button" class="btn btn-default"
+                                data-dismiss="modal">{{ 'action.cancel'|trans }}</button>
+                    {% endblock %}
+                </div>
+            {% endblock %}
+        </div>
+        {% block form_end %}{% endblock %}
+        <!-- /.modal-content -->
+    </div>
+
+</div>