AdminLte intégration page edition

Controller/Admin/AbstractCrudController.php

 use Lc\SovBundle\Doctrine\Extension\DevAliasInterface;
 use Lc\SovBundle\Doctrine\Extension\SeoInterface;
 use Lc\SovBundle\Doctrine\Extension\TranslatableInterface;
+use Lc\SovBundle\Field\CollectionField;
+use Lc\SovBundle\Field\GalleryManagerField;
+use Symfony\Component\Form\Extension\Core\Type\TextType;
 use Symfony\Component\HttpFoundation\RequestStack;
 use Symfony\Component\HttpFoundation\Session\SessionInterface;
 use Twig\Environment;
         if (in_array(SeoInterface::class, class_implements($this->getEntityFqcn()))) {
             $seoPanel = [
                     FormField::addPanel('Seo'),
-                    TextareaField::new('metaTitle')->setLabel('Meta Title')->setHelp(
+                    TextField::new('metaTitle')->setLabel('Meta Title')->setHelp(
                             'Affiché dans les résultats de recherche Google'
                     ),
                     TextareaField::new('metaDescription')->setLabel('Meta description')->setHelp(
                             'Affiché dans les résultats de recherche Google'
                     ),
+                    CollectionField::new('oldUrls')
+                            ->setFormTypeOption('entry_type', TextType::class)->setLabel('Anciennes urls du document')
             ];
         }
 

Controller/Admin/DashboardController.php

 
         $assets->addWebpackEncoreEntry('adminlte-common');
         $assets->addWebpackEncoreEntry('adminlte-index');
+        $assets->addWebpackEncoreEntry('adminlte-form');
 
         return $assets;
     }

Field/CollectionField.php

                         ->setLabel($label)
                         ->setTemplatePath('@LcSov/tabler/crud/field/collection.html.twig')
                         ->setFormType(CollectionType::class)
-                        ->addCssClass('field-collection')
-                        ->addJsFiles('bundles/lcsov/js/form-type-collection-array.js')
+                        ->addWebpackEncoreEntries('adminlte-field-collection')
                         ->setFormTypeOption('allow_add', true)
                         ->setFormTypeOption('allow_delete', true)
                         ->setFormTypeOption('entry_options', array('label' => false))
+                        ->addCssClass('field-collection')
                         ->setFormTypeOption('attr', array('class' => 'field-collection-group'))
 
                         //Fixe le bug easyadmin lors de la gestion d'un champ de type array, laisser a false pour une entité

Field/GalleryManagerField.php

                 return (new self())
                         ->setProperty($propertyName)
                         ->setLabel($label)
-                        ->setTemplatePath('@LcSov/tabler/crud/field/collection.html.twig')
+                        ->setTemplatePath('@LcSov/adminlte/crud/field/collection.html.twig')
                         ->setFormType(CollectionType::class)
                         ->addCssClass('field-collection')
                         ->addWebpackEncoreEntries('adminlte-field-collection')

Field/StatusField.php

                         ->setProperty($propertyName)
                         ->setLabel($label)
                         ->setFormType(ChoiceType::class)
-                        ->setFormTypeOption('expanded', false)
+                        ->setFormTypeOption('expanded', true)
                         ->setFormTypeOption('multiple', false)
                         ->setFormTypeOption('choices', ['En ligne' => 1, 'Hors ligne' => 0])
                         ->setCustomOption('toggle_label', 'En ligne');

Resources/assets/app/adminlte/common/common.js

         }
     });
 
-    $('form .form-inline>select.form-control').each(function (i, elm) {
+    $('form select.form-control').each(function (i, elm) {
         if (!$(this).hasClass('disable-select2')) {
             setSelect2($(elm));
         }
             deleteForm.submit();
         });
 });
+

Resources/assets/app/adminlte/common/scss/form/_checkboxradio.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;}
+/*CUSTOM Checkbox */
+
+.form-check {
+  padding-left: 0px;
+}
+
+.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 */
+  input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  /* Create a custom checkbox */
+
+  input:disabled ~ .checkmark {
+    display: none
+  }
+
+  input ~ .checkmark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 18px;
+    width: 18px;
+    background-color: #eee;
+    border: 1px solid var(--primary);
+  }
+
+  input[type="checkbox"] ~ .checkmark {
+    top: 2px;
+  }
+
+  input[type="radio"] ~ .checkmark {
+    top: 3px;
+    border-radius: 50%;
+  }
+
+
+  /* When the checkbox is checked, add a blue background */
+  input:checked ~ .checkmark {
+    background-color: var(--primary);
+  }
+
+  /* Create the checkmark/indicator (hidden when not checked) */
+  .checkmark:after {
+    content: "";
+    position: absolute;
+    display: none;
+  }
+
+  /* Show the checkmark when checked */
+  input:checked ~ .checkmark:after {
+    display: block;
+  }
+
+  /* Style the checkmark/indicator */
+  .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);
+  }
+
+  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);
+  }
+
+  input[type="radio"] ~ .checkmark:after {
+    top: 4px;
+    left: 4px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: white;
+  }
+
+}
+
+.form-check-label  :hover input ~ .checkmark {
+  background-color: #ccc;
+}
+
+
+.form-check-label.big input ~ .checkmark {
+  height: 21px;
+  width: 21px;
+}
+
+.form-check-label.big input[type="checkbox"] ~ .checkmark:after {
+  left: 7px;
+  top: 3px;
+  width: 6px;
+  height: 11px;
+}
+
 /* Create a custom radio button */
 

Resources/assets/app/adminlte/field/collection/app.collection.js

 
 
 function initCollectionWidget() {
+    Tools.log('czefe');
+
     $('.field-collection[data-prototype]').each(function (i, collectionWidget) {
         setCollectionWidgetSortable($(collectionWidget));
         reindexKeyCollectionWidget($(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
 }
 
 function reindexKeyCollectionWidget($collectionWidget) {
+    Tools.log('ncncnc');
     if ($collectionWidget.data('reindex-key')) {
+        Tools.log('ncncnc');
         $collectionWidget.find('.field-collection-item').each(function (i, item) {
-            $(item).find('.input[type="text"]').each(function (y, field) {
+            $(item).find('input,textarea').each(function (y, field) {
                 let $field = $(field);
                 //Chanegment ID
-                let posId = indexOfLastDigit($field.prop('id'));
+                let posId = Tools.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 posName = Tools.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);

Resources/assets/app/adminlte/form/app.form.js

+
+import './form.js'
+import './form.scss'

Resources/assets/app/adminlte/form/form.js

+
+
+function checkForm() {
+    $('form').addClass('form-sent');
+    //Panel vues js
+    if ($('form').find('.tab-pane').length) {
+        $('form').find('.tab-pane').each(function (i, panel) {
+            if ($(panel).find(':invalid').length) {
+                $('#nav-params').find('.nav-item:eq(' + i + ')').addClass('has-invalid');
+            } else {
+                $('#nav-params').find('.nav-item:eq(' + i + ')').removeClass('has-invalid');
+            }
+        })
+    }
+}
+
+$('button[type="submit"]').on('click', function (e) {
+
+    checkForm();
+})

Resources/assets/app/adminlte/form/form.scss

+
+.form-sent {
+  .form-control:invalid {
+    border-color: #dc3545;
+    padding-right: 2.25rem;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
+    background-repeat: no-repeat;
+    background-position: center right calc(.375em + .1875rem);
+    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
+  }
+
+  select.form-control:invalid + .select2 .select2-selection {
+    border-color: #dc3545;
+  }
+
+  select.form-control:invalid + .select2 .select2-selection b {
+    border-color: #dc3545 transparent transparent transparent;
+  }
+
+  .form-check-label input:invalid ~ .checkmark {
+    border-color: #dc3545;
+  }
+}
+
+.nav-item .nav-link {
+  position: relative;
+
+  .invalid-form {
+    display: none;
+    position: absolute;
+    top: -7px;
+    right: -6px;
+    color: #dc3545;
+    background: #fff;
+    border-radius: 10px;
+    font-size: 1.2rem;
+  }
+}
+
+.nav-item.has-invalid .nav-link .invalid-form {
+  display: inline-block;
+  z-index: 2;
+}
+
+

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

     {%- endif -%}
 {%- endblock checkbox_radio_label %}
 
-
-
-{% use 'bootstrap_4_layout.html.twig' %}
-
 {% block form_start %}
 
     {{ parent() }}