forked from M-Labs/web2019
Somewhat minimal working example
Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
parent
9edf410e4d
commit
ec2c0a3b80
|
|
@ -17,6 +17,8 @@ export function Cart({crate_index}) {
|
||||||
crate: state.crates[crate_index]
|
crate: state.crates[crate_index]
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
console.log(resource_counters, crate)
|
||||||
|
|
||||||
const nbrOccupied = hp_to_slots(resource_counters.hp(crate.items, -1));
|
const nbrOccupied = hp_to_slots(resource_counters.hp(crate.items, -1));
|
||||||
const nbrSlots = hp_to_slots(crate_type_to_hp(crate.crate_mode));
|
const nbrSlots = hp_to_slots(crate_type_to_hp(crate.crate_mode));
|
||||||
console.log(nbrOccupied, nbrSlots);
|
console.log(nbrOccupied, nbrSlots);
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import {OrderSummary} from "./OrderSummary";
|
import {OrderSummary} from "./OrderSummary.jsx";
|
||||||
import {OrderForm} from "./OrderForm";
|
import {OrderForm} from "./OrderForm.jsx";
|
||||||
import {CrateList} from "./CrateList";
|
import {CrateList} from "./CrateList.jsx";
|
||||||
import {useShopStore} from "./shop_store";
|
import {useShopStore} from "./shop_store";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -40,7 +40,7 @@ export function OrderPanel({title, description}) {
|
||||||
<CrateList/>
|
<CrateList/>
|
||||||
|
|
||||||
<section className="summary">
|
<section className="summary">
|
||||||
<OrderSummary/>
|
|
||||||
|
|
||||||
<OrderForm/>
|
<OrderForm/>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -24,10 +24,10 @@ export function ProductCartItem({card_index, crate_index, ext_data, first, last,
|
||||||
let options, options_data;
|
let options, options_data;
|
||||||
//const warnings = data && data.show_warnings;
|
//const warnings = data && data.show_warnings;
|
||||||
|
|
||||||
if (data && data.options) {
|
if (card && card.options) {
|
||||||
options = data.options;
|
options = card.options;
|
||||||
if (!data.options_data) crate.options_data = {};
|
if (!card.options_data) card.options_data = {};
|
||||||
options_data = crate.options_data;
|
options_data = card.options_data;
|
||||||
options_data.ext_data = ext_data;
|
options_data.ext_data = ext_data;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,577 +1,49 @@
|
||||||
import React, {PureComponent} from 'react';
|
import React from 'react';
|
||||||
import PropTypes from "prop-types";
|
|
||||||
import {FilterOptions} from "./options/utils";
|
|
||||||
import {v4 as uuidv4} from "uuid";
|
|
||||||
import {DragDropContext} from "@hello-pangea/dnd";
|
import {DragDropContext} from "@hello-pangea/dnd";
|
||||||
|
|
||||||
import {copyFromBacklog, itemsUnfoldedList, nbrOccupiedSlotsInCrate, remove, reorder} from "./utils";
|
|
||||||
|
|
||||||
import {Layout} from "./Layout.jsx";
|
import {Layout} from "./Layout.jsx";
|
||||||
import {Backlog} from "./Backlog.jsx";
|
import {Backlog} from "./Backlog.jsx";
|
||||||
import {OrderPanel} from "./OrderPanel.jsx";
|
import {OrderPanel} from "./OrderPanel.jsx";
|
||||||
import {OrderSummary} from "./OrderSummary.jsx";
|
import {useShopStore} from "./shop_store";
|
||||||
import {OrderForm} from "./OrderForm.jsx";
|
|
||||||
import {TriggerCrateWarnings, TriggerWarnings} from "./warnings";
|
|
||||||
import {FillResources} from "./count_resources";
|
|
||||||
import {CrateList} from "./CrateList.jsx";
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Component that render the entire shop
|
* Component that render the entire shop
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export function Shop() {
|
export function Shop() {
|
||||||
|
const {addCardFromBacklog, moveCard, deleteCard} = useShopStore(state => ({
|
||||||
static get propTypes() {
|
addCardFromBacklog: state.addCardFromBacklog,
|
||||||
return {
|
moveCard: state.moveCard,
|
||||||
data: PropTypes.object.isRequired,
|
deleteCard: state.deleteCard
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = this.props.data;
|
|
||||||
this.handleCrateModeChange = this.handleCrateModeChange.bind(this);
|
|
||||||
this.handleOnDragEnd = this.handleOnDragEnd.bind(this);
|
|
||||||
this.handleDeleteItem = this.handleDeleteItem.bind(this);
|
|
||||||
this.handleDeleteAllItems = this.handleDeleteAllItems.bind(this);
|
|
||||||
this.handleMouseEnterItem = this.handleMouseEnterItem.bind(this);
|
|
||||||
this.handleMouseLeaveItem = this.handleMouseLeaveItem.bind(this);
|
|
||||||
this.handleClickAddItem = this.handleClickAddItem.bind(this);
|
|
||||||
this.checkAlertsInNewState = this.checkAlertsInNewState.bind(this);
|
|
||||||
this.handleClickSelectItem = this.handleClickSelectItem.bind(this);
|
|
||||||
this.handleClickSubmit = this.handleClickSubmit.bind(this);
|
|
||||||
this.handleToggleOverlayRemove = this.handleToggleOverlayRemove.bind(this);
|
|
||||||
this.handleShowOverlayRemove = this.handleShowOverlayRemove.bind(this);
|
|
||||||
this.handleClickToggleMobileSideMenu = this.handleClickToggleMobileSideMenu.bind(this);
|
|
||||||
this.handleClickCloseRFQFeedback = this.handleClickCloseRFQFeedback.bind(this);
|
|
||||||
this.handleClickShowOrder = this.handleClickShowOrder.bind(this);
|
|
||||||
this.handleClickOpenImport = this.handleClickOpenImport.bind(this);
|
|
||||||
this.handleLoadCustomConf = this.handleLoadCustomConf.bind(this);
|
|
||||||
this.onAddCrate = this.onAddCrate.bind(this);
|
|
||||||
this.onDeleteCrate = this.onDeleteCrate.bind(this);
|
|
||||||
this.onCrateModeChange = this.onCrateModeChange.bind(this);
|
|
||||||
this.onCrateSelected = this.onCrateSelected.bind(this);
|
|
||||||
this.onCrateChanged = this.onCrateChanged.bind(this);
|
|
||||||
|
|
||||||
this.timer = null;
|
|
||||||
this.timer_remove = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
const source = {
|
|
||||||
droppableId: 'backlog',
|
|
||||||
indexes: [
|
|
||||||
itemsUnfoldedList.findIndex(element => element === "eem_pwr_mod"),
|
|
||||||
itemsUnfoldedList.findIndex(element => element === "kasli")
|
|
||||||
],
|
|
||||||
};
|
|
||||||
const destination = {
|
|
||||||
droppableId: 'crate0',
|
|
||||||
index: 0,
|
|
||||||
};
|
|
||||||
|
|
||||||
this.handleOnDragEnd({
|
|
||||||
source,
|
|
||||||
destination
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidUpdate(prevProps, prevState) {
|
|
||||||
/**
|
|
||||||
* We check alerts (reminder + warning) only when items inside crate or
|
|
||||||
* crate mode change.
|
|
||||||
*
|
|
||||||
* In the function checkAlerts, we DO NOT want to change items as we will
|
|
||||||
* trigger again this function (componentDidUpdate) and thus,
|
|
||||||
* making an infinite loop.
|
|
||||||
*/
|
|
||||||
console.log("componentDidUpdate")
|
|
||||||
return;
|
|
||||||
if (
|
|
||||||
(prevState.columns.crates !== this.state.columns.crates.items) ||
|
|
||||||
(prevState.currentMode !== this.state.currentMode)
|
|
||||||
) {
|
|
||||||
this.checkAlerts(this.state.columns.cart.items);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
if (this.state.newCardJustAdded) {
|
|
||||||
this.timer = setTimeout(() => {
|
|
||||||
this.setState({
|
|
||||||
newCardJustAdded: false,
|
|
||||||
});
|
|
||||||
}, 2000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
clearTimeout(this.timer);
|
|
||||||
}
|
|
||||||
|
|
||||||
onCrateChanged(crate_id) {
|
|
||||||
// kinda silly that hover over cards triggers checkAlerts
|
|
||||||
|
|
||||||
this.checkAlertsInNewState(crate_id, this.state);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
handleCrateModeChange(mode) {
|
|
||||||
this.setState({
|
|
||||||
currentMode: mode,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
handleDeleteItem(index) {
|
|
||||||
let cloned = Array.from(this.state.columns.cart.items);
|
|
||||||
let cloned_data = Array.from(this.state.columns.cart.itemsData);
|
|
||||||
cloned.splice(index, 1);
|
|
||||||
cloned_data.splice(index, 1);
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
...this.state,
|
|
||||||
columns: {
|
|
||||||
...this.state.columns,
|
|
||||||
cart: {
|
|
||||||
...this.state.columns.cart,
|
|
||||||
items: cloned,
|
|
||||||
itemsData: cloned_data,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
handleDeleteAllItems() {
|
|
||||||
this.setState({
|
|
||||||
...this.state,
|
|
||||||
columns: {
|
|
||||||
...this.state.columns,
|
|
||||||
cart: {
|
|
||||||
...this.state.columns.cart,
|
|
||||||
items: [],
|
|
||||||
itemsData: []
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
handleMouseEnterItem(id) {
|
|
||||||
this.setState({
|
|
||||||
...this.state,
|
|
||||||
currentItemHovered: id,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
handleMouseLeaveItem() {
|
|
||||||
this.setState({
|
|
||||||
...this.state,
|
|
||||||
currentItemHovered: null,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
handleClickAddItem(index, tap) {
|
|
||||||
const source = {
|
|
||||||
droppableId: 'backlog',
|
|
||||||
index: index,
|
|
||||||
};
|
|
||||||
const destination = {
|
|
||||||
droppableId: 'cart',
|
|
||||||
index: this.state.columns.cart.items.length,
|
|
||||||
};
|
|
||||||
|
|
||||||
this.handleOnDragEnd({
|
|
||||||
source,
|
|
||||||
destination
|
|
||||||
}, tap);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleClickSelectItem(index) {
|
|
||||||
const itemsCloned = Array.from(this.state.columns.cart.items);
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
...this.state,
|
|
||||||
columns: {
|
|
||||||
...this.state.columns,
|
|
||||||
cart: {
|
|
||||||
...this.state.columns.cart,
|
|
||||||
items: itemsCloned.map((item, id) => {
|
|
||||||
return {...item, selected: id === index ? true : false};
|
|
||||||
}),
|
|
||||||
}
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
handleToggleOverlayRemove(index, show) {
|
|
||||||
const itemsCloned = Array.from(this.state.columns.cart.items);
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
...this.state,
|
|
||||||
columns: {
|
|
||||||
...this.state.columns,
|
|
||||||
cart: {
|
|
||||||
...this.state.columns.cart,
|
|
||||||
items: itemsCloned.map((item, id) => {
|
|
||||||
return {
|
|
||||||
...item,
|
|
||||||
showOverlayRemove: id === index ? show : false
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
}
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
handleShowOverlayRemove(index) {
|
|
||||||
if (this.timer_remove)
|
|
||||||
clearTimeout(this.timer_remove);
|
|
||||||
|
|
||||||
this.handleToggleOverlayRemove(index, true);
|
|
||||||
|
|
||||||
this.timer_remove = setTimeout(() => {
|
|
||||||
this.handleToggleOverlayRemove(index, false);
|
|
||||||
}, 2000);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleClickShowOrder() {
|
|
||||||
const crate = {
|
|
||||||
items: [],
|
|
||||||
type: this.state.currentMode,
|
|
||||||
};
|
|
||||||
const clonedCart = Array.from(this.state.columns.cart.items);
|
|
||||||
const clonedCartData = Array.from(this.state.columns.cart.itemsData);
|
|
||||||
for (const i in clonedCart) {
|
|
||||||
const item = clonedCart[i];
|
|
||||||
const item_data = clonedCartData[i];
|
|
||||||
crate.items.push({
|
|
||||||
'pn': item.name_number,
|
|
||||||
'options': (item_data.options_data && item_data.options) ? FilterOptions(item_data.options, item_data.options_data) : null,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
isProcessing: false,
|
|
||||||
shouldShowRFQFeedback: true,
|
|
||||||
RFQBodyType: 'show',
|
|
||||||
RFQBodyOrder: JSON.stringify(crate, null, 2),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
handleClickOpenImport() {
|
|
||||||
this.setState({
|
|
||||||
isProcessing: false,
|
|
||||||
shouldShowRFQFeedback: true,
|
|
||||||
RFQBodyType: 'import',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
handleLoadCustomConf(customconf) {
|
|
||||||
if (!customconf) {return; }
|
|
||||||
|
|
||||||
const items = this.props.data.items;
|
|
||||||
|
|
||||||
let new_items = [];
|
|
||||||
let new_items_data = [];
|
|
||||||
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
...this.state,
|
|
||||||
columns: {
|
|
||||||
...this.state.columns,
|
|
||||||
cart: {
|
|
||||||
...this.state.columns.cart,
|
|
||||||
items: [],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}, function () {
|
|
||||||
|
|
||||||
customconf.items.map(function (item) {
|
|
||||||
Object.keys(items).map(key => {
|
|
||||||
if (item.pn && item.pn === items[key].name_number) {
|
|
||||||
new_items.push(Object.assign({
|
|
||||||
...items[key],
|
|
||||||
}, {
|
|
||||||
id: uuidv4(),
|
|
||||||
options_data: item.options ? item.options : null,
|
|
||||||
}));
|
}));
|
||||||
new_items_data.push({options_data: item.options ? item.options : null});
|
const handleOnDragEnd = (drop_result, provided) => {
|
||||||
|
console.log(drop_result, provided)
|
||||||
|
//{
|
||||||
|
// "draggableId": "42dc17e9-9e75-45ee-ad27-2233b6f07a5e",
|
||||||
|
// "type": "DEFAULT",
|
||||||
|
// "source": {
|
||||||
|
// "index": 17,
|
||||||
|
// "droppableId": "backlog"
|
||||||
|
// },
|
||||||
|
// "reason": "DROP",
|
||||||
|
// "mode": "FLUID",
|
||||||
|
// "destination": {
|
||||||
|
// "droppableId": "crate0",
|
||||||
|
// "index": 0
|
||||||
|
// },
|
||||||
|
// "combine": null
|
||||||
|
// }
|
||||||
|
if (drop_result.source.droppableId === "backlog")
|
||||||
|
addCardFromBacklog(drop_result.destination.droppableId, drop_result.source.index, drop_result.destination.index);
|
||||||
|
else if(drop_result.destination.droppableId === "backlog")
|
||||||
|
deleteCard(drop_result.destination.droppableId, drop_result.destination.index);
|
||||||
|
else
|
||||||
|
moveCard(drop_result.source.droppableId, drop_result.source.index, drop_result.destination.droppableId, drop_result.destination.index)
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
return item;
|
|
||||||
});
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
...this.state,
|
|
||||||
columns: {
|
|
||||||
...this.state.columns,
|
|
||||||
cart: {
|
|
||||||
...this.state.columns.cart,
|
|
||||||
items: new_items,
|
|
||||||
itemsData: new_items_data,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
currentMode: customconf.type,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
handleClickSubmit(note, email) {
|
|
||||||
const crate = {
|
|
||||||
items: [],
|
|
||||||
type: this.state.currentMode,
|
|
||||||
};
|
|
||||||
const clonedCart = Array.from(this.state.columns.cart.items);
|
|
||||||
const clonedCartData = Array.from(this.state.columns.cart.itemsData);
|
|
||||||
for (const i in clonedCart) {
|
|
||||||
const item = clonedCart[i];
|
|
||||||
const item_data = clonedCartData[i];
|
|
||||||
crate.items.push({
|
|
||||||
'pn': item.name_number,
|
|
||||||
'options': (item_data.options_data && item_data.options) ? FilterOptions(item_data.options, item_data.options_data) : null,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const {data} = this.props;
|
|
||||||
|
|
||||||
this.setState({isProcessing: true});
|
|
||||||
|
|
||||||
fetch(data.API_RFQ, {
|
|
||||||
method: "POST",
|
|
||||||
headers: {'Content-Type': 'application/json'},
|
|
||||||
body: JSON.stringify({
|
|
||||||
email,
|
|
||||||
note,
|
|
||||||
configuration: JSON.stringify(crate)
|
|
||||||
})
|
|
||||||
}).then(response => {
|
|
||||||
if (response.status !== 200) {
|
|
||||||
throw Error("Response status is not OK: " + response.status + ".\n" + response);
|
|
||||||
}
|
|
||||||
this.setState({
|
|
||||||
isProcessing: false,
|
|
||||||
shouldShowRFQFeedback: true,
|
|
||||||
RFQBodyType: 'email',
|
|
||||||
isProcessingComplete: true,
|
|
||||||
});
|
|
||||||
}).catch(err => {
|
|
||||||
console.error("Request failed, reason:", err)
|
|
||||||
this.setState({isProcessing: false}, () => {
|
|
||||||
alert("We cannot receive your request. Try using the export by coping the configuration and send it to us at sales@m-labs.hk");
|
|
||||||
});
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
handleOnDragEnd(result) {
|
|
||||||
/**
|
|
||||||
* 4 cases:
|
|
||||||
* - from backlog to one of the crate - add to the correct crate in correct order
|
|
||||||
* - from one crate to another - delete from one crate and put to another in correct order
|
|
||||||
* - within one crate - reorder
|
|
||||||
* - from crate to backlog - delete
|
|
||||||
* */
|
|
||||||
|
|
||||||
const {
|
|
||||||
source,
|
|
||||||
destination,
|
|
||||||
} = result;
|
|
||||||
/* better move to another function
|
|
||||||
let dragged_items = [];
|
|
||||||
if (source.indexes) {
|
|
||||||
source.indexes.forEach((card_index, _) => {
|
|
||||||
dragged_items.push(itemsUnfoldedList[card_index]);
|
|
||||||
})
|
|
||||||
} else if (source.index >= 0) {
|
|
||||||
dragged_items.push(itemsUnfoldedList[source.index]);
|
|
||||||
}*/
|
|
||||||
|
|
||||||
console.log('==> result', result);
|
|
||||||
|
|
||||||
// dropped outside the list
|
|
||||||
if (!destination) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (source.droppableId) {
|
|
||||||
// TODO add delete functionality
|
|
||||||
case destination.droppableId:
|
|
||||||
/*this.setState({
|
|
||||||
...this.state,
|
|
||||||
columns: {
|
|
||||||
...this.state.columns,
|
|
||||||
crates: {
|
|
||||||
...this.state.columns.crates,
|
|
||||||
[destination.droppableId]: {
|
|
||||||
...this.state.columns.crates[destination.droppableId],
|
|
||||||
items: reorder(
|
|
||||||
this.state.columns.crates[source.droppableId].items,
|
|
||||||
source.index,
|
|
||||||
destination.index
|
|
||||||
)}}
|
|
||||||
}
|
|
||||||
});*/
|
|
||||||
this.checkAlertsInNewState(destination.droppableId, {
|
|
||||||
...this.state,
|
|
||||||
columns: {
|
|
||||||
...this.state.columns,
|
|
||||||
crates: {
|
|
||||||
...this.state.columns.crates,
|
|
||||||
[destination.droppableId]: {
|
|
||||||
...this.state.columns.crates[destination.droppableId],
|
|
||||||
items: reorder(
|
|
||||||
this.state.columns.crates[source.droppableId].items,
|
|
||||||
source.index,
|
|
||||||
destination.index
|
|
||||||
)}}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case 'backlog':
|
|
||||||
/*this.setState({
|
|
||||||
...this.state,
|
|
||||||
columns: {
|
|
||||||
...this.state.columns,
|
|
||||||
crates: {
|
|
||||||
...this.state.columns.crates,
|
|
||||||
[destination.droppableId]: {
|
|
||||||
...this.state.columns.crates[destination.droppableId],
|
|
||||||
items: copyFromBacklog(
|
|
||||||
this.state.items,
|
|
||||||
this.state.columns.crates[destination.droppableId],
|
|
||||||
source,
|
|
||||||
destination
|
|
||||||
)}}
|
|
||||||
}
|
|
||||||
});*/
|
|
||||||
this.checkAlertsInNewState(destination.droppableId, {
|
|
||||||
...this.state,
|
|
||||||
columns: {
|
|
||||||
...this.state.columns,
|
|
||||||
crates: {
|
|
||||||
...this.state.columns.crates,
|
|
||||||
[destination.droppableId]: {
|
|
||||||
...this.state.columns.crates[destination.droppableId],
|
|
||||||
items: copyFromBacklog(
|
|
||||||
this.state.items,
|
|
||||||
this.state.columns.crates[destination.droppableId],
|
|
||||||
source,
|
|
||||||
destination
|
|
||||||
)}}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
this.setState({
|
|
||||||
columns: move(
|
|
||||||
this.state.columns[source.droppableId],
|
|
||||||
this.state.columns[destination.droppableId],
|
|
||||||
source,
|
|
||||||
destination
|
|
||||||
)
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleClickToggleMobileSideMenu() {
|
|
||||||
this.setState({
|
|
||||||
...this.state,
|
|
||||||
mobileSideMenuShouldOpen: !this.state.mobileSideMenuShouldOpen,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
handleClickCloseRFQFeedback() {
|
|
||||||
this.setState({
|
|
||||||
shouldShowRFQFeedback: false,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
checkAlertsInNewState(crate_id, new_state) {
|
|
||||||
console.log('--- START CHECKING CRATE WARNING ---');
|
|
||||||
|
|
||||||
let itemsCloned = Array.from(new_state.columns.crates[crate_id].items);
|
|
||||||
|
|
||||||
const crate_warnings = TriggerCrateWarnings(new_state.columns.crates[crate_id]);
|
|
||||||
|
|
||||||
itemsCloned.forEach((elem, _idx) => {
|
|
||||||
if (!elem.options_data && !!elem.options) {
|
|
||||||
elem.options_data = {}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
itemsCloned = FillResources(itemsCloned);
|
|
||||||
itemsCloned = TriggerWarnings(itemsCloned);
|
|
||||||
|
|
||||||
// update state with rules
|
|
||||||
this.setState({
|
|
||||||
...this.state,
|
|
||||||
columns: {
|
|
||||||
...new_state.columns,
|
|
||||||
crates: {
|
|
||||||
...new_state.columns.crates,
|
|
||||||
[crate_id]: {
|
|
||||||
...new_state.columns.crates[crate_id],
|
|
||||||
items: itemsCloned,
|
|
||||||
warnings: crate_warnings
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
onAddCrate(id) {
|
|
||||||
this.setState({
|
|
||||||
...this.state,
|
|
||||||
columns: {
|
|
||||||
...this.state.columns,
|
|
||||||
crates: {
|
|
||||||
...this.state.columns.crates,
|
|
||||||
[id]: {
|
|
||||||
crate_type: "rack",
|
|
||||||
items: []
|
|
||||||
}}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
onDeleteCrate(id) {
|
|
||||||
let new_state = {
|
|
||||||
...this.state,
|
|
||||||
columns: {
|
|
||||||
...this.state.columns,
|
|
||||||
crates: {
|
|
||||||
...this.state.columns.crates,
|
|
||||||
[id]: undefined
|
|
||||||
}
|
|
||||||
}};
|
|
||||||
delete new_state.columns.crates[id];
|
|
||||||
this.setState(new_state);
|
|
||||||
}
|
|
||||||
|
|
||||||
onCrateSelected(id) {
|
|
||||||
console.log(id)
|
|
||||||
this.setState({
|
|
||||||
active_crate: id
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
onCrateModeChange(crate_id, new_mode) {
|
|
||||||
let new_state = {
|
|
||||||
...this.state,
|
|
||||||
columns: {
|
|
||||||
...this.state.columns,
|
|
||||||
crates: {
|
|
||||||
...this.state.columns.crates,
|
|
||||||
[crate_id]: {
|
|
||||||
...this.state.columns.crates[crate_id],
|
|
||||||
crate_type: new_mode
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}};
|
|
||||||
this.setState(new_state);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DragDropContext onDragEnd={this.handleOnDragEnd}>
|
<DragDropContext onDragEnd={handleOnDragEnd}>
|
||||||
<Layout
|
<Layout
|
||||||
aside={
|
aside={
|
||||||
<Backlog/>
|
<Backlog/>
|
||||||
|
|
|
||||||
|
|
@ -93,14 +93,21 @@ const useCart = ((set, get) => ({
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
moveCard: (crate_from, index_from, crate_to, index_to) => set(state => {
|
moveCard: (crate_from, index_from, crate_to, index_to) => set(state => {
|
||||||
const the_card = state.crates.find((crate, _) => crate_from === crate.id )[index_from];
|
const the_card = state.crates.find((crate, _) => crate_from === crate.id ).items[index_from];
|
||||||
const del_card = crate_from === crate_to ? 1 : 0;
|
|
||||||
return {
|
return {
|
||||||
crates: state.crates.map((crate, _i) => {
|
crates: state.crates.map((crate, _i) => {
|
||||||
if (crate_to === crate.id) {
|
if (crate_to === crate_from && crate_to === crate.id) {
|
||||||
|
//const the_card = {...crate[index_from]};
|
||||||
|
let items_copy = Array.from(crate.items);
|
||||||
|
delete items_copy[index_from];
|
||||||
return {
|
return {
|
||||||
...crate,
|
...crate,
|
||||||
items: crate.items.toSpliced(index_to, del_card, the_card)
|
items: items_copy.toSpliced(index_to, 0, the_card).filter((item, _) => !!item)
|
||||||
|
}
|
||||||
|
} else if (crate_to === crate.id) {
|
||||||
|
return {
|
||||||
|
...crate,
|
||||||
|
items: crate.items.toSpliced(index_to, 0, the_card)
|
||||||
}
|
}
|
||||||
} else if (crate_from === crate.id) {
|
} else if (crate_from === crate.id) {
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -100,7 +100,7 @@ const Types = {
|
||||||
|
|
||||||
export function TriggerCardWarnings(data, index, precounted) {
|
export function TriggerCardWarnings(data, index, precounted) {
|
||||||
const element = data[index];
|
const element = data[index];
|
||||||
return element.warnings
|
return (element.warnings && element.warnings
|
||||||
.map((warning, _) => {
|
.map((warning, _) => {
|
||||||
if (!!Types[warning])
|
if (!!Types[warning])
|
||||||
return Types[warning].trigger(data, index, precounted) ? {trigger: undefined, name: warning, ...Types[warning]} : null;
|
return Types[warning].trigger(data, index, precounted) ? {trigger: undefined, name: warning, ...Types[warning]} : null;
|
||||||
|
|
@ -109,7 +109,7 @@ export function TriggerCardWarnings(data, index, precounted) {
|
||||||
})
|
})
|
||||||
.filter((warning, _) => {
|
.filter((warning, _) => {
|
||||||
return !!warning
|
return !!warning
|
||||||
});
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
export function TriggerWarnings(data) {
|
export function TriggerWarnings(data) {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue