🆕 Added New catalogue page

2026-06-20 07:26:19 +00:00 · 2026-03-23 15:02:20 +01:00
parent 19fd0e0809
commit 33c31fe07d
29 changed files with 2746 additions and 474 deletions
@@ -0,0 +1,153 @@
+import { FC, useEffect, useState } from 'react';
+import { FaSave, FaSpinner, FaTimes, FaTrash } from 'react-icons/fa';
+import { LocalizeText } from '../../../../api';
+import { useCatalog } from '../../../../hooks';
+import { IPageEditData, useCatalogAdmin } from '../../CatalogAdminContext';
+
+const LAYOUT_OPTIONS = [
+    'default_3x3', 'frontpage4', 'pets', 'pets2', 'pets3',
+    'spaces_new', 'soundmachine', 'trophies', 'roomads',
+    'guild_frontpage', 'guild_forum', 'guild_custom_furni',
+    'vip_buy', 'marketplace', 'marketplace_own_items',
+    'recycler', 'recycler_info', 'recycler_prizes',
+    'info_loyalty', 'badge_display', 'bots', 'single_bundle',
+    'color_grouping', 'recent_purchases', 'custom_prefix'
+];
+
+export const CatalogAdminPageEditView: FC<{}> = () =>
+{
+    const { currentPage = null, activeNodes = [], rootNode = null } = useCatalog();
+    const catalogAdmin = useCatalogAdmin();
+    const editingPageData = catalogAdmin?.editingPageData ?? false;
+    const editingRootPage = catalogAdmin?.editingRootPage ?? false;
+    const editingPageNode = catalogAdmin?.editingPageNode ?? null;
+    const loading = catalogAdmin?.loading ?? false;
+
+    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 [ orderNum, setOrderNum ] = useState(0);
+
+    // Resolve what we're editing:
+    // 1. editingPageNode (explicit node from sidebar click)
+    // 2. editingRootPage (root button)
+    // 3. current active page (from "Modifica Pagina" in layout)
+    const targetNode = editingPageNode
+        ? editingPageNode
+        : editingRootPage
+            ? rootNode
+            : (activeNodes.length > 0 ? activeNodes[activeNodes.length - 1] : null);
+
+    const targetPageId = targetNode?.pageId ?? currentPage?.pageId;
+    const isRoot = editingRootPage;
+
+    const closeForm = () =>
+    {
+        catalogAdmin?.setEditingPageData(false);
+        catalogAdmin?.setEditingRootPage(false);
+        catalogAdmin?.setEditingPageNode(null);
+    };
+
+    useEffect(() =>
+    {
+        if(!editingPageData || !targetNode) return;
+
+        setCaption(targetNode.localization || '');
+        setPageLayout(currentPage?.layoutCode || 'default_3x3');
+        setVisible(targetNode.isVisible ? '1' : '0');
+        setEnabled('1');
+        setMinRank(1);
+        setOrderNum(0);
+    }, [ editingPageData, targetNode, currentPage ]);
+
+    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 handleSave = async () =>
+    {
+        if(!catalogAdmin?.savePage) return;
+
+        const parentNode = targetNode.parent;
+
+        const data: IPageEditData = {
+            pageId: targetPageId,
+            caption,
+            pageLayout,
+            minRank,
+            visible,
+            enabled,
+            orderNum,
+            parentId: parentNode ? parentNode.pageId : -1,
+        };
+
+        const success = await catalogAdmin.savePage(data);
+
+        if(success) closeForm();
+    };
+
+    const handleDelete = async () =>
+    {
+        if(!catalogAdmin?.deletePage || isRoot) return;
+        if(!confirm(LocalizeText('catalog.admin.delete.page.confirm', [ 'name' ], [ targetNode.localization ]))) return;
+
+        const success = await catalogAdmin.deletePage(targetPageId);
+
+        if(success) closeForm();
+    };
+
+    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">
+                    { 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 } />
+            </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>
+                    <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>
+                    <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>
+                    <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>
+                    <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">
+                        <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">
+                        <input className="accent-primary" checked={ enabled === '1' } type="checkbox" onChange={ e => setEnabled(e.target.checked ? '1' : '0') } />
+                        { LocalizeText('catalog.admin.enabled') }
+                    </label>
+                </div>
+            </div>
+
+            <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>
+                    : <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>
+            </div>
+        </div>
+    );
+};