gitea_admin/tech_mahindra
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch nav items to screen_uuid (server returns UUIDs, not numeric ids)

Browse Source
This commit is contained in:
Bhanu Prakash Sai Potteri 2026-05-22 22:50:54 +05:30
parent 9e8b41a202
commit 0fd08c4015
3 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/api/viewService.ts
View File

@ -53,7 +53,7 @@ export interface NavItem {
icon: string; icon: string;
type: string; type: string;
label: string; label: string;
screen_id: number; screen_uuid: string;
} }
export async function getHeaderConfig(deviceType = "desktop"): Promise<HeaderConfig> { export async function getHeaderConfig(deviceType = "desktop"): Promise<HeaderConfig> {
@ -91,8 +91,8 @@ export function getScreens(deviceType = "desktop"): Promise<ScreenListItem[]> {
return request("GET", `/app/${APP_ID}/view/screens?device_type=${deviceType}`); return request("GET", `/app/${APP_ID}/view/screens?device_type=${deviceType}`);
} }
export function getScreen(sourceScreenId: number): Promise<ScreenLayout> { export function getScreen(idOrUuid: number | string): Promise<ScreenLayout> {
return request("GET", `/app/${APP_ID}/view/screens/${sourceScreenId}`); return request("GET", `/app/${APP_ID}/view/screens/${idOrUuid}`);
} }
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------

14
src/components/AppShell.tsx
View File

@ -52,10 +52,10 @@ function stateTone(stateId: string | null) {
export default function AppShell() { export default function AppShell() {
const navigate = useNavigate(); const navigate = useNavigate();
const params = useParams(); const params = useParams();
const screenIdParam = params.screenId ? Number(params.screenId) : null; const screenIdParam = params.screenId || null;
const instanceIdParam = params.instanceId; const instanceIdParam = params.instanceId;
const [activeScreenId, setActiveScreenId] = useState<number | null>(screenIdParam); const [activeScreenId, setActiveScreenId] = useState<string | null>(screenIdParam);
const [layout, setLayout] = useState<LayoutElement[]>([]); const [layout, setLayout] = useState<LayoutElement[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [ready, setReady] = useState(false); const [ready, setReady] = useState(false);
@ -75,7 +75,7 @@ export default function AppShell() {
.then((cfg) => { .then((cfg) => {
const items = cfg.components?.nav?.items ?? []; const items = cfg.components?.nav?.items ?? [];
setNavItems(items); setNavItems(items);
if (items.length > 0) handleNavigate(items[0].screen_id); if (items.length > 0) handleNavigate(items[0].screen_uuid);
}) })
.catch(console.error) .catch(console.error)
.finally(() => setReady(true)); .finally(() => setReady(true));
@ -120,12 +120,12 @@ export default function AppShell() {
getAuditLog(detailInstanceId).then(setAudit).catch(() => setAudit([])); getAuditLog(detailInstanceId).then(setAudit).catch(() => setAudit([]));
}, [detailInstanceId, refreshKey]); }, [detailInstanceId, refreshKey]);
const handleNavigate = useCallback((id: number) => { const handleNavigate = useCallback((uuid: string) => {
setActiveScreenId(id); setActiveScreenId(uuid);
setDetailInstanceId(null); setDetailInstanceId(null);
setInstanceState(null); setInstanceState(null);
setAudit([]); setAudit([]);
navigate(`/screen/${id}`); navigate(`/screen/${uuid}`);
}, [navigate]); }, [navigate]);
const handleRowClick = useCallback((instanceId: string) => { const handleRowClick = useCallback((instanceId: string) => {
@ -190,7 +190,7 @@ export default function AppShell() {
onClick={handleBack} onClick={handleBack}
className="text-stone-400 dark:text-zinc-500 hover:text-[#C8102E] dark:hover:text-rose-400 transition-colors font-medium" className="text-stone-400 dark:text-zinc-500 hover:text-[#C8102E] dark:hover:text-rose-400 transition-colors font-medium"
> >
{navItems.find((n) => n.screen_id === activeScreenId)?.label ?? "Pipeline"} {navItems.find((n) => n.screen_uuid === activeScreenId)?.label ?? "Pipeline"}
</button> </button>
<span className="text-stone-300 dark:text-zinc-700">/</span> <span className="text-stone-300 dark:text-zinc-700">/</span>
<span className="text-stone-700 dark:text-zinc-200 font-medium"> <span className="text-stone-700 dark:text-zinc-200 font-medium">

8
src/components/DynamicHeader.tsx
View File

@ -20,8 +20,8 @@ function iconFor(label: string) {
} }
interface Props { interface Props {
activeScreenId: number | null; activeScreenId: string | null;
onNavigate: (screenId: number) => void; onNavigate: (screenUuid: string) => void;
onSidebarChange?: (open: boolean) => void; onSidebarChange?: (open: boolean) => void;
} }
@ -160,11 +160,11 @@ export default function DynamicHeader({ activeScreenId, onNavigate, onSidebarCha
</div> </div>
<nav className="space-y-0.5"> <nav className="space-y-0.5">
{navItems.map((item: NavItem) => { {navItems.map((item: NavItem) => {
const active = activeScreenId === item.screen_id; const active = activeScreenId === item.screen_uuid;
return ( return (
<button <button
key={item.id} key={item.id}
onClick={() => onNavigate(item.screen_id)} onClick={() => onNavigate(item.screen_uuid)}
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-[13px] font-medium transition-all group ${ className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-[13px] font-medium transition-all group ${
active active
? "bg-rose-100/70 dark:bg-rose-950/40 text-[#9D0D24] dark:text-rose-300" ? "bg-rose-100/70 dark:bg-rose-950/40 text-[#9D0D24] dark:text-rose-300"