Marketplace page UI/ UX enhancements (#4819)
* style enhancements * Introduce autocomplete to select usecases * add grid gap property * add tooltip to display remaining selected items on hover * use ordered list to show more items
This commit is contained in:
Anoop P
GitHub
parent
ee5ab1bd6d
commit
9d438529a6
|
|
@ -101,7 +101,14 @@ const ExportDialog = ({ show, onCancel, onExport }) => {
|
||||||
</DialogTitle>
|
</DialogTitle>
|
||||||
<DialogContent>
|
<DialogContent>
|
||||||
{!isExporting && (
|
{!isExporting && (
|
||||||
<Stack direction='row' sx={{ gap: 1, flexWrap: 'wrap' }}>
|
<Stack
|
||||||
|
direction='row'
|
||||||
|
sx={{
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: 'repeat(2, 1fr)',
|
||||||
|
gap: 1
|
||||||
|
}}
|
||||||
|
>
|
||||||
{dataToExport.map((data, index) => (
|
{dataToExport.map((data, index) => (
|
||||||
<FormControlLabel
|
<FormControlLabel
|
||||||
key={index}
|
key={index}
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,11 @@ import {
|
||||||
ToggleButtonGroup,
|
ToggleButtonGroup,
|
||||||
MenuItem,
|
MenuItem,
|
||||||
Button,
|
Button,
|
||||||
Tabs
|
Tabs,
|
||||||
|
Autocomplete,
|
||||||
|
TextField,
|
||||||
|
Chip,
|
||||||
|
Tooltip
|
||||||
} from '@mui/material'
|
} from '@mui/material'
|
||||||
import { useTheme } from '@mui/material/styles'
|
import { useTheme } from '@mui/material/styles'
|
||||||
import { IconLayoutGrid, IconList, IconX } from '@tabler/icons-react'
|
import { IconLayoutGrid, IconList, IconX } from '@tabler/icons-react'
|
||||||
|
|
@ -621,63 +625,86 @@ const Marketplace = () => {
|
||||||
</ToggleButtonGroup>
|
</ToggleButtonGroup>
|
||||||
</ViewHeader>
|
</ViewHeader>
|
||||||
{hasPermission('templates:marketplace') && hasPermission('templates:custom') && (
|
{hasPermission('templates:marketplace') && hasPermission('templates:custom') && (
|
||||||
<Tabs value={activeTabValue} onChange={handleTabChange} textColor='primary' aria-label='tabs' centered>
|
<Stack direction='row' justifyContent='space-between' sx={{ mb: 2 }}>
|
||||||
|
<Tabs value={activeTabValue} onChange={handleTabChange} textColor='primary' aria-label='tabs'>
|
||||||
<PermissionTab permissionId='templates:marketplace' value={0} label='Community Templates' />
|
<PermissionTab permissionId='templates:marketplace' value={0} label='Community Templates' />
|
||||||
<PermissionTab permissionId='templates:custom' value={1} label='My Templates' />
|
<PermissionTab permissionId='templates:custom' value={1} label='My Templates' />
|
||||||
</Tabs>
|
</Tabs>
|
||||||
)}
|
<Autocomplete
|
||||||
<Available permission='templates:marketplace'>
|
id='useCases'
|
||||||
<TabPanel value={activeTabValue} index={0}>
|
multiple
|
||||||
<Stack direction='row' sx={{ gap: 2, my: 2, alignItems: 'center', flexWrap: 'wrap' }}>
|
|
||||||
{usecases.map((usecase, index) => (
|
|
||||||
<FormControlLabel
|
|
||||||
key={index}
|
|
||||||
size='small'
|
size='small'
|
||||||
control={
|
options={usecases}
|
||||||
<Checkbox
|
value={selectedUsecases}
|
||||||
disabled={eligibleUsecases.length === 0 ? true : !eligibleUsecases.includes(usecase)}
|
onChange={(_, newValue) => setSelectedUsecases(newValue)}
|
||||||
color='success'
|
disableCloseOnSelect
|
||||||
checked={selectedUsecases.includes(usecase)}
|
getOptionLabel={(option) => option}
|
||||||
onChange={(event) => {
|
isOptionEqualToValue={(option, value) => option === value}
|
||||||
setSelectedUsecases(
|
renderOption={(props, option, { selected }) => {
|
||||||
event.target.checked
|
const isDisabled = eligibleUsecases.length > 0 && !eligibleUsecases.includes(option)
|
||||||
? [...selectedUsecases, usecase]
|
|
||||||
: selectedUsecases.filter((item) => item !== usecase)
|
return (
|
||||||
|
<li {...props} style={{ pointerEvents: isDisabled ? 'none' : 'auto' }}>
|
||||||
|
<Checkbox checked={selected} color='success' disabled={isDisabled} />
|
||||||
|
<ListItemText primary={option} />
|
||||||
|
</li>
|
||||||
)
|
)
|
||||||
}}
|
}}
|
||||||
|
renderInput={(params) => <TextField {...params} label='Usecases' />}
|
||||||
sx={{
|
sx={{
|
||||||
'& .MuiSvgIcon-root': {
|
width: 300
|
||||||
color:
|
|
||||||
eligibleUsecases.length === 0 || !eligibleUsecases.includes(usecase)
|
|
||||||
? '#888 !important'
|
|
||||||
: undefined
|
|
||||||
}
|
|
||||||
}}
|
}}
|
||||||
/>
|
limitTags={2}
|
||||||
}
|
renderTags={(value, getTagProps) => {
|
||||||
label={usecase}
|
const totalTags = value.length
|
||||||
|
const limitTags = 2
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{value.slice(0, limitTags).map((option, index) => (
|
||||||
|
<Chip
|
||||||
|
{...getTagProps({ index })}
|
||||||
|
key={index}
|
||||||
|
label={option}
|
||||||
sx={{
|
sx={{
|
||||||
'& .MuiFormControlLabel-label': {
|
height: 24,
|
||||||
color:
|
'& .MuiSvgIcon-root': {
|
||||||
eligibleUsecases.length === 0 || !eligibleUsecases.includes(usecase)
|
fontSize: 16,
|
||||||
? '#888 !important'
|
background: 'None'
|
||||||
: undefined
|
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</Stack>
|
|
||||||
{selectedUsecases.length > 0 && (
|
|
||||||
<Button
|
|
||||||
sx={{ width: 'max-content', mb: 2, borderRadius: '20px' }}
|
|
||||||
variant='outlined'
|
|
||||||
onClick={() => clearAllUsecases()}
|
|
||||||
startIcon={<IconX />}
|
|
||||||
>
|
|
||||||
Clear All
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
|
{totalTags > limitTags && (
|
||||||
|
<Tooltip
|
||||||
|
title={
|
||||||
|
<ol style={{ paddingLeft: '20px' }}>
|
||||||
|
{value.slice(limitTags).map((item, i) => (
|
||||||
|
<li key={i}>{item}</li>
|
||||||
|
))}
|
||||||
|
</ol>
|
||||||
|
}
|
||||||
|
placement='top'
|
||||||
|
>
|
||||||
|
+{totalTags - limitTags}
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
slotProps={{
|
||||||
|
paper: {
|
||||||
|
sx: {
|
||||||
|
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Stack>
|
||||||
|
)}
|
||||||
|
<Available permission='templates:marketplace'>
|
||||||
|
<TabPanel value={activeTabValue} index={0}>
|
||||||
{!view || view === 'card' ? (
|
{!view || view === 'card' ? (
|
||||||
<>
|
<>
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue