frontend : enable scrolling tab in beef production view

benjaminpochat · Feb 20, 2024 · b452495 · b452495
1 parent 6d4d029
commit b452495
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 197 deletions.
diff --git a/frontend/app/package-lock.json b/frontend/app/package-lock.json
diff --git a/frontend/app/src/domains/production/views/BeefProductionView.tsx b/frontend/app/src/domains/production/views/BeefProductionView.tsx
@@ -13,34 +13,32 @@ import TabPanel from '@mui/lab/TabPanel';
 
 export default function BeefProductionView({ beefProduction: beefProduction, backCallback: backCallback }) {
 
-    const [currentTab, setCurrentTab] = React.useState('1');
+    const [currentTab, setCurrentTab] = React.useState<number>(0);
 
-    const changeTab = (event: React.SyntheticEvent, newValue: string) => {
+    const changeTab = (event: React.SyntheticEvent, newValue: number) => {
         setCurrentTab(newValue);
     };
 
 
     return <>
         <Typography variant="h6">Abattage bovin</Typography>
-        <TabContext value={currentTab}>
-            <TabList onChange={changeTab}>
-                <Tab label="Elevage" value="1" />
-                <Tab label="Abattage" value="2" />
-                <Tab label="Découpe" value="3" />
-                <Tab label="Colis" value="4" />
-            </TabList>
-            <TabPanel value="1">
+            <Tabs value={currentTab} onChange={changeTab} variant='scrollable' allowScrollButtonsMobile >
+                <Tab label="Elevage"/>
+                <Tab label="Abattage"/>
+                <Tab label="Découpe"/>
+                <Tab label="Colis"/>
+            </Tabs>
+            <div hidden={currentTab !== 0}>
                 <BreedingPropertiesForm beefProduction={beefProduction} validFormCallback={undefined} cancelFormCallback={undefined} />
-            </TabPanel>
-            <TabPanel value="2">
+            </div>
+            <div hidden={currentTab !== 1}>
                 <SlaughterPropertiesForm beefProduction={beefProduction} validFormCallback={undefined} cancelFormCallback={undefined} />
-            </TabPanel>
-            <TabPanel value="3">
+            </div>
+            <div hidden={currentTab !== 2}>
                 <CuttingPropertiesForm beefProduction={beefProduction} validFormCallback={undefined} cancelFormCallback={undefined} />
-            </TabPanel>
-            <TabPanel value="4">
-            </TabPanel>
-        </TabContext>
+            </div>
+            <div hidden={currentTab !== 3}>
+            </div>
 
         <div>
             <ButtonGroup>

diff --git a/frontend/app/src/layouts/producer/AuthenticatedLayout.tsx b/frontend/app/src/layouts/producer/AuthenticatedLayout.tsx
@@ -1,3 +1,4 @@
+import React from 'react'
 import { useKeycloak } from '@react-keycloak/web'
 import { useState, useEffect } from 'react';
 
@@ -96,7 +97,8 @@ function AuthenticatedLayout() {
             </SideMenu>
             <Box
                 component="main"
-                sx={{ flexGrow: 1, p: 3 }}>
+                sx={{ flexGrow: 1, p: 3 }}
+                width={'100%'}>
                 <Toolbar />
                 {renderMainContent()}
             </Box>