Fixed initial display of empty options in the options summary

Signed-off-by: Egor Savkin <es@m-labs.hk>
pull/93/head
Egor Savkin 2023-09-18 11:49:56 +08:00
parent 840b0223a7
commit 79e4253e0f
2 changed files with 8 additions and 23 deletions

View File

@ -708,23 +708,14 @@ class ProductCartItem extends React.PureComponent {
big={data.size === "big"} big={data.size === "big"}
target={{ target={{
construct: ((outvar, value) => { construct: ((outvar, value) => {
console.log("construct", outvar, value, options_data); // console.log("construct", outvar, value, options_data);
options_data[outvar] = value; options_data[outvar] = value;
this.setState(options_data); this.setState(options_data);
}), }),
update: ((outvar, value) => { update: ((outvar, value) => {
console.log("update", outvar, value, options_data); // console.log("update", outvar, value, options_data);
if (outvar in options_data) options_data[outvar] = value; if (outvar in options_data) options_data[outvar] = value;
this.setState(options_data); this.setState(options_data);
}),
unmount: ((outvar) => {
console.log("delete", outvar);
//let opt_data = this.state;
//delete opt_data[outvar];
//this.setState(opt_data);
// TODO this needs to be stopped when the whole card getting unmounted
//if (this.state.alive)
// delete options_data[outvar];
}) })
}} }}
/>) : null) } />) : null) }
@ -1442,9 +1433,6 @@ class OrderSumary extends React.PureComponent {
} }
options = itemsData[index] && itemsData[index].options; options = itemsData[index] && itemsData[index].options;
options_data = itemsData[index] && itemsData[index].options_data; options_data = itemsData[index] && itemsData[index].options_data;
let options_data_clone = Object.assign({}, options_data)
let display_options = FilterOptions(options, options_data_clone); // TODO fix faulty display
console.log(options, options_data, display_options)
return ( return (
<tr key={item.id} <tr key={item.id}
@ -1473,7 +1461,7 @@ class OrderSumary extends React.PureComponent {
src={`/images/${warning.icon}`} src={`/images/${warning.icon}`}
/> />
) : ( (options && options_data) ? ) : ( (options && options_data) ?
( <OptionsSummaryPopup id={item.id + "options"} data={display_options} /> ) : null ( <OptionsSummaryPopup id={item.id + "options"} options={options} data={options_data} /> ) : null
)} )}
{(!warning && !options) && ( {(!warning && !options) && (
@ -1728,7 +1716,6 @@ class Shop extends React.PureComponent {
} }
handleDeleteItem(index) { handleDeleteItem(index) {
console.log(this.state.columns.cart.items)
let cloned = Array.from(this.state.columns.cart.items); let cloned = Array.from(this.state.columns.cart.items);
let cloned_data = Array.from(this.state.columns.cart.itemsData); let cloned_data = Array.from(this.state.columns.cart.itemsData);
cloned.splice(index, 1); cloned.splice(index, 1);
@ -1851,7 +1838,7 @@ class Shop extends React.PureComponent {
const item_data = clonedCartData[i]; const item_data = clonedCartData[i];
crate.items.push({ crate.items.push({
'pn': item.name_number, 'pn': item.name_number,
'options': (item_data.options_data && item_data.options) ? FilterOptions(item_data.options, item_data.options_data) : null, // TODO 'options': (item_data.options_data && item_data.options) ? FilterOptions(item_data.options, item_data.options_data) : null,
}); });
} }
@ -1936,7 +1923,7 @@ class Shop extends React.PureComponent {
const item_data = clonedCartData[i]; const item_data = clonedCartData[i];
crate.items.push({ crate.items.push({
'pn': item.name_number, 'pn': item.name_number,
'options': item_data.options_data ? item_data.options_data : null, 'options': (item_data.options_data && item_data.options) ? FilterOptions(item_data.options, item_data.options_data) : null,
}); });
} }

View File

@ -336,7 +336,6 @@ export function ProcessOptions({options, data, target, id}) {
export function FilterOptions(options, data) { export function FilterOptions(options, data) {
let options_t = trueTypeOf(options); let options_t = trueTypeOf(options);
let target = {}; let target = {};
console.log(options, data);
if (options_t === "array") { if (options_t === "array") {
options.map((option_item, _) => { options.map((option_item, _) => {
@ -348,7 +347,6 @@ export function FilterOptions(options, data) {
(trueTypeOf(options.args) === "object" || trueTypeOf(options.items) === "array") (trueTypeOf(options.args) === "object" || trueTypeOf(options.items) === "array")
) { ) {
if (options.type in componentsList) { if (options.type in componentsList) {
console.log(options.args.outvar, data[options.args.outvar], data);
target[options.args.outvar] = data[options.args.outvar]; target[options.args.outvar] = data[options.args.outvar];
} else if (options.type === "Group") { } else if (options.type === "Group") {
Object.assign(target, FilterOptions(jsonLogic.apply(options.items, data), data)) Object.assign(target, FilterOptions(jsonLogic.apply(options.items, data), data))
@ -357,7 +355,6 @@ export function FilterOptions(options, data) {
Object.assign(target, FilterOptions(jsonLogic.apply(options, data), data)) Object.assign(target, FilterOptions(jsonLogic.apply(options, data), data))
} }
} }
console.log(target)
return target return target
} }
@ -391,10 +388,11 @@ export function OptionsDialogPopup({options, data, target, id, big}) {
); );
} }
export function OptionsSummaryPopup({id, data}) { export function OptionsSummaryPopup({id, options, data}) {
const [show, setShow] = useState(false); const [show, setShow] = useState(false);
const [position, setPosition] = useState({x: 0, y: 0}); const [position, setPosition] = useState({x: 0, y: 0});
const [size, setSize] = useState({w: 0, h: 0}); const [size, setSize] = useState({w: 0, h: 0});
let display_options = FilterOptions(options, data);
const close = () => { const close = () => {
setShow(false); setShow(false);
document.removeEventListener("scroll", handleScroll, true); document.removeEventListener("scroll", handleScroll, true);
@ -472,7 +470,7 @@ export function OptionsSummaryPopup({id, data}) {
className="overlayVariant card border rounded" className="overlayVariant card border rounded"
id={id}> id={id}>
<div className="card-body"> <div className="card-body">
{Array.from(Object.entries(data) {Array.from(Object.entries(display_options)
.filter(([key, value], _) => key !== "ext_data") .filter(([key, value], _) => key !== "ext_data")
.map(([key, value], _) => { .map(([key, value], _) => {
return (<p className="card-text" key={id + key}><i>{key}</i>: {stringify(value)}</p>); return (<p className="card-text" key={id + key}><i>{key}</i>: {stringify(value)}</p>);