farcasclaudiu/Flowise
1
0
Fork 0
mirror of https://github.com/farcasclaudiu/Flowise.git synced 2026-06-28 17:01:00 +03:00
Code Issues Packages Projects Releases Wiki Activity

slight ui update

Browse Source
This commit is contained in:
Henry
2023-11-22 23:55:00 +00:00
parent c716c1972a
commit 0d1cc487a7
1 changed files with 53 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/views/apikey/index.js
+53 -39
View File
@@ -10,7 +10,6 @@ import {
Stack, Stack,
Table, Table,
TableBody, TableBody,
TableCell,
TableContainer, TableContainer,
TableHead, TableHead,
TableRow, TableRow,
@@ -24,7 +23,8 @@ import {
InputAdornment, InputAdornment,
ButtonGroup ButtonGroup
} from '@mui/material' } from '@mui/material'
import { useTheme } from '@mui/material/styles' import TableCell, { tableCellClasses } from '@mui/material/TableCell'
import { useTheme, styled } from '@mui/material/styles'
// project imports // project imports
import MainCard from 'ui-component/cards/MainCard' import MainCard from 'ui-component/cards/MainCard'
@@ -60,12 +60,24 @@ import * as PropTypes from 'prop-types'
import moment from 'moment/moment' import moment from 'moment/moment'
// ==============================|| APIKey ||============================== // // ==============================|| APIKey ||============================== //
const StyledTableCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: {
backgroundColor: theme.palette.action.hover
}
}))
const StyledTableRow = styled(TableRow)(() => ({
// hide last border
'&:last-child td, &:last-child th': {
border: 0
}
}))
function APIKeyRow(props) { function APIKeyRow(props) {
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
return ( return (
<> <>
<TableRow sx={{ '& td': { border: 0 } }}> <TableRow sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
<TableCell scope='row'>{props.apiKey.keyName}</TableCell> <TableCell scope='row'>{props.apiKey.keyName}</TableCell>
<TableCell> <TableCell>
{props.showApiKeys.includes(props.apiKey.apiKey) {props.showApiKeys.includes(props.apiKey.apiKey)
@@ -100,7 +112,7 @@ function APIKeyRow(props) {
<TableCell> <TableCell>
{props.apiKey.chatFlows.length}{' '} {props.apiKey.chatFlows.length}{' '}
{props.apiKey.chatFlows.length > 0 && ( {props.apiKey.chatFlows.length > 0 && (
<IconButton aria-label='expand row' size='small' onClick={() => setOpen(!open)}> <IconButton aria-label='expand row' size='small' color='inherit' onClick={() => setOpen(!open)}>
{props.apiKey.chatFlows.length > 0 && open ? <IconChevronsUp /> : <IconChevronsDown />} {props.apiKey.chatFlows.length > 0 && open ? <IconChevronsUp /> : <IconChevronsDown />}
</IconButton> </IconButton>
)} )}
@@ -117,42 +129,44 @@ function APIKeyRow(props) {
</IconButton> </IconButton>
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableRow> {open && (
<TableCell sx={{ pb: 0, pt: 0 }} colSpan={6}> <TableRow sx={{ '& td': { border: 0 } }}>
<Collapse in={open} timeout='auto' unmountOnExit> <TableCell sx={{ pb: 0, pt: 0 }} colSpan={6}>
<Box sx={{ margin: 1 }}> <Collapse in={open} timeout='auto' unmountOnExit>
<Table size='small' aria-label='flows'> <Box sx={{ mt: 1, mb: 2, borderRadius: '15px', border: '1px solid' }}>
<TableHead> <Table aria-label='chatflow table'>
<TableRow> <TableHead>
<TableCell sx={{ width: '30%' }}>Chatflow Name</TableCell> <TableRow>
<TableCell sx={{ width: '20%' }}>Modified On</TableCell> <StyledTableCell sx={{ width: '30%', borderTopLeftRadius: '15px' }}>
<TableCell sx={{ width: '50%' }}>Category</TableCell> Chatflow Name
</TableRow> </StyledTableCell>
</TableHead> <StyledTableCell sx={{ width: '20%' }}>Modified On</StyledTableCell>
<TableBody> <StyledTableCell sx={{ width: '50%', borderTopRightRadius: '15px' }}>Category</StyledTableCell>
{props.apiKey.chatFlows.map((flow, index) => (
<TableRow key={index}>
<TableCell component='th' scope='row'>
{flow.flowName}
</TableCell>
<TableCell>{moment(flow.updatedDate).format('DD-MMM-YY')}</TableCell>
<TableCell>
&nbsp;
{flow.category &&
flow.category
.split(';')
.map((tag, index) => (
<Chip key={index} label={tag} style={{ marginRight: 5, marginBottom: 5 }} />
))}
</TableCell>
</TableRow> </TableRow>
))} </TableHead>
</TableBody> <TableBody>
</Table> {props.apiKey.chatFlows.map((flow, index) => (
</Box> <StyledTableRow key={index}>
</Collapse> <TableCell>{flow.flowName}</TableCell>
</TableCell> <TableCell>{moment(flow.updatedDate).format('DD-MMM-YY')}</TableCell>
</TableRow> <TableCell>
&nbsp;
{flow.category &&
flow.category
.split(';')
.map((tag, index) => (
<Chip key={index} label={tag} style={{ marginRight: 5, marginBottom: 5 }} />
))}
</TableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</Box>
</Collapse>
</TableCell>
</TableRow>
)}
</> </>
) )
} }