Alertes dynamiques en Vuejs #182

backend/assets/VuejsAlertsAsset.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;
+
+
+class VuejsAlertsAsset 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/alerts.js');
+        }
+}

backend/assets/VuejsDocumentFormAsset.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.
-*/
+/**
+ * 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 ;
+use yii;
 
 /**
  * @author Qiang Xue <qiang.xue@gmail.com>
  */
 class VuejsDocumentFormAsset extends \common\components\MyAssetBundle
 {
-    public $basePath = '@webroot';
-    public $baseUrl = '@web';
-    public $css = [];
-    public $js = [];
-    public $depends = [
-        'common\assets\CommonAsset',
-        'backend\assets\AppAsset',
-    ];
-    
-    public function __construct() 
-    {
-        parent::__construct() ;
-        $this->addAsset('js','js/vuejs/document-form.js') ;
-    }
+        public $basePath = '@webroot';
+        public $baseUrl = '@web';
+        public $css = [];
+        public $js = [];
+        public $depends = [
+                'common\assets\CommonAsset',
+                'backend\assets\AppAsset',
+                'backend\assets\VuejsAlertsAsset',
+        ];
+
+        public function __construct()
+        {
+                parent::__construct();
+                $this->addAsset('js', 'js/vuejs/document-form.js');
+        }
 }

backend/views/layouts/content.php

 </aside><!-- /.control-sidebar -->
 <!-- Add the sidebar's background. This div must be placed
      immediately after the control sidebar -->
-<div class='control-sidebar-bg'></div>
+<div class='control-sidebar-bg'></div>
+
+<!-- alerts -->
+<div id="app-alerts">
+        <template v-for="alert in alerts">
+                <transition name="slide-fade">
+                        <div v-if="alert.display == true" :class="'alert alert-'+alert.type">
+                                {{ alert.message }}
+                        </div>
+                </transition>
+        </template>
+</div>

backend/views/layouts/main.php

     \dmstr\web\AdminLteAsset::register($this);
     \common\assets\CommonAsset::register($this);
     \backend\assets\AppAsset::register($this);
+    \backend\assets\VuejsAlertsAsset::register($this);
 
     $directoryAsset = Yii::$app->assetManager->getPublishedUrl('@vendor/almasaeed2010/adminlte/dist');
     ?>
 
     <?php $this->endBody() ?>
     <?= $this->render('@common/views/_analytics.php'); ?>
-    
+
     </body>
     </html>
     <?php $this->endPage() ?>

backend/web/css/screen.css

   color: #ff8c1a;
 }
 
+/* line 2, ../sass/_alerts.scss */
+#app-alerts {
+  position: fixed;
+  bottom: 30px;
+  right: 15px;
+  width: 200px;
+  height: auto;
+}
+/* line 9, ../sass/_alerts.scss */
+#app-alerts .slide-fade-enter-active {
+  -moz-transition: all 0.3s ease;
+  -o-transition: all 0.3s ease;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+/* line 12, ../sass/_alerts.scss */
+#app-alerts .slide-fade-leave-active {
+  -moz-transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+  -o-transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+  -webkit-transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+}
+/* line 15, ../sass/_alerts.scss */
+#app-alerts .slide-fade-enter, #app-alerts .slide-fade-leave-to {
+  -moz-transform: translateX(10px);
+  -ms-transform: translateX(10px);
+  -webkit-transform: translateX(10px);
+  transform: translateX(10px);
+  opacity: 0;
+}
+
 /* line 4, ../sass/site/_index.scss */
 .site-index #distributions .info-box {
   border: solid 1px #e0e0e0;

backend/web/js/vuejs/alerts.js

+
+var appAlerts = new Vue({
+    el: '#app-alerts',
+    data: {
+        alerts: [
+        ]
+    },
+    mounted: function() {
+
+    },
+    methods: {
+        alert: function(type, message) {
+            var app = this ;
+            var index = this.alerts.length ;
+            this.alerts.splice(index, 0, {
+                display: false,
+                type: type,
+                message: message
+            });
+
+            var functionDisplayAlert = function(app, index, display) {
+                app.alerts[index].display = display ;
+            } ;
+
+            setTimeout(functionDisplayAlert, 500, app, index, true) ;
+            setTimeout(functionDisplayAlert, 3000, app, index, false) ;
+
+        }
+    }
+});

backend/web/js/vuejs/document-form.js

                 .then(function(response) {
                         app.productAddId = 0 ;
                         app.init() ;
-                        alert('Produit ajouté') ;
+                        appAlerts.alert('success','Produit ajouté') ;
                 }) ;   
         },
         deleteProductOrder: function(idProductOrder) {
             }})
             .then(function(response) {
                 app.init() ;
+                appAlerts.alert('danger','Produit supprimé') ;
             }) ;
         }
     }

backend/web/sass/_alerts.scss

+
+#app-alerts {
+        position: fixed ;
+        bottom: 30px ;
+        right: 15px ;
+        width: 200px ;
+        height: auto ;
+
+        .slide-fade-enter-active {
+                @include transition(all .3s ease);
+        }
+        .slide-fade-leave-active {
+                @include transition(all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0));
+        }
+        .slide-fade-enter, .slide-fade-leave-to {
+                @include transform(translateX(10px));
+                opacity: 0;
+        }
+}
+

backend/web/sass/screen.scss

 }
 
 @import "_adminlte.scss" ;
+@import "_alerts.scss" ;
 @import "site/_index.scss" ;
 @import "subscription/_index.scss" ;
 @import "subscription/_form.scss" ;