added project, material, sources to portal
This commit is contained in:
parent
c7511b98fc
commit
45d4e08cd8
9 changed files with 90 additions and 282 deletions
|
|
@ -1,9 +1,18 @@
|
||||||
// app/portal/laser-sources/page.tsx
|
// app/portal/laser-sources/page.tsx
|
||||||
export default function LaserSourcesPage() {
|
import dynamic from "next/dynamic";
|
||||||
|
|
||||||
|
export const metadata = { title: "MakerDash • Laser Sources" };
|
||||||
|
|
||||||
|
// Mount the existing canonical page (adjust path if needed)
|
||||||
|
const LasersView = dynamic(() => import("@/app/lasers/page"), { ssr: false });
|
||||||
|
|
||||||
|
export default function LaserSourcesPortalPage() {
|
||||||
return (
|
return (
|
||||||
<div className="rounded-lg border p-6">
|
<div className="rounded-lg border p-6">
|
||||||
<h2 className="text-xl font-semibold mb-2">Laser Sources</h2>
|
<h2 className="mb-4 text-xl font-semibold">Laser Sources</h2>
|
||||||
<p className="opacity-80">WIP: list & manage sources here.</p>
|
<div className="rounded-md border p-4">
|
||||||
|
<LasersView />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,13 @@
|
||||||
// app/portal/materials/page.tsx
|
// app/portal/materials/page.tsx
|
||||||
export default function MaterialsPage() {
|
import MaterialsSwitcher from "@/components/portal/MaterialsSwitcher";
|
||||||
|
|
||||||
|
export const metadata = { title: "MakerDash • Materials" };
|
||||||
|
|
||||||
|
export default function MaterialsPortalPage() {
|
||||||
return (
|
return (
|
||||||
<div className="rounded-lg border p-6">
|
<div className="rounded-lg border p-6">
|
||||||
<h2 className="text-xl font-semibold mb-2">Materials</h2>
|
<h2 className="mb-4 text-xl font-semibold">Materials</h2>
|
||||||
<p className="opacity-80">WIP: materials library management.</p>
|
<MaterialsSwitcher />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,18 @@
|
||||||
// app/portal/projects/page.tsx
|
// app/portal/projects/page.tsx
|
||||||
export default function ProjectsPage() {
|
import dynamic from "next/dynamic";
|
||||||
|
|
||||||
|
export const metadata = { title: "MakerDash • Projects" };
|
||||||
|
|
||||||
|
// Mount the existing canonical page (adjust path if needed)
|
||||||
|
const ProjectsView = dynamic(() => import("@/app/projects/page"), { ssr: false });
|
||||||
|
|
||||||
|
export default function ProjectsPortalPage() {
|
||||||
return (
|
return (
|
||||||
<div className="rounded-lg border p-6">
|
<div className="rounded-lg border p-6">
|
||||||
<h2 className="text-xl font-semibold mb-2">Projects</h2>
|
<h2 className="mb-4 text-xl font-semibold">Projects</h2>
|
||||||
<p className="opacity-80">WIP: authenticated project list & details.</p>
|
<div className="rounded-md border p-4">
|
||||||
|
<ProjectsView />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,273 +0,0 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import { useEffect, useState, useMemo } from "react";
|
|
||||||
import { useSearchParams } from "next/navigation";
|
|
||||||
import Link from "next/link";
|
|
||||||
import Image from "next/image";
|
|
||||||
|
|
||||||
export default function ProjectsPage() {
|
|
||||||
const searchParams = useSearchParams();
|
|
||||||
const initialQuery = searchParams.get("query") || "";
|
|
||||||
|
|
||||||
const [query, setQuery] = useState(initialQuery);
|
|
||||||
const [debouncedQuery, setDebouncedQuery] = useState(initialQuery);
|
|
||||||
const [projects, setProjects] = useState<any[]>([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [categories] = useState([
|
|
||||||
"assets",
|
|
||||||
"documents",
|
|
||||||
"fixtures",
|
|
||||||
"projects",
|
|
||||||
"templates",
|
|
||||||
"test files",
|
|
||||||
"tools"
|
|
||||||
]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const timer = setTimeout(() => setDebouncedQuery(query), 300);
|
|
||||||
return () => clearTimeout(timer);
|
|
||||||
}, [query]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetch(
|
|
||||||
`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/projects?fields=submission_id,title,uploader,category,tags,p_image.filename_disk,p_image.title&limit=-1fields=*.*`
|
|
||||||
)
|
|
||||||
.then((res) => res.json())
|
|
||||||
.then((data) => {
|
|
||||||
setProjects(data.data || []);
|
|
||||||
setLoading(false);
|
|
||||||
})
|
|
||||||
.catch(() => setLoading(false));
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const highlight = (text: string) => {
|
|
||||||
if (!debouncedQuery) return text;
|
|
||||||
const regex = new RegExp(`(${debouncedQuery})`, "gi");
|
|
||||||
return text?.replace(regex, '<mark>$1</mark>');
|
|
||||||
};
|
|
||||||
|
|
||||||
const normalize = (str: string) => str?.toLowerCase().replace(/[_\s]/g, "");
|
|
||||||
|
|
||||||
const filtered = useMemo(() => {
|
|
||||||
const q = normalize(debouncedQuery);
|
|
||||||
return projects.filter((entry) => {
|
|
||||||
const fieldsToSearch = [
|
|
||||||
entry.title ?? "",
|
|
||||||
entry.uploader ?? "",
|
|
||||||
entry.category ?? "",
|
|
||||||
Array.isArray(entry.tags) ? entry.tags.join(" ") : "",
|
|
||||||
];
|
|
||||||
return fieldsToSearch.filter(Boolean).some((field) =>
|
|
||||||
normalize(field).includes(q)
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}, [projects, debouncedQuery]);
|
|
||||||
|
|
||||||
const tagCounts = useMemo(() => {
|
|
||||||
const counts: Record<string, number> = {};
|
|
||||||
projects.forEach((p) => {
|
|
||||||
if (Array.isArray(p.tags)) {
|
|
||||||
p.tags.forEach((tag) => {
|
|
||||||
counts[tag] = (counts[tag] || 0) + 1;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return counts;
|
|
||||||
}, [projects]);
|
|
||||||
|
|
||||||
const popularTags = Object.entries(tagCounts)
|
|
||||||
.sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))
|
|
||||||
.slice(0, 10)
|
|
||||||
.map(([tag]) => tag);
|
|
||||||
|
|
||||||
const recentTags = [...projects]
|
|
||||||
.sort((a, b) => b.submission_id - a.submission_id)
|
|
||||||
.slice(0, 10)
|
|
||||||
.flatMap((p) => p.tags || [])
|
|
||||||
.filter((tag, i, self) => self.indexOf(tag) === i)
|
|
||||||
.slice(0, 10);
|
|
||||||
|
|
||||||
const uniqueUploaders = new Set(projects.map((p) => p.uploader).filter(Boolean)).size;
|
|
||||||
const totalTags = Object.keys(tagCounts).length;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="p-6 max-w-7xl mx-auto">
|
|
||||||
<style jsx global>{`
|
|
||||||
mark {
|
|
||||||
background: #ffde59;
|
|
||||||
color: #242424;
|
|
||||||
padding: 0 2px;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
.card-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
.project-card {
|
|
||||||
display: flex;
|
|
||||||
background-color: #242424;
|
|
||||||
color: var(--card-foreground);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
overflow: hidden;
|
|
||||||
height: 150px;
|
|
||||||
}
|
|
||||||
.project-image {
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
.project-content {
|
|
||||||
padding: 0.75rem;
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.project-tags {
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.project-tags span,
|
|
||||||
.flex.flex-wrap span {
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 0.25rem;
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
padding: 0.25rem 0.5rem;
|
|
||||||
background-color: var(--muted);
|
|
||||||
color: var(--foreground);
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background-color 0.2s ease;
|
|
||||||
}
|
|
||||||
.project-tags span:hover,
|
|
||||||
.flex.flex-wrap span:hover {
|
|
||||||
background-color: #ffde59;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
`}</style>
|
|
||||||
|
|
||||||
<div className="grid md:grid-cols-2 xl:grid-cols-3 gap-4 mb-6">
|
|
||||||
<div className="card bg-card text-card-foreground p-4">
|
|
||||||
<h1 className="text-xl font-bold mb-2">Community Projects</h1>
|
|
||||||
<input
|
|
||||||
type="search"
|
|
||||||
value={query}
|
|
||||||
onChange={(e) => setQuery(e.target.value)}
|
|
||||||
placeholder="Search projects..."
|
|
||||||
className="w-full dark:bg-background border border-border rounded-md p-2"
|
|
||||||
/>
|
|
||||||
<Link
|
|
||||||
href="/"
|
|
||||||
className="inline-block mt-4 px-4 py-2 bg-accent text-background rounded-md text-sm"
|
|
||||||
>
|
|
||||||
← Back to Main Menu
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<div className="card bg-card text-card-foreground p-4">
|
|
||||||
<h2 className="text-md font-semibold mb-2">Popular Tags</h2>
|
|
||||||
{popularTags.length > 0 ? (
|
|
||||||
<div className="flex flex-wrap">
|
|
||||||
{popularTags.map((tag, i) => (
|
|
||||||
<span key={i} onClick={() => setQuery(tag)} title={tag}>
|
|
||||||
{tag}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<p className="text-sm text-muted-foreground">No tags yet.</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="card bg-card text-card-foreground p-4">
|
|
||||||
<h2 className="text-md font-semibold mb-2">Recent Tags</h2>
|
|
||||||
{recentTags.length > 0 ? (
|
|
||||||
<div className="flex flex-wrap">
|
|
||||||
{recentTags.map((tag, i) => (
|
|
||||||
<span key={i} onClick={() => setQuery(tag)} title={tag}>
|
|
||||||
{tag}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<p className="text-sm text-muted-foreground">No recent tags.</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="card bg-card text-card-foreground p-4">
|
|
||||||
<h2 className="text-md font-semibold mb-2">Project Stats</h2>
|
|
||||||
<p className="text-sm text-muted-foreground">Total Projects: {projects.length}</p>
|
|
||||||
<p className="text-sm text-muted-foreground">Unique Uploaders: {uniqueUploaders}</p>
|
|
||||||
<p className="text-sm text-muted-foreground">Total Tags: {totalTags}</p>
|
|
||||||
</div>
|
|
||||||
<div className="card bg-card text-card-foreground p-4">
|
|
||||||
<h2 className="text-md font-semibold mb-2">Browse by Category</h2>
|
|
||||||
<div className="flex flex-wrap">
|
|
||||||
{categories.map((cat, i) => (
|
|
||||||
<span key={i} onClick={() => setQuery(cat)}>
|
|
||||||
{cat === "test_files" ? "test files" : cat}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="card bg-card text-card-foreground p-4 flex flex-col justify-between">
|
|
||||||
<div>
|
|
||||||
<h2 className="text-md font-semibold mb-2">Submit a Project</h2>
|
|
||||||
<p className="text-sm text-muted-foreground mb-2">
|
|
||||||
Have a cool design, tool, or jig to share? Submit it to the community database.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<button disabled className="bg-muted text-foreground text-sm px-4 py-2 rounded opacity-50 cursor-not-allowed">
|
|
||||||
Coming Soon
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr className="my-8 border-border" />
|
|
||||||
|
|
||||||
{loading ? (
|
|
||||||
<p className="text-muted">Loading projects...</p>
|
|
||||||
) : filtered.length === 0 ? (
|
|
||||||
<p className="text-muted">No projects found.</p>
|
|
||||||
) : (
|
|
||||||
<div className="card-grid">
|
|
||||||
{filtered.map((project) => (
|
|
||||||
<div key={project.submission_id} className="project-card">
|
|
||||||
<Image
|
|
||||||
src={`https://forms.lasereverything.net/assets/${project.p_image?.filename_disk}`}
|
|
||||||
alt={project.p_image?.title || "Project image"}
|
|
||||||
width={150}
|
|
||||||
height={150}
|
|
||||||
className="project-image"
|
|
||||||
/>
|
|
||||||
<div className="project-content">
|
|
||||||
<div>
|
|
||||||
<Link href={`/projects/${project.submission_id}`} className="text-base font-semibold text-accent underline">
|
|
||||||
{project.title || "Untitled"}
|
|
||||||
</Link>
|
|
||||||
<p className="text-xs text-muted-foreground">Uploaded by: {project.uploader || "—"}</p>
|
|
||||||
<p className="text-xs text-muted-foreground">Category: {project.category || "—"}</p>
|
|
||||||
</div>
|
|
||||||
<div className="project-tags">
|
|
||||||
{Array.isArray(project.tags) && project.tags.length > 0
|
|
||||||
? project.tags.map((tag, i) => (
|
|
||||||
<span
|
|
||||||
key={i}
|
|
||||||
onClick={() => setQuery(tag)}
|
|
||||||
title={tag}
|
|
||||||
>
|
|
||||||
{tag}
|
|
||||||
</span>
|
|
||||||
))
|
|
||||||
: ""}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
59
components/portal/MaterialsSwitcher.tsx
Normal file
59
components/portal/MaterialsSwitcher.tsx
Normal file
|
|
@ -0,0 +1,59 @@
|
||||||
|
// components/portal/MaterialsSwitcher.tsx
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useRouter, useSearchParams } from "next/navigation";
|
||||||
|
import dynamic from "next/dynamic";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
// Reuse the *existing* canonical pages.
|
||||||
|
// Adjust paths if your folders differ.
|
||||||
|
const MaterialsPanel = dynamic(() => import("@/app/materials/materials/page"), { ssr: false });
|
||||||
|
const CoatingsPanel = dynamic(() => import("@/app/materials/materials-coatings/page"), { ssr: false });
|
||||||
|
|
||||||
|
const TABS = [
|
||||||
|
{ key: "materials", label: "Materials" },
|
||||||
|
{ key: "materials-coatings", label: "Coatings" },
|
||||||
|
];
|
||||||
|
|
||||||
|
function Panel({ tab }: { tab: string }) {
|
||||||
|
switch (tab) {
|
||||||
|
case "materials": return <MaterialsPanel />;
|
||||||
|
case "materials-coatings": return <CoatingsPanel />;
|
||||||
|
default: return <MaterialsPanel />;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function MaterialsSwitcher() {
|
||||||
|
const router = useRouter();
|
||||||
|
const sp = useSearchParams();
|
||||||
|
const active = sp.get("t") || "materials";
|
||||||
|
|
||||||
|
function setTab(nextKey: string) {
|
||||||
|
const q = new URLSearchParams(sp.toString());
|
||||||
|
q.set("t", nextKey);
|
||||||
|
router.replace(`/portal/materials?${q.toString()}`, { scroll: false });
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="mb-4 flex flex-wrap items-center gap-2">
|
||||||
|
{TABS.map(({ key, label }) => (
|
||||||
|
<button
|
||||||
|
key={key}
|
||||||
|
onClick={() => setTab(key)}
|
||||||
|
className={cn(
|
||||||
|
"rounded-md border px-3 py-1.5 text-sm transition",
|
||||||
|
active === key ? "bg-primary text-primary-foreground" : "hover:bg-muted"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="rounded-md border p-4">
|
||||||
|
<Panel tab={active} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue