(44): sell customization popup

boutique/forms.py

@@ -101,8 +101,8 @@ class SellForm(forms.Form):
     mean = forms.ChoiceField(choices=settings.PAYMENT_MEANS)
 
     customization = forms.CharField(label="Perso", required=False)
-    option = forms.ChoiceField(label="Option 1", required=False)
-    second_option = forms.ChoiceField(label="Option 2", required=False)
+    option = forms.CharField(label="Option 1", required=False)
+    second_option = forms.CharField(label="Option 2", required=False)
 
     def __init__(self, *args, instance: Optional[OrderItem] = None, **kwargs) -> None:
         # adds `instance` parameter to emulate ModelForm interface
@@ -113,11 +113,14 @@ class SellForm(forms.Form):
         user = self.cleaned_data["user"]
         mean: str = self.cleaned_data["mean"]
         quantity: int = self.cleaned_data["quantity"]
+        customization: str = self.cleaned_data["customization"]
+        option: str = self.cleaned_data["option"]
+        second_option: str = self.cleaned_data["second_option"]
 
         with transaction.atomic():
             order = Order.objects.create(user=user, ordered=True)
             Payment.objects.create(mean=mean, paid=True, order=order)
-            order_item = item.add_to_order(order, quantity)
+            order_item = item.add_to_order(order, quantity, customization, option, second_option)
             order.compute_price()
             order.save()
             order.post_payment()

boutique/static/boutique/js/item_sell.js

-window.addEventListener("load", function() {
-	const list = document.querySelector(".item-sell-list");
+window.addEventListener("load", function () {
+    const list = document.querySelector(".item-sell-list");
 
-	const items = list.getElementsByTagName('li');
+    const items = list.getElementsByTagName('li');
 
-	for (var i = items.length - 1; i >= 0; i--) {
-		const item = items[i];
-		const item_id = item.dataset.pk;
+    for (var i = items.length - 1; i >= 0; i--) {
+        const item = items[i];
+        const item_id = item.dataset.pk;
+        console.log(item.dataset);
+        const button = item.lastElementChild;
+        button.addEventListener("click", function () {
+            let data = {
+                "item": item_id,
+                "user": 0,
+                "quantity": 1,
+                "mean": null,
+                "customization": '',
+                "option": '',
+                "second_option": ''
+            };
 
-		const button = item.lastElementChild;
-		button.addEventListener("click", function() {
-			let user_id = 0;
+            let customization_popup = new CustomizationPopup("Options et personalisation", item, function (quantity, customization, option, second_option) {
+                data.quantity = quantity;
+                data.customization =  customization;
+                data.option = option;
+                data.second_option = second_option;
+                mean_popup.pop();
 
-			let mean_popup = new SelectionPopup(
-				"Moyen de paiement", 
-				{"card": "Carte", "online": "Lydia", "cash": "Espèces", "check": "Chèque"},
-				function(mean) {
-					const data = {
-						"item": item_id,
-						"user": user_id,
-						"quantity": 1,
-						"mean": mean
-					};
-					queryJson("", data, function(response) {
-						add_message(response["status"], response["message"]);
-					}, "PUT");
-			});
+            });
 
-			let user_popup = new UserSelectionPopup("Client", function (uid) {
-				user_id = uid;
-				mean_popup.pop();
-			});
-			user_popup.pop();
-		});
-	}
+            let mean_popup = new SelectionPopup(
+                "Moyen de paiement",
+                {"card": "Carte", "online": "Lydia", "cash": "Espèces", "check": "Chèque"},
+                function (mean) {
+                    data.mean = mean;
+                    console.log(data);
+                    queryJson("", data, function (response) {
+                        add_message(response["status"], response["message"]);
+                    }, "PUT");
+                });
 
-	list.style.removeProperty("display");
+            let user_popup = new UserSelectionPopup("Client", function (uid, dname) {
+                console.log(uid);
+                data.user = uid;
+                customization_popup.pop();
+            });
+            user_popup.pop();
+        });
+    }
+
+    list.style.removeProperty("display");
 });

boutique/templates/boutique/item_sell.html

@@ -23,7 +23,15 @@
 
     <ul class="item-sell-list" style="display: none;">
         {% for item in form.fields.item.queryset %}
-            <li data-pk="{{ item.pk }}">
+            <li data-pk="{{ item.pk }}"
+                data-customization="{{ item.customization }}"
+                data-optionLabel="{{ item.option_label }}"
+                data-optionChoices="{{ item.option }}"
+                data-secondOptionLabel="{{ item.second_option_label }}"
+                data-secondOptionChoices="{{ item.second_option }}"
+                data-customizable="{{ item.customizable }}"
+                data-special="{{ item.special }}">
+
                 <h3>{{ item.name }}</h3>
                 <span>Prix: {{ item.price }}&nbsp;€</span>
                 <span>Prix cotisant: {{ item.price_contributor }}&nbsp;€</span>