chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'refactor/header-tabs' into 'main'

Browse Source 
Refactor the way TABS and VIEWS are handeled, now derived inside viewKeys.js

See merge request vkuchenik/website-framework!73
This commit is contained in:
Dan Hansen
2025-09-05 20:15:00 +00:00
parent 81896d8f5b 68a4e0417e
commit ec72385de0
7 changed files with 62 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Canvas/Canvas.jsx
+2 -6
View File
@@ -4,7 +4,7 @@ import Volcano from "./views/Volcano";
import Admin from "./views/Admin";
import Account from "./views/Account"
import Home from "./views/Home";
import { DASHBOARD_VIEWS, VOLCANO_VIEWS, ADMIN_VIEWS } from "@/constants/viewKeys";
import { DASHBOARD_VIEWS, ADMIN_VIEWS, VOLCANO_VIEWS } from "@/constants/viewKeys";
import { chakra } from "@chakra-ui/react";
import Personal from "./views/Personal";
import Security from "./views/Security";
@@ -12,9 +12,6 @@ import Security from "./views/Security";
export default function Canvas(props) {
const { view } = props;
// Derive values for volcano tabs
const VOLCANO_VALUES = VOLCANO_VIEWS.map(t => typeof t === "string" ? t : t.value)
return (
<chakra.div width="100%" height="100%">
{/* Check if view is a tab inside the Home Header */}
@@ -22,7 +19,7 @@ export default function Canvas(props) {
<Home {...props}/>
)}
{/* Check if view is a tab inside the Volcano Header */}
{ VOLCANO_VALUES.includes(view) && (
{ VOLCANO_VIEWS.includes(view) && (
<Volcano {...props}/>
)}
{/* Check if view is a tab inside the Admin Header */}
@@ -31,7 +28,6 @@ export default function Canvas(props) {
)}
{view === "global" && <GlobalMap />}
{view === "regional" && <RegionalMap />}
{/* {view === "volcano" && <Volcano />} */}
{view === "account" && <Account />}
{view === "settings" && <Personal />}
{view === "personal" && <Personal />}
client/src/components/Canvas/CanvasComponents/CanvasHeaderTabs.jsx
+1 -15
View File
@@ -1,21 +1,8 @@
import { Flex, Tabs } from '@chakra-ui/react'
import { Tabs } from '@chakra-ui/react'
// This component needs to be nested inside of a Tabs.Root to work properly
export function CanvasHeaderTabs({ view, onChangeView, tabs }) {
return (
<Flex
as="header"
position="sticky"
top="0"
zIndex="dropdown" // zIndex: 1100
bg="base200"
px={5}
pt={3}
pb={2}
align="center"
justify="space-between"
width="100%"
>
<Tabs.List>
{tabs.map(({ value, label }) =>
<Tabs.Trigger key={value} value={value} fontSize="lg">
@@ -23,6 +10,5 @@ export function CanvasHeaderTabs({ view, onChangeView, tabs }) {
</Tabs.Trigger>
)}
</Tabs.List>
</Flex>
)
}
client/src/components/Canvas/views/Admin.jsx
+9 -17
View File
@@ -5,7 +5,10 @@ import { NASApplication } from './AdminTabs/NASApplication';
import { IVANS } from './AdminTabs/IVANS'
import { SearchBar } from "../CanvasComponents/SearchBar";
import { SettingsButton } from "../CanvasComponents/SettingsButton";
import { CanvasHeaderTabs } from '../CanvasComponents/CanvasHeaderTabs';
import { ADMIN_TABS } from '@/constants/viewKeys';
// TODO - refactor this. Currently Admin doesn't use onEditWidgets or appendWidget
export default function Admin({ view, onChangeView, onEditWidgets, appendWidget }) {
const settingsButtonProps = { onEditWidgets, appendWidget };
@@ -29,30 +32,19 @@ export default function Admin({ view, onChangeView, onEditWidgets, appendWidget
top="0"
zIndex="dropdown" // zIndex: 1100
bg="base200"
px={5}
pl={5}
pr={2}
pt={3}
pb={2}
align="center"
justify="space-between"
width="100%"
>
<Tabs.List>
<Tabs.Trigger value="medataentry" fontSize="lg">
M&E Data Entry
</Tabs.Trigger>
<Tabs.Trigger value="projectcollector" fontSize="lg">
Project Collector
</Tabs.Trigger>
<Tabs.Trigger value="nasapplication" fontSize="lg">
NAS Application
</Tabs.Trigger><Tabs.Trigger value="ivans" fontSize="lg">
IVANS
</Tabs.Trigger>
</Tabs.List>
{/* HEADER */}
<CanvasHeaderTabs tabs={ADMIN_TABS} />
<HStack width="258px" justifyContent="flex-end">
<SearchBar />
<SettingsButton {...settingsButtonProps}/>
<SearchBar />
<SettingsButton />
</HStack>
</Flex>
client/src/components/Canvas/views/Home.jsx
+5 -21
View File
@@ -10,6 +10,8 @@ import { CancelButton } from "../CanvasComponents/CancelButton";
import { SaveButton } from "../CanvasComponents/SaveButton";
import DeleteAllButton from "../CanvasComponents/DeleteAllButton";
import { v4 as uuid } from 'uuid';
import { CanvasHeaderTabs } from '../CanvasComponents/CanvasHeaderTabs';
import { DASHBOARD_TABS } from "@/constants/viewKeys";
export default function Home(props) {
// deconstructing props
@@ -34,8 +36,6 @@ export default function Home(props) {
...prev,
{
i: newID,
// x: (prev.length * 3) % 12,
// y: Infinity,
x: (prev.length * W) % COLS,
y: 0,
w: w,
@@ -120,31 +120,15 @@ export default function Home(props) {
top="0"
zIndex="dropdown" // zIndex: 1100
bg="base200"
px={5}
pl={5}
pr={2}
pt={3}
pb={2}
align="center"
justify="space-between"
width="100%"
>
<Tabs.List>
<Tabs.Trigger value="mydashboard" fontSize="lg">
My Dashboard
</Tabs.Trigger>
<Tabs.Trigger value="gas" fontSize="lg">
Gas
</Tabs.Trigger>
<Tabs.Trigger value="seismic" fontSize="lg">
Seismic
</Tabs.Trigger>
<Tabs.Trigger value="remote" fontSize="lg">
Remote Sensing
</Tabs.Trigger>
<Tabs.Trigger value="daily" fontSize="lg">
Daily Activity
</Tabs.Trigger>
</Tabs.List>
<CanvasHeaderTabs tabs={DASHBOARD_TABS} />
<HStack width="258px" justifyContent="flex-end">
{isEditable ? (
<>
client/src/components/Canvas/views/Volcano.jsx
+22 -5
View File
@@ -1,7 +1,7 @@
import { Box, Text, Heading, DataList, HStack, Tabs } from '@chakra-ui/react';
import { Box, Text, Heading, DataList, Flex, HStack, Tabs } from '@chakra-ui/react';
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import { CanvasHeaderTabs } from '../CanvasComponents/CanvasHeaderTabs';
import { VOLCANO_VIEWS } from '@/constants/viewKeys';
import { VOLCANO_TABS } from '@/constants/viewKeys';
import { VolcanoHome } from './VolcanoTabs/VolcanoHome';
import { PartnerData } from './VolcanoTabs/PartnerData';
import { Reports } from './VolcanoTabs/Reports';
@@ -15,7 +15,6 @@ export default function Volcano({ view, onChangeView }) {
<Tabs.Root
key={view}
value={view}
// onValueChange={(e) => onChangeView(e.value)}
variant="line"
width="100%"
height="100%"
@@ -26,8 +25,26 @@ export default function Volcano({ view, onChangeView }) {
onChangeView(nextView);
}}
>
{/* HEADER */}
<CanvasHeaderTabs tabs={VOLCANO_VIEWS} />
<Flex
as="header"
position="sticky"
top="0"
zIndex="dropdown" // zIndex: 1100
bg="base200"
pl={5}
pr={2}
pt={3}
align="center"
justify="space-between"
width="100%"
>
{/* HEADER */}
<CanvasHeaderTabs tabs={VOLCANO_TABS} />
<HStack width="258px" justifyContent="flex-end">
<SearchBar />
<SettingsButton />
</HStack>
</Flex>
{/* CANVAS */}
<Tabs.Content value="volcanohome">
client/src/components/Canvas/views/VolcanoTabs/VolcanoHome.jsx
+1 -1
View File
@@ -23,7 +23,7 @@ export function VolcanoHome() {
`;
return (
<Box width="100%" px={6} py={4}>
<Box width="100%" px={6} py={2}>
<Heading textAlign="center" mb={6} size="xl" fontWeight="bold">
Mount St. Helens - United States CVO
</Heading>
client/src/constants/viewKeys.js
+21 -4
View File
@@ -1,9 +1,14 @@
// Main views called from Home tab -> Canvas navigation header
export const DASHBOARD_VIEWS = ["mydashboard", "gas", "seismic", "remote", "daily"]
export const DASHBOARD_TABS = [
{ value: "mydashboard", label: "My Dashboard" },
{ value: "gas", label: "Gas" },
{ value: "seismic", label: "Seismic" },
{ value: "remote", label: "Remote Sensing" },
{ value: "daily", label: "Daily Activity" },
]
// Volcano views called from Volcano tab -> Canvas navigation header
// export const VOLCANO_VIEWS = ["volcanohome", "partner", "reports", "official", "social"]
export const VOLCANO_VIEWS = [
export const VOLCANO_TABS = [
{ value: "volcanohome", label: "Volcano Home" },
{ value: "partner", label: "Partner Data" },
{ value: "reports", label: "Reports" },
@@ -12,7 +17,19 @@ export const VOLCANO_VIEWS = [
]
// Admin views called from Admin tab -> Canvas navigation header
export const ADMIN_VIEWS = ["medataentry", "projectcollector", "nasapplication", "ivans"]
export const ADMIN_TABS = [
{ value: "medataentry", label: "M&E Data Entry" },
{ value: "projectcollector", label: "Project Collector" },
{ value: "nasapplication", label: "NAS Application" },
{ value: "ivans", label: "IVANS" },
]
// Derived string arrays for tracking current view tab via '.includes(view)' in Canvas.jsx
const toViews = (tabs) => tabs.map(t => t.value);
export const DASHBOARD_VIEWS = toViews(DASHBOARD_TABS);
export const VOLCANO_VIEWS = toViews(VOLCANO_TABS);
export const ADMIN_VIEWS = toViews(ADMIN_TABS);
// Sub views called from inside Home.jsx
export const VIEW_LABELS = {