Doble/ShiftSync
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Footer Changes | Nav Bar Changes | Cell Adds | Local Store Add

Browse source
This commit is contained in:
Matt DiMeglio 2025-05-27 14:19:40 -04:00
parent da84f5d399
commit 54621e55ec
6 changed files with 151 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
components/core/Shell/Footer/Footer.jsx
View file

@ -1,24 +1,27 @@
import React from 'react'; import React from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { useLocalStore } from '@components';
const FooterContainer = styled('div')` const FooterContainer = styled('div')`
padding-left: 10px; display: flex;
position: absolute; justify-content: space-between;
left: 0; align-items: center;
bottom: 0; padding: 6px 20px;
right: 0;
flex-shrink: 0;
height: 30px; height: 30px;
padding-top: 6px;
background: #585858; background: #585858;
`;
const FooterText = styled('p')`
color: white; color: white;
font-family: "WDXL Lubrifont TC"; font-family: "WDXL Lubrifont TC";
`; `;
export const Footer = () => { export const Footer = () => {
const { department } = useLocalStore();
return ( return (
<FooterContainer> <FooterContainer>
<p>{`© ${new Date().getFullYear()} ShiftSync`}</p> <FooterText>{`© ${new Date().getFullYear()} ShiftSync`}</FooterText>
<FooterText>{department?.name}</FooterText>
</FooterContainer> </FooterContainer>
) )
} }

1
components/core/Shell/NavBar/NavBar.jsx
View file

@ -186,7 +186,6 @@ export const NavBar = ({ notifications, disableNav, settings }) => {
ref={(el) => { tabRefs.current['profile'] = el; }} ref={(el) => { tabRefs.current['profile'] = el; }}
> >
<Avatar <Avatar
style={{paddingTop: '3px'}}
onClick={() => onUserIconClick()} onClick={() => onUserIconClick()}
> >
{`${user?.firstName[0]}${user?.lastName[0]}`} {`${user?.firstName[0]}${user?.lastName[0]}`}

17
components/core/Shell/Shell.jsx
View file

@ -2,6 +2,8 @@ import React, { useEffect, useState, useRef } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { NavBar } from './NavBar'; import { NavBar } from './NavBar';
import { Footer } from './Footer'; import { Footer } from './Footer';
import { CircularProgress } from '@mui/material';
import { useLocalStore } from '@components';
const minHeight = 'calc(100vh - 30px)'; const minHeight = 'calc(100vh - 30px)';
@ -43,12 +45,25 @@ export const Shell = ({ children }) => {
const bannerRef = useRef(); const bannerRef = useRef();
const nonContentHeight = 92 + (bannerRef?.current?.offsetHeight || 0); const nonContentHeight = 92 + (bannerRef?.current?.offsetHeight || 0);
const minHeightMain = `calc(100vh - ${nonContentHeight}px)`; const minHeightMain = `calc(100vh - ${nonContentHeight}px)`;
const { user, department } = useLocalStore();
useEffect(() => { useEffect(() => {
window.scrollTo(0,0); window.scrollTo(0,0);
}, []); }, []);
return ( return (
<div>
{!user || !department ? (
<Body
style={{
justifyContent: 'center',
alignItems: 'center',
color: 'grey',
}}
>
<CircularProgress color="inherit" />
</Body>
) : (
<Body> <Body>
<MainContainer id="main-container"> <MainContainer id="main-container">
<Main id="main"> <Main id="main">
@ -66,5 +81,7 @@ export const Shell = ({ children }) => {
</MainContainer> </MainContainer>
<Footer /> <Footer />
</Body> </Body>
)}
</div>
) )
} }

2
components/stores/useLocalStore.js
View file

@ -3,4 +3,6 @@ import { create } from 'zustand';
export const useLocalStore = create((set) => ({ export const useLocalStore = create((set) => ({
user: null, user: null,
setUser: (user) => set({ user }), setUser: (user) => set({ user }),
department: null,
setDepartment: (department) => set({ department }),
})); }));

60
src/pages/Settings/Settings.jsx
View file

@ -2,25 +2,64 @@ import React, { useEffect, useState } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Stack } from '@mui/material'; import { Stack } from '@mui/material';
import { ToggleTabs } from '@components'; import { ToggleTabs, useLocalStore } from '@components';
const OuterContainer = styled(Stack)` const OuterContainer = styled(Stack)`
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: center;
padding: 10px 10px 0px 0px; padding: 10px 10px 0px 0px;
`; `;
const fields = {
departmentInformation: {
title: 'Information',
tab: 'department',
fields: []
},
departmentPermissions: {
title: 'Permissions',
tab: 'department',
fields: []
},
departmentManagers: {
title: 'Managers',
tab: 'department',
fields: []
},
departmentSubscriptions: {
title: 'Subscriptions',
tab: 'department',
fields: []
},
myInformation: {
title: 'Information',
tab: 'personal',
fields: []
},
myNotifications: {
title: 'Notifications',
tab: 'personal',
fields: []
},
departmentNotifications: {
title: 'Notifications',
tab: 'department',
fields: []
},
}
export const Settings = () => { export const Settings = () => {
const { user } = useLocalStore();
const tabs = [ const tabs = [
{ {
label: 'Personal', label: 'Personal',
value: 'personal' value: 'personal'
}, },
{ {
label: 'Organization', label: 'Department',
value: 'org' value: 'department'
} }
]; ];
@ -32,6 +71,7 @@ export const Settings = () => {
return ( return (
<div> <div>
{user?.administrator ? (
<OuterContainer> <OuterContainer>
<ToggleTabs <ToggleTabs
tabs={tabs} tabs={tabs}
@ -40,8 +80,18 @@ export const Settings = () => {
tabColor='#4D79FF' tabColor='#4D79FF'
/> />
</OuterContainer> </OuterContainer>
<h1>Settings Page</h1> ) : null }
{tabValue?.value === 'personal' ? (
<div>
<h1>{`Settings Page${user?.administrator ? ` - ${tabValue?.label}` : ''}`}</h1>
<Link to="/">Go to Home</Link> <Link to="/">Go to Home</Link>
</div> </div>
) : (
<div>
<h1>Settings Page - Organization</h1>
<Link to="/">Go to Home</Link>
</div>
)}
</div>
); );
}; };

50
src/router/AppRouter.jsx
View file

@ -1,24 +1,62 @@
import React, { useEffect } from 'react'; import React, { useEffect, useState } from 'react';
import { Routes, Route } from 'react-router-dom'; import { Routes, Route } from 'react-router-dom';
import { Home, Profile, Schedule, Settings } from '@src/pages'; import { Home, Profile, Schedule, Settings } from '@src/pages';
import { Shell } from '@components'; import { Shell } from '@components';
import { useLocalStore } from '@components'; import { useLocalStore } from '@components';
const dept = {
id: 1,
name: 'Darien EMS - Post 53',
Abv: 'DEMS',
schedulers: [],
managers: [],
administrators: [1]
};
const AppRouter = () => { const AppRouter = () => {
const { setUser } = useLocalStore(); const { user, setUser, setDepartment } = useLocalStore();
const [userChanged, setUserChanged] = useState(false);
useEffect(() => { useEffect(() => {
setDepartment(dept);
setUser({ setUser({
id: 1, id: 1,
firstName: 'ShiftSync-Manager', firstName: 'ShiftSync-Manager',
lastName: 'Test-User', lastName: 'Test-User',
email: 'testuser@shift-sync.com', email: 'testuser@shift-sync.com',
scheduler: false, scheduler: dept?.schedulers?.includes(1),
manager: true, manager: dept?.managers?.includes(1),
isAdmin: false administrator: dept?.administrators?.includes(1),
}) isSSAdmin: false
});
}, []); }, []);
useEffect(() => {
if (!userChanged && user) {
if (user?.isSSAdmin) {
setUser({
...user,
scheduler: true,
manager: true,
administrator: true,
});
} else if (user?.administrator) {
setUser({
...user,
scheduler: true,
manager: true,
});
} else if (user?.manager) {
setUser({
...user,
scheduler: true,
});
}
setUserChanged(true);
}
}, [user]);
return ( return (
<Shell> <Shell>
<Routes> <Routes>