Skip to content

Commit

Permalink
Merge pull request #56 from NASA-PDS/ts-54
Browse files Browse the repository at this point in the history 
#54 Add query to cart is too hidden on /search
  • Loading branch information
@tariqksoliman
tariqksoliman authored Nov 5, 2024
2 parents d45e1a2 + 6f10e50 commit 15f896b
Show file tree
Hide file tree
Showing 4 changed files with 180 additions and 36 deletions.
30 changes: 28 additions & 2 deletions src/components/ResultsSorter/ResultsSorter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,27 @@ import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward'
import { setResultSorting } from '../../core/redux/actions/actions.js'

import { makeStyles } from '@material-ui/core/styles'
import { Typography } from '@material-ui/core'

const useStyles = makeStyles((theme) => ({
ResultsSorter: {
height: '26px',
marginLeft: '4px',
margin: '7px 5px',
},
label: {
lineHeight: '26px',
paddingRight: '4px',
fontSize: '10px',
textTransform: 'uppercase',
fontWeight: 'bold',
},
flex: {
'display': 'flex',
'& > svg': {
paddingTop: '2px',
},
},
}))

// items is [{ name: 'My Items' }, { ... }]
Expand Down Expand Up @@ -45,7 +60,7 @@ export default function ResultsSorter(props) {
//Add all active filters as potential sorts
Object.keys(activeFilters).forEach((filter) => {
activeFilters[filter].facets.forEach((f) => {
if (f.type != 'text') {
if (f.type != 'text' && f.field !== '*') {
if (resultSorting.field === f.field) selectedIndex = items.length
items.push({ name: f.field })
flatFields.push(f.field)
Expand Down Expand Up @@ -74,10 +89,21 @@ export default function ResultsSorter(props) {
<SplitButton
className={c.ResultsSorter}
startIcon={
resultSorting.direction === 'desc' ? <ArrowDownwardIcon /> : <ArrowUpwardIcon />
resultSorting.direction === 'desc' ? (
<div className={c.flex}>
<Typography className={c.label}>Sort</Typography>
<ArrowDownwardIcon />
</div>
) : (
<div className={c.flex}>
<Typography className={c.label}>Sort</Typography>
<ArrowUpwardIcon />
</div>
)
}
truncateDelimiter="."
items={items}
variant="outlined"
forceIndex={selectedIndex}
onChange={(item, index) => {
dispatch(setResultSorting(item.name))
Expand Down
16 changes: 14 additions & 2 deletions src/components/SplitButton/SplitButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,15 @@ import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles((theme) => ({
SplitButton: {
'borderRadius': '2px',
'& > .MuiButton-root': {
background: theme.palette.swatches.grey.grey0,
},
'& .MuiButtonGroup-groupedOutlinedHorizontal:not(:last-child)': {
borderRight: '2px solid rgba(23, 23, 27, 0.5) !important',
},
},
contained: {
'border': 'none',
'borderRadius': '2px',
'& > .MuiButton-root': {
Expand Down Expand Up @@ -86,6 +95,7 @@ export default function SplitButton(props) {
forceIndex,
startingIndex,
truncateDelimiter,
variant,
} = props

const c = useStyles()
Expand Down Expand Up @@ -154,8 +164,10 @@ export default function SplitButton(props) {
return (
<>
<ButtonGroup
className={`${c.SplitButton} ${className}`}
variant="contained"
className={clsx(c.SplitButton, className, {
[c.contained]: variant != 'outlined',
})}
variant={variant || 'contained'}
color="secondary"
size="small"
aria-label="split button"
Expand Down
98 changes: 76 additions & 22 deletions src/pages/FileExplorer/Columns/Columns.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,8 @@ import FilterListIcon from '@material-ui/icons/FilterList'
import Draggable from 'react-draggable'
import Highlighter from 'react-highlight-words'

const initialColumnWidth = 180
const minColumnWidth = 180
const initialColumnWidth = 220
const minColumnWidth = 220

const useStyles = makeStyles((theme) => ({
Columns: {
Expand Down Expand Up @@ -554,14 +554,18 @@ const Column = (props) => {
if (!isMobile && content.length === 1 && firstItemRef && firstItemRef.current) {
firstItemRef.current.click()
}
// Find widest column name
let longestName = ''
// Find widest column name // start with heading name
let longestName = prevNames
? prevNames.map((n) => n.title).join('/')
: prevColumn?.active?.key
? prevColumn.active.key
: ''
content.forEach((c) => {
let name = getIn(c, '_source.archive.name')
if (name == null) name = getIn(c, 'key', '')
if (name.length > longestName.length) longestName = name
})
const bestWidth = Math.max(longestName.length * 9.25 + 75, minColumnWidth)
const bestWidth = Math.max(longestName.length * 9 + 70, minColumnWidth)
colRef.current.style.width = `${bestWidth}px`
}
}
Expand Down Expand Up @@ -725,22 +729,42 @@ const Column = (props) => {
{pds_standard === 'pds3' ? 'Volumes' : 'Bundles'}
</Typography>
</div>
<MenuButton
key={1}
options={['Filter', 'Regex Search']}
buttonComponent={<MoreVertIcon fontSize="inherit" />}
title={'Actions'}
onChange={(option) => {
if (option === 'Filter')
setFilterSearchOpen(!filterSearchOpen)
else if (option === 'Regex Search')
dispatch(
setModal('regex', {
uri: currentParentUri,
})
)
}}
/>
<div>
<Tooltip title="URI Regex Search Here" arrow>
<IconButton
//className={}
aria-label="regex"
onClick={() => {
dispatch(
setModal('regex', {
uri: currentParentUri,
})
)
}}
>
<SearchIcon fontSize="small" />
</IconButton>
</Tooltip>
{/*
<MenuButton
key={1}
options={['Filter', 'Regex Search']}
buttonComponent={
<MoreVertIcon fontSize="inherit" />
}
title={'Actions'}
onChange={(option) => {
if (option === 'Filter')
setFilterSearchOpen(!filterSearchOpen)
else if (option === 'Regex Search')
dispatch(
setModal('regex', {
uri: currentParentUri,
})
)
}}
/>*/}
</div>
</div>
) : null}
{params.type === 'directory' && prevColumn?.active?.key != null ? (
Expand All @@ -755,6 +779,36 @@ const Column = (props) => {
? prevNames.map((n) => n.title).join('/')
: prevColumn.active.key}
</Typography>
<div>
<Tooltip title="Filter List" arrow>
<IconButton
//className={}
aria-label="filter"
onClick={() => {
setFilterSearchOpen(!filterSearchOpen)
}}
>
<FilterListIcon fontSize="small" />
</IconButton>
</Tooltip>

<Tooltip title="URI Regex Search Here" arrow>
<IconButton
//className={}
aria-label="regex"
onClick={() => {
dispatch(
setModal('regex', {
uri: currentParentUri,
})
)
}}
>
<SearchIcon fontSize="small" />
</IconButton>
</Tooltip>
</div>
{/*
<MenuButton
key={1}
options={['Filter', 'Regex Search']}
Expand All @@ -770,7 +824,7 @@ const Column = (props) => {
})
)
}}
/>
/>*/}
</div>
) : null}
</>
Expand Down
72 changes: 62 additions & 10 deletions src/pages/Search/Panels/ResultsPanel/subcomponents/Heading/Heading.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import RotateRightIcon from '@material-ui/icons/RotateRight'
import PhotoSizeSelectActualIcon from '@material-ui/icons/PhotoSizeSelectActual'
import PhotoSizeSelectLargeIcon from '@material-ui/icons/PhotoSizeSelectLarge'
import PhotoSizeSelectSmallIcon from '@material-ui/icons/PhotoSizeSelectSmall'
import SwapVertIcon from '@material-ui/icons/SwapVert'
import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart'

import ResultsSorter from '../../../../../../components/ResultsSorter/ResultsSorter'
import MenuButton from '../../../../../../components/MenuButton/MenuButton'
Expand Down Expand Up @@ -103,6 +103,17 @@ const useStyles = makeStyles((theme) => ({
margin: '7px 3px',
background: theme.palette.accent.main,
},
button2: {
'color': theme.palette.text.secondary,
'fontSize': '11px',
'lineHeight': '11px',
'margin': '7px 3px',
'background': theme.palette.swatches.red.red500,
'&:hover': {
color: theme.palette.text.secondary,
background: theme.palette.swatches.red.red400,
},
},
}))

const Heading = (props) => {
Expand All @@ -112,12 +123,14 @@ const Heading = (props) => {
const dispatch = useDispatch()

const theme = useTheme()
const isMobileXS = useMediaQuery(theme.breakpoints.down('xs'))
const isMobile = useMediaQuery(theme.breakpoints.down('md'))

const filterType = useSelector((state) => state.getIn(['filterType']))
const gridSize = useSelector((state) => state.getIn(['gridSize']))

const gridSizes = isMobileXS ? [92, 128, 256] : [128, 192, 256]
const resultKeysChecked = useSelector((state) => state.getIn(['resultKeysChecked']).toJS())

const gridSizes = isMobile ? [92, 128, 256] : [128, 192, 256]

const rotate90 = () => {
window.atlasGlobal.imageRotation = (window.atlasGlobal.imageRotation + 90) % 360
Expand Down Expand Up @@ -145,7 +158,7 @@ const Heading = (props) => {
<div className={c.middle}>{filterType === 'basic' && <ChippedFilters />}</div>
<div className={c.right}>
<ResultsSorter />
{activeView === 'grid' && !isMobileXS && (
{activeView === 'grid' && !isMobile && (
<div className={c.gridSize}>
<Tooltip title="Small Grid Images" arrow>
<IconButton
Expand Down Expand Up @@ -191,7 +204,7 @@ const Heading = (props) => {
</Tooltip>
</div>
)}
{activeView === 'grid' && !isMobileXS && (
{activeView === 'grid' && !isMobile && (
<Tooltip title="Rotate Images 90°" arrow>
<IconButton
className={c.rotateButton}
Expand All @@ -204,7 +217,7 @@ const Heading = (props) => {
</IconButton>
</Tooltip>
)}
{activeView === 'table' && !isMobileXS && (
{activeView === 'table' && !isMobile && (
<Button
className={c.button1}
variant="contained"
Expand All @@ -215,27 +228,66 @@ const Heading = (props) => {
Edit Columns
</Button>
)}
<Tooltip
title={
resultKeysChecked.length > 0
? 'Add Selected Results to Cart'
: 'Add All Query Results to Cart'
}
arrow
>
<Button
className={resultKeysChecked.length > 0 ? c.button2 : c.button1}
variant="contained"
aria-label={
resultKeysChecked.length > 0
? 'add selected results to cart'
: 'add all query results to cart'
}
size="small"
onClick={() => {
if (resultKeysChecked.length > 0) {
dispatch(addToCart('image', 'checkedResults'))
dispatch(
setSnackBarText('Added Selected Items to Cart!', 'success')
)
} else {
dispatch(addToCart('query', 'lastQuery'))
dispatch(setSnackBarText('Added Query to Cart!', 'success'))
}
}}
endIcon={<AddShoppingCartIcon size="small" />}
>
{isMobile
? resultKeysChecked.length > 0
? 'Add Selected'
: 'Add All'
: resultKeysChecked.length > 0
? 'Add Selected to Cart'
: 'Add All to Cart'}
</Button>
</Tooltip>
<MenuButton
options={
!isMobileXS
!isMobile
? [
'Add Selected Results to Cart',
'Add All Query Results to Cart',
'Add Selected Results to Cart',
'-',
'Deselect All',
]
: activeView === 'table'
? [
'Add Selected Results to Cart',
'Add All Query Results to Cart',
'Add Selected Results to Cart',
'-',
'Deselect All',
'-',
'Edit Columns',
]
: [
'Add Selected Results to Cart',
'Add All Query Results to Cart',
'Add Selected Results to Cart',
'-',
'Deselect All',
'-',
Expand Down

0 comments on commit 15f896b

Please sign in to comment.