ALC: common info textarea in orders selection screen

orders/static/css/oders_helper_style.css

@@ -56,7 +56,8 @@
 }
 
 /* - Order selection screen */
-#new_order_area {
+#new_order_area,
+#existing_orders_area {
     margin-bottom: 40px;
 }
 
@@ -167,6 +168,11 @@
     border-bottom: 1px solid #004aa6;
 }
 
+#common_info_editor_container {
+    width: 50%;
+    margin:  15px auto;
+}
+
 /* -- Order data */
 #order_data_container {
     font-size: 1.8rem;
@@ -177,7 +183,7 @@
 }
 
 #order_forms_container {
-    margin-top: 20px;
+    margin: 25px 0;
     display: flex;  
     flex-wrap: wrap;
     justify-content: space-evenly;

orders/static/js/orders_helper.js

@@ -10,10 +10,16 @@ var suppliers_list = [],
         package_qty: null,
         price: null
     },
-    qties_values = {};
+    qties_values = {},
+    clicked_order_pill = null,
+    userAgent = navigator.userAgent;
+
+timerId = null,
+info_editor = null;
 
 var dbc = null,
     sync = null,
+    fingerprint = null,
     order_doc = {
         _id: null,
         coverage_days: null,
@@ -27,11 +33,12 @@ var dbc = null,
         selected_suppliers: [],
         selected_rows: []
     },
-    fingerprint = null;
+    common_info_doc_name = "common_info",
+    info_doc = {
+        _id: null,
+        content: ""
+    };
 
-var clicked_order_pill = null;
-let userAgent = navigator.userAgent;
-var timerId = null;
 
 /* - UTILS */
 
@@ -125,7 +132,9 @@ function debounceFunction(func, delay = 1000) {
 
     timerId = setTimeout(func, delay);
 }
+
 /* - PRODUCTS */
+
 var process_new_product_qty = function(input) {
     // Remove line coloring on input blur
     const row = $(input).closest('tr');
@@ -188,6 +197,7 @@ var process_new_product_qty = function(input) {
         }
     }
 };
+
 /**
  * Add a product.
  *
@@ -2150,20 +2160,25 @@ function update_order_selection_screen() {
             // Remove listener before recreating them
                 $(".order_pill").off();
 
+                // Reset orders data
                 let existing_orders_container = $("#existing_orders");
 
                 existing_orders_container.empty();
                 $('#new_order_name').val('');
 
-                if (result.rows.length === 0) {
+                if (
+                    result.rows.length === 0
+                    || result.rows.length === 0 && result.rows[0].id === common_info_doc_name) {
                     existing_orders_container.append(`<i>Aucune commande en cours...</i>`);
                 } else {
                     for (let row of result.rows) {
-                        let template = $("#templates #order_pill_template");
+                        if (row.id !== common_info_doc_name) {
+                            let template = $("#templates #order_pill_template");
 
-                        template.find(".pill_order_name").text(row.id);
+                            template.find(".pill_order_name").text(row.id);
 
-                        existing_orders_container.append(template.html());
+                            existing_orders_container.append(template.html());
+                        }
                     }
 
                     $(".order_pill").on("click", order_pill_on_click);
@@ -2288,6 +2303,15 @@ function init_pouchdb_sync() {
                     );
                     back();
                     break;
+                } else if (doc._id === common_info_doc_name) {
+                    init_info_editor();
+                    $.notify(
+                        "Nouveau message dans le bloc d'information !",
+                        {
+                            globalPosition:"top right",
+                            className: "info"
+                        }
+                    );
                 }
             }
 
@@ -2303,6 +2327,156 @@ function init_pouchdb_sync() {
     });
 }
 
+/* - INFO AREA */
+
+/**
+ * Init the Quill module (Text editor)
+ * @param {Object} params
+ */
+function quillify(params) {
+    info_editor = new Quill(params.id, {
+        modules: {
+            toolbar: [
+                [
+                    { header: [
+                        1,
+                        2,
+                        false
+                    ] }
+                ],
+                [
+                    'bold',
+                    'italic',
+                    'underline'
+                ],
+                [
+                    { 'size': [
+                        'small',
+                        false,
+                        'large',
+                        'huge'
+                    ] }
+                ],
+                [
+                    { 'color': [] },
+                    { 'background': [] }
+                ]
+            ]
+        },
+        placeholder: "Indiquez ici un message pour le reste de l'équipe",
+        theme: 'snow'
+    });
+    info_editor.root.innerHTML = params.content;
+}
+
+/**
+ * Init object & dom for the info editor.
+ * Await retrieving content. 
+ */
+async function init_info_editor() {
+    let info_content = await get_or_create_common_info();
+
+    // Reset info editor
+    info_editor = null;
+    $("#common_info_editor_container").empty();
+    $("#common_info_editor_container").append(`<div id="common_info_editor"></div>`);
+
+    // Init text editor for Info textarea
+    let quill_params = {
+        id: '#common_info_editor',
+        content: info_content
+    };
+
+    quillify(quill_params);
+
+    $("#save_common_info").on("click", function() {
+        if (is_time_to('save_common_info', 1000)) {
+            let content = $("#common_info_editor").find('.ql-editor')
+                .html();
+
+            if (content === "<p><br></p>") {
+                content = "";
+            }
+
+            update_common_info(content);
+        }
+    });
+
+}
+
+/**
+ * Get common info HTML content. If doc doesn't exist, create & return empty string
+ * @returns String HTML content | ""
+ */
+function get_or_create_common_info() {
+    // todo await async
+    return new Promise((resolve) => {
+        dbc.get(common_info_doc_name).then((doc) => {
+            info_doc = doc;
+            resolve(doc.content);
+        })
+            .catch(function (err) {
+                if (err.status == 404) {
+                // First access, create
+                    info_doc._id = common_info_doc_name;
+                    dbc.put(info_doc, function callback(err, result) {
+                        if (!err) {
+                            info_doc._rev = result.rev;
+                        } else {
+                            $.notify(
+                                "Erreur lors de l'initialisation du bloc d'informations",
+                                {
+                                    globalPosition:"top right",
+                                    className: "error"
+                                }
+                            );
+                            console.log(err);
+                        }
+                        resolve("");
+                    });
+                } else {
+                    $.notify(
+                        "Erreur lors de la récupération du bloc d'informations",
+                        {
+                            globalPosition:"top right",
+                            className: "error"
+                        }
+                    );
+                    console.log(err);
+                    resolve("");
+                }
+            });
+    });
+}
+
+/**
+ * Update couchdb info document with textarea (HTML) content
+ * @param {String} content
+ */
+function update_common_info(content) {
+    info_doc.content = content;
+    dbc.put(info_doc, function callback(err, result) {
+        if (!err) {
+            info_doc._rev = result.rev;
+            $.notify(
+                "Bloc d'informations mis à jour",
+                {
+                    globalPosition:"top right",
+                    className: "success"
+                }
+            );
+        } else {
+            $.notify(
+                "Erreur lors de la mise à jour du bloc d'informations",
+                {
+                    globalPosition:"top right",
+                    className: "error"
+                }
+            );
+            console.log(err);
+        }
+    });
+}
 
 $(document).ready(function() {
     if (coop_is_connected()) {
@@ -2555,6 +2729,7 @@ $(document).ready(function() {
 
         // Order selection screen
         update_order_selection_screen();
+        init_info_editor();
 
         $("#new_order_form").on("submit", function(e) {
             e.preventDefault();
@@ -2585,8 +2760,6 @@ $(document).ready(function() {
                 $("#supplier_input").autocomplete({
                     source: suppliers_list.map(a => a.display_name)
                 });
-
-
             },
             error: function(data) {
                 err = {msg: "erreur serveur lors de la récupération des fournisseurs", ctx: 'get_suppliers'};
@@ -2694,7 +2867,6 @@ $(document).ready(function() {
                 }
             });
         }
-
     } else {
         $('#not_connected_content').show();
     }

templates/orders/helper.html

@@ -5,12 +5,14 @@
 <link rel="stylesheet" href="{% static 'css/datatables/jquery.dataTables.css' %}">
 <link rel="stylesheet" href="{% static 'jquery-ui-1.12.1/jquery-ui.min.css' %}">
 <link rel="stylesheet" href="{% static 'css/oders_helper_style.css' %}">
+<link rel="stylesheet" href="{% static 'quill/quill.snow.css' %}">
 {% endblock %}
 
 {% block additionnal_scripts %}
 <script type="text/javascript" src="{% static 'jquery-ui-1.12.1/jquery-ui.min.js' %}?v="></script>
 <script type="text/javascript" src="{% static 'js/datatables/jquery.dataTables.min.js' %}"></script>
 <script type="text/javascript" src="{% static 'js/notify.min.js' %}?v="></script>
+<script type="text/javascript" src="{% static 'quill/quill.min.js' %}"></script>
 {% endblock %}
 
 {% block content %}
@@ -33,6 +35,13 @@
             <h2>Ou, continuer une commande en cours de création</h2>
             <div id="existing_orders"></div>
         </div>
+        <div id="common_info_area">
+            <h2>Informations</h2>
+            <div id="common_info_editor_container"> 
+                <div id="common_info_editor"></div>
+            </div>
+            <button class="btn--primary" id="save_common_info">Sauvegarder</button>
+        </div>
     </div>
 
     <div id="main_content" class="page_content" style="display:none;">
@@ -41,7 +50,6 @@
                 <i class="fas fa-arrow-left"></i>&nbsp; Retour
             </button>
             <div class="right_action_buttons">
-                
                 <div id="actions_buttons_wrapper">
                     <button type="button" class='btn--primary' id="toggle_action_buttons">
                         <span class="button_content">
@@ -214,7 +222,7 @@
             <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>
+            <p>Êtez-vous sûr.e ?</p>
             <hr/>
         </div>
     
@@ -225,7 +233,7 @@
                 Les produits associés uniquement à ce fournisseur seront supprimés du tableau.<br/>
                 Les données renseignées dans la colonne de ce fournisseur seront perdues.
             </p>
-            <p>Êtez-vous sûr ?</p>
+            <p>Êtez-vous sûr.e ?</p>
             <hr/>
         </div>
     
@@ -251,7 +259,7 @@
             <p> 
                 L'association sera sauvegardée dès que vous aurez cliqué sur "Valider".<br/>
             </p>
-            <p>Êtez-vous sûr ?</p>
+            <p>Êtez-vous sûr.e ?</p>
             <hr/>
         </div>
 
@@ -264,7 +272,7 @@
             <p> 
                 L'association sera supprimée dès que vous aurez cliqué sur "Valider".<br/>
             </p>
-            <p>Êtez-vous sûr ?</p>
+            <p>Êtez-vous sûr.e ?</p>
             <hr/>
         </div>
     
@@ -272,7 +280,7 @@
             <p> 
                 Vous vous apprêtez à créer un inventaire de <span class="inventory_products_count"></span> produits.
             </p>
-            <p>Êtez-vous sûr ?</p>
+            <p>Êtez-vous sûr.e ?</p>
             <hr/>
         </div>