duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-20 07:26:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: catalog style toggle (classic/new) with admin mode & favorites

Browse Source
This commit is contained in:
Life
2026-03-22 16:54:40 +01:00
parent ccaec9185e
commit a5ea88010e
34 changed files with 2799 additions and 575 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx
+64 -2
View File
@@ -1,7 +1,8 @@
import { FC, useEffect, useRef } from 'react';
import { FC, useCallback, useEffect, useRef, useState } from 'react';
import { IPurchasableOffer, ProductTypeEnum } from '../../../../../api';
import { AutoGrid, AutoGridProps } from '../../../../../common';
import { useCatalog } from '../../../../../hooks';
import { useCatalogAdmin } from '../../../CatalogAdminContext';
import { CatalogGridOfferView } from '../common/CatalogGridOfferView';
interface CatalogItemGridWidgetViewProps extends AutoGridProps
@@ -13,7 +14,11 @@ export const CatalogItemGridWidgetView: FC<CatalogItemGridWidgetViewProps> = pro
{
const { columnCount = 5, children = null, ...rest } = props;
const { currentOffer = null, setCurrentOffer = null, currentPage = null, setPurchaseOptions = null } = useCatalog();
const catalogAdmin = useCatalogAdmin();
const adminMode = catalogAdmin?.adminMode ?? false;
const elementRef = useRef<HTMLDivElement>();
const [ dragIndex, setDragIndex ] = useState<number | null>(null);
const [ dropIndex, setDropIndex ] = useState<number | null>(null);
useEffect(() =>
{
@@ -43,9 +48,66 @@ export const CatalogItemGridWidgetView: FC<CatalogItemGridWidgetViewProps> = pro
}
};
const handleDragStart = useCallback((index: number) =>
{
setDragIndex(index);
}, []);
const handleDragOver = useCallback((e: React.DragEvent, index: number) =>
{
e.preventDefault();
setDropIndex(index);
}, []);
const handleDrop = useCallback((index: number) =>
{
if(dragIndex !== null && dragIndex !== index && currentPage?.offers)
{
const offers = [ ...currentPage.offers ];
const [ moved ] = offers.splice(dragIndex, 1);
offers.splice(index, 0, moved);
const orders = offers.map((o, i) => ({ id: o.offerId, orderNumber: i }));
catalogAdmin?.reorderOffers(orders);
}
setDragIndex(null);
setDropIndex(null);
}, [ dragIndex, currentPage, catalogAdmin ]);
const handleDragEnd = useCallback(() =>
{
setDragIndex(null);
setDropIndex(null);
}, []);
return (
<AutoGrid columnCount={ columnCount } innerRef={ elementRef } { ...rest }>
{ currentPage.offers && (currentPage.offers.length > 0) && currentPage.offers.map((offer, index) => <CatalogGridOfferView key={ index } itemActive={ (currentOffer && (currentOffer.offerId === offer.offerId)) } offer={ offer } selectOffer={ selectOffer } />) }
{ currentPage.offers && (currentPage.offers.length > 0) && currentPage.offers.map((offer, index) =>
{
const isDragging = dragIndex === index;
const isDropTarget = dropIndex === index && dragIndex !== index;
return (
<div
key={ index }
className={ `${ isDragging ? 'opacity-40' : '' } ${ isDropTarget ? 'ring-2 ring-primary ring-offset-1 rounded' : '' }` }
draggable={ adminMode }
onDragEnd={ adminMode ? handleDragEnd : undefined }
onDragOver={ adminMode ? (e) => handleDragOver(e, index) : undefined }
onDragStart={ adminMode ? () => handleDragStart(index) : undefined }
onDrop={ adminMode ? () => handleDrop(index) : undefined }
>
<CatalogGridOfferView
itemActive={ (currentOffer && (currentOffer.offerId === offer.offerId)) }
offer={ offer }
selectOffer={ selectOffer }
/>
</div>
);
}) }
{ children }
</AutoGrid>
);
src/components/catalog/views/page/widgets/CatalogPriceDisplayWidgetView.tsx
+7 -7
View File
@@ -19,19 +19,19 @@ export const CatalogPriceDisplayWidgetView: FC<CatalogPriceDisplayWidgetViewProp
if(!offer) return null;
return (
<>
<div className="flex items-center gap-1.5">
{ (offer.priceInCredits > 0) &&
<div className="flex items-center gap-1">
<Text bold>{ (offer.priceInCredits * quantity) }</Text>
<div className="flex items-center gap-1 bg-warning/15 border border-warning/40 rounded-full px-2 py-0.5">
<Text className="text-[11px]! font-bold text-dark">{ (offer.priceInCredits * quantity) }</Text>
<LayoutCurrencyIcon type={ -1 } />
</div> }
{ separator && (offer.priceInCredits > 0) && (offer.priceInActivityPoints > 0) &&
<FaPlus className="fa-icon" color="black" size="xs" /> }
<FaPlus className="text-[7px] text-muted" /> }
{ (offer.priceInActivityPoints > 0) &&
<div className="flex items-center gap-1">
<Text bold>{ (offer.priceInActivityPoints * quantity) }</Text>
<div className="flex items-center gap-1 bg-purple/15 border border-purple/40 rounded-full px-2 py-0.5">
<Text className="text-[11px]! font-bold text-dark">{ (offer.priceInActivityPoints * quantity) }</Text>
<LayoutCurrencyIcon type={ offer.activityPointType } />
</div> }
</>
</div>
);
};
src/components/catalog/views/page/widgets/CatalogSpinnerWidgetView.tsx
+24 -10
View File
@@ -1,11 +1,10 @@
import { FC } from 'react';
import { FaCaretLeft, FaCaretRight } from 'react-icons/fa';
import { FaMinus, FaPlus } from 'react-icons/fa';
import { LocalizeText } from '../../../../../api';
import { Text } from '../../../../../common';
import { useCatalog } from '../../../../../hooks';
const MIN_VALUE: number = 1;
const MAX_VALUE: number = 100;
const MAX_VALUE: number = 99;
export const CatalogSpinnerWidgetView: FC<{}> = props =>
{
@@ -34,13 +33,28 @@ export const CatalogSpinnerWidgetView: FC<{}> = props =>
if(!currentOffer || !currentOffer.bundlePurchaseAllowed) return null;
return (
<>
<Text>{ LocalizeText('catalog.bundlewidget.spinner.select.amount') }</Text>
<div className="flex items-center gap-1">
<FaCaretLeft className="text-black cursor-pointer fa-icon" onClick={ event => updateQuantity(quantity - 1) } />
<input className="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none min-h-[17px] h-[17px] w-[28px] px-[4px] py-0 text-right rounded-[.2rem]" type="number" value={ quantity } onChange={ event => updateQuantity(event.target.valueAsNumber) } />
<FaCaretRight className="text-black cursor-pointer fa-icon" onClick={ event => updateQuantity(quantity + 1) } />
<div className="flex items-center gap-1.5">
<span className="text-[10px] text-muted whitespace-nowrap">{ LocalizeText('catalog.bundlewidget.spinner.select.amount') }</span>
<div className="flex items-center rounded overflow-hidden border-2 border-card-grid-item-border">
<button
className="w-[24px] h-[24px] flex items-center justify-center bg-card-grid-item hover:bg-card-grid-item-active transition-colors cursor-pointer border-r border-card-grid-item-border"
onClick={ event => updateQuantity(quantity - 1) }
>
<FaMinus className="text-[7px] text-dark" />
</button>
<input
className="w-[40px] h-[24px] text-center text-[11px] font-bold bg-white border-x border-card-grid-item-border [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:outline-none"
type="number"
value={ quantity }
onChange={ event => updateQuantity(event.target.valueAsNumber) }
/>
<button
className="w-[24px] h-[24px] flex items-center justify-center bg-card-grid-item hover:bg-card-grid-item-active transition-colors cursor-pointer border-l border-card-grid-item-border"
onClick={ event => updateQuantity(quantity + 1) }
>
<FaPlus className="text-[7px] text-dark" />
</button>
</div>
</>
</div>
);
};