forked from acouzens/open5gs
serach bar is added
This commit is contained in:
parent
06b3245354
commit
dd4e1153fe
|
@ -54,12 +54,12 @@ const ErrorClose = styled.div`
|
|||
right: 1rem;
|
||||
`;
|
||||
|
||||
const ErrorBar = ({ visible, message, onClick }) => visible ? (
|
||||
const ErrorBar = ({ visible, message, onClose }) => visible ? (
|
||||
<ErrorWrapper>
|
||||
<ErrorMessage>
|
||||
{message}
|
||||
</ErrorMessage>
|
||||
<ErrorClose onClick={onClick}>
|
||||
<ErrorClose onClick={onClose}>
|
||||
<CloseIcon/>
|
||||
</ErrorClose>
|
||||
</ErrorWrapper>
|
||||
|
@ -68,7 +68,7 @@ const ErrorBar = ({ visible, message, onClick }) => visible ? (
|
|||
ErrorBar.propTypes = {
|
||||
visible: PropTypes.bool,
|
||||
message: PropTypes.string,
|
||||
onClick: PropTypes.func
|
||||
onClose: PropTypes.func
|
||||
};
|
||||
|
||||
const Thumbnail = styled.div`
|
||||
|
@ -173,7 +173,7 @@ const Login = ({
|
|||
<ErrorBar
|
||||
visible={error !== null}
|
||||
message={error && error.message}
|
||||
onClick={onErrorReset} />
|
||||
onClose={onErrorReset} />
|
||||
<Thumbnail>
|
||||
<ThumbnailIcon size='8rem' color={oc['blue'][6]} />
|
||||
</Thumbnail>
|
||||
|
|
|
@ -30,10 +30,19 @@ const propTypes = {
|
|||
subscribers: PropTypes.arrayOf(PropTypes.object)
|
||||
}
|
||||
|
||||
const List = ({ subscribers }) => {
|
||||
const subscriberList = subscribers.map(subscriber =>
|
||||
<Item key={subscriber.imsi} subscriber={subscriber} />
|
||||
);
|
||||
const List = ({ subscribers, search }) => {
|
||||
const subscriberList = subscribers
|
||||
.filter(s => s.imsi.indexOf(search) !== -1)
|
||||
.sort(
|
||||
(a,b) => {
|
||||
if(a.imsi > b.imsi) return 1;
|
||||
if (a.imsi < b.imsi) return -1;
|
||||
return 0;
|
||||
}
|
||||
)
|
||||
.map(subscriber =>
|
||||
<Item key={subscriber.imsi} subscriber={subscriber} />
|
||||
);
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
|
|
|
@ -1,33 +1,84 @@
|
|||
import styled from 'styled-components';
|
||||
import oc from 'open-color';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const Search = styled.input`
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
import styled from 'styled-components';
|
||||
import oc from 'open-color';
|
||||
import { media } from 'helpers/style-utils';
|
||||
|
||||
border: 1px solid ${oc.gray[2]};
|
||||
import SearchIcon from 'react-icons/lib/md/search';
|
||||
import ClearIcon from 'react-icons/lib/md/clear';
|
||||
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
transition: all .25s;
|
||||
const Wrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border: 1px solid ${oc.pink[3]};
|
||||
color: ${oc.pink[6]};
|
||||
width: 700px;
|
||||
margin: 0 auto 1rem auto;
|
||||
|
||||
background: white;
|
||||
color: ${oc.gray[6]};
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
|
||||
& + & {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
${media.tablet`
|
||||
width: 500px;
|
||||
`}
|
||||
|
||||
${media.mobile`
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
`}
|
||||
`;
|
||||
|
||||
const SearchIconWrapper = styled.div`
|
||||
display: inline-flex;
|
||||
margin-left: 1rem;
|
||||
font-size: 1.5rem;
|
||||
`
|
||||
|
||||
const Input = styled.input`
|
||||
padding : 1rem;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
|
||||
font-size: 1.2rem;
|
||||
font-weight: 300;
|
||||
|
||||
cursor: text;
|
||||
|
||||
border: none;
|
||||
outline: none;
|
||||
`
|
||||
const ClearIconWrapper = styled.div`
|
||||
display: inline-flex;
|
||||
margin-right: 1rem;
|
||||
font-size: 1.5rem;
|
||||
|
||||
cursor: pointer;
|
||||
`
|
||||
|
||||
const Search = ({ value, onChange, onClear }) => (
|
||||
<Wrapper>
|
||||
<SearchIconWrapper><SearchIcon/></SearchIconWrapper>
|
||||
<Input
|
||||
value={value}
|
||||
onChange={onChange}/>
|
||||
{value !== '' &&
|
||||
<ClearIconWrapper onClick={onClear}>
|
||||
<ClearIcon/>
|
||||
</ClearIconWrapper>
|
||||
}
|
||||
</Wrapper>
|
||||
|
||||
)
|
||||
|
||||
Search.propTypes = {
|
||||
name: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
placeholder: PropTypes.string,
|
||||
onChange: PropTypes.func
|
||||
onChange: PropTypes.func,
|
||||
onClear: PropTypes.func
|
||||
};
|
||||
|
||||
export default Search;
|
|
@ -37,9 +37,7 @@ class App extends Component {
|
|||
return (
|
||||
<Layout>
|
||||
<Layout.Container visible={view === "subscriber"}>
|
||||
<Layout.Content background="#e9ecef">
|
||||
<SubscriberContainer/>
|
||||
</Layout.Content>
|
||||
<SubscriberContainer/>
|
||||
</Layout.Container>
|
||||
<Layout.Container visible={view === "pdn"}>
|
||||
<Layout.Content><PdnContainer/></Layout.Content>
|
||||
|
|
|
@ -5,10 +5,29 @@ import { connect } from 'react-redux';
|
|||
import { fetchSubscribers } from 'modules/crud/subscriber';
|
||||
import { select } from 'modules/crud/selectors';
|
||||
|
||||
import styled from 'styled-components';
|
||||
import oc from 'open-color';
|
||||
import { media } from 'helpers/style-utils';
|
||||
|
||||
import { Spinner, Subscriber } from 'components';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 2rem;
|
||||
|
||||
background: #e9ecef;
|
||||
|
||||
${media.mobile`
|
||||
padding-top: 0rem;
|
||||
`}
|
||||
`
|
||||
|
||||
class SubscriberContainer extends Component {
|
||||
state = {
|
||||
search: ''
|
||||
};
|
||||
|
||||
componentWillMount() {
|
||||
const { subscribers, dispatch } = this.props
|
||||
if (subscribers.needsFetch) {
|
||||
|
@ -24,15 +43,44 @@ class SubscriberContainer extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
handleSearchChange = (e) => {
|
||||
this.setState({
|
||||
search: e.target.value
|
||||
});
|
||||
}
|
||||
|
||||
handleSearchClear = (e) => {
|
||||
this.setState({
|
||||
search: ''
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { subscribers } = this.props
|
||||
const {
|
||||
handleSearchChange,
|
||||
handleSearchClear
|
||||
} = this;
|
||||
|
||||
const {
|
||||
search
|
||||
} = this.state;
|
||||
|
||||
const {
|
||||
subscribers
|
||||
} = this.props
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Subscriber.Search />
|
||||
<Subscriber.List subscribers={subscribers.data} />
|
||||
<Wrapper>
|
||||
<Subscriber.Search
|
||||
onChange={handleSearchChange}
|
||||
value={search}
|
||||
onClear={handleSearchClear} />
|
||||
<Subscriber.List
|
||||
subscribers={subscribers.data}
|
||||
search={search}
|
||||
/>
|
||||
{subscribers.isLoading && <Spinner md color={oc.indigo[9]} />}
|
||||
</div>
|
||||
</Wrapper>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue