Browse Source

Improved profile display

Arnaud Vergnet 4 years ago
parent
commit
b118c98e93
1 changed files with 92 additions and 11 deletions
  1. 92
    11
      screens/Amicale/ProfileScreen.js

+ 92
- 11
screens/Amicale/ProfileScreen.js View File

@@ -1,20 +1,19 @@
1 1
 import * as React from 'react';
2
-import {View} from "react-native";
3
-import {Text, withTheme} from 'react-native-paper';
2
+import {ScrollView, StyleSheet} from "react-native";
3
+import {Avatar, Button, Card, Divider, List, withTheme} from 'react-native-paper';
4 4
 import AuthenticatedScreen from "../../components/AuthenticatedScreen";
5
+import {openBrowser} from "../../utils/WebBrowser";
5 6
 
6 7
 type Props = {
7 8
     navigation: Object,
8 9
     theme: Object,
9 10
 }
10 11
 
11
-type State = {
12
-}
12
+type State = {}
13 13
 
14 14
 class ProfileScreen extends React.Component<Props, State> {
15 15
 
16
-    state = {
17
-    };
16
+    state = {};
18 17
 
19 18
     colors: Object;
20 19
 
@@ -24,14 +23,84 @@ class ProfileScreen extends React.Component<Props, State> {
24 23
     }
25 24
 
26 25
     getScreen(data: Object) {
27
-
26
+        console.log(data);
28 27
         return (
29
-            <View>
30
-                <Text>{data.first_name} {Math.random()}</Text>
31
-            </View>
28
+            <ScrollView>
29
+                <Card style={styles.card}>
30
+                    <Card.Title
31
+                        title={data.first_name + ' ' + data.last_name}
32
+                        subtitle={data.email}
33
+                        left={(props) => <Avatar.Icon
34
+                            {...props}
35
+                            icon="account"
36
+                            color={this.colors.primary}
37
+                            style={styles.icon}
38
+                        />}
39
+                    />
40
+                    <Card.Content>
41
+                        <Divider/>
42
+                        <List.Section>
43
+                            <List.Subheader>INFORMATIONS PERSONNELLES</List.Subheader>
44
+                            <List.Item
45
+                                title={this.getFieldValue(data.birthday)}
46
+                                left={props => <List.Icon {...props} icon="cake-variant"/>}
47
+                            />
48
+                            <List.Item
49
+                                title={this.getFieldValue(data.phone)}
50
+                                left={props => <List.Icon {...props} icon="phone"/>}
51
+                            />
52
+                            <List.Item
53
+                                title={this.getFieldValue(data.email)}
54
+                                left={props => <List.Icon {...props} icon="email"/>}
55
+                            />
56
+                            <List.Item
57
+                                title={this.getFieldValue(data.branch)}
58
+                                left={props => <List.Icon {...props} icon="school"/>}
59
+                            />
60
+                        </List.Section>
61
+                        <Divider/>
62
+                        <Card.Actions>
63
+                            <Button
64
+                                icon="account-edit"
65
+                                mode="contained"
66
+                                onPress={() => openBrowser(data.link, this.colors.primary)}
67
+                                style={styles.editButton}>
68
+                                EDITER INFOS
69
+                            </Button>
70
+                        </Card.Actions>
71
+                    </Card.Content>
72
+                </Card>
73
+                <Card style={styles.card}>
74
+                    <Card.Content>
75
+                        <List.Section>
76
+                            <List.Subheader>ETAT COTISATION</List.Subheader>
77
+                            {this.getMembershipItem(data.validity)}
78
+                        </List.Section>
79
+                    </Card.Content>
80
+                </Card>
81
+            </ScrollView>
32 82
         )
33 83
     }
34 84
 
85
+    getMembershipItem(state: boolean) {
86
+        return (
87
+            <List.Item
88
+                title={state ? 'PAYÉ' : 'NON PAYÉ'}
89
+                left={props => <List.Icon
90
+                    {...props}
91
+                    color={state ? this.colors.success : this.colors.danger}
92
+                    icon={state ? 'check' : 'close'}
93
+                />}
94
+            />
95
+        );
96
+    }
97
+
98
+    getFieldValue(field: ?string) {
99
+        return field !== null
100
+            ? field
101
+            : 'NON RENSEIGNÉ';
102
+    }
103
+
35 104
     render() {
36 105
         return (
37 106
             <AuthenticatedScreen
@@ -41,7 +110,19 @@ class ProfileScreen extends React.Component<Props, State> {
41 110
             />
42 111
         );
43 112
     }
44
-
45 113
 }
46 114
 
115
+const styles = StyleSheet.create({
116
+    card: {
117
+        margin: 10,
118
+    },
119
+    icon: {
120
+        backgroundColor: 'transparent'
121
+    },
122
+    editButton: {
123
+        marginLeft: 'auto'
124
+    }
125
+
126
+});
127
+
47 128
 export default withTheme(ProfileScreen);

Loading…
Cancel
Save