Sultan
/
Flowise
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Feature] Add sort capabilities to ChatFlow and AgentFlow tables (#2609) 

Add sort capabilities to ChatFlow and AgentFlow tables
This commit is contained in:
Daniel D'Abate 2024-06-12 22:26:44 +02:00 committed by GitHub
parent 3ab0d99711
commit 76c5e6a893
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 45 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
packages/ui/src/ui-component/table/FlowListTable.jsx
View File

@ -1,3 +1,4 @@
import { useState } from 'react'
import PropTypes from 'prop-types'
import { useSelector } from 'react-redux'
import moment from 'moment'
@ -14,6 +15,7 @@ import {
TableContainer,
TableHead,
TableRow,
TableSortLabel,
Tooltip,
Typography,
useTheme
@ -41,10 +43,42 @@ const StyledTableRow = styled(TableRow)(() => ({
}
}))
const getLocalStorageKeyName = (name, isAgentCanvas) => {
return (isAgentCanvas ? 'agentcanvas' : 'chatflowcanvas') + '_' + name
}
export const FlowListTable = ({ data, images, isLoading, filterFunction, updateFlowsApi, setError, isAgentCanvas }) => {
const theme = useTheme()
const customization = useSelector((state) => state.customization)
const localStorageKeyOrder = getLocalStorageKeyName('order', isAgentCanvas)
const localStorageKeyOrderBy = getLocalStorageKeyName('orderBy', isAgentCanvas)
const [order, setOrder] = useState(localStorage.getItem(localStorageKeyOrder) || 'desc')
const [orderBy, setOrderBy] = useState(localStorage.getItem(localStorageKeyOrderBy) || 'updatedDate')
const handleRequestSort = (property) => {
const isAsc = orderBy === property && order === 'asc'
const newOrder = isAsc ? 'desc' : 'asc'
setOrder(newOrder)
setOrderBy(property)
localStorage.setItem(localStorageKeyOrder, newOrder)
localStorage.setItem(localStorageKeyOrderBy, property)
}
const sortedData = data
? [...data].sort((a, b) => {
if (orderBy === 'name') {
return order === 'asc' ? (a.name || '').localeCompare(b.name || '') : (b.name || '').localeCompare(a.name || '')
} else if (orderBy === 'updatedDate') {
return order === 'asc'
? new Date(a.updatedDate) - new Date(b.updatedDate)
: new Date(b.updatedDate) - new Date(a.updatedDate)
}
return 0
})
: []
return (
<>
<TableContainer sx={{ border: 1, borderColor: theme.palette.grey[900] + 25, borderRadius: 2 }} component={Paper}>
@ -57,7 +91,9 @@ export const FlowListTable = ({ data, images, isLoading, filterFunction, updateF
>
<TableRow>
<StyledTableCell component='th' scope='row' style={{ width: '20%' }} key='0'>
Name
<TableSortLabel active={orderBy === 'name'} direction={order} onClick={() => handleRequestSort('name')}>
Name
</TableSortLabel>
</StyledTableCell>
<StyledTableCell style={{ width: '25%' }} key='1'>
Category
@ -66,7 +102,13 @@ export const FlowListTable = ({ data, images, isLoading, filterFunction, updateF
Nodes
</StyledTableCell>
<StyledTableCell style={{ width: '15%' }} key='3'>
Last Modified Date
<TableSortLabel
active={orderBy === 'updatedDate'}
direction={order}
onClick={() => handleRequestSort('updatedDate')}
>
Last Modified Date
</TableSortLabel>
</StyledTableCell>
<StyledTableCell style={{ width: '10%' }} key='4'>
Actions
@ -113,7 +155,7 @@ export const FlowListTable = ({ data, images, isLoading, filterFunction, updateF
</>
) : (
<>
{data?.filter(filterFunction).map((row, index) => (
{sortedData.filter(filterFunction).map((row, index) => (
<StyledTableRow key={index}>
<StyledTableCell key='0'>
<Tooltip title={row.templateName || row.name}>