UX Changes: Ability to view as table and search on the dashboard
This commit is contained in:
vinodkiran
parent
a311e024e1
commit
f21f5257ca
|
|
@ -1,5 +1,6 @@
|
|||
import { styled } from '@mui/material/styles'
|
||||
import { Button } from '@mui/material'
|
||||
import MuiToggleButton from '@mui/material/ToggleButton'
|
||||
|
||||
export const StyledButton = styled(Button)(({ theme, color = 'primary' }) => ({
|
||||
color: 'white',
|
||||
|
|
@ -9,3 +10,10 @@ export const StyledButton = styled(Button)(({ theme, color = 'primary' }) => ({
|
|||
backgroundImage: `linear-gradient(rgb(0 0 0/10%) 0 0)`
|
||||
}
|
||||
}))
|
||||
|
||||
export const StyledToggleButton = styled(MuiToggleButton)(({ theme, color = 'primary' }) => ({
|
||||
'&.Mui-selected, &.Mui-selected:hover': {
|
||||
color: 'white',
|
||||
backgroundColor: theme.palette[color].main
|
||||
}
|
||||
}))
|
||||
|
|
|
|||
|
|
@ -0,0 +1,133 @@
|
|||
import PropTypes from 'prop-types'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { IconEdit } from '@tabler/icons'
|
||||
import moment from 'moment'
|
||||
import { styled } from '@mui/material/styles'
|
||||
import Table from '@mui/material/Table'
|
||||
import TableBody from '@mui/material/TableBody'
|
||||
import TableCell, { tableCellClasses } from '@mui/material/TableCell'
|
||||
import TableContainer from '@mui/material/TableContainer'
|
||||
import TableHead from '@mui/material/TableHead'
|
||||
import TableRow from '@mui/material/TableRow'
|
||||
import Paper from '@mui/material/Paper'
|
||||
import { Button, Typography } from '@mui/material'
|
||||
|
||||
const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
||||
[`&.${tableCellClasses.head}`]: {
|
||||
backgroundColor: theme.palette.common.black,
|
||||
color: theme.palette.common.white
|
||||
},
|
||||
[`&.${tableCellClasses.body}`]: {
|
||||
fontSize: 14
|
||||
}
|
||||
}))
|
||||
|
||||
const StyledTableRow = styled(TableRow)(({ theme }) => ({
|
||||
'&:nth-of-type(odd)': {
|
||||
backgroundColor: theme.palette.action.hover
|
||||
},
|
||||
// hide last border
|
||||
'&:last-child td, &:last-child th': {
|
||||
border: 0
|
||||
}
|
||||
}))
|
||||
|
||||
export const FlowListTable = ({ data, images, filterFunction }) => {
|
||||
const navigate = useNavigate()
|
||||
const goToCanvas = (selectedChatflow) => {
|
||||
navigate(`/canvas/${selectedChatflow.id}`)
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<TableContainer style={{ marginTop: '30', border: 1 }} component={Paper}>
|
||||
<Table sx={{ minWidth: 650 }} size='small' aria-label='a dense table'>
|
||||
<TableHead>
|
||||
<TableRow sx={{ marginTop: '10', backgroundColor: 'primary' }}>
|
||||
<StyledTableCell
|
||||
component='th'
|
||||
scope='row'
|
||||
sx={{ fontSize: '1.1rem', fontWeight: 200 }}
|
||||
style={{ width: '25%' }}
|
||||
key='0'
|
||||
>
|
||||
Name
|
||||
</StyledTableCell>
|
||||
<StyledTableCell style={{ width: '35%' }} key='1'>
|
||||
Nodes
|
||||
</StyledTableCell>
|
||||
<StyledTableCell style={{ width: '30%' }} key='2'>
|
||||
Last Modified Date
|
||||
</StyledTableCell>
|
||||
<StyledTableCell style={{ width: '10%' }} key='3'>
|
||||
Actions
|
||||
</StyledTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{data.filter(filterFunction).map((row, index) => (
|
||||
<StyledTableRow key={index}>
|
||||
<TableCell key='0'>
|
||||
<Typography
|
||||
sx={{ fontSize: '1.2rem', fontWeight: 500, overflowWrap: 'break-word', whiteSpace: 'pre-line' }}
|
||||
>
|
||||
{row.templateName || row.name}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
|
||||
<TableCell key='1'>
|
||||
{images[row.id] && (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
marginTop: 5
|
||||
}}
|
||||
>
|
||||
{images[row.id].map((img) => (
|
||||
<div
|
||||
key={img}
|
||||
style={{
|
||||
width: 35,
|
||||
height: 35,
|
||||
marginRight: 5,
|
||||
borderRadius: '50%',
|
||||
backgroundColor: 'white',
|
||||
marginTop: 5
|
||||
}}
|
||||
>
|
||||
<img
|
||||
style={{ width: '100%', height: '100%', padding: 5, objectFit: 'contain' }}
|
||||
alt=''
|
||||
src={img}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell key='2'>{moment(row.updatedDate).format('dddd, MMMM Do, YYYY h:mm:ss A')}</TableCell>
|
||||
<TableCell key='3'>
|
||||
<Button
|
||||
variant='outlined'
|
||||
sx={{ marginRight: '10px' }}
|
||||
onClick={() => goToCanvas(row)}
|
||||
startIcon={<IconEdit />}
|
||||
>
|
||||
Open
|
||||
</Button>
|
||||
</TableCell>
|
||||
</StyledTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
FlowListTable.propTypes = {
|
||||
data: PropTypes.object,
|
||||
images: PropTypes.array,
|
||||
filterFunction: PropTypes.func
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import * as React from 'react'
|
||||
import ViewListIcon from '@mui/icons-material/ViewList'
|
||||
import ViewModuleIcon from '@mui/icons-material/ViewModule'
|
||||
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
|
||||
import { StyledToggleButton } from '../button/StyledButton'
|
||||
|
||||
export default function Toolbar() {
|
||||
const [view, setView] = React.useState('list')
|
||||
|
||||
const handleChange = (event, nextView) => {
|
||||
setView(nextView)
|
||||
}
|
||||
|
||||
return (
|
||||
<ToggleButtonGroup value={view} exclusive onChange={handleChange}>
|
||||
<StyledToggleButton variant='contained' value='list' aria-label='list'>
|
||||
<ViewListIcon />
|
||||
</StyledToggleButton>
|
||||
<StyledToggleButton variant='contained' value='module' aria-label='module'>
|
||||
<ViewModuleIcon />
|
||||
</StyledToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
)
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom'
|
|||
import { useSelector } from 'react-redux'
|
||||
|
||||
// material-ui
|
||||
import { Grid, Box, Stack } from '@mui/material'
|
||||
import { Grid, Box, Stack, Toolbar, ToggleButton, ButtonGroup, Typography, InputAdornment, TextField } from '@mui/material'
|
||||
import { useTheme } from '@mui/material/styles'
|
||||
|
||||
// project imports
|
||||
|
|
@ -11,7 +11,6 @@ import MainCard from 'ui-component/cards/MainCard'
|
|||
import ItemCard from 'ui-component/cards/ItemCard'
|
||||
import { gridSpacing } from 'store/constant'
|
||||
import WorkflowEmptySVG from 'assets/images/workflow_empty.svg'
|
||||
import { StyledButton } from 'ui-component/button/StyledButton'
|
||||
import LoginDialog from 'ui-component/dialog/LoginDialog'
|
||||
|
||||
// API
|
||||
|
|
@ -24,7 +23,13 @@ import useApi from 'hooks/useApi'
|
|||
import { baseURL } from 'store/constant'
|
||||
|
||||
// icons
|
||||
import { IconPlus } from '@tabler/icons'
|
||||
import { IconPlus, IconSearch } from '@tabler/icons'
|
||||
import * as React from 'react'
|
||||
import ViewListIcon from '@mui/icons-material/ViewList'
|
||||
import ViewModuleIcon from '@mui/icons-material/ViewModule'
|
||||
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
|
||||
import { FlowListTable } from '../../ui-component/table/FlowListTable'
|
||||
import { StyledButton } from '../../ui-component/button/StyledButton'
|
||||
|
||||
// ==============================|| CHATFLOWS ||============================== //
|
||||
|
||||
|
|
@ -35,10 +40,24 @@ const Chatflows = () => {
|
|||
|
||||
const [isLoading, setLoading] = useState(true)
|
||||
const [images, setImages] = useState({})
|
||||
const [search, setSearch] = useState('')
|
||||
const [loginDialogOpen, setLoginDialogOpen] = useState(false)
|
||||
const [loginDialogProps, setLoginDialogProps] = useState({})
|
||||
|
||||
const getAllChatflowsApi = useApi(chatflowsApi.getAllChatflows)
|
||||
const [view, setView] = React.useState('card')
|
||||
|
||||
const handleChange = (event, nextView) => {
|
||||
setView(nextView)
|
||||
}
|
||||
|
||||
const onSearchChange = (event) => {
|
||||
setSearch(event.target.value)
|
||||
}
|
||||
|
||||
function filterFlows(data) {
|
||||
return data.name.toLowerCase().indexOf(search.toLowerCase()) > -1
|
||||
}
|
||||
|
||||
const onLoginClick = (username, password) => {
|
||||
localStorage.setItem('username', username)
|
||||
|
|
@ -102,26 +121,61 @@ const Chatflows = () => {
|
|||
|
||||
return (
|
||||
<MainCard sx={{ background: customization.isDarkMode ? theme.palette.common.black : '' }}>
|
||||
<Stack flexDirection='row'>
|
||||
<h1>Chatflows</h1>
|
||||
<Grid sx={{ mb: 1.25 }} container direction='row'>
|
||||
<Stack flexDirection='column'>
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<Toolbar style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
|
||||
<Typography edge='start' variant='h1' component='div' sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}>
|
||||
Chatflows
|
||||
</Typography>
|
||||
<Box sx={{ flexGrow: 1 }} />
|
||||
<Grid item>
|
||||
<StyledButton variant='contained' sx={{ color: 'white' }} onClick={addNew} startIcon={<IconPlus />}>
|
||||
<TextField
|
||||
size='small'
|
||||
sx={{ width: 400 }}
|
||||
variant='outlined'
|
||||
onChange={onSearchChange}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position='start'>
|
||||
<IconSearch />
|
||||
</InputAdornment>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<Box sx={{ flexGrow: 1 }} />
|
||||
<ButtonGroup disableElevation variant='contained' aria-label='outlined primary button group'>
|
||||
<ButtonGroup disableElevation variant='contained' aria-label='outlined primary button group'>
|
||||
<ToggleButtonGroup value={view} color='primary' exclusive onChange={handleChange}>
|
||||
<ToggleButton variant='contained' value='card' selectedColor='#00abc0'>
|
||||
<ViewModuleIcon />
|
||||
</ToggleButton>
|
||||
<ToggleButton variant='contained' value='list'>
|
||||
<ViewListIcon />
|
||||
</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</ButtonGroup>
|
||||
<Box sx={{ width: 5 }} />
|
||||
<ButtonGroup disableElevation aria-label='outlined primary button group'>
|
||||
<StyledButton variant='contained' onClick={addNew} startIcon={<IconPlus />}>
|
||||
Add New
|
||||
</StyledButton>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</ButtonGroup>
|
||||
</ButtonGroup>
|
||||
</Toolbar>
|
||||
</Box>
|
||||
{!isLoading && (!view || view === 'card') && getAllChatflowsApi.data && (
|
||||
<Grid container spacing={gridSpacing}>
|
||||
{!isLoading &&
|
||||
getAllChatflowsApi.data &&
|
||||
getAllChatflowsApi.data.map((data, index) => (
|
||||
{getAllChatflowsApi.data.filter(filterFlows).map((data, index) => (
|
||||
<Grid key={index} item lg={3} md={4} sm={6} xs={12}>
|
||||
<ItemCard onClick={() => goToCanvas(data)} data={data} images={images[data.id]} />
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
)}
|
||||
{!isLoading && view === 'list' && getAllChatflowsApi.data && (
|
||||
<FlowListTable sx={{ mt: 20 }} data={getAllChatflowsApi.data} images={images} filterFunction={filterFlows} />
|
||||
)}
|
||||
</Stack>
|
||||
|
||||
{!isLoading && (!getAllChatflowsApi.data || getAllChatflowsApi.data.length === 0) && (
|
||||
<Stack sx={{ alignItems: 'center', justifyContent: 'center' }} flexDirection='column'>
|
||||
<Box sx={{ p: 2, height: 'auto' }}>
|
||||
|
|
|
|||
Loading…
Reference in New Issue