add button to metabase

coops_configurations/config_lacagette.py

@@ -109,3 +109,6 @@ RECEPTION_PB = "Ici, vous pouvez signaler toute anomalie lors d'une réception,
 
 # display or not column "Autres" in reception process
 DISPLAY_COL_AUTRES = False
+
+# URL to the metabase dashboard for orders helper
+ORDERS_HELPER_METABASE_URL = "https://metabase.lacagette-coop.fr/dashboard/16"

orders/static/css/oders_helper_style.css

@@ -31,6 +31,26 @@
     background-color: #a1a2a3;
 }
 
+.link_as_button:hover {
+    text-decoration: none;
+    color: white;
+}
+.link_as_button:active {
+    text-decoration: none;
+    color: white;
+}
+.link_as_button:focus {
+    text-decoration: none;
+    color: white;
+}
+
+.remove_order_modal_text {
+    font-size: 2rem;
+}
+.remove_order_name {
+    font-weight: bold;
+}
+
 /* - Order selection screen */
 #new_order_area {
     margin-bottom: 40px;
@@ -59,17 +79,14 @@
 }
 .remove_order_icon {
     flex: 0 1 auto;
-    color: #B22222;
+    color: #912930;
     margin-left: 5px;
     cursor: pointer;
     z-index: 2;
+    transform: scale(1.2);
 }
 .remove_order_icon:hover {
-    color: #CD5C5C;
-}
-
-.remove_order_name {
-    font-weight: bold;
+    color: #e62720;
 }
 
 .order_last_update {
@@ -104,6 +121,47 @@
     justify-content: flex-start;
 }
 
+.right_action_buttons {
+    display: flex;
+}
+
+#actions_buttons_wrapper {
+    position: relative;
+    margin-left: 5px;
+}
+
+#toggle_action_buttons {
+    width: 250px;
+    border: 1px solid black;
+    position: relative;
+}
+#toggle_action_buttons:hover {
+    background-color: #c7cace;
+}
+
+.toggle_action_buttons_icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 15px;
+}
+
+#actions_buttons_container {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    width: 250px;
+    display: none;
+}
+
+.action_button {
+    width: 100%;
+    min-height: 45px;
+    border-color: black;
+    border-style: solid;
+    border-width: 0 1px 1px 1px;
+}
+
 /* -- Order data */
 #order_data_container {
     font-size: 1.8rem;
@@ -285,19 +343,6 @@
     margin-top: 10px;
 }
 
-.download_order_file_button:hover {
-    text-decoration: none;
-    color: white;
-}
-.download_order_file_button:active {
-    text-decoration: none;
-    color: white;
-}
-.download_order_file_button:focus {
-    text-decoration: none;
-    color: white;
-}
-
 #recap_delivery_date {
     font-weight: bold;
 }

orders/static/js/orders_helper.js

@@ -625,10 +625,10 @@ function set_product_npa(p_id, npa) {
 
             // Give time for modal to fade
             setTimeout(function() {
-                $(".actions_buttons_area .rights_buttons").notify(
+                $(".actions_buttons_area .right_action_buttons").notify(
                     "Produit passé en NPA !",
                     {
-                        position:"bottom right",
+                        elementPosition:"bottom right",
                         className: "success",
                         arrowShow: false
                     }
@@ -696,7 +696,7 @@ function generate_inventory() {
                 modal_create_inventory.html(),
                 () => {
                     if (is_time_to('validate_generate_inventory')) {
-                        $('#do_inventory').empty()
+                        $('#toggle_action_buttons .button_content').empty()
                             .append(`<i class="fas fa-spinner fa-spin"></i>`);
                         $.ajax({
                             type: "POST",
@@ -710,13 +710,13 @@ function generate_inventory() {
 
                                 // Give time for modal to fade
                                 setTimeout(function() {
-                                    $('#do_inventory').empty()
-                                        .append(`Faire un inventaire`);
-                                    $('#do_inventory').notify(
+                                    $('#toggle_action_buttons .button_content').empty()
+                                        .append(`Actions`);
+                                    $('#toggle_action_buttons').notify(
                                         "Inventaire créé !",
                                         {
-                                            globalPosition:"bottom center",
-                                            className: "success"
+                                            elementPosition:"bottom right",
+                                            className: "success",
                                         }
                                     );
                                 }, 200);
@@ -1641,6 +1641,8 @@ function display_products(params) {
  * Unselect all rows from datatable.
  */
 function unselect_all_rows() {
+    $("#select_all_products_cb").prop("checked", false);
+    
     products_table.rows().every(function() {
         const node = $(this.node());
 
@@ -1895,6 +1897,10 @@ $(document).ready(function() {
         init_pouchdb_sync();
 
         // Main screen
+        if (metabase_url !== '') {
+            $('#access_metabase').show();
+        }
+
         $("#coverage_form").on("submit", function(e) {
             e.preventDefault();
             if (is_time_to('submit_coverage_form', 1000)) {
@@ -1914,6 +1920,20 @@ $(document).ready(function() {
             }
         });
 
+        $("#toggle_action_buttons").on("click", function(e) {
+            $('#actions_buttons_container').toggle();
+        });
+
+        // Close dropdown menu on click outside
+        $(document).click(function(event) { 
+            let target = $(event.target);
+            if (
+                !target.closest('#actions_buttons_wrapper').length
+                && $('#actions_buttons_container').is(":visible")
+            ) {
+                $('#actions_buttons_container').hide();
+            }        
+        });
 
         $("#supplier_form").on("submit", function(e) {
             e.preventDefault();

orders/views.py

@@ -19,7 +19,8 @@ def helper(request):
         'title': 'Aide à la commande',
         'couchdb_server': settings.COUCHDB['url'],
         'db': settings.COUCHDB['dbs']['orders'],
-        'odoo_server': settings.ODOO['url']
+        'odoo_server': settings.ODOO['url'],
+        'metabase_url':  getattr(settings, 'ORDERS_HELPER_METABASE_URL', '')
     }
 
     template = loader.get_template('orders/helper.html')

templates/orders/helper.html

@@ -40,13 +40,26 @@
             <button type="button" class="btn--danger" id="back_to_order_selection_from_main">
                 <i class="fas fa-arrow-left"></i>&nbsp; Retour
             </button>
-            <div class="rights_buttons">
-                <button type="button" class='btn--danger' id="delete_order_button">
-                    Supprimer la commande
+            <div class="right_action_buttons">
+                <a class='btn--success link_as_button' id="access_metabase" style="display:none;" href="{{metabase_url}}" target="_blank">
+                    Stats Métabase
+                </a>
+                <div id="actions_buttons_wrapper">
+                    <button type="button" class='btn' id="toggle_action_buttons">
+                        <span class="button_content">
+                            Actions
+                        </span>
+                        <i class="fas fa-chevron-down toggle_action_buttons_icon"></i>
                     </button>
-                <button type="button" class='btn--primary' id="do_inventory" style="display:none;">
+                    <div id="actions_buttons_container">
+                        <button type="button" class='btn--primary action_button' id="do_inventory" style="display:none;">
                             Faire un inventaire
                         </button>
+                        <button type="button" class='btn--danger action_button' id="delete_order_button">
+                            Supprimer la commande
+                        </button>
+                    </div>
+                </div>
             </div>
         </div>
     
@@ -157,7 +170,7 @@
                 <h4 class="new_order_date_planned"></h4>
                 <div class='download_order_file'>
                     <i class="fas fa-spinner fa-spin download_order_file_loading"></i>
-                    <a class='btn--success download_order_file_button' style="display:none;" href="#">
+                    <a class='btn--success download_order_file_button link_as_button' style="display:none;" href="#">
                         Télécharger le fichier de commande
                     </a>
                 </div>
@@ -180,8 +193,8 @@
 
         <div id="modal_remove_order">
             <h3>Attention !</h3>
-            <p>
-                Vous vous apprêtez à supprimer cette commande en cours : <span class="remove_order_name"></span>.<br/>
+            <p class="remove_order_modal_text">
+                Vous vous apprêtez à <b style="color: #d9534f;">supprimer</b> cette commande en cours : <span class="remove_order_name"></span>.<br/>
             </p>
             <p>Êtez-vous sûr ?</p>
             <hr/>
@@ -287,6 +300,7 @@
     var couchdb_dbname = '{{db}}';
     var couchdb_server = '{{couchdb_server}}' + couchdb_dbname;
     var odoo_server = '{{odoo_server}}';
+    var metabase_url = '{{metabase_url}}';
 </script>
 <script src="{% static "js/all_common.js" %}?v="></script>
 <script type="text/javascript" src="{% static 'js/orders_helper.js' %}?v="></script>