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;
.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;

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

@ -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%;
}

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";
// #!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 (
<Droppable
@ -32,13 +32,13 @@ export function Backlog() {
{(provided) => (
<div
className="backlog-container"
className="catalog-container"
ref={provided.innerRef}
{...provided.droppableProps}>
<div className="backlog-bar">
<div className="catalog-bar">
<SearchBar/>
{isMobile ? (
@ -50,7 +50,7 @@ export function Backlog() {
) : null}
</div>
{showSearch ? <BacklogSearchResult/> : <BacklogGroups/>}
{showSearch ? <CatalogSearchResult/> : <CatalogGroups/>}
{provided.placeholder && (
<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 {useShopStore} from "./shop_store";
export function BacklogGroups() {
export function CatalogGroups() {
const data = useShopStore((state) => state.groups);
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";
export function BacklogSearchResult() {
export function CatalogSearchResult() {
const cards_to_display = useShopStore((state) => state.listed_cards);
return ( <>
{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.
* 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

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 updateSearchBar = useShopStore((state) => state.updateSearchBar);
return (
<div className="search-backlog form-outline">
<div className="search-catalog form-outline">
<input type="search"
id="search_bar"
className="search-backlog-input form-control"
className="search-catalog-input form-control"
placeholder="Search through cards"
value={search_bar_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 {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() {
<DragDropContext onDragEnd={handleOnDragEnd}>
<Layout
aside={
<Backlog/>
<Catalog/>
}
main={(
<OrderPanel

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

@ -18,9 +18,9 @@ const cards_to_pn_map = (cards) => {
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),

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

@ -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";

8
static/js/shop_data.js
View File

@ -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',