🆕 Added New catalogue page

2026-06-20 07:26:19 +00:00 · 2026-03-23 15:02:20 +01:00
parent 19fd0e0809
commit 33c31fe07d
29 changed files with 2746 additions and 474 deletions
@@ -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>
    );