[REC] create add products modal & make qties required

reception/static/css/reception_style.css

@@ -215,6 +215,57 @@ tr.odd td.row_product_no_qty {
   display: none;
 }
 
+.search_products_to_add_area {
+  margin: 2rem 0;
+}
+
+.search_product_input {
+  width: 60%;
+}
+
+.autocomplete_dropdown {
+  z-index: 10000001 !important;
+}
+
+.products_lines {
+  display: none;
+}
+
+.products_lines_title {
+  margin: 3rem 0 2rem 0;
+}
+
+.add_product_line {
+  display: flex;
+  align-items: center;
+  margin: 1rem 0;
+}
+
+.add_product_line_item {
+  width: 45%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.product_qty_input_alert {
+  color: #c9302c;
+  font-size: 1.4rem;
+  display: none;
+}
+
+.remove_line {
+  width: 10%;
+  color: #c9302c;
+  cursor: pointer;
+
+}
+
+.product_already_selected,
+.product_already_selected:hover {
+  background-color: #acb3c2;
+}
+
 /* Accordion style */
 
 /* Style the buttons that are used to open and close the accordion panel */

reception/views.py

@@ -60,6 +60,7 @@ def get_list_orders(request):
             "id"                : order["id"],
             "name"              : order["name"],
             "date_order"        : order["date_order"],
+            "partner_id"        : order["partner_id"][0],
             "partner"           : order["partner_id"][1],
             "date_planned"      : order["date_planned"],
             "amount_untaxed"    : round(order["amount_untaxed"],2),

templates/reception/reception_produits.html

@@ -4,6 +4,7 @@
 {% block additionnal_css %}
 <link rel="stylesheet" href="{% static 'css/datatables/jquery.dataTables.css' %}">
 <link rel="stylesheet" href="{% static 'css/reception_style.css' %}">
+<link rel="stylesheet" href="{% static 'jquery-ui-1.12.1/jquery-ui.min.css' %}">
 {% endblock %}
 
 {% block additionnal_scripts %}
@@ -11,6 +12,7 @@
 <script type="text/javascript" src="{% static 'js/datatables/jquery.dataTables.min.js' %}"></script>
 <script type="text/javascript" src="{% static 'js/datatables/dataTables.plugins.js' %}"></script>
 <script type="text/javascript" src="{% static 'js/jquery.pos.js' %}"></script>
+<script type="text/javascript" src="{% static 'jquery-ui-1.12.1/jquery-ui.min.js' %}?v=1651853225"></script>
 {% endblock %}
 
 {% block content %}
@@ -188,6 +190,31 @@
       est bien <b><span id="price_to_verify"></span></b> euros/Kg ?</p>
       <input type="number" name="Prix au Kilo" id="new_price_to_weight">
     </div>
+    <div id="modal_add_products">
+      <h3>Ajouter des produits à la commande</h3>
+      <div class="search_products_to_add_area">
+        <input type="text" class="search_product_input" name="search_product_input" placeholder="Rechercher un produit...">
+      </div>
+      <div class="products_lines">
+        <p class="products_lines_title">
+          Liste des produits qui seront ajoutés à la commande. 
+          <b>Vous devez renseigner une quantité pour chaque produit.</b>
+        </p>
+      </div>
+      <hr />
+    </div>
+    <div id="add_product_line_template">
+      <div class="add_product_line">
+        <div class="product_name add_product_line_item"></div>
+        <div class="product_qty add_product_line_item">
+          <input type="number" autocomplete="off" class="product_qty_input input_small" placeholder="Quantité">
+          <i class="product_qty_input_alert">Vous devez renseigner une quantité</i>
+        </div>
+        <div class="remove_line">
+          <i class="fas fa-times fa-lg remove_line_icon"></i>
+        </div>
+      </div>
+    </div>
   </div>
   <br/>
 </div>