makearmy/makearmy-app
1
0
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

portal(settings): embed authed SettingsSubmit form in Add tab; switcher remembers last data tab

Browse source
This commit is contained in:
makearmy 2025-09-28 01:38:08 -04:00
parent e2d5042e60
commit e6c37d0b14
6 changed files with 1595 additions and 823 deletions
Download patch file Download diff file Expand all files Collapse all files

60
components/portal/SettingsSwitcher.tsx
View file

@ -5,21 +5,42 @@ import { useRouter, useSearchParams } from "next/navigation";
import dynamic from "next/dynamic";
import { cn } from "@/lib/utils";
// Use existing canonical pages; dynamic imports in a client component are OK
// Existing canonical pages
const FiberPanel = dynamic(() => import("@/app/settings/fiber/page"), { ssr: false });
const UVPanel = dynamic(() => import("@/app/settings/uv/page"), { ssr: false });
const CO2GalvoPanel = dynamic(() => import("@/app/settings/co2-galvo/page"), { ssr: false });
const CO2GantryPanel = dynamic(() => import("@/app/settings/co2-gantry/page"), { ssr: false });
const TABS = [
// NEW: embed the submission form in the "Add" tab
const SettingsSubmit = dynamic(
() => import("@/app/components/forms/SettingsSubmit"),
{ ssr: false }
);
type DataTab = "fiber" | "uv" | "co2-gantry" | "co2-galvo";
type Tab = DataTab | "add";
const TABS: { key: Tab; label: string }[] = [
{ key: "fiber", label: "Fiber" },
{ key: "uv", label: "UV" },
{ key: "co2-gantry", label: "CO₂ Gantry" },
{ key: "co2-galvo", label: "CO₂ Galvo" },
{ key: "add", label: "Add Setting" }, // new
{ key: "add", label: "Add Setting" },
];
function Panel({ tab }: { tab: string }) {
const isDataTab = (k: string): k is DataTab =>
k === "fiber" || k === "uv" || k === "co2-gantry" || k === "co2-galvo";
const tabToTarget: Record<DataTab,
"settings_fiber" | "settings_uv" | "settings_co2gan" | "settings_co2gal"
> = {
fiber: "settings_fiber",
uv: "settings_uv",
"co2-gantry": "settings_co2gan",
"co2-galvo": "settings_co2gal",
};
function Panel({ tab, lastDataTab }: { tab: Tab; lastDataTab: DataTab }) {
switch (tab) {
case "fiber": return <FiberPanel />;
case "uv": return <UVPanel />;
@ -29,14 +50,7 @@ function Panel({ tab }: { tab: string }) {
return (
<div className="rounded-md border p-4 space-y-3">
<h3 className="font-semibold">Add Setting</h3>
<div className="text-sm opacity-70">
Submission form will be embedded here. We’ll retrofit your existing public submission to require auth and record owner.
</div>
<ul className="text-sm list-disc pl-5 opacity-70">
<li>Route: <code>POST /api/my/settings/:type</code> (fiber|uv|co2-gantry|co2-galvo)</li>
<li>Server adds <code>owner</code> using <code>/users/me</code> via bearer</li>
<li>On success: toast + refresh current view tab</li>
</ul>
<SettingsSubmit initialTarget={tabToTarget[lastDataTab]} />
</div>
);
default:
@ -47,11 +61,27 @@ function Panel({ tab }: { tab: string }) {
export default function SettingsSwitcher() {
const router = useRouter();
const sp = useSearchParams();
const active = sp.get("t") || "fiber";
function setTab(nextKey: string) {
const activeRaw = (sp.get("t") || "fiber").toLowerCase();
const active: Tab = (TABS.some(t => t.key === activeRaw) ? activeRaw : "fiber") as Tab;
// last data tab is taken from ?last=… (or fallback to current active if it’s a data tab)
const lastParam = (sp.get("last") || (isDataTab(active) ? active : "fiber")).toLowerCase();
const lastDataTab: DataTab = isDataTab(lastParam) ? lastParam : "fiber";
function setTab(nextKey: Tab) {
const q = new URLSearchParams(sp.toString());
q.set("t", nextKey);
// keep track of last data tab so the Add tab knows which target to preselect
if (nextKey === "add") {
q.set("last", isDataTab(active) ? active : lastDataTab);
} else {
q.set("last", nextKey);
}
// optional: clear detail id if switching away from a data tab you don’t want to show
// (leaving as-is preserves your existing behavior)
router.replace(`/portal/laser-settings?${q.toString()}`, { scroll: false });
}
@ -73,7 +103,7 @@ export default function SettingsSwitcher() {
</div>
<div className="rounded-md border p-4">
<Panel tab={active} />
<Panel tab={active} lastDataTab={lastDataTab} />
</div>
</div>
);