mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-24 07:53:09 +00:00
Maurice
1ad2e92142
The bulk of what SonarQube still had open on the reliability side, read site by
site rather than swept. Two clusters are worth calling out because they are
defects, not lint.
**Four regexes could be made to hang the process.** The worst is
`/.+@.+\..+/` in the forgot-password path: three unbounded `.+` that all
overlap, unanchored, on an endpoint that needs no login and whose schema is a
bare z.string() under a 100kb body cap. A thousand '@' characters had not
finished after 100 seconds — one request pins the event loop, and Node has one.
EMAIL_REGEX in auth.helpers is the same shape on register and profile update
(310ms for 8kb). The two tag strippers over an uploaded KML description and over
Commons metadata took 0.52s on a 16k run of '<'. Each rewrite was proven
equivalent by brute force against the original — millions of strings for the
coordinate patterns, 671,876 for the tag stripper — because a subtly different
regex on a parsing path is worse than the finding.
`<[^>]+>` could not be fixed in the pattern: `[^>]` matches `<` too, so the only
unambiguous form changes what happens to malformed markup. It is now a scan in
common/stripHtmlTags.ts, quirks included — `<>` is left alone, `<a<b>` is one
tag — with the equivalence pinned by a test that compares against the old regex
over every string up to length six.
**And roughly 500 places could only be reached with a mouse.** Clickable divs
became real buttons where the markup allowed (52 of them), took
role + tabIndex + Enter/Space where they had to stay divs, and modal backdrops
took role="presentation" — the honest role, since a backdrop is a mouse shortcut
for a Cancel control that is already in the tab order, and making it a button
plants a nameless full-screen tab stop around its own contents.
Alongside those: `.sort()` calls that now say the order they always had, `{n &&
<X/>}` guards that rendered a literal "0" for a zero-byte file and for a place at
latitude 0, an optimistic budget write that stored a boolean where the contract
and both transports use 0/1, and the Number statics.
sonar-project.properties documents the six that were deliberately left: two wiki
patterns with no overlapping quantifier pair whose "fix" would stop parsing
`[see [1]](url)`, four tar header fields bounded at 12-155 bytes by the format,
two djb2 hashes where the 32-bit wrap is the algorithm, two `| 0` that are also
coercing undefined to 0 on a path where the API sends no user_id, and the MCP
session maps Sonar reads as empty because they are filled from another module.
411 lines
19 KiB
TypeScript
411 lines
19 KiB
TypeScript
import { useState, useEffect, useRef, ReactNode } from 'react'
|
|
import { adminApi } from '../../../api/client'
|
|
import { useToast } from '../../../components/shared/Toast'
|
|
import { useTranslation } from '../../../i18n'
|
|
import { Plus, Trash2, Edit2, Package, X, Check, ChevronDown, ChevronRight, FolderPlus } from 'lucide-react'
|
|
import { MAdminButton, MAdminCard, MAdminCardHead, MAdminInput } from './MAdminUi'
|
|
|
|
interface TemplateCategory { id: number; template_id: number; name: string; sort_order: number }
|
|
interface TemplateItem { id: number; category_id: number; name: string; sort_order: number }
|
|
interface Template { id: number; name: string; item_count: number; category_count: number; created_by_name: string }
|
|
|
|
// Small round icon action button in the mobile admin idiom (flat --m-ic circle).
|
|
function PkIconBtn({
|
|
onClick,
|
|
ariaLabel,
|
|
variant = 'neutral',
|
|
size = 32,
|
|
disabled = false,
|
|
children,
|
|
}: {
|
|
onClick: () => void
|
|
ariaLabel: string
|
|
variant?: 'neutral' | 'danger' | 'accent'
|
|
size?: number
|
|
disabled?: boolean
|
|
children: ReactNode
|
|
}) {
|
|
const look =
|
|
variant === 'accent'
|
|
? 'bg-m-act text-m-actfg'
|
|
: variant === 'danger'
|
|
? 'bg-[color:var(--m-ic)] text-[color:var(--m-st-danger)]'
|
|
: 'bg-[color:var(--m-ic)] text-m-muted'
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
aria-label={ariaLabel}
|
|
disabled={disabled}
|
|
className={`flex flex-none items-center justify-center rounded-full disabled:opacity-40 ${look}`}
|
|
style={{ width: size, height: size }}
|
|
>
|
|
{children}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
// Compact inline field matching MAdminInput, used where a native ref is needed
|
|
// (the add-item input focuses itself after each add).
|
|
const inlineFieldCls =
|
|
'h-[38px] w-full rounded-xl border border-[color:var(--m-rowbr)] bg-[color:var(--m-ic)] px-3 text-[0.84375rem] text-m-ink outline-none placeholder:text-m-faint focus:border-[color:var(--m-faint)]'
|
|
|
|
/**
|
|
* Mobile-native re-skin of the admin Packing Template Manager: create/rename/
|
|
* delete templates, expand a template to manage its categories and items. All
|
|
* state, effects and adminApi mutations are preserved from the desktop version.
|
|
*/
|
|
export default function MAdminPackingTemplateManager() {
|
|
const [templates, setTemplates] = useState<Template[]>([])
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
const [showCreate, setShowCreate] = useState(false)
|
|
const [createName, setCreateName] = useState('')
|
|
|
|
// Expanded template state
|
|
const [expandedId, setExpandedId] = useState<number | null>(null)
|
|
const [categories, setCategories] = useState<TemplateCategory[]>([])
|
|
const [items, setItems] = useState<TemplateItem[]>([])
|
|
|
|
// Editing states
|
|
const [editingTemplate, setEditingTemplate] = useState<number | null>(null)
|
|
const [editTemplateName, setEditTemplateName] = useState('')
|
|
const [editingCatId, setEditingCatId] = useState<number | null>(null)
|
|
const [editCatName, setEditCatName] = useState('')
|
|
const [editingItemId, setEditingItemId] = useState<number | null>(null)
|
|
const [editItemName, setEditItemName] = useState('')
|
|
|
|
// Adding states
|
|
const [addingCategory, setAddingCategory] = useState(false)
|
|
const [newCatName, setNewCatName] = useState('')
|
|
const [addingItemToCatId, setAddingItemToCatId] = useState<number | null>(null)
|
|
const [newItemName, setNewItemName] = useState('')
|
|
const addItemRef = useRef<HTMLInputElement>(null)
|
|
|
|
const toast = useToast()
|
|
const { t } = useTranslation()
|
|
|
|
useEffect(() => { loadTemplates() }, [])
|
|
|
|
const loadTemplates = async () => {
|
|
setIsLoading(true)
|
|
try {
|
|
const data = await adminApi.packingTemplates()
|
|
setTemplates(data.templates || [])
|
|
} catch { toast.error(t('admin.packingTemplates.loadError')) }
|
|
finally { setIsLoading(false) }
|
|
}
|
|
|
|
const toggleExpand = async (id: number) => {
|
|
if (expandedId === id) { setExpandedId(null); return }
|
|
setExpandedId(id)
|
|
setAddingCategory(false)
|
|
setAddingItemToCatId(null)
|
|
try {
|
|
const data = await adminApi.getPackingTemplate(id)
|
|
setCategories(data.categories || [])
|
|
setItems(data.items || [])
|
|
} catch { toast.error(t('admin.packingTemplates.loadError')) }
|
|
}
|
|
|
|
// Template CRUD
|
|
const handleCreateTemplate = async () => {
|
|
if (!createName.trim()) return
|
|
try {
|
|
const data = await adminApi.createPackingTemplate({ name: createName.trim() })
|
|
setTemplates(prev => [{ ...data.template, item_count: 0, category_count: 0 }, ...prev])
|
|
setCreateName(''); setShowCreate(false)
|
|
setExpandedId(data.template.id); setCategories([]); setItems([])
|
|
toast.success(t('admin.packingTemplates.created'))
|
|
} catch { toast.error(t('admin.packingTemplates.createError')) }
|
|
}
|
|
|
|
const handleDeleteTemplate = async (id: number) => {
|
|
try {
|
|
await adminApi.deletePackingTemplate(id)
|
|
setTemplates(prev => prev.filter(t => t.id !== id))
|
|
if (expandedId === id) setExpandedId(null)
|
|
toast.success(t('admin.packingTemplates.deleted'))
|
|
} catch { toast.error(t('admin.packingTemplates.deleteError')) }
|
|
}
|
|
|
|
const handleRenameTemplate = async (id: number) => {
|
|
if (!editTemplateName.trim()) { setEditingTemplate(null); return }
|
|
try {
|
|
await adminApi.updatePackingTemplate(id, { name: editTemplateName.trim() })
|
|
setTemplates(prev => prev.map(t => t.id === id ? { ...t, name: editTemplateName.trim() } : t))
|
|
setEditingTemplate(null)
|
|
} catch { toast.error(t('admin.packingTemplates.saveError')) }
|
|
}
|
|
|
|
// Category CRUD
|
|
const handleAddCategory = async () => {
|
|
if (!newCatName.trim() || !expandedId) return
|
|
try {
|
|
const data = await adminApi.addTemplateCategory(expandedId, { name: newCatName.trim() })
|
|
setCategories(prev => [...prev, data.category])
|
|
setNewCatName(''); setAddingCategory(false)
|
|
} catch { toast.error(t('admin.packingTemplates.saveError')) }
|
|
}
|
|
|
|
const handleRenameCategory = async (catId: number) => {
|
|
if (!editCatName.trim() || !expandedId) { setEditingCatId(null); return }
|
|
try {
|
|
await adminApi.updateTemplateCategory(expandedId, catId, { name: editCatName.trim() })
|
|
setCategories(prev => prev.map(c => c.id === catId ? { ...c, name: editCatName.trim() } : c))
|
|
setEditingCatId(null)
|
|
} catch { toast.error(t('admin.packingTemplates.saveError')) }
|
|
}
|
|
|
|
const handleDeleteCategory = async (catId: number) => {
|
|
if (!expandedId) return
|
|
try {
|
|
await adminApi.deleteTemplateCategory(expandedId, catId)
|
|
setCategories(prev => prev.filter(c => c.id !== catId))
|
|
setItems(prev => prev.filter(i => i.category_id !== catId))
|
|
} catch { toast.error(t('admin.toast.deleteError')) }
|
|
}
|
|
|
|
// Item CRUD
|
|
const handleAddItem = async (catId: number) => {
|
|
if (!newItemName.trim() || !expandedId) return
|
|
try {
|
|
const data = await adminApi.addTemplateItem(expandedId, catId, { name: newItemName.trim() })
|
|
setItems(prev => [...prev, data.item])
|
|
setNewItemName('')
|
|
setTimeout(() => addItemRef.current?.focus(), 30)
|
|
} catch { toast.error(t('admin.packingTemplates.saveError')) }
|
|
}
|
|
|
|
const handleRenameItem = async (itemId: number) => {
|
|
if (!editItemName.trim() || !expandedId) { setEditingItemId(null); return }
|
|
try {
|
|
await adminApi.updateTemplateItem(expandedId, itemId, { name: editItemName.trim() })
|
|
setItems(prev => prev.map(i => i.id === itemId ? { ...i, name: editItemName.trim() } : i))
|
|
setEditingItemId(null)
|
|
} catch { toast.error(t('admin.packingTemplates.saveError')) }
|
|
}
|
|
|
|
const handleDeleteItem = async (itemId: number) => {
|
|
if (!expandedId) return
|
|
try {
|
|
await adminApi.deleteTemplateItem(expandedId, itemId)
|
|
setItems(prev => prev.filter(i => i.id !== itemId))
|
|
} catch { toast.error(t('admin.toast.deleteError')) }
|
|
}
|
|
|
|
return (
|
|
<MAdminCard>
|
|
{/* Header */}
|
|
<MAdminCardHead
|
|
title={t('admin.packingTemplates.title')}
|
|
hint={t('admin.packingTemplates.subtitle')}
|
|
trailing={
|
|
<MAdminButton onClick={() => setShowCreate(true)}>
|
|
<Plus size={13} strokeWidth={2.4} />
|
|
{t('admin.packingTemplates.create')}
|
|
</MAdminButton>
|
|
}
|
|
/>
|
|
|
|
{/* Create template */}
|
|
{showCreate && (
|
|
<div className="mt-2 flex items-center gap-2">
|
|
<Package size={16} className="flex-none text-m-faint" />
|
|
<div className="min-w-0 flex-1">
|
|
<MAdminInput
|
|
autoFocus
|
|
value={createName}
|
|
onChange={e => setCreateName(e.target.value)}
|
|
onKeyDown={e => { if (e.key === 'Enter') handleCreateTemplate(); if (e.key === 'Escape') setShowCreate(false) }}
|
|
placeholder={t('admin.packingTemplates.namePlaceholder')}
|
|
/>
|
|
</div>
|
|
<PkIconBtn ariaLabel={t('common.save')} variant="accent" onClick={handleCreateTemplate}><Check size={15} /></PkIconBtn>
|
|
<PkIconBtn ariaLabel={t('common.cancel')} onClick={() => setShowCreate(false)}><X size={15} /></PkIconBtn>
|
|
</div>
|
|
)}
|
|
|
|
{/* Template list */}
|
|
{isLoading ? (
|
|
<div className="py-8 text-center">
|
|
<span className="inline-block h-7 w-7 animate-spin rounded-full border-2 border-[color:var(--m-rowbr)] border-t-[color:var(--m-ink)]" />
|
|
</div>
|
|
) : templates.length === 0 ? (
|
|
<div className="py-8 text-center font-geist text-[0.75rem] text-m-faint">{t('admin.packingTemplates.empty')}</div>
|
|
) : (
|
|
<div className="mt-1">
|
|
{templates.map(tmpl => (
|
|
<div key={tmpl.id} className="border-t border-[color:var(--m-rowbr)] first:border-t-0">
|
|
{/* Template row */}
|
|
<div className="flex items-center gap-2 py-[11px]">
|
|
<button
|
|
type="button"
|
|
aria-label={expandedId === tmpl.id ? t('common.collapse') : t('common.expand')}
|
|
onClick={() => toggleExpand(tmpl.id)}
|
|
className="flex-none text-m-faint"
|
|
>
|
|
{expandedId === tmpl.id ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
|
|
</button>
|
|
<Package size={16} className="flex-none text-m-faint" />
|
|
{editingTemplate === tmpl.id ? (
|
|
<div className="min-w-0 flex-1">
|
|
<MAdminInput
|
|
autoFocus
|
|
value={editTemplateName}
|
|
onChange={e => setEditTemplateName(e.target.value)}
|
|
onBlur={() => handleRenameTemplate(tmpl.id)}
|
|
onKeyDown={e => { if (e.key === 'Enter') handleRenameTemplate(tmpl.id); if (e.key === 'Escape') setEditingTemplate(null) }}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<button type="button" className="min-w-0 flex-1 text-left" onClick={() => toggleExpand(tmpl.id)}>
|
|
<div className="truncate text-[0.8125rem] font-bold text-m-ink">{tmpl.name}</div>
|
|
<div className="mt-[1px] font-geist text-[0.59375rem] text-m-faint">
|
|
{tmpl.category_count} {t('admin.packingTemplates.categories')} · {tmpl.item_count} {t('admin.packingTemplates.items')}
|
|
</div>
|
|
</button>
|
|
)}
|
|
<PkIconBtn
|
|
ariaLabel={t('common.edit')}
|
|
onClick={() => { setEditingTemplate(tmpl.id); setEditTemplateName(tmpl.name) }}
|
|
><Edit2 size={14} /></PkIconBtn>
|
|
<PkIconBtn
|
|
ariaLabel={t('common.delete')}
|
|
variant="danger"
|
|
onClick={() => handleDeleteTemplate(tmpl.id)}
|
|
><Trash2 size={14} /></PkIconBtn>
|
|
</div>
|
|
|
|
{/* Expanded content */}
|
|
{expandedId === tmpl.id && (
|
|
<div className="space-y-2 pb-3 pl-6">
|
|
{categories.map(cat => {
|
|
const catItems = items.filter(i => i.category_id === cat.id)
|
|
return (
|
|
<div key={cat.id} className="overflow-hidden rounded-xl border border-[color:var(--m-rowbr)]">
|
|
{/* Category header */}
|
|
<div className="flex items-center gap-1.5 bg-[color:var(--m-ic)] px-3 py-2">
|
|
{editingCatId === cat.id ? (
|
|
<div className="min-w-0 flex-1">
|
|
<MAdminInput
|
|
autoFocus
|
|
value={editCatName}
|
|
onChange={e => setEditCatName(e.target.value)}
|
|
onBlur={() => handleRenameCategory(cat.id)}
|
|
onKeyDown={e => { if (e.key === 'Enter') handleRenameCategory(cat.id); if (e.key === 'Escape') setEditingCatId(null) }}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<span className="min-w-0 flex-1 truncate font-geist text-[0.625rem] font-bold uppercase tracking-wider text-m-muted">{cat.name}</span>
|
|
)}
|
|
<span className="flex-none font-geist text-[0.625rem] text-m-faint">{catItems.length}</span>
|
|
<PkIconBtn
|
|
size={28}
|
|
ariaLabel={t('admin.packingTemplates.itemName')}
|
|
onClick={() => { setAddingItemToCatId(addingItemToCatId === cat.id ? null : cat.id); setNewItemName(''); setTimeout(() => addItemRef.current?.focus(), 30) }}
|
|
><Plus size={14} /></PkIconBtn>
|
|
<PkIconBtn
|
|
size={28}
|
|
ariaLabel={t('common.edit')}
|
|
onClick={() => { setEditingCatId(cat.id); setEditCatName(cat.name) }}
|
|
><Edit2 size={13} /></PkIconBtn>
|
|
<PkIconBtn
|
|
size={28}
|
|
variant="danger"
|
|
ariaLabel={t('common.delete')}
|
|
onClick={() => handleDeleteCategory(cat.id)}
|
|
><Trash2 size={13} /></PkIconBtn>
|
|
</div>
|
|
|
|
{/* Items */}
|
|
{(catItems.length > 0 || addingItemToCatId === cat.id) && (
|
|
<div className="divide-y divide-[color:var(--m-rowbr)]">
|
|
{catItems.map(item => (
|
|
<div key={item.id} className="flex items-center gap-2 px-3 py-2">
|
|
{editingItemId === item.id ? (
|
|
<>
|
|
<div className="min-w-0 flex-1">
|
|
<MAdminInput
|
|
autoFocus
|
|
value={editItemName}
|
|
onChange={e => setEditItemName(e.target.value)}
|
|
onKeyDown={e => { if (e.key === 'Enter') handleRenameItem(item.id); if (e.key === 'Escape') setEditingItemId(null) }}
|
|
/>
|
|
</div>
|
|
<PkIconBtn size={28} variant="accent" ariaLabel={t('common.save')} onClick={() => handleRenameItem(item.id)}><Check size={13} /></PkIconBtn>
|
|
<PkIconBtn size={28} ariaLabel={t('common.cancel')} onClick={() => setEditingItemId(null)}><X size={13} /></PkIconBtn>
|
|
</>
|
|
) : (
|
|
<>
|
|
<span className="min-w-0 flex-1 truncate text-[0.8125rem] text-m-ink">{item.name}</span>
|
|
<PkIconBtn
|
|
size={28}
|
|
ariaLabel={t('common.edit')}
|
|
onClick={() => { setEditingItemId(item.id); setEditItemName(item.name) }}
|
|
><Edit2 size={12} /></PkIconBtn>
|
|
<PkIconBtn
|
|
size={28}
|
|
variant="danger"
|
|
ariaLabel={t('common.delete')}
|
|
onClick={() => handleDeleteItem(item.id)}
|
|
><Trash2 size={12} /></PkIconBtn>
|
|
</>
|
|
)}
|
|
</div>
|
|
))}
|
|
|
|
{/* Add item inline */}
|
|
{addingItemToCatId === cat.id && (
|
|
<div className="flex items-center gap-2 px-3 py-2">
|
|
<input
|
|
ref={addItemRef}
|
|
value={newItemName}
|
|
onChange={e => setNewItemName(e.target.value)}
|
|
onKeyDown={e => { if (e.key === 'Enter' && newItemName.trim()) handleAddItem(cat.id); if (e.key === 'Escape') { setAddingItemToCatId(null); setNewItemName('') } }}
|
|
placeholder={t('admin.packingTemplates.itemName')}
|
|
className={inlineFieldCls}
|
|
/>
|
|
<PkIconBtn size={28} variant="accent" disabled={!newItemName.trim()} ariaLabel={t('admin.packingTemplates.itemName')} onClick={() => handleAddItem(cat.id)}><Plus size={13} /></PkIconBtn>
|
|
<PkIconBtn size={28} ariaLabel={t('common.cancel')} onClick={() => { setAddingItemToCatId(null); setNewItemName('') }}><X size={13} /></PkIconBtn>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
|
|
{/* Add category */}
|
|
{addingCategory ? (
|
|
<div className="flex items-center gap-2">
|
|
<div className="min-w-0 flex-1">
|
|
<MAdminInput
|
|
autoFocus
|
|
value={newCatName}
|
|
onChange={e => setNewCatName(e.target.value)}
|
|
onKeyDown={e => { if (e.key === 'Enter') handleAddCategory(); if (e.key === 'Escape') { setAddingCategory(false); setNewCatName('') } }}
|
|
placeholder={t('admin.packingTemplates.categoryName')}
|
|
/>
|
|
</div>
|
|
<PkIconBtn variant="accent" ariaLabel={t('common.save')} onClick={handleAddCategory}><Check size={15} /></PkIconBtn>
|
|
<PkIconBtn ariaLabel={t('common.cancel')} onClick={() => { setAddingCategory(false); setNewCatName('') }}><X size={15} /></PkIconBtn>
|
|
</div>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
onClick={() => setAddingCategory(true)}
|
|
className="flex w-full items-center justify-center gap-2 rounded-xl border border-dashed border-[color:var(--m-rowbr)] px-3 py-[10px] font-geist text-[0.75rem] font-semibold text-m-muted"
|
|
>
|
|
<FolderPlus size={14} /> {t('admin.packingTemplates.addCategory')}
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</MAdminCard>
|
|
)
|
|
}
|