Refactoring & template adminLte

ShopBundle/Controller/Admin/ProductFamilyController.php

                 $class = $this->em->getClassMetadata(ProductCategoryInterface::class);
                 $this->taxRateClass = $this->em->getClassMetadata(TaxRateInterface::class);
 
-                $formBuilder->add('productCategories', ProductFamilyCategoriesType::class) ;
+                $formBuilder->add('productCategories', ProductFamilyCategoriesType::class);
 
                 //CHOICE qui permet de sélectionner une taxe
                 //ça c'est du lourd fais très attention faudra  refactorer
                 $this->choicesTaxRateParam[0] = $this->getUser()->getMerchant()->getTaxRate()->getValue();
 
                 // choices unit
-                $choicesUnits = [] ;
-                $unitClass = $this->em->getClassMetadata(UnitInterface::class)->getName() ;
-                foreach ($this->em->getRepository($unitClass)->findAll() as $unit) {
-                        $choicesUnits[$unit->getWording()] = $unit->getId() ;
-                }
+
 
                 $formBuilder->add('taxRate', ChoiceType::class, array(
                         'label' => 'TVA',
                         'choices' => $choicesTaxRate,
                         'mapped' => false,
-                        'data'=> 0,
+                        'data' => 0,
                         'choice_attr' => function ($choice, $key, $value) {
                                 return ['data-tax-rate-value' => $this->choicesTaxRateParam[$choice]];
                         },
                 ));
 
                 $formBuilder->add('differentSupplierTaxRate', CheckboxType::class, array(
-                        'required'=>false,
-                        'mapped'=>false
+                        'required' => false,
+                        'mapped' => false
                 ));
 
                 $this->choicesSupplierTaxRateParam[0] = 'inherited';
                 $formBuilder->add('supplierTaxRate', ChoiceType::class, array(
                         'label' => 'TVA du fournisseur',
                         'choices' => $choicesSupplierTaxRate,
-                        'data'=> 0,
+                        'data' => 0,
                         'mapped' => false,
                         'choice_attr' => function ($choice, $key, $value) {
                                 return ['data-tax-rate-value' => $this->choicesSupplierTaxRateParam[$choice]];
                         },
                 ));
 
-                $formBuilder->add('unit', EntityType::class, array(
-                        'class' => $unitClass,
-                        /*'label' => 'Unité',
+
+                $this->choicesUnitsReference = [];
+                $unitClass = $this->em->getClassMetadata(UnitInterface::class)->getName();
+                foreach ($this->em->getRepository($unitClass)->findAll() as $unit) {
+                        $choicesUnits[$unit->getWordingUnit()] = $unit->getId();
+                        $this->choicesUnitsReference[$unit->getId()]['unit-reference'] = $unit->getUnitReference();
+                        $this->choicesUnitsReference[$unit->getId()]['coefficient'] = $unit->getCoefficient();
+                }
+
+                $formBuilder->add('unit', ChoiceType::class, array(
+                        'label' => 'TVA du fournisseur',
                         'choices' => $choicesUnits,
-                        'data'=> 0,*/
+                        'data' => 0,
+                        'mapped' => false,
+                        'choice_attr' => function ($choice, $key, $value) {
+                                return [
+                                        'data-unit-reference' => $this->choicesUnitsReference[$choice]['unit-reference'],
+                                        'data-coefficient' => $this->choicesUnitsReference[$choice]['coefficient']
+                                ];
+                        },
                 ));
 
                 $formBuilder->add('quantity', NumberType::class, array(
 
                 $formBuilder->add('priceByRefUnit', NumberType::class, array(
                         'label' => 'Prix de vente en fonction de l\'unité de référence',
-                        'mapped'=>false,
-                        'required'=>false
+                        'mapped' => false,
+                        'required' => false
                 ));
 
                 $formBuilder->add('priceByRefUnitWithTax', NumberType::class, array(
                         'label' => 'Prix',
-                        'mapped'=>false,
-                        'required'=>false
+                        'mapped' => false,
+                        'required' => false
                 ));
 
                 $formBuilder->add('buyingPriceWithTax', NumberType::class, array(
                 ));
                 $formBuilder->add('multiplyingFactor', NumberType::class, array(
                         'label' => 'Coefficiant de multiplication',
-                        'mapped'=>false,
-                        'required'=>false
+                        'mapped' => false,
+                        'required' => false
                 ));
 
 
                         $entity->setTaxRate($repo->find($taxRateId));
                 }
 
-                $this->processCategories($entity) ;
-                $this->processProducts($entity) ;
+                $this->processCategories($entity);
+                $this->processProducts($entity);
 
                 $this->setUpdated($entity);
 
 
         public function persistEntity($entity)
         {
-                $this->processCategories($entity) ;
-                $this->processProducts($entity) ;
+                $this->processCategories($entity);
+                $this->processProducts($entity);
 
-                parent::persistEntity($entity) ;
+                parent::persistEntity($entity);
         }
 
         protected function processProducts($entity)
         {
                 //si il existe un et un seul produit pour ce product family n'ajoute rien supprime rien
-                if(count($entity->getProducts()) == 0) {
+                if (count($entity->getProducts()) == 0) {
                         $product = new Product();
-                        $product->setCreatedBy($this->getUser()) ;
-                        $product->setUpdatedBy($this->getUser()) ;
-                        $product->setProductFamily($entity) ;
+                        $product->setCreatedBy($this->getUser());
+                        $product->setUpdatedBy($this->getUser());
+                        $product->setProductFamily($entity);
                         $this->em->persist($product);
 
-                        $entity->addProduct($product) ;
-                }
-                else {
+                        $entity->addProduct($product);
+                } else {
 
-                        foreach($entity->getProducts() as $product) {
-                                $product->setProductFamily($entity) ;
-                                $product->setCreatedBy($this->getUser()) ;
-                                $product->setUpdatedBy($this->getUser()) ;
+                        foreach ($entity->getProducts() as $product) {
+                                $product->setProductFamily($entity);
+                                $product->setCreatedBy($this->getUser());
+                                $product->setUpdatedBy($this->getUser());
                                 $this->em->persist($product);
-                                $entity->addProduct($product) ;
+                                $entity->addProduct($product);
 
 //                                die('ncici');
                         }
 
         protected function processCategories(ProductFamilyInterface $entity)
         {
-                $productCategoryRepository = $this->getDoctrine()->getRepository(ProductCategoryInterface::class) ;
-                $productCategories = $entity->getProductCategories() ;
+                $productCategoryRepository = $this->getDoctrine()->getRepository(ProductCategoryInterface::class);
+                $productCategories = $entity->getProductCategories();
 
-                $entity->initProductCategories() ;
+                $entity->initProductCategories();
 
-                foreach($productCategories as $key => $bool) {
-                        if(is_bool($bool) && $bool) {
-                                if(strpos($key, 'category_children_') !== false) {
-                                        $idCategory = (int) str_replace('category_children_', '', $key) ;
-                                }
-                                else {
-                                        $idCategory = (int) str_replace('category_', '', $key) ;
+                foreach ($productCategories as $key => $bool) {
+                        if (is_bool($bool) && $bool) {
+                                if (strpos($key, 'category_children_') !== false) {
+                                        $idCategory = (int)str_replace('category_children_', '', $key);
+                                } else {
+                                        $idCategory = (int)str_replace('category_', '', $key);
                                 }
 
-                                $category = $productCategoryRepository->find($idCategory) ;
-                                $entity->addProductCategory($category) ;
+                                $category = $productCategoryRepository->find($idCategory);
+                                $entity->addProductCategory($category);
                         }
                 }
         }
+
         protected function editAction()
         {
 
                         $this->updateEntityProperty($entity, $property, $newValue);
 
                         // cast to integer instead of string to avoid sending empty responses for 'false'
-                        return new Response((int) $newValue);
+                        return new Response((int)$newValue);
                 }
 
                 $fields = $this->entity['edit']['fields'];
                 $deleteForm = $this->createDeleteForm($this->entity['name'], $id);
 
                 $sortableProductsField = array();
-                foreach($editForm->get('products')->getData() as $k=>$product){
+                foreach ($editForm->get('products')->getData() as $k => $product) {
                         $sortableProductsField[$product->getPosition()] = $k;
                 }
                 ksort($sortableProductsField);
                         'entity_fields' => $fields,
                         'entity' => $entity,
                         'categories' => $categories,
-                        'sortableProductsField' =>  array()
+                        'sortableProductsField' => array()
                 ];
 
                 return $this->executeDynamicMethod('render<EntityName>Template', ['new', $this->entity['templates']['new'], $parameters]);
         }
 
-}
+}

ShopBundle/Resources/public/js/backend/script/custom.js

 function initAdminLtePlugin(){
     $('[data-toggle="tooltip"]').tooltip()
 
-    /*if($('.select2, select.form-control').length) {
-        $('.select2,select.form-control').select2({
-            //theme: 'bootstrap'
-        })
+    if($('.select2, select.form-control').length) {
+        $('form select.form-control').each(function (i, elm) {
+
+            myselect = $(elm).select2({
+                //theme: 'bootstrap',
+                //width: "100%",
+                dropdownAutoWidth: false,
+                placeholder: "Select an option"
+            });
+            myselect.on('select2:select', function (e) {
+                var event = new Event('change');
+                e.target.dispatchEvent(event);
+            });
+        });
     }
     if($('.select2-no-search').length) {
         $('.select2-no-search').select2({
             minimumResultsForSearch: Infinity
         });
     }
-*/
 
 
 

ShopBundle/Resources/public/js/backend/script/order/vuejs-order.js

         },
     }
 });
+
+$(window).on('load',function(){
+
+    for(i=0; i<window.formProductTemplate.length; i++) {
+        appProductFamily.formProductArray.push(formProductTemplate[i]);
+        appProductFamily.indexFormProduct++;
+    }
+
+
+});

ShopBundle/Resources/public/js/backend/script/productfamily/vuejs-mixins.js → ShopBundle/Resources/public/js/backend/script/vuejs-mixins.js

             buyingPriceWithTax: null,
             differentSupplierTaxRate: null,
             multiplyingFactor: null,
-            priceByRefUnit:null,
-            priceByRefUnitWithTax:null
+            priceByRefUnit: null,
+            priceByRefUnitWithTax: null
         };
     },
-    computed:{
+    computed: {
         taxRateValue: function () {
-            return $('#productfamily_taxRate').find('option[value="'+this.taxRate+'"]').data('tax-rate-value');
+            return $('#productfamily_taxRate').find('option[value="' + this.taxRate + '"]').data('tax-rate-value');
         },
         supplierTaxRateValue: function () {
-            if($('#productfamily_supplierTaxRate').find('option[value="'+this.supplierTaxRate+'"]').data('tax-rate-value') == 'inherited') {
+            if ($('#productfamily_supplierTaxRate').find('option[value="' + this.supplierTaxRate + '"]').data('tax-rate-value') == 'inherited') {
                 return this.taxRateValue;
-            }else{
-                return $('#productfamily_supplierTaxRate').find('option[value="'+this.supplierTaxRate+'"]').data('tax-rate-value');
+            } else {
+                return $('#productfamily_supplierTaxRate').find('option[value="' + this.supplierTaxRate + '"]').data('tax-rate-value');
             }
         },
 
                 this.price = parseFloat(this.price.replace(',', '.')).toFixed(3);
                 this.priceWithTax = getPriceWithTax(this.price, this.taxRateValue);
             } else if (this.priceWithTax) {
-                if(typeof this.priceWithTax !="number"){
+                if (typeof this.priceWithTax != "number") {
                     this.priceWithTax = parseFloat(this.priceWithTax.replace(',', '.'));
                 }
                 this.priceWithTax = this.priceWithTax.toFixed(2);
             this.priceWithTax = this.buyingPriceValue * this.multiplyingFactor;
             this.priceUpdate('price');
         },
-        setMultiplyingFactor:function () {
-            if(this.priceWithTax || this.buyingPrice) {
+        setMultiplyingFactor: function () {
+            if (this.priceWithTax || this.buyingPrice) {
                 this.multiplyingFactor = parseFloat(this.priceWithTaxValue / this.buyingPriceValue).toFixed(3);
             }
         },
-        priceByRefUnitUpdate:function () {
-            if(this.unitArray[this.unitValue]){
-                this.priceByRefUnit = parseFloat((this.priceValue / this.quantityValue) *this.unitArray[this.unitValue].coefficient).toFixed(2);
-                this.priceByRefUnitWithTax = parseFloat((this.priceWithTaxValue / this.quantityValue )*this.unitArray[this.unitValue].coefficient).toFixed(2);
+        priceByRefUnitUpdate: function () {
+            if (this.unitCoefficient && this.quantityValue) {
+                this.priceByRefUnit = parseFloat((this.priceValue / this.quantityValue) * this.unitCoefficient).toFixed(2);
+                this.priceByRefUnitWithTax = parseFloat((this.priceWithTaxValue / this.quantityValue) * this.unitCoefficient).toFixed(2);
             }
-
         }
 
     },
-    watch: {
-
-
-    }
+    watch: {}
 
 };
 
     data() {
         return Object.assign(
             {
-                quantity:null,
-                unit: null,
-                unitArray: null
+                quantity: null,
+                unit: null
             }, window.mixinUnitValues);
     },
     computed: {
+        unitCoefficient: function () {
+            if (this.unit) {
+                unitCoefficient = $('#productfamily_unit').find('option[value="' + this.unit + '"]').data('coefficient');
+
+                return unitCoefficient;
+            } else {
+                return 0;
+            }
+        },
         unitReference: function () {
             if (this.unit) {
-                return this.unitArray[this.unit].ref
+                unitRef = $('#productfamily_unit').find('option[value="' + this.unit + '"]').data('unit-reference');
+                return unitRef;
             } else {
                 return '';
             }
         }
     }
 }
-

ShopBundle/Resources/translations/lcshop.fr.yaml

         unit: Unité & quantité
         tax: TVA
         property: Caractéristiques
+        note: Note interne
 field:
     default:
         id: Id
         deliveryPrice: Montant de la livraison
     ProductFamily:
         productsType: Type de déclinaisons
+        productsTypeHelp: 'Volume / Pods / Varieté / Parfum ...'
         buyingPrice: Prix d'achat
         multiplyingFactor: Coefficiant multiplicateur
         priceByRefUnit: Prix de vente / unité de référence
         availableQuantity: Quantité disponible
         availableQuantityDefault: Quantité disponible par défaut
-        quantity: Quantité disponible cette semaine
+        quantity: Quantité
         behaviorCountStock: Gestion du stock
         taxRate: TVA
         unit: Unité

ShopBundle/Resources/views/backend/default/block/macros.html.twig

-{% macro startCard(col, zone = "default") %}
-    <div class="col-{{ col }}">
-        <div class="card card-primary">
+{% macro startCard(col, zone = "default", card ='primary' ) %}
+    {% if col > 0 %}<div class="col-{{ col }}">{% endif %}
+        <div class="card card-{{ card }}">
             <div class="card-header">
                 <h3 class="card-title">
                     {% set label = "group."~zone %}
                     {{ label|trans({}, 'lcshop')|raw }}
                 </h3>
             </div>
-            <div class="card-body">
+            <div class="card-body row">
 {% endmacro %}
-
-{% macro endCard() %}
-            </div>
+v
+{% macro endCard(noCol = false) %}
         </div>
     </div>
+    {% if noCol == false %}</div>{% endif %}
 {% endmacro %}

ShopBundle/Resources/views/backend/default/layout.html.twig

                                             <span class="user-name">{{ _user_name }}</span>
                                         </button>
                                         <div class="dropdown-menu">
-                                            <a class="dropdown-item" href="#"><i class="fa fa-user-alt"></i> {{ "action.user.account"|trans }}</a>
+                                            <a class="dropdown-item" href="#"><i
+                                                        class="fa fa-user-alt"></i> {{ "action.user.account"|trans }}
+                                            </a>
                                             <div class="dropdown-divider"></div>
-                                            <a class="dropdown-item" href="{{ _logout_path }}"><i class="fa fa-sign-out-alt"></i> {{ "action.user.logout"|trans }}</a>
+                                            <a class="dropdown-item" href="{{ _logout_path }}"><i
+                                                        class="fa fa-sign-out-alt"></i> {{ "action.user.logout"|trans }}
+                                            </a>
                                         </div>
                                     </div>
                                 {% endblock header_custom_menu %}
                         {% endblock aside_logo %}
                         <!-- Sidebar -->
                         <div class="sidebar">
-                             <nav class="mt-2">
+                            <nav class="mt-2">
                                 <!-- Add icons to the links using the .nav-icon class with font-awesome or any other icon font library -->
                                 {% block main_menu_wrapper %}
                                     {{ include([
                     {% block content_header_wrapper %}
                         {% set _has_content_help = _entity_config is defined and _entity_config[app.request.query.get('action')]['help']|default(false) %}
                         <section class="content-header {{ _has_content_help ? 'has-content-help' }}">
+                            <div class="container-fluid">
                             {% block content_header %}
                                 <div class="d-flex flex-row justify-content-between align-content-center w-100">
                                     <div class="content-header-title">
                                     {% endif %}
                                 {% endblock content_help %}
                             {% endblock content_header %}
+                            </div>
                         </section>
                     {% endblock content_header_wrapper %}
 
                     <section id="main" class="content">
-                        {% block main %}{% endblock %}
+                        <div class="container-fluid">
+                            {% block main %}{% endblock %}
+                        </div>
                     </section>
 
                     {% block content_footer_wrapper %}
                 <div class="float-right d-none d-sm-block">
                     <b>Version</b> 1.0
                 </div>
-                <strong>Copyright © {{'now'|date('Y') }} <a href="http://laclic.fr">La Clic</a>.</strong> All rights
+                <strong>Copyright © {{ 'now'|date('Y') }} <a href="http://laclic.fr">La Clic</a>.</strong> All rights
                 reserved.
             </footer>
         </div>
         <script src="{{ asset('bundles/lcshop/js/backend/plugin/select2/select2.min.js') }}"></script>
         <!-- AdminLTE App -->
         <script src="{{ asset('bundles/lcshop/js/backend/plugin/adminlte.min.js') }}"></script>
+        <script src="{{ asset('bundles/lcshop/js/backend/script/vuejs-mixins.js') }}"></script>
 
     {% endblock body_javascript %}
 
     {% endblock body_custom_javascript %}
 
 
-
     </body>
 {% endblock body %}
 </html>

ShopBundle/Resources/views/backend/default/script.html.twig

+
+    {% block body_javascript %}
+
+        {#Initilisation des varibles requis dans le JS #}
+        <script>
+            const DOMAIN = "{{ app.request.getSchemeAndHttpHost() }}";
+        </script>
+
+        <!-- jQuery -->
+        <script src="{{ asset('bundles/lcshop/js/backend/plugin/jquery/jquery.min.js') }}"></script>
+        <!-- Bootstrap 4 -->
+        <script src="{{ asset('bundles/lcshop/js/backend/plugin/bootstrap/bootstrap.bundle.min.js') }}"></script>
+        <script src="{{ asset('bundles/lcshop/js/backend/plugin/toastr/toastr.min.js') }}"></script>
+        <script src="{{ asset('bundles/lcshop/js/backend/plugin/select2/select2.min.js') }}"></script>
+        <!-- AdminLTE App -->
+        <script src="{{ asset('bundles/lcshop/js/backend/plugin/adminlte.min.js') }}"></script>
+
+    {% endblock body_javascript %}
+
+    {% block body_custom_javascript %}
+        {% for js_asset in easyadmin_config('design.assets.js') %}
+            <script src="{{ asset(js_asset) }}"></script>
+        {% endfor %}
+    {% endblock body_custom_javascript %}
+
+{% block body_js %}{% endblock %}

ShopBundle/Resources/views/backend/productfamily/form.html.twig

 {{ form_start(form, {"attr": {'@change' : 'formUpdated'}}) }}
+{% import '@LcShop/backend/default/block/macros.html.twig' as macros %}
 
 <div id="lc-product-family-edit">
     <div class="card card-light">
     <div class="form ">
 
         <script>// rendered by server
-            window.mixinUnitValues = {
-                unitArray: {{ getUnitsList()|json_encode|raw }}
-            }
+
             window.appProductFamilyValues = {
                 {% if form.vars.value.title %}title: "{{ form.vars.value.title }}",{% endif %}
                 {% if form.behaviorCountStock.vars.value %}behaviorCountStock: "{{ form.behaviorCountStock.vars.value }}",{% endif %}
             }
         </script>
 
+
         <div v-show="currentSection == 'general'" class="panel panel-default">
             {% include '@LcShop/backend/productfamily/panel_general.html.twig' %}
 
         </div>
 
         <div v-show="currentSection == 'note'" class="panel panel-default">
-            <div class="row" id="lc-app-unit">
-                <div class="field-group col-12">
-                    <div class="card card-light">
-                        <div class="card-header">
-                            <h3 class="card-title">{{ "form.group.ProductFamily.note"|trans }}</h3>
-                        </div>
-                        <div class="card-body">
-                            {{ form_row(form.note) }}
-                        </div>
-                    </div>
-
-                </div>
+            <div class="row">
+                {{ macros.startCard(12, 'ProductFamily.note', 'light') }}
+                    {{ form_row(form.note) }}
+                {{ macros.endCard() }}
             </div>
         </div>
         <div class="row">
-            <div class="field-group col-12">
-                <div class="card card-light">
-                    <div class="card-header">
-                        <h3 class="card-title">{{ "form.group.ProductFamily.note"|trans }}</h3>
-                    </div>
-                    <div class="card-body">
-                        {{ entity.note|raw }}
-                    </div>
-
-                </div>
-            </div>
+            {{ macros.startCard(12, 'ProductFamily.note', 'light') }}
+                {{ entity.note|raw }}
+            {{ macros.endCard() }}
         </div>
 
     </div>

ShopBundle/Resources/views/backend/productfamily/panel_general.html.twig

 {% trans_default_domain 'lcshop' %}
+
+{% import '@LcShop/backend/default/block/macros.html.twig' as macros %}
+
 <div class="row">
-    <div class="field-group col-8">
-        <div class="card card-light">
-            <div class="card-header">
-                <h3 class="card-title">{{ "form.group.ProductFamily.main"|trans }}</h3>
-            </div>
-            <div class="card-body row">
-                <div class="col-12">
-                    {{ form_row(form.supplier) }}
-                </div>
-                <div class="col-12">
-                    {{ form_row(form.title, {"attr" : {"v-model" : "title"}}) }}
-                </div>
-                <div class="col-12">
-                    {{ form_row(form.subtitle) }}
-                </div>
-                <div class="col-12">
-                    {{ form_row(form.image) }}
-                </div>
-                <div class="col-12">
-                    {{ form_row(form.description) }}
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="field-group col-4" id="product-categories">
-        <div class="card card-light">
-            <div class="card-header">
-                <h3 class="card-title">{{ "form.group.ProductFamily.products"|trans }}</h3>
-            </div>
-            <div class="card-body">
-                {{ form_row(form.activeProducts, {"attr": {"v-model": 'activeProducts'}}) }}
+    {{ macros.startCard(8, 'ProductFamily.main','light') }}
+    <div class="col-12">
+        {{ form_row(form.supplier) }}
+    </div>
+    <div class="col-12">
+        {{ form_row(form.title, {"attr" : {"v-model" : "title"}}) }}
+    </div>
+    <div class="col-12">
+        {{ form_row(form.subtitle) }}
+    </div>
+    <div class="col-12">
+        {{ form_row(form.image) }}
+    </div>
+    <div class="col-12">
+        {{ form_row(form.description) }}
+    </div>
 
-                <div v-show="activeProducts == true">
-                    {{ form_row(form.productsType) }}
-                </div>
-            </div>
-        </div>
+    {{ macros.endCard() }}
+    {{ macros.startCard(4, 'ProductFamily.products','light') }}
+    <div class="col-12">
+        {{ form_row(form.activeProducts, {"attr": {"v-model": 'activeProducts'}}) }}
+    </div>
+    <div class="col-12" v-show="activeProducts == true">
+        {{ form_row(form.productsType) }}
+    </div>
 
-        <div class="card card-light">
-            <div class="card-header">
-                <h3 class="card-title">{{ "form.group.ProductFamily.categories"|trans }}</h3>
-            </div>
+    {{ macros.endCard(true) }}
+    {{ macros.startCard(0, 'ProductFamily.categories','light') }}
 
-            <div class="card-body">
-                {% for category in categories %}
-                    {% set child = 'category_' ~ category.id %}
-                    {{ form_row(attribute(form.productCategories, child)) }}
+    <div class="col-12">
+        {% for category in categories %}
+            {% set child = 'category_' ~ category.id %}
+            {{ form_row(attribute(form.productCategories, child)) }}
 
-                    {% for children in category.childrens %}
-                        <div class="children">
-                            {% set child = 'category_children_' ~ children.id %}
-                            {{ form_row(attribute(form.productCategories, child), {attrs: {class: 'test'}}) }}
-                        </div>
-                    {% endfor %}
-                {% endfor %}
-            </div>
-        </div>
+            {% for children in category.childrens %}
+                <div class="children">
+                    {% set child = 'category_children_' ~ children.id %}
+                    {{ form_row(attribute(form.productCategories, child), {attrs: {class: 'test'}}) }}
+                </div>
+            {% endfor %}
+        {% endfor %}
     </div>
+    {{ macros.endCard() }}
 </div>

ShopBundle/Resources/views/backend/productfamily/panel_price.html.twig

 {% trans_default_domain 'lcshop' %}
+{% import '@LcShop/backend/default/block/macros.html.twig' as macros %}
 
 <product-unit-price ref="productUnitPrice" inline-template key-form="productfamily">
     <div class="row">
-        <div class=" field-group col-4">
-            <div class="card card-light">
-                <div class="card-header">
-                    <h3 class="card-title">{{ "form.group.ProductFamily.unit"|trans }}</h3>
-                </div>
-                <div class="card-body row">
-                    <div class="col-12">
-                        {{ form_row(form.unit, {"attr":{'v-model': 'unit', '@change': "priceByRefUnitUpdate"}}) }}
-                    </div>
+        {{ macros.startCard(4, 'ProductFamily.unit','light') }}
+        <div class="col-12">
+            {{ form_row(form.unit, {"attr":{'v-model': 'unit', '@change': "priceByRefUnitUpdate"}}) }}
+        </div>
 
-                    <div class="col-12">
-                        <div class="form-group field-weight">
-                            {{ form_label(form.quantity) }}
-                            <div class="form-widget">
-                                <div class="input-group">
-                                    {{ form_widget(form.quantity, {'attr' : {'v-model': 'quantity', '@change': "priceByRefUnitUpdate"}}) }}
-                                    <div class="input-group-append">
-                                        <span class="input-group-text">${ unit }</span>
-                                    </div>
-                                </div>
-                                {{ form_help(form.quantity) }}
-                            </div>
+        <div class="col-12">
+            <div class="form-group field-weight">
+                {{ form_label(form.quantity) }}
+                <div class="form-widget">
+                    <div class="input-group">
+                        {{ form_widget(form.quantity, {'attr' : {'v-model': 'quantity', '@change': "priceByRefUnitUpdate"}}) }}
+                        <div class="input-group-append">
+                            <span class="input-group-text">${ unit }</span>
                         </div>
                     </div>
-
-                </div>
-            </div>
-
-            <div class="card card-light">
-                <div class="card-header">
-                    <h3 class="card-title">{{ "form.group.ProductFamily.tax"|trans }}</h3>
-                </div>
-                <div class="card-body row">
-                    <div class="col-12">
-                        {{ form_row(form.taxRate, {'attr': {'v-model':'taxRate'}}) }}
-                    </div>
-                    <div class="col-12">
-                        {{ form_row(form.differentSupplierTaxRate, {'attr': {'v-model':'differentSupplierTaxRate'}}) }}
-                    </div>
-                    <div class="col-12" v-show="differentSupplierTaxRate == true">
-                        {{ form_row(form.supplierTaxRate, {'attr': {'v-model':'supplierTaxRate'}}) }}
-                    </div>
+                    {{ form_help(form.quantity) }}
                 </div>
             </div>
+        </div>
 
+        {{ macros.endCard(true) }}
 
+        {{ macros.startCard(0, 'ProductFamily.tax','light') }}
+        <div class="col-12">
+            {{ form_row(form.taxRate, {'attr': {'v-model':'taxRate'}}) }}
+        </div>
+        <div class="col-12">
+            {{ form_row(form.differentSupplierTaxRate, {'attr': {'v-model':'differentSupplierTaxRate'}}) }}
+        </div>
+        <div class="col-12" v-show="differentSupplierTaxRate == true">
+            {{ form_row(form.supplierTaxRate, {'attr': {'v-model':'supplierTaxRate'}}) }}
         </div>
 
-        <div class="field-group col-8">
-            <div class="card card-light ">
-                <div class="card-header">
-                    <h3 class="card-title">{{ "form.group.ProductFamily.price"|trans }}</h3>
-                </div>
-                <div class="card-body">
+        {{ macros.endCard() }}
 
-                    <div class="form-group field-price row">
-                        <div class="col-12">
-                            {{ form_label(form.buyingPrice) }}
-                        </div>
-                        <div class="col-6">
-                            <div class="form-widget">
-                                <div class="input-group">
-                                    {{ form_widget(form.buyingPrice, {'attr' : {'v-model': 'buyingPrice', '@change' : 'changeBuyingPriceWithTax'}}) }}
-                                    <div class="input-group-append">
-                                        <span class="input-group-text">€ HT {#${ unitReference }#}</span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-6">
-                            <div class="form-widget">
-                                <div class="input-group">
-                                    {{ form_widget(form.buyingPriceWithTax, {'attr' : {'v-model': 'buyingPriceWithTax', '@change' : 'changeBuyingPrice'}}) }}
-                                    <div class="input-group-append">
-                                        <span class="input-group-text">€ TTC</span>
-                                    </div>
-                                </div>
+        {{ macros.startCard(8, 'ProductFamily.price','light') }}
+        <div class="form-group field-price col-12">
+            <div class="row">
+                <div class="col-12">
+                    {{ form_label(form.buyingPrice) }}
+                </div>
+                <div class="col-6">
+                    <div class="form-widget">
+                        <div class="input-group">
+                            {{ form_widget(form.buyingPrice, {'attr' : {'v-model': 'buyingPrice', '@change' : 'changeBuyingPriceWithTax'}}) }}
+                            <div class="input-group-append">
+                                <span class="input-group-text">€ HT {#${ unitReference }#}</span>
                             </div>
                         </div>
                     </div>
-                    <div class="row">
-                        <div class="col-10 align-content-center">
-                            {{ form_row(form.multiplyingFactor, {'attr': {'v-model':'multiplyingFactor', '@change' : 'updateMultiplyingFactor'}}) }}
+                </div>
+                <div class="col-6">
+                    <div class="form-widget">
+                        <div class="input-group">
+                            {{ form_widget(form.buyingPriceWithTax, {'attr' : {'v-model': 'buyingPriceWithTax', '@change' : 'changeBuyingPrice'}}) }}
+                            <div class="input-group-append">
+                                <span class="input-group-text">€ TTC</span>
+                            </div>
                         </div>
                     </div>
+                </div>
+            </div>
+        </div>
+        <div class="form-group field-price col-12">
+            <div class="row">
+                <div class="col-10 align-content-center">
+                    {{ form_row(form.multiplyingFactor, {'attr': {'v-model':'multiplyingFactor', '@change' : 'updateMultiplyingFactor'}}) }}
+                </div>
+            </div>
+        </div>
 
 
-                    <div class="form-group field-price row">
-                        <div class="col-12">
-                            {{ form_label(form.price) }}
-                        </div>
-                        <div class="col-6">
-                            <div class="form-widget">
-                                <div class="input-group">
-                                    {{ form_widget(form.price, {'attr' : {'v-model': 'price', '@change' : 'changePriceWithTax'}}) }}
-                                    <div class="input-group-append">
-                                        <span class="input-group-text">€ HT</span>
-                                    </div>
-                                </div>
+        <div class="form-group field-price col-12">
+            <div class="row">
+                <div class="col-12">
+                    {{ form_label(form.price) }}
+                </div>
+                <div class="col-6">
+                    <div class="form-widget">
+                        <div class="input-group">
+                            {{ form_widget(form.price, {'attr' : {'v-model': 'price', '@change' : 'changePriceWithTax'}}) }}
+                            <div class="input-group-append">
+                                <span class="input-group-text">€ HT</span>
                             </div>
                         </div>
-                        <div class="col-6">
-                            <div class="input-group">
-                                {{ form_widget(form.priceWithTax, {'attr' : {'v-model': 'priceWithTax', '@change' : 'changePrice'}}) }}
-                                <div class="input-group-append">
-                                    <span class="input-group-text">€ TTC</span>
-                                </div>
-                            </div>
+                    </div>
+                </div>
+                <div class="col-6">
+                    <div class="input-group">
+                        {{ form_widget(form.priceWithTax, {'attr' : {'v-model': 'priceWithTax', '@change' : 'changePrice'}}) }}
+                        <div class="input-group-append">
+                            <span class="input-group-text">€ TTC</span>
                         </div>
                     </div>
+                </div>
+            </div>
+        </div>
 
 
-                    <div class="form-group field-price row" v-show="unit != 'piece'">
-                        <div class="col-12">
-                            {{ form_label(form.priceByRefUnit) }}
-                        </div>
-                        <div class="col-6">
-                            <div class="form-widget">
-                                <div class="input-group">
-                                    {{ form_widget(form.priceByRefUnit, {'attr' : {'v-model': 'priceByRefUnit', 'readonly':'readonly'}}) }}
-                                    <div class="input-group-append">
-                                        <span class="input-group-text">€ HT / ${ unitReference }</span>
-                                    </div>
-                                </div>
+        <div class="form-group field-price col-12" v-show="unit != 'piece'">
+            <div class="row">
+                <div class="col-12">
+                    {{ form_label(form.priceByRefUnit) }}
+                </div>
+                <div class="col-6">
+                    <div class="form-widget">
+                        <div class="input-group">
+                            {{ form_widget(form.priceByRefUnit, {'attr' : {'v-model': 'priceByRefUnit', 'readonly':'readonly'}}) }}
+                            <div class="input-group-append">
+                                <span class="input-group-text">€ HT / ${ unitReference }</span>
                             </div>
                         </div>
-                        <div class="col-6">
-                            <div class="input-group">
-                                {{ form_widget(form.priceByRefUnitWithTax, {'attr' : {'v-model': 'priceByRefUnitWithTax','readonly':'readonly'}}) }}
-                                <div class="input-group-append">
-                                    <span class="input-group-text">€ TTC / ${ unitReference }</span>
-                                </div>
-                            </div>
+                    </div>
+                </div>
+                <div class="col-6">
+                    <div class="input-group">
+                        {{ form_widget(form.priceByRefUnitWithTax, {'attr' : {'v-model': 'priceByRefUnitWithTax','readonly':'readonly'}}) }}
+                        <div class="input-group-append">
+                            <span class="input-group-text">€ TTC / ${ unitReference }</span>
                         </div>
                     </div>
-
                 </div>
             </div>
         </div>
+        {{ macros.endCard() }}
+
     </div>
 </product-unit-price>

ShopBundle/Resources/views/backend/productfamily/panel_products.html.twig

+{% import '@LcShop/backend/default/block/macros.html.twig' as macros %}
+
 {% macro printProductRow(product) %}
 
     <tr class="lc-draggable">
         </td>
     </tr>
 {% endmacro %}
-            {% import _self as formMacros %}
-<div class="card card-light">
-    <div class="card-header">
-        <h3 class="card-title">{{ "form.group.ProductFamily.products"|trans }}</h3>
-    </div>
-    <div class="card-body">
 
-        <table class="table datagrid sortable lc-sortable-products  products-collection-table"
-               :data-index="formProductArray.length"
-               data-prototype="{{ formMacros.printProductRow(form.products.vars.prototype)|e('html_attr') }}">
-            <thead>
-            <tr>
-                <th>
-                </th>
-                <th colspan="3" class="string">
-                    Titre
-                </th>
-                <th colspan="1" class="string ">
-                    Quantité
-                </th>
-                <th colspan="2" class="quantity">
-                    Unité
-                </th>
-                <th colspan="2" class="price">
-                    PA HT
-                </th>
-                <th colspan="2" class="price">
-                    PA TTC
-                </th>
-                <th colspan="2" class="">
-                    Coef
-                </th>
-                <th colspan="2" class="price">
-                    PV HT
-                </th>
-                <th colspan="2" class="price">
-                    PV TTC
-                </th>
-                <th colspan="2" class="priceByRefUnit">
-                    PV HT / ${ getUnitReference() }
-                </th>
-                <th colspan="2" class="priceByRefUnit">
-                    PV TTC / ${ getUnitReference() }
-                </th>
+{% import _self as formMacros %}
 
-                <th class="stock">
-                    Stock
-                </th>
-                <th class="stock">
-                    Stock par défaut
-                </th>
-                <th colspan="2" class="">
-                    DLC
-                </th>
-                <th class="">
-                    Action
-                </th>
-            </tr>
-            </thead>
-            <tbody class="products-collection">
+ {{ macros.startCard(12, 'ProductFamily.products', 'light') }}
+<div class="col-12">
+    <table class="table datagrid sortable lc-sortable-products  products-collection-table"
+           :data-index="formProductArray.length"
+           data-prototype="{{ formMacros.printProductRow(form.products.vars.prototype)|e('html_attr') }}">
+        <thead>
+        <tr>
+            <th>
+            </th>
+            <th colspan="3" class="string">
+                Titre
+            </th>
+            <th colspan="1" class="string ">
+                Quantité
+            </th>
+            <th colspan="2" class="quantity">
+                Unité
+            </th>
+            <th colspan="2" class="price">
+                PA HT
+            </th>
+            <th colspan="2" class="price">
+                PA TTC
+            </th>
+            <th colspan="2" class="">
+                Coef
+            </th>
+            <th colspan="2" class="price">
+                PV HT
+            </th>
+            <th colspan="2" class="price">
+                PV TTC
+            </th>
+            <th colspan="2" class="priceByRefUnit">
+                PV HT / ${ getUnitReference() }
+            </th>
+            <th colspan="2" class="priceByRefUnit">
+                PV TTC / ${ getUnitReference() }
+            </th>
 
-            <template v-for="(formProduct, key) in formProductArray">
+            <th class="stock">
+                Stock
+            </th>
+            <th class="stock">
+                Stock par défaut
+            </th>
+            <th colspan="2" class="">
+                DLC
+            </th>
+            <th class="">
+                Action
+            </th>
+        </tr>
+        </thead>
+        <tbody class="products-collection">
 
-                <product-form ref="productForm" v-bind:product-family="productFamily" :template="formProduct"
-                              :key-form="key"></product-form>
-            </template>
+        <template v-for="(formProduct, key) in formProductArray">
 
-            </tbody>
-        </table>
-        <button type="button" class="add_tag_link btn-add-product btn btn-default" @click="addProductForm"><span
-                    class="fa fa-plus"></span> Ajouter une déclinaison
-        </button>
-        <div class="clearfix"></div>
-        <script>
-            window.productForm = new Array();
-        </script>
+            <product-form ref="productForm" v-bind:product-family="productFamily" :template="formProduct"
+                          :key-form="key"></product-form>
+        </template>
 
-        {% for keyForm,i in sortableProductsField %}
-            {% set product = form.products[i] %}
-            <script>
-                window.productForm[{{ keyForm }}] = {
-                    {% if product.vars.value.title %}title: "{{ product.vars.value.title }}",{% endif %}
-                    {% if product.vars.value.quantity %}quantity: "{{ product.vars.value.quantity }}",{% endif %}
-                    {% if product.vars.value.unit %}unit: "{{ product.vars.value.unit }}",{% endif %}
-                    {% if product.vars.value.buyingPrice %}buyingPrice: "{{ product.vars.value.buyingPrice }}",{% endif %}
-                    {% if product.vars.value.price %}price: parseFloat({{ product.vars.value.price }}).toFixed(3),{% endif %}
-                    {% if product.vars.value.availableQuantity %}availableQuantity: parseInt({{ product.vars.value.availableQuantity }}){% endif %}
-                    {% if product.vars.value.availableQuantityDefault %}availableQuantityDefault: parseInt({{ product.vars.value.availableQuantityDefault }}){% endif %}
-                    {% if product.vars.value.expirationDate %}expirationDate: {{ product.vars.value.expirationDate }}{% endif %}
-                };
-                jQuery(window).on('load', function () {
-                    var formProduct = '{{ formMacros.printProductRow(product)|replace({"\n":' ', "\r":' ', "'" : "\\'"})|raw }}';
+        </tbody>
+    </table>
+    <button type="button" class="add_tag_link btn-add-product btn btn-default" @click="addProductForm"><span
+                class="fa fa-plus"></span> Ajouter une déclinaison
+    </button>
+    <div class="clearfix"></div>
 
-                    appProductFamily.formProductArray.push(formProduct);
-                    appProductFamily.indexFormProduct++;
-                });
-            </script>
+    {{ macros.endCard() }}
+    {% do form.products.setRendered %}
 
-        {% endfor %}
-    </div>
-</div>
+    <script>
+        window.productForm = new Array();
+        window.formProductTemplate = new Array();
 
-{% do form.products.setRendered %}
+        {% for keyForm,i in sortableProductsField %}
+        {% set product = form.products[i] %}
 
+        window.productForm[{{ keyForm }}] = {
+            {% if product.vars.value.title %}title: "{{ product.vars.value.title }}",{% endif %}
+            {% if product.vars.value.quantity %}quantity: "{{ product.vars.value.quantity }}",{% endif %}
+            {% if product.vars.value.unit %}unit: "{{ product.vars.value.unit }}",{% endif %}
+            {% if product.vars.value.buyingPrice %}buyingPrice: "{{ product.vars.value.buyingPrice }}",{% endif %}
+            {% if product.vars.value.price %}price: parseFloat({{ product.vars.value.price }}).toFixed(3),{% endif %}
+            {% if product.vars.value.availableQuantity %}availableQuantity: parseInt({{ product.vars.value.availableQuantity }}),{% endif %}
+            {% if product.vars.value.availableQuantityDefault %}availableQuantityDefault: parseInt({{ product.vars.value.availableQuantityDefault }}),{% endif %}
+            {% if product.vars.value.expirationDate %}expirationDate: "{{ product.vars.value.expirationDate|date('d/m/Y') }}"{% endif %}
+        };
+        window.formProductTemplate[{{ keyForm }}] = '{{ formMacros.printProductRow(product)|replace({"\n":' ', "\r":' ', "'" : "\\'"})|raw }}';
+        {% endfor %}
+    </script>
+</div>

ShopBundle/Resources/views/backend/productfamily/panel_property.html.twig

 {% trans_default_domain 'lcshop' %}
-<div class="row">
-    <div class="field-group col-7">
-        <div class="card card-light">
-            <div class="card-header">
-                <h3 class="card-title">{{ "form.group.ProductFamily.property"|trans }}</h3>
-            </div>
-            <div class="card-body">
-                <div class="col-5">
-                    {{ form_row(form.isNovelty, {'attr': {'v-model':'isNovelty'}}) }}
-                </div>
-                <div class="col-7" v-show="isNovelty==true">
-                    {{ form_row(form.noveltyExpirationDate) }}
-                </div>
+{% import '@LcShop/backend/default/block/macros.html.twig' as macros %}
 
-                <div class="col-5">
-                    {{ form_row(form.isOrganic, {'attr': {'v-model':'isOrganic'}}) }}
-                </div>
-                <div class="col-7" v-show="isOrganic==true">
-                    {{ form_row(form.organicLabel) }}
-                </div>
+<div class="row">
+    {{ macros.startCard(7, 'ProductFamily.property', 'light') }}
 
-                <div class="col">
-                    {{ form_row(form.largeVolume) }}
-                </div>
+    <div class="col-12">
+        <div class="row">
+            <div class="col-5">
+                {{ form_row(form.isNovelty, {'attr': {'v-model':'isNovelty'}}) }}
+            </div>
+            <div class="col-7" v-show="isNovelty==true">
+                {{ form_row(form.noveltyExpirationDate) }}
             </div>
         </div>
     </div>
-    <div class="field-group col-5">
-        <div class="card card-light">
-            <div class="card-header">
-                <h3 class="card-title">{{ "form.group.ProductFamily.property"|trans }}</h3>
+
+
+    <div class="col-12">
+        <div class="row">
+            <div class="col-5">
+                {{ form_row(form.isOrganic, {'attr': {'v-model':'isOrganic'}}) }}
             </div>
-            <div class="card-body">
-                <div class="col">
-                    {{ form_row(form.expirationDate, {'attr': {'v-model':'expirationDate'}}) }}
-                </div>
+            <div class="col-7" v-show="isOrganic==true">
+                {{ form_row(form.organicLabel) }}
             </div>
         </div>
     </div>
+    <div class="col-12">
+
+        {{ form_row(form.largeVolume) }}
+
+    </div>
+    {{ macros.endCard() }}
+    {{ macros.startCard(5, 'ProductFamily.property', 'light') }}
+    <div class="col">
+        {{ form_row(form.expirationDate, {'attr': {'v-model':'expirationDate'}}) }}
+    </div>
+    {{ macros.endCard() }}
 </div>

ShopBundle/Resources/views/backend/productfamily/panel_stock.html.twig

 {% trans_default_domain 'lcshop' %}
 
 
-<div class="field-group col-12">
+{% import '@LcShop/backend/default/block/macros.html.twig' as macros %}
+<div class="row">
+    {{ macros.startCard(12, 'ProductFamily.stock', 'light') }}
 
-    <div class="card card-light">
-        <div class="card-header">
-            <h3 class="card-title">{{ "form.group.ProductFamily.stock"|trans }}</h3>
-        </div>
-        <div class="card-body row">
-            <div class="col">
-                {{ form_label(form.behaviorCountStock) }}
-                {% for field in form.behaviorCountStock %}
-                    {% if field.vars.value == "by-product" %}
-                        <div v-if="activeProducts == true">
-                            {{ form_widget(field, {"attr" : {"v-model" : 'behaviorCountStock'}}) }}
-                        </div>
-                    {% else %}
-                        {{ form_widget(field, {"attr" : {"v-model" : 'behaviorCountStock'}}) }}
-                    {% endif %}
-                {% endfor %}
-            </div>
-            <div class="col">
-                <div v-show="behaviorCountStock == 'by-product-family' || behaviorCountStock == 'by-quantity'"
-                     class="form-group">
-                    {{ form_label(form.availableQuantity) }}
-                    <div class="form-widget">
-                        <div class="input-group">
-                            {{ form_widget(form.availableQuantity) }}
-                            <div v-show="behaviorCountStock == 'by-quantity'" class="input-group-append">
-                                <span class="input-group-text">${ getUnitReference() }</span>
-                            </div>
-                        </div>
-                        {{ form_help(form.availableQuantity) }}
+    <div class="col">
+        {{ form_label(form.behaviorCountStock) }}
+        {% for field in form.behaviorCountStock %}
+            {% if field.vars.value == "by-product" %}
+                <div v-if="activeProducts == true">
+                    {{ form_widget(field, {"attr" : {"v-model" : 'behaviorCountStock'}}) }}
+                </div>
+            {% else %}
+                {{ form_widget(field, {"attr" : {"v-model" : 'behaviorCountStock'}}) }}
+            {% endif %}
+        {% endfor %}
+    </div>
+    <div class="col">
+        <div v-show="behaviorCountStock == 'by-product-family' || behaviorCountStock == 'by-quantity'"
+             class="form-group">
+            {{ form_label(form.availableQuantity) }}
+            <div class="form-widget">
+                <div class="input-group">
+                    {{ form_widget(form.availableQuantity) }}
+                    <div v-show="behaviorCountStock == 'by-quantity'" class="input-group-append">
+                        <span class="input-group-text">${ getUnitReference() }</span>
                     </div>
+                </div>
+                {{ form_help(form.availableQuantity) }}
+            </div>
 
-                    {{ form_label(form.availableQuantityDefault) }}
-                    <div class="form-widget">
-                        <div class="input-group">
-                            {{ form_widget(form.availableQuantityDefault) }}
-                            <div v-show="behaviorCountStock == 'by-quantity'" class="input-group-append">
-                                <span class="input-group-text">${ getUnitReference() }</span>
-                            </div>
-                        </div>
-                        {{ form_help(form.availableQuantityDefault) }}
+            {{ form_label(form.availableQuantityDefault) }}
+            <div class="form-widget">
+                <div class="input-group">
+                    {{ form_widget(form.availableQuantityDefault) }}
+                    <div v-show="behaviorCountStock == 'by-quantity'" class="input-group-append">
+                        <span class="input-group-text">${ getUnitReference() }</span>
                     </div>
                 </div>
+                {{ form_help(form.availableQuantityDefault) }}
             </div>
         </div>
+
     </div>
-</div>
 
+    {{ macros.endCard() }}
+
+</div>