(44): add customization column

boutique/templates/boutique/delivery.html

@@ -13,38 +13,41 @@
 {% block main %}
     <h1>Livraison</h1>
     <script>
-            var url = new URL(window.location.href);
+        var url = new URL(window.location.href);
         console.log(url.searchParams)
-    function applyFilter(){
 
-        url.searchParams.set('delivered', document.getElementById('delivered').checked);
-        url.searchParams.set('delivery_in_progress', document.getElementById('delivery_in_progress').checked);
-        window.location.href = url
+        function applyFilter() {
+
+            url.searchParams.set('delivered', document.getElementById('delivered').checked);
+            url.searchParams.set('delivery_in_progress', document.getElementById('delivery_in_progress').checked);
+            window.location.href = url
         }
 
     </script>
     <form>
-    <label for="delivered">Déjà remis</label>
-    <input type="checkbox" id="delivered">
+        <label for="delivered">Déjà remis</label>
+        <input type="checkbox" id="delivered">
         <label for="delivery_in_progress">Distribution en cours</label>
-    <input type="checkbox" id="delivery_in_progress">
-        </form>
-            <button onclick="applyFilter()">Appliquer</button>
+        <input type="checkbox" id="delivery_in_progress">
+    </form>
+    <button onclick="applyFilter()">Appliquer</button>
 
     <div id="deliveries"></div>
 
     <script>
-        window.addEventListener('load', function(){
-            var orderedItemList = new OrderedItemList('deliveries', '/boutique/ordered_items', function(item){
-                function sendMail(){
+        window.addEventListener('load', function () {
+            var params = new URLSearchParams();
+            params.append('delivered', document.getElementById('delivered').checked);
+            params.append('delivery_in_progress', document.getElementById('delivery_in_progress').checked);
+            var orderedItemList = new OrderedItemList('deliveries', '/boutique/ordered_items?'+params.toString(), function() {
+                function sendMail() {
                     console.log(1)
                 };
-                function viewProfile(){
+                function viewProfile() {
                     console.log(2)
                 };
                 return [
-                    new OrderedItemList.ItemAction('Envoyer un email', sendMail),
-                    new OrderedItemList.ItemAction('Voir le profil', viewProfile),
+                    new OrderedItemList.ItemAction('Remettre', sendMail),
                 ];
             });
         });
@@ -54,8 +57,8 @@
 {% endblock %}
 
 {% block scripts %}
-<script src="{% static 'boutique/js/deliver.js' %}" ></script>
-        <script src="{% static 'js/json_request.js' %}"></script>
+    <script src="{% static 'boutique/js/deliver.js' %}"></script>
+    <script src="{% static 'js/json_request.js' %}"></script>
     <script src="{% static 'js/table_list.js' %}"></script>
     <script src="{% static 'js/ordered_items.js' %}"></script>
 {% endblock %}

boutique/views.py

@@ -608,7 +608,12 @@ def orderedItems(request: HttpRequest) -> HttpResponse:
              "image": str(orderItem.item.image),
              "display_name": str(orderItem.order.user.profile),
              "quantity": orderItem.quantity,
-             "quantity_delivered": orderItem.quantity_delivered
+             "quantity_delivered": orderItem.quantity_delivered,
+             "option_label": orderItem.item.option_label,
+             "option": orderItem.option,
+             "second_option_label": orderItem.item.second_option_label,
+             "second_option": orderItem.second_option,
+             "customization": orderItem.customization,
              }
             for orderItem in OrderItem.objects.filter(
             beeing_delivered=True,

static/js/ordered_items.js

@@ -12,9 +12,10 @@
             value: function (json) {
                 this.elems = json['orderedItems']
                 var header = document.createElement('tr');
-                header.appendChild(document.createElement('th')).appendChild(document.createTextNode('Photo'));
+                header.appendChild(document.createElement('th'));
                 header.appendChild(document.createElement('th')).appendChild(document.createTextNode('Produit'));
                 header.appendChild(document.createElement('th')).appendChild(document.createTextNode('Client'));
+                header.appendChild(document.createElement('th')).appendChild(document.createTextNode('Personalisation'));
                 header.appendChild(document.createElement('th')).appendChild(document.createTextNode('Remis'));
                 header.appendChild(document.createElement('th'));
                 this.header.appendChild(header);
@@ -26,21 +27,35 @@
                     var pictureContainer = document.createElement('div');
                     pictureContainer.setAttribute('class', 'picture_container');
                     pictureContainer.setAttribute('style', 'background-color: ' + item['color']);
-                    var nameContainer = document.createElement('div');
-                    nameContainer.appendChild(document.createTextNode(item['display_name']));
                     var actionContainer = document.createElement('div');
                     actionContainer.setAttribute('class', 'action_container');
 
+                    var customization = document.createElement('td');
+                    if (item['customization'] !== '') customization.appendChild(document.createElement('div'))
+                        .appendChild(document.createTextNode(item['customization']));
+                    if (item['option_label'] !== '') customization.appendChild(document.createElement('div'))
+                        .appendChild(document.createTextNode(item['option_label'] + ' : ' + item['option']));
+                    if (item['seccon_option_label'] !== '') customization.appendChild(document.createElement('div'))
+                        .appendChild(document.createTextNode( item['second_option_label'] + ' : ' + item['second_option']));
+
+
+                    if (this.onElemBuild) {
+                        var actions = this.onElemBuild();
+                        for (var i in actions) {
+                            actionContainer.appendChild(actions[i].element);
+                        }
+                    }
 
                     item.element = document.createElement('tr');
-                    item.element.appendChild(document.createElement('td')).appendChild(document.createElement('img'))
-                        .setAttribute('src', '/medias/'+item['image']);
+                    pictureContainer.appendChild(document.createElement('td')).appendChild(document.createElement('img'))
+                        .setAttribute('src', '/medias/' + item['image']);
+                    item.element.appendChild(pictureContainer);
                     item.element.appendChild(document.createElement('td')).appendChild(document.createTextNode(item['item']));
                     item.element.appendChild(document.createElement('td')).appendChild(document.createTextNode(item['display_name']));
-                    item.element.appendChild(document.createElement('td')).appendChild(document.createTextNode(item['quantity_delivered']+' / '+item['quantity']));
-                    item.element.appendChild(document.createElement('td')).appendChild(document.createTextNode('remettre'));
+                    item.element.appendChild(document.createElement('td')).appendChild(customization);
+                    item.element.appendChild(document.createElement('td')).appendChild(document.createTextNode(item['quantity_delivered'] + ' / ' + item['quantity']));
+                    item.element.appendChild(document.createElement('td')).appendChild(actionContainer);
 
-                    console.log(item);
                     this.body.appendChild(item.element);
                 }