From 4f702e90640ab5d7d2180532b531f53f49484fb2 Mon Sep 17 00:00:00 2001 From: Egor Savkin Date: Mon, 15 Jan 2024 13:01:27 +0800 Subject: [PATCH] Remove delete crate from spare cards and add crate numbers to the summary Signed-off-by: Egor Savkin --- sass/css/_shop.scss | 4 ++++ static/js/shop/Crate.jsx | 20 ++++++++++-------- static/js/shop/CrateMode.jsx | 29 ++++++++++++--------------- static/js/shop/OrderSummary.jsx | 2 +- static/js/shop/SummaryCrateHeader.jsx | 17 ++++++++++++---- static/js/shop/shop_store.js | 10 ++++----- 6 files changed, 47 insertions(+), 35 deletions(-) diff --git a/sass/css/_shop.scss b/sass/css/_shop.scss index d5cda41..3cd7e18 100644 --- a/sass/css/_shop.scss +++ b/sass/css/_shop.scss @@ -322,6 +322,10 @@ button { height: auto; } } + span { + margin-left: 16px; + width: 28px; + } } > .summary-form { diff --git a/static/js/shop/Crate.jsx b/static/js/shop/Crate.jsx index 739aee2..a771a1f 100644 --- a/static/js/shop/Crate.jsx +++ b/static/js/shop/Crate.jsx @@ -17,7 +17,8 @@ export function Crate({crate_index}) { const renderCount = useRenderCount(); const crate = useShopStore((state) => state.crates[crate_index], - (a, b) => a.length === b.length); + (a, b) => a.length === b.length && a.id === b.id); + const modes_order = useShopStore((state) => state.modes_order); const onDeleteCrate = useShopStore((state) => state.delCrate); // #!render_count @@ -25,14 +26,17 @@ export function Crate({crate_index}) { return (
+ { + modes_order.includes(crate.crate_mode) ? ( +
+ -
- - -
onDeleteCrate(crate.id)}> - Delete crate remove -
-
+
onDeleteCrate(crate.id)}> + Delete crate remove +
+
+ ) : <> + }
diff --git a/static/js/shop/CrateMode.jsx b/static/js/shop/CrateMode.jsx index e344640..b8b7e37 100644 --- a/static/js/shop/CrateMode.jsx +++ b/static/js/shop/CrateMode.jsx @@ -19,20 +19,17 @@ export function CrateMode({crate_index}) { // #!render_count console.log("CrateMode renders: ", renderCount) - if (modes_order.includes(crate.crate_mode)) { - return ( -
- {modes_order.map((mode_name, _) => ( - setMode(crate.id, mode_name)} - href="#" - role="button">{crate_modes[mode_name].name} - ))} -
- ); - } else { - return
- } + + return ( +
+ {modes_order.map((mode_name, _) => ( + setMode(crate.id, mode_name)} + href="#" + role="button">{crate_modes[mode_name].name} + ))} +
+ ); } \ No newline at end of file diff --git a/static/js/shop/OrderSummary.jsx b/static/js/shop/OrderSummary.jsx index 564ba64..563c730 100644 --- a/static/js/shop/OrderSummary.jsx +++ b/static/js/shop/OrderSummary.jsx @@ -27,7 +27,7 @@ export function OrderSummary() { - Remove all cards + Reset the order - + { + modes_order.includes(crate_mode) ? ( + + ) : + } +
diff --git a/static/js/shop/shop_store.js b/static/js/shop/shop_store.js index 0f08ba8..aeea297 100644 --- a/static/js/shop/shop_store.js +++ b/static/js/shop/shop_store.js @@ -238,19 +238,17 @@ const useHighlighted = ((set, get) => ({ const useCart = ((set, get) => ({ crates: shared_data.columns.crates, active_crate: "crate0", + _defaultCrates: Array.from(shared_data.columns.crates), _newCrate: (crate_id) => set((state) => ({ crates: state.crates.toSpliced(-1, 0, { + ...state._defaultCrates[0], id: crate_id || "crate" + state.crates.length, - crate_mode: "rack", - items: [], - warnings: [], - occupiedHP: 0 }), active_crate: crate_id || "crate" + state.crates.length })), delCrate: (id) => set(state => ({ - crates: state.crates.filter((crate => crate.id !== id)), + crates: state.crates.filter((crate => crate.id !== id || !state.modes_order.includes(crate.crate_mode))), active_crate: state.active_crate === id ? null : state.active_crate, })), _setCrateMode: (id, mode) => set(state => ({ @@ -332,7 +330,7 @@ const useCart = ((set, get) => ({ }) })), clearAll: () => set(state => ({ - crates: [] + crates: state._defaultCrates })), _updateOptions: (crate_id, index, new_options) => set(state => ({ crates: state.crates.map((crate, _i) => {