Change frontend routing and prepare for edit

This commit is contained in:
cyril lopez 2017-11-15 14:00:51 +01:00
parent 20c436303a
commit 3d66f18e1a
14 changed files with 154 additions and 33 deletions

View File

@ -115,4 +115,4 @@
"webpack-hot-middleware": "^2.18.2",
"whatwg-fetch": "^2.0.3"
}
}
}

View File

@ -21,6 +21,10 @@ class InputSearch extends React.Component { // eslint-disable-line react/prefer-
if (nextProps.didDeleteUser !== this.props.didDeleteUser) {
this.setState({ users: nextProps.values, filteredUsers: nextProps.values });
}
if (nextProps.didGetUsers !== this.props.didGetUsers) {
this.setState({ users: nextProps.values, filteredUsers: nextProps.values });
}
}
handleChange = ({ target }) => {
@ -77,6 +81,7 @@ InputSearch.defaultProps = {
InputSearch.propTypes = {
didDeleteUser: PropTypes.bool.isRequired,
didGetUsers: PropTypes.bool.isRequired,
label: PropTypes.string.isRequired,
labelValues: PropTypes.object,
name: PropTypes.string.isRequired,

View File

@ -119,7 +119,7 @@ class ListRow extends React.Component { // eslint-disable-line react/prefer-stat
handleClick = () => {
switch (this.props.settingType) {
case 'roles':
return router.push(`${router.location.pathname}/${this.props.item.id}`);
return router.push(`${router.location.pathname}/edit/${this.props.item.id}`);
case 'providers':
case 'email-templates':
return router.push(`${router.location.pathname}#edit::${this.props.settingType}::${this.props.item.id}`);

View File

@ -39,7 +39,7 @@ class App extends React.Component {
<div className={pluginId}>
<Switch>
<Route path={`/plugins/${pluginId}/auth/:authType/:id?`} component={AuthPage} exact />
<Route path={`/plugins/${pluginId}/:settingType/:id`} component={EditPage} exact />
<Route path={`/plugins/${pluginId}/:settingType/:actionType/:id?`} component={EditPage} exact />
<Route path={`/plugins/${pluginId}/:settingType`} component={HomePage} exact />
<Route component={NotFoundPage} />
</Switch>

View File

@ -3,12 +3,15 @@
* EditPage actions
*
*/
import { List, Map } from 'immutable';
import {
ADD_USER,
GET_ROLE,
GET_ROLE_SUCCEEDED,
ON_CANCEL,
ON_CHANGE_INPUT,
ON_CLICK_DELETE,
SET_FORM,
} from './constants';
export function addUser(newUser) {
@ -18,6 +21,19 @@ export function addUser(newUser) {
};
}
export function getRole() {
return {
type: GET_ROLE,
};
}
export function getRoleSucceeded(data) {
return {
type: GET_ROLE_SUCCEEDED,
data,
};
}
export function onCancel() {
return {
type: ON_CANCEL,
@ -38,3 +54,21 @@ export function onClickDelete(itemToDelete) {
itemToDelete,
};
}
export function setForm() {
const form = Map({
name: '',
description: '',
users: List([
{ name: 'Pierre Burgy' },
{ name: 'Jim Laurie' },
{ name: 'Aurelien Georget' },
{ name: 'Cyril Lopez' },
]),
});
return {
type: SET_FORM,
form,
};
}

View File

@ -5,6 +5,9 @@
*/
export const ADD_USER = 'UsersPermissions/EditPage/ADD_USER';
export const GET_ROLE = 'UsersPermissions/EditPage/GET_ROLE';
export const GET_ROLE_SUCCEEDED = 'UsersPermissions/EditPage/GET_ROLE_SUCCEEDED';
export const ON_CANCEL = 'UsersPermissions/EditPage/ON_CANCEL';
export const ON_CHANGE_INPUT = 'UsersPermissions/EditPage/ON_CHANGE_INPUT';
export const ON_CLICK_DELETE = 'UsersPermissions/EditPage/ON_CLICK_DELETE';
export const SET_FORM = 'UsersPermissions/EditPage/SET_FORM';

View File

@ -28,6 +28,7 @@ import {
onCancel,
onChangeInput,
onClickDelete,
setForm,
} from './actions';
// Selectors
@ -39,6 +40,12 @@ import saga from './saga';
import styles from './styles.scss';
export class EditPage extends React.Component { // eslint-disable-line react/prefer-stateless-function
componentDidMount() {
if (this.props.match.params.actionType === 'create') {
this.props.setForm();
}
}
pluginHeaderActions = [
{
label: 'users-permissions.EditPage.cancel',
@ -55,13 +62,12 @@ export class EditPage extends React.Component { // eslint-disable-line react/pre
];
render() {
const pluginHeaderTitle = this.props.match.params.id === 'create' ?
const pluginHeaderTitle = this.props.match.params.actionType === 'create' ?
'users-permissions.EditPage.header.title.create'
: 'users-permissions.EditPage.header.title';
const pluginHeaderDescription = this.props.match.params.id === 'create' ?
const pluginHeaderDescription = this.props.match.params.actionType === 'create' ?
'users-permissions.EditPage.header.description.create'
: 'users-permissions.EditPage.header.description';
const pluginHeaderActions = this.props.editPage.showButtons ? this.pluginHeaderActions : [];
return (
@ -119,6 +125,7 @@ export class EditPage extends React.Component { // eslint-disable-line react/pre
<InputSearch
addUser={this.props.addUser}
didDeleteUser={this.props.editPage.didDeleteUser}
didGetUsers={this.props.editPage.didGetUsers}
label="users-permissions.EditPage.form.roles.label.users"
labelValues={{ number: size(get(this.props.editPage, ['modifiedData', 'users'])) }}
type="text"
@ -146,6 +153,7 @@ EditPage.propTypes = {
onCancel: PropTypes.func.isRequired,
onChangeInput: PropTypes.func.isRequired,
onClickDelete: PropTypes.func.isRequired,
setForm: PropTypes.func.isRequired,
};
const mapStateToProps = createStructuredSelector({
@ -159,6 +167,7 @@ function mapDispatchToProps(dispatch) {
onCancel,
onChangeInput,
onClickDelete,
setForm,
},
dispatch,
);

View File

@ -4,36 +4,20 @@
*
*/
import { fromJS, List, Map } from 'immutable';
import { fromJS, Map } from 'immutable';
import {
ADD_USER,
ON_CANCEL,
ON_CHANGE_INPUT,
ON_CLICK_DELETE,
SET_FORM,
} from './constants';
const initialState = fromJS({
didDeleteUser: false,
initialData: Map({
name: '',
description: '',
users: List([
{ name: 'Pierre Burgy' },
{ name: 'Jim Laurie' },
{ name: 'Aurelien Georget' },
{ name: 'Cyril Lopez' },
]),
}),
modifiedData: Map({
name: '',
description: '',
users: List([
{ name: 'Pierre Burgy' },
{ name: 'Jim Laurie' },
{ name: 'Aurelien Georget' },
{ name: 'Cyril Lopez' },
]),
}),
didGetUsers: false,
initialData: Map({}),
modifiedData: Map({}),
showButtons: false,
});
@ -56,6 +40,11 @@ function editPageReducer(state = initialState, action) {
.set('didDeleteUser', !state.get('didDeleteUser'))
.set('showButtons', true)
.updateIn(['modifiedData', 'users'], list => list.filter(o => o.name !== action.itemToDelete.name));
case SET_FORM:
return state
.set('didGetUsers', !state.get('didGetUsers'))
.set('initialData', action.form)
.set('modifiedData', action.form);
default:
return state;
}

View File

@ -47,9 +47,9 @@
"EditPage.form.roles.label.description": "Description",
"EditPage.form.roles.label.name": "Name",
"EditPage.form.roles.label.users": "Users associated with this role ({number})",
"EditPage.header.title": "{name}",
"EditPage.header.title": "{name} ",
"EditPage.header.title.create": "Create a new role",
"EditPage.header.description": "{description}",
"EditPage.header.description": "{description} ",
"EditPage.header.description.create": " ",
"HeaderNav.link.advancedSettings": "Advanced settings",

View File

@ -0,0 +1,44 @@
{
"1": {
"description": "Allow editing and deleting (except users)",
"name": "moderateur",
"users": [
{
"id": "11",
"name": "John Lennon"
},
{
"id": "12",
"name": "Paul McCartney"
},
{
"id": "13",
"name": "George Harrison"
},
{
"id": "14",
"name": "Ringo Starr"
}
],
"permissions": {
"application": {
"icon": "",
"description": "users-permissions.EditPage.permissions.application.description",
"controllers": {
"invoices": {
"actions": {
"delete": {
"enabled": true,
"policy": "entriesCreatedByUser"
},
"update": {
"enabled": false,
"policy": "entriesCreatedByUser"
}
}
}
}
}
}
}
}

View File

@ -0,0 +1,24 @@
{
"1": {
"description": "Allow editing and deleting (except users)",
"name": "moderateur",
"permissions": {
"application": {
"controllers": {
"invoices": {
"actions": {
"delete": {
"enabled": true,
"policy": "entriesCreatedByUser"
},
"update": {
"enabled": false,
"policy": "entriesCreatedByUser"
}
}
}
}
}
}
}
}

View File

@ -16,6 +16,14 @@
"policies": []
}
},
{
"method": "GET",
"path": "/roles/:id",
"handler": "UsersPermissions.getRole",
"config": {
"policies": []
}
},
{
"method": "POST",

View File

@ -13,6 +13,11 @@ module.exports = {
*
* @return {Object}
*/
getRole: async(ctx) => {
const { id } = ctx.params;
ctx.send({ ok: true });
},
index: async (ctx) => {
// Add your own logic here.

View File

@ -26,7 +26,7 @@
"dependencies": {},
"devDependencies": {
"cross-env": "^5.1.1",
"eslint": "^4.10.0",
"eslint": "^4.11.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-config-airbnb-base": "^11.3.2",
"eslint-config-prettier": "^2.7.0",
@ -37,7 +37,7 @@
"eslint-plugin-react": "^7.4.0",
"eslint-plugin-redux-saga": "^0.4.0",
"plop": "^1.9.0",
"prettier": "^1.7.4",
"prettier": "^1.8.2",
"rimraf": "^2.6.2",
"strapi-helper-plugin": "3.0.0-alpha.6.7",
"webpack": "^3.8.1"
@ -59,4 +59,4 @@
"npm": ">= 3.0.0"
},
"license": "MIT"
}
}