orders/static/css/oders_helper_style.css

@@ -2,16 +2,56 @@
     position: relative;
 }
 
-#form_container {
-    margin-top: 30px;
+.page_content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
 }
 
-#products_table_filter{
-    text-align: right !important;
+/* - Common */
+
+
+/* - Order selection screen */
+#new_order_form {
+    margin-top: 20px;
+    margin-bottom: 30px;
 }
 
-#products_table_filter input{
-    height: 40px;
+#existing_orders {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    width: 80%;
+    margin: 0 auto;
+    padding-top: 20px;
+}
+
+.order_pill {
+    border-radius: 30px;
+    min-width: 200px;
+    min-height: 40px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 8px;
+    margin: 0 10px 5px 0;
+}
+
+/* - Main screen */
+
+/* -- Top right action button(s) */
+#actions_buttons_area {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+/* -- Supplier form */
+#supplier_form_container {
+    margin-top: 30px;
 }
 
 #supplier_input {
@@ -20,17 +60,13 @@
     border-radius: 5px;
 }
 
-.product_qty_input {
-    width: 100px;
-}
-
-.product_not_from_supplier {
-    background-color: #e7e9ed;
-    cursor: pointer;
+/* -- Table */
+#products_table_filter{
+    text-align: right !important;
 }
 
-.product_name, .supplier_name {
-    font-weight: bold;
+#products_table_filter input{
+    height: 40px;
 }
 
 #table_header_select_all{
@@ -44,10 +80,24 @@
     margin-left: 5px;
 }
 
+.product_qty_input {
+    width: 100px;
+}
+
+.product_not_from_supplier {
+    background-color: #e7e9ed;
+    cursor: pointer;
+}
+
+.product_name, .supplier_name {
+    font-weight: bold;
+}
+
 .select_product_cb {
     cursor: pointer;
 }
 
+/* -- Suppliers list */
 #suppliers_container {
     display: flex;
     justify-content: center;
@@ -74,9 +124,3 @@
     margin-left: 5px;
     cursor: pointer;
 }
\ No newline at end of file
-
-#actions_buttons_area {
-    position: absolute;
-    top: 0;
-    right: 0;
-}

orders/views.py

@@ -16,6 +16,8 @@ def index(request):
 def helper(request):
     context = {
         'title': 'Aide à la commande',
+        'couchdb_server': settings.COUCHDB['url'],
+        'db': settings.COUCHDB['dbs']['orders']
     }
 
     template = loader.get_template('orders/helper.html')

outils/settings_secret_example.py

@@ -13,7 +13,8 @@ COUCHDB = {
               'member': 'coops',
               'inventory': 'inventory',
               'envelops': 'envelop',
-              'shop': 'shopping_carts'
+              'shop': 'shopping_carts',
+              'orders': 'orders_test'
             }
 }
 

templates/orders/helper.html

@@ -15,6 +15,20 @@
 
 {% block content %}
 <div class="page_body">
+    <div id="select_order_content" class="page_content txtcenter">
+        <h2>Créer une nouvelle commande</h2>
+        <form id="new_order_form">
+            <input type="text" id="new_order_name" placeholder="Nom de la commande...">
+            <button type="submit" class="btn btn--primary">Valider</button>
+        </form>
+        <h2>Ou, continuer une commande existante</h2>
+        <div id="existing_orders"></div>
+    </div>
+
+    <div id="main_content" class="page_content" style="display:none;">
+        <div id="back_to_order_selection">
+            <button type="button" class="btn--danger"><i class="fas fa-arrow-left"></i>&nbsp; Retour</button>
+        </div>
         <div id="actions_buttons_area">
             <button type="button" class='btn--primary' id="do_inventory">Faire un inventaire</button>
         </div>
@@ -23,7 +37,7 @@
             <h1>Aide à la commande</h1>
         </div>
     
-    <div class="txtcenter" id="form_container">
+        <div class="txtcenter" id="supplier_form_container">
             <form action="javascript:;" id="supplier_form">
                 <input type="text" name="supplier" id="supplier_input" placeholder="Rechercher un fournisseur par son nom">
                 <button type="submit" class='btn--primary'>Ajouter le fournisseur</button>
@@ -37,10 +51,10 @@
                 <table id="products_table" class="display" cellspacing="0" width="100%"></table>
             </div>
         </div>
-</div>
+    </div>
 
-<div id="templates" style="display:none;">
-    <div id="supplier_pill">
+    <div id="templates" style="display:none;">
+        <div id="supplier_pill_template">
             <div class="supplier_pill">
                 <div class="supplier_name_container">
                     <span class="pill_supplier_name"></span>
@@ -49,6 +63,12 @@
             </div>
         </div>
 
+        <div id="order_pill_template">
+            <div class="pill order_pill btn btn--primary">
+                <span class="pill_order_name"></span>
+            </div>
+        </div>
+    
         <div id="modal_remove_supplier">
             <h3>Attention !</h3>
             <p>
@@ -77,8 +97,15 @@
             <p>Êtez-vous sûr ?</p>
             <hr/>
         </div>
+    </div>
 </div>
 
+
+<script src="{% static "js/pouchdb.min.js" %}"></script>
+<script type="text/javascript">
+    var couchdb_dbname = '{{db}}';
+    var couchdb_server = '{{couchdb_server}}' + couchdb_dbname;
+</script>
 <script src="{% static "js/all_common.js" %}?v="></script>
 <script type="text/javascript" src="{% static 'js/orders_helper.js' %}?v="></script>
 {% endblock %}