Skip to content

Commit

Permalink
Take the search bar to the header
Browse files Browse the repository at this point in the history
  • Loading branch information
@Piumal1999
Piumal1999 committed Oct 15, 2024
1 parent 90473dd commit 9893a66
Showing 1 changed file with 84 additions and 69 deletions.
153 changes: 84 additions & 69 deletions ...evportal/src/main/webapp/source/src/app/components/Applications/Details/Subscriptions.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ const PREFIX = 'Subscriptions';

const classes = {
searchRoot: `${PREFIX}-searchRoot`,
searchBar: `${PREFIX}-searchBar`,
input: `${PREFIX}-input`,
iconButton: `${PREFIX}-iconButton`,
divider: `${PREFIX}-divider`,
Expand All @@ -61,6 +62,7 @@ const classes = {
cardTitle: `${PREFIX}-cardTitle`,
cardContent: `${PREFIX}-cardContent`,
titleWrapper: `${PREFIX}-titleWrapper`,
dialogHeader: `${PREFIX}-dialogHeader`,
dialogTitle: `${PREFIX}-dialogTitle`,
genericMessageWrapper: `${PREFIX}-genericMessageWrapper`,
searchResults: `${PREFIX}-searchResults`,
Expand Down Expand Up @@ -141,17 +143,29 @@ const StyledDialog = styled(Dialog)((
},
},

[`& .${classes.dialogHeader}`]: {
display: 'flex',
justifyContent: 'space-between',
},

[`& .${classes.dialogTitle}`]: {
marginTop: theme.spacing(1),
padding: theme.spacing(2),
},

[`& .${classes.searchRoot}`]: {
marginLeft: 'auto',
width: '50%',
marginTop: theme.spacing(2),
},

[`& .${classes.searchBar}`]: {
padding: '2px 4px',
display: 'flex',
alignItems: 'center',
flex: 1,
marginLeft: theme.spacing(2),
marginRight: theme.spacing(2),
marginRight: theme.spacing(1),
},

[`& .${classes.clearSearchIcon}`]: {
Expand All @@ -177,9 +191,9 @@ const StyledDialog = styled(Dialog)((
},

[`& .${classes.closeButton}`]: {
position: 'absolute',
right: theme.spacing(0.5),
top: theme.spacing(0.5),
height: '100%',
marginTop: theme.spacing(2),
marginRight: theme.spacing(1),
},
}));

Expand Down Expand Up @@ -631,79 +645,80 @@ class Subscriptions extends React.Component {
maxWidth='sm'
className={classes.subscribePop}
>
<MuiDialogTitle className={classes.dialogTitle} disableTypography>
<Typography variant='h6'>
<FormattedMessage
id='Applications.Details.Subscriptions.subscription.management.add'
defaultMessage='Subscribe APIs'
/>
</Typography>
</MuiDialogTitle>
<IconButton
aria-label='close'
className={classes.closeButton}
onClick={this.handleOpenDialog}
size='large'
>
<Icon>cancel</Icon>
</IconButton>
<Box>
<Paper
component='form'
className={classes.searchRoot}
>
{searchText && (
<HighlightOffIcon
className={classes.clearSearchIcon}
onClick={this.handleClearSearch}
<Box className={classes.dialogHeader}>
<MuiDialogTitle className={classes.dialogTitle} disableTypography>
<Typography variant='h6'>
<FormattedMessage
id='Applications.Details.Subscriptions.subscription.management.add'
defaultMessage='Subscribe APIs'
/>
)}
<InputBase
className={classes.input}
placeholder={intl.formatMessage({
defaultMessage: 'Search APIs',
id: 'Applications.Details.Subscriptions.search',
})}
inputProps={{
'aria-label': intl.formatMessage({
</Typography>
</MuiDialogTitle>
<Box className={classes.searchRoot}>
<Paper
component='form'
className={classes.searchBar}
>
{searchText && (
<HighlightOffIcon
className={classes.clearSearchIcon}
onClick={this.handleClearSearch}
/>
)}
<InputBase
className={classes.input}
placeholder={intl.formatMessage({
defaultMessage: 'Search APIs',
id: 'Applications.Details.Subscriptions.search',
}),
}}
inputRef={(el) => { this.searchInputElem = el; }}
onChange={this.handleSearchTextTmpChange}
onKeyDown={this.handleEnterPress}
/>
<IconButton
className={classes.iconButton}
aria-label='search'
onClick={this.handleSearchTextChange}
size='large'
>
<SearchIcon />
</IconButton>
</Paper>
<Box className={classes.searchResults}>
{(searchText && searchText !== '') ? (
<>
})}
inputProps={{
'aria-label': intl.formatMessage({
defaultMessage: 'Search APIs',
id: 'Applications.Details.Subscriptions.search',
}),
}}
inputRef={(el) => { this.searchInputElem = el; }}
onChange={this.handleSearchTextTmpChange}
onKeyDown={this.handleEnterPress}
/>
<IconButton
className={classes.iconButton}
aria-label='search'
onClick={this.handleSearchTextChange}
size='large'
>
<SearchIcon />
</IconButton>
</Paper>
<Box className={classes.searchResults}>
{(searchText && searchText !== '') ? (
<>
<Typography variant='caption'>
<FormattedMessage
id='Applications.Details.Subscriptions.filter.msg'
defaultMessage='Filtered APIs for'
/>
{` ${searchText}`}
</Typography>
</>
) : (
<Typography variant='caption'>
<FormattedMessage
id='Applications.Details.Subscriptions.filter.msg'
defaultMessage='Filtered APIs for'
id='Applications.Details.Subscriptions.filter.msg.all.apis'
defaultMessage='Displaying all APIs'
/>
{` ${searchText}`}
</Typography>
</>
) : (
<Typography variant='caption'>
<FormattedMessage
id='Applications.Details.Subscriptions.filter.msg.all.apis'
defaultMessage='Displaying all APIs'
/>
</Typography>
)}
)}
</Box>
</Box>

<IconButton
aria-label='close'
className={classes.closeButton}
onClick={this.handleOpenDialog}
size='large'
>
<Icon>cancel</Icon>
</IconButton>
</Box>
<Box padding={2}>
<APIList
Expand Down

0 comments on commit 9893a66

Please sign in to comment.