[Administration] Header > liste producteurs : champs de recherche rapide #1196

backend/views/layouts/header.php

@@ -99,21 +99,29 @@ $producer = GlobalParam::getCurrentProducer();
                             <i class="fa fa-caret-down"></i>
                         </a>
                         <ul class="dropdown-menu">
-                            <li class="header">&nbsp;<strong>Producteurs en ligne</strong></li>
+                            <li>
+                                <input type="text" class="search-producer form-control" placeholder="Rechercher" />
+                            </li>
+                            <li class="li-alert-no-results">
+                                <div class="alert alert-warning">Aucun producteur trouvé</div>
+                            </li>
                             <?php $producersArray = Producer::find()->orderBy('name ASC')->all(); ?>
                             <?php foreach ($producersArray as $producer): ?>
                                 <?php if ($producer->active == 1): ?>
-                                    <li>
+                                    <li class="producer">
                                         <a href="<?= Yii::$app->urlManagerBackend->createUrl(['site/change-producer', 'id' => $producer->id]); ?>"><?= Html::encode($producer->name) ?></a>
                                     </li>
                                 <?php endif; ?>
                             <?php endforeach; ?>
-                            <li class="header"><a href="javascript:void(0);" id="link-display-producers-offline">Afficher
-                                    les producteurs hors-ligne</a></li>
+                            <!--<li class="header"><a href="javascript:void(0);" id="link-display-producers-offline">Afficher
+                                    les producteurs hors-ligne</a></li>-->
                             <?php foreach ($producersArray as $producer): ?>
                                 <?php if ($producer->active != 1): ?>
-                                    <li class="offline">
-                                        <a href="<?= Yii::$app->urlManagerBackend->createUrl(['site/change-producer', 'id' => $producer->id]); ?>"><?= Html::encode($producer->name) ?></a>
+                                    <li class="producer">
+                                        <a href="<?= Yii::$app->urlManagerBackend->createUrl(['site/change-producer', 'id' => $producer->id]); ?>">
+                                            <label class="label label-danger">Hors-ligne</label>
+                                            <?= Html::encode($producer->name) ?>
+                                        </a>
                                     </li>
                                 <?php endif; ?>
                             <?php endforeach; ?>

backend/web/css/screen.css

@@ -1660,93 +1660,113 @@ body.skin-black .main-header .notifications-menu ul.menu li a h5 small {
 body.skin-black .main-header .notifications-menu ul.menu li a p {
   margin-left: 10px;
 }
-/* line 136, ../sass/_adminlte.scss */
+/* line 137, ../sass/_adminlte.scss */
+body.skin-black .main-header .navbar .nav li.producer-menu .dropdown-menu {
+  width: 400px;
+}
+/* line 141, ../sass/_adminlte.scss */
+body.skin-black .main-header .navbar .nav li.producer-menu .search-producer {
+  margin: 10px;
+  width: 94%;
+}
+/* line 146, ../sass/_adminlte.scss */
+body.skin-black .main-header .navbar .nav li.producer-menu .li-alert-no-results {
+  display: none;
+}
+/* line 149, ../sass/_adminlte.scss */
+body.skin-black .main-header .navbar .nav li.producer-menu .li-alert-no-results .alert {
+  margin-bottom: 0px;
+  margin-left: 10px;
+  margin-right: 10px;
+  padding: 15px 15px 10px 15px;
+}
+/* line 157, ../sass/_adminlte.scss */
 body.skin-black .main-header .navbar .nav li.producer-menu .label {
   position: relative;
   top: -2px;
   left: 0px;
 }
-/* line 142, ../sass/_adminlte.scss */
+/* line 163, ../sass/_adminlte.scss */
 body.skin-black .main-header .navbar .nav li.producer-menu #link-display-producers-offline {
   color: #F39C12;
 }
-/* line 146, ../sass/_adminlte.scss */
+/* line 167, ../sass/_adminlte.scss */
 body.skin-black .main-header .navbar .nav li.producer-menu .offline {
   display: none;
 }
-/* line 153, ../sass/_adminlte.scss */
+/* line 174, ../sass/_adminlte.scss */
 body.skin-black .sidebar .sidebar-menu > li.header {
   color: #899397;
 }
-/* line 158, ../sass/_adminlte.scss */
+/* line 179, ../sass/_adminlte.scss */
 body.skin-black .sidebar-menu > li.active > a {
   border-color: #F39C12;
 }
-/* line 163, ../sass/_adminlte.scss */
+/* line 184, ../sass/_adminlte.scss */
 body.skin-black section.sidebar .user-panel {
   text-align: center;
 }
-/* line 166, ../sass/_adminlte.scss */
+/* line 187, ../sass/_adminlte.scss */
 body.skin-black section.sidebar .user-panel .image {
   margin-bottom: 3px;
 }
-/* line 170, ../sass/_adminlte.scss */
+/* line 191, ../sass/_adminlte.scss */
 body.skin-black section.sidebar .user-panel .title {
   font-weight: bold;
   color: white;
 }
-/* line 177, ../sass/_adminlte.scss */
+/* line 198, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper {
   background-color: #f5f5f5;
 }
-/* line 180, ../sass/_adminlte.scss */
+/* line 201, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .content-header {
   background-color: #F5F5F5;
   padding-bottom: 15px;
   border-bottom: solid 1px #e0e0e0;
   border-top: solid 1px #e0e0e0;
 }
-/* line 186, ../sass/_adminlte.scss */
+/* line 207, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .content-header .btn {
   padding: 3px 6px;
   font-size: 10px;
   font-family: Arial;
   text-transform: uppercase;
 }
-/* line 193, ../sass/_adminlte.scss */
+/* line 214, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .content-header h1 {
   font-family: 'myriadpro-light';
   font-size: 20px;
 }
-/* line 199, ../sass/_adminlte.scss */
+/* line 220, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper a {
   color: #e08e0b;
 }
-/* line 203, ../sass/_adminlte.scss */
+/* line 224, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .btn {
   color: white;
 }
-/* line 207, ../sass/_adminlte.scss */
+/* line 228, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .btn-default {
   color: #333;
   background-color: white;
 }
-/* line 212, ../sass/_adminlte.scss */
+/* line 233, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .btn-primary {
   background-color: #F39C12;
   color: white;
   border-color: #F39C12;
 }
-/* line 219, ../sass/_adminlte.scss */
+/* line 240, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .alert a {
   color: white;
 }
-/* line 222, ../sass/_adminlte.scss */
+/* line 243, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .alert a.btn {
   color: #333;
   text-decoration: none;
 }
-/* line 227, ../sass/_adminlte.scss */
+/* line 248, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .alert .close {
   font-size: 30px;
   position: relative;
@@ -1755,89 +1775,89 @@ body.skin-black .content-wrapper .alert .close {
   color: white;
   opacity: 0.6;
 }
-/* line 235, ../sass/_adminlte.scss */
+/* line 256, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .alert .close:hover {
   opacity: 1;
 }
-/* line 242, ../sass/_adminlte.scss */
+/* line 263, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .callout h4 .fa {
   margin-right: 7px;
 }
-/* line 245, ../sass/_adminlte.scss */
+/* line 266, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .callout a {
   color: white;
 }
-/* line 248, ../sass/_adminlte.scss */
+/* line 269, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .callout .btn {
   color: #333;
   text-decoration: none;
 }
-/* line 255, ../sass/_adminlte.scss */
+/* line 276, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .table th {
   font-size: 13px;
 }
-/* line 258, ../sass/_adminlte.scss */
+/* line 279, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .table th.column-actions, body.skin-black .content-wrapper .table td.column-actions {
   width: 150px;
   text-align: right;
 }
-/* line 262, ../sass/_adminlte.scss */
+/* line 283, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .table td.text-small, body.skin-black .content-wrapper .table th.text-small {
   font-size: 12px;
 }
-/* line 267, ../sass/_adminlte.scss */
+/* line 288, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .pagination > .active > a, body.skin-black .content-wrapper .pagination > .active > span, body.skin-black .content-wrapper .pagination > .active > a:hover, body.skin-black .content-wrapper .pagination > .active > span:hover, body.skin-black .content-wrapper .pagination > .active > a:focus, body.skin-black .content-wrapper .pagination > .active > span:focus {
   background-color: #F39C12;
   border: solid 1px #F39C12;
   color: white;
 }
-/* line 272, ../sass/_adminlte.scss */
+/* line 293, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .pagination > li > a, body.skin-black .content-wrapper .pagination > li > span {
   color: #F39C12;
 }
-/* line 274, ../sass/_adminlte.scss */
+/* line 295, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .pagination > li > a:hover, body.skin-black .content-wrapper .pagination > li > span:hover {
   color: #c87f0a;
 }
-/* line 279, ../sass/_adminlte.scss */
+/* line 300, ../sass/_adminlte.scss */
 body.skin-black .content-wrapper .submenu {
   margin-bottom: 25px;
 }
-/* line 285, ../sass/_adminlte.scss */
+/* line 306, ../sass/_adminlte.scss */
 body.skin-black .main-footer a {
   color: #F39C12;
 }
 
-/* line 291, ../sass/_adminlte.scss */
+/* line 312, ../sass/_adminlte.scss */
 body.login-page {
   background: none;
   background-color: white;
 }
-/* line 295, ../sass/_adminlte.scss */
+/* line 316, ../sass/_adminlte.scss */
 body.login-page .login-box .login-logo {
   text-align: center;
   font-family: 'highvoltageregular';
 }
-/* line 299, ../sass/_adminlte.scss */
+/* line 320, ../sass/_adminlte.scss */
 body.login-page .login-box .login-logo img {
   width: 50px;
 }
-/* line 304, ../sass/_adminlte.scss */
+/* line 325, ../sass/_adminlte.scss */
 body.login-page .login-box .login-box-body .btn-primary {
   background-color: #F39C12;
   border-color: #F39C12;
   padding: 5px 10px;
 }
-/* line 309, ../sass/_adminlte.scss */
+/* line 330, ../sass/_adminlte.scss */
 body.login-page .login-box .login-box-body .btn-primary:active {
   background-color: #f4a62a;
   border-color: #F39C12;
 }
-/* line 315, ../sass/_adminlte.scss */
+/* line 336, ../sass/_adminlte.scss */
 body.login-page .login-box .login-box-body a {
   color: #F39C12;
 }
-/* line 317, ../sass/_adminlte.scss */
+/* line 338, ../sass/_adminlte.scss */
 body.login-page .login-box .login-box-body a:hover {
   color: #f4a62a;
 }

backend/web/js/backend.js

@@ -64,6 +64,40 @@ var UrlManager = {
 };
 
 function opendistrib_dropdown_producers() {
+
+    $('.producer-menu .dropdown-toggle').click(function() {
+        $('.producer-menu .search-producer').focus();
+    });
+
+    $('.producer-menu .search-producer').keyup(function() {
+        var $alertNoResults = $('.producer-menu .li-alert-no-results');
+        var searchWords = $(this).val().toLowerCase();
+        var count = 0;
+
+        if(searchWords && searchWords.length > 0) {
+            $('.producer-menu li.producer').each(function() {
+                if($(this).find('a').text().toLowerCase().indexOf(searchWords) >= 0 || !searchWords) {
+                    $(this).show();
+                    count ++;
+                }
+                else {
+                    $(this).hide();
+                }
+            });
+
+            if(count) {
+                $alertNoResults.hide();
+            }
+            else {
+                $alertNoResults.show();
+            }
+        }
+        else {
+            $alertNoResults.hide();
+            $('.producer-menu li.producer').show();
+        }
+    });
+
     $('#link-display-producers-offline').click(function() {
         $(this).hide();
         $('.producer-menu .offline').show();

backend/web/sass/_adminlte.scss

@@ -133,6 +133,27 @@ body.skin-black {
         }
         
         .navbar .nav li.producer-menu {
+
+            .dropdown-menu {
+                width: 400px;
+            }
+
+            .search-producer {
+                margin: 10px;
+                width: 94%;
+            }
+
+            .li-alert-no-results {
+                display: none;
+
+                .alert {
+                    margin-bottom: 0px;
+                    margin-left: 10px;
+                    margin-right: 10px;
+                    padding: 15px 15px 10px 15px;
+                }
+            }
+
             .label {
                 position: relative ;
                 top: -2px ;