Paramètres : séparation des différentes sections en onglets

backend/assets/VuejsProducerUpdateAsset.php

+<?php
+/** 
+Copyright distrib (2018) 
+
+contact@opendistrib.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 backend\assets;
+
+use yii\web\AssetBundle;
+use yii ;
+
+/**
+ * @author Qiang Xue <qiang.xue@gmail.com>
+ * @since 2.0
+ */
+class VuejsProducerUpdateAsset 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/producer-update.js') ;
+    }
+}

backend/views/producer/update.php

 use yii\widgets\ActiveForm;
 use common\helpers\Url ;
 
+\backend\assets\VuejsProducerUpdateAsset::register($this);
+
 $this->setTitle('Paramètres') ;
 $this->addBreadcrumb($this->getTitle()) ;
 
 ?>
 
-<div class="user-update">
+<div class="user-update" id="app-producer-update">
+    
+    <div id="nav-params">
+        <button v-for="section in sectionsArray" :class="'btn '+((currentSection == section.name) ? 'btn-primary' : 'btn-default')" @click="changeSection(section)">
+            {{ section.nameDisplay }}
+            <span class="glyphicon glyphicon-triangle-bottom"></span>
+        </button>
+    </div>
+    
     <div class="user-form">
         <?php $form = ActiveForm::begin(); ?>
-        <div class="">
-            
-            <div class="panel panel-default">
+        <div>
+            <div v-show="currentSection == 'general'" class="panel panel-default">
                 <div class="panel-heading"> 
                     <h3 class="panel-title">Général</h3>
                 </div>
                 </div>
             </div>
             
-             <div class="panel panel-default">
+             <div v-show="currentSection == 'prise-commande'" class="panel panel-default">
                 <div class="panel-heading"> 
                     <h3 class="panel-title">Prise de commande</h3>
                 </div>
              </div>
 
             
-            <div class="panel panel-default">
+            <div v-show="currentSection == 'abonnements'" class="panel panel-default">
                 <div class="panel-heading"> 
                     <h3 class="panel-title">Abonnements</h3>
                 </div>
                 </div>
             </div>
             
-            <div class="panel panel-default">
+            <div v-show="currentSection == 'credit-payment'" class="panel panel-default">
                 <div class="panel-heading"> 
                     <h3 class="panel-title">Crédit / paiement en ligne</h3>
                 </div>

backend/web/css/screen.css

 }
 
 /* line 275, ../sass/screen.scss */
-a.btn {
+a.btn, button.btn {
   position: relative;
 }
 /* line 278, ../sass/screen.scss */
-a.btn .glyphicon-triangle-bottom {
+a.btn .glyphicon-triangle-bottom, button.btn .glyphicon-triangle-bottom {
   display: none;
   position: absolute;
   top: 26px;
   color: #FF7F00;
 }
 /* line 289, ../sass/screen.scss */
-a.btn.btn-primary .glyphicon-triangle-bottom {
+a.btn.btn-primary .glyphicon-triangle-bottom, button.btn.btn-primary .glyphicon-triangle-bottom {
   display: block;
 }
 
 .user-mail #tabs-points-sale {
   margin-bottom: 20px;
 }
+
+/* line 4, ../sass/producer/_update.scss */
+.producer-update #nav-params {
+  margin-bottom: 30px;
+}
+/* line 7, ../sass/producer/_update.scss */
+.producer-update #nav-params button {
+  margin-right: 10px;
+}

backend/web/js/vuejs/producer-update.js

+
+var app = new Vue({
+    el: '#app-producer-update',
+    data: {
+        currentSection: 'general',
+        sectionsArray: [
+            {
+                name: 'general',
+                nameDisplay: 'Général'
+            },
+            {
+                name: 'prise-commande',
+                nameDisplay: 'Prise de commande'
+            },
+            {
+                name: 'abonnements',
+                nameDisplay: 'Abonnements'
+            },
+            {
+                name: 'credit-payment',
+                nameDisplay: 'Crédit / paiement en ligne'
+            }
+        ]
+    },
+    methods: {
+        changeSection: function(section) {
+            this.currentSection = section.name ;
+        }
+    }
+});
+
+

backend/web/sass/producer/_update.scss

+
+.producer-update {
+    
+    #nav-params {
+        margin-bottom: 30px ;
+        
+        button {
+            margin-right: 10px  ;
+        }
+    }
+    
+}

backend/web/sass/screen.scss

     }
 }
 
-a.btn {
+a.btn, button.btn {
     position: relative ;
 
     .glyphicon-triangle-bottom {
 @import "product/_form.scss" ;
 @import "stats/_products.scss" ;
 @import "distribution/_index.scss" ; 
-@import "user/_emails.scss" ; 
+@import "user/_emails.scss" ; 
+@import "producer/_update.scss" ;