Handle front end role post

packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/actions.js

@@ -14,7 +14,12 @@ import {
   ON_CANCEL,
   ON_CHANGE_INPUT,
   ON_CLICK_DELETE,
+  SET_ACTION_TYPE,
+  SET_ERRORS,
   SET_FORM,
+  SUBMIT,
+  SUBMIT_ERROR,
+  SUBMIT_SUCCEEDED,
 } from './constants';
 
 export function addUser(newUser) {
@@ -82,17 +87,27 @@ export function onClickDelete(itemToDelete) {
     itemToDelete,
   };
 }
+export function setActionType(action) {
+  const actionType = action === 'create' ? 'POST' : 'PUT';
+
+  return {
+    type: SET_ACTION_TYPE,
+    actionType,
+  };
+}
+
+export function setErrors(formErrors) {
+  return {
+    type: SET_ERRORS,
+    formErrors,
+  };
+}
 
 export function setForm() {
   const form = Map({
     name: '',
     description: '',
-    users: List([
-      { name: 'Pierre Burgy' },
-      { name: 'Jim Laurie' },
-      { name: 'Aurelien Georget' },
-      { name: 'Cyril Lopez' },
-    ]),
+    users: List([]),
     permissions: Map({}),
   });
 
@@ -101,3 +116,22 @@ export function setForm() {
     form,
   };
 }
+
+export function submit() {
+  return {
+    type: SUBMIT,
+  };
+}
+
+export function submitError(errors) {
+  return {
+    type: SUBMIT_ERROR,
+    errors,
+  };
+}
+
+export function submitSucceeded() {
+  return {
+    type: SUBMIT_SUCCEEDED,
+  };
+}

packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/constants.js

@@ -12,4 +12,9 @@ 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_ACTION_TYPE = 'UsersPermissions/EditPage/SET_ACTION_TYPE';
+export const SET_ERRORS = 'UsersPermissions/EditPage/SET_ERRORS';
 export const SET_FORM = 'UsersPermissions/EditPage/SET_FORM';
+export const SUBMIT = 'UsersPermissions/EditPage/SUBMIT';
+export const SUBMIT_ERROR = 'UsersPermissions/EditPage/SUBMIT_ERROR';
+export const SUBMIT_SUCCEEDED = 'UsersPermissions/EditPage/SUBMIT_SUCCEEDED';

packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/index.js

@@ -10,7 +10,7 @@ import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators, compose } from 'redux';
 import { FormattedMessage } from 'react-intl';
-import { get, isEqual, size } from 'lodash';
+import { findIndex, get, isEmpty, isEqual, size } from 'lodash';
 import cn from 'classnames';
 
 // Design
@@ -31,7 +31,10 @@ import {
   onCancel,
   onChangeInput,
   onClickDelete,
+  setActionType,
+  setErrors,
   setForm,
+  submit,
 } from './actions';
 
 // Selectors
@@ -50,14 +53,39 @@ export class EditPage extends React.Component { // eslint-disable-line react/pre
   );
 
   componentDidMount() {
+    this.props.setActionType(this.props.match.params.actionType);
+
     if (this.props.match.params.actionType === 'create') {
+      // Set reducer modifiedData
       this.props.setForm();
+      // Get the available permissions
       this.props.getPermissions();
     } else {
       this.props.getRole(this.props.match.params.id);
     }
   }
 
+  componentWillReceiveProps(nextProps) {
+    // Redirect user to HomePage if submit ok
+    if (nextProps.editPage.didSubmit !== this.props.editPage.didSubmit) {
+      this.props.history.push('/plugins/users-permissions/roles');
+    }
+  }
+
+  componentWillUnmount() {
+    // Empty formErrors
+    this.props.setErrors([]);
+  }
+
+  handleSubmit = () => {
+    // Check if the name field is filled
+    if (isEmpty(get(this.props.editPage, ['modifiedData', 'name']))) {
+      return this.props.setErrors([{ name: 'name', errors: [{ id: 'users-permissions.EditPage.form.roles.name.error' }] }]);
+    }
+    
+    this.props.submit();
+  }
+
   pluginHeaderActions = [
     {
       label: 'users-permissions.EditPage.cancel',
@@ -68,7 +96,7 @@ export class EditPage extends React.Component { // eslint-disable-line react/pre
     {
       kind: 'primary',
       label: 'users-permissions.EditPage.submit',
-      onClick: () => console.log('submit'),
+      onClick: this.handleSubmit,
       type: 'submit',
     },
   ];
@@ -114,6 +142,8 @@ export class EditPage extends React.Component { // eslint-disable-line react/pre
                         <Input
                           autoFocus
                           customBootstrapClass="col-md-12"
+                          errors={get(this.props.editPage, ['formErrors', findIndex(this.props.editPage.formErrors, ['name', 'name']), 'errors'])}
+                          didCheckErrors={this.props.editPage.didCheckErrors}
                           label="users-permissions.EditPage.form.roles.label.name"
                           name="name"
                           onChange={this.props.onChangeInput}
@@ -179,7 +209,10 @@ EditPage.propTypes = {
   onCancel: PropTypes.func.isRequired,
   onChangeInput: PropTypes.func.isRequired,
   onClickDelete: PropTypes.func.isRequired,
+  setActionType: PropTypes.func.isRequired,
+  setErrors: PropTypes.func.isRequired,
   setForm: PropTypes.func.isRequired,
+  submit: PropTypes.func.isRequired,
 };
 
 const mapStateToProps = createStructuredSelector({
@@ -195,7 +228,10 @@ function mapDispatchToProps(dispatch) {
       onCancel,
       onChangeInput,
       onClickDelete,
+      setActionType,
+      setErrors,
       setForm,
+      submit,
     },
     dispatch,
   );

packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/reducer.js

@@ -4,7 +4,7 @@
  *
  */
 
-import { fromJS, Map } from 'immutable';
+import { fromJS, List, Map } from 'immutable';
 import {
   ADD_USER,
   GET_PERMISSIONS_SUCCEEDED,
@@ -12,12 +12,20 @@ import {
   ON_CANCEL,
   ON_CHANGE_INPUT,
   ON_CLICK_DELETE,
+  SET_ACTION_TYPE,
+  SET_ERRORS,
   SET_FORM,
+  SUBMIT_ERROR,
+  SUBMIT_SUCCEEDED,
 } from './constants';
 
 const initialState = fromJS({
+  actionType: '',
+  didCheckErrors: false,
   didDeleteUser: false,
   didGetUsers: false,
+  didSubmit: false,
+  formErrors: List([]),
   initialData: Map({}),
   modifiedData: Map({}),
 });
@@ -38,6 +46,8 @@ function editPageReducer(state = initialState, action) {
         .set('modifiedData', action.form);
     case ON_CANCEL:
       return state
+        .set('didCheckErrors', !state.get('didCheckErrors'))
+        .set('formErrors', List([]))
         .set('didDeleteUser', !state.get('didDeleteUser'))
         .set('modifiedData', state.get('initialData'));
     case ON_CHANGE_INPUT:
@@ -47,11 +57,25 @@ function editPageReducer(state = initialState, action) {
       return state
         .set('didDeleteUser', !state.get('didDeleteUser'))
         .updateIn(['modifiedData', 'users'], list => list.filter(o => o.name !== action.itemToDelete.name));
+    case SET_ACTION_TYPE:
+      return state
+        .set('formErrors', List([]))
+        .set('actionType', action.actionType);
+    case SET_ERRORS:
+      return state
+        .set('formErrors', List(action.formErrors))
+        .set('didCheckErrors', !state.get('didCheckErrors'));
     case SET_FORM:
       return state
         .set('didGetUsers', !state.get('didGetUsers'))
         .set('initialData', action.form)
         .set('modifiedData', action.form);
+    case SUBMIT_ERROR:
+      return state
+        .set('formErrors', List(action.errors));
+    case SUBMIT_SUCCEEDED:
+      return state
+        .set('didSubmit', !state.get('didSubmit'));
     default:
       return state;
   }

packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/saga.js

@@ -4,7 +4,7 @@ import {
   cancel,
   fork,
   put,
-  // select,
+  select,
   take,
   takeLatest,
 } from 'redux-saga/effects';
@@ -13,13 +13,20 @@ import request from 'utils/request';
 import {
   getPermissionsSucceeded,
   getRoleSucceeded,
+  submitSucceeded,
 } from './actions';
 
 import {
   GET_PERMISSIONS,
   GET_ROLE,
+  SUBMIT,
 } from './constants';
 
+import {
+  makeSelectActionType,
+  makeSelectModifiedData,
+} from './selectors';
+
 export function* permissionsGet() {
   try {
     const response = yield call(request, '/users-permissions/permissions', { method: 'GET' });
@@ -39,10 +46,32 @@ export function* roleGet(action) {
   }
 }
 
+export function* submit() {
+  try {
+    const actionType = yield select(makeSelectActionType());
+    const body = yield select(makeSelectModifiedData());
+    const opts = {
+      method: actionType,
+      body,
+    };
+
+    // TODO : handle PUT url
+    const requestURL = actionType === 'POST' ? '/users-permissions/roles' : '/users-permissions/roles/id';
+    yield call(request, requestURL, opts);
+
+    yield put(submitSucceeded());
+
+  } catch(error) {
+    console.log(error.response.payload);
+    // TODO handle error message
+  }
+}
+
 export default function* defaultSaga() {
   const loadPermissionsWatcher = yield fork(takeLatest, GET_PERMISSIONS, permissionsGet);
   const loadRoleWatcher = yield fork(takeLatest, GET_ROLE, roleGet);
 
+  yield fork(takeLatest, SUBMIT, submit);
   yield take(LOCATION_CHANGE);
 
   yield cancel(loadPermissionsWatcher);

packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/selectors.js

@@ -16,10 +16,22 @@ const selectEditPageDomain = () => (state) => state.get('editPage');
 
 const makeSelectEditPage = () => createSelector(
   selectEditPageDomain(),
-  (substate) => substate.toJS()
+  (substate) => substate.toJS(),
+);
+
+const makeSelectActionType = () => createSelector(
+  selectEditPageDomain(),
+  (substate) => substate.get('actionType'),
+);
+
+const makeSelectModifiedData = () => createSelector(
+  selectEditPageDomain(),
+  (substate) => substate.get('modifiedData').toJS(),
 );
 
 export default makeSelectEditPage;
 export {
+  makeSelectActionType,
+  makeSelectModifiedData,
   selectEditPageDomain,
 };

packages/strapi-plugin-users-permissions/admin/src/translations/en.json

@@ -60,6 +60,7 @@
   "EditPage.form.roles.label.description": "Description",
   "EditPage.form.roles.label.name": "Name",
   "EditPage.form.roles.label.users": "Users associated with this role ({number})",
+  "EditPage.form.roles.name.error": "This value input is required.",
   "EditPage.header.title": "{name} ",
   "EditPage.header.title.create": "Create a new role",
   "EditPage.header.description": "{description} ",

packages/strapi-plugin-users-permissions/admin/src/translations/fr.json

@@ -60,6 +60,7 @@
   "EditPage.form.roles.label.description": "Description",
   "EditPage.form.roles.label.name": "Nom",
   "EditPage.form.roles.label.users": "Utilisateurs associés avec ce rôle ({number})",
+  "EditPage.form.roles.name.error": "Ce champ est obligatoire.",
   "EditPage.header.title": "{name} ",
   "EditPage.header.title.create": "Créez un nouveau rôle",
   "EditPage.header.description": "{description} ",

packages/strapi-plugin-users-permissions/config/routes.json

@@ -34,7 +34,7 @@
     },
     {
       "method": "POST",
-      "path": "/permissions",
+      "path": "/roles",
       "handler": "UsersPermissions.createRole",
       "config": {
         "policies": []