M-Labs/web2019
5
0
Fork 2
Code Issues 20 Pull Requests 3 Releases Wiki Activity

Rename backlog to catalog

Browse Source 
Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2024-03-15 15:22:05 +08:00
parent 839d7c6612
commit dfe1f0ea2d
11 changed files with 39 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
sass/css/_shop.scss
View File

@ -183,10 +183,10 @@ button {
} }
} }
.backlog-container { .catalog-container {
padding-bottom: 4rem; padding-bottom: 4rem;
.backlog-bar { .catalog-bar {
display: flex; display: flex;
width: 100%; width: 100%;
margin: 0.4rem 0; margin: 0.4rem 0;
@ -200,12 +200,12 @@ button {
width: 10%; width: 10%;
align-content: center; align-content: center;
} }
.search-backlog { .search-catalog {
display: inline-block; display: inline-block;
border: 0; border: 0;
width: 90%; width: 90%;
.search-backlog-input { .search-catalog-input {
display: inline; display: inline;
border: 0; border: 0;
color: white; color: white;

4
static/css/order-hardware.css
View File

@ -458,7 +458,7 @@
overflow: initial; overflow: initial;
} }
#root-shop .layout>aside.aside.menu-opened > .backlog-container { #root-shop .layout>aside.aside.menu-opened > .catalog-container {
overflow-y: scroll; overflow-y: scroll;
height: 100%; height: 100%;
} }
@ -667,7 +667,7 @@
overflow: initial; overflow: initial;
} }
#root-shop .layout>aside.aside.menu-opened > .backlog-container { #root-shop .layout>aside.aside.menu-opened > .catalog-container {
overflow-y: scroll; overflow-y: scroll;
height: 100%; height: 100%;
} }

16
static/js/shop/Backlog.jsx → static/js/shop/Catalog.jsx
View File

@ -3,15 +3,15 @@ import {Droppable} from "@hello-pangea/dnd";
import {useShopStore} from "./shop_store"; import {useShopStore} from "./shop_store";
// #!render_count // #!render_count
import {useRenderCount} from "@uidotdev/usehooks"; import {useRenderCount} from "@uidotdev/usehooks";
import {BacklogGroups} from "./BacklogGroups"; import {CatalogGroups} from "./CatalogGroups";
import {SearchBar} from "./SearchBar"; import {SearchBar} from "./SearchBar";
import {BacklogSearchResult} from "./BacklogSearchResult"; import {CatalogSearchResult} from "./CatalogSearchResult";
import {GradientBottom} from "./GradientBottom"; 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 // #!render_count
const renderCount = useRenderCount(); const renderCount = useRenderCount();
@ -23,7 +23,7 @@ export function Backlog() {
const showSearch = useShopStore((state) => state.listed_cards.length > 0); const showSearch = useShopStore((state) => state.listed_cards.length > 0);
// #!render_count // #!render_count
console.log("Backlog renders: ", renderCount) console.log("Catalog renders: ", renderCount)
return ( return (
<Droppable <Droppable
@ -32,13 +32,13 @@ export function Backlog() {
{(provided) => ( {(provided) => (
<div <div
className="backlog-container" className="catalog-container"
ref={provided.innerRef} ref={provided.innerRef}
{...provided.droppableProps}> {...provided.droppableProps}>
<div className="backlog-bar"> <div className="catalog-bar">
<SearchBar/> <SearchBar/>
{isMobile ? ( {isMobile ? (
@ -50,7 +50,7 @@ export function Backlog() {
) : null} ) : null}
</div> </div>
{showSearch ? <BacklogSearchResult/> : <BacklogGroups/>} {showSearch ? <CatalogSearchResult/> : <CatalogGroups/>}
{provided.placeholder && ( {provided.placeholder && (
<div style={{display: 'none'}}> <div style={{display: 'none'}}>

2
static/js/shop/BacklogGroups.jsx → static/js/shop/CatalogGroups.jsx
View File

@ -2,7 +2,7 @@ import {ProductItem} from "./ProductItem";
import React from "react"; import React from "react";
import {useShopStore} from "./shop_store"; import {useShopStore} from "./shop_store";
export function BacklogGroups() { export function CatalogGroups() {
const data = useShopStore((state) => state.groups); const data = useShopStore((state) => state.groups);
const items = useShopStore((state) => state.cards); const items = useShopStore((state) => state.cards);

2
static/js/shop/BacklogSearchResult.jsx → static/js/shop/CatalogSearchResult.jsx
View File

@ -3,7 +3,7 @@ import {useShopStore} from "./shop_store";
import {ProductItem} from "./ProductItem"; import {ProductItem} from "./ProductItem";
export function BacklogSearchResult() { export function CatalogSearchResult() {
const cards_to_display = useShopStore((state) => state.listed_cards); const cards_to_display = useShopStore((state) => state.listed_cards);
return ( <> return ( <>
{cards_to_display.map((item, _) => { {cards_to_display.map((item, _) => {

4
static/js/shop/ProductItem.jsx
View File

@ -8,7 +8,7 @@ import {useRenderCount} from "@uidotdev/usehooks";
/** /**
* Component that renders a product. * 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}) { export function ProductItem({card_index}) {
// #!render_count // #!render_count
@ -16,7 +16,7 @@ export function ProductItem({card_index}) {
const getCardDescription = useShopStore((state) => state.getCardDescription); const getCardDescription = useShopStore((state) => state.getCardDescription);
const currency = useShopStore((state) => state.currency); const currency = useShopStore((state) => state.currency);
const onAddCard = useShopStore((state) => state.addCardFromBacklog); const onAddCard = useShopStore((state) => state.addCardFromCatalog);
const card = getCardDescription(card_index); const card = getCardDescription(card_index);
// #!render_count // #!render_count

4
static/js/shop/SearchBar.jsx
View File

@ -5,10 +5,10 @@ export function SearchBar() {
const search_bar_value = useShopStore((state) => state.search_bar_value); const search_bar_value = useShopStore((state) => state.search_bar_value);
const updateSearchBar = useShopStore((state) => state.updateSearchBar); const updateSearchBar = useShopStore((state) => state.updateSearchBar);
return ( return (
<div className="search-backlog form-outline"> <div className="search-catalog form-outline">
<input type="search" <input type="search"
id="search_bar" id="search_bar"
className="search-backlog-input form-control" className="search-catalog-input form-control"
placeholder="Search through cards" placeholder="Search through cards"
value={search_bar_value} value={search_bar_value}
onChange={event => updateSearchBar(event.target.value)} onChange={event => updateSearchBar(event.target.value)}

14
static/js/shop/Shop.jsx
View File

@ -6,7 +6,7 @@ import {useRenderCount} from "@uidotdev/usehooks";
import {Layout} from "./Layout"; import {Layout} from "./Layout";
import {Backlog} from "./Backlog"; import {Catalog} from "./Catalog";
import {OrderPanel} from "./OrderPanel"; import {OrderPanel} from "./OrderPanel";
import {useShopStore} from "./shop_store"; import {useShopStore} from "./shop_store";
@ -18,7 +18,7 @@ export function Shop() {
// #!render_count // #!render_count
const renderCount = useRenderCount(); const renderCount = useRenderCount();
const addCardFromBacklog = useShopStore((state) => state.addCardFromBacklog); const addCardFromCatalog = useShopStore((state) => state.addCardFromCatalog);
const initExtData = useShopStore((state) => state.initExtData); const initExtData = useShopStore((state) => state.initExtData);
const moveCard = useShopStore((state) => state.moveCard); const moveCard = useShopStore((state) => state.moveCard);
const deleteCard = useShopStore((state) => state.deleteCard); const deleteCard = useShopStore((state) => state.deleteCard);
@ -30,16 +30,16 @@ export function Shop() {
console.log(drop_result) console.log(drop_result)
return; return;
} }
if (drop_result.source.droppableId === "backlog") if (drop_result.source.droppableId === "catalog")
addCardFromBacklog(drop_result.destination.droppableId, drop_result.source.index, drop_result.destination.index); addCardFromCatalog(drop_result.destination.droppableId, drop_result.source.index, drop_result.destination.index);
else if (drop_result.destination.droppableId === "backlog") else if (drop_result.destination.droppableId === "catalog")
deleteCard(drop_result.source.droppableId, drop_result.source.index); deleteCard(drop_result.source.droppableId, drop_result.source.index);
else else
moveCard(drop_result.source.droppableId, drop_result.source.index, drop_result.destination.droppableId, drop_result.destination.index) moveCard(drop_result.source.droppableId, drop_result.source.index, drop_result.destination.droppableId, drop_result.destination.index)
} }
useEffect(() => { useEffect(() => {
addCardFromBacklog(null, [cardIndexById("eem_pwr_mod"), cardIndexById("kasli")], -1, true); addCardFromCatalog(null, [cardIndexById("eem_pwr_mod"), cardIndexById("kasli")], -1, true);
initExtData(); initExtData();
}, []); }, []);
@ -50,7 +50,7 @@ export function Shop() {
<DragDropContext onDragEnd={handleOnDragEnd}> <DragDropContext onDragEnd={handleOnDragEnd}>
<Layout <Layout
aside={ aside={
<Backlog/> <Catalog/>
} }
main={( main={(
<OrderPanel <OrderPanel

12
static/js/shop/shop_store.js
View File

@ -18,9 +18,9 @@ const cards_to_pn_map = (cards) => {
return result; return result;
}; };
const useBacklog = ((set, get) => ({ const useCatalog = ((set, get) => ({
cards: shared_data.items, cards: shared_data.items,
groups: shared_data.columns.backlog, groups: shared_data.columns.catalog,
cards_list: itemsUnfoldedList, cards_list: itemsUnfoldedList,
currency: shared_data.currency, currency: shared_data.currency,
pn_to_cards: cards_to_pn_map(shared_data.items), 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})), 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 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; const dest = crate_to || state.active_crate;
if (!dest) return {}; if (!dest) return {};
@ -525,14 +525,14 @@ const useCart = ((set, get) => ({
get().fillOrderExtData(); 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; const dest = crate_to || get().active_crate;
if (!dest) { if (!dest) {
console.warn("No destination"); console.warn("No destination");
get().noDestinationWarning(); get().noDestinationWarning();
return {}; return {};
} }
get()._addCardFromBacklog(dest, index_from, index_to) get()._addCardFromCatalog(dest, index_from, index_to)
get().fillExtData(dest); get().fillExtData(dest);
get().fillWarnings(dest); get().fillWarnings(dest);
get().setActiveCrate(dest); get().setActiveCrate(dest);
@ -583,7 +583,7 @@ const useCart = ((set, get) => ({
export const useShopStore = createWithEqualityFn((...params) => ({ export const useShopStore = createWithEqualityFn((...params) => ({
...useBacklog(...params), ...useCatalog(...params),
...useSearch(...params), ...useSearch(...params),
...useCrateModes(...params), ...useCrateModes(...params),
...useCart(...params), ...useCart(...params),

4
static/js/shop/utils.js
View File

@ -1,7 +1,7 @@
'use strict'; 'use strict';
export const data = window.shop_data; 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) => { export const productStyle = (style, snapshot, removeAnim, hovered, selected, cart=false) => {
const custom = { const custom = {
@ -9,7 +9,7 @@ export const productStyle = (style, snapshot, removeAnim, hovered, selected, car
backgroundColor: (hovered || selected) ? '#eae7f7' : 'initial', 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) // prevent next elements from animation
|| (snapshot.isDragging && snapshot.isDropAnimating))) { // prevent dragged element from weird animation || (snapshot.isDragging && snapshot.isDropAnimating))) { // prevent dragged element from weird animation
style.transform = "none"; style.transform = "none";

8
static/js/shop_data.js
View File

@ -1213,12 +1213,12 @@ const shop_data = {
columns: { 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 * name should not change
*/ */
'backlog': { 'catalog': {
id: 'backlog', id: 'catalog',
title: 'Backlog', title: 'Catalog',
/* itemIds define items order - change order to suit your need */ /* itemIds define items order - change order to suit your need */
categories: [ categories: [
{ name: 'Core', { name: 'Core',