Système de commentaires pour les points de vente (boites à pain)

Le boulanger peut spécifier un commentaire pour chaque utilisateur sélectionné dans les points de vente à accès restreint. L'utilisateur retrouve ce commentaire au niveau du choix des points de vente et dans le récapitulatif des commandes. Le boulanger, quant à lui, retrouve ce commentaire dans l'export des commandes en PDF.

backend/controllers/CommandeController.php

@@ -64,7 +64,7 @@ class CommandeController extends BackendController {
            $id_etablissement = Yii::$app->user->identity->id_etablissement ;
         
         $commandes = Commande::find()
-                ->with('commandeProduits', 'user', 'creditHistorique')
+                ->with('commandeProduits', 'user', 'creditHistorique', 'pointVente')
                 ->joinWith('production')
                 ->where(['production.date' => $date])
                 ->andWhere(['production.id_etablissement' => $id_etablissement])

backend/controllers/PointVenteController.php

@@ -106,6 +106,7 @@ class PointVenteController extends BackendController
         foreach($model->pointVenteUser as $u)
         {
             $model->users[] = $u->id_user ;
+            $model->users_commentaire[$u->id_user] = $u->commentaire ;
         }
         
         if ($model->load(Yii::$app->request->post()) && $model->save()) {

backend/views/commande/report.php

@@ -36,6 +36,11 @@ foreach ($points_vente as $pv) {
                         $str_user = $c->username; //.' - '.date('d/m', strtotime($c->date)) ;
                     }
                     
+                    if(strlen($c->commentaire_point_vente)) 
+                    {
+                        $str_user .= '<br /><em>'.$c->commentaire_point_vente.'</em>' ;
+                    }
+                    
                     // téléphone
                     if (isset($c->user) && strlen($c->user->telephone)) {
                         $str_user .= '<br />' . $c->user->telephone . '';

backend/views/point-vente/_form.php

@@ -14,7 +14,9 @@ use yii\helpers\ArrayHelper ;
     <?php $form = ActiveForm::begin(); ?>
 
     <div class="col-md-8">
-        <?= $form->field($model, 'point_fabrication')->checkbox()->hint('Cochez cette case si ce point de vente correspond à votre lieu de production.') ?>
+        <?= $form->field($model, 'point_fabrication')
+                ->checkbox()
+                ->hint('Cochez cette case si ce point de vente correspond à votre lieu de production.') ?>
         <?= $form->field($model, 'nom')->textInput(['maxlength' => 255]) ?>
         <?= $form->field($model, 'localite')->textInput(['maxlength' => 255]) ?>
         <?= $form->field($model, 'adresse')->textarea(['rows' => 6]) ?>
@@ -30,11 +32,22 @@ use yii\helpers\ArrayHelper ;
         <?= $form->field($model, 'horaires_dimanche')->textarea(['rows' => 3]) ?>
         </div>
     <div class="col-md-4">
-        <?= $form->field($model, 'acces_restreint')->checkbox()->hint('Cochez cette case si seulement un groupe restreint d\'utilisateurs peuvent accéder à ce point de vente.') ?>
+        <?= $form->field($model, 'acces_restreint')
+                ->checkbox()
+                ->hint('Cochez cette case si seulement un groupe restreint d\'utilisateurs peuvent accéder à ce point de vente.<br />'
+                        . 'Dans le cas des boîtes à pain, il vous est possible de spécifier un commentaire pour chaque utilisateur sélectionné afin de lui renseigner son numéro de boîte ou son code.') ?>
         <div id="users">
-            <?= Html::activeCheckboxList($model, 'users', ArrayHelper::map($users, 'id', function($model, $defaultValue) {
-                return Html::encode($model->nom.' '.$model->prenom) ;
-            } )) ?>
+            <?= Html::activeCheckboxList($model, 'users', ArrayHelper::map($users, 'id', function($model_user, $defaultValue) use ($model) {
+                return Html::encode($model_user->nom.' '.$model_user->prenom).'<br />'
+                      .Html::activeTextInput(
+                        $model, 
+                        'users_commentaire['.$model_user->id.']', 
+                        [
+                            'class' => 'form-control commentaire', 
+                            'placeholder' => 'Commentaire',
+                            'value' => (isset($model->users_commentaire[$model_user->id])) ? Html::encode($model->users_commentaire[$model_user->id]) : ''
+                        ]);
+            } ), ['encode' => false, 'class' => '']) ?>
         </div>
     </div>
     <div class="clr"></div>

backend/web/css/screen.css

@@ -982,13 +982,19 @@ a:hover, a:focus, a:active {
   font-weight: normal;
   display: block;
 }
+/* line 985, ../sass/screen.scss */
+.point-vente-form #pointvente-users .commentaire {
+  display: none;
+  margin-left: 17px;
+  width: 200px;
+}
 
 /* utilisateurs */
-/* line 991, ../sass/screen.scss */
+/* line 996, ../sass/screen.scss */
 .user-index .input-group {
   width: 180px;
 }
-/* line 994, ../sass/screen.scss */
+/* line 999, ../sass/screen.scss */
 .user-index .input-group .input-credit {
   text-align: center;
 }

backend/web/js/lechatdesnoisettes.js

@@ -20,10 +20,28 @@ function chat_tooltip() {
 }
 
 function chat_points_vente_acces() {
+    // affichage du bloc acces restreint
     $('#pointvente-acces_restreint').change(function() {
         chat_points_vente_acces_event() ;
     }) ;
     chat_points_vente_acces_event() ;
+    
+    // affichage du champs commentaire
+    $('#pointvente-users input[type=checkbox]').change(function() {
+        chat_points_vente_commentaire_event() ;
+    }) ;
+    chat_points_vente_commentaire_event() ;
+}
+
+function chat_points_vente_commentaire_event() {
+    $('#pointvente-users input[type=checkbox]').each(function() {
+        if($(this).prop('checked')) {
+            $(this).parent().find('.commentaire').fadeIn() ;
+        }
+        else {
+            $(this).parent().find('.commentaire').hide() ;
+        }
+    }) ;
 }
 
 function chat_points_vente_acces_event() {

backend/web/sass/screen.scss

@@ -982,6 +982,11 @@ a {
             font-weight: normal ;
             display: block ;
         }
+        .commentaire {
+            display: none ;
+            margin-left: 17px ;
+            width: 200px ;
+        }
     }
 }
 

common/models/Commande.php

@@ -106,7 +106,7 @@ class Commande extends \yii\db\ActiveRecord
     }
     
     public function getPointVente() {
-    	return $this->hasOne(PointVente::className(), ['id'=>'id_point_vente']) ;
+    	return $this->hasOne(PointVente::className(), ['id'=>'id_point_vente'])->with('pointVenteUser') ;
     }
     
     public function getCreditHistorique() 
@@ -122,7 +122,7 @@ class Commande extends \yii\db\ActiveRecord
         return [
             [['id_user', 'date', 'id_point_vente','id_production'], 'required','message'=>''],
             [['id_user', 'id_point_vente', 'id_production'], 'integer'],
-            [['date', 'date_update','commentaire'], 'safe']
+            [['date', 'date_update','commentaire', 'commentaire_point_vente'], 'safe']
         ];
     }
 

common/models/PointVente.php

@@ -24,6 +24,7 @@ class PointVente extends \yii\db\ActiveRecord
         var $data_select_commandes ;
         var $data_options_commandes ;
         var $users = [] ;
+        var $users_commentaire = [] ;
 	
     /**
      * @inheritdoc
@@ -47,7 +48,7 @@ class PointVente extends \yii\db\ActiveRecord
             ['point_fabrication', 'default','value'=>0],        
             ['id_etablissement','integer'],
             ['id_etablissement','required'],
-            ['users','safe']
+            [['users','users_commentaire'],'safe']
         ];
     }
 
@@ -149,10 +150,25 @@ class PointVente extends \yii\db\ActiveRecord
                     $point_vente_user = new PointVenteUser ;
                     $point_vente_user->id_user = $val ;
                     $point_vente_user->id_point_vente = $this->id ;
+                    if(isset($this->users_commentaire[$val]) && strlen($this->users_commentaire[$val]))
+                        $point_vente_user->commentaire = $this->users_commentaire[$val] ;
                     $point_vente_user->save() ;
                 }
             }
         }
-        
+    }
+    
+    public function getCommentaire()
+    {
+        if(isset($this->pointVenteUser))
+        {
+            foreach($this->pointVenteUser as $pvu)
+            {
+                if($pvu->id_user == Yii::$app->user->identity->id)
+                {
+                    return $pvu->commentaire ;
+                }
+            }
+        }
     }
 }

common/models/PointVenteUser.php

@@ -28,6 +28,7 @@ class PointVenteUser extends \yii\db\ActiveRecord
         return [
             [['id_point_vente', 'id_user'], 'required'],
             [['id_point_vente', 'id_user'], 'integer'],
+            [['commentaire'], 'string'],
         ];
     }
 
@@ -39,6 +40,7 @@ class PointVenteUser extends \yii\db\ActiveRecord
         return [
             'id_point_vente' => 'Id Point Vente',
             'id_user' => 'Id User',
+            'commentaire' => 'Commentaire'
         ];
     }
 }

console/migrations/m161215_071544_add_champs_commentaire_points_vente.php

@@ -0,0 +1,17 @@
+<?php
+
+use yii\db\Migration;
+use yii\db\Schema;
+
+class m161215_071544_add_champs_commentaire_points_vente extends Migration
+{
+    public function up()
+    {
+        $this->addColumn('point_vente_user', 'commentaire', Schema::TYPE_TEXT) ;
+    }
+
+    public function down()
+    {
+        $this->dropColumn('point_vente_user', 'commentaire') ;
+    }
+}

console/migrations/m161215_084317_champs_commentaire_point_vente_commande.php

@@ -0,0 +1,17 @@
+<?php
+
+use yii\db\Migration;
+use yii\db\Schema;
+
+class m161215_084317_champs_commentaire_point_vente_commande extends Migration
+{
+    public function up()
+    {
+        $this->addColumn('commande', 'commentaire_point_vente', Schema::TYPE_TEXT) ;
+    }
+
+    public function down()
+    {
+        $this->dropColumn('commande', 'commentaire_point_vente') ;
+    }
+}

frontend/controllers/CommandeController.php

@@ -69,6 +69,7 @@ class CommandeController extends \yii\web\Controller {
         
         // points de vente
         $points_vente = PointVente::find()
+                ->with('pointVenteUser')
                 ->where(['id_etablissement'=>$id_etablissement])
                 ->andWhere('acces_restreint = 0 OR (acces_restreint = 1 AND (SELECT COUNT(*) FROM point_vente_user WHERE point_vente.id = point_vente_user.id_point_vente AND point_vente_user.id_user = :id_user) > 0)')
                 ->params([':id_user' => Yii::$app->user->identity->id])
@@ -324,6 +325,15 @@ class CommandeController extends \yii\web\Controller {
         }
         
         if ($commande->validate() && count($produits) && !$err_nb_produits && !$err_date) {
+            
+            // gestion point de vente
+            $pv = PointVente::find()
+                    ->with('pointVenteUser')
+                    ->where(['id' => $commande->id_point_vente])
+                    ->one() ;
+            if($pv && strlen($pv->getCommentaire()))
+                $commande->commentaire_point_vente = $pv->getCommentaire() ;
+            
             // sauvegarde de la commande
             $commande->save();
 

frontend/views/commande/_form.php

@@ -84,9 +84,21 @@ use common\models\Etablissement;
 
     <ul id="points-vente" class="blocs">
         <?php
-        //$points_vente = PointVente::find()->all() ;
+        
         foreach ($points_vente as $pv) {
-            //print_r($pv) ;
+            
+            $commentaire = '' ;
+            if(isset($pv->pointVenteUser) && is_array($pv->pointVenteUser) && count($pv->pointVenteUser))
+            {
+                foreach($pv->pointVenteUser as $pvu)
+                {
+                    if($pvu->id_user == Yii::$app->user->identity->id && strlen($pvu->commentaire))
+                    {
+                        $commentaire = '<div class="commentaire"><span>'.Html::encode($pvu->commentaire).'</span></div>' ;
+                    }
+                }
+            }
+            
             echo '<li class="bloc point-vente point-vente-' . $pv->id . '" data-vrac="' . (int) $pv->vrac . '" data-pain="' . (int) $pv->pain . '"><div class="contenu">' .
             '<span style="display:none;" class="id">' . $pv->id . '</span>' .
             '<div class="nom">' . Html::encode($pv->nom) . '</div>' .
@@ -99,7 +111,8 @@ use common\models\Etablissement;
             '<div class="jour jour-5">' . (strlen($pv->horaires_vendredi) ? nl2br(Html::encode($pv->horaires_vendredi)) : 'Fermé') . '</div>' .
             '<div class="jour jour-6">' . (strlen($pv->horaires_samedi) ? nl2br(Html::encode($pv->horaires_samedi)) : 'Fermé') . '</div>' .
             '<div class="jour jour-0">' . (strlen($pv->horaires_dimanche) ? nl2br(Html::encode($pv->horaires_dimanche)) : 'Fermé') . '</div>' .
-            '</div>' .
+            '</div>'
+            . $commentaire .
             '</div></li>';
         }
         ?>

frontend/views/commande/index.php

@@ -101,7 +101,17 @@ $this->title = 'Commande' ;
 						<?php endif; ?> 
                                             <?php endif; ?>
 				<?php endforeach; ?></td>
-				<td><?php echo '<span class="nom-point-vente">'.Html::encode($c->pointVente->nom) .'</span><br /><span class="localite">'.Html::encode($c->pointVente->localite).'</span>' ; ?></td>
+				<td>
+                                    <?php if(isset($c->pointVente)): ?>
+                                        <?php echo '<span class="nom-point-vente">'.Html::encode($c->pointVente->nom) .'</span>'
+                                                . '<br /><span class="localite">'.Html::encode($c->pointVente->localite).'</span>' ; ?>
+                                        <?php if(strlen($c->commentaire_point_vente)): ?>
+                                        <div class="commentaire"><span><?= Html::encode($c->commentaire_point_vente) ?></span></div>
+                                        <?php endif; ?>
+                                    <?php else: ?>
+                                        Point de vente supprimé
+                                    <?php endif; ?>
+                                </td>
 				<td class="montant">
                                     <?php echo number_format($c->montant,2) ; ?> €<br />
                                     <?php if($c->montant_paye): ?>

frontend/web/css/screen.css

@@ -755,60 +755,76 @@ h2 {
 #index-commande #historique-commandes a {
   text-decoration: none;
 }
+/* line 238, ../sass/_systeme_commandes.scss */
+#index-commande #historique-commandes .commentaire {
+  margin-top: 5px;
+}
+/* line 240, ../sass/_systeme_commandes.scss */
+#index-commande #historique-commandes .commentaire span {
+  font-size: 12px;
+  background-color: white;
+  color: #BB8757;
+  font-weight: bold;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  padding: 5px 10px;
+  border: solid 1px #ccc;
+}
 
-/* line 241, ../sass/_systeme_commandes.scss */
+/* line 253, ../sass/_systeme_commandes.scss */
 .commande-form {
   min-height: 600px;
   padding-bottom: 60px;
 }
-/* line 246, ../sass/_systeme_commandes.scss */
+/* line 258, ../sass/_systeme_commandes.scss */
 .commande-form h2 {
   font-family: "myriadpro-regular";
 }
-/* line 250, ../sass/_systeme_commandes.scss */
+/* line 262, ../sass/_systeme_commandes.scss */
 .commande-form #infos-importantes.alert-warning {
   float: right;
 }
-/* line 256, ../sass/_systeme_commandes.scss */
+/* line 268, ../sass/_systeme_commandes.scss */
 .commande-form #datepicker-production .ui-datepicker {
   float: left;
   margin-right: 20px;
   font-size: 20px;
 }
-/* line 262, ../sass/_systeme_commandes.scss */
+/* line 274, ../sass/_systeme_commandes.scss */
 .commande-form #datepicker-production .ui-datepicker-header {
   background-color: #BB8757;
 }
-/* line 266, ../sass/_systeme_commandes.scss */
+/* line 278, ../sass/_systeme_commandes.scss */
 .commande-form #datepicker-production .ui-datepicker-title {
   color: white;
 }
-/* line 272, ../sass/_systeme_commandes.scss */
+/* line 284, ../sass/_systeme_commandes.scss */
 .commande-form #datepicker-production .ui-datepicker-prev:hover,
 .commande-form #datepicker-production .ui-datepicker-next:hover {
   border: 0px none;
   background: none;
 }
-/* line 278, ../sass/_systeme_commandes.scss */
+/* line 290, ../sass/_systeme_commandes.scss */
 .commande-form #datepicker-production .ui-helper-clearfix:after {
   clear: none;
 }
-/* line 283, ../sass/_systeme_commandes.scss */
+/* line 295, ../sass/_systeme_commandes.scss */
 .commande-form #datepicker-production .ui-datepicker-calendar a {
   text-decoration: none;
   background-color: #F8F1DD;
 }
-/* line 286, ../sass/_systeme_commandes.scss */
+/* line 298, ../sass/_systeme_commandes.scss */
 .commande-form #datepicker-production .ui-datepicker-calendar a.ui-state-hover, .commande-form #datepicker-production .ui-datepicker-calendar a.ui-state-active {
   background-color: #BB8757;
   color: white;
   border-color: #cdc3b7;
 }
-/* line 295, ../sass/_systeme_commandes.scss */
+/* line 307, ../sass/_systeme_commandes.scss */
 .commande-form .date-commande {
   margin-bottom: 53px;
 }
-/* line 297, ../sass/_systeme_commandes.scss */
+/* line 309, ../sass/_systeme_commandes.scss */
 .commande-form .date-commande span {
   background-color: #BB8757;
   color: white;
@@ -819,47 +835,47 @@ h2 {
   font-family: "myriadpro-regular";
   font-size: 20px;
 }
-/* line 307, ../sass/_systeme_commandes.scss */
+/* line 319, ../sass/_systeme_commandes.scss */
 .commande-form #has-commande-en-cours {
   margin-top: 15px;
 }
-/* line 310, ../sass/_systeme_commandes.scss */
+/* line 322, ../sass/_systeme_commandes.scss */
 .commande-form #has-commande-en-cours a {
   color: #a94442;
   text-decoration: none;
   font-weight: bold;
 }
-/* line 317, ../sass/_systeme_commandes.scss */
+/* line 329, ../sass/_systeme_commandes.scss */
 .commande-form .field-commande-id_production {
   display: none;
 }
-/* line 321, ../sass/_systeme_commandes.scss */
+/* line 333, ../sass/_systeme_commandes.scss */
 .commande-form .field-commande-id_point_vente {
   margin-top: 30px;
 }
-/* line 325, ../sass/_systeme_commandes.scss */
+/* line 337, ../sass/_systeme_commandes.scss */
 .commande-form .field-commande-id_production {
   margin-bottom: 0px;
 }
-/* line 327, ../sass/_systeme_commandes.scss */
+/* line 339, ../sass/_systeme_commandes.scss */
 .commande-form .field-commande-id_production label {
   margin-bottom: 0px;
 }
-/* line 331, ../sass/_systeme_commandes.scss */
+/* line 343, ../sass/_systeme_commandes.scss */
 .commande-form .field-commande-id_production .help-block {
   margin-bottom: 0px;
 }
-/* line 336, ../sass/_systeme_commandes.scss */
+/* line 348, ../sass/_systeme_commandes.scss */
 .commande-form .field-commande-id_point_vente {
   display: none;
 }
-/* line 340, ../sass/_systeme_commandes.scss */
+/* line 352, ../sass/_systeme_commandes.scss */
 .commande-form .blocs {
   list-style-type: none;
   margin: 0px;
   padding: 0px;
 }
-/* line 345, ../sass/_systeme_commandes.scss */
+/* line 357, ../sass/_systeme_commandes.scss */
 .commande-form .blocs .bloc {
   text-decoration: none;
   width: 268px;
@@ -874,107 +890,121 @@ h2 {
   background-color: white;
   border: 1px solid #d8d8d8;
 }
-/* line 360, ../sass/_systeme_commandes.scss */
+/* line 372, ../sass/_systeme_commandes.scss */
 .commande-form .blocs .bloc .nom {
   font-family: "comfortaalight";
   font-size: 20px;
 }
-/* line 366, ../sass/_systeme_commandes.scss */
+/* line 378, ../sass/_systeme_commandes.scss */
 .commande-form .blocs .bloc .adresse {
   color: gray;
   font-size: 13px;
   line-height: 16px;
 }
-/* line 372, ../sass/_systeme_commandes.scss */
+/* line 384, ../sass/_systeme_commandes.scss */
 .commande-form .blocs .bloc .horaires {
   margin-top: 7px;
 }
-/* line 374, ../sass/_systeme_commandes.scss */
+/* line 386, ../sass/_systeme_commandes.scss */
 .commande-form .blocs .bloc .horaires .jour {
   font-weight: bold;
   display: none;
 }
-/* line 381, ../sass/_systeme_commandes.scss */
+/* line 393, ../sass/_systeme_commandes.scss */
 .commande-form .blocs .bloc.selected {
   border-left: solid 5px #BB8757;
 }
-/* line 384, ../sass/_systeme_commandes.scss */
+/* line 396, ../sass/_systeme_commandes.scss */
 .commande-form .blocs .bloc.selected .contenu {
   position: relative;
   left: -4px;
 }
-/* line 390, ../sass/_systeme_commandes.scss */
+/* line 402, ../sass/_systeme_commandes.scss */
 .commande-form .blocs .bloc:hover {
   -moz-box-shadow: 0px 0px 5px #d8d8d8;
   -webkit-box-shadow: 0px 0px 5px #d8d8d8;
   box-shadow: 0px 0px 5px #d8d8d8;
 }
-/* line 395, ../sass/_systeme_commandes.scss */
+/* line 407, ../sass/_systeme_commandes.scss */
 .commande-form .blocs .bloc.disabled {
   display: none;
 }
-/* line 402, ../sass/_systeme_commandes.scss */
+/* line 412, ../sass/_systeme_commandes.scss */
+.commande-form .blocs .bloc .commentaire {
+  margin-top: 5px;
+}
+/* line 414, ../sass/_systeme_commandes.scss */
+.commande-form .blocs .bloc .commentaire span {
+  background-color: #BB8757;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  color: white;
+  font-weight: bold;
+  padding: 3px 10px;
+}
+/* line 425, ../sass/_systeme_commandes.scss */
 .commande-form #produits {
   margin-top: 15px;
 }
-/* line 405, ../sass/_systeme_commandes.scss */
+/* line 428, ../sass/_systeme_commandes.scss */
 .commande-form #produits #label-produits {
   display: block;
   margin-bottom: 5px;
 }
-/* line 410, ../sass/_systeme_commandes.scss */
+/* line 433, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table {
   margin-top: 7px;
 }
-/* line 413, ../sass/_systeme_commandes.scss */
+/* line 436, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .illu {
   float: left;
   height: auto;
   width: 70px;
   margin-right: 15px;
 }
-/* line 420, ../sass/_systeme_commandes.scss */
+/* line 443, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .photo {
   padding: 0px;
   width: 120px;
 }
-/* line 425, ../sass/_systeme_commandes.scss */
+/* line 448, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .th-photo, .commande-form #produits .table .td-photo {
   width: 120px;
 }
-/* line 429, ../sass/_systeme_commandes.scss */
+/* line 452, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .nom {
   font-family: "comfortaalight";
   font-weight: bold;
   text-transform: uppercase;
   font-size: 18px;
 }
-/* line 436, ../sass/_systeme_commandes.scss */
+/* line 459, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .description {
   font-style: italic;
 }
-/* line 440, ../sass/_systeme_commandes.scss */
+/* line 463, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .recette {
   font-size: 12px;
 }
-/* line 444, ../sass/_systeme_commandes.scss */
+/* line 467, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .input-group {
   width: 133px;
 }
-/* line 446, ../sass/_systeme_commandes.scss */
+/* line 469, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .input-group .quantity {
   text-align: center;
 }
-/* line 451, ../sass/_systeme_commandes.scss */
+/* line 474, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .colonne-quantite, .commande-form #produits .table .prix-unit, .commande-form #produits .table .total {
   width: 150px;
   text-align: center;
 }
-/* line 456, ../sass/_systeme_commandes.scss */
+/* line 479, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table td#total-commande, .commande-form #produits .table td#total-commande-vrac, .commande-form #produits .table td.total {
   text-align: center;
 }
-/* line 460, ../sass/_systeme_commandes.scss */
+/* line 483, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .epuise {
   display: none;
   text-transform: uppercase;
@@ -983,32 +1013,32 @@ h2 {
   font-size: 16px;
   text-align: center;
 }
-/* line 469, ../sass/_systeme_commandes.scss */
+/* line 492, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .quantite-restante {
   font-size: 12px;
   margin-top: 8px;
 }
-/* line 473, ../sass/_systeme_commandes.scss */
+/* line 496, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table .quantite-restante .nb {
   font-weight: bold;
 }
-/* line 478, ../sass/_systeme_commandes.scss */
+/* line 501, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table td.produit, .commande-form #produits .table th.produit {
   width: 70%;
 }
-/* line 482, ../sass/_systeme_commandes.scss */
+/* line 505, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table td.prix-unit, .commande-form #produits .table th.prix-unit {
   width: 10%;
 }
-/* line 486, ../sass/_systeme_commandes.scss */
+/* line 509, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table td.colonne-quantite, .commande-form #produits .table th.colonne-quantite {
   width: 10%;
 }
-/* line 490, ../sass/_systeme_commandes.scss */
+/* line 513, ../sass/_systeme_commandes.scss */
 .commande-form #produits .table td.total, .commande-form #produits .table th.total {
   width: 10%;
 }
-/* line 496, ../sass/_systeme_commandes.scss */
+/* line 519, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed {
   display: none;
   position: fixed;
@@ -1028,7 +1058,7 @@ h2 {
   background-color: #F8F1DD;
   text-align: center;
 }
-/* line 513, ../sass/_systeme_commandes.scss */
+/* line 536, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed.not-fixed {
   position: relative;
   -moz-box-shadow: none;
@@ -1040,12 +1070,12 @@ h2 {
   border: solid 1px #e0e0e0;
   padding-right: 20px;
 }
-/* line 522, ../sass/_systeme_commandes.scss */
+/* line 545, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed.no-credit-pain #bloc-valider-commande {
   margin-top: 0px;
   float: right;
 }
-/* line 528, ../sass/_systeme_commandes.scss */
+/* line 551, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed #total-commande-bottom {
   background-color: white;
   -moz-border-radius: 20px;
@@ -1054,25 +1084,25 @@ h2 {
   padding: 5px 25px;
   border: solid 1px #e0e0e0;
 }
-/* line 535, ../sass/_systeme_commandes.scss */
+/* line 558, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed .btn-commentaire {
   float: left;
 }
-/* line 543, ../sass/_systeme_commandes.scss */
+/* line 566, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed .btn-commentaire {
   margin-right: 10px;
 }
-/* line 547, ../sass/_systeme_commandes.scss */
+/* line 570, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed #bloc-valider-commande {
   text-align: right;
   margin-top: 20px;
 }
-/* line 551, ../sass/_systeme_commandes.scss */
+/* line 574, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed #bloc-valider-commande button {
   width: 300px;
   margin-right: 10px;
 }
-/* line 557, ../sass/_systeme_commandes.scss */
+/* line 580, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed #checkbox-credit-pain {
   float: right;
   width: 300px;
@@ -1088,16 +1118,16 @@ h2 {
   -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.075);
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.075);
 }
-/* line 568, ../sass/_systeme_commandes.scss */
+/* line 591, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed #checkbox-credit-pain.paiement-impossible {
   background-color: #e0e0e0;
 }
-/* line 572, ../sass/_systeme_commandes.scss */
+/* line 595, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed #checkbox-credit-pain .info {
   color: gray;
   font-weight: normal;
 }
-/* line 577, ../sass/_systeme_commandes.scss */
+/* line 600, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed #checkbox-credit-pain .the-credit {
   background-color: #BB8757;
   color: white;
@@ -1106,37 +1136,37 @@ h2 {
   -webkit-border-radius: 5px;
   border-radius: 5px;
 }
-/* line 584, ../sass/_systeme_commandes.scss */
+/* line 607, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed #checkbox-credit-pain .montant-paye {
   color: #BB8757;
 }
-/* line 588, ../sass/_systeme_commandes.scss */
+/* line 611, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed #checkbox-credit-pain #info-credit-vide {
   font-size: 12px;
 }
-/* line 593, ../sass/_systeme_commandes.scss */
+/* line 616, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed .btn-retour, .commande-form #bar-fixed .annuler-commande {
   float: left;
   margin-right: 5px;
 }
-/* line 598, ../sass/_systeme_commandes.scss */
+/* line 621, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed .annuler-commande {
   color: #b92c28;
   background-color: white;
 }
-/* line 603, ../sass/_systeme_commandes.scss */
+/* line 626, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed #total-commande-bottom {
   display: none;
   font-weight: bold;
   font-family: "comfortaalight";
   font-size: 24px;
 }
-/* line 610, ../sass/_systeme_commandes.scss */
+/* line 633, ../sass/_systeme_commandes.scss */
 .commande-form #bar-fixed .field-commande-commentaire {
   display: none;
 }
 
-/* line 618, ../sass/_systeme_commandes.scss */
+/* line 641, ../sass/_systeme_commandes.scss */
 .ui-datepicker .ui-widget-header {
   background: none;
   background-color: gray;
@@ -1144,7 +1174,7 @@ h2 {
   color: black;
   font-weight: normal;
 }
-/* line 626, ../sass/_systeme_commandes.scss */
+/* line 649, ../sass/_systeme_commandes.scss */
 .ui-datepicker .ui-datepicker-current-day a,
 .ui-datepicker a.ui-state-hover {
   background: none;

frontend/web/sass/_systeme_commandes.scss

@@ -235,6 +235,18 @@ h2 {
 			text-decoration: none ;
 		}
 		
+                .commentaire {
+                    margin-top: 5px ;
+                    span {
+                        font-size: 12px ;
+                        background-color: white ;
+                        color: $color1 ;
+                        font-weight: bold ; 
+                        @include border-radius(5px) ;
+                        padding: 5px 10px ;
+                        border: solid 1px #ccc ;
+                    }
+                }
 	}
 }
 		
@@ -396,6 +408,17 @@ h2 {
 				display: none ;
 				//color: gray ;
 			}
+                        
+                        .commentaire {
+                            margin-top: 5px ;
+                            span {
+                                background-color: $color1 ;
+                                @include border-radius(5px) ;
+                                color: white ;
+                                font-weight: bold ;
+                                padding: 3px 10px ;
+                            }
+                        }
 		}
 	}