diff --git a/sass/css/_shop.scss b/sass/css/_shop.scss index d2b96c80..e6ca1361 100644 --- a/sass/css/_shop.scss +++ b/sass/css/_shop.scss @@ -183,10 +183,10 @@ button { } } - .backlog-container { + .catalog-container { padding-bottom: 4rem; - .backlog-bar { + .catalog-bar { display: flex; width: 100%; margin: 0.4rem 0; @@ -200,12 +200,12 @@ button { width: 10%; align-content: center; } - .search-backlog { + .search-catalog { display: inline-block; border: 0; width: 90%; - .search-backlog-input { + .search-catalog-input { display: inline; border: 0; color: white; diff --git a/static/css/order-hardware.css b/static/css/order-hardware.css index 5e6c6b02..cc75723a 100644 --- a/static/css/order-hardware.css +++ b/static/css/order-hardware.css @@ -458,7 +458,7 @@ overflow: initial; } - #root-shop .layout>aside.aside.menu-opened > .backlog-container { + #root-shop .layout>aside.aside.menu-opened > .catalog-container { overflow-y: scroll; height: 100%; } @@ -667,7 +667,7 @@ overflow: initial; } - #root-shop .layout>aside.aside.menu-opened > .backlog-container { + #root-shop .layout>aside.aside.menu-opened > .catalog-container { overflow-y: scroll; height: 100%; } diff --git a/static/js/shop/Backlog.jsx b/static/js/shop/Catalog.jsx similarity index 81% rename from static/js/shop/Backlog.jsx rename to static/js/shop/Catalog.jsx index e44427a8..1f3e408a 100644 --- a/static/js/shop/Backlog.jsx +++ b/static/js/shop/Catalog.jsx @@ -3,15 +3,15 @@ import {Droppable} from "@hello-pangea/dnd"; import {useShopStore} from "./shop_store"; // #!render_count import {useRenderCount} from "@uidotdev/usehooks"; -import {BacklogGroups} from "./BacklogGroups"; +import {CatalogGroups} from "./CatalogGroups"; import {SearchBar} from "./SearchBar"; -import {BacklogSearchResult} from "./BacklogSearchResult"; +import {CatalogSearchResult} from "./CatalogSearchResult"; import {GradientBottom} from "./GradientBottom"; /** - * Component that renders the backlog in the aside + * Component that renders the catalog in the aside */ -export function Backlog() { +export function Catalog() { // #!render_count const renderCount = useRenderCount(); @@ -23,7 +23,7 @@ export function Backlog() { const showSearch = useShopStore((state) => state.listed_cards.length > 0); // #!render_count - console.log("Backlog renders: ", renderCount) + console.log("Catalog renders: ", renderCount) return ( (
-
+
{isMobile ? ( @@ -50,7 +50,7 @@ export function Backlog() { ) : null}
- {showSearch ? : } + {showSearch ? : } {provided.placeholder && (
diff --git a/static/js/shop/BacklogGroups.jsx b/static/js/shop/CatalogGroups.jsx similarity index 98% rename from static/js/shop/BacklogGroups.jsx rename to static/js/shop/CatalogGroups.jsx index 592d68e5..e4dc511f 100644 --- a/static/js/shop/BacklogGroups.jsx +++ b/static/js/shop/CatalogGroups.jsx @@ -2,7 +2,7 @@ import {ProductItem} from "./ProductItem"; import React from "react"; import {useShopStore} from "./shop_store"; -export function BacklogGroups() { +export function CatalogGroups() { const data = useShopStore((state) => state.groups); const items = useShopStore((state) => state.cards); diff --git a/static/js/shop/BacklogSearchResult.jsx b/static/js/shop/CatalogSearchResult.jsx similarity index 91% rename from static/js/shop/BacklogSearchResult.jsx rename to static/js/shop/CatalogSearchResult.jsx index 77b4dd0e..ae258ddb 100644 --- a/static/js/shop/BacklogSearchResult.jsx +++ b/static/js/shop/CatalogSearchResult.jsx @@ -3,7 +3,7 @@ import {useShopStore} from "./shop_store"; import {ProductItem} from "./ProductItem"; -export function BacklogSearchResult() { +export function CatalogSearchResult() { const cards_to_display = useShopStore((state) => state.listed_cards); return ( <> {cards_to_display.map((item, _) => { diff --git a/static/js/shop/ProductItem.jsx b/static/js/shop/ProductItem.jsx index 9d5bf834..872fdb5b 100644 --- a/static/js/shop/ProductItem.jsx +++ b/static/js/shop/ProductItem.jsx @@ -8,7 +8,7 @@ import {useRenderCount} from "@uidotdev/usehooks"; /** * Component that renders a product. - * Used in the aside (e.g backlog of product) + * Used in the aside (e.g catalog of product) */ export function ProductItem({card_index}) { // #!render_count @@ -16,7 +16,7 @@ export function ProductItem({card_index}) { const getCardDescription = useShopStore((state) => state.getCardDescription); const currency = useShopStore((state) => state.currency); - const onAddCard = useShopStore((state) => state.addCardFromBacklog); + const onAddCard = useShopStore((state) => state.addCardFromCatalog); const card = getCardDescription(card_index); // #!render_count diff --git a/static/js/shop/SearchBar.jsx b/static/js/shop/SearchBar.jsx index 7eceb608..84ff8202 100644 --- a/static/js/shop/SearchBar.jsx +++ b/static/js/shop/SearchBar.jsx @@ -5,10 +5,10 @@ export function SearchBar() { const search_bar_value = useShopStore((state) => state.search_bar_value); const updateSearchBar = useShopStore((state) => state.updateSearchBar); return ( -
+
updateSearchBar(event.target.value)} diff --git a/static/js/shop/Shop.jsx b/static/js/shop/Shop.jsx index b6d20ac5..4a138df5 100644 --- a/static/js/shop/Shop.jsx +++ b/static/js/shop/Shop.jsx @@ -6,7 +6,7 @@ import {useRenderCount} from "@uidotdev/usehooks"; import {Layout} from "./Layout"; -import {Backlog} from "./Backlog"; +import {Catalog} from "./Catalog"; import {OrderPanel} from "./OrderPanel"; import {useShopStore} from "./shop_store"; @@ -18,7 +18,7 @@ export function Shop() { // #!render_count const renderCount = useRenderCount(); - const addCardFromBacklog = useShopStore((state) => state.addCardFromBacklog); + const addCardFromCatalog = useShopStore((state) => state.addCardFromCatalog); const initExtData = useShopStore((state) => state.initExtData); const moveCard = useShopStore((state) => state.moveCard); const deleteCard = useShopStore((state) => state.deleteCard); @@ -30,16 +30,16 @@ export function Shop() { console.log(drop_result) return; } - 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") + if (drop_result.source.droppableId === "catalog") + addCardFromCatalog(drop_result.destination.droppableId, drop_result.source.index, drop_result.destination.index); + else if (drop_result.destination.droppableId === "catalog") deleteCard(drop_result.source.droppableId, drop_result.source.index); else moveCard(drop_result.source.droppableId, drop_result.source.index, drop_result.destination.droppableId, drop_result.destination.index) } useEffect(() => { - addCardFromBacklog(null, [cardIndexById("eem_pwr_mod"), cardIndexById("kasli")], -1, true); + addCardFromCatalog(null, [cardIndexById("eem_pwr_mod"), cardIndexById("kasli")], -1, true); initExtData(); }, []); @@ -50,7 +50,7 @@ export function Shop() { + } main={( { return result; }; -const useBacklog = ((set, get) => ({ +const useCatalog = ((set, get) => ({ cards: shared_data.items, - groups: shared_data.columns.backlog, + groups: shared_data.columns.catalog, cards_list: itemsUnfoldedList, currency: shared_data.currency, pn_to_cards: cards_to_pn_map(shared_data.items), @@ -354,7 +354,7 @@ const useCart = ((set, get) => ({ }) })), setActiveCrate: (id) => set(state => ({active_crate: id})), - _addCardFromBacklog: (crate_to, index_from, index_to) => set(state => { + _addCardFromCatalog: (crate_to, index_from, index_to) => set(state => { const take_from = (true_type_of(index_from) === "array" ? index_from : [index_from]).map((item, _i) => (state.cards_list[item])); const dest = crate_to || state.active_crate; if (!dest) return {}; @@ -525,14 +525,14 @@ const useCart = ((set, get) => ({ get().fillOrderExtData(); }, - addCardFromBacklog: (crate_to, index_from, index_to, just_mounted) => { + addCardFromCatalog: (crate_to, index_from, index_to, just_mounted) => { const dest = crate_to || get().active_crate; if (!dest) { console.warn("No destination"); get().noDestinationWarning(); return {}; } - get()._addCardFromBacklog(dest, index_from, index_to) + get()._addCardFromCatalog(dest, index_from, index_to) get().fillExtData(dest); get().fillWarnings(dest); get().setActiveCrate(dest); @@ -583,7 +583,7 @@ const useCart = ((set, get) => ({ export const useShopStore = createWithEqualityFn((...params) => ({ - ...useBacklog(...params), + ...useCatalog(...params), ...useSearch(...params), ...useCrateModes(...params), ...useCart(...params), diff --git a/static/js/shop/utils.js b/static/js/shop/utils.js index 3ea5ae21..f2f34805 100644 --- a/static/js/shop/utils.js +++ b/static/js/shop/utils.js @@ -1,7 +1,7 @@ 'use strict'; export const data = window.shop_data; -export const itemsUnfoldedList = Array.from(data.columns.backlog.categories.map(groupId => groupId.itemIds).flat()); +export const itemsUnfoldedList = Array.from(data.columns.catalog.categories.map(groupId => groupId.itemIds).flat()); export const productStyle = (style, snapshot, removeAnim, hovered, selected, cart=false) => { const custom = { @@ -9,7 +9,7 @@ export const productStyle = (style, snapshot, removeAnim, hovered, selected, car backgroundColor: (hovered || selected) ? '#eae7f7' : 'initial', }; - if (!cart && snapshot.draggingOver == null && // hack for backlog + if (!cart && snapshot.draggingOver == null && // hack for catalog ((!snapshot.isDragging) // prevent next elements from animation || (snapshot.isDragging && snapshot.isDropAnimating))) { // prevent dragged element from weird animation style.transform = "none"; diff --git a/static/js/shop_data.js b/static/js/shop_data.js index 4155d7b2..039881e0 100644 --- a/static/js/shop_data.js +++ b/static/js/shop_data.js @@ -1213,12 +1213,12 @@ const shop_data = { columns: { /*** - * backlog is the column containing all items on left aside, + * catalog is the column containing all items on left aside, * name should not change */ - 'backlog': { - id: 'backlog', - title: 'Backlog', + 'catalog': { + id: 'catalog', + title: 'Catalog', /* itemIds define items order - change order to suit your need */ categories: [ { name: 'Core',