mirror of
https://github.com/PeterMaquiran/tvone.git
synced 2026-04-18 15:27:52 +00:00
add page
This commit is contained in:
@@ -0,0 +1,264 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
FolderTree,
|
||||
Edit3,
|
||||
Trash2,
|
||||
Plus,
|
||||
ChevronRight,
|
||||
ChevronDown,
|
||||
} from "lucide-react";
|
||||
import { getTree, getFlat, updateCategory, createCategory, deleteCategory } from "@/lib/categories.api";
|
||||
|
||||
/* ================= TYPES ================= */
|
||||
interface Category {
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
parentId?: string | null;
|
||||
children?: Category[];
|
||||
}
|
||||
|
||||
/* ================= API ================= */
|
||||
|
||||
/* ================= UTIL ================= */
|
||||
function slugify(text: string) {
|
||||
return text
|
||||
.toLowerCase()
|
||||
.trim()
|
||||
.replace(/\s+/g, "-")
|
||||
.replace(/[^a-z0-9-]/g, "");
|
||||
}
|
||||
|
||||
/* ================= PAGE ================= */
|
||||
export default function CategoriesPage() {
|
||||
const [tree, setTree] = useState<Category[]>([]);
|
||||
const [flat, setFlat] = useState<Category[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
|
||||
const [form, setForm] = useState({
|
||||
id: null as string | null,
|
||||
name: "",
|
||||
slug: "",
|
||||
parentId: null as string | null,
|
||||
});
|
||||
|
||||
/* ================= LOAD ================= */
|
||||
async function load() {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [t, f] = await Promise.all([getTree(), getFlat()]);
|
||||
setTree(t);
|
||||
setFlat(f);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, []);
|
||||
|
||||
/* ================= CRUD ================= */
|
||||
async function save() {
|
||||
const payload = {
|
||||
name: form.name,
|
||||
slug: form.slug || slugify(form.name),
|
||||
parentId: form.parentId,
|
||||
};
|
||||
|
||||
if (form.id) {
|
||||
await updateCategory(form.id, payload);
|
||||
} else {
|
||||
await createCategory(payload);
|
||||
}
|
||||
|
||||
closeModal();
|
||||
load();
|
||||
}
|
||||
|
||||
async function remove(id: string) {
|
||||
if (!confirm("Delete this category?")) return;
|
||||
await deleteCategory(id);
|
||||
load();
|
||||
}
|
||||
|
||||
/* ================= MODAL ================= */
|
||||
function openCreate(parentId?: string) {
|
||||
setForm({
|
||||
id: null,
|
||||
name: "",
|
||||
slug: "",
|
||||
parentId: parentId || null,
|
||||
});
|
||||
setModalOpen(true);
|
||||
}
|
||||
|
||||
function openEdit(cat: Category) {
|
||||
setForm({
|
||||
id: cat.id,
|
||||
name: cat.name,
|
||||
slug: cat.slug,
|
||||
parentId: cat.parentId || null,
|
||||
});
|
||||
setModalOpen(true);
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
setModalOpen(false);
|
||||
setForm({ id: null, name: "", slug: "", parentId: null });
|
||||
}
|
||||
|
||||
/* ================= TREE ================= */
|
||||
function TreeNode({
|
||||
node,
|
||||
level = 0,
|
||||
}: {
|
||||
node: Category;
|
||||
level?: number;
|
||||
}) {
|
||||
const [open, setOpen] = useState(true);
|
||||
|
||||
return (
|
||||
<div style={{ marginLeft: level * 14 }} className="border-l pl-3">
|
||||
|
||||
{/* NODE */}
|
||||
<div className="flex items-center justify-between py-2 group">
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
|
||||
<button onClick={() => setOpen(!open)}>
|
||||
{open ? (
|
||||
<ChevronDown size={14} />
|
||||
) : (
|
||||
<ChevronRight size={14} />
|
||||
)}
|
||||
</button>
|
||||
|
||||
<FolderTree size={14} className="text-blue-500" />
|
||||
|
||||
<span
|
||||
onClick={() => openEdit(node)}
|
||||
className="text-sm font-medium cursor-pointer hover:text-blue-600"
|
||||
>
|
||||
{node.name}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* ACTIONS */}
|
||||
<div className="flex gap-2 opacity-0 group-hover:opacity-100 transition">
|
||||
|
||||
<button
|
||||
onClick={() => openCreate(node.id)}
|
||||
className="text-green-600"
|
||||
>
|
||||
<Plus size={14} />
|
||||
</button>
|
||||
|
||||
<button onClick={() => openEdit(node)}>
|
||||
<Edit3 size={14} />
|
||||
</button>
|
||||
|
||||
<button onClick={() => remove(node.id)}>
|
||||
<Trash2 size={14} className="text-red-500" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CHILDREN */}
|
||||
{open &&
|
||||
node.children?.map((child) => (
|
||||
<TreeNode
|
||||
key={child.id}
|
||||
node={child}
|
||||
level={level + 1}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ================= UI ================= */
|
||||
return (
|
||||
<div className="p-8 bg-slate-50 min-h-screen">
|
||||
|
||||
{/* HEADER */}
|
||||
<div className="flex justify-between mb-6">
|
||||
<h1 className="text-xl font-semibold">
|
||||
Category Manager
|
||||
</h1>
|
||||
|
||||
<button
|
||||
onClick={() => openCreate()}
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded"
|
||||
>
|
||||
+ New Category
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* TREE */}
|
||||
<div className="bg-white border rounded-xl p-4">
|
||||
{loading ? (
|
||||
<p>Loading...</p>
|
||||
) : (
|
||||
tree.map((node) => (
|
||||
<TreeNode key={node.id} node={node} />
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* MODAL */}
|
||||
{modalOpen && (
|
||||
<div className="fixed inset-0 bg-black/40 flex items-center justify-center">
|
||||
|
||||
<div className="bg-white w-[420px] p-5 rounded-xl">
|
||||
|
||||
<h2 className="font-semibold mb-4">
|
||||
{form.id ? "Edit Category" : "Create Category"}
|
||||
</h2>
|
||||
|
||||
<input
|
||||
className="w-full border p-2 rounded mb-2"
|
||||
placeholder="Name"
|
||||
value={form.name}
|
||||
onChange={(e) =>
|
||||
setForm({
|
||||
...form,
|
||||
name: e.target.value,
|
||||
slug: slugify(e.target.value),
|
||||
})
|
||||
}
|
||||
/>
|
||||
|
||||
<input
|
||||
className="w-full border p-2 rounded mb-3"
|
||||
placeholder="Slug"
|
||||
value={form.slug}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, slug: e.target.value })
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
|
||||
<button onClick={closeModal}>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={save}
|
||||
className="bg-blue-600 text-white px-3 py-1 rounded"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,343 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Image from "next/image";
|
||||
import {
|
||||
LayoutDashboard,
|
||||
Newspaper,
|
||||
Users,
|
||||
BarChart3,
|
||||
Settings,
|
||||
HelpCircle,
|
||||
Tag,
|
||||
FolderTree,
|
||||
Edit3,
|
||||
Trash2,
|
||||
Plus,
|
||||
ChevronRight,
|
||||
ChevronDown,
|
||||
} from "lucide-react";
|
||||
import { createCategory, deleteCategory, getFlat, getTree, updateCategory } from "@/lib/categories.api";
|
||||
import { slugify } from "@/lib/slug";
|
||||
|
||||
/* ================= TYPES ================= */
|
||||
interface Category {
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
parentId?: string | null;
|
||||
children?: Category[];
|
||||
}
|
||||
|
||||
/* ================= PAGE ================= */
|
||||
export default function CategoriesPage() {
|
||||
const [tree, setTree] = useState<Category[]>([]);
|
||||
const [flat, setFlat] = useState<Category[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
|
||||
const [form, setForm] = useState({
|
||||
id: null as string | null,
|
||||
name: "",
|
||||
slug: "",
|
||||
parentId: null as string | null,
|
||||
});
|
||||
|
||||
/* ================= LOAD ================= */
|
||||
async function load() {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [t, f] = await Promise.all([getTree(), getFlat()]);
|
||||
setTree(t);
|
||||
setFlat(f);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, []);
|
||||
|
||||
/* ================= CRUD ================= */
|
||||
async function save() {
|
||||
const payload = {
|
||||
name: form.name,
|
||||
slug: form.slug || slugify(form.name),
|
||||
parentId: form.parentId,
|
||||
};
|
||||
|
||||
if (form.id) {
|
||||
await updateCategory(form.id, payload);
|
||||
} else {
|
||||
await createCategory(payload);
|
||||
}
|
||||
|
||||
closeModal();
|
||||
load();
|
||||
}
|
||||
|
||||
async function remove(id: string) {
|
||||
if (!confirm("Delete this category?")) return;
|
||||
await deleteCategory(id);
|
||||
load();
|
||||
}
|
||||
|
||||
/* ================= MODAL ================= */
|
||||
function openCreate(parentId?: string) {
|
||||
setForm({
|
||||
id: null,
|
||||
name: "",
|
||||
slug: "",
|
||||
parentId: parentId || null,
|
||||
});
|
||||
setModalOpen(true);
|
||||
}
|
||||
|
||||
function openEdit(cat: Category) {
|
||||
setForm({
|
||||
id: cat.id,
|
||||
name: cat.name,
|
||||
slug: cat.slug,
|
||||
parentId: cat.parentId || null,
|
||||
});
|
||||
setModalOpen(true);
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
setModalOpen(false);
|
||||
setForm({ id: null, name: "", slug: "", parentId: null });
|
||||
}
|
||||
|
||||
/* ================= TREE ================= */
|
||||
function TreeNode({
|
||||
node,
|
||||
level = 0,
|
||||
}: {
|
||||
node: Category;
|
||||
level?: number;
|
||||
}) {
|
||||
const [open, setOpen] = useState(true);
|
||||
|
||||
return (
|
||||
<div style={{ marginLeft: level * 14 }} className="border-l pl-3">
|
||||
|
||||
<div className="flex items-center justify-between py-2 group">
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
|
||||
<button onClick={() => setOpen(!open)}>
|
||||
{open ? (
|
||||
<ChevronDown size={14} />
|
||||
) : (
|
||||
<ChevronRight size={14} />
|
||||
)}
|
||||
</button>
|
||||
|
||||
<FolderTree size={14} className="text-blue-500" />
|
||||
|
||||
<span
|
||||
onClick={() => openEdit(node)}
|
||||
className="text-sm font-medium cursor-pointer hover:text-blue-600"
|
||||
>
|
||||
{node.name}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 opacity-0 group-hover:opacity-100 transition">
|
||||
|
||||
<button
|
||||
onClick={() => openCreate(node.id)}
|
||||
className="text-green-600"
|
||||
>
|
||||
<Plus size={14} />
|
||||
</button>
|
||||
|
||||
<button onClick={() => openEdit(node)}>
|
||||
<Edit3 size={14} />
|
||||
</button>
|
||||
|
||||
<button onClick={() => remove(node.id)}>
|
||||
<Trash2 size={14} className="text-red-500" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{open &&
|
||||
node.children?.map((child) => (
|
||||
<TreeNode
|
||||
key={child.id}
|
||||
node={child}
|
||||
level={level + 1}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ================= UI ================= */
|
||||
return (
|
||||
<div className="flex h-screen bg-slate-50 text-slate-900">
|
||||
|
||||
{/* ================= SIDEBAR ================= */}
|
||||
{/* Sidebar Lateral */}
|
||||
<aside className="w-64 backdrop-blur-xl bg-white/80 border-r border-slate-200 p-6 flex flex-col">
|
||||
<div className="flex items-center gap-2 mb-10 px-2">
|
||||
<div className="w-10 h-10 bg-white rounded-lg flex items-center justify-center font-bold italic">
|
||||
<Image src="/logo.png" alt="TVone" width={50} height={50} />
|
||||
</div>
|
||||
<span className="font-bold text-sm tracking-tight leading-tight uppercase">
|
||||
TVone<br/><span className="text-blue-600 text-[10px]">de Notícias</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 space-y-1">
|
||||
<NavItem icon={<LayoutDashboard size={18}/>} label="Painel" />
|
||||
<NavItem icon={<Newspaper size={18}/>} label="Meus Artigos" />
|
||||
<NavItem icon={<Users size={18}/>} label="Equipa" />
|
||||
<NavItem icon={<BarChart3 size={18}/>} label="Análises" />
|
||||
<NavItem icon={<Newspaper size={18}/>} label="Adicionar Notícia" active />
|
||||
<NavItem icon={<Settings size={18}/>} label="Definições" />
|
||||
<NavItem icon={<HelpCircle size={18}/>} label="Ajuda" />
|
||||
</nav>
|
||||
|
||||
{/* User Activity Feed */}
|
||||
<div className="mt-auto pt-6 border-t border-slate-200">
|
||||
<h4 className="text-[10px] font-bold uppercase text-slate-400 mb-4 px-2 tracking-widest">Atividade Recente</h4>
|
||||
<div className="space-y-3 px-2">
|
||||
<ActivityItem user="James Wilson" action="atualizou 'Mercado'" />
|
||||
<ActivityItem user="Sarah Johnson" action="criou 'Startups'" />
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* ================= MAIN ================= */}
|
||||
<div className="flex-1 flex flex-col">
|
||||
|
||||
{/* HEADER */}
|
||||
<header className="h-14 bg-white border-b flex items-center justify-between px-6">
|
||||
|
||||
<input
|
||||
placeholder="Search categories..."
|
||||
className="bg-slate-100 px-4 py-1 rounded-full text-sm w-72 outline-none"
|
||||
/>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
|
||||
<span className="text-sm text-slate-600">
|
||||
Admin
|
||||
</span>
|
||||
|
||||
<img
|
||||
src="https://ui-avatars.com/api/?name=Admin"
|
||||
className="w-8 h-8 rounded-full"
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* CONTENT */}
|
||||
<main className="p-6 overflow-y-auto">
|
||||
|
||||
{/* TOP BAR */}
|
||||
<div className="flex justify-between mb-6">
|
||||
|
||||
<h1 className="text-xl font-semibold">
|
||||
Categories
|
||||
</h1>
|
||||
|
||||
<button
|
||||
onClick={() => openCreate()}
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded"
|
||||
>
|
||||
+ New Category
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* TREE */}
|
||||
<div className="bg-white border rounded-xl p-4">
|
||||
{loading ? (
|
||||
<p>Loading...</p>
|
||||
) : (
|
||||
tree.map((node) => (
|
||||
<TreeNode key={node.id} node={node} />
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{/* ================= MODAL ================= */}
|
||||
{modalOpen && (
|
||||
<div className="fixed inset-0 bg-black/40 flex items-center justify-center">
|
||||
|
||||
<div className="bg-white w-[420px] p-5 rounded-xl">
|
||||
|
||||
<h2 className="font-semibold mb-4">
|
||||
{form.id ? "Edit Category" : "Create Category"}
|
||||
</h2>
|
||||
|
||||
<input
|
||||
className="w-full border p-2 rounded mb-2"
|
||||
placeholder="Name"
|
||||
value={form.name}
|
||||
onChange={(e) =>
|
||||
setForm({
|
||||
...form,
|
||||
name: e.target.value,
|
||||
slug: slugify(e.target.value),
|
||||
})
|
||||
}
|
||||
/>
|
||||
|
||||
<input
|
||||
className="w-full border p-2 rounded mb-3"
|
||||
placeholder="Slug"
|
||||
value={form.slug}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, slug: e.target.value })
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
|
||||
<button onClick={closeModal}>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={save}
|
||||
className="bg-blue-600 text-white px-3 py-1 rounded"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
// Componentes Auxiliares para Limpeza de Código
|
||||
const NavItem = ({ icon, label, active = false }: { icon: any, label: string, active?: boolean }) => (
|
||||
<div className={`flex items-center gap-3 px-3 py-2 rounded-xl text-sm font-medium transition-all cursor-pointer ${
|
||||
active ? 'bg-blue-600 text-white shadow-md shadow-blue-200' : 'text-slate-500 hover:bg-slate-100'
|
||||
}`}>
|
||||
{icon}
|
||||
{label}
|
||||
</div>
|
||||
);
|
||||
|
||||
const ActivityItem = ({ user, action }: { user: string, action: string }) => (
|
||||
<div className="flex gap-2">
|
||||
<div className="w-6 h-6 bg-slate-200 rounded-full shrink-0" />
|
||||
<p className="text-[10px] leading-tight text-slate-600">
|
||||
<span className="font-bold block text-slate-900">{user}</span> {action}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
@@ -0,0 +1,50 @@
|
||||
// export function CategoryModal({
|
||||
// open,
|
||||
// onClose,
|
||||
// form,
|
||||
// setForm,
|
||||
// onSave,
|
||||
// }: any) {
|
||||
// if (!open) return null;
|
||||
|
||||
// return (
|
||||
// <div className="fixed inset-0 bg-black/30 flex items-center justify-center">
|
||||
|
||||
// <div className="bg-white p-5 rounded-xl w-[400px]">
|
||||
|
||||
// <h2 className="font-semibold mb-3">
|
||||
// {form.id ? "Edit Category" : "New Category"}
|
||||
// </h2>
|
||||
|
||||
// <input
|
||||
// className="w-full border p-2 rounded mb-2"
|
||||
// placeholder="Name"
|
||||
// value={form.name}
|
||||
// onChange={(e) =>
|
||||
// setForm({ ...form, name: e.target.value })
|
||||
// }
|
||||
// />
|
||||
|
||||
// <input
|
||||
// className="w-full border p-2 rounded mb-3"
|
||||
// placeholder="Slug (auto)"
|
||||
// value={form.slug}
|
||||
// onChange={(e) =>
|
||||
// setForm({ ...form, slug: e.target.value })
|
||||
// }
|
||||
// />
|
||||
|
||||
// <div className="flex justify-end gap-2">
|
||||
// <button onClick={onClose}>Cancel</button>
|
||||
|
||||
// <button
|
||||
// onClick={onSave}
|
||||
// className="bg-blue-600 text-white px-3 py-1 rounded"
|
||||
// >
|
||||
// Save
|
||||
// </button>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
@@ -0,0 +1,116 @@
|
||||
// "use client";
|
||||
|
||||
// import React, { useState } from "react";
|
||||
// import {
|
||||
// FolderTree,
|
||||
// Edit3,
|
||||
// Trash2,
|
||||
// Plus,
|
||||
// ChevronRight,
|
||||
// ChevronDown,
|
||||
// } from "lucide-react";
|
||||
// import { Category } from "@/lib/categories.api";
|
||||
|
||||
// export function CategoryTree({
|
||||
// nodes,
|
||||
// onEdit,
|
||||
// onDelete,
|
||||
// onAddChild,
|
||||
// }: {
|
||||
// nodes: Category[];
|
||||
// onEdit: (c: Category) => void;
|
||||
// onDelete: (id: string) => void;
|
||||
// onAddChild: (parentId: string) => void;
|
||||
// }) {
|
||||
// return (
|
||||
// <div>
|
||||
// {nodes.map((node) => (
|
||||
// <TreeNode
|
||||
// key={node.id}
|
||||
// node={node}
|
||||
// onEdit={onEdit}
|
||||
// onDelete={onDelete}
|
||||
// onAddChild={onAddChild}
|
||||
// />
|
||||
// ))}
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
// function TreeNode({
|
||||
// node,
|
||||
// onEdit,
|
||||
// onDelete,
|
||||
// onAddChild,
|
||||
// }: {
|
||||
// node: Category;
|
||||
// onEdit: (c: Category) => void;
|
||||
// onDelete: (id: string) => void;
|
||||
// onAddChild: (parentId: string) => void;
|
||||
// }) {
|
||||
// const [open, setOpen] = useState(true);
|
||||
|
||||
// return (
|
||||
// <div className="ml-2 border-l pl-3">
|
||||
|
||||
// {/* NODE ROW */}
|
||||
// <div className="flex items-center justify-between py-2 group">
|
||||
|
||||
// <div className="flex items-center gap-2">
|
||||
|
||||
// <button onClick={() => setOpen(!open)}>
|
||||
// {open ? (
|
||||
// <ChevronDown size={14} />
|
||||
// ) : (
|
||||
// <ChevronRight size={14} />
|
||||
// )}
|
||||
// </button>
|
||||
|
||||
// <FolderTree size={14} className="text-blue-500" />
|
||||
|
||||
// {/* INLINE EDIT TRIGGER */}
|
||||
// <span
|
||||
// onClick={() => onEdit(node)}
|
||||
// className="text-sm font-medium cursor-pointer hover:text-blue-600"
|
||||
// >
|
||||
// {node.name}
|
||||
// </span>
|
||||
// </div>
|
||||
|
||||
// {/* ACTIONS (SHOW ON HOVER) */}
|
||||
// <div className="flex gap-2 opacity-0 group-hover:opacity-100 transition">
|
||||
|
||||
// <button
|
||||
// onClick={() => onAddChild(node.id)}
|
||||
// className="text-green-600"
|
||||
// >
|
||||
// <Plus size={14} />
|
||||
// </button>
|
||||
|
||||
// <button onClick={() => onEdit(node)}>
|
||||
// <Edit3 size={14} />
|
||||
// </button>
|
||||
|
||||
// <button onClick={() => onDelete(node.id)}>
|
||||
// <Trash2 size={14} className="text-red-500" />
|
||||
// </button>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// {/* CHILDREN */}
|
||||
// {open && node.children?.length ? (
|
||||
// <div>
|
||||
// {node.children.map((child) => (
|
||||
// <TreeNode
|
||||
// key={child.id}
|
||||
// node={child}
|
||||
// onEdit={onEdit}
|
||||
// onDelete={onDelete}
|
||||
// onAddChild={onAddChild}
|
||||
// />
|
||||
// ))}
|
||||
// </div>
|
||||
// ) : null}
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
@@ -0,0 +1,89 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
Category,
|
||||
getCategoriesTree,
|
||||
getCategoriesFlat,
|
||||
createCategory,
|
||||
updateCategory,
|
||||
deleteCategory,
|
||||
} from "@/lib/categories.api";
|
||||
import { slugify } from "@/lib/slug";
|
||||
|
||||
export function useCategories() {
|
||||
const [tree, setTree] = useState<Category[]>([]);
|
||||
const [flat, setFlat] = useState<Category[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const [form, setForm] = useState({
|
||||
id: null as string | null,
|
||||
name: "",
|
||||
slug: "",
|
||||
parentId: null as string | null,
|
||||
});
|
||||
|
||||
async function load() {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [t, f] = await Promise.all([
|
||||
getCategoriesTree(),
|
||||
getCategoriesFlat(),
|
||||
]);
|
||||
|
||||
setTree(t);
|
||||
setFlat(f);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, []);
|
||||
|
||||
async function save() {
|
||||
const payload = {
|
||||
name: form.name,
|
||||
slug: form.slug || slugify(form.name),
|
||||
parentId: form.parentId,
|
||||
};
|
||||
|
||||
if (form.id) {
|
||||
await updateCategory(form.id, payload);
|
||||
} else {
|
||||
await createCategory(payload);
|
||||
}
|
||||
|
||||
resetForm();
|
||||
load();
|
||||
}
|
||||
|
||||
async function remove(id: string) {
|
||||
await deleteCategory(id);
|
||||
load();
|
||||
}
|
||||
|
||||
function edit(cat: Category) {
|
||||
setForm({
|
||||
id: cat.id,
|
||||
name: cat.name,
|
||||
slug: cat.slug,
|
||||
parentId: cat.parentId || null,
|
||||
});
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
setForm({ id: null, name: "", slug: "", parentId: null });
|
||||
}
|
||||
|
||||
return {
|
||||
tree,
|
||||
flat,
|
||||
form,
|
||||
setForm,
|
||||
save,
|
||||
remove,
|
||||
edit,
|
||||
resetForm,
|
||||
loading,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
const API = "http://localhost:3001/categories";
|
||||
|
||||
export interface Category {
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
parentId?: string | null;
|
||||
children?: Category[];
|
||||
}
|
||||
|
||||
export async function getCategoriesTree(): Promise<Category[]> {
|
||||
const res = await fetch(`${API}/`);
|
||||
const data = await res.json();
|
||||
return Array.isArray(data) ? data : data?.data ?? [];
|
||||
}
|
||||
|
||||
export async function getCategoriesFlat(): Promise<Category[]> {
|
||||
const res = await fetch(API);
|
||||
const data = await res.json();
|
||||
return Array.isArray(data) ? data : [];
|
||||
}
|
||||
|
||||
export async function createCategory(payload: Partial<Category>) {
|
||||
return fetch(API, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
}
|
||||
|
||||
export async function updateCategory(id: string, payload: Partial<Category>) {
|
||||
return fetch(`${API}/${id}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
}
|
||||
|
||||
export async function deleteCategory(id: string) {
|
||||
return fetch(`${API}/${id}`, { method: "DELETE" });
|
||||
}
|
||||
|
||||
|
||||
export async function getTree(): Promise<Category[]> {
|
||||
const res = await fetch(`${API}/`);
|
||||
const data = await res.json();
|
||||
return Array.isArray(data) ? data : data?.data ?? [];
|
||||
}
|
||||
|
||||
export async function getFlat(): Promise<Category[]> {
|
||||
const res = await fetch(API);
|
||||
const data = await res.json();
|
||||
return Array.isArray(data) ? data : [];
|
||||
}
|
||||
+55
-55
@@ -1,63 +1,63 @@
|
||||
import fs from "fs";
|
||||
import path from "path";
|
||||
// import fs from "fs";
|
||||
// import path from "path";
|
||||
|
||||
export type SliderPhoto = { src: string; alt: string };
|
||||
// export type SliderPhoto = { src: string; alt: string };
|
||||
|
||||
function slugToAlt(filename: string): string {
|
||||
const base = filename.replace(/\.[^.]+$/, "");
|
||||
const words = base.replace(/[-_]+/g, " ").trim();
|
||||
return words || "Slide";
|
||||
}
|
||||
// function slugToAlt(filename: string): string {
|
||||
// const base = filename.replace(/\.[^.]+$/, "");
|
||||
// const words = base.replace(/[-_]+/g, " ").trim();
|
||||
// return words || "Slide";
|
||||
// }
|
||||
|
||||
export function parseManifest(data: unknown): SliderPhoto[] {
|
||||
if (!Array.isArray(data)) return [];
|
||||
const out: SliderPhoto[] = [];
|
||||
for (const item of data) {
|
||||
if (typeof item !== "object" || item === null || !("src" in item)) continue;
|
||||
const src = (item as { src: unknown }).src;
|
||||
if (typeof src !== "string" || !src.startsWith("/")) continue;
|
||||
const altRaw = (item as { alt?: unknown }).alt;
|
||||
const alt = typeof altRaw === "string" && altRaw.trim() ? altRaw.trim() : slugToAlt(src.split("/").pop() ?? "");
|
||||
out.push({ src, alt });
|
||||
}
|
||||
return out;
|
||||
}
|
||||
// export function parseManifest(data: unknown): SliderPhoto[] {
|
||||
// if (!Array.isArray(data)) return [];
|
||||
// const out: SliderPhoto[] = [];
|
||||
// for (const item of data) {
|
||||
// if (typeof item !== "object" || item === null || !("src" in item)) continue;
|
||||
// const src = (item as { src: unknown }).src;
|
||||
// if (typeof src !== "string" || !src.startsWith("/")) continue;
|
||||
// const altRaw = (item as { alt?: unknown }).alt;
|
||||
// const alt = typeof altRaw === "string" && altRaw.trim() ? altRaw.trim() : slugToAlt(src.split("/").pop() ?? "");
|
||||
// out.push({ src, alt });
|
||||
// }
|
||||
// return out;
|
||||
// }
|
||||
|
||||
const IMAGE_EXT = /\.(jpe?g|png|webp|gif|avif)$/i;
|
||||
// const IMAGE_EXT = /\.(jpe?g|png|webp|gif|avif)$/i;
|
||||
|
||||
function scanSliderDirectory(dir: string): SliderPhoto[] {
|
||||
let names: string[] = [];
|
||||
try {
|
||||
names = fs.readdirSync(dir);
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
return names
|
||||
.filter((f) => IMAGE_EXT.test(f))
|
||||
.sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }))
|
||||
.map((f) => ({
|
||||
src: `/slider/${f}`,
|
||||
alt: slugToAlt(f),
|
||||
}));
|
||||
}
|
||||
// function scanSliderDirectory(dir: string): SliderPhoto[] {
|
||||
// let names: string[] = [];
|
||||
// try {
|
||||
// names = fs.readdirSync(dir);
|
||||
// } catch {
|
||||
// return [];
|
||||
// }
|
||||
// return names
|
||||
// .filter((f) => IMAGE_EXT.test(f))
|
||||
// .sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }))
|
||||
// .map((f) => ({
|
||||
// src: `/slider/${f}`,
|
||||
// alt: slugToAlt(f),
|
||||
// }));
|
||||
// }
|
||||
|
||||
/**
|
||||
* Reads `public/slider/manifest.json` when present (full control: order + alt).
|
||||
* Otherwise scans `public/slider` for image files (drop-in updates, no code edits).
|
||||
*/
|
||||
export function readSliderPhotos(): SliderPhoto[] {
|
||||
const dir = path.join(process.cwd(), "public", "slider");
|
||||
if (!fs.existsSync(dir)) return [];
|
||||
// /**
|
||||
// * Reads `public/slider/manifest.json` when present (full control: order + alt).
|
||||
// * Otherwise scans `public/slider` for image files (drop-in updates, no code edits).
|
||||
// */
|
||||
// export function readSliderPhotos(): SliderPhoto[] {
|
||||
// const dir = path.join(process.cwd(), "public", "slider");
|
||||
// if (!fs.existsSync(dir)) return [];
|
||||
|
||||
const manifestPath = path.join(dir, "manifest.json");
|
||||
if (fs.existsSync(manifestPath)) {
|
||||
try {
|
||||
const raw = JSON.parse(fs.readFileSync(manifestPath, "utf8")) as unknown;
|
||||
return parseManifest(raw);
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
// const manifestPath = path.join(dir, "manifest.json");
|
||||
// if (fs.existsSync(manifestPath)) {
|
||||
// try {
|
||||
// const raw = JSON.parse(fs.readFileSync(manifestPath, "utf8")) as unknown;
|
||||
// return parseManifest(raw);
|
||||
// } catch {
|
||||
// return [];
|
||||
// }
|
||||
// }
|
||||
|
||||
return scanSliderDirectory(dir);
|
||||
}
|
||||
// return scanSliderDirectory(dir);
|
||||
// }
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
export function slugify(text: string) {
|
||||
return text
|
||||
.toLowerCase()
|
||||
.trim()
|
||||
.replace(/\s+/g, "-")
|
||||
.replace(/[^a-z0-9-]/g, "");
|
||||
}
|
||||
@@ -9,6 +9,9 @@
|
||||
"lint": "eslint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@react-oauth/google": "^0.13.5",
|
||||
"@tinymce/tinymce-react": "^6.3.0",
|
||||
"framer-motion": "^12.38.0",
|
||||
|
||||
Generated
+56
@@ -8,6 +8,15 @@ importers:
|
||||
|
||||
.:
|
||||
dependencies:
|
||||
'@dnd-kit/core':
|
||||
specifier: ^6.3.1
|
||||
version: 6.3.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
|
||||
'@dnd-kit/sortable':
|
||||
specifier: ^10.0.0
|
||||
version: 10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)
|
||||
'@dnd-kit/utilities':
|
||||
specifier: ^3.2.2
|
||||
version: 3.2.2(react@19.2.4)
|
||||
'@react-oauth/google':
|
||||
specifier: ^0.13.5
|
||||
version: 0.13.5(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
|
||||
@@ -143,6 +152,28 @@ packages:
|
||||
resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
|
||||
'@dnd-kit/accessibility@3.1.1':
|
||||
resolution: {integrity: sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==}
|
||||
peerDependencies:
|
||||
react: '>=16.8.0'
|
||||
|
||||
'@dnd-kit/core@6.3.1':
|
||||
resolution: {integrity: sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==}
|
||||
peerDependencies:
|
||||
react: '>=16.8.0'
|
||||
react-dom: '>=16.8.0'
|
||||
|
||||
'@dnd-kit/sortable@10.0.0':
|
||||
resolution: {integrity: sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==}
|
||||
peerDependencies:
|
||||
'@dnd-kit/core': ^6.3.0
|
||||
react: '>=16.8.0'
|
||||
|
||||
'@dnd-kit/utilities@3.2.2':
|
||||
resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==}
|
||||
peerDependencies:
|
||||
react: '>=16.8.0'
|
||||
|
||||
'@emnapi/core@1.9.1':
|
||||
resolution: {integrity: sha512-mukuNALVsoix/w1BJwFzwXBN/dHeejQtuVzcDsfOEsdpCumXb/E9j8w11h5S54tT1xhifGfbbSm/ICrObRb3KA==}
|
||||
|
||||
@@ -2154,6 +2185,31 @@ snapshots:
|
||||
'@babel/helper-string-parser': 7.27.1
|
||||
'@babel/helper-validator-identifier': 7.28.5
|
||||
|
||||
'@dnd-kit/accessibility@3.1.1(react@19.2.4)':
|
||||
dependencies:
|
||||
react: 19.2.4
|
||||
tslib: 2.8.1
|
||||
|
||||
'@dnd-kit/core@6.3.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
|
||||
dependencies:
|
||||
'@dnd-kit/accessibility': 3.1.1(react@19.2.4)
|
||||
'@dnd-kit/utilities': 3.2.2(react@19.2.4)
|
||||
react: 19.2.4
|
||||
react-dom: 19.2.4(react@19.2.4)
|
||||
tslib: 2.8.1
|
||||
|
||||
'@dnd-kit/sortable@10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)':
|
||||
dependencies:
|
||||
'@dnd-kit/core': 6.3.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
|
||||
'@dnd-kit/utilities': 3.2.2(react@19.2.4)
|
||||
react: 19.2.4
|
||||
tslib: 2.8.1
|
||||
|
||||
'@dnd-kit/utilities@3.2.2(react@19.2.4)':
|
||||
dependencies:
|
||||
react: 19.2.4
|
||||
tslib: 2.8.1
|
||||
|
||||
'@emnapi/core@1.9.1':
|
||||
dependencies:
|
||||
'@emnapi/wasi-threads': 1.2.0
|
||||
|
||||
Reference in New Issue
Block a user