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;
type: string;
label: string;
screen_id: number;
screen_uuid: string;
}
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}`);
}
export function getScreen(sourceScreenId: number): Promise<ScreenLayout> {
return request("GET", `/app/${APP_ID}/view/screens/${sourceScreenId}`);
export function getScreen(idOrUuid: number | string): Promise<ScreenLayout> {
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() {
const navigate = useNavigate();
const params = useParams();
const screenIdParam = params.screenId ? Number(params.screenId) : null;
const screenIdParam = params.screenId || null;
const instanceIdParam = params.instanceId;
const [activeScreenId, setActiveScreenId] = useState<number | null>(screenIdParam);
const [activeScreenId, setActiveScreenId] = useState<string | null>(screenIdParam);
const [layout, setLayout] = useState<LayoutElement[]>([]);
const [loading, setLoading] = useState(true);
const [ready, setReady] = useState(false);
@ -75,7 +75,7 @@ export default function AppShell() {
.then((cfg) => {
const items = cfg.components?.nav?.items ?? [];
setNavItems(items);
if (items.length > 0) handleNavigate(items[0].screen_id);
if (items.length > 0) handleNavigate(items[0].screen_uuid);
})
.catch(console.error)
.finally(() => setReady(true));
@ -120,12 +120,12 @@ export default function AppShell() {
getAuditLog(detailInstanceId).then(setAudit).catch(() => setAudit([]));
}, [detailInstanceId, refreshKey]);
const handleNavigate = useCallback((id: number) => {
setActiveScreenId(id);
const handleNavigate = useCallback((uuid: string) => {
setActiveScreenId(uuid);
setDetailInstanceId(null);
setInstanceState(null);
setAudit([]);
navigate(`/screen/${id}`);
navigate(`/screen/${uuid}`);
}, [navigate]);
const handleRowClick = useCallback((instanceId: string) => {
@ -190,7 +190,7 @@ export default function AppShell() {
onClick={handleBack}
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>
<span className="text-stone-300 dark:text-zinc-700">/</span>
<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 {
activeScreenId: number | null;
onNavigate: (screenId: number) => void;
activeScreenId: string | null;
onNavigate: (screenUuid: string) => void;
onSidebarChange?: (open: boolean) => void;
}
@ -160,11 +160,11 @@ export default function DynamicHeader({ activeScreenId, onNavigate, onSidebarCha
</div>
<nav className="space-y-0.5">
{navItems.map((item: NavItem) => {
const active = activeScreenId === item.screen_id;
const active = activeScreenId === item.screen_uuid;
return (
<button
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 ${
active
? "bg-rose-100/70 dark:bg-rose-950/40 text-[#9D0D24] dark:text-rose-300"