166 lines
7.3 KiB
TypeScript
166 lines
7.3 KiB
TypeScript
"use client";
|
|
import { useEffect, useState, ChangeEvent, FormEvent } from "react";
|
|
|
|
type Mapping = {
|
|
id: number;
|
|
feedname: string;
|
|
affiliatecategory: string;
|
|
buildercategoryid: number;
|
|
notes?: string;
|
|
};
|
|
|
|
type MappingForm = {
|
|
feedname: string;
|
|
affiliatecategory: string;
|
|
buildercategoryid: string;
|
|
notes?: string;
|
|
};
|
|
|
|
export default function CategoryMappingAdmin() {
|
|
const [mappings, setMappings] = useState<Mapping[]>([]);
|
|
const [form, setForm] = useState<MappingForm>({ feedname: "", affiliatecategory: "", buildercategoryid: "", notes: "" });
|
|
const [editingId, setEditingId] = useState<number | null>(null);
|
|
const [editForm, setEditForm] = useState<MappingForm>({ feedname: "", affiliatecategory: "", buildercategoryid: "", notes: "" });
|
|
const [productCategories, setProductCategories] = useState<any[]>([]);
|
|
|
|
// Fetch all mappings
|
|
const fetchMappings = async () => {
|
|
const res = await fetch("/api/category-mapping");
|
|
const data = await res.json();
|
|
setMappings(data.data || []);
|
|
};
|
|
|
|
const fetchProductCategories = async () => {
|
|
const res = await fetch("/api/product-categories");
|
|
const data = await res.json();
|
|
setProductCategories(data.data || []);
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchMappings();
|
|
fetchProductCategories();
|
|
}, []);
|
|
|
|
// Add new mapping
|
|
const handleAdd = async (e: FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
await fetch("/api/category-mapping", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
...form,
|
|
buildercategoryid: parseInt(form.buildercategoryid, 10)
|
|
}),
|
|
});
|
|
setForm({ feedname: "", affiliatecategory: "", buildercategoryid: "", notes: "" });
|
|
fetchMappings();
|
|
};
|
|
|
|
// Edit mapping
|
|
const handleEdit = (mapping: Mapping) => {
|
|
setEditingId(mapping.id);
|
|
setEditForm({ ...mapping, buildercategoryid: mapping.buildercategoryid.toString() });
|
|
};
|
|
|
|
const handleUpdate = async (e: FormEvent<HTMLButtonElement>) => {
|
|
e.preventDefault();
|
|
await fetch("/api/category-mapping", {
|
|
method: "PUT",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ ...editForm, buildercategoryid: parseInt(editForm.buildercategoryid, 10), id: editingId }),
|
|
});
|
|
setEditingId(null);
|
|
fetchMappings();
|
|
};
|
|
|
|
// Delete mapping
|
|
const handleDelete = async (id: number) => {
|
|
await fetch("/api/category-mapping", {
|
|
method: "DELETE",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ id }),
|
|
});
|
|
fetchMappings();
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-3xl mx-auto py-8">
|
|
<h1 className="text-2xl font-bold mb-4">Affiliate Category Mapping Admin</h1>
|
|
<div className="mb-8">
|
|
<h2 className="text-xl font-semibold mb-2">AR15 Category Hierarchy</h2>
|
|
<table className="min-w-full border text-sm">
|
|
<thead>
|
|
<tr className="bg-zinc-100">
|
|
<th className="border px-2 py-1">ID</th>
|
|
<th className="border px-2 py-1">Category</th>
|
|
<th className="border px-2 py-1">Parent</th>
|
|
<th className="border px-2 py-1">Type</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{productCategories
|
|
.filter(cat => cat.type === 'AR15')
|
|
.map(cat => {
|
|
const parent = productCategories.find(p => p.id === cat.parent_category_id);
|
|
return (
|
|
<tr key={cat.id}>
|
|
<td className="border px-2 py-1">{cat.id}</td>
|
|
<td className="border px-2 py-1">{cat.name}</td>
|
|
<td className="border px-2 py-1">{parent ? parent.name : 'Top Level'}</td>
|
|
<td className="border px-2 py-1">{cat.type}</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<form onSubmit={handleAdd} className="flex gap-2 mb-6">
|
|
<input className="border px-2 py-1 rounded w-32" placeholder="Feed Name" value={form.feedname} onChange={e => setForm(f => ({ ...f, feedname: e.target.value }))} required />
|
|
<input className="border px-2 py-1 rounded w-48" placeholder="Affiliate Category" value={form.affiliatecategory} onChange={e => setForm(f => ({ ...f, affiliatecategory: e.target.value }))} required />
|
|
<input className="border px-2 py-1 rounded w-40" placeholder="Builder Category ID" value={form.buildercategoryid} onChange={e => setForm(f => ({ ...f, buildercategoryid: e.target.value }))} required />
|
|
<input className="border px-2 py-1 rounded w-32" placeholder="Notes" value={form.notes} onChange={e => setForm(f => ({ ...f, notes: e.target.value }))} />
|
|
<button className="bg-blue-600 text-white px-3 py-1 rounded" type="submit">Add</button>
|
|
</form>
|
|
<table className="min-w-full border text-sm">
|
|
<thead>
|
|
<tr className="bg-zinc-100">
|
|
<th className="border px-2 py-1">Feed Name</th>
|
|
<th className="border px-2 py-1">Affiliate Category</th>
|
|
<th className="border px-2 py-1">Builder Category ID</th>
|
|
<th className="border px-2 py-1">Notes</th>
|
|
<th className="border px-2 py-1">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{mappings.map((m) => (
|
|
<tr key={m.id}>
|
|
{editingId === m.id ? (
|
|
<>
|
|
<td className="border px-2 py-1"><input className="border px-1 rounded w-28" value={editForm.feedname} onChange={e => setEditForm(f => ({ ...f, feedname: e.target.value }))} /></td>
|
|
<td className="border px-2 py-1"><input className="border px-1 rounded w-40" value={editForm.affiliatecategory} onChange={e => setEditForm(f => ({ ...f, affiliatecategory: e.target.value }))} /></td>
|
|
<td className="border px-2 py-1"><input className="border px-1 rounded w-32" value={editForm.buildercategoryid} onChange={e => setEditForm(f => ({ ...f, buildercategoryid: e.target.value }))} /></td>
|
|
<td className="border px-2 py-1"><input className="border px-1 rounded w-24" value={editForm.notes} onChange={e => setEditForm(f => ({ ...f, notes: e.target.value }))} /></td>
|
|
<td className="border px-2 py-1">
|
|
<button className="bg-green-600 text-white px-2 py-1 rounded mr-1" onClick={handleUpdate}>Save</button>
|
|
<button className="bg-gray-400 text-white px-2 py-1 rounded" onClick={() => setEditingId(null)}>Cancel</button>
|
|
</td>
|
|
</>
|
|
) : (
|
|
<>
|
|
<td className="border px-2 py-1">{m.feedname}</td>
|
|
<td className="border px-2 py-1">{m.affiliatecategory}</td>
|
|
<td className="border px-2 py-1">{m.buildercategoryid}</td>
|
|
<td className="border px-2 py-1">{m.notes}</td>
|
|
<td className="border px-2 py-1">
|
|
<button className="bg-yellow-500 text-white px-2 py-1 rounded mr-1" onClick={() => handleEdit(m)}>Edit</button>
|
|
<button className="bg-red-600 text-white px-2 py-1 rounded" onClick={() => handleDelete(m.id)}>Delete</button>
|
|
</td>
|
|
</>
|
|
)}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|