mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 15:06:20 +00:00
Merge pull request #87 from simoleo89/pr/catalog-edit-admin
feat(catalog-admin): full in-client catalog editor
This commit is contained in:
DuckieTM
@@ -1,8 +1,10 @@
|
||||
import { CatalogAdminCreateOfferComposer, CatalogAdminCreatePageComposer, CatalogAdminDeleteOfferComposer, CatalogAdminDeletePageComposer, CatalogAdminMoveOfferComposer, CatalogAdminMovePageComposer, CatalogAdminPublishComposer, CatalogAdminResultEvent, CatalogAdminSaveOfferComposer, CatalogAdminSavePageComposer } from '@nitrots/nitro-renderer';
|
||||
import { CatalogAdminCreateOfferComposer, CatalogAdminCreatePageComposer, CatalogAdminDeleteOfferComposer, CatalogAdminDeletePageComposer, CatalogAdminMoveOfferComposer, CatalogAdminMovePageComposer, CatalogAdminPublishComposer, CatalogAdminResultEvent, CatalogAdminSaveOfferComposer, CatalogAdminSavePageComposer, CatalogAdminSavePageImagesComposer } from '@nitrots/nitro-renderer';
|
||||
import { createContext, FC, ReactNode, useCallback, useContext, useEffect, useRef, useState } from 'react';
|
||||
import { ICatalogNode, IPurchasableOffer, NotificationAlertType, SendMessageComposer } from '../../api';
|
||||
import { useMessageEvent, useNotification } from '../../hooks';
|
||||
|
||||
export type AdminManageTab = 'pages' | 'offers' | 'publish';
|
||||
|
||||
export interface IPageEditData
|
||||
{
|
||||
pageId?: number;
|
||||
@@ -14,6 +16,7 @@ export interface IPageEditData
|
||||
minRank: number;
|
||||
clubOnly?: string;
|
||||
orderNum: number;
|
||||
iconId?: number;
|
||||
pageHeadline?: string;
|
||||
pageTeaser?: string;
|
||||
pageSpecial?: string;
|
||||
@@ -45,6 +48,8 @@ interface ICatalogAdminContext
|
||||
{
|
||||
adminMode: boolean;
|
||||
setAdminMode: (value: boolean) => void;
|
||||
activeManageTab: AdminManageTab;
|
||||
setActiveManageTab: (tab: AdminManageTab) => void;
|
||||
editingOffer: IPurchasableOffer | null;
|
||||
setEditingOffer: (offer: IPurchasableOffer | null) => void;
|
||||
editingPageData: boolean;
|
||||
@@ -53,14 +58,23 @@ interface ICatalogAdminContext
|
||||
setEditingRootPage: (value: boolean) => void;
|
||||
editingPageNode: ICatalogNode | null;
|
||||
setEditingPageNode: (node: ICatalogNode | null) => void;
|
||||
selectedOfferIds: Set<number>;
|
||||
toggleOfferSelection: (id: number, multi?: boolean) => void;
|
||||
selectAllOffers: (ids: number[]) => void;
|
||||
clearOfferSelection: () => void;
|
||||
offerSearchQuery: string;
|
||||
setOfferSearchQuery: (query: string) => void;
|
||||
loading: boolean;
|
||||
lastError: string | null;
|
||||
savePage: (data: IPageEditData) => void;
|
||||
createPage: (data: IPageEditData) => void;
|
||||
deletePage: (pageId: number) => void;
|
||||
savePageImages: (pageId: number, headerImage: string, teaserImage: string) => void;
|
||||
saveOffer: (data: IOfferEditData) => void;
|
||||
createOffer: (data: IOfferEditData) => void;
|
||||
deleteOffer: (offerId: number) => void;
|
||||
duplicateOffer: (offer: IPurchasableOffer, pageId: number) => void;
|
||||
batchUpdateOfferPrices: (offerIds: number[], credits: number, points: number, pointsType: number, pageId: number) => void;
|
||||
reorderOffers: (orders: { id: number; orderNumber: number }[]) => void;
|
||||
reorderPage: (pageId: number, newParentId: number, newIndex: number) => void;
|
||||
togglePageEnabled: (pageId: number) => void;
|
||||
@@ -76,40 +90,38 @@ export const useCatalogAdmin = () => useContext(CatalogAdminContext);
|
||||
export const CatalogAdminProvider: FC<{ children: ReactNode }> = ({ children }) =>
|
||||
{
|
||||
const [ adminMode, setAdminMode ] = useState(false);
|
||||
const [ activeManageTab, setActiveManageTab ] = useState<AdminManageTab>('pages');
|
||||
const [ editingOffer, setEditingOffer ] = useState<IPurchasableOffer | null>(null);
|
||||
const [ editingPageData, setEditingPageData ] = useState(false);
|
||||
const [ editingRootPage, setEditingRootPage ] = useState(false);
|
||||
const [ editingPageNode, setEditingPageNode ] = useState<ICatalogNode | null>(null);
|
||||
const [ selectedOfferIds, setSelectedOfferIds ] = useState<Set<number>>(new Set());
|
||||
const [ offerSearchQuery, setOfferSearchQuery ] = useState('');
|
||||
const [ loading, setLoading ] = useState(false);
|
||||
const [ lastError, setLastError ] = useState<string | null>(null);
|
||||
const [ hasPendingChanges, setHasPendingChanges ] = useState(false);
|
||||
const pendingActionRef = useRef<string | null>(null);
|
||||
const { simpleAlert = null } = useNotification();
|
||||
|
||||
// Keyboard shortcuts: Esc to close edit panels
|
||||
useEffect(() =>
|
||||
const toggleOfferSelection = useCallback((id: number, multi = false) =>
|
||||
{
|
||||
if(!adminMode) return;
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent) =>
|
||||
setSelectedOfferIds(prev =>
|
||||
{
|
||||
if(e.key === 'Escape')
|
||||
{
|
||||
if(editingOffer) { setEditingOffer(null); e.preventDefault(); return; }
|
||||
if(editingPageData || editingRootPage || editingPageNode)
|
||||
{
|
||||
setEditingPageData(false);
|
||||
setEditingRootPage(false);
|
||||
setEditingPageNode(null);
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
};
|
||||
const next = new Set(multi ? prev : []);
|
||||
if(next.has(id)) next.delete(id); else next.add(id);
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
const selectAllOffers = useCallback((ids: number[]) =>
|
||||
{
|
||||
setSelectedOfferIds(new Set(ids));
|
||||
}, []);
|
||||
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [ adminMode, editingOffer, editingPageData, editingRootPage, editingPageNode ]);
|
||||
const clearOfferSelection = useCallback(() =>
|
||||
{
|
||||
setSelectedOfferIds(new Set());
|
||||
}, []);
|
||||
|
||||
useMessageEvent(CatalogAdminResultEvent, (event: CatalogAdminResultEvent) =>
|
||||
{
|
||||
@@ -151,6 +163,7 @@ export const CatalogAdminProvider: FC<{ children: ReactNode }> = ({ children })
|
||||
'savePage': 'Page saved (publish to apply)',
|
||||
'createPage': 'Page created (publish to apply)',
|
||||
'deletePage': 'Page deleted (publish to apply)',
|
||||
'saveImages': 'Images saved (publish to apply)',
|
||||
'saveOffer': 'Offer saved (publish to apply)',
|
||||
'createOffer': 'Offer created (publish to apply)',
|
||||
'deleteOffer': 'Offer deleted (publish to apply)',
|
||||
@@ -159,6 +172,7 @@ export const CatalogAdminProvider: FC<{ children: ReactNode }> = ({ children })
|
||||
'toggleVisible': 'Visibility toggled (publish to apply)',
|
||||
'movePage': 'Page moved (publish to apply)',
|
||||
'publish': 'Catalog published! All users updated.',
|
||||
'batchPrice': 'Prices updated (publish to apply)',
|
||||
};
|
||||
|
||||
simpleAlert(messages[action] || 'Operation completed', NotificationAlertType.DEFAULT, null, null, 'Catalog Admin');
|
||||
@@ -172,7 +186,7 @@ export const CatalogAdminProvider: FC<{ children: ReactNode }> = ({ children })
|
||||
setLastError(null);
|
||||
pendingActionRef.current = 'savePage';
|
||||
SendMessageComposer(new CatalogAdminSavePageComposer(
|
||||
data.pageId || 0, data.caption, data.caption, data.pageLayout, 0,
|
||||
data.pageId || 0, data.caption, data.caption, data.pageLayout, data.iconId ?? 0,
|
||||
data.minRank, data.visible === '1', data.enabled === '1',
|
||||
data.orderNum, data.parentId,
|
||||
data.pageHeadline || '', data.pageTeaser || '', data.pageTextDetails || ''
|
||||
@@ -185,7 +199,7 @@ export const CatalogAdminProvider: FC<{ children: ReactNode }> = ({ children })
|
||||
setLastError(null);
|
||||
pendingActionRef.current = 'createPage';
|
||||
SendMessageComposer(new CatalogAdminCreatePageComposer(
|
||||
data.caption, data.caption, data.pageLayout, 0,
|
||||
data.caption, data.caption, data.pageLayout, data.iconId ?? 0,
|
||||
data.minRank, data.visible === '1', data.enabled === '1',
|
||||
data.orderNum, data.parentId
|
||||
));
|
||||
@@ -199,6 +213,14 @@ export const CatalogAdminProvider: FC<{ children: ReactNode }> = ({ children })
|
||||
SendMessageComposer(new CatalogAdminDeletePageComposer(pageId));
|
||||
}, []);
|
||||
|
||||
const savePageImages = useCallback((pageId: number, headerImage: string, teaserImage: string) =>
|
||||
{
|
||||
setLoading(true);
|
||||
setLastError(null);
|
||||
pendingActionRef.current = 'saveImages';
|
||||
SendMessageComposer(new CatalogAdminSavePageImagesComposer(pageId, headerImage, teaserImage));
|
||||
}, []);
|
||||
|
||||
const saveOffer = useCallback((data: IOfferEditData) =>
|
||||
{
|
||||
setLoading(true);
|
||||
@@ -233,6 +255,34 @@ export const CatalogAdminProvider: FC<{ children: ReactNode }> = ({ children })
|
||||
SendMessageComposer(new CatalogAdminDeleteOfferComposer(offerId));
|
||||
}, []);
|
||||
|
||||
const duplicateOffer = useCallback((offer: IPurchasableOffer, pageId: number) =>
|
||||
{
|
||||
setLoading(true);
|
||||
setLastError(null);
|
||||
pendingActionRef.current = 'createOffer';
|
||||
SendMessageComposer(new CatalogAdminCreateOfferComposer(
|
||||
pageId, offer.product?.productClassId || 0,
|
||||
offer.localizationId || '', offer.priceInCredits, offer.priceInActivityPoints, offer.activityPointType,
|
||||
offer.product?.productCount || 1, offer.clubLevel > 0 ? 1 : 0, offer.product?.extraParam || '',
|
||||
true, -1, 0, 0
|
||||
));
|
||||
}, []);
|
||||
|
||||
const batchUpdateOfferPrices = useCallback((offerIds: number[], credits: number, points: number, pointsType: number, pageId: number) =>
|
||||
{
|
||||
setLoading(true);
|
||||
setLastError(null);
|
||||
pendingActionRef.current = 'batchPrice';
|
||||
|
||||
for(const offerId of offerIds)
|
||||
{
|
||||
SendMessageComposer(new CatalogAdminSaveOfferComposer(
|
||||
offerId, pageId, 0, '', credits, points, pointsType,
|
||||
1, 0, '', true, -1, 0, 0
|
||||
));
|
||||
}
|
||||
}, []);
|
||||
|
||||
const reorderOffers = useCallback((orders: { id: number; orderNumber: number }[]) =>
|
||||
{
|
||||
setLoading(true);
|
||||
@@ -277,16 +327,52 @@ export const CatalogAdminProvider: FC<{ children: ReactNode }> = ({ children })
|
||||
SendMessageComposer(new CatalogAdminPublishComposer());
|
||||
}, []);
|
||||
|
||||
// Keyboard shortcuts
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!adminMode) return;
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent) =>
|
||||
{
|
||||
if(e.key === 'Escape')
|
||||
{
|
||||
if(editingOffer) { setEditingOffer(null); e.preventDefault(); return; }
|
||||
if(editingPageData || editingRootPage || editingPageNode)
|
||||
{
|
||||
setEditingPageData(false);
|
||||
setEditingRootPage(false);
|
||||
setEditingPageNode(null);
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
if(selectedOfferIds.size > 0) { clearOfferSelection(); e.preventDefault(); return; }
|
||||
}
|
||||
|
||||
if(e.ctrlKey && e.shiftKey && e.key === 'P')
|
||||
{
|
||||
e.preventDefault();
|
||||
if(hasPendingChanges && !loading) publishCatalog();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [ adminMode, editingOffer, editingPageData, editingRootPage, editingPageNode, selectedOfferIds, clearOfferSelection, hasPendingChanges, loading, publishCatalog ]);
|
||||
|
||||
return (
|
||||
<CatalogAdminContext.Provider value={ {
|
||||
adminMode, setAdminMode,
|
||||
activeManageTab, setActiveManageTab,
|
||||
editingOffer, setEditingOffer,
|
||||
editingPageData, setEditingPageData,
|
||||
editingRootPage, setEditingRootPage,
|
||||
editingPageNode, setEditingPageNode,
|
||||
selectedOfferIds, toggleOfferSelection, selectAllOffers, clearOfferSelection,
|
||||
offerSearchQuery, setOfferSearchQuery,
|
||||
loading, lastError, hasPendingChanges,
|
||||
savePage, createPage, deletePage,
|
||||
saveOffer, createOffer, deleteOffer,
|
||||
savePage, createPage, deletePage, savePageImages,
|
||||
saveOffer, createOffer, deleteOffer, duplicateOffer, batchUpdateOfferPrices,
|
||||
reorderOffers, reorderPage, togglePageEnabled, togglePageVisible,
|
||||
publishCatalog
|
||||
} }>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import { AddLinkEventTracker, GetSessionDataManager, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
|
||||
import { FC, useEffect } from 'react';
|
||||
import { FaCog, FaEdit, FaEye, FaEyeSlash, FaPlus, FaTrash } from 'react-icons/fa';
|
||||
import { FC, useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { FaCog } from 'react-icons/fa';
|
||||
import { GetConfigurationValue, LocalizeText } from '../../api';
|
||||
import { Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
|
||||
import { useCatalog } from '../../hooks';
|
||||
import { CatalogAdminProvider, useCatalogAdmin } from './CatalogAdminContext';
|
||||
import { CatalogAdminEditorView } from './views/admin/CatalogAdminEditorView';
|
||||
import { CatalogAdminOfferEditView } from './views/admin/CatalogAdminOfferEditView';
|
||||
import { CatalogAdminPageEditView } from './views/admin/CatalogAdminPageEditView';
|
||||
import { CatalogIconView } from './views/catalog-icon/CatalogIconView';
|
||||
import { CatalogGiftView } from './views/gift/CatalogGiftView';
|
||||
import { CatalogNavigationView } from './views/navigation/CatalogNavigationView';
|
||||
@@ -19,54 +19,62 @@ const CatalogClassicViewInner: FC<{}> = () =>
|
||||
const catalogAdmin = useCatalogAdmin();
|
||||
const adminMode = catalogAdmin?.adminMode ?? false;
|
||||
const setAdminMode = catalogAdmin?.setAdminMode ?? (() => {});
|
||||
const hasPendingChanges = catalogAdmin?.hasPendingChanges ?? false;
|
||||
const publishCatalog = catalogAdmin?.publishCatalog ?? (() => {});
|
||||
const loading = catalogAdmin?.loading ?? false;
|
||||
|
||||
const isMod = GetSessionDataManager().isModerator;
|
||||
|
||||
// Resizable nav column
|
||||
const [ navWidth, setNavWidth ] = useState(() =>
|
||||
{
|
||||
try { const s = localStorage.getItem('catalog.classic.nav.width'); return s ? Math.min(350, Math.max(100, parseInt(s))) : 220; }
|
||||
catch { return 220; }
|
||||
});
|
||||
const isResizing = useRef(false);
|
||||
|
||||
const handleResizeStart = useCallback((e: React.MouseEvent) =>
|
||||
{
|
||||
e.preventDefault();
|
||||
isResizing.current = true;
|
||||
const startX = e.clientX;
|
||||
const startWidth = navWidth;
|
||||
|
||||
const onMouseMove = (ev: MouseEvent) =>
|
||||
{
|
||||
if(!isResizing.current) return;
|
||||
setNavWidth(Math.min(300, Math.max(100, startWidth + (ev.clientX - startX))));
|
||||
};
|
||||
|
||||
const onMouseUp = () =>
|
||||
{
|
||||
isResizing.current = false;
|
||||
document.removeEventListener('mousemove', onMouseMove);
|
||||
document.removeEventListener('mouseup', onMouseUp);
|
||||
setNavWidth(w => { try { localStorage.setItem('catalog.classic.nav.width', String(w)); } catch {} return w; });
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', onMouseMove);
|
||||
document.addEventListener('mouseup', onMouseUp);
|
||||
}, [ navWidth ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
const linkTracker: ILinkEventTracker = {
|
||||
linkReceived: (url: string) =>
|
||||
{
|
||||
const parts = url.split('/');
|
||||
|
||||
if(parts.length < 2) return;
|
||||
|
||||
switch(parts[1])
|
||||
{
|
||||
case 'show':
|
||||
setIsVisible(true);
|
||||
return;
|
||||
case 'hide':
|
||||
setIsVisible(false);
|
||||
return;
|
||||
case 'toggle':
|
||||
setIsVisible(prevValue => !prevValue);
|
||||
return;
|
||||
case 'show': setIsVisible(true); return;
|
||||
case 'hide': setIsVisible(false); return;
|
||||
case 'toggle': setIsVisible(prevValue => !prevValue); return;
|
||||
case 'open':
|
||||
if(parts.length > 2)
|
||||
{
|
||||
if(parts.length === 4)
|
||||
{
|
||||
switch(parts[2])
|
||||
{
|
||||
case 'offerId':
|
||||
openPageByOfferId(parseInt(parts[3]));
|
||||
return;
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
openPageByName(parts[2]);
|
||||
}
|
||||
if(parts.length === 4 && parts[2] === 'offerId') { openPageByOfferId(parseInt(parts[3])); return; }
|
||||
else { openPageByName(parts[2]); }
|
||||
}
|
||||
else
|
||||
{
|
||||
setIsVisible(true);
|
||||
}
|
||||
|
||||
else { setIsVisible(true); }
|
||||
return;
|
||||
}
|
||||
},
|
||||
@@ -74,7 +82,6 @@ const CatalogClassicViewInner: FC<{}> = () =>
|
||||
};
|
||||
|
||||
AddLinkEventTracker(linkTracker);
|
||||
|
||||
return () => RemoveLinkEventTracker(linkTracker);
|
||||
}, [ setIsVisible, openPageByOfferId, openPageByName ]);
|
||||
|
||||
@@ -83,89 +90,46 @@ const CatalogClassicViewInner: FC<{}> = () =>
|
||||
{ isVisible &&
|
||||
<NitroCardView className="w-[630px] h-[400px]" style={ GetConfigurationValue('catalog.headers') ? { width: 710 } : {} } uniqueKey="catalog">
|
||||
<NitroCardHeaderView headerText={ LocalizeText('catalog.title') } onCloseClick={ () => setIsVisible(false) } />
|
||||
{ /* Admin banner */ }
|
||||
{ adminMode &&
|
||||
<div className="flex items-center justify-between bg-warning text-dark text-[10px] font-bold px-3 py-0.5 uppercase tracking-wider" style={ { textShadow: '0 1px 0 rgba(255,255,255,0.3)' } }>
|
||||
<span>⚙ Admin Mode</span>
|
||||
<button
|
||||
className={ `px-3 py-0.5 rounded text-[10px] font-bold uppercase cursor-pointer transition-all ${ hasPendingChanges ? 'bg-success text-white animate-pulse shadow-md' : 'bg-white/50 text-dark hover:bg-success hover:text-white' }` }
|
||||
disabled={ loading }
|
||||
onClick={ () => publishCatalog() }
|
||||
>
|
||||
{ loading ? '...' : '⬆ Publish' }
|
||||
</button>
|
||||
</div> }
|
||||
<NitroCardTabsView>
|
||||
{ rootNode && (rootNode.children.length > 0) && rootNode.children.map((child, index) =>
|
||||
{
|
||||
if(!adminMode && !child.isVisible) return null;
|
||||
|
||||
const isHidden = !child.isVisible;
|
||||
if(!child.isVisible) return null;
|
||||
|
||||
return (
|
||||
<NitroCardTabsItemView key={ `${ child.pageId }-${ child.pageName }-${ index }` } isActive={ child.isActive } onClick={ () =>
|
||||
{
|
||||
if(searchResult) setSearchResult(null);
|
||||
|
||||
activateNode(child);
|
||||
} } >
|
||||
<div className={ `flex items-center gap-${ GetConfigurationValue('catalog.tab.icons') ? 1 : 0 } ${ isHidden ? 'opacity-40' : '' }` }>
|
||||
<div className={ `flex items-center gap-${ GetConfigurationValue('catalog.tab.icons') ? 1 : 0 }` }>
|
||||
{ GetConfigurationValue('catalog.tab.icons') && <CatalogIconView icon={ child.iconId } /> }
|
||||
{ child.localization }
|
||||
{ adminMode && isHidden && <FaEyeSlash className="text-[8px] text-danger ml-1" /> }
|
||||
{ adminMode &&
|
||||
<div className="flex items-center gap-0.5 ml-1" onClick={ e => e.stopPropagation() }>
|
||||
<FaEdit className="text-[8px] text-primary cursor-pointer hover:text-dark" title={ LocalizeText('catalog.admin.edit.title') }
|
||||
onClick={ () => { catalogAdmin.setEditingPageNode(child); catalogAdmin.setEditingRootPage(false); catalogAdmin.setEditingPageData(true); } } />
|
||||
<span className="cursor-pointer" title={ isHidden ? LocalizeText('catalog.admin.show') : LocalizeText('catalog.admin.hide') }
|
||||
onClick={ () => catalogAdmin.togglePageVisible(child.pageId) }>
|
||||
{ isHidden ? <FaEye className="text-[8px] text-success" /> : <FaEyeSlash className="text-[8px] text-muted" /> }
|
||||
</span>
|
||||
<FaTrash className="text-[8px] text-danger cursor-pointer hover:text-red-800" title={ LocalizeText('catalog.admin.delete.title') }
|
||||
onClick={ () => { if(confirm(LocalizeText('catalog.admin.delete.category.confirm', [ 'name' ], [ child.localization ]))) catalogAdmin.deletePage(child.pageId); } } />
|
||||
</div> }
|
||||
</div>
|
||||
</NitroCardTabsItemView>
|
||||
);
|
||||
}) }
|
||||
{ /* Admin toggle button in tabs bar */ }
|
||||
{ isMod &&
|
||||
<NitroCardTabsItemView isActive={ adminMode } onClick={ () => setAdminMode(!adminMode) }>
|
||||
<FaCog className={ `text-[10px] ${ adminMode ? 'animate-spin' : '' }` } style={ adminMode ? { animationDuration: '3s' } : {} } />
|
||||
</NitroCardTabsItemView> }
|
||||
</NitroCardTabsView>
|
||||
<NitroCardContentView>
|
||||
{ /* Admin: add new root category */ }
|
||||
{ adminMode && rootNode &&
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<button
|
||||
className="flex items-center gap-1 text-[9px] text-success hover:text-green-800 cursor-pointer transition-colors"
|
||||
onClick={ () => catalogAdmin.createPage({ caption: 'New Category', pageLayout: 'default_3x3', minRank: 1, visible: '1', enabled: '1', orderNum: 99, parentId: rootNode.pageId }) }
|
||||
>
|
||||
<FaPlus className="text-[8px]" />
|
||||
<span>{ LocalizeText('catalog.admin.new') }</span>
|
||||
</button>
|
||||
<button
|
||||
className="flex items-center gap-1 text-[9px] text-primary hover:text-dark cursor-pointer transition-colors"
|
||||
onClick={ () => { catalogAdmin.setEditingPageNode(null); catalogAdmin.setEditingRootPage(true); catalogAdmin.setEditingPageData(true); } }
|
||||
>
|
||||
<FaEdit className="text-[8px]" />
|
||||
<span>{ LocalizeText('catalog.admin.root') }</span>
|
||||
</button>
|
||||
</div> }
|
||||
<Grid>
|
||||
{ !navigationHidden &&
|
||||
<Column overflow="auto" size={ 3 }>
|
||||
{ activeNodes && (activeNodes.length > 0) &&
|
||||
<CatalogNavigationView node={ activeNodes[0] } /> }
|
||||
</Column> }
|
||||
<Column overflow="hidden" size={ !navigationHidden ? 9 : 12 }>
|
||||
{ adminMode && <CatalogAdminPageEditView /> }
|
||||
<div className="flex h-full overflow-hidden">
|
||||
{ !navigationHidden && activeNodes && activeNodes.length > 0 &&
|
||||
<>
|
||||
<div className="border-r-2 border-card-grid-item-border bg-card-grid-item overflow-y-auto py-1 shrink-0" style={ { width: navWidth } }>
|
||||
<CatalogNavigationView node={ activeNodes[0] } />
|
||||
</div>
|
||||
<div className="w-1 shrink-0 cursor-col-resize bg-transparent hover:bg-primary/30 active:bg-primary/50 transition-colors" onMouseDown={ handleResizeStart } />
|
||||
</> }
|
||||
<div className="flex-1 overflow-auto">
|
||||
{ GetCatalogLayout(currentPage, () => setNavigationHidden(true)) }
|
||||
</Column>
|
||||
</Grid>
|
||||
</div>
|
||||
</div>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView> }
|
||||
{ /* External windows */ }
|
||||
<CatalogAdminEditorView />
|
||||
<CatalogAdminOfferEditView />
|
||||
<CatalogGiftView />
|
||||
<MarketplacePostOfferView />
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import { AddLinkEventTracker, GetSessionDataManager, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { FaCog, FaEdit, FaEye, FaEyeSlash, FaHeart, FaPlus, FaStar, FaTrash } from 'react-icons/fa';
|
||||
import { FC, useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { FaCog, FaHeart, FaStar } from 'react-icons/fa';
|
||||
import { LocalizeText } from '../../api';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
|
||||
import { useCatalog, useCatalogFavorites } from '../../hooks';
|
||||
import { CatalogAdminProvider, useCatalogAdmin } from './CatalogAdminContext';
|
||||
import { CatalogAdminEditorView } from './views/admin/CatalogAdminEditorView';
|
||||
import { CatalogAdminOfferEditView } from './views/admin/CatalogAdminOfferEditView';
|
||||
import { CatalogAdminPageEditView } from './views/admin/CatalogAdminPageEditView';
|
||||
import { CatalogIconView } from './views/catalog-icon/CatalogIconView';
|
||||
import { CatalogFavoritesView } from './views/favorites/CatalogFavoritesView';
|
||||
import { CatalogGiftView } from './views/gift/CatalogGiftView';
|
||||
@@ -21,57 +21,65 @@ const CatalogModernViewInner: FC<{}> = () =>
|
||||
const catalogAdmin = useCatalogAdmin();
|
||||
const adminMode = catalogAdmin?.adminMode ?? false;
|
||||
const setAdminMode = catalogAdmin?.setAdminMode ?? (() => {});
|
||||
const hasPendingChanges = catalogAdmin?.hasPendingChanges ?? false;
|
||||
const publishCatalog = catalogAdmin?.publishCatalog ?? (() => {});
|
||||
const loading = catalogAdmin?.loading ?? false;
|
||||
const { favoriteOfferIds, favoritePageIds } = useCatalogFavorites();
|
||||
const [ showFavorites, setShowFavorites ] = useState(false);
|
||||
|
||||
const isMod = GetSessionDataManager().isModerator;
|
||||
const totalFavs = favoriteOfferIds.length + favoritePageIds.length;
|
||||
|
||||
// Resizable nav column
|
||||
const [ navWidth, setNavWidth ] = useState(() =>
|
||||
{
|
||||
try { const s = localStorage.getItem('catalog.nav.width'); return s ? Math.min(400, Math.max(140, parseInt(s))) : 280; }
|
||||
catch { return 280; }
|
||||
});
|
||||
const isResizing = useRef(false);
|
||||
|
||||
const handleResizeStart = useCallback((e: React.MouseEvent) =>
|
||||
{
|
||||
e.preventDefault();
|
||||
isResizing.current = true;
|
||||
const startX = e.clientX;
|
||||
const startWidth = navWidth;
|
||||
|
||||
const onMouseMove = (ev: MouseEvent) =>
|
||||
{
|
||||
if(!isResizing.current) return;
|
||||
setNavWidth(Math.min(350, Math.max(140, startWidth + (ev.clientX - startX))));
|
||||
};
|
||||
|
||||
const onMouseUp = () =>
|
||||
{
|
||||
isResizing.current = false;
|
||||
document.removeEventListener('mousemove', onMouseMove);
|
||||
document.removeEventListener('mouseup', onMouseUp);
|
||||
setNavWidth(w => { try { localStorage.setItem('catalog.nav.width', String(w)); } catch {} return w; });
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', onMouseMove);
|
||||
document.addEventListener('mouseup', onMouseUp);
|
||||
}, [ navWidth ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
const linkTracker: ILinkEventTracker = {
|
||||
linkReceived: (url: string) =>
|
||||
{
|
||||
const parts = url.split('/');
|
||||
|
||||
if(parts.length < 2) return;
|
||||
|
||||
switch(parts[1])
|
||||
{
|
||||
case 'show':
|
||||
setIsVisible(true);
|
||||
return;
|
||||
case 'hide':
|
||||
setIsVisible(false);
|
||||
return;
|
||||
case 'toggle':
|
||||
setIsVisible(prevValue => !prevValue);
|
||||
return;
|
||||
case 'show': setIsVisible(true); return;
|
||||
case 'hide': setIsVisible(false); return;
|
||||
case 'toggle': setIsVisible(prevValue => !prevValue); return;
|
||||
case 'open':
|
||||
if(parts.length > 2)
|
||||
{
|
||||
if(parts.length === 4)
|
||||
{
|
||||
switch(parts[2])
|
||||
{
|
||||
case 'offerId':
|
||||
openPageByOfferId(parseInt(parts[3]));
|
||||
return;
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
openPageByName(parts[2]);
|
||||
}
|
||||
if(parts.length === 4 && parts[2] === 'offerId') { openPageByOfferId(parseInt(parts[3])); return; }
|
||||
else { openPageByName(parts[2]); }
|
||||
}
|
||||
else
|
||||
{
|
||||
setIsVisible(true);
|
||||
}
|
||||
|
||||
else { setIsVisible(true); }
|
||||
return;
|
||||
}
|
||||
},
|
||||
@@ -79,7 +87,6 @@ const CatalogModernViewInner: FC<{}> = () =>
|
||||
};
|
||||
|
||||
AddLinkEventTracker(linkTracker);
|
||||
|
||||
return () => RemoveLinkEventTracker(linkTracker);
|
||||
}, [ setIsVisible, openPageByOfferId, openPageByName ]);
|
||||
|
||||
@@ -89,73 +96,33 @@ const CatalogModernViewInner: FC<{}> = () =>
|
||||
<NitroCardView className="nitro-catalog w-[780px] h-[520px]" uniqueKey="catalog">
|
||||
<NitroCardHeaderView headerText={ LocalizeText('catalog.title') } onCloseClick={ () => setIsVisible(false) } />
|
||||
<NitroCardContentView classNames={ [ 'p-0!', 'overflow-hidden!' ] }>
|
||||
{ /* Admin banner */ }
|
||||
{ adminMode &&
|
||||
<div className="flex items-center justify-between bg-warning text-dark text-[10px] font-bold px-3 py-0.5 uppercase tracking-wider" style={ { textShadow: '0 1px 0 rgba(255,255,255,0.3)' } }>
|
||||
<span>⚙ Admin Mode</span>
|
||||
<button
|
||||
className={ `px-3 py-0.5 rounded text-[10px] font-bold uppercase cursor-pointer transition-all ${ hasPendingChanges ? 'bg-success text-white animate-pulse shadow-md' : 'bg-white/50 text-dark hover:bg-success hover:text-white' }` }
|
||||
disabled={ loading }
|
||||
onClick={ () => publishCatalog() }
|
||||
>
|
||||
{ loading ? '...' : hasPendingChanges ? '⬆ Publish' : '⬆ Publish' }
|
||||
</button>
|
||||
</div> }
|
||||
|
||||
<div className="flex h-full">
|
||||
{ /* === LEFT SIDEBAR === */ }
|
||||
<div className="group/rail flex flex-col w-[52px] hover:w-[175px] min-w-[52px] bg-card-grid-item border-r-2 border-card-grid-item-border py-1.5 gap-px overflow-y-auto overflow-x-hidden transition-[width] duration-200 ease-in-out">
|
||||
|
||||
{ /* Favorites toggle */ }
|
||||
{ /* Favorites */ }
|
||||
<div
|
||||
className={ `flex items-center gap-2 mx-1 px-1.5 py-1.5 rounded cursor-pointer transition-all duration-150 ${ showFavorites ? 'bg-primary text-white' : 'hover:bg-card-grid-item-active' }` }
|
||||
onClick={ () => setShowFavorites(!showFavorites) }
|
||||
>
|
||||
<div className="w-7 h-6 flex items-center justify-center shrink-0 relative">
|
||||
<FaHeart className={ `text-xs ${ showFavorites ? 'text-white' : totalFavs > 0 ? 'text-danger' : 'text-muted' }` } />
|
||||
{ totalFavs > 0 &&
|
||||
<span className="absolute -top-1 -right-1 min-w-[14px] h-[14px] bg-danger text-white text-[8px] font-bold rounded-full flex items-center justify-center px-0.5 leading-none">
|
||||
{ totalFavs }
|
||||
</span> }
|
||||
{ totalFavs > 0 && <span className="absolute -top-1 -right-1 min-w-[14px] h-[14px] bg-danger text-white text-[8px] font-bold rounded-full flex items-center justify-center px-0.5 leading-none">{ totalFavs }</span> }
|
||||
</div>
|
||||
<span className={ `text-[11px] font-bold whitespace-nowrap opacity-0 group-hover/rail:opacity-100 transition-opacity duration-200 ${ showFavorites ? 'text-white' : '' }` }>{ LocalizeText('catalog.favorites') }</span>
|
||||
</div>
|
||||
|
||||
<div className="border-b border-card-grid-item-border mx-2 my-0.5" />
|
||||
|
||||
{ /* Admin: root page actions */ }
|
||||
{ adminMode && rootNode &&
|
||||
<div className="flex items-center gap-1 mx-1 px-1.5 py-1 opacity-0 group-hover/rail:opacity-100 transition-opacity">
|
||||
<button
|
||||
className="flex items-center gap-1 text-[9px] text-success hover:text-green-800 cursor-pointer transition-colors"
|
||||
title={ LocalizeText('catalog.admin.new.root.category') }
|
||||
onClick={ () => catalogAdmin.createPage({ caption: 'New Category', pageLayout: 'default_3x3', minRank: 1, visible: '1', enabled: '1', orderNum: 99, parentId: rootNode.pageId }) }
|
||||
>
|
||||
<FaPlus className="text-[8px]" />
|
||||
<span className="whitespace-nowrap">{ LocalizeText('catalog.admin.new') }</span>
|
||||
</button>
|
||||
<button
|
||||
className="flex items-center gap-1 text-[9px] text-primary hover:text-dark cursor-pointer transition-colors"
|
||||
title={ LocalizeText('catalog.admin.edit.root') }
|
||||
onClick={ () => { catalogAdmin.setEditingPageNode(null); catalogAdmin.setEditingRootPage(true); catalogAdmin.setEditingPageData(true); } }
|
||||
>
|
||||
<FaEdit className="text-[8px]" />
|
||||
<span className="whitespace-nowrap">{ LocalizeText('catalog.admin.root') }</span>
|
||||
</button>
|
||||
</div> }
|
||||
|
||||
{ /* Category icons */ }
|
||||
{ /* Categories */ }
|
||||
{ rootNode && rootNode.children.length > 0 && rootNode.children.map((child, index) =>
|
||||
{
|
||||
if(!adminMode && !child.isVisible) return null;
|
||||
|
||||
const isHidden = !child.isVisible;
|
||||
if(!child.isVisible) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={ `${ child.pageId }-${ index }` }
|
||||
className={ `group/cat flex items-center gap-2 mx-1 px-1.5 py-1 rounded cursor-pointer transition-all duration-150 ${ isHidden ? 'opacity-40' : '' } ${ child.isActive ? 'bg-card-grid-item-active border border-card-grid-item-border-active shadow-inner1px' : 'border border-transparent hover:bg-card-grid-item-active' }` }
|
||||
title={ adminMode ? `${ child.localization } [ID: ${ child.pageId }]${ isHidden ? ` (${ LocalizeText('catalog.admin.hidden') })` : '' }` : child.localization }
|
||||
className={ `group/cat flex items-center gap-2 mx-1 px-1.5 py-1 rounded cursor-pointer transition-all duration-150 ${ child.isActive ? 'bg-card-grid-item-active border border-card-grid-item-border-active shadow-inner1px' : 'border border-transparent hover:bg-card-grid-item-active' }` }
|
||||
title={ child.localization }
|
||||
onClick={ () =>
|
||||
{
|
||||
if(searchResult) setSearchResult(null);
|
||||
@@ -163,57 +130,12 @@ const CatalogModernViewInner: FC<{}> = () =>
|
||||
activateNode(child);
|
||||
} }
|
||||
>
|
||||
<div className="w-7 h-6 flex items-center justify-center shrink-0 relative">
|
||||
<div className="w-7 h-6 flex items-center justify-center shrink-0">
|
||||
<CatalogIconView icon={ child.iconId } />
|
||||
{ isHidden && <FaEyeSlash className="absolute -bottom-0.5 -right-0.5 text-[7px] text-danger" /> }
|
||||
</div>
|
||||
<span className={ `text-[11px] whitespace-nowrap overflow-hidden truncate opacity-0 group-hover/rail:opacity-100 transition-opacity duration-200 flex-1 ${ child.isActive ? 'font-bold text-dark' : 'text-gray-700' }` }>
|
||||
{ child.localization }
|
||||
</span>
|
||||
{ /* Admin actions on each root category */ }
|
||||
{ adminMode &&
|
||||
<div className="flex items-center gap-1 opacity-0 group-hover/rail:opacity-100 transition-opacity shrink-0">
|
||||
<div
|
||||
className="w-[18px] h-[18px] rounded flex items-center justify-center hover:bg-primary/20 cursor-pointer transition-colors"
|
||||
title={ `${ LocalizeText('catalog.admin.edit.title') } "${ child.localization }"` }
|
||||
onClick={ e =>
|
||||
{
|
||||
e.stopPropagation();
|
||||
catalogAdmin.setEditingPageNode(child);
|
||||
catalogAdmin.setEditingRootPage(false);
|
||||
catalogAdmin.setEditingPageData(true);
|
||||
} }
|
||||
>
|
||||
<FaEdit className="text-[9px] text-primary" />
|
||||
</div>
|
||||
<div
|
||||
className="w-[18px] h-[18px] rounded flex items-center justify-center hover:bg-warning/20 cursor-pointer transition-colors"
|
||||
title={ isHidden ? LocalizeText('catalog.admin.show') : LocalizeText('catalog.admin.hide') }
|
||||
onClick={ e =>
|
||||
{
|
||||
e.stopPropagation();
|
||||
catalogAdmin.togglePageVisible(child.pageId);
|
||||
} }
|
||||
>
|
||||
{ isHidden
|
||||
? <FaEye className="text-[9px] text-success" />
|
||||
: <FaEyeSlash className="text-[9px] text-muted" /> }
|
||||
</div>
|
||||
<div
|
||||
className="w-[18px] h-[18px] rounded flex items-center justify-center hover:bg-danger/20 cursor-pointer transition-colors"
|
||||
title={ `${ LocalizeText('catalog.admin.delete.title') } "${ child.localization }"` }
|
||||
onClick={ e =>
|
||||
{
|
||||
e.stopPropagation();
|
||||
if(confirm(LocalizeText('catalog.admin.delete.category.confirm', [ 'name' ], [ child.localization ])))
|
||||
{
|
||||
catalogAdmin.deletePage(child.pageId);
|
||||
}
|
||||
} }
|
||||
>
|
||||
<FaTrash className="text-[9px] text-danger" />
|
||||
</div>
|
||||
</div> }
|
||||
</div>
|
||||
);
|
||||
}) }
|
||||
@@ -221,15 +143,14 @@ const CatalogModernViewInner: FC<{}> = () =>
|
||||
|
||||
{ /* === MAIN AREA === */ }
|
||||
<div className="flex flex-col flex-1 overflow-hidden bg-light">
|
||||
{ /* Toolbar: search + admin */ }
|
||||
<div className="flex items-center gap-2 px-2 py-1.5 bg-card-tab-item border-b border-card-grid-item-border">
|
||||
{ /* Breadcrumb */ }
|
||||
{ /* Toolbar */ }
|
||||
<div className="flex items-center gap-2 px-2 py-1.5 bg-card-tab-item border-b border-card-grid-item-border shrink-0">
|
||||
<div className="flex items-center gap-1 text-[11px] text-gray-600 min-w-0 flex-1">
|
||||
<FaStar className="text-[9px] text-primary shrink-0" />
|
||||
{ activeNodes && activeNodes.length > 0
|
||||
? activeNodes.map((node, i) => (
|
||||
<span key={ `${ node.pageId }-${ i }` } className="flex items-center gap-1 min-w-0">
|
||||
{ i > 0 && <span className="text-[8px] opacity-30">›</span> }
|
||||
{ i > 0 && <span className="text-[8px] opacity-30">{ '\u203A' }</span> }
|
||||
<span className={ `truncate ${ i === activeNodes.length - 1 ? 'font-bold text-dark' : 'cursor-pointer hover:text-primary' }` }
|
||||
onClick={ i < activeNodes.length - 1 ? () => activateNode(node) : undefined }>
|
||||
{ node.localization }
|
||||
@@ -238,11 +159,7 @@ const CatalogModernViewInner: FC<{}> = () =>
|
||||
))
|
||||
: <span className="text-muted">{ LocalizeText('catalog.title') }</span> }
|
||||
</div>
|
||||
|
||||
<div className="w-[180px] shrink-0">
|
||||
<CatalogSearchView />
|
||||
</div>
|
||||
|
||||
<div className="w-[180px] shrink-0"><CatalogSearchView /></div>
|
||||
{ isMod &&
|
||||
<button
|
||||
className={ `flex items-center gap-1 px-2 py-1 rounded text-[10px] font-bold cursor-pointer transition-all border ${ adminMode ? 'bg-warning text-dark border-warning shadow-inner1px' : 'bg-card-grid-item text-gray-600 border-card-grid-item-border hover:bg-primary hover:text-white hover:border-primary' }` }
|
||||
@@ -253,19 +170,19 @@ const CatalogModernViewInner: FC<{}> = () =>
|
||||
</button> }
|
||||
</div>
|
||||
|
||||
{ /* Content area */ }
|
||||
{ /* Content */ }
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
{ showFavorites
|
||||
? <div className="flex-1 overflow-auto bg-card-content-area">
|
||||
<CatalogFavoritesView onClose={ () => setShowFavorites(false) } />
|
||||
</div>
|
||||
? <div className="flex-1 overflow-auto bg-card-content-area"><CatalogFavoritesView onClose={ () => setShowFavorites(false) } /></div>
|
||||
: <>
|
||||
{ !navigationHidden && activeNodes && activeNodes.length > 0 &&
|
||||
<div className="w-[170px] min-w-[170px] border-r-2 border-card-grid-item-border bg-card-grid-item overflow-y-auto py-1">
|
||||
<CatalogNavigationView node={ activeNodes[0] } />
|
||||
</div> }
|
||||
<>
|
||||
<div className="border-r-2 border-card-grid-item-border bg-card-grid-item overflow-y-auto py-1 shrink-0" style={ { width: navWidth } }>
|
||||
<CatalogNavigationView node={ activeNodes[0] } />
|
||||
</div>
|
||||
<div className="w-1 shrink-0 cursor-col-resize bg-transparent hover:bg-primary/30 active:bg-primary/50 transition-colors" onMouseDown={ handleResizeStart } />
|
||||
</> }
|
||||
<div className="flex-1 overflow-auto p-2 bg-card-content-area">
|
||||
{ adminMode && <CatalogAdminPageEditView /> }
|
||||
{ GetCatalogLayout(currentPage, () => setNavigationHidden(true)) }
|
||||
</div>
|
||||
</> }
|
||||
@@ -274,6 +191,8 @@ const CatalogModernViewInner: FC<{}> = () =>
|
||||
</div>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView> }
|
||||
{ /* External windows */ }
|
||||
<CatalogAdminEditorView />
|
||||
<CatalogAdminOfferEditView />
|
||||
<CatalogGiftView />
|
||||
<MarketplacePostOfferView />
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
import { FC } from 'react';
|
||||
import { FaBoxOpen, FaCloudUploadAlt, FaSitemap } from 'react-icons/fa';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
|
||||
import { AdminManageTab, useCatalogAdmin } from '../../CatalogAdminContext';
|
||||
import { CatalogAdminOfferPanel } from './CatalogAdminOfferPanel';
|
||||
import { CatalogAdminPagePanel } from './CatalogAdminPagePanel';
|
||||
import { CatalogAdminPublishPanel } from './CatalogAdminPublishPanel';
|
||||
|
||||
const TABS: { key: AdminManageTab; label: string; icon: FC<{ className?: string }> }[] = [
|
||||
{ key: 'pages', label: 'Pages', icon: FaSitemap },
|
||||
{ key: 'offers', label: 'Offers', icon: FaBoxOpen },
|
||||
{ key: 'publish', label: 'Publish', icon: FaCloudUploadAlt },
|
||||
];
|
||||
|
||||
export const CatalogAdminEditorView: FC<{}> = () =>
|
||||
{
|
||||
const catalogAdmin = useCatalogAdmin();
|
||||
const adminMode = catalogAdmin?.adminMode ?? false;
|
||||
const setAdminMode = catalogAdmin?.setAdminMode;
|
||||
const activeTab = catalogAdmin?.activeManageTab ?? 'pages';
|
||||
const setActiveTab = catalogAdmin?.setActiveManageTab;
|
||||
const hasPendingChanges = catalogAdmin?.hasPendingChanges ?? false;
|
||||
const loading = catalogAdmin?.loading ?? false;
|
||||
const publishCatalog = catalogAdmin?.publishCatalog;
|
||||
|
||||
if(!adminMode) return null;
|
||||
|
||||
return (
|
||||
<NitroCardView className="w-[1000px] h-[650px]" uniqueKey="catalog-admin">
|
||||
<NitroCardHeaderView headerText="Catalog Admin Editor" onCloseClick={ () => setAdminMode(false) } />
|
||||
|
||||
{ /* Tab bar */ }
|
||||
<div className="flex items-center gap-1 px-2 py-1.5 bg-card-tab-item border-b-2 border-card-grid-item-border shrink-0">
|
||||
{ TABS.map(tab =>
|
||||
{
|
||||
const Icon = tab.icon;
|
||||
const isActive = activeTab === tab.key;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={ tab.key }
|
||||
className={ `flex items-center gap-1.5 px-3 py-1 rounded text-[12px] font-bold cursor-pointer transition-all ${ isActive
|
||||
? 'bg-primary text-white shadow-sm'
|
||||
: 'text-gray-700 hover:bg-white/30 hover:text-dark' }` }
|
||||
onClick={ () => setActiveTab(tab.key) }
|
||||
>
|
||||
<Icon className="text-[11px]" />
|
||||
{ tab.label }
|
||||
{ tab.key === 'publish' && hasPendingChanges &&
|
||||
<span className="min-w-[6px] h-[6px] bg-warning rounded-full animate-pulse" /> }
|
||||
</button>
|
||||
);
|
||||
}) }
|
||||
|
||||
<div className="flex-1" />
|
||||
|
||||
{ hasPendingChanges &&
|
||||
<button
|
||||
className="flex items-center gap-1.5 px-3 py-1 rounded text-[12px] font-bold bg-success text-white hover:bg-green-700 transition-colors cursor-pointer disabled:opacity-50"
|
||||
disabled={ loading }
|
||||
onClick={ () => publishCatalog() }
|
||||
>
|
||||
<FaCloudUploadAlt className="text-[11px]" />
|
||||
Publish
|
||||
</button> }
|
||||
</div>
|
||||
|
||||
<NitroCardContentView classNames={ [ 'p-0!', 'overflow-hidden!' ] }>
|
||||
{ activeTab === 'pages' && <CatalogAdminPagePanel /> }
|
||||
{ activeTab === 'offers' && <CatalogAdminOfferPanel /> }
|
||||
{ activeTab === 'publish' && <CatalogAdminPublishPanel /> }
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,191 @@
|
||||
import { FC, useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { FaSearch, FaSpinner, FaTimes } from 'react-icons/fa';
|
||||
import { LocalizeText } from '../../../../api';
|
||||
import { CatalogIconView } from '../catalog-icon/CatalogIconView';
|
||||
|
||||
export interface CatalogAdminIconBrowserProps
|
||||
{
|
||||
currentIconId: number;
|
||||
onSelect: (iconId: number) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
interface IconResult
|
||||
{
|
||||
icons: number[];
|
||||
total: number;
|
||||
offset: number;
|
||||
limit: number;
|
||||
}
|
||||
|
||||
export const CatalogAdminIconBrowser: FC<CatalogAdminIconBrowserProps> = props =>
|
||||
{
|
||||
const { currentIconId, onSelect, onClose } = props;
|
||||
|
||||
const [ icons, setIcons ] = useState<number[]>([]);
|
||||
const [ total, setTotal ] = useState(0);
|
||||
const [ offset, setOffset ] = useState(0);
|
||||
const [ search, setSearch ] = useState('');
|
||||
const [ loading, setLoading ] = useState(false);
|
||||
const [ selected, setSelected ] = useState<number | null>(null);
|
||||
const debounceRef = useRef<ReturnType<typeof setTimeout>>(null);
|
||||
const limit = 120;
|
||||
|
||||
const fetchIcons = useCallback(async (searchQuery: string, newOffset: number, append: boolean) =>
|
||||
{
|
||||
setLoading(true);
|
||||
|
||||
try
|
||||
{
|
||||
const params = new URLSearchParams({ limit: String(limit), offset: String(newOffset) });
|
||||
|
||||
if(searchQuery) params.set('search', searchQuery);
|
||||
|
||||
const res = await fetch(`/api/admin/catalog/icons?${ params.toString() }`);
|
||||
const data: IconResult = await res.json();
|
||||
|
||||
setIcons(prev => append ? [ ...prev, ...data.icons ] : data.icons);
|
||||
setTotal(data.total);
|
||||
setOffset(newOffset);
|
||||
}
|
||||
catch(e)
|
||||
{
|
||||
console.error('Failed to fetch catalog icons', e);
|
||||
}
|
||||
finally
|
||||
{
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
fetchIcons('', 0, false);
|
||||
}, [ fetchIcons ]);
|
||||
|
||||
const handleSearchChange = useCallback((value: string) =>
|
||||
{
|
||||
setSearch(value);
|
||||
|
||||
if(debounceRef.current) clearTimeout(debounceRef.current);
|
||||
|
||||
debounceRef.current = setTimeout(() =>
|
||||
{
|
||||
setSelected(null);
|
||||
fetchIcons(value, 0, false);
|
||||
}, 300);
|
||||
}, [ fetchIcons ]);
|
||||
|
||||
const handleLoadMore = useCallback(() =>
|
||||
{
|
||||
fetchIcons(search, offset + limit, true);
|
||||
}, [ offset, search, fetchIcons ]);
|
||||
|
||||
const handleConfirm = useCallback(() =>
|
||||
{
|
||||
if(selected !== null) onSelect(selected);
|
||||
}, [ selected, onSelect ]);
|
||||
|
||||
const hasMore = icons.length < total;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 flex items-center justify-center" style={ { zIndex: 1000 } } onClick={ onClose }>
|
||||
<div className="absolute inset-0 bg-black/30 backdrop-blur-[1px]" />
|
||||
|
||||
<div className="relative bg-light rounded-lg w-[560px] h-[460px] border-2 border-card-border overflow-hidden shadow-lg flex flex-col" onClick={ e => e.stopPropagation() }>
|
||||
{ /* Header */ }
|
||||
<div className="flex items-center justify-between px-3 py-2 bg-card-header shrink-0">
|
||||
<span className="text-sm font-bold text-white">
|
||||
Choose Icon
|
||||
</span>
|
||||
<div className="cursor-pointer" onClick={ onClose }>
|
||||
<FaTimes className="text-white/70 hover:text-white text-xs" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ /* Search */ }
|
||||
<div className="flex items-center gap-2 px-3 py-2 border-b border-card-grid-item-border bg-card-grid-item shrink-0">
|
||||
<div className="relative flex-1">
|
||||
<FaSearch className="absolute left-2 top-1/2 -translate-y-1/2 text-[11px] text-gray-600" />
|
||||
<input
|
||||
autoFocus
|
||||
className="w-full text-[13px] border border-card-grid-item-border rounded pl-7 pr-2 py-1.5 bg-white focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"
|
||||
placeholder="Search by ID..."
|
||||
type="text"
|
||||
value={ search }
|
||||
onChange={ e => handleSearchChange(e.target.value) }
|
||||
/>
|
||||
</div>
|
||||
<span className="text-[12px] text-gray-600 shrink-0">{ total } icons</span>
|
||||
</div>
|
||||
|
||||
{ /* Grid */ }
|
||||
<div className="flex-1 overflow-y-auto p-2">
|
||||
{ icons.length === 0 && !loading
|
||||
? <div className="flex items-center justify-center h-full text-[13px] text-gray-600">
|
||||
{ search ? 'No icons found' : 'No icons available' }
|
||||
</div>
|
||||
: <div className="grid grid-cols-10 gap-1">
|
||||
{ icons.map(id =>
|
||||
{
|
||||
const isSelected = selected === id;
|
||||
const isCurrent = currentIconId === id;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={ id }
|
||||
className={ `relative flex flex-col items-center justify-center p-1 rounded border-2 cursor-pointer transition-all h-[44px]
|
||||
${ isSelected ? 'border-primary bg-primary/10 shadow-md' : isCurrent ? 'border-success/60 bg-success/5' : 'border-card-grid-item-border bg-white hover:border-primary/40 hover:shadow-sm' }` }
|
||||
title={ `Icon ${ id }` }
|
||||
onClick={ () => setSelected(id) }
|
||||
onDoubleClick={ () => onSelect(id) }
|
||||
>
|
||||
<CatalogIconView icon={ id } className="w-6 h-6" />
|
||||
<span className="text-[9px] text-gray-600 font-mono">{ id }</span>
|
||||
{ isCurrent && <span className="absolute -top-1 -right-1 w-2.5 h-2.5 bg-success rounded-full border border-white" /> }
|
||||
</div>
|
||||
);
|
||||
}) }
|
||||
</div> }
|
||||
|
||||
{ loading &&
|
||||
<div className="flex items-center justify-center py-4">
|
||||
<FaSpinner className="text-primary animate-spin" />
|
||||
</div> }
|
||||
|
||||
{ hasMore && !loading &&
|
||||
<div className="flex justify-center mt-2">
|
||||
<button
|
||||
className="text-[12px] text-primary hover:text-secondary font-bold cursor-pointer transition-colors"
|
||||
onClick={ handleLoadMore }
|
||||
>
|
||||
Load more ({ icons.length }/{ total })
|
||||
</button>
|
||||
</div> }
|
||||
</div>
|
||||
|
||||
{ /* Footer */ }
|
||||
<div className="flex items-center justify-between px-3 py-2 border-t border-card-grid-item-border bg-card-grid-item shrink-0">
|
||||
<div className="text-[12px] text-gray-600 truncate flex-1 mr-2">
|
||||
{ selected !== null ? `Icon #${ selected }` : 'Click an icon to select' }
|
||||
</div>
|
||||
<div className="flex gap-1.5">
|
||||
<button
|
||||
className="px-3 py-1 rounded text-[12px] font-bold bg-card-grid-item-border text-gray-700 hover:bg-gray-400 transition-colors cursor-pointer"
|
||||
onClick={ onClose }
|
||||
>
|
||||
{ LocalizeText('generic.cancel') }
|
||||
</button>
|
||||
<button
|
||||
className="px-3 py-1 rounded text-[12px] font-bold bg-primary text-white hover:bg-secondary transition-colors cursor-pointer disabled:opacity-50"
|
||||
disabled={ selected === null }
|
||||
onClick={ handleConfirm }
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,216 @@
|
||||
import { FC, useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { FaSearch, FaSpinner, FaTimes } from 'react-icons/fa';
|
||||
import { GetConfigurationValue, LocalizeText } from '../../../../api';
|
||||
|
||||
export interface CatalogAdminImageBrowserProps
|
||||
{
|
||||
type: 'header' | 'teaser';
|
||||
currentImage?: string;
|
||||
onSelect: (filename: string) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
interface ImageResult
|
||||
{
|
||||
images: string[];
|
||||
total: number;
|
||||
offset: number;
|
||||
limit: number;
|
||||
}
|
||||
|
||||
export const CatalogAdminImageBrowser: FC<CatalogAdminImageBrowserProps> = props =>
|
||||
{
|
||||
const { type, currentImage, onSelect, onClose } = props;
|
||||
|
||||
const [ images, setImages ] = useState<string[]>([]);
|
||||
const [ total, setTotal ] = useState(0);
|
||||
const [ offset, setOffset ] = useState(0);
|
||||
const [ search, setSearch ] = useState('');
|
||||
const [ loading, setLoading ] = useState(false);
|
||||
const [ selected, setSelected ] = useState<string | null>(null);
|
||||
const debounceRef = useRef<ReturnType<typeof setTimeout>>(null);
|
||||
const limit = 80;
|
||||
|
||||
const buildImageUrl = useCallback((name: string) =>
|
||||
{
|
||||
const assetUrl = GetConfigurationValue<string>('catalog.asset.image.url');
|
||||
|
||||
return assetUrl.replace('%name%', name);
|
||||
}, []);
|
||||
|
||||
const fetchImages = useCallback(async (searchQuery: string, newOffset: number, append: boolean) =>
|
||||
{
|
||||
setLoading(true);
|
||||
|
||||
try
|
||||
{
|
||||
const params = new URLSearchParams({ type, limit: String(limit), offset: String(newOffset) });
|
||||
|
||||
if(searchQuery) params.set('search', searchQuery);
|
||||
|
||||
const res = await fetch(`/api/admin/catalog/images?${ params.toString() }`);
|
||||
const data: ImageResult = await res.json();
|
||||
|
||||
setImages(prev => append ? [ ...prev, ...data.images ] : data.images);
|
||||
setTotal(data.total);
|
||||
setOffset(newOffset);
|
||||
}
|
||||
catch(e)
|
||||
{
|
||||
console.error('Failed to fetch catalog images', e);
|
||||
}
|
||||
finally
|
||||
{
|
||||
setLoading(false);
|
||||
}
|
||||
}, [ type ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
fetchImages('', 0, false);
|
||||
}, [ fetchImages ]);
|
||||
|
||||
const handleSearchChange = useCallback((value: string) =>
|
||||
{
|
||||
setSearch(value);
|
||||
|
||||
if(debounceRef.current) clearTimeout(debounceRef.current);
|
||||
|
||||
debounceRef.current = setTimeout(() =>
|
||||
{
|
||||
setSelected(null);
|
||||
fetchImages(value, 0, false);
|
||||
}, 300);
|
||||
}, [ fetchImages ]);
|
||||
|
||||
const handleLoadMore = useCallback(() =>
|
||||
{
|
||||
const newOffset = offset + limit;
|
||||
|
||||
fetchImages(search, newOffset, true);
|
||||
}, [ offset, search, fetchImages ]);
|
||||
|
||||
const handleSelect = useCallback((name: string) =>
|
||||
{
|
||||
setSelected(name);
|
||||
}, []);
|
||||
|
||||
const handleConfirm = useCallback(() =>
|
||||
{
|
||||
if(selected) onSelect(selected);
|
||||
}, [ selected, onSelect ]);
|
||||
|
||||
const handleDoubleClick = useCallback((name: string) =>
|
||||
{
|
||||
onSelect(name);
|
||||
}, [ onSelect ]);
|
||||
|
||||
const hasMore = images.length < total;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 flex items-center justify-center" style={ { zIndex: 1000 } } onClick={ onClose }>
|
||||
<div className="absolute inset-0 bg-black/30 backdrop-blur-[1px]" />
|
||||
|
||||
<div className="relative bg-light rounded-lg w-[520px] h-[420px] border-2 border-card-border overflow-hidden shadow-lg flex flex-col" onClick={ e => e.stopPropagation() }>
|
||||
{ /* Header */ }
|
||||
<div className="flex items-center justify-between px-3 py-2 bg-card-header shrink-0">
|
||||
<span className="text-sm font-bold text-white">
|
||||
{ type === 'header' ? LocalizeText('catalog.admin.browse.header') : LocalizeText('catalog.admin.browse.teaser') }
|
||||
</span>
|
||||
<div className="cursor-pointer" onClick={ onClose }>
|
||||
<FaTimes className="text-white/70 hover:text-white text-xs" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ /* Search */ }
|
||||
<div className="flex items-center gap-2 px-3 py-2 border-b border-card-grid-item-border bg-card-grid-item shrink-0">
|
||||
<div className="relative flex-1">
|
||||
<FaSearch className="absolute left-2 top-1/2 -translate-y-1/2 text-[11px] text-gray-600" />
|
||||
<input
|
||||
autoFocus
|
||||
className="w-full text-[13px] border border-card-grid-item-border rounded pl-7 pr-2 py-1.5 bg-white focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"
|
||||
placeholder={ LocalizeText('catalog.admin.search.images') }
|
||||
type="text"
|
||||
value={ search }
|
||||
onChange={ e => handleSearchChange(e.target.value) }
|
||||
/>
|
||||
</div>
|
||||
<span className="text-[12px] text-gray-600 shrink-0">{ total } { LocalizeText('catalog.admin.images.found') }</span>
|
||||
</div>
|
||||
|
||||
{ /* Grid */ }
|
||||
<div className="flex-1 overflow-y-auto p-2">
|
||||
{ images.length === 0 && !loading
|
||||
? <div className="flex items-center justify-center h-full text-[13px] text-gray-600">
|
||||
{ search ? LocalizeText('catalog.admin.images.noresults') : LocalizeText('catalog.admin.images.empty') }
|
||||
</div>
|
||||
: <div className="grid grid-cols-5 gap-1.5">
|
||||
{ images.map(name =>
|
||||
{
|
||||
const url = buildImageUrl(name);
|
||||
const isSelected = selected === name;
|
||||
const isCurrent = currentImage && currentImage.includes(name);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={ name }
|
||||
className={ `relative flex flex-col items-center justify-center p-1.5 rounded border-2 cursor-pointer transition-all min-h-[70px]
|
||||
${ isSelected ? 'border-primary bg-primary/10 shadow-md' : isCurrent ? 'border-success/60 bg-success/5' : 'border-card-grid-item-border bg-white hover:border-primary/40 hover:shadow-sm' }` }
|
||||
title={ name }
|
||||
onClick={ () => handleSelect(name) }
|
||||
onDoubleClick={ () => handleDoubleClick(name) }
|
||||
>
|
||||
<img
|
||||
alt={ name }
|
||||
className="max-w-full max-h-[48px] object-contain"
|
||||
src={ url }
|
||||
onError={ e => { (e.target as HTMLImageElement).style.display = 'none'; } }
|
||||
/>
|
||||
<span className="text-[9px] text-gray-600 truncate w-full text-center mt-0.5">{ name }</span>
|
||||
{ isCurrent && <span className="absolute top-0.5 right-0.5 text-[9px] bg-success text-white px-1 rounded">current</span> }
|
||||
</div>
|
||||
);
|
||||
}) }
|
||||
</div> }
|
||||
|
||||
{ loading &&
|
||||
<div className="flex items-center justify-center py-4">
|
||||
<FaSpinner className="text-primary animate-spin" />
|
||||
</div> }
|
||||
|
||||
{ hasMore && !loading &&
|
||||
<div className="flex justify-center mt-2">
|
||||
<button
|
||||
className="text-[12px] text-primary hover:text-secondary font-bold cursor-pointer transition-colors"
|
||||
onClick={ handleLoadMore }
|
||||
>
|
||||
{ LocalizeText('catalog.admin.images.loadmore') } ({ images.length }/{ total })
|
||||
</button>
|
||||
</div> }
|
||||
</div>
|
||||
|
||||
{ /* Footer */ }
|
||||
<div className="flex items-center justify-between px-3 py-2 border-t border-card-grid-item-border bg-card-grid-item shrink-0">
|
||||
<div className="text-[12px] text-gray-600 truncate flex-1 mr-2">
|
||||
{ selected ? selected : LocalizeText('catalog.admin.images.selecthint') }
|
||||
</div>
|
||||
<div className="flex gap-1.5">
|
||||
<button
|
||||
className="px-3 py-1 rounded text-[12px] font-bold bg-card-grid-item-border text-gray-700 hover:bg-gray-400 transition-colors cursor-pointer"
|
||||
onClick={ onClose }
|
||||
>
|
||||
{ LocalizeText('generic.cancel') }
|
||||
</button>
|
||||
<button
|
||||
className="px-3 py-1 rounded text-[12px] font-bold bg-primary text-white hover:bg-secondary transition-colors cursor-pointer disabled:opacity-50"
|
||||
disabled={ !selected }
|
||||
onClick={ handleConfirm }
|
||||
>
|
||||
{ LocalizeText('catalog.admin.images.confirm') }
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -104,7 +104,7 @@ export const CatalogAdminOfferEditView: FC<{}> = () =>
|
||||
if(setEditingOffer) setEditingOffer(null);
|
||||
};
|
||||
|
||||
const inputClass = 'text-[11px] border-2 border-card-grid-item-border rounded px-2 py-1 bg-white focus:outline-none focus:border-primary transition-colors';
|
||||
const inputClass = 'text-[13px] border-2 border-card-grid-item-border rounded px-2 py-1 bg-white focus:outline-none focus:border-primary transition-colors';
|
||||
|
||||
return createPortal(
|
||||
<div className="fixed inset-0 flex items-center justify-center" style={ { zIndex: 1000 } } onClick={ () => setEditingOffer(null) }>
|
||||
@@ -124,30 +124,30 @@ export const CatalogAdminOfferEditView: FC<{}> = () =>
|
||||
<div className="p-3 flex flex-col gap-2.5">
|
||||
{ /* Current name */ }
|
||||
{ !isNew &&
|
||||
<div className="text-[10px] text-muted bg-card-grid-item rounded px-2.5 py-1 font-mono border border-card-grid-item-border">
|
||||
<div className="text-[12px] text-gray-700 bg-card-grid-item rounded px-2.5 py-1 font-mono border border-card-grid-item-border">
|
||||
{ editingOffer.localizationName }
|
||||
</div> }
|
||||
|
||||
{ /* Catalog Name */ }
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[9px] text-primary uppercase font-bold">{ LocalizeText('catalog.admin.offer.name') }</label>
|
||||
<label className="text-[11px] text-primary uppercase font-bold">{ LocalizeText('catalog.admin.offer.name') }</label>
|
||||
<input className={ inputClass } placeholder="es. rare_dragon_lamp" type="text" value={ catalogName } onChange={ e => setCatalogName(e.target.value) } />
|
||||
</div>
|
||||
|
||||
{ /* Generale */ }
|
||||
<div className="bg-white rounded border-2 border-card-grid-item-border p-2.5">
|
||||
<div className="text-[9px] text-primary uppercase font-bold mb-1.5">{ LocalizeText('catalog.admin.offer.general') }</div>
|
||||
<div className="text-[11px] text-primary uppercase font-bold mb-1.5">{ LocalizeText('catalog.admin.offer.general') }</div>
|
||||
<div className="grid grid-cols-3 gap-1.5">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[9px] text-muted">Item IDs</label>
|
||||
<label className="text-[11px] text-gray-700">Item IDs</label>
|
||||
<input className={ inputClass } placeholder="1234" type="text" value={ itemIds } onChange={ e => setItemIds(e.target.value) } />
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[9px] text-muted">{ LocalizeText('catalog.admin.offer.quantity') }</label>
|
||||
<label className="text-[11px] text-gray-700">{ LocalizeText('catalog.admin.offer.quantity') }</label>
|
||||
<input className={ inputClass } min={ 1 } type="number" value={ amount } onChange={ e => setAmount(parseInt(e.target.value) || 1) } />
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[9px] text-muted">{ LocalizeText('catalog.admin.order') }</label>
|
||||
<label className="text-[11px] text-gray-700">{ LocalizeText('catalog.admin.order') }</label>
|
||||
<input className={ inputClass } min={ 0 } type="number" value={ orderNumber } onChange={ e => setOrderNumber(parseInt(e.target.value) || 0) } />
|
||||
</div>
|
||||
</div>
|
||||
@@ -155,18 +155,18 @@ export const CatalogAdminOfferEditView: FC<{}> = () =>
|
||||
|
||||
{ /* Prezzi */ }
|
||||
<div className="bg-white rounded border-2 border-card-grid-item-border p-2.5">
|
||||
<div className="text-[9px] text-primary uppercase font-bold mb-1.5">{ LocalizeText('catalog.admin.offer.prices') }</div>
|
||||
<div className="text-[11px] text-primary uppercase font-bold mb-1.5">{ LocalizeText('catalog.admin.offer.prices') }</div>
|
||||
<div className="grid grid-cols-3 gap-1.5">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[9px] text-muted">{ LocalizeText('catalog.admin.offer.credits') }</label>
|
||||
<label className="text-[11px] text-gray-700">{ LocalizeText('catalog.admin.offer.credits') }</label>
|
||||
<input className={ inputClass } min={ 0 } type="number" value={ costCredits } onChange={ e => setCostCredits(parseInt(e.target.value) || 0) } />
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[9px] text-muted">{ LocalizeText('catalog.admin.offer.points') }</label>
|
||||
<label className="text-[11px] text-gray-700">{ LocalizeText('catalog.admin.offer.points') }</label>
|
||||
<input className={ inputClass } min={ 0 } type="number" value={ costPoints } onChange={ e => setCostPoints(parseInt(e.target.value) || 0) } />
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[9px] text-muted">{ LocalizeText('catalog.admin.offer.points.type') }</label>
|
||||
<label className="text-[11px] text-gray-700">{ LocalizeText('catalog.admin.offer.points.type') }</label>
|
||||
<select className={ inputClass } value={ pointsType } onChange={ e => setPointsType(parseInt(e.target.value)) }>
|
||||
<option value={ 0 }>Duckets</option>
|
||||
<option value={ 5 }>Diamonds</option>
|
||||
@@ -178,43 +178,43 @@ export const CatalogAdminOfferEditView: FC<{}> = () =>
|
||||
|
||||
{ /* Opzioni */ }
|
||||
<div className="bg-white rounded border-2 border-card-grid-item-border p-2.5">
|
||||
<div className="text-[9px] text-primary uppercase font-bold mb-1.5">{ LocalizeText('catalog.admin.offer.options') }</div>
|
||||
<div className="text-[11px] text-primary uppercase font-bold mb-1.5">{ LocalizeText('catalog.admin.offer.options') }</div>
|
||||
<div className="grid grid-cols-3 gap-1.5 mb-1.5">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[9px] text-muted">{ LocalizeText('catalog.admin.offer.club.only') }</label>
|
||||
<label className="text-[11px] text-gray-700">{ LocalizeText('catalog.admin.offer.club.only') }</label>
|
||||
<select className={ inputClass } value={ clubOnly } onChange={ e => setClubOnly(e.target.value) }>
|
||||
<option value="0">No</option>
|
||||
<option value="1">Si</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[9px] text-muted">Limited Stack</label>
|
||||
<label className="text-[11px] text-gray-700">Limited Stack</label>
|
||||
<input className={ inputClass } min={ 0 } type="number" value={ limitedStack } onChange={ e => setLimitedStack(parseInt(e.target.value) || 0) } />
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[9px] text-muted">Offer ID</label>
|
||||
<label className="text-[11px] text-gray-700">Offer ID</label>
|
||||
<input className={ inputClass } type="number" value={ offerId } onChange={ e => setOfferIdGroup(parseInt(e.target.value) || -1) } />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[9px] text-muted">{ LocalizeText('catalog.admin.offer.extradata') }</label>
|
||||
<label className="text-[11px] text-gray-700">{ LocalizeText('catalog.admin.offer.extradata') }</label>
|
||||
<input className={ inputClass } placeholder="dati extra (opzionale)" type="text" value={ extradata } onChange={ e => setExtradata(e.target.value) } />
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 mt-1.5">
|
||||
<input className="accent-primary" checked={ haveOffer === '1' } id="haveOffer" type="checkbox" onChange={ e => setHaveOffer(e.target.checked ? '1' : '0') } />
|
||||
<label className="text-[10px] cursor-pointer" htmlFor="haveOffer">{ LocalizeText('catalog.admin.offer.have.offer') }</label>
|
||||
<label className="text-[12px] cursor-pointer" htmlFor="haveOffer">{ LocalizeText('catalog.admin.offer.have.offer') }</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ /* Actions */ }
|
||||
<div className="flex justify-between">
|
||||
{ !isNew
|
||||
? <button className="flex items-center gap-1 px-2 py-1 rounded text-[10px] font-bold bg-danger/10 text-danger border border-danger/30 hover:bg-danger/20 transition-colors cursor-pointer" onClick={ handleDelete }>
|
||||
<FaTrash className="text-[8px]" /> { LocalizeText('catalog.admin.delete') }
|
||||
? <button className="flex items-center gap-1 px-2 py-1 rounded text-[12px] font-bold bg-danger/10 text-danger border border-danger/30 hover:bg-danger/20 transition-colors cursor-pointer" onClick={ handleDelete }>
|
||||
<FaTrash className="text-[10px]" /> { LocalizeText('catalog.admin.delete') }
|
||||
</button>
|
||||
: <div /> }
|
||||
<button className="flex items-center gap-1 px-3 py-1 rounded text-[10px] font-bold bg-primary text-white hover:bg-secondary transition-colors cursor-pointer disabled:opacity-50" disabled={ loading } onClick={ handleSave }>
|
||||
{ loading ? <FaSpinner className="text-[8px] animate-spin" /> : <FaSave className="text-[8px]" /> } { isNew ? LocalizeText('catalog.admin.create') : LocalizeText('catalog.admin.save') }
|
||||
<button className="flex items-center gap-1 px-3 py-1 rounded text-[12px] font-bold bg-primary text-white hover:bg-secondary transition-colors cursor-pointer disabled:opacity-50" disabled={ loading } onClick={ handleSave }>
|
||||
{ loading ? <FaSpinner className="text-[10px] animate-spin" /> : <FaSave className="text-[10px]" /> } { isNew ? LocalizeText('catalog.admin.create') : LocalizeText('catalog.admin.save') }
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,206 @@
|
||||
import { FC, useCallback, useEffect, useState } from 'react';
|
||||
import { FaCopy, FaSave, FaSpinner, FaTrash } from 'react-icons/fa';
|
||||
import { IPurchasableOffer, LocalizeText } from '../../../../api';
|
||||
import { IOfferEditData, useCatalogAdmin } from '../../CatalogAdminContext';
|
||||
|
||||
export interface CatalogAdminOfferFormProps
|
||||
{
|
||||
offer: IPurchasableOffer | null;
|
||||
pageId: number;
|
||||
isNew?: boolean;
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
export const CatalogAdminOfferForm: FC<CatalogAdminOfferFormProps> = props =>
|
||||
{
|
||||
const { offer, pageId, isNew = false, onClose } = props;
|
||||
const catalogAdmin = useCatalogAdmin();
|
||||
const loading = catalogAdmin?.loading ?? false;
|
||||
|
||||
const [ itemIds, setItemIds ] = useState('0');
|
||||
const [ catalogName, setCatalogName ] = useState('');
|
||||
const [ costCredits, setCostCredits ] = useState(0);
|
||||
const [ costPoints, setCostPoints ] = useState(0);
|
||||
const [ pointsType, setPointsType ] = useState(0);
|
||||
const [ amount, setAmount ] = useState(1);
|
||||
const [ clubOnly, setClubOnly ] = useState('0');
|
||||
const [ extradata, setExtradata ] = useState('');
|
||||
const [ haveOffer, setHaveOffer ] = useState('1');
|
||||
const [ offerIdGroup, setOfferIdGroup ] = useState(-1);
|
||||
const [ limitedStack, setLimitedStack ] = useState(0);
|
||||
const [ orderNumber, setOrderNumber ] = useState(0);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!offer) return;
|
||||
|
||||
if(isNew || offer.offerId === -1)
|
||||
{
|
||||
setItemIds('0'); setCatalogName(''); setCostCredits(0); setCostPoints(0);
|
||||
setPointsType(0); setAmount(1); setClubOnly('0'); setExtradata('');
|
||||
setHaveOffer('1'); setOfferIdGroup(-1); setLimitedStack(0); setOrderNumber(0);
|
||||
}
|
||||
else
|
||||
{
|
||||
setItemIds(String(offer.product?.productClassId || 0));
|
||||
setCatalogName(offer.localizationId || '');
|
||||
setCostCredits(offer.priceInCredits);
|
||||
setCostPoints(offer.priceInActivityPoints);
|
||||
setPointsType(offer.activityPointType);
|
||||
setAmount(offer.product?.productCount || 1);
|
||||
setClubOnly(offer.clubLevel > 0 ? '1' : '0');
|
||||
setExtradata(offer.product?.extraParam || '');
|
||||
setHaveOffer('1'); setOfferIdGroup(offer.offerId || -1);
|
||||
setLimitedStack(0); setOrderNumber(0);
|
||||
}
|
||||
}, [ offer, isNew ]);
|
||||
|
||||
const handleSave = useCallback(() =>
|
||||
{
|
||||
if(!catalogAdmin) return;
|
||||
|
||||
const data: IOfferEditData = {
|
||||
offerId: isNew ? undefined : offer?.offerId,
|
||||
pageId, itemIds, catalogName, costCredits, costPoints, pointsType,
|
||||
amount, clubOnly, extradata, haveOffer, offerId_group: offerIdGroup,
|
||||
limitedStack, orderNumber,
|
||||
};
|
||||
|
||||
if(isNew) catalogAdmin.createOffer(data);
|
||||
else catalogAdmin.saveOffer(data);
|
||||
}, [ catalogAdmin, offer, isNew, pageId, itemIds, catalogName, costCredits, costPoints, pointsType, amount, clubOnly, extradata, haveOffer, offerIdGroup, limitedStack, orderNumber ]);
|
||||
|
||||
const handleDelete = useCallback(() =>
|
||||
{
|
||||
if(isNew || !offer || !catalogAdmin?.deleteOffer) return;
|
||||
if(!confirm(LocalizeText('catalog.admin.delete.offer.confirm'))) return;
|
||||
catalogAdmin.deleteOffer(offer.offerId);
|
||||
onClose?.();
|
||||
}, [ isNew, offer, catalogAdmin, onClose ]);
|
||||
|
||||
const handleDuplicate = useCallback(() =>
|
||||
{
|
||||
if(!offer || !catalogAdmin?.duplicateOffer) return;
|
||||
catalogAdmin.duplicateOffer(offer, pageId);
|
||||
}, [ offer, catalogAdmin, pageId ]);
|
||||
|
||||
if(!offer) return null;
|
||||
|
||||
const iconUrl = !isNew && offer.product?.getIconUrl?.(offer);
|
||||
const inputClass = 'text-[13px] border-2 border-card-grid-item-border rounded px-2 py-1 bg-white focus:outline-none focus:border-primary transition-colors w-full';
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
{ /* Header with icon preview */ }
|
||||
<div className="flex items-center gap-2">
|
||||
{ iconUrl &&
|
||||
<div className="w-10 h-10 bg-card-grid-item rounded border border-card-grid-item-border flex items-center justify-center shrink-0">
|
||||
<img alt="" className="max-w-[36px] max-h-[36px] object-contain" src={ iconUrl } />
|
||||
</div> }
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-[13px] font-bold text-primary truncate">
|
||||
{ isNew ? 'New Offer' : `Offer #${ offer.offerId }` }
|
||||
</div>
|
||||
{ !isNew && offer.localizationName &&
|
||||
<div className="text-[11px] text-gray-700 font-mono truncate">{ offer.localizationName }</div> }
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ /* Identity */ }
|
||||
<div className="bg-white rounded border border-card-grid-item-border p-2.5 shadow-sm">
|
||||
<div className="text-[11px] text-primary uppercase font-bold mb-1.5 border-l-2 border-l-primary pl-1.5">Identity</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[11px] text-gray-700 uppercase font-bold">Catalog Name</label>
|
||||
<input className={ inputClass } placeholder="rare_dragon_lamp" type="text" value={ catalogName } onChange={ e => setCatalogName(e.target.value) } />
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-1.5">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[11px] text-gray-700">Item IDs</label>
|
||||
<input className={ inputClass } type="text" value={ itemIds } onChange={ e => setItemIds(e.target.value) } />
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[11px] text-gray-700">Quantity</label>
|
||||
<input className={ inputClass } min={ 1 } type="number" value={ amount } onChange={ e => setAmount(parseInt(e.target.value) || 1) } />
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[11px] text-gray-700">Order</label>
|
||||
<input className={ inputClass } min={ 0 } type="number" value={ orderNumber } onChange={ e => setOrderNumber(parseInt(e.target.value) || 0) } />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ /* Pricing */ }
|
||||
<div className="bg-white rounded border border-card-grid-item-border p-2.5 shadow-sm">
|
||||
<div className="text-[11px] text-primary uppercase font-bold mb-1.5 border-l-2 border-l-primary pl-1.5">Pricing</div>
|
||||
<div className="grid grid-cols-3 gap-1.5">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[11px] text-gray-700">Credits</label>
|
||||
<input className={ inputClass } min={ 0 } type="number" value={ costCredits } onChange={ e => setCostCredits(parseInt(e.target.value) || 0) } />
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[11px] text-gray-700">Points</label>
|
||||
<input className={ inputClass } min={ 0 } type="number" value={ costPoints } onChange={ e => setCostPoints(parseInt(e.target.value) || 0) } />
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[11px] text-gray-700">Points Type</label>
|
||||
<select className={ inputClass } value={ pointsType } onChange={ e => setPointsType(parseInt(e.target.value)) }>
|
||||
<option value={ 0 }>Duckets</option>
|
||||
<option value={ 5 }>Diamonds</option>
|
||||
<option value={ 101 }>Seasonal</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ /* Options */ }
|
||||
<div className="bg-white rounded border border-card-grid-item-border p-2.5 shadow-sm">
|
||||
<div className="text-[11px] text-primary uppercase font-bold mb-1.5 border-l-2 border-l-primary pl-1.5">Options</div>
|
||||
<div className="grid grid-cols-3 gap-1.5 mb-1.5">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[11px] text-gray-700">Club Only</label>
|
||||
<select className={ inputClass } value={ clubOnly } onChange={ e => setClubOnly(e.target.value) }>
|
||||
<option value="0">No</option>
|
||||
<option value="1">Yes</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[11px] text-gray-700">Limited</label>
|
||||
<input className={ inputClass } min={ 0 } type="number" value={ limitedStack } onChange={ e => setLimitedStack(parseInt(e.target.value) || 0) } />
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[11px] text-gray-700">Offer Group</label>
|
||||
<input className={ inputClass } type="number" value={ offerIdGroup } onChange={ e => setOfferIdGroup(parseInt(e.target.value) || -1) } />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[11px] text-gray-700">Extra Data</label>
|
||||
<input className={ inputClass } placeholder="optional" type="text" value={ extradata } onChange={ e => setExtradata(e.target.value) } />
|
||||
</div>
|
||||
<label className="flex items-center gap-1.5 text-[12px] cursor-pointer mt-1.5">
|
||||
<input className="accent-primary" checked={ haveOffer === '1' } type="checkbox" onChange={ e => setHaveOffer(e.target.checked ? '1' : '0') } />
|
||||
Have Offer
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{ /* Actions */ }
|
||||
<div className="flex justify-between">
|
||||
<div className="flex items-center gap-1">
|
||||
{ !isNew &&
|
||||
<button className="flex items-center gap-1 px-2 py-1 rounded text-[12px] font-bold bg-danger/10 text-danger border border-danger/30 hover:bg-danger/20 transition-colors cursor-pointer" onClick={ handleDelete }>
|
||||
<FaTrash className="text-[10px]" /> Delete
|
||||
</button> }
|
||||
{ !isNew &&
|
||||
<button className="flex items-center gap-1 px-2 py-1 rounded text-[12px] font-bold bg-info/10 text-info border border-info/30 hover:bg-info/20 transition-colors cursor-pointer" title="Duplicate" onClick={ handleDuplicate }>
|
||||
<FaCopy className="text-[10px]" /> Copy
|
||||
</button> }
|
||||
</div>
|
||||
<button className="flex items-center gap-1 px-3 py-1 rounded text-[12px] font-bold bg-primary text-white hover:bg-secondary transition-colors cursor-pointer disabled:opacity-50" disabled={ loading } onClick={ handleSave }>
|
||||
{ loading ? <FaSpinner className="text-[10px] animate-spin" /> : <FaSave className="text-[10px]" /> }
|
||||
{ isNew ? 'Create' : 'Save' }
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,206 @@
|
||||
import { FC, useCallback, useMemo, useState } from 'react';
|
||||
import { FaCheckSquare, FaDollarSign, FaExchangeAlt, FaPlus, FaSearch, FaStar, FaTrash } from 'react-icons/fa';
|
||||
import { IPurchasableOffer, LocalizeText } from '../../../../api';
|
||||
import { useCatalog } from '../../../../hooks';
|
||||
import { useCatalogAdmin } from '../../CatalogAdminContext';
|
||||
import { CatalogAdminOfferForm } from './CatalogAdminOfferForm';
|
||||
|
||||
export const CatalogAdminOfferPanel: FC<{}> = () =>
|
||||
{
|
||||
const { currentPage = null, activeNodes = [], rootNode = null } = useCatalog();
|
||||
const catalogAdmin = useCatalogAdmin();
|
||||
const selectedOfferIds = catalogAdmin?.selectedOfferIds ?? new Set<number>();
|
||||
const toggleOfferSelection = catalogAdmin?.toggleOfferSelection;
|
||||
const clearOfferSelection = catalogAdmin?.clearOfferSelection;
|
||||
const offerSearchQuery = catalogAdmin?.offerSearchQuery ?? '';
|
||||
const setOfferSearchQuery = catalogAdmin?.setOfferSearchQuery;
|
||||
|
||||
const [ editingOffer, setEditingOffer ] = useState<IPurchasableOffer | null>(null);
|
||||
const [ isNewOffer, setIsNewOffer ] = useState(false);
|
||||
|
||||
// Batch pricing state
|
||||
const [ showBatchPrice, setShowBatchPrice ] = useState(false);
|
||||
const [ batchCredits, setBatchCredits ] = useState(0);
|
||||
const [ batchPoints, setBatchPoints ] = useState(0);
|
||||
const [ batchPointsType, setBatchPointsType ] = useState(0);
|
||||
|
||||
const offers = currentPage?.offers ?? [];
|
||||
const pageId = currentPage?.pageId ?? 0;
|
||||
|
||||
const filteredOffers = useMemo(() =>
|
||||
{
|
||||
if(!offerSearchQuery) return offers;
|
||||
const q = offerSearchQuery.toLowerCase();
|
||||
return offers.filter(o =>
|
||||
o.localizationName?.toLowerCase().includes(q) ||
|
||||
o.localizationId?.toLowerCase().includes(q) ||
|
||||
String(o.offerId).includes(q)
|
||||
);
|
||||
}, [ offers, offerSearchQuery ]);
|
||||
|
||||
const handleSelectOffer = useCallback((offer: IPurchasableOffer, e: React.MouseEvent) =>
|
||||
{
|
||||
if(e.ctrlKey || e.metaKey)
|
||||
{
|
||||
toggleOfferSelection?.(offer.offerId, true);
|
||||
}
|
||||
else
|
||||
{
|
||||
setEditingOffer(offer);
|
||||
setIsNewOffer(false);
|
||||
clearOfferSelection?.();
|
||||
}
|
||||
}, [ toggleOfferSelection, clearOfferSelection ]);
|
||||
|
||||
const handleNewOffer = useCallback(() =>
|
||||
{
|
||||
setEditingOffer({ offerId: -1 } as IPurchasableOffer);
|
||||
setIsNewOffer(true);
|
||||
}, []);
|
||||
|
||||
const handleBulkDelete = useCallback(() =>
|
||||
{
|
||||
if(selectedOfferIds.size === 0) return;
|
||||
if(!confirm(`Delete ${ selectedOfferIds.size } selected offer(s)?`)) return;
|
||||
for(const id of selectedOfferIds) catalogAdmin?.deleteOffer(id);
|
||||
clearOfferSelection?.();
|
||||
}, [ catalogAdmin, selectedOfferIds, clearOfferSelection ]);
|
||||
|
||||
const handleBatchPriceApply = useCallback(() =>
|
||||
{
|
||||
if(selectedOfferIds.size === 0) return;
|
||||
catalogAdmin?.batchUpdateOfferPrices(
|
||||
Array.from(selectedOfferIds), batchCredits, batchPoints, batchPointsType, pageId
|
||||
);
|
||||
setShowBatchPrice(false);
|
||||
clearOfferSelection?.();
|
||||
}, [ catalogAdmin, selectedOfferIds, batchCredits, batchPoints, batchPointsType, pageId, clearOfferSelection ]);
|
||||
|
||||
const handleSelectAll = useCallback(() =>
|
||||
{
|
||||
catalogAdmin?.selectAllOffers(offers.map(o => o.offerId));
|
||||
}, [ catalogAdmin, offers ]);
|
||||
|
||||
const breadcrumb = activeNodes?.map(n => n.localization).join(' > ') || 'No page selected';
|
||||
const inputClass = 'text-[13px] border-2 border-card-grid-item-border rounded px-2 py-1 bg-white focus:outline-none focus:border-primary transition-colors w-full';
|
||||
|
||||
return (
|
||||
<div className="flex h-full overflow-hidden">
|
||||
{ /* Left: Offer grid */ }
|
||||
<div className="flex-1 min-w-0 border-r-2 border-card-grid-item-border flex flex-col overflow-hidden">
|
||||
{ /* Top bar */ }
|
||||
<div className="flex items-center gap-1.5 px-2 py-1.5 border-b border-card-grid-item-border bg-card-grid-item shrink-0">
|
||||
<div className="flex items-center gap-1 text-[12px] text-gray-700 min-w-0 flex-1">
|
||||
<FaStar className="text-[10px] text-primary shrink-0" />
|
||||
<span className="truncate">{ breadcrumb }</span>
|
||||
<span className="text-[11px] text-gray-600 shrink-0">({ filteredOffers.length })</span>
|
||||
</div>
|
||||
|
||||
<div className="relative w-[120px] shrink-0">
|
||||
<FaSearch className="absolute left-2 top-1/2 -translate-y-1/2 text-[10px] text-gray-600" />
|
||||
<input
|
||||
className="w-full text-[12px] border border-card-grid-item-border rounded pl-6 pr-2 py-1 bg-white focus:outline-none focus:border-primary transition-colors"
|
||||
placeholder="Search..."
|
||||
type="text"
|
||||
value={ offerSearchQuery }
|
||||
onChange={ e => setOfferSearchQuery(e.target.value) }
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button className="flex items-center gap-1 px-2 py-1 rounded text-[11px] font-bold bg-success/10 text-success border border-success/30 hover:bg-success/20 cursor-pointer transition-colors shrink-0" onClick={ handleNewOffer }>
|
||||
<FaPlus className="text-[9px]" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{ /* Selection bar */ }
|
||||
{ selectedOfferIds.size > 0 &&
|
||||
<div className="flex items-center gap-2 px-2 py-1 bg-primary/20 border-b-2 border-primary/30 shrink-0">
|
||||
<span className="text-[12px] font-bold text-primary">{ selectedOfferIds.size } selected</span>
|
||||
<button className="text-[11px] text-gray-700 hover:text-dark cursor-pointer" onClick={ handleSelectAll }>
|
||||
<FaCheckSquare className="inline text-[10px] mr-0.5" /> All
|
||||
</button>
|
||||
<button className="text-[11px] text-danger hover:text-red-700 cursor-pointer" onClick={ handleBulkDelete }>
|
||||
<FaTrash className="inline text-[10px] mr-0.5" /> Delete
|
||||
</button>
|
||||
<button className="text-[11px] text-info hover:text-blue-700 cursor-pointer" onClick={ () => setShowBatchPrice(!showBatchPrice) }>
|
||||
<FaDollarSign className="inline text-[10px] mr-0.5" /> Price
|
||||
</button>
|
||||
<button className="text-[11px] text-gray-700 hover:text-dark cursor-pointer ml-auto" onClick={ () => clearOfferSelection?.() }>
|
||||
Clear
|
||||
</button>
|
||||
</div> }
|
||||
|
||||
{ /* Batch price editor */ }
|
||||
{ showBatchPrice && selectedOfferIds.size > 0 &&
|
||||
<div className="flex items-center gap-2 px-2 py-1.5 bg-info/5 border-b border-info/20 shrink-0">
|
||||
<span className="text-[11px] font-bold text-info">Set price for { selectedOfferIds.size } offers:</span>
|
||||
<input className="text-[12px] border border-card-grid-item-border rounded px-2 py-0.5 w-16 bg-white" min={ 0 } placeholder="Credits" type="number" value={ batchCredits } onChange={ e => setBatchCredits(parseInt(e.target.value) || 0) } />
|
||||
<input className="text-[12px] border border-card-grid-item-border rounded px-2 py-0.5 w-16 bg-white" min={ 0 } placeholder="Points" type="number" value={ batchPoints } onChange={ e => setBatchPoints(parseInt(e.target.value) || 0) } />
|
||||
<select className="text-[12px] border border-card-grid-item-border rounded px-1 py-0.5 bg-white" value={ batchPointsType } onChange={ e => setBatchPointsType(parseInt(e.target.value)) }>
|
||||
<option value={ 0 }>Duckets</option>
|
||||
<option value={ 5 }>Diamonds</option>
|
||||
<option value={ 101 }>Seasonal</option>
|
||||
</select>
|
||||
<button className="px-2 py-0.5 rounded text-[11px] font-bold bg-info text-white hover:bg-blue-700 cursor-pointer transition-colors" onClick={ handleBatchPriceApply }>
|
||||
Apply
|
||||
</button>
|
||||
</div> }
|
||||
|
||||
{ /* Offer grid */ }
|
||||
<div className="flex-1 overflow-y-auto p-2">
|
||||
{ !currentPage
|
||||
? <div className="flex items-center justify-center h-full text-[13px] text-gray-600">
|
||||
Select a page from Browse tab to see its offers
|
||||
</div>
|
||||
: filteredOffers.length === 0
|
||||
? <div className="flex items-center justify-center h-full text-[13px] text-gray-600">
|
||||
{ offerSearchQuery ? 'No matches' : 'No offers on this page' }
|
||||
</div>
|
||||
: <div className="grid grid-cols-6 gap-1">
|
||||
{ filteredOffers.map((offer, index) =>
|
||||
{
|
||||
const isSelected = selectedOfferIds.has(offer.offerId);
|
||||
const isEditing = editingOffer?.offerId === offer.offerId && !isNewOffer;
|
||||
const iconUrl = offer.product?.getIconUrl?.(offer);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={ `${ offer.offerId }-${ index }` }
|
||||
className={ `group/offer relative flex flex-col items-center justify-center p-1 rounded border-2 cursor-pointer transition-all h-[52px]
|
||||
${ isEditing ? 'border-primary bg-primary/10' : isSelected ? 'border-success bg-success/10' : 'border-card-grid-item-border bg-white hover:border-primary/50' }` }
|
||||
title={ `${ offer.localizationName || offer.localizationId || '' } (#${ offer.offerId })` }
|
||||
onClick={ e => handleSelectOffer(offer, e) }
|
||||
>
|
||||
<div className={ `absolute top-0.5 left-0.5 ${ isSelected ? 'opacity-100' : 'opacity-30 group-hover/offer:opacity-70' } transition-opacity` }>
|
||||
<input
|
||||
checked={ isSelected }
|
||||
className="accent-success w-3 h-3 cursor-pointer"
|
||||
type="checkbox"
|
||||
onChange={ () => toggleOfferSelection?.(offer.offerId, true) }
|
||||
onClick={ e => e.stopPropagation() }
|
||||
/>
|
||||
</div>
|
||||
|
||||
{ iconUrl
|
||||
? <img alt="" className="max-w-[32px] max-h-[32px] object-contain" src={ iconUrl } />
|
||||
: <div className="w-8 h-8 bg-card-grid-item rounded flex items-center justify-center text-[10px] text-gray-600">?</div> }
|
||||
|
||||
<span className="text-[9px] text-gray-600 truncate w-full text-center">#{ offer.offerId }</span>
|
||||
</div>
|
||||
);
|
||||
}) }
|
||||
</div> }
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ /* Right: Offer edit form */ }
|
||||
<div className="w-[280px] min-w-[280px] overflow-y-auto p-2.5 bg-card-content-area">
|
||||
{ editingOffer
|
||||
? <CatalogAdminOfferForm isNew={ isNewOffer } offer={ editingOffer } pageId={ pageId } onClose={ () => setEditingOffer(null) } />
|
||||
: <div className="flex items-center justify-center h-full text-[13px] text-gray-600 text-center px-4">
|
||||
Click an offer to edit<br />Ctrl+click to multi-select
|
||||
</div> }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -64,7 +64,7 @@ export const CatalogAdminPageEditView: FC<{}> = () =>
|
||||
|
||||
if(!editingPageData || !targetNode) return null;
|
||||
|
||||
const inputClass = 'text-[11px] border-2 border-card-grid-item-border rounded px-2 py-1 bg-white focus:outline-none focus:border-primary transition-colors';
|
||||
const inputClass = 'text-[13px] border-2 border-card-grid-item-border rounded px-2 py-1 bg-white focus:outline-none focus:border-primary transition-colors';
|
||||
|
||||
const handleSave = async () =>
|
||||
{
|
||||
@@ -101,37 +101,37 @@ export const CatalogAdminPageEditView: FC<{}> = () =>
|
||||
return (
|
||||
<div className="bg-white rounded border-2 border-card-grid-item-border p-2.5 mb-2">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-[11px] font-bold text-primary uppercase tracking-wide">
|
||||
<span className="text-[13px] font-bold text-primary uppercase tracking-wide">
|
||||
{ isRoot ? LocalizeText('catalog.admin.edit.root') : `${ LocalizeText('catalog.admin.edit') } ${ targetNode.localization } (#${ targetPageId })` }
|
||||
</span>
|
||||
<FaTimes className="text-muted cursor-pointer hover:text-danger text-[10px]" onClick={ closeForm } />
|
||||
<FaTimes className="text-gray-700 cursor-pointer hover:text-danger text-[12px]" onClick={ closeForm } />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-1.5">
|
||||
<div className="flex flex-col gap-0.5 col-span-2">
|
||||
<label className="text-[9px] text-muted uppercase font-bold">Caption</label>
|
||||
<label className="text-[11px] text-gray-700 uppercase font-bold">Caption</label>
|
||||
<input className={ inputClass } value={ caption } onChange={ e => setCaption(e.target.value) } />
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[9px] text-muted uppercase font-bold">Min Rank</label>
|
||||
<label className="text-[11px] text-gray-700 uppercase font-bold">Min Rank</label>
|
||||
<input className={ inputClass } min={ 1 } type="number" value={ minRank } onChange={ e => setMinRank(parseInt(e.target.value) || 1) } />
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[9px] text-muted uppercase font-bold">Layout</label>
|
||||
<label className="text-[11px] text-gray-700 uppercase font-bold">Layout</label>
|
||||
<select className={ inputClass } value={ pageLayout } onChange={ e => setPageLayout(e.target.value) }>
|
||||
{ LAYOUT_OPTIONS.map(l => <option key={ l } value={ l }>{ l }</option>) }
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[9px] text-muted uppercase font-bold">{ LocalizeText('catalog.admin.order') }</label>
|
||||
<label className="text-[11px] text-gray-700 uppercase font-bold">{ LocalizeText('catalog.admin.order') }</label>
|
||||
<input className={ inputClass } min={ 0 } type="number" value={ orderNum } onChange={ e => setOrderNum(parseInt(e.target.value) || 0) } />
|
||||
</div>
|
||||
<div className="flex items-end gap-2 pb-0.5">
|
||||
<label className="flex items-center gap-1 text-[10px] cursor-pointer">
|
||||
<label className="flex items-center gap-1 text-[12px] cursor-pointer">
|
||||
<input className="accent-primary" checked={ visible === '1' } type="checkbox" onChange={ e => setVisible(e.target.checked ? '1' : '0') } />
|
||||
{ LocalizeText('catalog.admin.visible') }
|
||||
</label>
|
||||
<label className="flex items-center gap-1 text-[10px] cursor-pointer">
|
||||
<label className="flex items-center gap-1 text-[12px] cursor-pointer">
|
||||
<input className="accent-primary" checked={ enabled === '1' } type="checkbox" onChange={ e => setEnabled(e.target.checked ? '1' : '0') } />
|
||||
{ LocalizeText('catalog.admin.enabled') }
|
||||
</label>
|
||||
@@ -140,12 +140,12 @@ export const CatalogAdminPageEditView: FC<{}> = () =>
|
||||
|
||||
<div className="flex justify-between mt-2">
|
||||
{ !isRoot
|
||||
? <button className="flex items-center gap-1 px-2 py-1 rounded text-[10px] font-bold bg-danger/10 text-danger border border-danger/30 hover:bg-danger/20 transition-colors cursor-pointer" onClick={ handleDelete }>
|
||||
<FaTrash className="text-[8px]" /> { LocalizeText('catalog.admin.delete') }
|
||||
? <button className="flex items-center gap-1 px-2 py-1 rounded text-[12px] font-bold bg-danger/10 text-danger border border-danger/30 hover:bg-danger/20 transition-colors cursor-pointer" onClick={ handleDelete }>
|
||||
<FaTrash className="text-[10px]" /> { LocalizeText('catalog.admin.delete') }
|
||||
</button>
|
||||
: <div /> }
|
||||
<button className="flex items-center gap-1 px-3 py-1 rounded text-[10px] font-bold bg-primary text-white hover:bg-secondary transition-colors cursor-pointer disabled:opacity-50" disabled={ loading } onClick={ handleSave }>
|
||||
{ loading ? <FaSpinner className="text-[8px] animate-spin" /> : <FaSave className="text-[8px]" /> } { LocalizeText('catalog.admin.save') }
|
||||
<button className="flex items-center gap-1 px-3 py-1 rounded text-[12px] font-bold bg-primary text-white hover:bg-secondary transition-colors cursor-pointer disabled:opacity-50" disabled={ loading } onClick={ handleSave }>
|
||||
{ loading ? <FaSpinner className="text-[10px] animate-spin" /> : <FaSave className="text-[10px]" /> } { LocalizeText('catalog.admin.save') }
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,562 @@
|
||||
import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { FaEdit, FaFileAlt, FaFolderOpen, FaImage, FaInfoCircle, FaPlus, FaSave, FaSearch, FaSpinner, FaTimes, FaTrash, FaUndo } from 'react-icons/fa';
|
||||
import { GetConfigurationValue, ICatalogNode, LocalizeText } from '../../../../api';
|
||||
import { useCatalog } from '../../../../hooks';
|
||||
import { IPageEditData, useCatalogAdmin } from '../../CatalogAdminContext';
|
||||
import { CatalogIconView } from '../catalog-icon/CatalogIconView';
|
||||
import { CatalogAdminIconBrowser } from './CatalogAdminIconBrowser';
|
||||
import { CatalogAdminImageBrowser } from './CatalogAdminImageBrowser';
|
||||
import { CatalogAdminPageTreeItem } from './CatalogAdminPageTreeItem';
|
||||
|
||||
const LAYOUT_OPTIONS = [
|
||||
{ value: 'default_3x3', label: 'Default 3x3' },
|
||||
{ value: 'frontpage4', label: 'Frontpage' },
|
||||
{ value: 'pets', label: 'Pets' },
|
||||
{ value: 'pets2', label: 'Pets 2' },
|
||||
{ value: 'pets3', label: 'Pets 3' },
|
||||
{ value: 'spaces_new', label: 'Spaces (Floor/Wall)' },
|
||||
{ value: 'soundmachine', label: 'Sound Machine' },
|
||||
{ value: 'trophies', label: 'Trophies' },
|
||||
{ value: 'roomads', label: 'Room Ads' },
|
||||
{ value: 'guild_frontpage', label: 'Guild Frontpage' },
|
||||
{ value: 'guild_forum', label: 'Guild Forum' },
|
||||
{ value: 'guild_custom_furni', label: 'Guild Custom Furni' },
|
||||
{ value: 'vip_buy', label: 'VIP Buy' },
|
||||
{ value: 'marketplace', label: 'Marketplace' },
|
||||
{ value: 'marketplace_own_items', label: 'Marketplace Own' },
|
||||
{ value: 'recycler', label: 'Recycler' },
|
||||
{ value: 'info_loyalty', label: 'Info Loyalty' },
|
||||
{ value: 'badge_display', label: 'Badge Display' },
|
||||
{ value: 'bots', label: 'Bots' },
|
||||
{ value: 'single_bundle', label: 'Single Bundle' },
|
||||
{ value: 'room_bundle', label: 'Room Bundle' },
|
||||
{ value: 'default_3x3_color_grouping', label: 'Color Grouping' },
|
||||
{ value: 'recent_purchases', label: 'Recent Purchases' },
|
||||
{ value: 'custom_prefix', label: 'Custom Prefix' },
|
||||
];
|
||||
|
||||
type FormSection = 'identity' | 'content' | 'images' | 'info';
|
||||
|
||||
export const CatalogAdminPagePanel: FC<{}> = () =>
|
||||
{
|
||||
const { rootNode = null, currentPage = null, activateNode = null } = useCatalog();
|
||||
const catalogAdmin = useCatalogAdmin();
|
||||
const loading = catalogAdmin?.loading ?? false;
|
||||
|
||||
const [ selectedNode, setSelectedNode ] = useState<ICatalogNode | null>(null);
|
||||
const [ searchQuery, setSearchQuery ] = useState('');
|
||||
const lastSelectedPageId = useRef<number>(-1);
|
||||
const [ activeSection, setActiveSection ] = useState<FormSection>('identity');
|
||||
|
||||
// Form state
|
||||
const [ caption, setCaption ] = useState('');
|
||||
const [ pageLayout, setPageLayout ] = useState('default_3x3');
|
||||
const [ minRank, setMinRank ] = useState(1);
|
||||
const [ visible, setVisible ] = useState('1');
|
||||
const [ enabled, setEnabled ] = useState('1');
|
||||
const [ clubOnly, setClubOnly ] = useState('0');
|
||||
const [ orderNum, setOrderNum ] = useState(0);
|
||||
const [ pageHeadline, setPageHeadline ] = useState('');
|
||||
const [ pageTeaser, setPageTeaser ] = useState('');
|
||||
const [ pageTextDetails, setPageTextDetails ] = useState('');
|
||||
|
||||
// Icon
|
||||
const [ iconId, setIconId ] = useState(0);
|
||||
|
||||
// Image previews
|
||||
const [ headerImage, setHeaderImage ] = useState<string | null>(null);
|
||||
const [ teaserImage, setTeaserImage ] = useState<string | null>(null);
|
||||
const [ browsingImageType, setBrowsingImageType ] = useState<'header' | 'teaser' | null>(null);
|
||||
const [ browsingIcon, setBrowsingIcon ] = useState(false);
|
||||
|
||||
const handleSelect = useCallback((node: ICatalogNode) =>
|
||||
{
|
||||
setSelectedNode(node);
|
||||
setCaption(node.localization || '');
|
||||
setVisible(node.isVisible ? '1' : '0');
|
||||
setEnabled('1');
|
||||
setMinRank(1);
|
||||
setClubOnly('0');
|
||||
setOrderNum(0);
|
||||
setIconId(node.iconId ?? 0);
|
||||
setPageHeadline('');
|
||||
setPageTeaser('');
|
||||
setPageTextDetails('');
|
||||
setPageLayout('default_3x3');
|
||||
setHeaderImage(null);
|
||||
setTeaserImage(null);
|
||||
|
||||
if(activateNode && node.pageId !== lastSelectedPageId.current)
|
||||
{
|
||||
lastSelectedPageId.current = node.pageId;
|
||||
activateNode(node);
|
||||
}
|
||||
}, [ activateNode ]);
|
||||
|
||||
// Populate from currentPage when it loads
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!currentPage || !selectedNode) return;
|
||||
if(currentPage.pageId !== selectedNode.pageId) return;
|
||||
|
||||
setPageLayout(currentPage.layoutCode || 'default_3x3');
|
||||
|
||||
if(currentPage.localization)
|
||||
{
|
||||
const h = currentPage.localization.getText(0) || '';
|
||||
const t = currentPage.localization.getText(1) || '';
|
||||
const d = currentPage.localization.getText(2) || '';
|
||||
|
||||
if(h) setPageHeadline(h.replace(/<br\s*\/?>/g, '\n'));
|
||||
if(t) setPageTeaser(t.replace(/<br\s*\/?>/g, '\n'));
|
||||
if(d) setPageTextDetails(d.replace(/<br\s*\/?>/g, '\n'));
|
||||
|
||||
setHeaderImage(currentPage.localization.getImage(0) || null);
|
||||
setTeaserImage(currentPage.localization.getImage(1) || null);
|
||||
}
|
||||
}, [ currentPage, selectedNode ]);
|
||||
|
||||
const handleCreateChild = useCallback((parentId: number) =>
|
||||
{
|
||||
catalogAdmin?.createPage({
|
||||
caption: 'New Page', pageLayout: 'default_3x3', minRank: 1,
|
||||
visible: '1', enabled: '1', orderNum: 0, parentId,
|
||||
});
|
||||
}, [ catalogAdmin ]);
|
||||
|
||||
const handleDelete = useCallback((pageId: number, name: string) =>
|
||||
{
|
||||
if(!confirm(LocalizeText('catalog.admin.delete.page.confirm', [ 'name' ], [ name ]))) return;
|
||||
catalogAdmin?.deletePage(pageId);
|
||||
if(selectedNode?.pageId === pageId) setSelectedNode(null);
|
||||
}, [ catalogAdmin, selectedNode ]);
|
||||
|
||||
const handleToggleVisible = useCallback((pageId: number) =>
|
||||
{
|
||||
catalogAdmin?.togglePageVisible(pageId);
|
||||
}, [ catalogAdmin ]);
|
||||
|
||||
const handleReorder = useCallback((pageId: number, newParentId: number, newIndex: number) =>
|
||||
{
|
||||
catalogAdmin?.reorderPage(pageId, newParentId, newIndex);
|
||||
}, [ catalogAdmin ]);
|
||||
|
||||
const handleSave = useCallback(() =>
|
||||
{
|
||||
if(!selectedNode || !catalogAdmin?.savePage) return;
|
||||
|
||||
const data: IPageEditData = {
|
||||
pageId: selectedNode.pageId, caption, pageLayout, minRank,
|
||||
visible, enabled, clubOnly, orderNum, iconId,
|
||||
parentId: selectedNode.parent?.pageId ?? -1,
|
||||
pageHeadline, pageTeaser, pageTextDetails,
|
||||
};
|
||||
|
||||
catalogAdmin.savePage(data);
|
||||
}, [ selectedNode, catalogAdmin, caption, pageLayout, minRank, visible, enabled, clubOnly, orderNum, iconId, pageHeadline, pageTeaser, pageTextDetails ]);
|
||||
|
||||
const handleDeleteSelected = useCallback(() =>
|
||||
{
|
||||
if(!selectedNode) return;
|
||||
if(!confirm(LocalizeText('catalog.admin.delete.page.confirm', [ 'name' ], [ selectedNode.localization ]))) return;
|
||||
catalogAdmin?.deletePage(selectedNode.pageId);
|
||||
setSelectedNode(null);
|
||||
}, [ selectedNode, catalogAdmin ]);
|
||||
|
||||
const buildImageUrl = useCallback((name: string) =>
|
||||
{
|
||||
if(!name) return null;
|
||||
|
||||
return GetConfigurationValue<string>('catalog.asset.image.url').replace('%name%', name);
|
||||
}, []);
|
||||
|
||||
const handleImageSelect = useCallback((filename: string) =>
|
||||
{
|
||||
const url = buildImageUrl(filename);
|
||||
|
||||
if(browsingImageType === 'header')
|
||||
{
|
||||
setHeaderImage(url);
|
||||
}
|
||||
else if(browsingImageType === 'teaser')
|
||||
{
|
||||
setTeaserImage(url);
|
||||
}
|
||||
|
||||
setBrowsingImageType(null);
|
||||
}, [ browsingImageType, buildImageUrl ]);
|
||||
|
||||
const handleSaveImages = useCallback(() =>
|
||||
{
|
||||
if(!selectedNode || !catalogAdmin?.savePageImages) return;
|
||||
|
||||
// Extract filename from URL for the composer
|
||||
const extractName = (url: string | null) =>
|
||||
{
|
||||
if(!url) return '';
|
||||
|
||||
const assetUrl = GetConfigurationValue<string>('catalog.asset.image.url');
|
||||
const prefix = assetUrl.split('%name%')[0];
|
||||
const suffix = assetUrl.split('%name%')[1];
|
||||
let name = url;
|
||||
|
||||
if(prefix && name.startsWith(prefix)) name = name.substring(prefix.length);
|
||||
if(suffix && name.endsWith(suffix)) name = name.substring(0, name.length - suffix.length);
|
||||
|
||||
return name;
|
||||
};
|
||||
|
||||
catalogAdmin.savePageImages(selectedNode.pageId, extractName(headerImage), extractName(teaserImage));
|
||||
}, [ selectedNode, catalogAdmin, headerImage, teaserImage ]);
|
||||
|
||||
const filterNodes = useCallback((node: ICatalogNode): boolean =>
|
||||
{
|
||||
if(!searchQuery) return true;
|
||||
const q = searchQuery.toLowerCase();
|
||||
if(node.localization?.toLowerCase().includes(q)) return true;
|
||||
if(String(node.pageId).includes(q)) return true;
|
||||
if(node.children?.some(c => filterNodes(c))) return true;
|
||||
return false;
|
||||
}, [ searchQuery ]);
|
||||
|
||||
const pageInfo = useMemo(() =>
|
||||
{
|
||||
if(!selectedNode) return null;
|
||||
return {
|
||||
offerCount: currentPage?.offers?.length ?? 0,
|
||||
childCount: selectedNode.children?.length ?? 0,
|
||||
iconId: selectedNode.iconId,
|
||||
pageName: selectedNode.pageName,
|
||||
};
|
||||
}, [ selectedNode, currentPage ]);
|
||||
|
||||
const inputClass = 'text-[13px] border-2 border-card-grid-item-border rounded px-2 py-1 bg-white focus:outline-none focus:border-primary transition-colors w-full';
|
||||
|
||||
const SECTION_TABS: { key: FormSection; label: string; icon: FC<{ className?: string }> }[] = [
|
||||
{ key: 'identity', label: 'Edit', icon: FaEdit },
|
||||
{ key: 'content', label: 'Content', icon: FaFileAlt },
|
||||
{ key: 'images', label: 'Images', icon: FaImage },
|
||||
{ key: 'info', label: 'Info', icon: FaInfoCircle },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex h-full overflow-hidden">
|
||||
{ /* Left: Page tree */ }
|
||||
<div className="w-[320px] min-w-[320px] border-r-2 border-card-grid-item-border bg-card-grid-item flex flex-col overflow-hidden">
|
||||
<div className="flex items-center gap-1 px-2 py-1.5 border-b border-card-grid-item-border">
|
||||
<div className="flex-1 relative">
|
||||
<FaSearch className="absolute left-2 top-1/2 -translate-y-1/2 text-[10px] text-gray-600" />
|
||||
<input
|
||||
className="w-full text-[12px] border border-card-grid-item-border rounded pl-6 pr-2 py-1 bg-white focus:outline-none focus:border-primary transition-colors"
|
||||
placeholder="Search pages..."
|
||||
type="text"
|
||||
value={ searchQuery }
|
||||
onChange={ e => setSearchQuery(e.target.value) }
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
className="flex items-center gap-1 px-2 py-1 rounded text-[11px] font-bold bg-success/10 text-success border border-success/30 hover:bg-success/20 cursor-pointer transition-colors shrink-0"
|
||||
title="Create root category"
|
||||
onClick={ () => rootNode && handleCreateChild(rootNode.pageId) }
|
||||
>
|
||||
<FaPlus className="text-[9px]" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto overflow-x-hidden py-1">
|
||||
{ rootNode && rootNode.children.length > 0 && rootNode.children.map((child, index) =>
|
||||
{
|
||||
if(!filterNodes(child)) return null;
|
||||
return (
|
||||
<CatalogAdminPageTreeItem
|
||||
key={ `${ child.pageId }-${ index }` }
|
||||
node={ child }
|
||||
selectedPageId={ selectedNode?.pageId }
|
||||
onReorder={ handleReorder }
|
||||
onSelect={ handleSelect }
|
||||
/>
|
||||
);
|
||||
}) }
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ /* Right: Form */ }
|
||||
<div className="flex-1 overflow-y-auto bg-card-content-area flex flex-col">
|
||||
{ !selectedNode
|
||||
? <div className="flex items-center justify-center h-full text-[13px] text-gray-700">
|
||||
Select a page from the tree to edit
|
||||
</div>
|
||||
: <>
|
||||
{ /* Page header */ }
|
||||
<div className="flex items-center justify-between px-3 py-1.5 border-b-2 border-card-grid-item-border bg-card-grid-item shrink-0">
|
||||
<span className="text-[13px] font-bold text-primary">
|
||||
{ selectedNode.localization }
|
||||
<span className="text-gray-600 font-normal ml-1">#{ selectedNode.pageId }</span>
|
||||
</span>
|
||||
<div className="flex items-center gap-0.5 bg-white/40 rounded-lg p-0.5">
|
||||
{ SECTION_TABS.map(tab =>
|
||||
{
|
||||
const Icon = tab.icon;
|
||||
const isActive = activeSection === tab.key;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={ tab.key }
|
||||
className={ `flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[12px] font-bold cursor-pointer transition-all ${ isActive
|
||||
? 'bg-white text-primary shadow-sm'
|
||||
: 'text-gray-700 hover:text-dark' }` }
|
||||
onClick={ () => setActiveSection(tab.key) }
|
||||
>
|
||||
<Icon className="text-[11px]" />
|
||||
{ tab.label }
|
||||
</button>
|
||||
);
|
||||
}) }
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ /* Form content */ }
|
||||
<div className="flex-1 overflow-y-auto p-3">
|
||||
{ activeSection === 'identity' && (
|
||||
<div className="flex flex-col gap-2.5">
|
||||
{ /* Identity */ }
|
||||
<div className="bg-white rounded border border-card-grid-item-border p-2.5 shadow-sm">
|
||||
<div className="text-[11px] text-primary uppercase font-bold mb-1.5 border-l-2 border-l-primary pl-1.5">Identity</div>
|
||||
<div className="grid grid-cols-4 gap-1.5">
|
||||
<div className="flex flex-col gap-0.5 col-span-2">
|
||||
<label className="text-[11px] text-gray-700 uppercase font-bold">Caption</label>
|
||||
<input className={ inputClass } value={ caption } onChange={ e => setCaption(e.target.value) } />
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[11px] text-gray-700 uppercase font-bold">Min Rank</label>
|
||||
<input className={ inputClass } min={ 1 } type="number" value={ minRank } onChange={ e => setMinRank(parseInt(e.target.value) || 1) } />
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[11px] text-gray-700 uppercase font-bold">Order</label>
|
||||
<input className={ inputClass } min={ 0 } type="number" value={ orderNum } onChange={ e => setOrderNum(parseInt(e.target.value) || 0) } />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ /* Icon */ }
|
||||
<div className="bg-white rounded border border-card-grid-item-border p-2.5 shadow-sm">
|
||||
<div className="text-[11px] text-primary uppercase font-bold mb-1.5 border-l-2 border-l-primary pl-1.5">Icon</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-12 h-12 bg-card-content-area rounded border border-card-grid-item-border flex items-center justify-center shrink-0">
|
||||
<CatalogIconView icon={ iconId } className="w-9 h-9" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 flex-1">
|
||||
<label className="text-[11px] text-gray-700 uppercase font-bold">Icon ID: { iconId }</label>
|
||||
<div className="flex items-center gap-1">
|
||||
<input className={ inputClass } min={ 0 } type="number" value={ iconId } onChange={ e => setIconId(parseInt(e.target.value) || 0) } />
|
||||
<button
|
||||
className="flex items-center gap-1 px-2.5 py-1 rounded text-[12px] font-bold bg-primary text-white hover:bg-secondary transition-colors cursor-pointer shrink-0"
|
||||
onClick={ () => setBrowsingIcon(true) }
|
||||
>
|
||||
<FaFolderOpen className="text-[10px]" /> Browse
|
||||
</button>
|
||||
<button
|
||||
className="px-2 py-1 rounded text-[11px] bg-card-grid-item text-gray-700 border border-card-grid-item-border hover:bg-card-grid-item-active transition-colors cursor-pointer shrink-0"
|
||||
title="Reset to original"
|
||||
onClick={ () => setIconId(selectedNode?.iconId ?? 0) }
|
||||
>
|
||||
<FaUndo className="text-[10px]" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ browsingIcon &&
|
||||
<CatalogAdminIconBrowser
|
||||
currentIconId={ iconId }
|
||||
onClose={ () => setBrowsingIcon(false) }
|
||||
onSelect={ id => { setIconId(id); setBrowsingIcon(false); } }
|
||||
/> }
|
||||
|
||||
{ /* Layout */ }
|
||||
<div className="bg-white rounded border border-card-grid-item-border p-2.5 shadow-sm">
|
||||
<div className="text-[11px] text-primary uppercase font-bold mb-1.5 border-l-2 border-l-primary pl-1.5">Layout</div>
|
||||
<select className={ inputClass } value={ pageLayout } onChange={ e => setPageLayout(e.target.value) }>
|
||||
{ LAYOUT_OPTIONS.map(l => <option key={ l.value } value={ l.value }>{ l.label } ({ l.value })</option>) }
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{ /* Visibility */ }
|
||||
<div className="bg-white rounded border border-card-grid-item-border p-2.5 shadow-sm">
|
||||
<div className="text-[11px] text-primary uppercase font-bold mb-1.5 border-l-2 border-l-primary pl-1.5">Visibility</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<label className="flex items-center gap-1.5 text-[12px] cursor-pointer">
|
||||
<input className="accent-primary" checked={ visible === '1' } type="checkbox" onChange={ e => setVisible(e.target.checked ? '1' : '0') } />
|
||||
Visible
|
||||
</label>
|
||||
<label className="flex items-center gap-1.5 text-[12px] cursor-pointer">
|
||||
<input className="accent-primary" checked={ enabled === '1' } type="checkbox" onChange={ e => setEnabled(e.target.checked ? '1' : '0') } />
|
||||
Enabled
|
||||
</label>
|
||||
<label className="flex items-center gap-1.5 text-[12px] cursor-pointer">
|
||||
<input className="accent-primary" checked={ clubOnly === '1' } type="checkbox" onChange={ e => setClubOnly(e.target.checked ? '1' : '0') } />
|
||||
Club Only
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ /* Actions */ }
|
||||
<div className="flex justify-between">
|
||||
<button className="flex items-center gap-1 px-2 py-1 rounded text-[12px] font-bold bg-danger/10 text-danger border border-danger/30 hover:bg-danger/20 transition-colors cursor-pointer" onClick={ handleDeleteSelected }>
|
||||
<FaTrash className="text-[10px]" /> Delete
|
||||
</button>
|
||||
<button className="flex items-center gap-1 px-3 py-1 rounded text-[12px] font-bold bg-primary text-white hover:bg-secondary transition-colors cursor-pointer disabled:opacity-50" disabled={ loading } onClick={ handleSave }>
|
||||
{ loading ? <FaSpinner className="text-[10px] animate-spin" /> : <FaSave className="text-[10px]" /> } Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) }
|
||||
|
||||
{ activeSection === 'content' && (
|
||||
<div className="flex flex-col gap-2.5">
|
||||
<div className="bg-white rounded border border-card-grid-item-border p-2.5 shadow-sm">
|
||||
<div className="text-[11px] text-primary uppercase font-bold mb-1.5 border-l-2 border-l-primary pl-1.5">Page Texts</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[11px] text-gray-700 uppercase font-bold">Headline (text 0)</label>
|
||||
<input className={ inputClass } placeholder="Page headline" value={ pageHeadline } onChange={ e => setPageHeadline(e.target.value) } />
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[11px] text-gray-700 uppercase font-bold">Teaser (text 1)</label>
|
||||
<input className={ inputClass } placeholder="Teaser text" value={ pageTeaser } onChange={ e => setPageTeaser(e.target.value) } />
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<label className="text-[11px] text-gray-700 uppercase font-bold">Details (text 2)</label>
|
||||
<textarea className={ `${ inputClass } resize-none h-20` } placeholder="Detailed description" value={ pageTextDetails } onChange={ e => setPageTextDetails(e.target.value) } />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ /* Live preview */ }
|
||||
<div className="bg-white rounded border border-card-grid-item-border p-2.5 shadow-sm">
|
||||
<div className="text-[11px] text-primary uppercase font-bold mb-1.5 border-l-2 border-l-primary pl-1.5">Preview</div>
|
||||
<div className="bg-card-content-area rounded p-2 border border-card-grid-item-border">
|
||||
{ headerImage &&
|
||||
<img alt="" className="w-full h-auto rounded mb-1.5 max-h-[60px] object-contain" src={ headerImage } /> }
|
||||
<div className="flex gap-2">
|
||||
{ teaserImage &&
|
||||
<img alt="" className="w-[50px] h-[50px] object-contain shrink-0 rounded" src={ teaserImage } /> }
|
||||
<div className="text-[12px] text-dark flex-1">
|
||||
{ pageHeadline && <div className="font-bold mb-0.5">{ pageHeadline }</div> }
|
||||
{ pageTeaser && <div className="text-gray-700 text-[11px]">{ pageTeaser }</div> }
|
||||
{ pageTextDetails && <div className="text-[11px] mt-1 text-gray-600" dangerouslySetInnerHTML={ { __html: pageTextDetails.replace(/\n/g, '<br />') } } /> }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<button className="flex items-center gap-1 px-3 py-1 rounded text-[12px] font-bold bg-primary text-white hover:bg-secondary transition-colors cursor-pointer disabled:opacity-50" disabled={ loading } onClick={ handleSave }>
|
||||
{ loading ? <FaSpinner className="text-[10px] animate-spin" /> : <FaSave className="text-[10px]" /> } Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) }
|
||||
|
||||
{ activeSection === 'images' && (
|
||||
<div className="flex flex-col gap-2.5">
|
||||
<div className="bg-white rounded border border-card-grid-item-border p-2.5 shadow-sm">
|
||||
<div className="text-[11px] text-primary uppercase font-bold mb-1.5 border-l-2 border-l-primary pl-1.5">{ LocalizeText('catalog.admin.section.images') }</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{ /* Header image */ }
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-[11px] text-gray-700 uppercase font-bold">{ LocalizeText('catalog.admin.label.headerimage') }</label>
|
||||
<div className="bg-card-content-area rounded border border-card-grid-item-border p-2 min-h-[70px] flex items-center justify-center">
|
||||
{ headerImage
|
||||
? <img alt="header" className="max-w-full max-h-[80px] object-contain" src={ headerImage } />
|
||||
: <span className="text-[11px] text-gray-600">{ LocalizeText('catalog.admin.noimage') }</span> }
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
className="flex-1 flex items-center justify-center gap-1 px-2 py-1 rounded text-[12px] font-bold bg-primary text-white hover:bg-secondary transition-colors cursor-pointer"
|
||||
onClick={ () => setBrowsingImageType('header') }
|
||||
>
|
||||
<FaFolderOpen className="text-[10px]" /> { LocalizeText('catalog.admin.browse') }
|
||||
</button>
|
||||
{ headerImage &&
|
||||
<button
|
||||
className="px-2 py-1 rounded text-[12px] bg-danger/10 text-danger border border-danger/30 hover:bg-danger/20 transition-colors cursor-pointer"
|
||||
onClick={ () => setHeaderImage(null) }
|
||||
>
|
||||
<FaTimes className="text-[10px]" />
|
||||
</button> }
|
||||
</div>
|
||||
</div>
|
||||
{ /* Teaser image */ }
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-[11px] text-gray-700 uppercase font-bold">{ LocalizeText('catalog.admin.label.teaserimage') }</label>
|
||||
<div className="bg-card-content-area rounded border border-card-grid-item-border p-2 min-h-[70px] flex items-center justify-center">
|
||||
{ teaserImage
|
||||
? <img alt="teaser" className="max-w-[70px] max-h-[70px] object-contain" src={ teaserImage } />
|
||||
: <span className="text-[11px] text-gray-600">{ LocalizeText('catalog.admin.noimage') }</span> }
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
className="flex-1 flex items-center justify-center gap-1 px-2 py-1 rounded text-[12px] font-bold bg-primary text-white hover:bg-secondary transition-colors cursor-pointer"
|
||||
onClick={ () => setBrowsingImageType('teaser') }
|
||||
>
|
||||
<FaFolderOpen className="text-[10px]" /> { LocalizeText('catalog.admin.browse') }
|
||||
</button>
|
||||
{ teaserImage &&
|
||||
<button
|
||||
className="px-2 py-1 rounded text-[12px] bg-danger/10 text-danger border border-danger/30 hover:bg-danger/20 transition-colors cursor-pointer"
|
||||
onClick={ () => setTeaserImage(null) }
|
||||
>
|
||||
<FaTimes className="text-[10px]" />
|
||||
</button> }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end mt-2">
|
||||
<button className="flex items-center gap-1 px-3 py-1 rounded text-[12px] font-bold bg-primary text-white hover:bg-secondary transition-colors cursor-pointer disabled:opacity-50" disabled={ loading } onClick={ handleSaveImages }>
|
||||
{ loading ? <FaSpinner className="text-[10px] animate-spin" /> : <FaSave className="text-[10px]" /> } { LocalizeText('catalog.admin.save.images') }
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ browsingImageType &&
|
||||
<CatalogAdminImageBrowser
|
||||
currentImage={ browsingImageType === 'header' ? headerImage : teaserImage }
|
||||
type={ browsingImageType }
|
||||
onClose={ () => setBrowsingImageType(null) }
|
||||
onSelect={ handleImageSelect }
|
||||
/> }
|
||||
</div>
|
||||
) }
|
||||
|
||||
{ activeSection === 'info' && pageInfo && (
|
||||
<div className="flex flex-col gap-2.5">
|
||||
<div className="bg-white rounded border border-card-grid-item-border p-2.5 shadow-sm">
|
||||
<div className="text-[11px] text-primary uppercase font-bold mb-1.5 border-l-2 border-l-primary pl-1.5">Page Info</div>
|
||||
<div className="grid grid-cols-2 gap-1.5">
|
||||
{ [
|
||||
[ 'Page ID', `${ selectedNode.pageId }` ],
|
||||
[ 'Page Name', pageInfo.pageName || '-' ],
|
||||
[ 'Icon ID', `${ iconId }` ],
|
||||
[ 'Layout', pageLayout ],
|
||||
[ 'Offers', `${ pageInfo.offerCount }` ],
|
||||
[ 'Children', `${ pageInfo.childCount }` ],
|
||||
[ 'Visible', visible === '1' ? 'Yes' : 'No' ],
|
||||
[ 'Enabled', enabled === '1' ? 'Yes' : 'No' ],
|
||||
].map(([ label, value ]) => (
|
||||
<div key={ label } className="flex items-center justify-between bg-card-content-area rounded px-2 py-1 border border-card-grid-item-border">
|
||||
<span className="text-[11px] text-gray-700 font-bold uppercase">{ label }</span>
|
||||
<span className="text-[12px] font-mono text-dark">{ value }</span>
|
||||
</div>
|
||||
)) }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
</> }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,130 @@
|
||||
import { FC, useCallback, useState } from 'react';
|
||||
import { FaCaretDown, FaCaretRight, FaEyeSlash, FaGripVertical } from 'react-icons/fa';
|
||||
import { ICatalogNode } from '../../../../api';
|
||||
import { CatalogIconView } from '../catalog-icon/CatalogIconView';
|
||||
|
||||
export interface CatalogAdminPageTreeItemProps
|
||||
{
|
||||
node: ICatalogNode;
|
||||
depth?: number;
|
||||
selectedPageId?: number;
|
||||
onSelect: (node: ICatalogNode) => void;
|
||||
onReorder: (pageId: number, newParentId: number, newIndex: number) => void;
|
||||
}
|
||||
|
||||
export const CatalogAdminPageTreeItem: FC<CatalogAdminPageTreeItemProps> = props =>
|
||||
{
|
||||
const { node, depth = 0, selectedPageId, onSelect, onReorder } = props;
|
||||
const [ isOpen, setIsOpen ] = useState(node.isOpen);
|
||||
const [ isDragOver, setIsDragOver ] = useState<'above' | 'on' | 'below' | null>(null);
|
||||
|
||||
const isSelected = selectedPageId === node.pageId;
|
||||
const isHidden = !node.isVisible;
|
||||
const hasBranch = node.children && node.children.length > 0;
|
||||
|
||||
const handleDragStart = useCallback((e: React.DragEvent) =>
|
||||
{
|
||||
e.dataTransfer.setData('text/plain', JSON.stringify({ pageId: node.pageId, parentId: node.parent?.pageId ?? -1 }));
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
}, [ node ]);
|
||||
|
||||
const handleDragOver = useCallback((e: React.DragEvent) =>
|
||||
{
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
|
||||
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
|
||||
const y = e.clientY - rect.top;
|
||||
const third = rect.height / 3;
|
||||
|
||||
if(y < third) setIsDragOver('above');
|
||||
else if(y > third * 2) setIsDragOver('below');
|
||||
else setIsDragOver('on');
|
||||
}, []);
|
||||
|
||||
const handleDrop = useCallback((e: React.DragEvent) =>
|
||||
{
|
||||
e.preventDefault();
|
||||
setIsDragOver(null);
|
||||
|
||||
try
|
||||
{
|
||||
const data = JSON.parse(e.dataTransfer.getData('text/plain'));
|
||||
if(!data.pageId || data.pageId === node.pageId) return;
|
||||
|
||||
if(isDragOver === 'on' && hasBranch)
|
||||
{
|
||||
onReorder(data.pageId, node.pageId, 0);
|
||||
}
|
||||
else
|
||||
{
|
||||
const parentId = node.parent?.pageId ?? -1;
|
||||
const index = node.parent?.children?.indexOf(node) ?? 0;
|
||||
const targetIndex = isDragOver === 'below' ? index + 1 : index;
|
||||
onReorder(data.pageId, parentId, targetIndex);
|
||||
}
|
||||
}
|
||||
catch {}
|
||||
}, [ node, isDragOver, hasBranch, onReorder ]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{ isDragOver === 'above' &&
|
||||
<div className="h-[3px] bg-primary rounded-full mx-1" style={ { marginLeft: depth * 18 + 4 } } /> }
|
||||
|
||||
<div
|
||||
className={ `group/tree flex items-center gap-1.5 px-2 py-1 mx-1 my-[1px] rounded cursor-pointer transition-all text-[13px]
|
||||
${ isSelected ? 'bg-primary/20 border border-primary/40 font-semibold shadow-sm' : 'border border-transparent hover:bg-white/50' }
|
||||
${ isHidden ? 'opacity-40' : '' }
|
||||
${ isDragOver === 'on' ? 'ring-2 ring-primary bg-primary/5' : '' }` }
|
||||
draggable
|
||||
style={ { paddingLeft: depth * 18 + 8 } }
|
||||
onClick={ () => onSelect(node) }
|
||||
onDragLeave={ () => setIsDragOver(null) }
|
||||
onDragOver={ handleDragOver }
|
||||
onDragStart={ handleDragStart }
|
||||
onDrop={ handleDrop }
|
||||
>
|
||||
<FaGripVertical className="text-[12px] text-slate-500 shrink-0 group-hover/tree:text-slate-800 cursor-grab" />
|
||||
|
||||
{ hasBranch
|
||||
? <span
|
||||
className="text-[15px] text-slate-700 shrink-0 cursor-pointer hover:text-primary w-4 flex items-center justify-center"
|
||||
onClick={ e => { e.stopPropagation(); setIsOpen(!isOpen); } }
|
||||
>
|
||||
{ isOpen ? <FaCaretDown /> : <FaCaretRight /> }
|
||||
</span>
|
||||
: <span className="w-4 shrink-0" /> }
|
||||
|
||||
<div className="w-6 h-6 flex items-center justify-center shrink-0">
|
||||
<CatalogIconView icon={ node.iconId } />
|
||||
</div>
|
||||
|
||||
<span className="flex-1 truncate text-dark" title={ `${ node.localization } (ID: ${ node.pageId })` }>
|
||||
{ node.localization }
|
||||
</span>
|
||||
|
||||
{ isHidden && <FaEyeSlash className="text-[12px] text-danger shrink-0" title="Page is hidden" /> }
|
||||
|
||||
<span className="text-[11px] text-slate-500 shrink-0 font-mono">
|
||||
#{ node.pageId }
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
{ isDragOver === 'below' &&
|
||||
<div className="h-[3px] bg-primary rounded-full mx-1" style={ { marginLeft: depth * 18 + 4 } } /> }
|
||||
|
||||
{ isOpen && hasBranch && node.children.map((child, index) =>
|
||||
<CatalogAdminPageTreeItem
|
||||
key={ `${ child.pageId }-${ index }` }
|
||||
depth={ depth + 1 }
|
||||
node={ child }
|
||||
selectedPageId={ selectedPageId }
|
||||
onReorder={ onReorder }
|
||||
onSelect={ onSelect }
|
||||
/>
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,63 @@
|
||||
import { FC, useState } from 'react';
|
||||
import { FaCheck, FaCloudUploadAlt, FaExclamationTriangle, FaSpinner } from 'react-icons/fa';
|
||||
import { useCatalogAdmin } from '../../CatalogAdminContext';
|
||||
|
||||
export const CatalogAdminPublishPanel: FC<{}> = () =>
|
||||
{
|
||||
const catalogAdmin = useCatalogAdmin();
|
||||
const hasPendingChanges = catalogAdmin?.hasPendingChanges ?? false;
|
||||
const loading = catalogAdmin?.loading ?? false;
|
||||
const publishCatalog = catalogAdmin?.publishCatalog;
|
||||
const [ confirmStep, setConfirmStep ] = useState(false);
|
||||
|
||||
const handlePublish = () =>
|
||||
{
|
||||
if(!confirmStep) { setConfirmStep(true); return; }
|
||||
publishCatalog?.();
|
||||
setConfirmStep(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-full gap-4 p-6">
|
||||
{ hasPendingChanges
|
||||
? <>
|
||||
<div className="w-16 h-16 rounded-full bg-warning/10 flex items-center justify-center">
|
||||
<FaExclamationTriangle className="text-2xl text-warning" />
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-sm font-bold text-black mb-1">Unpublished Changes</div>
|
||||
<div className="text-[13px] text-gray-600 max-w-[300px]">
|
||||
Publishing will update the catalog for all users immediately.
|
||||
</div>
|
||||
</div>
|
||||
{ confirmStep
|
||||
? <div className="flex flex-col items-center gap-2">
|
||||
<div className="text-[13px] font-bold text-warning">Are you sure?</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button className="px-4 py-1.5 rounded text-[13px] font-bold bg-card-grid-item text-gray-700 border border-card-grid-item-border hover:bg-card-grid-item-active cursor-pointer transition-colors" onClick={ () => setConfirmStep(false) }>
|
||||
Cancel
|
||||
</button>
|
||||
<button className="flex items-center gap-1.5 px-6 py-1.5 rounded text-[13px] font-bold bg-success text-white hover:bg-green-700 cursor-pointer transition-colors disabled:opacity-50" disabled={ loading } onClick={ handlePublish }>
|
||||
{ loading ? <FaSpinner className="text-xs animate-spin" /> : <FaCloudUploadAlt className="text-xs" /> }
|
||||
Confirm
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
: <button className="flex items-center gap-2 px-8 py-2 rounded-lg text-sm font-bold bg-success text-white hover:bg-green-700 cursor-pointer transition-all shadow-md hover:shadow-lg animate-pulse disabled:opacity-50" disabled={ loading } onClick={ handlePublish }>
|
||||
{ loading ? <FaSpinner className="text-base animate-spin" /> : <FaCloudUploadAlt className="text-base" /> }
|
||||
Publish Catalog
|
||||
</button> }
|
||||
<div className="text-[11px] text-gray-600">Ctrl+Shift+P</div>
|
||||
</>
|
||||
: <>
|
||||
<div className="w-16 h-16 rounded-full bg-success/10 flex items-center justify-center">
|
||||
<FaCheck className="text-2xl text-success" />
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-sm font-bold text-black mb-1">All Published</div>
|
||||
<div className="text-[13px] text-gray-600 max-w-[300px]">The catalog is up to date.</div>
|
||||
</div>
|
||||
</> }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,8 +1,7 @@
|
||||
import { FC, useCallback, useRef, useState } from 'react';
|
||||
import { FaArrowsAlt, FaCaretDown, FaCaretUp, FaPlus, FaStar, FaTrash } from 'react-icons/fa';
|
||||
import { ICatalogNode, LocalizeText } from '../../../../api';
|
||||
import { FC, useState } from 'react';
|
||||
import { FaCaretDown, FaCaretUp, FaStar } from 'react-icons/fa';
|
||||
import { ICatalogNode } from '../../../../api';
|
||||
import { useCatalog, useCatalogFavorites } from '../../../../hooks';
|
||||
import { useCatalogAdmin } from '../../CatalogAdminContext';
|
||||
import { CatalogIconView } from '../catalog-icon/CatalogIconView';
|
||||
import { CatalogNavigationSetView } from './CatalogNavigationSetView';
|
||||
|
||||
@@ -16,113 +15,20 @@ export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = pro
|
||||
{
|
||||
const { node = null, child = false } = props;
|
||||
const { activateNode = null } = useCatalog();
|
||||
const catalogAdmin = useCatalogAdmin();
|
||||
const adminMode = catalogAdmin?.adminMode ?? false;
|
||||
const { isFavoritePage, toggleFavoritePage } = useCatalogFavorites();
|
||||
const isFav = node ? isFavoritePage(node.pageId) : false;
|
||||
const [ isDragOver, setIsDragOver ] = useState(false);
|
||||
const dragRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const handleDragStart = useCallback((e: React.DragEvent) =>
|
||||
{
|
||||
if(!adminMode) return;
|
||||
|
||||
e.dataTransfer.setData('text/plain', JSON.stringify({ pageId: node.pageId, parentId: node.parent?.pageId ?? -1 }));
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
}, [ adminMode, node ]);
|
||||
|
||||
const handleDragOver = useCallback((e: React.DragEvent) =>
|
||||
{
|
||||
if(!adminMode) return;
|
||||
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
setIsDragOver(true);
|
||||
}, [ adminMode ]);
|
||||
|
||||
const handleDragLeave = useCallback(() =>
|
||||
{
|
||||
setIsDragOver(false);
|
||||
}, []);
|
||||
|
||||
const handleDrop = useCallback((e: React.DragEvent) =>
|
||||
{
|
||||
if(!adminMode) return;
|
||||
|
||||
e.preventDefault();
|
||||
setIsDragOver(false);
|
||||
|
||||
try
|
||||
{
|
||||
const data = JSON.parse(e.dataTransfer.getData('text/plain'));
|
||||
|
||||
if(data.pageId && data.pageId !== node.pageId)
|
||||
{
|
||||
// Drop onto a branch = reparent under this node
|
||||
// Drop onto a leaf = reorder as sibling
|
||||
const targetParentId = node.isBranch ? node.pageId : (node.parent?.pageId ?? -1);
|
||||
const targetIndex = node.isBranch ? 0 : (node.parent?.children?.indexOf(node) ?? 0);
|
||||
|
||||
catalogAdmin?.reorderPage(data.pageId, targetParentId, targetIndex);
|
||||
}
|
||||
}
|
||||
catch(err)
|
||||
{
|
||||
// Invalid drag data
|
||||
}
|
||||
}, [ adminMode, node, catalogAdmin ]);
|
||||
|
||||
return (
|
||||
<div className={ child ? 'pl-1.5 ml-1.5 border-l-2 border-card-grid-item-border' : '' }>
|
||||
<div
|
||||
ref={ dragRef }
|
||||
className={ `group/nav flex items-center gap-1.5 px-1.5 py-[3px] mx-0.5 rounded cursor-pointer transition-all duration-100 text-[11px] ${ node.isActive ? 'bg-card-grid-item-active border border-card-grid-item-border-active shadow-inner1px font-bold' : 'border border-transparent hover:bg-card-grid-item-active' } ${ isDragOver ? 'ring-2 ring-primary ring-offset-1 bg-primary/10' : '' }` }
|
||||
draggable={ adminMode }
|
||||
className={ `group/nav flex items-center gap-1.5 px-1.5 py-[3px] mx-0.5 rounded cursor-pointer transition-all duration-100 text-[11px] ${ node.isActive ? 'bg-card-grid-item-active border border-card-grid-item-border-active shadow-inner1px font-bold' : 'border border-transparent hover:bg-card-grid-item-active' }` }
|
||||
onClick={ () => activateNode(node) }
|
||||
onDragLeave={ adminMode ? handleDragLeave : undefined }
|
||||
onDragOver={ adminMode ? handleDragOver : undefined }
|
||||
onDragStart={ adminMode ? handleDragStart : undefined }
|
||||
onDrop={ adminMode ? handleDrop : undefined }
|
||||
>
|
||||
{ adminMode &&
|
||||
<FaArrowsAlt className="text-[7px] text-muted cursor-grab shrink-0 opacity-0 group-hover/nav:opacity-60" /> }
|
||||
<div className="w-5 h-5 flex items-center justify-center shrink-0">
|
||||
<CatalogIconView icon={ node.iconId } />
|
||||
</div>
|
||||
<span className="flex-1 truncate" title={ adminMode ? `Page ID: ${ node.pageId }` : undefined }>{ node.localization }</span>
|
||||
{ adminMode &&
|
||||
<div className="flex items-center gap-1 opacity-0 group-hover/nav:opacity-100 transition-opacity">
|
||||
<FaPlus
|
||||
className="text-[8px] text-success hover:text-green-800"
|
||||
title={ LocalizeText('catalog.admin.create.subpage') }
|
||||
onClick={ e =>
|
||||
{
|
||||
e.stopPropagation();
|
||||
catalogAdmin.createPage({
|
||||
caption: 'New Page',
|
||||
pageLayout: 'default_3x3',
|
||||
minRank: 1,
|
||||
visible: '1',
|
||||
enabled: '1',
|
||||
orderNum: 0,
|
||||
parentId: node.pageId,
|
||||
});
|
||||
} }
|
||||
/>
|
||||
<FaTrash
|
||||
className="text-[8px] text-danger hover:text-red-700"
|
||||
title={ LocalizeText('catalog.admin.delete.page') }
|
||||
onClick={ e =>
|
||||
{
|
||||
e.stopPropagation();
|
||||
if(confirm(LocalizeText('catalog.admin.delete.page.confirm', [ 'name' ], [ node.localization ])))
|
||||
{
|
||||
catalogAdmin.deletePage(node.pageId);
|
||||
}
|
||||
} }
|
||||
/>
|
||||
</div> }
|
||||
{ !adminMode && node.pageId > 0 &&
|
||||
<span className="flex-1 truncate" title={ node.localization }>{ node.localization }</span>
|
||||
{ node.pageId > 0 &&
|
||||
<FaStar
|
||||
className={ `text-[8px] transition-all duration-100 cursor-pointer shrink-0 ${ isFav ? 'text-warning opacity-100' : 'text-muted opacity-0 group-hover/nav:opacity-100 hover:text-warning' }` }
|
||||
onClick={ e => { e.stopPropagation(); toggleFavoritePage(node.pageId); } }
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
import { FC } from 'react';
|
||||
import { FaEdit, FaPlus } from 'react-icons/fa';
|
||||
import { GetConfigurationValue, LocalizeText, ProductTypeEnum, SanitizeHtml } from '../../../../../api';
|
||||
import { GetConfigurationValue, ProductTypeEnum, SanitizeHtml } from '../../../../../api';
|
||||
import { Text } from '../../../../../common';
|
||||
import { useCatalog } from '../../../../../hooks';
|
||||
import { useCatalogAdmin } from '../../../CatalogAdminContext';
|
||||
import { CatalogHeaderView } from '../../catalog-header/CatalogHeaderView';
|
||||
import { CatalogAddOnBadgeWidgetView } from '../widgets/CatalogAddOnBadgeWidgetView';
|
||||
import { CatalogItemGridWidgetView } from '../widgets/CatalogItemGridWidgetView';
|
||||
@@ -18,28 +16,9 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
|
||||
{
|
||||
const { page = null } = props;
|
||||
const { currentOffer = null, currentPage = null } = useCatalog();
|
||||
const catalogAdmin = useCatalogAdmin();
|
||||
const adminMode = catalogAdmin?.adminMode ?? false;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full gap-2">
|
||||
{ /* Admin: quick actions */ }
|
||||
{ adminMode && !catalogAdmin.editingPageData &&
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
className="flex items-center gap-1 text-[10px] text-primary hover:text-dark transition-colors cursor-pointer"
|
||||
onClick={ () => { catalogAdmin.setEditingPageNode(null); catalogAdmin.setEditingRootPage(false); catalogAdmin.setEditingPageData(true); } }
|
||||
>
|
||||
<FaEdit className="text-[10px]" /> { LocalizeText('catalog.admin.edit.page') }
|
||||
</button>
|
||||
<button
|
||||
className="flex items-center gap-1 text-[10px] text-success hover:text-green-800 transition-colors cursor-pointer"
|
||||
onClick={ () => catalogAdmin.setEditingOffer({ offerId: -1, product: { productClassId: 0, productType: 'i', productCount: 1, extraParam: '' } } as any) }
|
||||
>
|
||||
<FaPlus className="text-[10px]" /> { LocalizeText('catalog.admin.offer.new') }
|
||||
</button>
|
||||
</div> }
|
||||
|
||||
{ /* Product detail card */ }
|
||||
{ currentOffer &&
|
||||
<div className="flex gap-0 bg-white rounded border-2 border-card-grid-item-border overflow-hidden">
|
||||
@@ -55,30 +34,12 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
|
||||
</div>
|
||||
{ /* Product info + purchase */ }
|
||||
<div className="flex flex-col flex-1 min-w-0 p-2.5 gap-2">
|
||||
{ /* Title row */ }
|
||||
<div>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<Text className="text-[13px]! font-bold text-dark leading-tight">{ currentOffer.localizationName }</Text>
|
||||
{ adminMode &&
|
||||
<FaEdit
|
||||
className="text-primary text-[11px] cursor-pointer hover:text-dark transition-colors shrink-0 mt-0.5"
|
||||
title={ LocalizeText('catalog.admin.offer.edit') }
|
||||
onClick={ () => catalogAdmin.setEditingOffer(currentOffer) }
|
||||
/> }
|
||||
</div>
|
||||
{ adminMode &&
|
||||
<div className="flex items-center gap-1 mt-1 flex-wrap">
|
||||
<span className="text-[8px] font-mono text-white bg-gray-600 px-1 py-px rounded">ID: { currentOffer.product.productClassId }</span>
|
||||
<span className="text-[8px] font-mono text-white bg-primary px-1 py-px rounded">Offer: { currentOffer.offerId }</span>
|
||||
<span className="text-[8px] font-mono text-white bg-secondary px-1 py-px rounded">{ currentOffer.product.productType.toUpperCase() }</span>
|
||||
</div> }
|
||||
<Text className="text-[13px]! font-bold text-dark leading-tight">{ currentOffer.localizationName }</Text>
|
||||
<CatalogLimitedItemWidgetView />
|
||||
</div>
|
||||
{ /* Price */ }
|
||||
<CatalogTotalPriceWidget />
|
||||
{ /* Spinner */ }
|
||||
<CatalogSpinnerWidgetView />
|
||||
{ /* Actions */ }
|
||||
<div className="flex gap-1.5 mt-auto">
|
||||
<CatalogPurchaseWidgetView />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user