💄 Busy editor as dialog also from profile menu

- Layout fixes to the busy page
Som-Energia · Apr 2, 2024 · 1e471c5 · 1e471c5
1 parent 52583d2
commit 1e471c5
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/tomatic/ui/src/components/ProfileButton.js b/tomatic/ui/src/components/ProfileButton.js
@@ -24,6 +24,7 @@ import { contrast } from '../services/colorutils'
 import AuthContext from '../contexts/AuthContext'
 import PersonEditor from './PersonEditor'
 import { useDialog } from './DialogProvider'
+import BusyDialog from '../pages/BusyPage/BusyDialog'
 import { CopyCalendarDialog } from './CopyCalendarDialog'
 import EmulateCallDialog from './EmulateCallDialog'
 import { useNavigate } from 'react-router-dom'
@@ -34,6 +35,7 @@ function ProfileButton() {
   const { userid, fullname, initials, color, avatar } =
     React.useContext(AuthContext)
   const [anchorElUser, setAnchorElUser] = React.useState(null)
+  const [personToEditBusy, setPersonToEditBusy] = React.useState(false)
 
   const handleOpenUserMenu = (event) => {
     setAnchorElUser(event.currentTarget)
@@ -43,7 +45,8 @@ function ProfileButton() {
   }
 
   function openBusyPage(person) {
-    navigate(`/Indisponibilitats/${person}`)
+    //navigate(`/Indisponibilitats/${person}`)
+    setPersonToEditBusy(person)
   }
 
   function openCalendarDialog(username) {
@@ -118,6 +121,7 @@ function ProfileButton() {
 
   return (
     <Box sx={{ flexGrow: 0 }}>
+      <BusyDialog person={personToEditBusy} setPerson={setPersonToEditBusy} />
       {userid ? (
         <>
           <Tooltip title={'Perfil'}>

diff --git a/tomatic/ui/src/pages/BusyPage/index.js b/tomatic/ui/src/pages/BusyPage/index.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import Container from '@mui/material/Container'
 import Card from '@mui/material/Card'
+import Stack from '@mui/material/Stack'
 import { useParams } from 'react-router-dom'
 import { TomaticBusyEditor } from './BusyEditor'
 import BusyNotes from './BusyNotes'
@@ -11,15 +12,17 @@ export default function BusyPage() {
   const fullName = Tomatic.formatName(person)
   return (
     <Container sx={{ p: 2 }}>
-      <h2
-        style={{ textAlign: 'center' }}
-      >{`Indisponibilitats - ${fullName}`}</h2>
-      <Card>
-        <TomaticBusyEditor person={person} />
-      </Card>
-      <Card>
-        <BusyNotes />
-      </Card>
+      <Stack gap={1}>
+        <h2
+          style={{ textAlign: 'center' }}
+        >{`Indisponibilitats - ${fullName}`}</h2>
+        <Card>
+          <TomaticBusyEditor person={person} />
+        </Card>
+        <Card>
+          <BusyNotes />
+        </Card>
+      </Stack>
     </Container>
   )
 }