summaryrefslogtreecommitdiffstats
path: root/web/react/components/member_list_team.jsx
blob: 3613d97d8657f5f737f1dd1d90697c0c0e6b06b8 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
// See License.txt for license information.

var ChannelStore = require('../stores/channel_store.jsx');
var UserStore = require('../stores/user_store.jsx');
var Client = require('../utils/client.jsx');
var AsyncClient = require('../utils/async_client.jsx');

var MemberListTeamItem = React.createClass({
    handleMakeMember: function() {
        var data = {};
        data["user_id"] = this.props.user.id;
        data["new_roles"] = "";

        Client.updateRoles(data,
            function(data) {
                AsyncClient.getProfiles();
            }.bind(this),
            function(err) {
                this.setState({ server_error: err.message });
            }.bind(this)
        );
    },
    handleMakeActive: function() {
        Client.updateActive(this.props.user.id, true,
            function(data) {
                AsyncClient.getProfiles();
            }.bind(this),
            function(err) {
                this.setState({ server_error: err.message });
            }.bind(this)
        );
    },
    handleMakeNotActive: function() {
        Client.updateActive(this.props.user.id, false,
            function(data) {
                AsyncClient.getProfiles();
            }.bind(this),
            function(err) {
                this.setState({ server_error: err.message });
            }.bind(this)
        );
    },
    handleMakeAdmin: function() {
        var data = {};
        data["user_id"] = this.props.user.id;
        data["new_roles"] = "admin";

        Client.updateRoles(data,
            function(data) {
                AsyncClient.getProfiles();
            }.bind(this),
            function(err) {
                this.setState({ server_error: err.message });
            }.bind(this)
        );
    },
     getInitialState: function() {
        return {};
    },
    render: function() {
        var server_error = this.state.server_error ? <div style={{ clear: "both" }} className="has-error"><label className='has-error control-label'>{this.state.server_error}</label></div> : null;
        var user = this.props.user;
        var currentRoles = "Member"

        if (user.roles.length > 0) {
            currentRoles = user.roles.charAt(0).toUpperCase() + user.roles.slice(1);
        }

        var email = user.email.length > 0 ? user.email : "";
        var showMakeMember = user.roles == "admin";
        var showMakeAdmin = user.roles == "";
        var showMakeActive = false;
        var showMakeNotActive = true;

        if (user.delete_at > 0) {
            currentRoles = "Inactive";
            showMakeMember = false;
            showMakeAdmin = false;
            showMakeActive = true;
            showMakeNotActive = false;
        }

        return (
            <div className="row member-div">
                <img className="post-profile-img pull-left" src={"/api/v1/users/" + user.id + "/image"} height="36" width="36" />
                <span className="member-name">{user.full_name.trim() ? user.full_name : user.username}</span>
                <span className="member-email">{user.full_name.trim() ? user.username : email}</span>
                <div className="dropdown member-drop">
                    <a href="#" className="dropdown-toggle theme" type="button" id="channel_header_dropdown" data-toggle="dropdown" aria-expanded="true">
                        <span>{currentRoles}  </span>
                        <span className="caret"></span>
                    </a>
                    <ul className="dropdown-menu member-menu" role="menu" aria-labelledby="channel_header_dropdown">
                        { showMakeAdmin ? <li role="presentation"><a role="menuitem" onClick={this.handleMakeAdmin}>Make Admin</a></li> : "" }
                        { showMakeMember ? <li role="presentation"><a role="menuitem" onClick={this.handleMakeMember}>Make Member</a></li> : "" }
                        { showMakeActive ? <li role="presentation"><a role="menuitem" onClick={this.handleMakeActive}>Make Active</a></li> : "" }
                        { showMakeNotActive ? <li role="presentation"><a role="menuitem" onClick={this.handleMakeNotActive}>Make Inactive</a></li> : "" }
                    </ul>
                </div>
                { server_error }
            </div>
        );
    }
});


module.exports = React.createClass({
    render: function() {
        return (
            <div className="member-list-holder">
                {
                    this.props.users.map(function(user) {
                        return <MemberListTeamItem key={user.id} user={user} />;
                    }, this)
                }
            </div>
        );
    }
});