Skip to content

S
safetcut-app
Commit e5ba164c by Tonk
Options

update notification filter & search

parent 90fc125b
Showing with 64 additions and 29 deletions
constants/Styles.js
...@@ -2,7 +2,7 @@ import { StyleSheet } from 'react-native'; ...@@ -2,7 +2,7 @@ import { StyleSheet } from 'react-native';
export const color = { export const color = {
white: '#fff', white: '#fff',
defaultBg: 'rgba(243,243,243,0.5)', defaultBg: '#fbfbfb',
lightGrey: '#cfd7db', lightGrey: '#cfd7db',
grey: '#9b9b9b', grey: '#9b9b9b',
darkGrey: '#4a4a4a', darkGrey: '#4a4a4a',
......
screens/Private/NotificationScreen/NotificationScreen.js
...@@ -3,7 +3,7 @@ import { Text, Tab, Tabs, ScrollableTab, Icon, Footer } from 'native-base'; ...@@ -3,7 +3,7 @@ import { Text, Tab, Tabs, ScrollableTab, Icon, Footer } from 'native-base';
import { View, StyleSheet, ScrollView, Modal } from 'react-native'; import { View, StyleSheet, ScrollView, Modal } from 'react-native';
import { color, theme } from '../../../constants/Styles'; import { color, theme } from '../../../constants/Styles';
import { SearchBar } from 'react-native-elements'; import { SearchBar } from 'react-native-elements';
import { format, isToday, isYesterday, isSameDay, isThisMonth, startOfDay } from 'date-fns'; import { format, isToday, isYesterday, isSameDay, isThisMonth, startOfDay, getTime, endOfDay } from 'date-fns';
import SlideUpModal from '../../../components/SlideUpModal'; import SlideUpModal from '../../../components/SlideUpModal';
import FadeDimBG from '../../../components/FadeDimBG'; import FadeDimBG from '../../../components/FadeDimBG';
import { width, height } from '../../../constants/Layout'; import { width, height } from '../../../constants/Layout';
...@@ -25,6 +25,7 @@ export default class NotificationScreen extends React.Component { ...@@ -25,6 +25,7 @@ export default class NotificationScreen extends React.Component {
this.state = { this.state = {
search: '', search: '',
data: [], data: [],
filterData: [],
initial: [], initial: [],
isfilterVisible: false, isfilterVisible: false,
selectedStartDate: null, selectedStartDate: null,
...@@ -60,32 +61,38 @@ export default class NotificationScreen extends React.Component { ...@@ -60,32 +61,38 @@ export default class NotificationScreen extends React.Component {
}); });
} }
} }
clear() {
this.setState({
selectedStartDate: null,
selectedEndDate: null,
filterBy: null,
toggleCalendar: false,
});
}
updateSearch = text => { updateSearch = text => {
this.setState({ search: text }); this.setState({ search: text });
const { initial } = this.state; const { filterData, initial, filterBy } = this.state;
let data = [];
const newData = initial.filter(item => { if (filterBy) {
data.push(...filterData);
} else {
data.push(...initial);
}
const newData = data.filter(item => {
const itemData = `${item.user.toUpperCase()} ${item.action.toUpperCase()} ${item.device.toUpperCase()}`; const itemData = `${item.user.toUpperCase()} ${item.action.toUpperCase()} ${item.device.toUpperCase()}`;
const textData = text.toUpperCase(); const textData = text.toUpperCase();
return itemData.indexOf(textData) > -1; return itemData.indexOf(textData) > -1;
}); });
this.setState({ this.setState({
data: newData, data: newData,
}); });
}; };
clear() {
this.setState({
selectedStartDate: null,
selectedEndDate: null,
filterBy: null,
toggleCalendar: false,
});
}
filterByDate() { filterByDate() {
const { filterBy, initial } = this.state; const { filterBy, initial, selectedStartDate, selectedEndDate } = this.state;
this.setState({ isfilterVisible: false }); this.setState({ isfilterVisible: false, search: '' });
if (filterBy === 'today') { if (filterBy === 'today') {
console.log('filter today'); console.log('filter today');
...@@ -93,13 +100,13 @@ export default class NotificationScreen extends React.Component { ...@@ -93,13 +100,13 @@ export default class NotificationScreen extends React.Component {
const newData = initial.filter(x => { const newData = initial.filter(x => {
return isToday(x.time * 1000); return isToday(x.time * 1000);
}); });
this.setState({ data: newData }); this.setState({ filterData: newData });
} else if (filterBy === 'yesterday') { } else if (filterBy === 'yesterday') {
console.log('filter yesterday'); console.log('filter yesterday');
const newData = initial.filter(x => { const newData = initial.filter(x => {
return isYesterday(x.time * 1000); return isYesterday(x.time * 1000);
}); });
this.setState({ data: newData }); this.setState({ filterData: newData });
} else if (filterBy === '7days') { } else if (filterBy === '7days') {
console.log('filter 7 days'); console.log('filter 7 days');
const newData = initial.filter(x => { const newData = initial.filter(x => {
...@@ -108,7 +115,7 @@ export default class NotificationScreen extends React.Component { ...@@ -108,7 +115,7 @@ export default class NotificationScreen extends React.Component {
const daysRange = startDay - 7 * 24 * 60 * 60 * 1000; const daysRange = startDay - 7 * 24 * 60 * 60 * 1000;
return x.time * 1000 >= daysRange && x.time * 1000 <= today; return x.time * 1000 >= daysRange && x.time * 1000 <= today;
}); });
this.setState({ data: newData }); this.setState({ filterData: newData });
} else if (filterBy === '30days') { } else if (filterBy === '30days') {
console.log('filter 30 days'); console.log('filter 30 days');
const newData = initial.filter(x => { const newData = initial.filter(x => {
...@@ -117,26 +124,44 @@ export default class NotificationScreen extends React.Component { ...@@ -117,26 +124,44 @@ export default class NotificationScreen extends React.Component {
const daysRange = startDay - 30 * 24 * 60 * 60 * 1000; const daysRange = startDay - 30 * 24 * 60 * 60 * 1000;
return x.time * 1000 >= daysRange && x.time * 1000 <= today; return x.time * 1000 >= daysRange && x.time * 1000 <= today;
}); });
this.setState({ data: newData }); this.setState({ filterData: newData });
} else if (filterBy === 'month') { } else if (filterBy === 'month') {
console.log('filter this month'); console.log('filter this month');
const newData = initial.filter(x => { const newData = initial.filter(x => {
return isThisMonth(x.time * 1000); return isThisMonth(x.time * 1000);
}); });
this.setState({ data: newData }); this.setState({ filterData: newData });
} else if (filterBy === 'lastMonth') { } else if (filterBy === 'lastMonth') {
console.log('filter last month'); console.log('filter last month');
} else if (filterBy === 'custom') { } else if (filterBy === 'custom') {
console.log('filter custom'); console.log('filter custom');
const start = getTime(selectedStartDate);
const end = endOfDay(getTime(selectedEndDate));
const newData = initial.filter(x => {
return x.time * 1000 <= end && x.time * 1000 > start;
});
this.setState({ filterData: newData });
} else if (filterBy === 'all') {
this.setState({ filterData: initial });
} }
} }
// render component -----------------------------------------------
renderActionCard(data) { renderActionCard(data) {
return ( return (
<View style={[theme.rowContainer, styles.actionContainer]}> <View style={[theme.rowContainer, styles.actionContainer]}>
<View style={styles.thumbnail}> {data.type === 'log' ? (
{/* first letter of operate's username */} <Icon
<Text style={{ color: color.white, fontSize: 8 }}>{data.user.charAt(0).toUpperCase()}</Text> name="info"
</View> type="SimpleLineIcons"
style={{ color: color.primary, fontSize: 12.5, marginRight: 10, marginTop: 1 }}
/>
) : (
<Icon
name="ios-notifications-outline"
style={{ color: color.primary, fontSize: 16, marginRight: 10, marginTop: -1 }}
/>
)}
<View style={{ display: 'flex', flexDirection: 'column', flex: 1 }}> <View style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
<View style={[theme.rowContainer, { justifyContent: 'space-between', marginBottom: 5 }]}> <View style={[theme.rowContainer, { justifyContent: 'space-between', marginBottom: 5 }]}>
{/* operate's username */} {/* operate's username */}
...@@ -154,10 +179,16 @@ export default class NotificationScreen extends React.Component { ...@@ -154,10 +179,16 @@ export default class NotificationScreen extends React.Component {
} }
renderDayList(type) { renderDayList(type) {
let data2render = [];
if (this.state.filterBy && !this.state.search) {
data2render.push(...this.state.filterData);
} else {
data2render.push(...this.state.data);
}
const data = const data =
type === 'all' type === 'all'
? this.state.data ? data2render
: this.state.data.filter(x => { : data2render.filter(x => {
return x.type === type; return x.type === type;
}); });
let view = []; let view = [];
...@@ -283,7 +314,7 @@ export default class NotificationScreen extends React.Component { ...@@ -283,7 +314,7 @@ export default class NotificationScreen extends React.Component {
/> />
<Icon <Icon
name="md-funnel" name="md-funnel"
style={{ color: '#c7cad1', fontSize: 14, marginLeft: 10 }} style={{ color: '#c7cad1', fontSize: 20, marginLeft: 10, marginRight: 5 }}
onPress={() => this.setState({ isfilterVisible: true })} onPress={() => this.setState({ isfilterVisible: true })}
/> />
</View> </View>
...@@ -314,6 +345,7 @@ export default class NotificationScreen extends React.Component { ...@@ -314,6 +345,7 @@ export default class NotificationScreen extends React.Component {
<View style={[theme.mt2, styles.pickerContainer]}> <View style={[theme.mt2, styles.pickerContainer]}>
<RNPickerSelect <RNPickerSelect
onValueChange={value => this.setState({ filterBy: value })} onValueChange={value => this.setState({ filterBy: value })}
placeholder={{ label: 'All', value: 'all' }}
items={[ items={[
{ label: 'Today', value: 'today' }, { label: 'Today', value: 'today' },
{ label: 'Yesterday', value: 'yesterday' }, { label: 'Yesterday', value: 'yesterday' },
...@@ -338,6 +370,8 @@ export default class NotificationScreen extends React.Component { ...@@ -338,6 +370,8 @@ export default class NotificationScreen extends React.Component {
); );
} }
} }
// style -------------------------------------------------------
const pickerStyle = { const pickerStyle = {
inputIOS: { inputIOS: {
color: color.darkGrey, color: color.darkGrey,
......
screens/Private/NotificationScreen/notification.json
...@@ -28,5 +28,6 @@ ...@@ -28,5 +28,6 @@
{ "type": "notification", "user": "Tonk", "time": 1566317460, "action": "Leaved", "device": "office" }, { "type": "notification", "user": "Tonk", "time": 1566317460, "action": "Leaved", "device": "office" },
{ "type": "notification", "user": "Tonk", "time": 1561975930, "action": "Entered", "device": "office" }, { "type": "notification", "user": "Tonk", "time": 1561975930, "action": "Entered", "device": "office" },
{ "type": "notification", "user": "Tonk", "time": 1564481530, "action": "ง่วง", "device": "มากๆ" }, { "type": "notification", "user": "Tonk", "time": 1564481530, "action": "ง่วง", "device": "มากๆ" },
{ "type": "notification", "user": "Tonk", "time": 1563790330, "action": "หิว", "device": "ข้าว" } { "type": "notification", "user": "Tonk", "time": 1563790330, "action": "หิว", "device": "ข้าว" },
{ "type": "notification", "user": "Tonk", "time": 1566528669, "action": "Sleep", "device": "" }
] ]
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment