First commit
parent
4aeccb8213
commit
fb0cc822f0
Binary file not shown.
@ -0,0 +1,13 @@
|
||||
.App {
|
||||
padding: 20px;
|
||||
background-color: aliceblue;
|
||||
}
|
||||
|
||||
|
||||
.WhiteWindow{
|
||||
background-color: white;
|
||||
border: 1px rgb(1, 1, 1, 0.1) solid;
|
||||
border-radius: 10px; /* Adjust the value to control the curve */
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,189 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import './App.css';
|
||||
import axios from 'axios';
|
||||
|
||||
import {VersionComponent, InfoComponent} from './Components.tsx';
|
||||
|
||||
import { Grid, Tab, Tabs, Paper, Typography, CircularProgress } from '@mui/material';
|
||||
|
||||
import { ThemeProvider, createTheme } from '@mui/material/styles';
|
||||
|
||||
|
||||
let theme = createTheme({
|
||||
palette: {
|
||||
primary: {
|
||||
main: '#049a9b',
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
const fetchDataSgi = async (streamlineSgiId) => {
|
||||
try {
|
||||
const res = await axios.get("https://cc.streamline.pt/api/applications/findOne",
|
||||
{
|
||||
params: {
|
||||
filter: {
|
||||
where: {
|
||||
id: streamlineSgiId
|
||||
},
|
||||
include: ["modules", {
|
||||
relation: "versions",
|
||||
scope: {
|
||||
include: "module",
|
||||
order: "version DESC"
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
let data = res.data;
|
||||
let modulesSgi = data.modules;
|
||||
let versionsSgi = data.versions;
|
||||
|
||||
return { modulesSgi, versionsSgi }; // Return both modules and versions
|
||||
|
||||
} catch (error) {
|
||||
// Handle errors if any
|
||||
console.error('Error fetching data:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const fetchDataApp = async (streamlineAppId) => {
|
||||
try {
|
||||
const res = await axios.get("https://cc.streamline.pt/api/applications/findOne",
|
||||
{
|
||||
params: {
|
||||
filter: {
|
||||
where: {
|
||||
id: streamlineAppId
|
||||
},
|
||||
include: ["modules", {
|
||||
relation: "versions",
|
||||
scope: {
|
||||
include: "module",
|
||||
order: "version DESC"
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
let data = res.data;
|
||||
|
||||
return data
|
||||
|
||||
} catch (error) {
|
||||
// Handle errors if any
|
||||
console.error('Error fetching data:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
function App() {
|
||||
|
||||
const streamlineSgiId = "60a288ed33320700119606f9";
|
||||
const streamlineAppId = "6082b67f1e0f13001133287b";
|
||||
|
||||
const [value, setValue] = useState(0);
|
||||
const [selectedVersion, setSelectedVersion] = useState(null);
|
||||
const [modulesData, setModulesData] = useState({ modules: [], versions: [] });
|
||||
const [appData, setAppData] = useState({ modules: [], versions: [] });
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
|
||||
const handleChange = (event, newValue) => {
|
||||
setValue(newValue);
|
||||
setSelectedVersion(null); // Reset selectedVersion when switching tabs
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchModules = async () => {
|
||||
try {
|
||||
const { modulesSgi, versionsSgi } = await fetchDataSgi(streamlineSgiId);
|
||||
setModulesData({ modules: modulesSgi, versions: versionsSgi }); // Set the modules and versions in the state
|
||||
|
||||
const appData = await fetchDataApp(streamlineAppId);
|
||||
setAppData(appData);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error fetching modules:', error); // Handle errors if any
|
||||
|
||||
} finally {
|
||||
setLoading(false); // Set loading state to false when the fetch operation is complete
|
||||
}
|
||||
};
|
||||
|
||||
fetchModules(); // Call the function to fetch modules
|
||||
|
||||
}, [streamlineSgiId]);
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
|
||||
|
||||
<div className="App">
|
||||
<Typography variant="h3" sx={{ fontWeight: 'bold', marginBottom: '10px' }}>
|
||||
Histórico de versões
|
||||
</Typography>
|
||||
|
||||
|
||||
{loading ? (
|
||||
// Display a loading circular progress while data is being fetched
|
||||
<div sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '200%' }}>
|
||||
<CircularProgress />
|
||||
</div>
|
||||
|
||||
) : (
|
||||
<div className="WhiteWindow">
|
||||
|
||||
<Grid container>
|
||||
|
||||
{/*----TAB SELECTION AREA----------------------------------------------*/}
|
||||
<Grid item md={12}>
|
||||
<Tabs value={value} onChange={handleChange}>
|
||||
<Tab label="SISTEMA DE GESTÃO INTEGRADO (WEB)" />
|
||||
<Tab label="APLICAÇÃO MÓVEL" />
|
||||
</Tabs>
|
||||
</Grid>
|
||||
|
||||
{/*-------INFO AREA----------------------------------------*/}
|
||||
<Grid container sx={{ margin: '5px', padding: '5px', marginBottom: '20px' }}>
|
||||
|
||||
{/*-------HISTORICO VERSOES----------------------------------------*/}
|
||||
<Grid item md={6} sx={{ padding: "10px" }}>
|
||||
<Paper>
|
||||
{value === 0 && <VersionComponent message={modulesData} setSelectedVersion={setSelectedVersion}/>}
|
||||
{value === 1 && <VersionComponent message={appData} setSelectedVersion={setSelectedVersion} />}
|
||||
</Paper>
|
||||
</Grid>
|
||||
|
||||
{/*-------MORE INFO GRIDS (Info and improvements)----------------------------------------*/}
|
||||
<Grid item md={6} sx={{ padding: "10px" }}>
|
||||
<Paper>
|
||||
{value === 0 && <InfoComponent modules={modulesData} version={selectedVersion} />}
|
||||
{value === 1 && <InfoComponent modules={appData} version={selectedVersion} />}
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default App;
|
||||
@ -0,0 +1,8 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import App from './App';
|
||||
|
||||
test('renders learn react link', () => {
|
||||
render(<App />);
|
||||
const linkElement = screen.getByText(/learn react/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
});
|
||||
@ -0,0 +1,383 @@
|
||||
import React, {useState} from 'react';
|
||||
import './App.css';
|
||||
import MultipleSelectFilter from './MultipleSelectFilter.tsx';
|
||||
import MultipleSelectModule from './MultipleSelectModule.tsx';
|
||||
|
||||
import { Grid, TextField, List, ListItem, Divider, Card, Typography} from '@mui/material';
|
||||
import { Timeline, TimelineItem, TimelineSeparator, TimelineConnector, TimelineContent, TimelineDot} from '@mui/lab';
|
||||
import TimelineOppositeContent, {
|
||||
timelineOppositeContentClasses,
|
||||
} from '@mui/lab/TimelineOppositeContent';
|
||||
|
||||
import DonutLargeIcon from '@mui/icons-material/DonutLarge';
|
||||
import SquareFootIcon from '@mui/icons-material/SquareFoot';
|
||||
import StraightenIcon from '@mui/icons-material/Straighten';
|
||||
import AccountBalanceIcon from '@mui/icons-material/AccountBalance';
|
||||
import WarehouseIcon from '@mui/icons-material/Warehouse';
|
||||
import EuroIcon from '@mui/icons-material/Euro';
|
||||
import PowerIcon from '@mui/icons-material/Power';
|
||||
import LocalFireDepartmentIcon from '@mui/icons-material/LocalFireDepartment';
|
||||
import ConstructionIcon from '@mui/icons-material/Construction';
|
||||
import HeightIcon from '@mui/icons-material/Height';
|
||||
|
||||
import BuildIcon from '@mui/icons-material/Build';
|
||||
import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
|
||||
import HubIcon from '@mui/icons-material/Hub';
|
||||
import InfoIcon from '@mui/icons-material/Info';
|
||||
|
||||
import FileCopyIcon from '@mui/icons-material/FileCopy';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
|
||||
import { ThemeProvider, createTheme } from '@mui/material/styles';
|
||||
|
||||
|
||||
|
||||
let theme = createTheme({
|
||||
palette: {
|
||||
primary: {
|
||||
main: '#049a9b',
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
const listItemStyle = { margin: '-15px 5px -10px 0px',};
|
||||
const infoTitlesStyle = { fontWeight: 'bold', margin: '15px 0px 10px 8px', fontSize: '25px' };
|
||||
const informacaoTitleStyles = {fontWeight: 'bold', margin: '0px 10px 5px 10px', fontSize: '15px' }
|
||||
const informacaoContentStyle = { margin: '0px 10px 5px 10px', fontSize: '15px' }
|
||||
|
||||
const namesWithIcons = [
|
||||
{ id: 0, name: 'Novas funcionalidade', icon: < HubIcon /> },
|
||||
{ id: 1, name: 'Correção de Falhas', icon: <BuildIcon /> },
|
||||
{ id: 2, name: 'Melhorias', icon: <DynamicFeedIcon /> },
|
||||
];
|
||||
|
||||
|
||||
function formatDate(myString){
|
||||
const date = new Date(myString);
|
||||
const year = date.getUTCFullYear() % 100; // Get the last two digits of the year
|
||||
const month = (date.getUTCMonth() + 1).toString().padStart(2, '0'); // Month is zero-based
|
||||
const day = date.getUTCDate().toString().padStart(2, '0');
|
||||
|
||||
return `${day}/${month}/${year}`;
|
||||
}
|
||||
|
||||
|
||||
function semanticVersions(myString){
|
||||
// Convert from "005001010" to 5.1.10
|
||||
return String(parseInt(myString.slice(0, 3)))+"."+
|
||||
String(+ parseInt(myString.slice(3, 6)))+"."+
|
||||
String(+ parseInt(myString.slice(6, 9)))
|
||||
|
||||
}
|
||||
|
||||
const getIconForModule = (myModuleName) => {
|
||||
switch (myModuleName) {
|
||||
case 'CORE': return <DonutLargeIcon />;
|
||||
case 'FOR': return <SquareFootIcon />;
|
||||
case 'IE': return <PowerIcon/>;
|
||||
case 'LME':
|
||||
case 'LAB': return <StraightenIcon/>;
|
||||
case 'ELV': return <HeightIcon />;
|
||||
case 'FIN': return <AccountBalanceIcon />;
|
||||
case 'ATV': return <AccountBalanceIcon />;
|
||||
case 'PAD': return <EuroIcon />;
|
||||
case 'OBL':
|
||||
case 'OBLER': return <WarehouseIcon/>;
|
||||
case 'GAS': return <LocalFireDepartmentIcon/>;
|
||||
case 'FUN': return <ConstructionIcon />;
|
||||
default: return <AccountBalanceIcon />;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
function VersionComponent({message, setSelectedVersion, filters }) {
|
||||
|
||||
//Check for the tab selected --> Could be "SGI" or "Mobile"
|
||||
var tabSelected = "";
|
||||
if (message.name === "SGI Mobile") {tabSelected = "mobile"}
|
||||
else {tabSelected = "SGI"}
|
||||
|
||||
// Versions (TIMELINE)
|
||||
let versions = message.versions //Get all versions
|
||||
const [selectedVersion, setSelectedIcon] = useState(null);
|
||||
|
||||
|
||||
// Module (CHIP)
|
||||
const moduleNames: string[] = [];
|
||||
for (let i = 0; i < message.modules.length; i++){ moduleNames[i] = message.modules[i].value;}
|
||||
|
||||
// Filters
|
||||
const [moduleFilter, setModuleFilter] = useState([]);
|
||||
const [filter, setFilter] = useState([]);
|
||||
|
||||
|
||||
// Handling of the version click
|
||||
const handleIconClick = (index, data) => {
|
||||
setSelectedIcon(index); // Aggiorna lo stato selectedVersion
|
||||
setSelectedVersion(data);
|
||||
};
|
||||
|
||||
// Handle search text
|
||||
const [searchText, setSearchText] = useState('');
|
||||
|
||||
// Function for filtering the versions by the search text
|
||||
const cleanedVersions = Object.values(versions).filter((item) => {
|
||||
const versionInfo = `${item.module.value} ${semanticVersions(item.version)} ${item.improvements} ${item.bugfixes} ${item.added}`;
|
||||
return versionInfo.toLowerCase().includes(searchText.toLowerCase());
|
||||
});
|
||||
|
||||
// -------------------------------------------------------------------
|
||||
// -------------------------------------------------------------------
|
||||
// -------------------------------------------------------------------
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
<Card className="Versoes-Card" variant="outlined">
|
||||
<Typography sx={{ fontWeight: 'bold', margin: '15px 15px 10px 15px', fontSize: '25px' }}>
|
||||
Versões {tabSelected}
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
size="small"
|
||||
id="outlined"
|
||||
label="Pesquisa..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
sx={{ width: 'calc(100% - 30px)', marginLeft: '15px', marginRight: '15px', marginBottom: '15px'}}
|
||||
/>
|
||||
|
||||
|
||||
<Grid container sx={{ marginBottom: '10px'}}>
|
||||
|
||||
<Grid item sx={{marginLeft: "8px", marginTop: "-5px"}}>
|
||||
<MultipleSelectModule modules={message.modules} moduleFilter={moduleFilter} setModuleFilter={setModuleFilter}></MultipleSelectModule>
|
||||
</Grid>
|
||||
|
||||
<Grid item sx={{marginLeft: "8px", marginTop: "-5px", paddingRight: '5px'}}>
|
||||
<MultipleSelectFilter names={namesWithIcons} filter={filter} setFilter={setFilter}></MultipleSelectFilter>
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
|
||||
|
||||
<Timeline style={{maxHeight: '800px', overflow: 'auto'}}
|
||||
sx={{[`& .${timelineOppositeContentClasses.root}`]: {flex: 0.1, },}}>
|
||||
{cleanedVersions.map((item, index) => {
|
||||
|
||||
// Filter item by the modulew selected (module chip)
|
||||
if (moduleFilter.length > 0){
|
||||
if (!(moduleFilter.includes(item.module.value))){return null;}
|
||||
}
|
||||
|
||||
//console.log("my item", item.module.value)
|
||||
|
||||
// Filter module by the improvement chip
|
||||
if ((filter.includes(namesWithIcons[2].name)) && ((item.improvements === undefined) || (item.improvements === "")) ) {return null;}
|
||||
// Filter module by the added chip
|
||||
if ((filter.includes(namesWithIcons[0].name)) && ((item.added === undefined) || (item.added === ""))) {return null;}
|
||||
// Filter module by the added chip
|
||||
if ((filter.includes(namesWithIcons[1].name)) && ((item.bugfixes === undefined) || (item.bugfixes === ""))) {return null;}
|
||||
|
||||
|
||||
// Return the item
|
||||
return (
|
||||
<TimelineItem key={index} sx={{ py: '4px' }}>
|
||||
|
||||
<TimelineOppositeContent color="textSecondary" sx={{ py: '22px' }}>
|
||||
<Typography variant="body2" component="div">
|
||||
{formatDate(item.date)}
|
||||
</Typography>
|
||||
|
||||
</TimelineOppositeContent>
|
||||
|
||||
|
||||
<TimelineSeparator>
|
||||
|
||||
<TimelineDot
|
||||
color={selectedVersion === index ? 'warning' : 'primary'}
|
||||
onClick={() => handleIconClick(index, item)}>
|
||||
{getIconForModule(item.module.name)}
|
||||
</TimelineDot>
|
||||
|
||||
<TimelineConnector sx={{ paddingTop: '22px' }} />
|
||||
|
||||
</TimelineSeparator>
|
||||
|
||||
|
||||
<TimelineContent>
|
||||
<Typography variant="h6" sx={{ fontSize: '18px', lineHeight: '18px', padding: '8px 0px 0px 0px' }}>
|
||||
{item.module.value}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="textPrimary">
|
||||
{semanticVersions(item.version)}
|
||||
</Typography>
|
||||
</TimelineContent>
|
||||
|
||||
</TimelineItem>
|
||||
);
|
||||
})}
|
||||
|
||||
</Timeline>
|
||||
|
||||
{console.log("NO VERSIOooN!", cleanedVersions.length)}
|
||||
{console.log("\n\n\n\n\n\n\nYALLE!")}
|
||||
|
||||
|
||||
</Card>
|
||||
</ThemeProvider>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
function InfoComponent({ modules, version: selectedVersion }) {
|
||||
|
||||
// If no version is selected, don't render anything
|
||||
if (!selectedVersion || !selectedVersion.version) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
const copyText = (text) => {
|
||||
// Function that creates an icon to copy the git id
|
||||
const tempInput = document.createElement('input');
|
||||
tempInput.value = text;
|
||||
document.body.appendChild(tempInput);
|
||||
|
||||
tempInput.select();
|
||||
tempInput.setSelectionRange(0, 999);
|
||||
|
||||
document.execCommand('copy');
|
||||
|
||||
document.body.removeChild(tempInput);
|
||||
console.log(`Copied: ${text}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
|
||||
<Card variant="outlined">
|
||||
<List >
|
||||
<ListItem sx={listItemStyle}>
|
||||
<InfoIcon></InfoIcon>
|
||||
<Typography sx={infoTitlesStyle}>
|
||||
Informação para versão {semanticVersions(selectedVersion.version)}
|
||||
</Typography>
|
||||
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item md={6}>
|
||||
<Typography sx={informacaoTitleStyles}> Módulo </Typography>
|
||||
<Typography sx={informacaoContentStyle}>
|
||||
{selectedVersion.module.value}
|
||||
</Typography>
|
||||
</Grid>
|
||||
|
||||
<Grid item md={6}>
|
||||
<Typography sx={informacaoTitleStyles}> Data de lançamento </Typography>
|
||||
<Typography sx={informacaoContentStyle}>
|
||||
{formatDate(selectedVersion.date)}
|
||||
</Typography>
|
||||
</Grid>
|
||||
|
||||
<Grid item md={12}>
|
||||
<Typography sx={informacaoTitleStyles}> Revisão GIT (se aplicavel) </Typography>
|
||||
<Typography sx={informacaoContentStyle}>
|
||||
{selectedVersion.gitHash ?
|
||||
(
|
||||
<>
|
||||
{selectedVersion.gitHash}
|
||||
<IconButton sx={{ transform: 'scale(0.6)', margin: '-10px 0px 0px 0px' }}
|
||||
title="Copia"
|
||||
onClick={() => copyText(selectedVersion.gitHash)}
|
||||
>
|
||||
<FileCopyIcon />
|
||||
</IconButton>
|
||||
</>
|
||||
) : (
|
||||
"N/D"
|
||||
)}
|
||||
|
||||
</Typography>
|
||||
|
||||
</Grid>
|
||||
</Grid>
|
||||
</ListItem>
|
||||
|
||||
</List>
|
||||
|
||||
<Divider/>
|
||||
|
||||
{selectedVersion.added && (
|
||||
<List>
|
||||
<ListItem sx={listItemStyle}>
|
||||
{namesWithIcons[0].icon}
|
||||
<Typography sx={infoTitlesStyle}>
|
||||
|
||||
Novas Funcionalidades
|
||||
</Typography>
|
||||
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Typography sx={{ margin: '0px 0px 10px -10px', fontSize: '15px' }}
|
||||
dangerouslySetInnerHTML={{ __html: selectedVersion.added }} />
|
||||
</ListItem>
|
||||
</List>
|
||||
)}
|
||||
|
||||
<Divider/>
|
||||
|
||||
{selectedVersion.bugfixes && (
|
||||
<List>
|
||||
<ListItem sx={listItemStyle}>
|
||||
{namesWithIcons[1].icon}
|
||||
<Typography sx={infoTitlesStyle}>
|
||||
Correção de Falhas
|
||||
</Typography>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Typography sx={{ margin: '0px 0px 10px -10px', fontSize: '15px' }}
|
||||
dangerouslySetInnerHTML={{ __html: selectedVersion.bugfixes }} />
|
||||
|
||||
</ListItem>
|
||||
|
||||
</List>
|
||||
)}
|
||||
|
||||
<Divider/>
|
||||
|
||||
{selectedVersion.improvements && (
|
||||
<List>
|
||||
<ListItem sx={listItemStyle}>
|
||||
{namesWithIcons[2].icon}
|
||||
<Typography sx={infoTitlesStyle}>
|
||||
Melhorias
|
||||
</Typography>
|
||||
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Typography sx={{ margin: '0px 0px 10px -10px', fontSize: '15px' }}
|
||||
dangerouslySetInnerHTML={{ __html: selectedVersion.improvements }} />
|
||||
|
||||
</ListItem>
|
||||
|
||||
</List>
|
||||
|
||||
)}
|
||||
|
||||
<Divider/>
|
||||
|
||||
|
||||
|
||||
</Card>
|
||||
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export {VersionComponent, InfoComponent};
|
||||
@ -0,0 +1,73 @@
|
||||
import * as React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import OutlinedInput from '@mui/material/OutlinedInput';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import Select, { SelectChangeEvent } from '@mui/material/Select';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Grid from '@mui/material/Grid';
|
||||
|
||||
|
||||
interface NameWithIcon {
|
||||
name: string;
|
||||
icon: JSX.Element; // Tipo di elemento per l'icona
|
||||
}
|
||||
|
||||
interface Props {
|
||||
names: NameWithIcon[]; // Modifica il tipo delle props per accettare nomi con icone
|
||||
filter: string[]; // Aggiungi il tipo di props per l'array filter
|
||||
|
||||
}
|
||||
|
||||
const MultipleSelectFilter: React.FC<Props> = ({ names, filter, setFilter }) => {
|
||||
const [personName, setPersonName] = React.useState<string[]>([]);
|
||||
|
||||
const handleChange = (event: SelectChangeEvent<typeof personName>) => {
|
||||
const {
|
||||
target: { value },
|
||||
} = event;
|
||||
const selectedValues = typeof value === 'string' ? value.split(',') : value;
|
||||
setPersonName(selectedValues);
|
||||
setFilter(selectedValues); // Aggiorna l'array filter quando cambia la selezione
|
||||
};
|
||||
|
||||
return (
|
||||
<Grid>
|
||||
<FormControl sx={{ m: 1, minWidth: 240}} >
|
||||
<InputLabel id="demo-multiple-chip-label" sx={{ marginTop: '-8px' }}>Filtra </InputLabel>
|
||||
<Select
|
||||
labelId="demo-multiple-chip-label"
|
||||
//id="demo-multiple-chip"
|
||||
multiple
|
||||
size="small"
|
||||
value={personName}
|
||||
onChange={handleChange}
|
||||
input={<OutlinedInput id="select-multiple-chip" label="Chip" />}
|
||||
renderValue={(selected) => (
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: '0.8px' }}>
|
||||
{selected.map((value) => (
|
||||
<Chip
|
||||
key={value}
|
||||
label={names.find((item) => item.name === value)?.icon}
|
||||
sx={{ fontSize: '2rem'}}/>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
>
|
||||
|
||||
{names.map((nameWithIcon) => (
|
||||
<MenuItem key={nameWithIcon.name} value={nameWithIcon.name}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
{nameWithIcon.icon}
|
||||
<span style={{ marginLeft: '10px' }}>{nameWithIcon.name}</span>
|
||||
</Box>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
||||
export default MultipleSelectFilter;
|
||||
@ -0,0 +1,101 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import Box from '@mui/material/Box';
|
||||
import OutlinedInput from '@mui/material/OutlinedInput';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import Select, { SelectChangeEvent } from '@mui/material/Select';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Grid from '@mui/material/Grid';
|
||||
|
||||
import DonutLargeIcon from '@mui/icons-material/DonutLarge';
|
||||
import SquareFootIcon from '@mui/icons-material/SquareFoot';
|
||||
import StraightenIcon from '@mui/icons-material/Straighten';
|
||||
import AccountBalanceIcon from '@mui/icons-material/AccountBalance';
|
||||
import WarehouseIcon from '@mui/icons-material/Warehouse';
|
||||
import EuroIcon from '@mui/icons-material/Euro';
|
||||
import PowerIcon from '@mui/icons-material/Power';
|
||||
import LocalFireDepartmentIcon from '@mui/icons-material/LocalFireDepartment';
|
||||
import ConstructionIcon from '@mui/icons-material/Construction';
|
||||
import HeightIcon from '@mui/icons-material/Height';
|
||||
|
||||
const getIconForModule = (moduleName) => {
|
||||
switch (moduleName) {
|
||||
case 'CORE': return <DonutLargeIcon />;
|
||||
case 'FOR': return <SquareFootIcon />;
|
||||
case 'IE': return <PowerIcon/>;
|
||||
case 'LME':
|
||||
case 'LAB': return <StraightenIcon/>;
|
||||
case 'ELV': return <HeightIcon />;
|
||||
case 'FIN': return <AccountBalanceIcon />;
|
||||
case 'ATV': return <AccountBalanceIcon />;
|
||||
case 'PAD': return <EuroIcon />;
|
||||
case 'OBL':
|
||||
case 'OBLER': return <WarehouseIcon/>;
|
||||
case 'GAS': return <LocalFireDepartmentIcon/>;
|
||||
case 'FUN': return <ConstructionIcon />;
|
||||
default: return <AccountBalanceIcon />;
|
||||
}
|
||||
};
|
||||
|
||||
interface Props {
|
||||
modules: { value: string }[];
|
||||
moduleFilter: string[]; // Aggiungi il tipo di props per l'array filter
|
||||
setModuleFilter: (filter: string[]) => void;
|
||||
}
|
||||
|
||||
const MultipleSelectModule: React.FC<Props> = ({ modules, moduleFilter, setModuleFilter }) => {
|
||||
const [selectedModules, setSelectedModules] = React.useState<string[]>([]);
|
||||
|
||||
const handleChange = (event: SelectChangeEvent<typeof selectedModules>) => {
|
||||
console.log("QUi--> ", event.target, event.target.value, event.target.name)
|
||||
setSelectedModules(event.target.value as string[]);
|
||||
|
||||
const selectedValues = (event.target.value as { value: string, name: string }[]).map(module => module.value);
|
||||
setModuleFilter(selectedValues); // Update moduleFilter with only the 'value' properties
|
||||
};
|
||||
|
||||
return (
|
||||
<Grid>
|
||||
<FormControl sx={{ m: 1, minWidth: 240}}>
|
||||
<InputLabel id="demo-multiple-chip-label" sx={{ marginTop: '-8px' }}>Selecionar modulo</InputLabel>
|
||||
<Select
|
||||
fullWidth
|
||||
labelId="demo-multiple-chip-label"
|
||||
//id="demo-multiple-chip"
|
||||
multiple
|
||||
size="small"
|
||||
value={selectedModules}
|
||||
onChange={handleChange}
|
||||
input={<OutlinedInput id="select-multiple-chip" label="Chip" />}
|
||||
renderValue={(selected) => {
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: '0.1px' }}>
|
||||
{selected.map((value) => (
|
||||
<Chip
|
||||
key={value}
|
||||
icon={getIconForModule(value.name)}
|
||||
sx={{
|
||||
fontSize: '2rem', backgroundColor: 'transparent'}} />
|
||||
))}
|
||||
</Box>
|
||||
);
|
||||
}}
|
||||
>
|
||||
{modules.map((modulee) => (
|
||||
<MenuItem key={modulee} value={modulee}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'right' }}>
|
||||
{getIconForModule(modulee.name)}
|
||||
<span style={{ marginLeft: '10px' }}>{modulee.value}</span>
|
||||
</Box>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default MultipleSelectModule;
|
||||
@ -0,0 +1,13 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
// to log results (for example: reportWebVitals(console.log))
|
||||
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
||||
reportWebVitals();
|
||||
@ -0,0 +1,13 @@
|
||||
const reportWebVitals = onPerfEntry => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
getFID(onPerfEntry);
|
||||
getFCP(onPerfEntry);
|
||||
getLCP(onPerfEntry);
|
||||
getTTFB(onPerfEntry);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default reportWebVitals;
|
||||
@ -0,0 +1,5 @@
|
||||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import '@testing-library/jest-dom';
|
||||
Loading…
Reference in New Issue