|
@@ -1,148 +1,166 @@
|
1
|
1
|
// @flow
|
2
|
2
|
|
3
|
3
|
import * as React from 'react';
|
4
|
|
-import {StackNavigationProp} from "@react-navigation/stack";
|
5
|
|
-import type {CustomTheme} from "../../../managers/ThemeManager";
|
6
|
|
-import {Button, Card, Paragraph, withTheme} from "react-native-paper";
|
7
|
|
-import type {ServiceCategory, ServiceItem} from "../../../managers/ServicesManager";
|
8
|
|
-import DashboardManager from "../../../managers/DashboardManager";
|
9
|
|
-import DashboardItem from "../../../components/Home/EventDashboardItem";
|
10
|
|
-import {FlatList} from "react-native";
|
11
|
|
-import {View} from "react-native-animatable";
|
12
|
|
-import DashboardEditAccordion from "../../../components/Lists/DashboardEdit/DashboardEditAccordion";
|
13
|
|
-import DashboardEditPreviewItem from "../../../components/Lists/DashboardEdit/DashboardEditPreviewItem";
|
14
|
|
-import AsyncStorageManager from "../../../managers/AsyncStorageManager";
|
15
|
|
-import i18n from "i18n-js";
|
16
|
|
-import CollapsibleFlatList from "../../../components/Collapsible/CollapsibleFlatList";
|
17
|
|
-
|
18
|
|
-type Props = {
|
19
|
|
- navigation: StackNavigationProp,
|
20
|
|
- theme: CustomTheme,
|
|
4
|
+import {StackNavigationProp} from '@react-navigation/stack';
|
|
5
|
+import {Button, Card, Paragraph, withTheme} from 'react-native-paper';
|
|
6
|
+import {FlatList} from 'react-native';
|
|
7
|
+import {View} from 'react-native-animatable';
|
|
8
|
+import i18n from 'i18n-js';
|
|
9
|
+import type {
|
|
10
|
+ ServiceCategoryType,
|
|
11
|
+ ServiceItemType,
|
|
12
|
+} from '../../../managers/ServicesManager';
|
|
13
|
+import DashboardManager from '../../../managers/DashboardManager';
|
|
14
|
+import DashboardItem from '../../../components/Home/EventDashboardItem';
|
|
15
|
+import DashboardEditAccordion from '../../../components/Lists/DashboardEdit/DashboardEditAccordion';
|
|
16
|
+import DashboardEditPreviewItem from '../../../components/Lists/DashboardEdit/DashboardEditPreviewItem';
|
|
17
|
+import AsyncStorageManager from '../../../managers/AsyncStorageManager';
|
|
18
|
+import CollapsibleFlatList from '../../../components/Collapsible/CollapsibleFlatList';
|
|
19
|
+
|
|
20
|
+type PropsType = {
|
|
21
|
+ navigation: StackNavigationProp,
|
21
|
22
|
};
|
22
|
23
|
|
23
|
|
-type State = {
|
24
|
|
- currentDashboard: Array<ServiceItem>,
|
25
|
|
- currentDashboardIdList: Array<string>,
|
26
|
|
- activeItem: number,
|
|
24
|
+type StateType = {
|
|
25
|
+ currentDashboard: Array<ServiceItemType | null>,
|
|
26
|
+ currentDashboardIdList: Array<string>,
|
|
27
|
+ activeItem: number,
|
27
|
28
|
};
|
28
|
29
|
|
29
|
30
|
/**
|
30
|
31
|
* Class defining the Settings screen. This screen shows controls to modify app preferences.
|
31
|
32
|
*/
|
32
|
|
-class DashboardEditScreen extends React.Component<Props, State> {
|
33
|
|
-
|
34
|
|
- content: Array<ServiceCategory>;
|
35
|
|
- initialDashboard: Array<ServiceItem>;
|
36
|
|
- initialDashboardIdList: Array<string>;
|
37
|
|
-
|
38
|
|
- constructor(props: Props) {
|
39
|
|
- super(props);
|
40
|
|
- let dashboardManager = new DashboardManager(this.props.navigation);
|
41
|
|
- this.initialDashboardIdList = AsyncStorageManager.getObject(AsyncStorageManager.PREFERENCES.dashboardItems.key);
|
42
|
|
- this.initialDashboard = dashboardManager.getCurrentDashboard();
|
43
|
|
- this.state = {
|
44
|
|
- currentDashboard: [...this.initialDashboard],
|
45
|
|
- currentDashboardIdList: [...this.initialDashboardIdList],
|
46
|
|
- activeItem: 0,
|
47
|
|
- }
|
48
|
|
- this.content = dashboardManager.getCategories();
|
49
|
|
- }
|
50
|
|
-
|
51
|
|
- dashboardRowRenderItem = ({item, index}: { item: DashboardItem, index: number }) => {
|
52
|
|
- return (
|
53
|
|
- <DashboardEditPreviewItem
|
54
|
|
- image={item.image}
|
55
|
|
- onPress={() => this.setState({activeItem: index})}
|
56
|
|
- isActive={this.state.activeItem === index}
|
57
|
|
- />
|
58
|
|
- );
|
59
|
|
- };
|
60
|
|
-
|
61
|
|
- getDashboard(content: Array<DashboardItem>) {
|
62
|
|
- return (
|
63
|
|
- <FlatList
|
64
|
|
- data={content}
|
65
|
|
- extraData={this.state}
|
66
|
|
- renderItem={this.dashboardRowRenderItem}
|
67
|
|
- horizontal={true}
|
68
|
|
- contentContainerStyle={{
|
69
|
|
- marginLeft: 'auto',
|
70
|
|
- marginRight: 'auto',
|
71
|
|
- marginTop: 5,
|
72
|
|
- }}
|
73
|
|
- />);
|
74
|
|
- }
|
75
|
|
-
|
76
|
|
- renderItem = ({item}: { item: ServiceCategory }) => {
|
77
|
|
- return (
|
78
|
|
- <DashboardEditAccordion
|
79
|
|
- item={item}
|
80
|
|
- onPress={this.updateDashboard}
|
81
|
|
- activeDashboard={this.state.currentDashboardIdList}
|
82
|
|
- />
|
83
|
|
- );
|
|
33
|
+class DashboardEditScreen extends React.Component<PropsType, StateType> {
|
|
34
|
+ content: Array<ServiceCategoryType>;
|
|
35
|
+
|
|
36
|
+ initialDashboard: Array<ServiceItemType | null>;
|
|
37
|
+
|
|
38
|
+ initialDashboardIdList: Array<string>;
|
|
39
|
+
|
|
40
|
+ constructor(props: PropsType) {
|
|
41
|
+ super(props);
|
|
42
|
+ const dashboardManager = new DashboardManager(props.navigation);
|
|
43
|
+ this.initialDashboardIdList = AsyncStorageManager.getObject(
|
|
44
|
+ AsyncStorageManager.PREFERENCES.dashboardItems.key,
|
|
45
|
+ );
|
|
46
|
+ this.initialDashboard = dashboardManager.getCurrentDashboard();
|
|
47
|
+ this.state = {
|
|
48
|
+ currentDashboard: [...this.initialDashboard],
|
|
49
|
+ currentDashboardIdList: [...this.initialDashboardIdList],
|
|
50
|
+ activeItem: 0,
|
84
|
51
|
};
|
85
|
|
-
|
86
|
|
- updateDashboard = (service: ServiceItem) => {
|
87
|
|
- let currentDashboard = this.state.currentDashboard;
|
88
|
|
- let currentDashboardIdList = this.state.currentDashboardIdList;
|
89
|
|
- currentDashboard[this.state.activeItem] = service;
|
90
|
|
- currentDashboardIdList[this.state.activeItem] = service.key;
|
91
|
|
- this.setState({
|
92
|
|
- currentDashboard: currentDashboard,
|
93
|
|
- currentDashboardIdList: currentDashboardIdList,
|
94
|
|
- });
|
95
|
|
- AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.dashboardItems.key, currentDashboardIdList);
|
96
|
|
- }
|
97
|
|
-
|
98
|
|
- undoDashboard = () => {
|
99
|
|
- this.setState({
|
100
|
|
- currentDashboard: [...this.initialDashboard],
|
101
|
|
- currentDashboardIdList: [...this.initialDashboardIdList]
|
102
|
|
- });
|
103
|
|
- AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.dashboardItems.key, this.initialDashboardIdList);
|
104
|
|
- }
|
105
|
|
-
|
106
|
|
- getListHeader() {
|
107
|
|
- return (
|
108
|
|
- <Card style={{margin: 5}}>
|
109
|
|
- <Card.Content>
|
110
|
|
- <View style={{padding: 5}}>
|
111
|
|
- <Button
|
112
|
|
- mode={"contained"}
|
113
|
|
- onPress={this.undoDashboard}
|
114
|
|
- style={{
|
115
|
|
- marginLeft: "auto",
|
116
|
|
- marginRight: "auto",
|
117
|
|
- marginBottom: 10,
|
118
|
|
- }}
|
119
|
|
- >
|
120
|
|
- {i18n.t("screens.settings.dashboardEdit.undo")}
|
121
|
|
- </Button>
|
122
|
|
- <View style={{height: 50}}>
|
123
|
|
- {this.getDashboard(this.state.currentDashboard)}
|
124
|
|
- </View>
|
125
|
|
- </View>
|
126
|
|
- <Paragraph style={{textAlign: "center"}}>
|
127
|
|
- {i18n.t("screens.settings.dashboardEdit.message")}
|
128
|
|
- </Paragraph>
|
129
|
|
- </Card.Content>
|
130
|
|
- </Card>
|
131
|
|
- );
|
132
|
|
- }
|
133
|
|
-
|
134
|
|
-
|
135
|
|
- render() {
|
136
|
|
- return (
|
137
|
|
- <CollapsibleFlatList
|
138
|
|
- data={this.content}
|
139
|
|
- renderItem={this.renderItem}
|
140
|
|
- ListHeaderComponent={this.getListHeader()}
|
141
|
|
- style={{}}
|
142
|
|
- />
|
143
|
|
- );
|
144
|
|
- }
|
145
|
|
-
|
|
52
|
+ this.content = dashboardManager.getCategories();
|
|
53
|
+ }
|
|
54
|
+
|
|
55
|
+ getDashboardRowRenderItem = ({
|
|
56
|
+ item,
|
|
57
|
+ index,
|
|
58
|
+ }: {
|
|
59
|
+ item: DashboardItem,
|
|
60
|
+ index: number,
|
|
61
|
+ }): React.Node => {
|
|
62
|
+ const {activeItem} = this.state;
|
|
63
|
+ return (
|
|
64
|
+ <DashboardEditPreviewItem
|
|
65
|
+ image={item.image}
|
|
66
|
+ onPress={() => {
|
|
67
|
+ this.setState({activeItem: index});
|
|
68
|
+ }}
|
|
69
|
+ isActive={activeItem === index}
|
|
70
|
+ />
|
|
71
|
+ );
|
|
72
|
+ };
|
|
73
|
+
|
|
74
|
+ getDashboard(content: Array<DashboardItem>): React.Node {
|
|
75
|
+ return (
|
|
76
|
+ <FlatList
|
|
77
|
+ data={content}
|
|
78
|
+ extraData={this.state}
|
|
79
|
+ renderItem={this.getDashboardRowRenderItem}
|
|
80
|
+ horizontal
|
|
81
|
+ contentContainerStyle={{
|
|
82
|
+ marginLeft: 'auto',
|
|
83
|
+ marginRight: 'auto',
|
|
84
|
+ marginTop: 5,
|
|
85
|
+ }}
|
|
86
|
+ />
|
|
87
|
+ );
|
|
88
|
+ }
|
|
89
|
+
|
|
90
|
+ getRenderItem = ({item}: {item: ServiceCategoryType}): React.Node => {
|
|
91
|
+ const {currentDashboardIdList} = this.state;
|
|
92
|
+ return (
|
|
93
|
+ <DashboardEditAccordion
|
|
94
|
+ item={item}
|
|
95
|
+ onPress={this.updateDashboard}
|
|
96
|
+ activeDashboard={currentDashboardIdList}
|
|
97
|
+ />
|
|
98
|
+ );
|
|
99
|
+ };
|
|
100
|
+
|
|
101
|
+ getListHeader(): React.Node {
|
|
102
|
+ const {currentDashboard} = this.state;
|
|
103
|
+ return (
|
|
104
|
+ <Card style={{margin: 5}}>
|
|
105
|
+ <Card.Content>
|
|
106
|
+ <View style={{padding: 5}}>
|
|
107
|
+ <Button
|
|
108
|
+ mode="contained"
|
|
109
|
+ onPress={this.undoDashboard}
|
|
110
|
+ style={{
|
|
111
|
+ marginLeft: 'auto',
|
|
112
|
+ marginRight: 'auto',
|
|
113
|
+ marginBottom: 10,
|
|
114
|
+ }}>
|
|
115
|
+ {i18n.t('screens.settings.dashboardEdit.undo')}
|
|
116
|
+ </Button>
|
|
117
|
+ <View style={{height: 50}}>
|
|
118
|
+ {this.getDashboard(currentDashboard)}
|
|
119
|
+ </View>
|
|
120
|
+ </View>
|
|
121
|
+ <Paragraph style={{textAlign: 'center'}}>
|
|
122
|
+ {i18n.t('screens.settings.dashboardEdit.message')}
|
|
123
|
+ </Paragraph>
|
|
124
|
+ </Card.Content>
|
|
125
|
+ </Card>
|
|
126
|
+ );
|
|
127
|
+ }
|
|
128
|
+
|
|
129
|
+ updateDashboard = (service: ServiceItemType) => {
|
|
130
|
+ const {currentDashboard, currentDashboardIdList, activeItem} = this.state;
|
|
131
|
+ currentDashboard[activeItem] = service;
|
|
132
|
+ currentDashboardIdList[activeItem] = service.key;
|
|
133
|
+ this.setState({
|
|
134
|
+ currentDashboard,
|
|
135
|
+ currentDashboardIdList,
|
|
136
|
+ });
|
|
137
|
+ AsyncStorageManager.set(
|
|
138
|
+ AsyncStorageManager.PREFERENCES.dashboardItems.key,
|
|
139
|
+ currentDashboardIdList,
|
|
140
|
+ );
|
|
141
|
+ };
|
|
142
|
+
|
|
143
|
+ undoDashboard = () => {
|
|
144
|
+ this.setState({
|
|
145
|
+ currentDashboard: [...this.initialDashboard],
|
|
146
|
+ currentDashboardIdList: [...this.initialDashboardIdList],
|
|
147
|
+ });
|
|
148
|
+ AsyncStorageManager.set(
|
|
149
|
+ AsyncStorageManager.PREFERENCES.dashboardItems.key,
|
|
150
|
+ this.initialDashboardIdList,
|
|
151
|
+ );
|
|
152
|
+ };
|
|
153
|
+
|
|
154
|
+ render(): React.Node {
|
|
155
|
+ return (
|
|
156
|
+ <CollapsibleFlatList
|
|
157
|
+ data={this.content}
|
|
158
|
+ renderItem={this.getRenderItem}
|
|
159
|
+ ListHeaderComponent={this.getListHeader()}
|
|
160
|
+ style={{}}
|
|
161
|
+ />
|
|
162
|
+ );
|
|
163
|
+ }
|
146
|
164
|
}
|
147
|
165
|
|
148
|
166
|
export default withTheme(DashboardEditScreen);
|