reworked activity date filter, fixed applying deleted filter, updated date-picker package
This commit is contained in:
myxmaster
@@ -16,7 +16,7 @@ interface TextInputProps {
|
||||
value?: string;
|
||||
onChangeText?: any;
|
||||
numberOfLines?: number;
|
||||
style?: StyleProp<ViewStyle>;
|
||||
style?: ViewStyle;
|
||||
textInputStyle?: StyleProp<TextStyle>;
|
||||
placeholderTextColor?: string;
|
||||
locked?: boolean;
|
||||
@@ -115,9 +115,9 @@ export default function TextInput(props: TextInputProps) {
|
||||
style={{
|
||||
backgroundColor: themeColor('secondary'),
|
||||
opacity: locked ? 0.8 : 1,
|
||||
...style,
|
||||
...defaultStyle,
|
||||
...styles.wrapper
|
||||
...styles.wrapper,
|
||||
...style
|
||||
}}
|
||||
>
|
||||
{prefix ? (
|
||||
|
||||
+2
-4
@@ -755,10 +755,8 @@
|
||||
"views.Activity.requestedPayment": "Requested Payment",
|
||||
"views.Activity.channelOperation": "Channel operation",
|
||||
"views.ActivityFilter.title": "Filter Activity",
|
||||
"views.ActivityFilter.setStartDate": "Set Start",
|
||||
"views.ActivityFilter.setEndDate": "Set End",
|
||||
"views.ActivityFilter.clearStartDate": "Clear Start",
|
||||
"views.ActivityFilter.clearEndDate": "Clear End",
|
||||
"views.ActivityFilter.set": "Set",
|
||||
"views.ActivityFilter.edit": "Edit",
|
||||
"views.ActivityFilter.startDate": "Start Date",
|
||||
"views.ActivityFilter.endDate": "End Date",
|
||||
"views.ActivityFilter.lightningPayments": "Lightning payments",
|
||||
|
||||
+1
-1
@@ -209,7 +209,7 @@ export default class Invoice extends BaseModel {
|
||||
: '';
|
||||
}
|
||||
|
||||
@computed public get getDate(): string | number | Date {
|
||||
@computed public get getDate(): Date {
|
||||
return this.isPaid
|
||||
? this.settleDate
|
||||
: DateTimeUtils.listDate(
|
||||
|
||||
+1
-1
@@ -67,7 +67,7 @@ export default class Payment extends BaseModel {
|
||||
return this.creation_date || this.created_at || this.timestamp || 0;
|
||||
}
|
||||
|
||||
@computed public get getDate(): string | Date {
|
||||
@computed public get getDate(): Date {
|
||||
return DateTimeUtils.listDate(this.getTimestamp);
|
||||
}
|
||||
|
||||
|
||||
@@ -83,7 +83,7 @@ export default class Transaction extends BaseModel {
|
||||
);
|
||||
}
|
||||
|
||||
@computed public get getDate(): string | Date {
|
||||
@computed public get getDate(): Date {
|
||||
return DateTimeUtils.listDate(this.time_stamp);
|
||||
}
|
||||
|
||||
|
||||
+1
-1
@@ -83,7 +83,7 @@
|
||||
"react-native-camera-kit": "13.0.0",
|
||||
"react-native-circular-progress-indicator": "4.4.2",
|
||||
"react-native-crypto": "2.2.0",
|
||||
"react-native-date-picker": "4.2.6",
|
||||
"react-native-date-picker": "4.3.3",
|
||||
"react-native-elements": "3.4.2",
|
||||
"react-native-encrypted-storage": "4.0.3",
|
||||
"react-native-gesture-handler": "2.12.1",
|
||||
|
||||
+35
-14
@@ -14,6 +14,7 @@ import TransactionsStore from './TransactionsStore';
|
||||
|
||||
import { localeString } from './../utils/LocaleUtils';
|
||||
import BackendUtils from './../utils/BackendUtils';
|
||||
import moment from 'moment';
|
||||
|
||||
const STORAGE_KEY = 'zeus-activity-filters';
|
||||
|
||||
@@ -25,8 +26,8 @@ export interface Filter {
|
||||
received: boolean;
|
||||
unpaid: boolean;
|
||||
minimumAmount: number;
|
||||
startDate: any;
|
||||
endDate: any;
|
||||
startDate?: Date;
|
||||
endDate?: Date;
|
||||
}
|
||||
|
||||
export const DEFAULT_FILTERS = {
|
||||
@@ -36,8 +37,8 @@ export const DEFAULT_FILTERS = {
|
||||
received: true,
|
||||
unpaid: true,
|
||||
minimumAmount: 0,
|
||||
startDate: null,
|
||||
endDate: null
|
||||
startDate: undefined,
|
||||
endDate: undefined
|
||||
};
|
||||
|
||||
export default class ActivityStore {
|
||||
@@ -72,6 +73,7 @@ export default class ActivityStore {
|
||||
STORAGE_KEY,
|
||||
JSON.stringify(this.filters)
|
||||
);
|
||||
this.setFilters(this.filters);
|
||||
};
|
||||
|
||||
@action
|
||||
@@ -83,8 +85,8 @@ export default class ActivityStore {
|
||||
received: true,
|
||||
unpaid: false,
|
||||
minimumAmount: 0,
|
||||
startDate: null,
|
||||
endDate: null
|
||||
startDate: undefined,
|
||||
endDate: undefined
|
||||
};
|
||||
await EncryptedStorage.setItem(
|
||||
STORAGE_KEY,
|
||||
@@ -112,12 +114,14 @@ export default class ActivityStore {
|
||||
|
||||
@action
|
||||
public clearStartDateFilter = () => {
|
||||
this.filters.startDate = null;
|
||||
this.filters.startDate = undefined;
|
||||
this.setFilters(this.filters);
|
||||
};
|
||||
|
||||
@action
|
||||
public clearEndDateFilter = () => {
|
||||
this.filters.endDate = null;
|
||||
this.filters.endDate = undefined;
|
||||
this.setFilters(this.filters);
|
||||
};
|
||||
|
||||
getSortedActivity = () => {
|
||||
@@ -175,15 +179,18 @@ export default class ActivityStore {
|
||||
public async getFilters() {
|
||||
this.loading = true;
|
||||
try {
|
||||
// Retrieve the credentials
|
||||
const filters: any = await EncryptedStorage.getItem(STORAGE_KEY);
|
||||
const filters = await EncryptedStorage.getItem(STORAGE_KEY);
|
||||
if (filters) {
|
||||
this.filters = JSON.parse(filters);
|
||||
this.filters = JSON.parse(filters, (key, value) =>
|
||||
(key === 'startDate' || key === 'endDate') && value
|
||||
? new Date(value)
|
||||
: value
|
||||
);
|
||||
} else {
|
||||
console.log('No activity filters stored');
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("Keychain couldn't be accessed!", error);
|
||||
console.log('Loading activity filters failed', error);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
@@ -266,14 +273,28 @@ export default class ActivityStore {
|
||||
}
|
||||
|
||||
if (filters.startDate) {
|
||||
const startDate = new Date(
|
||||
filters.startDate.getFullYear(),
|
||||
filters.startDate.getMonth(),
|
||||
filters.startDate.getDate()
|
||||
);
|
||||
filteredActivity = filteredActivity.filter(
|
||||
(activity: any) => +activity.getDate >= +filters.startDate
|
||||
(activity) => activity.getDate.getTime() >= startDate.getTime()
|
||||
);
|
||||
}
|
||||
|
||||
if (filters.endDate) {
|
||||
const endDate = moment(
|
||||
new Date(
|
||||
filters.endDate.getFullYear(),
|
||||
filters.endDate.getMonth(),
|
||||
filters.endDate.getDate()
|
||||
)
|
||||
)
|
||||
.add(1, 'day')
|
||||
.toDate();
|
||||
filteredActivity = filteredActivity.filter(
|
||||
(activity: any) => +activity.getDate <= +filters.endDate
|
||||
(activity) => activity.getDate.getTime() < endDate.getTime()
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
+128
-156
@@ -1,5 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import { FlatList, StyleSheet, Text, View } from 'react-native';
|
||||
import { FlatList, Text, View } from 'react-native';
|
||||
import { Button, Icon, ListItem } from 'react-native-elements';
|
||||
import { inject, observer } from 'mobx-react';
|
||||
import { isEqual } from 'lodash';
|
||||
@@ -10,16 +10,17 @@ import { localeString } from '../../utils/LocaleUtils';
|
||||
import { themeColor } from '../../utils/ThemeUtils';
|
||||
|
||||
import ActivityStore, { DEFAULT_FILTERS } from '../../stores/ActivityStore';
|
||||
import SettingsStore from '../../stores/SettingsStore';
|
||||
|
||||
import Header from '../../components/Header';
|
||||
import Screen from '../../components/Screen';
|
||||
import Switch from '../../components/Switch';
|
||||
import TextInput from '../../components/TextInput';
|
||||
import ZeusButton from '../../components/Button';
|
||||
|
||||
interface ActivityFilterProps {
|
||||
navigation: any;
|
||||
ActivityStore: ActivityStore;
|
||||
SettingsStore: SettingsStore;
|
||||
}
|
||||
|
||||
interface ActivityFilterState {
|
||||
@@ -29,7 +30,7 @@ interface ActivityFilterState {
|
||||
workingEndDate: any;
|
||||
}
|
||||
|
||||
@inject('ActivityStore')
|
||||
@inject('ActivityStore', 'SettingsStore')
|
||||
@observer
|
||||
export default class ActivityFilter extends React.Component<
|
||||
ActivityFilterProps,
|
||||
@@ -52,9 +53,10 @@ export default class ActivityFilter extends React.Component<
|
||||
);
|
||||
|
||||
render() {
|
||||
const { navigation, ActivityStore } = this.props;
|
||||
const { navigation, ActivityStore, SettingsStore } = this.props;
|
||||
const { setStartDate, setEndDate, workingStartDate, workingEndDate } =
|
||||
this.state;
|
||||
const locale = SettingsStore.settings.locale;
|
||||
const {
|
||||
loading,
|
||||
setFilters,
|
||||
@@ -76,141 +78,80 @@ export default class ActivityFilter extends React.Component<
|
||||
endDate
|
||||
} = filters;
|
||||
|
||||
const DateFilter = () => (
|
||||
const DateFilter = (props: { type: 'startDate' | 'endDate' }) => (
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-end'
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<View style={{ padding: 5 }}>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: 'Lato-Regular',
|
||||
color: themeColor('text'),
|
||||
marginRight: 30
|
||||
}}
|
||||
>
|
||||
{(props.type === 'startDate'
|
||||
? startDate
|
||||
: endDate
|
||||
)?.toLocaleDateString(locale)}
|
||||
</Text>
|
||||
<Button
|
||||
onPress={() => {
|
||||
if (props.type === 'startDate') {
|
||||
this.setState({
|
||||
setStartDate: true,
|
||||
workingStartDate: startDate
|
||||
? startDate
|
||||
: endDate ?? new Date()
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
setEndDate: true,
|
||||
workingEndDate: endDate ? endDate : new Date()
|
||||
});
|
||||
}
|
||||
}}
|
||||
buttonStyle={{
|
||||
backgroundColor: themeColor('secondary'),
|
||||
paddingLeft: 15,
|
||||
paddingRight: 15,
|
||||
height: 40
|
||||
}}
|
||||
titleStyle={{
|
||||
color: themeColor('text'),
|
||||
fontFamily: 'Lato-Regular'
|
||||
}}
|
||||
title={
|
||||
(props.type === 'startDate' && startDate) ||
|
||||
(props.type === 'endDate' && endDate)
|
||||
? localeString('views.ActivityFilter.edit')
|
||||
: localeString('views.ActivityFilter.set')
|
||||
}
|
||||
/>
|
||||
{((props.type === 'startDate' && startDate) ||
|
||||
(props.type === 'endDate' && endDate)) && (
|
||||
<Button
|
||||
onPress={() =>
|
||||
startDate
|
||||
buttonStyle={{
|
||||
backgroundColor: themeColor('secondary'),
|
||||
marginLeft: 15,
|
||||
height: 40
|
||||
}}
|
||||
icon={{
|
||||
name: 'delete',
|
||||
size: 20,
|
||||
color: themeColor('text')
|
||||
}}
|
||||
onPress={() => {
|
||||
props.type === 'startDate'
|
||||
? clearStartDateFilter()
|
||||
: this.setState({ setStartDate: !setStartDate })
|
||||
}
|
||||
buttonStyle={{ backgroundColor: 'white' }}
|
||||
titleStyle={{
|
||||
color: 'black',
|
||||
fontFamily: 'Lato-Regular'
|
||||
: clearEndDateFilter();
|
||||
}}
|
||||
title={
|
||||
startDate
|
||||
? localeString(
|
||||
'views.ActivityFilter.clearStartDate'
|
||||
)
|
||||
: localeString(
|
||||
'views.ActivityFilter.setStartDate'
|
||||
)
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
<View style={{ padding: 5 }}>
|
||||
<Button
|
||||
onPress={() =>
|
||||
endDate
|
||||
? clearEndDateFilter()
|
||||
: this.setState({ setEndDate: !setEndDate })
|
||||
}
|
||||
buttonStyle={{ backgroundColor: 'orange' }}
|
||||
titleStyle={{
|
||||
color: 'white',
|
||||
fontFamily: 'Lato-Regular'
|
||||
}}
|
||||
title={
|
||||
endDate
|
||||
? localeString(
|
||||
'views.ActivityFilter.clearEndDate'
|
||||
)
|
||||
: localeString(
|
||||
'views.ActivityFilter.setEndDate'
|
||||
)
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
const DateData = () => (
|
||||
<>
|
||||
<>
|
||||
{startDate && (
|
||||
<Text
|
||||
style={{
|
||||
...styles.text,
|
||||
color: themeColor('text')
|
||||
}}
|
||||
>{`${localeString(
|
||||
'views.ActivityFilter.startDate'
|
||||
)}: ${startDate.toString()}`}</Text>
|
||||
)}
|
||||
{endDate && (
|
||||
<Text
|
||||
style={{
|
||||
...styles.text,
|
||||
color: themeColor('text')
|
||||
}}
|
||||
>{`${localeString(
|
||||
'views.ActivityFilter.endDate'
|
||||
)}: ${endDate.toString()}`}</Text>
|
||||
)}
|
||||
</>
|
||||
{(setStartDate || setEndDate) && (
|
||||
<View
|
||||
style={{
|
||||
marginTop: 20
|
||||
}}
|
||||
>
|
||||
<DatePicker
|
||||
onDateChange={(date) =>
|
||||
setStartDate
|
||||
? this.setState({ workingStartDate: date })
|
||||
: this.setState({ workingEndDate: date })
|
||||
}
|
||||
date={
|
||||
setStartDate ? workingStartDate : workingEndDate
|
||||
}
|
||||
maximumDate={new Date()}
|
||||
textColor={themeColor('text')}
|
||||
mode="date"
|
||||
style={{
|
||||
height: 100,
|
||||
marginTop: 10,
|
||||
marginBottom: 20,
|
||||
alignSelf: 'center'
|
||||
}}
|
||||
/>
|
||||
<View style={{ padding: 2 }}>
|
||||
<ZeusButton
|
||||
onPress={() => {
|
||||
if (setStartDate) {
|
||||
setStartDateFilter(workingStartDate);
|
||||
} else {
|
||||
setEndDateFilter(workingEndDate);
|
||||
}
|
||||
this.setState({
|
||||
setStartDate: false,
|
||||
setEndDate: false,
|
||||
workingStartDate: new Date(),
|
||||
workingEndDate: new Date()
|
||||
});
|
||||
}}
|
||||
title={
|
||||
setStartDate
|
||||
? localeString(
|
||||
'views.ActivityFilter.setStartDate'
|
||||
)
|
||||
: localeString(
|
||||
'views.ActivityFilter.setEndDate'
|
||||
)
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</>
|
||||
</View>
|
||||
);
|
||||
|
||||
const FILTERS = [
|
||||
@@ -250,15 +191,12 @@ export default class ActivityFilter extends React.Component<
|
||||
type: 'Amount'
|
||||
},
|
||||
{
|
||||
label: localeString('general.date'),
|
||||
value: received,
|
||||
var: 'received',
|
||||
type: 'Date'
|
||||
label: localeString('views.ActivityFilter.startDate'),
|
||||
type: 'StartDate'
|
||||
},
|
||||
// use this object for the date objects
|
||||
{
|
||||
label: '',
|
||||
type: 'DateData'
|
||||
label: localeString('views.ActivityFilter.endDate'),
|
||||
type: 'EndDate'
|
||||
}
|
||||
];
|
||||
|
||||
@@ -329,11 +267,7 @@ export default class ActivityFilter extends React.Component<
|
||||
</View>
|
||||
)}
|
||||
{item.type === 'Amount' && (
|
||||
<View
|
||||
style={{
|
||||
flex: 1
|
||||
}}
|
||||
>
|
||||
<View style={{ flex: 1 }}>
|
||||
<TextInput
|
||||
keyboardType="numeric"
|
||||
placeholder="0"
|
||||
@@ -350,17 +284,18 @@ export default class ActivityFilter extends React.Component<
|
||||
: 0;
|
||||
setAmountFilter(newMinAmount);
|
||||
}}
|
||||
style={{ marginBottom: 0, top: 0 }}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
{item.type === 'Date' && (
|
||||
{item.type === 'StartDate' && (
|
||||
<View style={{ flex: 1 }}>
|
||||
<DateFilter />
|
||||
<DateFilter type="startDate" />
|
||||
</View>
|
||||
)}
|
||||
{item.type === 'DateData' && (
|
||||
{item.type === 'EndDate' && (
|
||||
<View style={{ flex: 1 }}>
|
||||
<DateData />
|
||||
<DateFilter type="endDate" />
|
||||
</View>
|
||||
)}
|
||||
</ListItem>
|
||||
@@ -373,18 +308,55 @@ export default class ActivityFilter extends React.Component<
|
||||
onEndReachedThreshold={50}
|
||||
refreshing={loading}
|
||||
/>
|
||||
<DatePicker
|
||||
onConfirm={(date) => {
|
||||
if (setStartDate) {
|
||||
this.setState({
|
||||
workingStartDate: date,
|
||||
setStartDate: false
|
||||
});
|
||||
setStartDateFilter(date);
|
||||
} else {
|
||||
this.setState({
|
||||
workingEndDate: date,
|
||||
setEndDate: false
|
||||
});
|
||||
setEndDateFilter(date);
|
||||
}
|
||||
}}
|
||||
onCancel={() =>
|
||||
this.setState({
|
||||
setStartDate: false,
|
||||
setEndDate: false
|
||||
})
|
||||
}
|
||||
date={setStartDate ? workingStartDate : workingEndDate}
|
||||
minimumDate={
|
||||
setStartDate
|
||||
? undefined
|
||||
: startDate
|
||||
? startDate
|
||||
: undefined
|
||||
}
|
||||
maximumDate={
|
||||
setStartDate
|
||||
? endDate
|
||||
? endDate
|
||||
: new Date()
|
||||
: new Date()
|
||||
}
|
||||
mode="date"
|
||||
style={{
|
||||
height: 100,
|
||||
marginTop: 10,
|
||||
marginBottom: 20,
|
||||
alignSelf: 'center'
|
||||
}}
|
||||
modal
|
||||
open={setStartDate || setEndDate}
|
||||
locale={locale}
|
||||
/>
|
||||
</Screen>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
text: {
|
||||
paddingTop: 30,
|
||||
fontFamily: 'Lato-Regular'
|
||||
},
|
||||
button: {
|
||||
paddingTop: 15,
|
||||
paddingBottom: 10
|
||||
}
|
||||
});
|
||||
|
||||
@@ -8051,12 +8051,10 @@ react-native-crypto@2.2.0:
|
||||
public-encrypt "^4.0.0"
|
||||
randomfill "^1.0.3"
|
||||
|
||||
react-native-date-picker@4.2.6:
|
||||
version "4.2.6"
|
||||
resolved "https://registry.yarnpkg.com/react-native-date-picker/-/react-native-date-picker-4.2.6.tgz#3fb118c141401dcdebb3472ee1c69a0c1c8ff612"
|
||||
integrity sha512-qnSLefvCInFp1etQ27AsDzpCJgvi0Q0eIYRtIzjBp5WC5hzINIY7WWeQESAA/QUPbwFJU7Vk06ouQc51dC1Qaw==
|
||||
dependencies:
|
||||
prop-types "^15.8.1"
|
||||
react-native-date-picker@4.3.3:
|
||||
version "4.3.3"
|
||||
resolved "https://registry.yarnpkg.com/react-native-date-picker/-/react-native-date-picker-4.3.3.tgz#5ca4ca10283538ab9307b7f2dc6b83233ded122b"
|
||||
integrity sha512-Lq2hGZkwoyCMsxi/uw4KVGu4/xdPZ8AHEx2SU5KY2mipHFpX+r4n5/gXa+rpCRkARJaTFYPZ7S59bT9KMh7fGw==
|
||||
|
||||
react-native-elements@3.4.2:
|
||||
version "3.4.2"
|
||||
|
||||
Reference in New Issue
Block a user