mirror of
https://github.com/scm-manager/scm-manager.git
synced 2025-11-09 15:05:44 +01:00
Added bootstrapping for user table
This commit is contained in:
20
scm-ui/src/users/containers/UserRow.js
Normal file
20
scm-ui/src/users/containers/UserRow.js
Normal file
@@ -0,0 +1,20 @@
|
||||
// @flow
|
||||
import React from "react";
|
||||
|
||||
type Props = {
|
||||
user: any
|
||||
};
|
||||
|
||||
export default class UserRow extends React.Component<Props> {
|
||||
render() {
|
||||
return (
|
||||
<tr>
|
||||
<td>{this.props.user.displayName}</td>
|
||||
<td>{this.props.user.mail}</td>
|
||||
<td>
|
||||
<input type="checkbox" id="admin" checked={this.props.user.admin} />
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,48 +1,70 @@
|
||||
// @flow
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import React from "react";
|
||||
import { connect } from "react-redux";
|
||||
|
||||
import { fetchUsersIfNeeded } from '../modules/users';
|
||||
import Login from '../../containers/Login';
|
||||
import { fetchUsersIfNeeded, fetchUsers } from "../modules/users";
|
||||
import Login from "../../containers/Login";
|
||||
import UserRow from "./UserRow";
|
||||
|
||||
type Props = {
|
||||
login: boolean,
|
||||
error: any,
|
||||
users: any,
|
||||
fetchUsersIfNeeded: () => void
|
||||
}
|
||||
fetchUsersIfNeeded: () => void,
|
||||
fetchUsers: () => void
|
||||
};
|
||||
|
||||
class Users extends React.Component<Props> {
|
||||
|
||||
componentDidMount() {
|
||||
this.props.fetchUsersIfNeeded();
|
||||
componentWillMount() {
|
||||
this.props.fetchUsers();
|
||||
}
|
||||
|
||||
render() {
|
||||
const { login, error, users } = this.props;
|
||||
|
||||
|
||||
if (this.props.users) {
|
||||
return (
|
||||
<div>
|
||||
<h1>SCM</h1>
|
||||
<h2>Users</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>E-Mail</th>
|
||||
<th>Admin</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{this.props.users.map((user, index) => {
|
||||
return <UserRow key={index} user={user} />;
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
|
||||
} else {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return null;
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
users: state.users.users
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
const mapDispatchToProps = dispatch => {
|
||||
return {
|
||||
fetchUsersIfNeeded: () => {
|
||||
dispatch(fetchUsersIfNeeded())
|
||||
}
|
||||
dispatch(fetchUsersIfNeeded());
|
||||
},
|
||||
fetchUsers: () => {
|
||||
dispatch(fetchUsers());
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Users);
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(Users);
|
||||
|
||||
@@ -4,16 +4,38 @@ const FETCH_USERS = "scm/users/FETCH";
|
||||
const FETCH_USERS_SUCCESS = "scm/users/FETCH_SUCCESS";
|
||||
const FETCH_USERS_FAILURE = "scm/users/FETCH_FAILURE";
|
||||
|
||||
const USERS_URL = "/scm/api/rest/v2/users";
|
||||
|
||||
function requestUsers() {
|
||||
return {
|
||||
type: FETCH_USERS
|
||||
};
|
||||
}
|
||||
|
||||
function fetchUsers() {
|
||||
export function fetchUsers() {
|
||||
return function(dispatch) {
|
||||
dispatch(requestUsers());
|
||||
return null;
|
||||
// dispatch(requestUsers());
|
||||
return fetch(USERS_URL, {
|
||||
credentials: "same-origin",
|
||||
headers: {
|
||||
Cache: "no-cache"
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
return response.json();
|
||||
}
|
||||
})
|
||||
.then(data => {
|
||||
dispatch(fetchUsersSuccess(data));
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
function fetchUsersSuccess(users: any) {
|
||||
return {
|
||||
type: FETCH_USERS_SUCCESS,
|
||||
payload: users
|
||||
};
|
||||
}
|
||||
|
||||
@@ -35,16 +57,14 @@ export default function reducer(state: any = {}, action: any = {}) {
|
||||
case FETCH_USERS:
|
||||
return {
|
||||
...state,
|
||||
login: true,
|
||||
error: null
|
||||
users: [{ name: "" }]
|
||||
};
|
||||
case FETCH_USERS_SUCCESS:
|
||||
return {
|
||||
...state,
|
||||
login: false,
|
||||
timestamp: action.timestamp,
|
||||
error: null,
|
||||
users: action.payload
|
||||
users: action.payload._embedded.users
|
||||
};
|
||||
case FETCH_USERS_FAILURE:
|
||||
return {
|
||||
|
||||
Reference in New Issue
Block a user