+js/17(shop)/index.js

js/17(shop)/index.js

@@ -272,6 +272,55 @@ const actionCatById = (
         )
     );
 
+const actionOrders = () => (dispatch) =>
+    dispatch(
+        actionPromise(
+            "orders",
+            gql(`
+            query orders{
+                OrderFind(query:"[{}]"){
+                    _id total createdAt orderGoods{
+                        _id count price good{
+                            name _id price images{
+                                url
+                            }
+                        }
+                    }
+                }
+            }
+          `)
+        )
+    );
+
+const actionNewOrder =
+    (orderGoods = []) =>
+    async (dispatch, getState) => {
+        await dispatch(
+            actionPromise(
+                "newOrder",
+                gql(
+                    `mutation newOrder($order:OrderInput){
+                OrderUpsert(order:$order){
+                  _id total
+                }
+              }
+              `,
+                    {
+                        order: {
+                            orderGoods: orderGoods,
+                        },
+                    }
+                )
+            )
+        );
+        let {
+            promise: { newOrder },
+        } = getState();
+        if (newOrder.status === "FULFILLED") {
+            dispatch(actionCartClear());
+        }
+    };
+
 const actionAuthLogin = (token) => ({
     type: "AUTH_LOGIN",
     token: token,
@@ -360,7 +409,7 @@ store.subscribe(() => {
         auth: { token, payload },
     } = store.getState();
     if (token) {
-        nameDiv.innerText = payload.sub.login;
+        nameDiv.innerHTML = `<a href = "#/dashboard">${payload.sub.login}</a>`;
         authDiv.style.display = "flex";
         noAuthDiv.style.display = "none";
     } else {
@@ -383,6 +432,104 @@ store.subscribe(() => {
         }
     }
 });
+const updateCart = () => {
+    let {
+        cart,
+        auth: { token },
+    } = store.getState();
+    if (!token) {
+        return;
+    }
+    let orderGoods = [];
+    Object.entries(cart).map(([index, order]) => {
+        orderGoods[orderGoods.length] = { count: order.count, good: { _id: index } };
+    });
+    console.log(orderGoods);
+
+    main.innerHTML = "";
+    let orderList = document.createElement("div");
+    let clearButton = document.createElement("button");
+    let sum = 0;
+    let sumField = document.createElement("div");
+    let submitButton = document.createElement("button");
+
+    Object.entries(cart).length ? (submitButton.disabled = false) : (submitButton.disabled = true);
+
+    submitButton.innerText = "Buy";
+    submitButton.style.display = "block";
+    submitButton.style.marginLeft = "auto";
+    submitButton.style.marginTop = "10px";
+
+    sumField.style.marginLeft = "100%";
+    sumField.style.fontWeight = "bold";
+
+    clearButton.innerHTML = "Clear cart";
+    clearButton.style.display = "block";
+    clearButton.style.marginLeft = "auto";
+
+    Object.keys(cart).length > 0 ? (clearButton.disabled = false) : (clearButton.disabled = true);
+    Object.keys(cart).length > 0 ? (sumField.style.display = "block") : (sumField.style.display = "none");
+
+    for (let [id, order] of Object.entries(cart)) {
+        let { name, images, price } = order.good;
+        let orderWrapper = document.createElement("div");
+        orderWrapper.style.display = "flex";
+        orderWrapper.style.width = "100%";
+
+        let goodBox = document.createElement("div");
+        goodBox.style = "display:flex; flex:1;";
+        let countBox = document.createElement("div");
+        let addButton = document.createElement("button");
+        addButton.innerHTML = "+";
+
+        let removeButton = document.createElement("button");
+        removeButton.innerHTML = "-";
+
+        let deleteButton = document.createElement("button");
+        deleteButton.innerHTML = "X";
+
+        let countField = document.createElement("span");
+        countField.innerHTML = order.count;
+
+        countField.innerHTML = order.count;
+        goodBox.innerHTML = `
+        <div >
+            <div><img style="height:100px;" src = "${backendURL}/${images ? images[0].url : ""}"></div>
+            <div><h3>${name}</h3></div>
+            <div>${order.count} * ${price} = ${+order.count * +price}</div>
+        </div>
+        `;
+        sum += +order.count * +price;
+        countBox.append(addButton);
+        countBox.append(countField);
+        countBox.append(removeButton);
+        countBox.append(deleteButton);
+
+        orderWrapper.append(goodBox, countBox);
+
+        addButton.onclick = () => {
+            store.dispatch(actionCartChange(order.good, ++order.count));
+        };
+
+        removeButton.onclick = () => {
+            store.dispatch(actionCartChange(order.good, --order.count));
+        };
+
+        deleteButton.onclick = () => {
+            store.dispatch(actionCartDelete(order.good));
+        };
+
+        orderList.append(orderWrapper);
+    }
+
+    clearButton.onclick = () => store.dispatch(actionCartClear());
+    submitButton.onclick = () => store.dispatch(actionNewOrder(orderGoods));
+    sumField.innerText = sum;
+    main.append(orderList);
+    main.append(sumField);
+    main.append(clearButton);
+    main.append(submitButton);
+};
 
 window.onhashchange = () => {
     const [, route, _id] = location.hash.split("/");
@@ -434,94 +581,84 @@ window.onhashchange = () => {
                 store.dispatch(actionRegister(loginValue, passwordValue));
             };
         },
-        cart() {
-            const updateCart = () => {
-                let {
-                    cart,
-                    auth: { token },
-                } = store.getState();
-                if (!token) {
-                    return;
-                }
+        async dashboard() {
+            await store.dispatch(actionOrders());
+
+            let {
+                promise: { orders },
+                auth: { token },
+            } = store.getState();
+            if (!token || orders.status === "REJECTED") {
+                return;
+            }
 
-                main.innerHTML = "";
-                let orderList = document.createElement("div");
-                let clearButton = document.createElement("button");
-                clearButton.innerHTML = "Clear cart";
-                clearButton.style.display = "block";
-                clearButton.style.marginLeft = "auto";
-
-                Object.keys(cart).length > 0 ? (clearButton.disabled = false) : (clearButton.disabled = true);
-
-                for (let [id, order] of Object.entries(cart)) {
-                    let { name, images, price } = order.good;
-                    let orderWrapper = document.createElement("div");
-                    orderWrapper.style.display = "flex";
-                    orderWrapper.style.width = "100%";
-
-                    let goodBox = document.createElement("div");
-                    goodBox.style = "display:flex; flex:1;";
-                    let countBox = document.createElement("div");
-                    let addButton = document.createElement("button");
-                    addButton.innerHTML = "+";
-
-                    let removeButton = document.createElement("button");
-                    removeButton.innerHTML = "-";
-
-                    let deleteButton = document.createElement("button");
-                    deleteButton.innerHTML = "X";
-
-                    let countField = document.createElement("span");
-                    countField.innerHTML = order.count;
-
-                    countField.innerHTML = order.count;
-                    goodBox.innerHTML = `
-                    <div >
-                        <div><img style="height:100px;" src = "${backendURL}/${images ? images[0].url : ""}"></div>
-                        <div><h3>${name}</h3></div>
-                        <div>${order.count} * ${price} = ${+order.count * +price}</div>
-                    </div>
+            main.innerHTML = "";
+            let orderList = document.createElement("div");
+            for (let order of orders.payload) {
+                let orderBlock = document.createElement("div");
+                let orderGoodsBlock = document.createElement("div");
+                let orderHeaderBlock = document.createElement("div");
+                let orderSumBlock = document.createElement("div");
+                let createdAtBlock = document.createElement("div");
+
+                createdAtBlock.innerHTML = ("" + new Date(+order.createdAt)).slice(0, 25);
+
+                for (let orderGood of order.orderGoods) {
+                    let {
+                        count,
+                        good: { name, price, images },
+                    } = orderGood;
+                    let goodBlock = document.createElement("div");
+                    goodBlock.innerHTML = `
+                        <div style = "width:30%;">${name}</div><div  style = "width:40%;"><img  src ="${backendURL}/${
+                        images[0].url
+                    }" style="height:100px"></div><div  style = "width:30%;">${count}x${price} = ${
+                        +price * +count
+                    }</div>
                     `;
+                    goodBlock.style.display = "flex";
+                    goodBlock.style.width = "100%";
+                    goodBlock.style.marginTop = "7px";
+                    goodBlock.style.background = "#EAEAEA";
 
-                    countBox.append(addButton);
-                    countBox.append(countField);
-                    countBox.append(removeButton);
-                    countBox.append(deleteButton);
-
-                    orderWrapper.append(goodBox, countBox);
+                    orderGoodsBlock.append(goodBlock);
+                }
+                orderSumBlock.innerHTML = `<b>TOTAL</b>:${order.total}`;
 
-                    addButton.onclick = () => {
-                        store.dispatch(actionCartChange(order.good, ++order.count));
-                    };
+                orderHeaderBlock.style.padding = "10px";
+                orderHeaderBlock.style.display = "flex";
+                orderHeaderBlock.style.justifyContent = "space-between";
 
-                    removeButton.onclick = () => {
-                        store.dispatch(actionCartChange(order.good, --order.count));
-                    };
+                orderHeaderBlock.append(createdAtBlock);
+                orderHeaderBlock.append(orderSumBlock);
 
-                    deleteButton.onclick = () => {
-                        store.dispatch(actionCartDelete(order.good));
-                    };
+                orderBlock.append(orderHeaderBlock);
+                orderBlock.append(orderGoodsBlock);
 
-                    orderList.append(orderWrapper);
-                }
+                orderGoodsBlock.style.marginTop = "10px";
+                orderBlock.style.marginTop = "20px";
+                orderBlock.style.borderBottom = "1px solid black";
+                orderBlock.style.padding = "10px";
+                orderList.append(orderBlock);
+            }
 
-                clearButton.onclick = () => store.dispatch(actionCartClear());
-                main.append(orderList);
-                main.append(clearButton);
-            };
+            main.append(orderList);
+        },
+        cart() {
             updateCart();
-            store.subscribe(() => {
-                let { cart } = store.getState();
-                const [, route, _id] = location.hash.split("/");
-                if (cart && route === "cart") {
-                    updateCart();
-                }
-            });
         },
     };
 
     if (route in routes) routes[route]();
 };
+
+store.subscribe(() => {
+    let { cart } = store.getState();
+    const [, route, _id] = location.hash.split("/");
+    if (cart && route === "cart") {
+        updateCart();
+    }
+});
 window.onhashchange();
 
 store.subscribe(() => {