Add popover for cart summary with options data
Signed-off-by: Egor Savkin <es@m-labs.hk>
parent
bd7e39927d
commit
712d8664f1
|
|
@ -261,6 +261,29 @@ button {
|
|||
width: 20px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
.alert-info {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.overlayVariant {
|
||||
min-width: 100px;
|
||||
height: 150px;
|
||||
overflow-y: scroll;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
text-align: left;
|
||||
background-color: white;
|
||||
color: black;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
|
||||
p {
|
||||
font-size: .875rem;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
thead, tbody, tfoot {
|
||||
|
|
|
|||
|
|
@ -6,8 +6,7 @@ import { createRoot } from "react-dom/client";
|
|||
import PropTypes from "prop-types";
|
||||
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { CustomizeButton } from "./shop_components.jsx";
|
||||
|
||||
import { CustomizeButton, CustomizeData } from "./shop_components.jsx";
|
||||
|
||||
const data = window.shop_data;
|
||||
const itemsUnfoldedList = Array.from(data.columns.backlog.categories.map(groupId => groupId.itemIds).flat());
|
||||
|
|
@ -1434,7 +1433,7 @@ class OrderSumary extends React.PureComponent {
|
|||
|
||||
<tbody>
|
||||
{summary.map((item, index) => {
|
||||
let alert, warning, options;
|
||||
let alert, warning, options, options_data;
|
||||
|
||||
if (itemsData[index] && itemsData[index].warnings) {
|
||||
alert = itemsData[index];
|
||||
|
|
@ -1444,6 +1443,7 @@ class OrderSumary extends React.PureComponent {
|
|||
}
|
||||
}
|
||||
options = itemsData[index] && itemsData[index].options;
|
||||
options_data = itemsData[index] && itemsData[index].options_data;
|
||||
|
||||
return (
|
||||
<tr key={item.id}
|
||||
|
|
@ -1471,12 +1471,8 @@ class OrderSumary extends React.PureComponent {
|
|||
className="alert-warning"
|
||||
src={`/images/${warning.icon}`}
|
||||
/>
|
||||
) : ( options ?
|
||||
(<img
|
||||
style={{'marginLeft': '10px'}}
|
||||
className="alert-info"
|
||||
src="/images/shop/icon-customize.svg"
|
||||
/>) : null
|
||||
) : ( (options && options_data) ?
|
||||
( <CustomizeData id={item.id + "options"} data={options_data} /> ) : null
|
||||
)}
|
||||
|
||||
{(!warning && !options) && (
|
||||
|
|
@ -1876,7 +1872,6 @@ class Shop extends React.PureComponent {
|
|||
};
|
||||
const clonedCart = Array.from(this.state.columns.cart.items);
|
||||
const clonedCartData = Array.from(this.state.columns.cart.itemsData);
|
||||
console.log(clonedCartData);
|
||||
for (const i in clonedCart) {
|
||||
const item = clonedCart[i];
|
||||
const item_data = clonedCartData[i];
|
||||
|
|
|
|||
|
|
@ -2,11 +2,12 @@
|
|||
|
||||
import React, {Component} from "react";
|
||||
import jsonLogic from 'json-logic-js';
|
||||
import { useState } from 'react';
|
||||
import {useState} from 'react';
|
||||
|
||||
// https://stackoverflow.com/a/70511311
|
||||
const trueTypeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
|
||||
|
||||
|
||||
class Radio extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
|
@ -276,7 +277,8 @@ export function CustomizeButton({options, data, target, id, big}) {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<img className="alert-info" src={show ? "/images/shop/icon-close.svg" : "/images/shop/icon-customize.svg"} onClick={handleClick} />
|
||||
<img className="alert-info" src={show ? "/images/shop/icon-close.svg" : "/images/shop/icon-customize.svg"}
|
||||
onClick={handleClick}/>
|
||||
<div style={{'display': show ? 'flex' : 'none'}} className={div_classes}>
|
||||
<ProcessOptions
|
||||
options={options}
|
||||
|
|
@ -289,3 +291,43 @@ export function CustomizeButton({options, data, target, id, big}) {
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function CustomizeData({id, data}) {
|
||||
const [show, setShow] = useState(false);
|
||||
const [position, setPosition] = useState({x: 0, y: 0});
|
||||
|
||||
const handleClick = (event) => {
|
||||
setPosition({x: event.clientX, y: event.clientY});
|
||||
setShow(!show);
|
||||
};
|
||||
|
||||
const stringify = (value) => {
|
||||
let value_type = trueTypeOf(value);
|
||||
if (value_type === "string") {
|
||||
return value;
|
||||
} else if (value_type === "object") {
|
||||
if (value.checked === false) {
|
||||
return "off";
|
||||
} else if (value.checked === true && value.text) {
|
||||
return value.text;
|
||||
}
|
||||
}
|
||||
return JSON.stringify(value);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<img className="alert-info" src={show ? "/images/shop/icon-close.svg" : "/images/shop/icon-customize.svg"}
|
||||
onClick={handleClick}/>
|
||||
<div style={{'display': show ? 'flex' : 'none', 'top': position.y - 170, 'left': position.x - 66}}
|
||||
className="overlayVariant card border rounded">
|
||||
<div className="card-body">
|
||||
{Array.from(Object.entries(data).map(([key, value], _) => {
|
||||
return (<p className="card-text" key={id + key}><i>{key}</i>: {stringify(value)}</p>);
|
||||
}))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue