Structure de base de la nouvelle page de commande (assets, controller, view)

producer/assets/VuejsOrderOrderAsset.php

+<?php
+/** 
+Copyright La boîte à pain (2018) 
+
+contact@laboiteapain.net
+
+Ce logiciel est un programme informatique servant à aider les producteurs 
+à distribuer leur production en circuits courts. 
+
+Ce logiciel est régi par la licence CeCILL soumise au droit français et
+respectant les principes de diffusion des logiciels libres. Vous pouvez
+utiliser, modifier et/ou redistribuer ce programme sous les conditions
+de la licence CeCILL telle que diffusée par le CEA, le CNRS et l'INRIA 
+sur le site "http://www.cecill.info".
+
+En contrepartie de l'accessibilité au code source et des droits de copie,
+de modification et de redistribution accordés par cette licence, il n'est
+offert aux utilisateurs qu'une garantie limitée.  Pour les mêmes raisons,
+seule une responsabilité restreinte pèse sur l'auteur du programme,  le
+titulaire des droits patrimoniaux et les concédants successifs.
+
+A cet égard  l'attention de l'utilisateur est attirée sur les risques
+associés au chargement,  à l'utilisation,  à la modification et/ou au
+développement et à la reproduction du logiciel par l'utilisateur étant 
+donné sa spécificité de logiciel libre, qui peut le rendre complexe à 
+manipuler et qui le réserve donc à des développeurs et des professionnels
+avertis possédant  des  connaissances  informatiques approfondies.  Les
+utilisateurs sont donc invités à charger  et  tester  l'adéquation  du
+logiciel à leurs besoins dans des conditions permettant d'assurer la
+sécurité de leurs systèmes et ou de leurs données et, plus généralement, 
+à l'utiliser et l'exploiter dans les mêmes conditions de sécurité. 
+
+Le fait que vous puissiez accéder à cet en-tête signifie que vous avez 
+pris connaissance de la licence CeCILL, et que vous en avez accepté les
+termes.
+*/
+
+namespace producer\assets;
+
+use yii\web\AssetBundle;
+use yii ;
+
+/**
+ * @author Qiang Xue <qiang.xue@gmail.com>
+ * @since 2.0
+ */
+class VuejsOrderOrderAsset extends \common\components\MyAssetBundle
+{
+    public $basePath = '@webroot';
+    public $baseUrl = '@web';
+    public $css = [];
+    public $js = [];
+    public $depends = [
+        'common\assets\CommonAsset'
+    ];
+    
+    public function __construct() 
+    {
+        parent::__construct() ;
+        $this->addAsset('js','js/vuejs/order-order.js') ;
+    }
+}

producer/controllers/OrderController.php

             ],
         ];
     }
+    
+    public function actionOrder() 
+    {
+        return $this->render('order') ;
+    }
 
     /**
      * Retourne au format JSON toutes les informations relatives à une 

producer/views/order/order.php

+<?php
+
+/** 
+Copyright La boîte à pain (2018) 
+
+contact@laboiteapain.net
+
+Ce logiciel est un programme informatique servant à aider les producteurs 
+à distribuer leur production en circuits courts. 
+
+Ce logiciel est régi par la licence CeCILL soumise au droit français et
+respectant les principes de diffusion des logiciels libres. Vous pouvez
+utiliser, modifier et/ou redistribuer ce programme sous les conditions
+de la licence CeCILL telle que diffusée par le CEA, le CNRS et l'INRIA 
+sur le site "http://www.cecill.info".
+
+En contrepartie de l'accessibilité au code source et des droits de copie,
+de modification et de redistribution accordés par cette licence, il n'est
+offert aux utilisateurs qu'une garantie limitée.  Pour les mêmes raisons,
+seule une responsabilité restreinte pèse sur l'auteur du programme,  le
+titulaire des droits patrimoniaux et les concédants successifs.
+
+A cet égard  l'attention de l'utilisateur est attirée sur les risques
+associés au chargement,  à l'utilisation,  à la modification et/ou au
+développement et à la reproduction du logiciel par l'utilisateur étant 
+donné sa spécificité de logiciel libre, qui peut le rendre complexe à 
+manipuler et qui le réserve donc à des développeurs et des professionnels
+avertis possédant  des  connaissances  informatiques approfondies.  Les
+utilisateurs sont donc invités à charger  et  tester  l'adéquation  du
+logiciel à leurs besoins dans des conditions permettant d'assurer la
+sécurité de leurs systèmes et ou de leurs données et, plus généralement, 
+à l'utiliser et l'exploiter dans les mêmes conditions de sécurité. 
+
+Le fait que vous puissiez accéder à cet en-tête signifie que vous avez 
+pris connaissance de la licence CeCILL, et que vous en avez accepté les
+termes.
+*/
+
+\producer\assets\VuejsOrderOrderAsset::register($this);
+
+$this->setTitle('Commander') ;
+
+?>
+
+<div id="app-order-order">
+    <div class="col-md-4">
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                Récapitulatif
+            </div>
+            <div class="panel-body">
+                {{ date }}
+            </div>
+        </div>
+        
+    </div>
+    <div class="col-md-8">
+        <v-date-picker
+            is-inline
+            is-expanded
+            v-model="date"
+            mode="single"
+            :formats="calendar.formats"
+            :theme-styles="calendar.themeStyles"
+            :attributes="calendar.attrs"
+            @dayclick='dayClick'>
+        ></v-date-picker> 
+    </div>
+</div>

producer/web/js/vuejs/order-order.js

+
+var app = new Vue({
+    el: '#app-order-order',
+    data: {
+        date: null,
+        calendar: {
+            mode: 'single',
+            attrs: [],
+            themeStyles: {
+                wrapper: {
+                    background: '#BB8757',
+                    color: '#fafafa',
+                },
+                header: {
+                    padding: '10px 10px',
+                },
+                headerHorizontalDivider: {
+                    borderTop: 'solid rgba(255, 255, 255, 0.2) 1px',
+                    width: '80%',
+                },
+                weekdays: {
+                    color: 'white', 
+                    fontWeight: '600', 
+                    padding: '10px 10px',
+                    fontSize: '2rem'
+                },
+                weeks: {
+                    padding: '0 15px 15px 15px',
+                },
+                dayContent: function(object) {
+                    var style = {
+                        fontSize: '2rem',
+                        padding: '16px',
+                    };
+                    
+                    if(object.isHovered || object.isFocus) {
+                        style.backgroundColor = '#F39C12' ;
+                    }
+                    
+                    return style ;
+                },
+            },
+            formats: {
+                dayPopover: 'DD/MM/YYYY'
+            }
+        },
+    },
+    methods: {
+        dayClick: function() {
+            
+        }
+    }
+});